/* ---------------------------------------------------------------------------
   Sistema de cores (12/07, reforma visual) - baseado na marca de verdade da
   FN Engenharia: vinho/marsala (`--vinho`, tirado da barra de contato do
   site oficial e do tom da bola da logo) como cor PRINCIPAL, dourado/âmbar
   (`--dourado`, tirado da barra de menu do site) só como DESTAQUE PONTUAL
   (badge, estado ativo/selecionado, ícone) - nunca como fundo grande de
   tela, pra manter sóbrio (pedido do Paulo).
   --------------------------------------------------------------------------- */
:root {
  --vinho: #6B322F;
  --vinho-escuro: #4A2321;
  --vinho-claro: #F3E9E8;
  --dourado: #F7B206;
  --dourado-claro: #FDF3D9;
  --dourado-escuro: #8A6205;

  --texto: #232323;
  --texto-suave: #6b6260;
  --borda: #E4DBDA;
  --fundo: #F7F5F4;
  --branco: #FFFFFF;

  --sucesso: #2e7d32;
  --sucesso-claro: #e8f5e9;
  --erro: #c0392b;
  --erro-claro: #fbeae8;
  --alerta: #B26A00;
  --alerta-claro: #FCEFD9;
  /* Azul (05/08/2026, dashboard do Perfil) - só usado nos rascunhos, pra
     dar uma 5ª cor distinta do resto da paleta vinho/dourado/verde/laranja. */
  --info: #1D5FBF;
  --info-claro: #E4EFFC;
  --neutro-claro: #EFEAE8;

  --desabilitado-bg: #ECE7E6;
  --desabilitado-texto: #A69D9B;

  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 12px;
  /* Cantos maiores (06/08, polimento visual) - só nos cartões de nível
     superior (.cartao, .secao-formulario, resumo, stepper), não em
     inputs/botões pequenos, pra não virar "tudo pílula". */
  --raio-xl: 18px;

  --sombra-cartao: 0 1px 3px rgba(35,20,18,.09), 0 1px 2px rgba(35,20,18,.05);
  --sombra-flutuante: 0 8px 30px rgba(35,20,18,.28);
  /* Sombra mais suave/espalhada (06/08) - substitui --sombra-cartao só nos
     cartões de nível superior, mantendo a original nos blocos internos
     menores (ex: linha-quant) pra não achatar a hierarquia visual. */
  --sombra-suave: 0 4px 20px rgba(35,20,18,.10), 0 1px 3px rgba(35,20,18,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  padding-bottom: 84px;
}

.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--vinho);
  color: #fff;
  padding: 14px 16px;
}
.topo .logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: #fff; padding: 3px; }
.topo h1 { font-size: 17px; margin: 0; }
.topo .subtitulo { font-size: 12px; margin: 2px 0 0; opacity: .85; }

/* Botões de texto (verificar atualização, limpar cache, corrigir e-mail) -
   mesma classe base pras variações que existiam antes com CSS duplicado;
   cada uma só ajusta a cor quando precisa (`-vinho`/`-erro`/sem
   modificador = `--texto-suave`, uso mais neutro tipo "limpar cache"). */
.botao-texto {
  background: none;
  border: none;
  padding: 0;
  color: var(--texto-suave);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.botao-texto:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.botao-texto-vinho { color: var(--vinho); }
.botao-texto-erro { color: var(--erro); }

main { max-width: 720px; margin: 0 auto; padding: 12px; }

.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-suave);
  padding: 14px;
  margin-bottom: 14px;
}
.cartao h2 {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--vinho);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   Cartão-resumo do RDO + Stepper (06/08, polimento visual) - ficam entre o
   topo e o acordeão de seções. Refletem dados que já existem no `state`
   (contratante/obra/data/nº) e no acordeão real (nunca inventam uma tela
   nova) - ver atualizarResumoRdo_/atualizarStepper_ em app.js.
   --------------------------------------------------------------------------- */
.cartao-resumo-rdo { padding: 16px; }
.resumo-rdo-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
.resumo-rdo-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumo-rdo-rotulo {
  font-size: 11px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.resumo-rdo-valor {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resumo-rdo-rodape {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--borda);
  font-size: 12px;
  color: var(--texto-suave);
}
.resumo-rdo-rodape svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sucesso); }

.stepper-rdo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-suave);
  padding: 16px 10px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.passo-stepper {
  flex: 1;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  position: relative;
}
/* Linha conectando as bolhas - desenhada com pseudo-elemento em cada passo
   (exceto o primeiro), atrás da bolha (z-index), pra não precisar medir
   posição via JS. */
.passo-stepper:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--borda);
  z-index: 0;
}
.passo-stepper.concluido:not(:first-child)::before { background: var(--sucesso); }
.passo-stepper-bolha {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--neutro-claro);
  border: 2px solid var(--borda);
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.passo-stepper-check { display: none; width: 16px; height: 16px; }
.passo-stepper-rotulo {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--texto-suave);
  text-align: center;
}
.passo-stepper.atual .passo-stepper-bolha {
  background: var(--vinho);
  border-color: var(--vinho);
  color: #fff;
}
.passo-stepper.atual .passo-stepper-rotulo { color: var(--vinho); font-weight: 700; }
.passo-stepper.concluido .passo-stepper-bolha {
  background: var(--sucesso);
  border-color: var(--sucesso);
  color: #fff;
}
.passo-stepper.concluido .passo-stepper-numero { display: none; }
.passo-stepper.concluido .passo-stepper-check { display: block; }
.passo-stepper.concluido .passo-stepper-rotulo { color: var(--sucesso); }
.cartao h2 .icone-secao {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--vinho);
}
.cabecalho-secao {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.cabecalho-secao h2 {
  flex: 1;
}
.link-limpar-cache {
  background: none;
  border: none;
  padding: 0 0 6px;
  color: var(--texto-suave);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.link-limpar-cache:disabled { opacity: .6; cursor: default; text-decoration: none; }

label {
  display: block;
  font-size: 12px;
  color: var(--texto-suave);
  margin: 10px 0 4px;
}
select, input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="password"], input[type="email"], textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: 15px;
  background: #fff;
  color: var(--texto);
}
select:disabled { background: var(--desabilitado-bg); color: var(--desabilitado-texto); }
input:disabled { background: var(--desabilitado-bg); color: var(--desabilitado-texto); cursor: not-allowed; }
textarea { resize: vertical; overflow: hidden; }

.campo-senha-com-olho { position: relative; }
.campo-senha-com-olho input { padding-right: 40px; }
.botao-mostrar-senha {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
}
.botao-mostrar-senha svg { width: 20px; height: 20px; }
.botao-mostrar-senha:hover { color: var(--vinho); }

.linha-2col { display: flex; gap: 12px; }
.linha-2col > div { flex: 1; }

.badge {
  display: inline-block;
  background: var(--dourado);
  color: var(--vinho-escuro);
  font-weight: bold;
  padding: 4px 10px;
  border-radius: var(--raio-sm);
  font-size: 14px;
}

.tabela-tempo { width: 100%; border-collapse: collapse; text-align: center; }
.tabela-tempo th, .tabela-tempo td { padding: 6px; }
.tabela-tempo thead th { font-size: 12px; color: var(--texto-suave); font-weight: normal; }
.tabela-tempo tbody th { text-align: left; font-size: 13px; }
.tabela-tempo .mm-chuva { text-align: center; padding: 6px; }

.balao {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--borda);
  background: #fff;
  font-weight: bold;
  font-size: 16px;
  color: transparent;
  cursor: pointer;
}
.balao.marcado {
  color: var(--vinho-escuro);
  border-color: var(--dourado);
  background: var(--dourado);
}

.linha-quant {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 8px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: 8px 10px;
}
.linha-quant .campo-descricao { flex: 3; }
.linha-quant .campo-quant { flex: 1; }
.linha-quant label { margin: 0 0 4px; }
.linha-quant .btn-remover-quant {
  background: none;
  border: none;
  color: var(--erro);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px 8px;
  flex-shrink: 0;
}

.linha-atividade {
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
}
/* Revisão de aprovação interna (14/07) - linha já escrita pelo elaborador
   (ou por uma revisão anterior), travada pra um administrador comum. */
.linha-atividade-travada {
  background: var(--fundo);
  opacity: 0.75;
}
.linha-atividade .cabecalho-atividade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.linha-atividade .numero-item {
  background: var(--vinho);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.linha-atividade .rotulo-atividade { font-size: 13px; color: var(--texto-suave); }
.linha-atividade .linha-horarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 8px;
}
.linha-atividade .campo-horario { min-width: 0; }
.linha-atividade .input-inicio,
.linha-atividade .input-fim {
  text-align: center;
}
.linha-atividade label { margin: 0 0 4px; }
.linha-atividade textarea { min-height: 40px; }

/* Ditado por voz (05/08/2026) - botão só aparece onde o navegador
   suporta SpeechRecognition (ver configurarDitadoPorVoz_ em app.js, que
   esconde com display:none quando não suporta - Safari/iOS não tem essa
   API, mas lá o ditado nativo do teclado do sistema já resolve). */
.campo-discriminacao-wrap { position: relative; }
.campo-discriminacao-wrap textarea { padding-right: 42px; }
.btn-ditado-voz {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
}
.btn-ditado-voz svg { width: 16px; height: 16px; }
.btn-ditado-voz:disabled { opacity: .5; cursor: not-allowed; }
.btn-ditado-voz.gravando {
  background: var(--erro);
  border-color: var(--erro);
  color: #fff;
  animation: pulso-ditado-voz 1.2s ease-in-out infinite;
}
@keyframes pulso-ditado-voz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); }
  50% { box-shadow: 0 0 0 7px rgba(192,57,43,0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-ditado-voz.gravando { animation: none; }
}

.botao-secundario,
.botao-principal {
  margin-bottom: 8px;
}

.linha-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--texto);
}
.linha-checkbox input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.orcamento-info {
  font-size: 12px;
  color: var(--texto-suave);
  margin: -4px 0 10px;
}
.orcamento-info.cheio { color: var(--erro); font-weight: bold; }

/* Texto explicativo logo depois de um <input> (não uma lista/botão, que já
   têm espaço próprio) - a margem negativa padrão de .orcamento-info acima
   "atropela" a caixa do campo, sem respiro nenhum entre a borda e o texto
   (reportado pelo Paulo, 15/07/2026). */
#info-email-contratante-envio { margin-top: 8px; }

/* Mesmo problema do acima, agora entre o balão "Gerar RDO sem assinatura
   da Contratante" e o texto de compromisso que aparece quando ele é
   marcado - a margem negativa padrão colava o texto na borda do balão
   (reportado pelo Paulo, 15/07/2026). */
#aviso-sem-aprovacao-contratante { margin-top: 8px; }

.botao-secundario {
  width: 100%;
  padding: 10px;
  background: var(--vinho-claro);
  color: var(--vinho);
  border: 1px dashed var(--vinho);
  border-radius: var(--raio-md);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.botao-secundario:disabled { opacity: .5; cursor: not-allowed; }

.linha-atividade .btn-remover-atividade {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--erro);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.aviso-ditado-voz {
  font-size: 11px;
  color: var(--erro);
  font-weight: bold;
  margin: 2px 0 0;
}
.aviso-ditado-voz:empty { display: none; }
.linha-atividade .linhas-estimadas {
  font-size: 11px;
  color: var(--texto-suave);
  text-align: right;
  margin-top: 2px;
}
.linha-atividade .linhas-estimadas.estimativa-bloqueada {
  color: var(--erro);
  font-weight: bold;
  text-align: left;
}

.botao-principal {
  width: 100%;
  padding: 14px;
  background: var(--vinho);
  color: #fff;
  border: none;
  border-radius: var(--raio-md);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.botao-principal:disabled { background: var(--desabilitado-bg); color: var(--desabilitado-texto); cursor: not-allowed; }
.botao-principal:not(:disabled):active { background: var(--vinho-escuro); }

.status { margin-top: 10px; font-size: 14px; white-space: pre-line; }
.status.erro { color: var(--erro); }
.status.sucesso { color: var(--sucesso); }

/* Barra de progresso (17/07/2026, pedido do Paulo - RDO de várias
   páginas demora mais pra gerar/converter, precisa deixar claro que tem
   algo rodando; revisada em 05/08/2026 pra sempre mostrar uma
   porcentagem numérica em vez de uma faixa animada sem número - ver
   marcarBarraProgressoIndeterminada_ em app.js pra lógica da simulação). */
.barra-progresso-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.barra-progresso-trilha {
  flex: 1;
  height: 8px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.barra-progresso {
  height: 100%;
  width: 0%;
  background: var(--vinho);
  border-radius: 999px;
  transition: width .18s linear;
}
/* Porcentagem simulada (05/08/2026, pedido do Paulo - antes era só uma
   faixa animada sem número, "não dava ideia de quanto falta"). Enquanto
   dá pra saber o progresso de verdade (gerando páginas localmente) a
   largura reflete a fração real; na etapa de conversão/envio no backend
   (duração desconhecida) sobe sozinha até um teto de 96% e só chega em
   100% quando o backend responder de verdade - ver marcarBarraProgressoIndeterminada_. */
.barra-progresso-texto {
  font-size: 12px;
  font-weight: bold;
  color: var(--texto-suave);
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.banner-offline {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--alerta);
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Barra de navegação inferior (12/07) - 2 abas fixas (RDO/Perfil), padrão
   de app estabelecido (WhatsApp/Instagram/bancos) - substitui o ícone da
   logo clicável (o Paulo achou pouco intuitivo, nada sugeria que aquele
   círculo era um botão de navegação).
   --------------------------------------------------------------------------- */
.barra-abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--borda);
  box-shadow: 0 -2px 8px rgba(35,20,18,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.item-aba {
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 10px;
  font-size: 12px;
  color: var(--texto-suave);
  cursor: pointer;
  position: relative;
}
.item-aba .icone-aba { width: 22px; height: 22px; }
.item-aba.ativo { color: var(--vinho); font-weight: bold; }
.badge-aba {
  position: absolute;
  top: 4px;
  right: 22%;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--alerta);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}

/* Badge inline (14/07, "RDOs para revisar") - mesmo visual do .badge-aba
   (bolinha vinho/dourado com número), só que no fluxo normal do texto em
   vez de posicionado sobre um ícone de aba. */
.badge-inline {
  position: static;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

/* Cabeçalho/resumo/rodapé do Meu Perfil (12/07, reforma 05/08/2026 - virou
   um dashboard: saudação, sino de pendências, cards com ícone/descrição/
   link, lista dos últimos RDOs e gráfico de 30 dias). "Perfil" continua
   também o lugar de infos de conta/app (versão, atualizar, sair). */
.perfil-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.perfil-saudacao h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--texto);
  letter-spacing: -.01em;
}
.perfil-data {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.perfil-topo-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.perfil-sino {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--borda); color: var(--texto-suave);
  flex-shrink: 0; padding: 0; cursor: pointer;
}
.perfil-sino svg { width: 19px; height: 19px; }
.badge-sino {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--erro); color: #fff; font-size: 10px; font-weight: bold;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--fundo);
}
.perfil-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vinho-claro);
  color: var(--vinho);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.perfil-avatar svg { width: 22px; height: 22px; }
.perfil-nome { font-size: 16px; font-weight: bold; color: var(--texto); margin: 0; }

.perfil-acoes-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}
.botao-novo-rdo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  background: var(--vinho);
  color: #fff;
  border: none;
  border-radius: var(--raio-md);
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.botao-novo-rdo:active { background: var(--vinho-escuro); }
.botao-novo-rdo svg { width: 17px; height: 17px; stroke: #fff; }
.perfil-sessao-desde {
  font-size: 12.5px;
  color: var(--texto-suave);
  display: flex; align-items: center; gap: 6px;
}
.perfil-sessao-desde svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--texto-suave); }
.perfil-sessao-desde strong { color: var(--texto); font-weight: 600; }

/* Perfil reorganizado em 4/5 quadrados (17/07/2026, ícone+descrição+link
   acrescentados em 05/08/2026) - substituiu o antigo .perfil-resumo (só
   números lado a lado, não clicáveis). */
.grade-perfil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.quadrado-perfil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-cartao);
  background: var(--branco);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.quadrado-perfil:active { box-shadow: none; }
@media (hover: hover) {
  .quadrado-perfil:hover { box-shadow: var(--sombra-flutuante); }
}
.quadrado-icone {
  width: 36px; height: 36px;
  border-radius: var(--raio-md);
  display: flex; align-items: center; justify-content: center;
}
.quadrado-icone svg { width: 19px; height: 19px; }
.quadrado-numero { font-size: 26px; font-weight: bold; color: var(--texto); line-height: 1; }
.quadrado-rotulo { font-size: 13px; font-weight: 600; color: var(--texto); margin: 0; }
.quadrado-descricao { font-size: 11.5px; color: var(--texto-suave); margin: -4px 0 0; }
.quadrado-link {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding-top: 8px; border-top: 1px solid var(--fundo);
  width: 100%;
}
.quadrado-link svg { width: 13px; height: 13px; }

.quadrado-revisar .quadrado-icone { background: var(--dourado-claro); color: var(--dourado-escuro); }
.quadrado-revisar .quadrado-numero,
.quadrado-revisar .quadrado-link { color: var(--dourado-escuro); }

.quadrado-aprovados .quadrado-icone { background: var(--sucesso-claro); color: var(--sucesso); }
.quadrado-aprovados .quadrado-numero,
.quadrado-aprovados .quadrado-link { color: var(--sucesso); }

.quadrado-sem-aprovacao .quadrado-icone { background: var(--alerta-claro); color: var(--alerta); }
.quadrado-sem-aprovacao .quadrado-numero,
.quadrado-sem-aprovacao .quadrado-link { color: var(--alerta); }

.quadrado-aguardando .quadrado-icone { background: var(--neutro-claro); color: var(--texto-suave); }
.quadrado-aguardando .quadrado-numero { color: var(--texto); }
.quadrado-aguardando .quadrado-link { color: var(--texto-suave); }

.quadrado-rascunhos .quadrado-icone { background: var(--info-claro); color: var(--info); }
.quadrado-rascunhos .quadrado-numero,
.quadrado-rascunhos .quadrado-link { color: var(--info); }

/* Últimos RDOs + gráfico de 30 dias (05/08/2026) - sub-seções DENTRO do
   mesmo .cartao do Perfil (não cards aninhados de novo - só um separador,
   mesmo espírito de .subsecao no formulário de RDO). */
.subsecao-dashboard {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
}
.subsecao-dashboard-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.subsecao-dashboard-cabecalho h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); }
.link-ver-todos {
  font-size: 12.5px; font-weight: 600; color: var(--vinho);
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.link-ver-todos svg { width: 13px; height: 13px; }

.linha-rdo-dashboard {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-cartao);
  padding: 11px 12px;
  margin-bottom: 8px;
  background: #fff;
}
.linha-rdo-dashboard .ponto-status { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.linha-rdo-dashboard .info-rdo-dashboard { flex: 1; min-width: 0; }
.linha-rdo-dashboard .info-rdo-dashboard strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.linha-rdo-dashboard .info-rdo-dashboard span { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }
.linha-rdo-dashboard .meta-rdo-dashboard { text-align: right; flex-shrink: 0; }
.pill-status {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.pill-status.pill-aprovado { background: var(--sucesso-claro); color: var(--sucesso); }
.pill-status.pill-aguardando-cliente { background: var(--alerta-claro); color: var(--alerta); }
.pill-status.pill-superado { background: var(--alerta-claro); color: var(--alerta); border: 1px solid var(--alerta); }
.data-rdo-dashboard { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 4px; }

.grafico-rdos-wrap { margin: 4px 0 10px; position: relative; }
#grafico-rdos-svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-barra { fill: var(--vinho); opacity: .38; transition: opacity .12s ease; }
.grafico-barra.pico, .grafico-barra.ativa { opacity: 1; }
.grafico-grade line { stroke: var(--borda); stroke-width: 1; }
.grafico-eixo text { fill: var(--texto-suave); font-size: 10px; font-family: inherit; }
.grafico-base { stroke: var(--borda); stroke-width: 1.2; }
.grafico-rotulo-pico { fill: var(--texto); font-size: 11px; font-weight: 700; }
.grafico-tooltip {
  position: absolute; pointer-events: none;
  background: var(--texto); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 8px;
  transform: translate(-50%,-115%); white-space: nowrap; opacity: 0; transition: opacity .1s ease;
  box-shadow: var(--sombra-flutuante); z-index: 5;
}
.grafico-tooltip.mostrar { opacity: 1; }

.grafico-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fundo);
}
.grafico-stats > div { text-align: center; padding: 0 4px; }
.grafico-stats span { display: block; font-size: 10.5px; color: var(--texto-suave); }
.grafico-stats strong { display: block; font-size: 17px; font-weight: 800; color: var(--texto); margin-top: 2px; }

/* Campos com <label> de verdade acima de cada um (mesmo padrão do
   formulário de RDO) - a spacing vem do próprio `label { margin: 10px 0
   4px }` global, sem precisar de regra extra por campo. */
.campos-filtro-perfil { margin-top: 4px; }
.campos-filtro-perfil label { margin-top: 12px; }
.campos-filtro-perfil > label:first-child { margin-top: 0; }
.campos-filtro-perfil > button { margin-top: 14px; }

.detalhes-filtro-obras {
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: 10px 12px;
  margin-bottom: 16px;
  background: var(--fundo);
}
.detalhes-filtro-obras summary {
  margin: 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Linha separando o cabeçalho clicável do conteúdo, só quando aberto -
   mesmo padrão de .secao-formulario[open] > summary (formulário de RDO) -
   reforça visualmente onde "Filtros"/"Obras que acompanho" termina e o
   conteúdo começa (17/07/2026, campo OS ficava colado embaixo do
   cabeçalho sem essa linha). */
.detalhes-filtro-obras[open] summary {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}
.detalhes-filtro-obras summary::-webkit-details-marker { display: none; }
/* Seta indicando abrir/fechar (17/07/2026, pedido do Paulo) - mesmo
   padrão visual de .seta-secao no formulário de RDO: aponta pra baixo
   fechado, gira 180° (aponta pra cima) aberto, com transição suave. */
.detalhes-filtro-obras summary .seta-filtro {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--texto-suave);
  transition: transform .15s ease;
}
.detalhes-filtro-obras[open] summary .seta-filtro { transform: rotate(180deg); }
.lista-filtro-obras {
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.linha-filtro-obra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--texto);
}
.linha-filtro-obra input { margin: 0; }

.perfil-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}
.versao-app-perfil { font-size: 11px; color: var(--texto-suave); }
.status-atualizacao-perfil { font-size: 11px; color: var(--texto-suave); }

.creditos-app {
  font-size: 10px;
  color: var(--texto-suave);
  text-align: center;
  margin: 10px 0 0;
  opacity: .7;
}

.modal-confirmacao {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(35, 20, 18, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-confirmacao-caixa {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sombra-flutuante);
}
.modal-confirmacao-caixa h2 { margin-top: 0; color: var(--vinho); }

/* ---------------------------------------------------------------------------
   Seções retráteis do formulário principal (12/07, reforma visual) -
   `<details>/<summary>` nativos do HTML: abrir/fechar de graça, sem JS
   novo, acessível por padrão. Substituem a rolagem única de 10+ cartões
   empilhados por ~5 blocos por etapa (ver index.html). O `<details>` em si
   NÃO tem a aparência de `.cartao` (sem sombra própria) - quem cria a
   "caixa" visual é o `<summary>` (sempre visível, cabeçalho clicável) +
   o conteúdo interno, que continua sendo os mesmos `.cartao` de sempre.
   --------------------------------------------------------------------------- */
.secao-formulario {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-suave);
  margin-bottom: 14px;
  overflow: hidden;
}
.secao-formulario > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  color: var(--vinho);
  font-size: 15px;
  user-select: none;
}
.secao-formulario > summary::-webkit-details-marker { display: none; }
.secao-formulario > summary .icone-secao {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--vinho);
}
.secao-formulario > summary .numero-secao {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vinho-claro);
  color: var(--vinho);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.secao-formulario > summary .seta-secao {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--texto-suave);
  transition: transform .15s ease;
}
.secao-formulario[open] > summary .seta-secao { transform: rotate(180deg); }
.secao-formulario[open] > summary {
  border-bottom: 1px solid var(--borda);
}
.secao-formulario .conteudo-secao {
  padding: 14px;
}
.secao-formulario .conteudo-secao > .subsecao + .subsecao {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--borda);
}
.subsecao > h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texto-suave);
  margin: 0 0 10px;
}

/* Separação visual melhor entre Atividades da Contratada e da Contratante
   (14/07) - antes as duas subseções só tinham a linha tracejada genérica
   (mesma de qualquer par de subseções empilhadas), fácil de confundir
   qual bloco é de quem. Cor vinho = Contratada (mesma cor da marca/FN em
   todo o resto do app), dourado = Contratante (cor de destaque, sinaliza
   "é de fora"). Sobrescreve o border-top tracejado genérico (a borda
   lateral colorida já cumpre esse papel de separador). */
.secao-formulario .conteudo-secao > .subsecao-atividades + .subsecao-atividades {
  border-top: none;
  margin-top: 16px;
  padding-top: 0;
}
.subsecao-atividades {
  border-left: 4px solid transparent;
  border-radius: var(--raio-sm);
  padding: 10px 10px 10px 12px;
}
.subsecao-atividades-contratada {
  border-left-color: var(--vinho);
  background: var(--vinho-claro);
}
.subsecao-atividades-contratada > h3 { color: var(--vinho); }
.subsecao-atividades-contratante {
  border-left-color: var(--dourado-escuro);
  background: var(--dourado-claro);
}
.subsecao-atividades-contratante > h3 { color: var(--dourado-escuro); }

/* Balão "Adicionar atividades do Contratante" (14/07) - nasce com cara de
   bloqueado/apagado (igual outros elementos desabilitados do app) porque
   normalmente NINGUÉM preenche essa lista no fluxo direto (é o Contratante
   quem escreve, pela tela de aprovação por link) - só faz sentido usar
   aqui se o representante do Contratante estiver presente e ditando as
   atividades na hora. Primeiro clique "libera" o visual (some essa
   classe via JS, vira botão secundário normal) e already adiciona a
   primeira linha.
*/
.botao-balao-bloqueado {
  background: var(--desabilitado-bg);
  color: var(--desabilitado-texto);
  border: 1px dashed var(--desabilitado-texto);
}

/* Balão de opção liga/desliga (15/07/2026) - ex: "Gerar RDO sem assinatura
   da Contratante". Mesma linguagem visual do .balao circular (contorno
   neutro -> dourado quando marcado), só que em formato de botão largo com
   texto, pra opções que precisam de rótulo em vez de um ícone só. */
.balao-opcao {
  display: block;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 2px solid var(--borda);
  border-radius: var(--raio-sm);
  background: #fff;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.balao-opcao.marcado {
  color: var(--vinho-escuro);
  border-color: var(--dourado);
  background: var(--dourado-claro);
}

/* Tela de Perfil - RDOs agrupados por obra, ver telaPerfil_ em app.js */
.subtitulo-perfil {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.grupo-obra-perfil {
  font-size: 14px;
  font-weight: bold;
  color: var(--vinho);
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.grupo-obra-perfil .icone-linha { width: 16px; height: 16px; flex-shrink: 0; color: var(--vinho); }
.linha-obra-perfil {
  width: 100%;
  text-align: left;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-cartao);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 10px;
}
.linha-obra-perfil .icone-linha {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--vinho);
  background: var(--vinho-claro);
  border-radius: 50%;
  padding: 5px;
}
.linha-obra-perfil .texto-linha-obra { flex: 1; min-width: 0; }
.linha-obra-perfil .nome-obra-perfil { font-weight: bold; color: var(--vinho); display: block; }
.linha-obra-perfil .contagem-obra-perfil { font-size: 12px; color: var(--texto-suave); }
.linha-rdo-perfil {
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-cartao);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  background: #fff;
}
.linha-rdo-perfil .info-rdo-perfil {
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.linha-rdo-perfil .icone-linha { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.linha-rdo-perfil.pendente .icone-linha { color: var(--alerta); }
.linha-rdo-perfil.aprovado .icone-linha { color: var(--sucesso); }
.linha-rdo-perfil.sem-assinatura .icone-linha { color: var(--alerta); }
.linha-rdo-perfil.rascunho .icone-linha { color: var(--vinho); }
.linha-rdo-perfil.aguardando .icone-linha { color: var(--dourado-escuro); }
/* RDO superado por uma revisão mais nova (05/08/2026) - fundo levemente
   tingido pra destacar na lista, sem apagar a legibilidade (só os
   botões desabilitados é que ficam de fato cinza, ver .botao-mini:disabled). */
.linha-rdo-perfil.superado { background: var(--alerta-claro); border-color: #F0DBAE; }
.aviso-superado {
  display: inline-block;
  margin: -2px 0 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--alerta);
  color: var(--alerta);
  font-size: 11.5px;
  font-weight: 700;
}
.linha-rdo-perfil .botoes-rdo-perfil {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.botao-icone,
.botao-mini {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--vinho);
  background: var(--vinho-claro);
  color: var(--vinho);
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.botao-icone svg,
.botao-mini svg { width: 16px; height: 16px; }
.botao-icone:disabled,
.botao-mini:disabled { opacity: .5; cursor: not-allowed; }
.botao-mini-perigo { border-color: var(--erro); background: var(--erro-claro); color: var(--erro); }
.link-corrigir-email {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0 0;
  display: block;
}
.bloco-corrigir-email {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.bloco-corrigir-email input { flex: 1; margin: 0; }

/* Preview de PDF (partial do cliente, prévia do app, prévia final do
   cliente) com zoom SÓ dentro da caixa - pinch-zoom da página inteira
   fica desligado (maximum-scale=1 no viewport), então o zoom aqui é
   feito ampliando a largura do iframe dentro de um wrapper com scroll,
   via botões +/- (ver configurarZoomIframe_ em app.js/aprovacao.js).
   Classes reutilizáveis - pode ter mais de um visualizador na mesma
   página (ex: aprovacao.html tem um pro PDF parcial e outro pro final). */
.wrap-visualizador-pdf {
  overflow: auto;
  max-height: 75vh;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  position: relative;
}
.botoes-zoom-pdf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--borda);
}
.iframe-visualizador-pdf {
  display: block;
  width: 100%;
  height: 75vh;
  border: none;
}
/* Prévia offline (img, não iframe) - altura livre (não teria como rolar
   DENTRO de uma altura fixa como o iframe faz), o wrap por fora
   (.wrap-visualizador-pdf) já rola se passar de 75vh. */
img.iframe-visualizador-pdf {
  height: auto;
}

/* ---------------------------------------------------------------------------
   Dashboard do Perfil em telas largas (05/08/2026) - o app é mobile-first
   (`<main>` já trava em 720px pro formulário de RDO), mas #cartao-perfil
   fica FORA do `<main>` e nunca tinha um teto de largura - ficava
   esticado a tela inteira em quem acessa pelo site/navegador. A partir de
   720px, mesma largura do `<main>`, mais os cards em grade e a lista de
   últimos RDOs lado a lado com o gráfico (em vez de empilhados).
   --------------------------------------------------------------------------- */
@media (min-width: 720px) {
  #cartao-perfil {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 28px;
  }
  .grade-perfil {
    grid-template-columns: repeat(5, 1fr);
  }
  .botao-novo-rdo {
    width: auto;
    padding: 12px 22px;
  }
  .dashboard-duas-colunas {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 26px;
    align-items: start;
  }
}

@media (min-width: 1000px) {
  #cartao-perfil { max-width: 1080px; }
}

/* ---------------------------------------------------------------------------
   Autocomplete personalizado (05/08/2026, substitui <datalist> nativo -
   ver configurarAutocompletePersonalizado_ em app.js). No iPhone, a
   sugestão do <datalist> é desenhada pelo próprio iOS, não pelo nosso
   CSS, e não convivia bem com o teclado virtual nem com a barra fixa
   debaixo da tela - a lista "não subia", ficava encavalada em cima do
   teclado. position:fixed com posição calculada em JS (ver
   posicionarAutocomplete_) tira essa lista da renderização nativa por
   completo - sempre no nosso controle, igual em iOS/Android/desktop.
   --------------------------------------------------------------------------- */
.autocomplete-lista {
  position: fixed;
  z-index: 45;
  display: none;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-flutuante);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* declara explicitamente que arrastar o dedo pra cima/baixo é rolagem
     de verdade (05/08/2026) - reforça o fix do JS (não usar mais
     preventDefault em touchstart), que corrigiu a lista aparecendo
     "travada nos 3 primeiros itens, sem dar pra rolar" no iPhone. */
  touch-action: pan-y;
}
.autocomplete-lista li {
  padding: 11px 12px;
  border-radius: var(--raio-sm);
  font-size: 15px;
  line-height: 1.3;
  color: var(--texto);
  cursor: pointer;
}
.autocomplete-lista li.ativo,
.autocomplete-lista li:active {
  background: var(--vinho-claro);
  color: var(--vinho);
}