/* Escritório On-line — folha única de estilo.

   A identidade visual é a da Marine (a mesma do sistema da Marine Aduaneira):
   azul-marinho, dourado, off-white; Inter nos títulos e Manrope no resto.
   A regra do arquivo: toda cor, fonte e medida sai de um token do :root.
   Tela nova não inventa cor nem escreve style="" com valor solto — usa as
   classes daqui. O que está em "legado" é o nome antigo de classe/variável
   que os templates ainda não migrados usam; some quando o último migrar.
   docs/design.md explica cada componente. */

:root{
  /* marca */
  --azul:#073956; --profundo:#052D46; --dourado:#C99B3D; --verde:#19A66F;
  --offwhite:#FBF8F1; --papel:#FFFFFF; --linha:#E2DDD2; --linha-forte:#CFC6B4;
  --rotulo:#7C8A93; --texto:#2E4351; --alerta:#A03A31; --aviso:#9C5B0E;
  /* a barra lateral e o cabeçalho */
  --topo-claro:#BFD0DA; --topo-borda:#2C5670; --topo-hover:#0A4468; --topo-apagado:#7F9CB0;
  --dourado-claro:#E8C77A; --alerta-clara:#F1A69E;
  /* conversas do WhatsApp: o fundo e o balão enviado do próprio aplicativo */
  --wa-fundo:#EFEAE2; --wa-saida:#D9FDD3; --wa-entrada:#FFFFFF;
  --titulo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --corpo:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lateral:236px;
  /* legado: nomes que templates antigos usam em style="" */
  --fundo:var(--offwhite); --painel:var(--papel); --borda:var(--linha); --suave:var(--rotulo);
  --primaria:var(--azul); --primaria-clara:var(--topo-hover); --ok:var(--verde); --erro:var(--alerta); --raio:3px;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--offwhite);color:var(--azul);font:14.5px/1.5 var(--corpo)}
a{color:var(--azul)}
button,input,select,textarea{font:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}
code{font-size:.92em;background:#F1EDE3;padding:0 .3em;border-radius:2px}

/* ---- casca: faixa fina, barra lateral, página ---------------------------- */
.faixa{background:var(--topo-hover);color:var(--topo-claro);font-size:11.5px;padding:6px 16px;
  display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap}
.faixa b{color:#FFF;font-weight:600}
.faixa .dir{margin-left:auto;display:flex;gap:14px;align-items:center}
.faixa a{color:var(--topo-claro);text-decoration:none}
.faixa a:hover{color:#FFF}
.faixa .versao{color:var(--topo-apagado)}

.app{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);min-height:calc(100vh - 30px)}
.lateral{background:var(--profundo);color:#FFF;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.lateral .logo{flex-shrink:0;padding:18px 18px 14px;border-bottom:1px solid var(--topo-borda);text-decoration:none;color:inherit}
.lateral .logo span{display:inline-block;text-align:center}
.lateral .logo img{height:58px;width:auto;display:block;margin:0 auto}
/* "Escritório On-line" com a largura da logomarca e o espaçamento da linha
   CONTABILIDADE: parece o terceiro nível da marca, não uma legenda solta */
.lateral .logo small{display:block;color:var(--dourado);font-size:9px;letter-spacing:.19em;text-transform:uppercase;margin-top:7px;font-weight:600;white-space:nowrap}
/* seletor de carteira: segmentado, logo abaixo da marca. É a primeira
   escolha de quem entra: médicas ou demais empresas */
.lateral .carteiras{display:flex;flex-shrink:0;margin:12px 18px 0;border:1px solid var(--topo-borda);border-radius:3px;overflow:hidden}
.lateral .carteiras a{flex:1;text-align:center;padding:5px 4px;font-size:11.5px;color:var(--topo-claro);text-decoration:none;border-right:1px solid var(--topo-borda)}
.lateral .carteiras a:last-child{border-right:none}
.lateral .carteiras a:hover{background:var(--topo-hover);color:#FFF}
.lateral .carteiras a.ativa{background:#FFF;color:var(--profundo);font-weight:600}
.lateral nav{padding:6px 0 12px;flex:1}
.lateral .gt{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--topo-apagado);padding:16px 18px 6px}
.lateral nav a{display:flex;align-items:center;gap:8px;padding:7px 18px;color:#D6E2EA;text-decoration:none;font-size:13.5px;border-left:3px solid transparent}
.lateral nav a:hover{background:var(--topo-hover);color:#FFF}
.lateral nav a.ativo{background:var(--topo-hover);color:#FFF;border-left-color:var(--dourado);font-weight:600}
.lateral nav a .c{margin-left:auto;font-size:10.5px;font-weight:600;background:var(--dourado);color:var(--profundo);padding:0 6px;border-radius:2px}
.lateral nav a .c.v{background:var(--alerta);color:#FFF}
.lateral .pe{flex-shrink:0;padding:14px 18px;border-top:1px solid var(--topo-borda);font-size:11.5px;color:var(--topo-apagado);line-height:1.6}
.lateral .pe b{color:#D6E2EA;font-weight:600;display:block}
.lateral .pe a{color:#D6E2EA}
/* importar fica no pé da barra: é ação de sistema, não de tela */
.lateral .importar{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lateral .importar form{margin:0}
.lateral .importar button,.lateral .importar label{background:none;border:1px solid var(--topo-borda);color:#D6E2EA;font-size:11.5px;
  padding:4px 8px;border-radius:3px;cursor:pointer;display:inline-block;line-height:1.3;font-weight:500;margin:0;text-transform:none;letter-spacing:0}
.lateral .importar button:hover,.lateral .importar label:hover{background:var(--topo-hover);color:#FFF}
.pagina{min-width:0}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto}
  .lateral nav{display:flex;overflow-x:auto;padding:4px 8px 10px;gap:2px}
  .lateral .gt{display:none}
  .lateral .carteiras{margin:10px 16px 0}
  .lateral nav a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;padding:8px 10px}
  .lateral nav a.ativo{border-bottom-color:var(--dourado)}
  .lateral .pe{display:none}
}

/* cabeçalho da página: azul, três linhas — ações e voltar; título e
   subtítulo; números do contexto e o alternador à direita */
.topo{background:var(--azul);color:#FFF;padding:12px 22px}
.topo .l1{display:flex;align-items:center;gap:8px;min-height:22px}
.topo .l1:empty{display:none}
.topo .voltar{color:var(--topo-claro);font-size:12.5px;text-decoration:none}
.topo .voltar:hover{color:#FFF}
.topo .esp{flex:1}
.topo .l2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.topo h1{font:700 19px/1.15 var(--titulo);margin:0;letter-spacing:-.01em;color:#FFF}
.topo .sub{font-size:12.5px;color:var(--topo-claro)}
.topo .l3{display:flex;align-items:center;gap:14px;margin-top:4px;font-size:12px;color:var(--topo-claro);flex-wrap:wrap;row-gap:6px}
.topo .l3:empty{display:none}
.topo .n{font-size:14px;font-weight:600;color:#FFF;font-variant-numeric:tabular-nums}
.topo .n.dour{color:var(--dourado-claro)}
.topo .n.verm{color:var(--alerta-clara)}
.topo .n.verde{color:#8FD9B8}
.alt{display:flex;gap:5px;flex-wrap:wrap}
.alt a,.alt button{padding:4px 12px;font-size:12px;border:1px solid var(--topo-borda);background:transparent;
  color:var(--topo-claro);border-radius:3px;cursor:pointer;font-weight:400;text-decoration:none;line-height:1.4}
.alt .ativo{background:#FFF;color:var(--profundo);border-color:#FFF;font-weight:600}
.alt .novo{background:var(--dourado);color:var(--profundo);border:none;font-weight:600}
.alt .novo:hover{background:var(--dourado-claro)}

main{padding:16px 22px 28px}
@media (max-width:600px){main{padding:14px 16px 24px}.topo{padding:12px 16px}}
/* páginas ainda não migradas trazem o <h1> no conteúdo; o cabeçalho azul
   já mostra o título, então o de dentro some até a tela ser refeita */
main.legado > h1{display:none}

/* ---- componentes -------------------------------------------------------- */
.grade{display:grid;gap:12px}
.grade.g2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.grade.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grade.g3-1{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
@media (max-width:860px){.grade.g3-1{grid-template-columns:1fr}}
.grade > *{margin:0}

/* indicador: um número com rótulo em cima */
.indicador{background:var(--papel);border:1px solid var(--linha);padding:12px 14px}
.indicador .rotulo{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--rotulo)}
.indicador .valor{font:700 22px/1.2 var(--titulo);margin-top:4px;font-variant-numeric:tabular-nums;color:var(--azul)}
.indicador .valor small{font:500 12px var(--corpo);color:var(--rotulo);margin-left:6px}
.indicador.destaque{border-top:3px solid var(--dourado)}
.indicador.aviso{background:var(--papel);border:1px solid var(--linha);border-top:3px solid var(--aviso);padding:12px 14px;margin:0;display:block;font-size:inherit}
.indicador.aviso .valor{color:var(--aviso)}
.indicador a{font-size:12px}

/* cartao: bloco branco com o filete azul no alto e o título em Manrope 600 */
.cartao{background:var(--papel);border:1px solid var(--linha);border-top:3px solid var(--azul);padding:14px 18px 18px;margin-bottom:12px}
.cartao > h2:first-child{margin-top:0}
h1{font:700 19px/1.2 var(--titulo);margin:.2rem 0 1rem}
h2{font:600 16px/1.3 var(--corpo);margin:0 0 12px;color:var(--azul);display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
h2 .acao,h2 a{font-size:12.5px;font-weight:500;text-underline-offset:3px}
h3{font:600 14px/1.3 var(--corpo);margin:14px 0 8px;color:var(--azul)}
.nota{font-size:12px;color:var(--rotulo);line-height:1.5;margin:-6px 0 12px}
.pequeno{font-size:12.5px;color:var(--rotulo)}

/* secao: título com a linha dourada, separa partes dentro de um cartão */
.secao{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--dourado);padding-bottom:5px;margin:18px 0 8px;gap:10px}
.secao > span:first-child,.secao > b{font:700 15px var(--titulo);color:var(--azul)}
.secao .etqs{display:inline-flex;gap:6px;align-items:baseline;flex-wrap:wrap;justify-content:flex-end}

/* formulário */
label{display:block;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--rotulo);margin-bottom:5px}
input,select,textarea{padding:9px 11px;border:1px solid var(--linha-forte);border-radius:3px;font-size:14.5px;font-weight:500;
  color:var(--azul);background:var(--papel);min-width:0;font-variant-numeric:tabular-nums}
input[type=checkbox],input[type=radio]{padding:0;width:auto;accent-color:var(--azul)}
input[type=file]{font-weight:400}
textarea{width:100%;min-height:70px;font-weight:400;line-height:1.5}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(150px,calc(25% - 11px)),1fr));gap:12px 14px}
.campos .largo{grid-column:1/-1}
.marca-opcao{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--texto);text-transform:none;letter-spacing:0;padding-top:24px}
.linha-form{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
form.filtros{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:flex-end}
form.filtros label{margin-bottom:4px}

/* botões: primário dourado com texto azul-profundo (branco sobre dourado
   não passa no contraste); secundário branco com borda azul */
button,.botao{padding:9px 14px;font-size:13.5px;font-weight:600;border-radius:3px;cursor:pointer;
  background:var(--dourado);color:var(--profundo);border:1px solid var(--dourado);text-decoration:none;display:inline-block;line-height:1.3}
button:hover,.botao:hover{background:var(--dourado-claro);border-color:var(--dourado-claro)}
button.secundario,.botao.secundario{background:var(--papel);color:var(--azul);border-color:var(--azul)}
button.secundario:hover,.botao.secundario:hover{background:#EEF3F7}
button.leve,.botao.leve{background:var(--papel);color:var(--texto);border-color:var(--linha-forte);font-weight:500}
button.perigo,.botao.perigo{background:var(--papel);color:var(--alerta);border-color:var(--alerta)}
button.peq,.botao.peq{padding:6px 11px;font-size:12.5px}
button:disabled{background:#D5D0C4;border-color:#D5D0C4;color:#FFF;cursor:default}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* tabela */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--rotulo);text-align:left;
  padding:6px 8px;border-bottom:1px solid var(--linha-forte);background:var(--papel);position:sticky;top:0}
td{padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:top;color:var(--texto)}
td.f{color:var(--azul);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover{background:#FAF7F0}
tfoot td{font-weight:600;color:var(--azul);border-top:2px solid var(--linha-forte);border-bottom:none}
.rolar{max-height:460px;overflow:auto;border:1px solid var(--linha);background:var(--papel)}
.discriminacao{color:var(--rotulo);font-size:12.5px;max-width:520px}

/* etiqueta: estado em uma palavra */
.etiqueta{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:2px;white-space:nowrap;border:1px solid}
.etiqueta.ok{color:var(--verde);background:#19A66F16;border-color:#19A66F40}
.etiqueta.alerta{color:var(--aviso);background:#9C5B0E16;border-color:#9C5B0E40}
.etiqueta.erro{color:var(--alerta);background:#A03A3116;border-color:#A03A3140}
.etiqueta.neutra{color:var(--rotulo);background:#7C8A9316;border-color:#7C8A9340}
.etiqueta.azul{color:var(--azul);background:#07395614;border-color:#07395640}

/* aviso: faixa com filete à esquerda; verde é o padrão (o que deu certo) */
.aviso{background:#EEF8F3;border:1px solid #19A66F66;border-left-width:4px;color:var(--texto);padding:10px 14px;margin-bottom:12px;font-size:13.5px;
  display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap}
.aviso b,.aviso strong{color:var(--azul)}
.aviso.atencao{background:#FBF3E4;border-color:var(--dourado)}
.aviso.vermelho{background:#F9ECEA;border-color:var(--alerta)}
.aviso .dir{margin-left:auto;font-size:12.5px}
.faixa-alerta{border-left:4px solid var(--alerta)}

/* lista de valores: rótulo à esquerda, valor à direita */
.linha-v{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linha);font-size:13.5px;align-items:baseline}
.linha-v:last-child{border-bottom:none}
.linha-v .l{color:var(--texto)}
.linha-v .l small{display:block;font-size:11.5px;color:var(--rotulo);margin-top:1px}
.linha-v .v{font-variant-numeric:tabular-nums;color:var(--azul);font-weight:600;white-space:nowrap;text-align:right}
.linha-v .v.verde{color:var(--verde)}.linha-v .v.aviso{color:var(--aviso)}.linha-v .v.alerta{color:var(--alerta)}.linha-v .v.neutro{color:var(--rotulo);font-weight:500}

/* barras horizontais */
.barras{display:flex;flex-direction:column;gap:7px}
.barra{display:grid;grid-template-columns:150px 1fr 100px;gap:10px;align-items:center;font-size:13px}
.barra .trilho{display:block;height:9px;background:#EEE9DE;overflow:hidden}
.barra .preenche{display:block;height:100%;background:var(--azul);min-width:2px}
.barra .preenche.dourado{background:var(--dourado)}
.barra .num{text-align:right;color:var(--azul);font-weight:600}
@media (max-width:600px){.barra{grid-template-columns:110px 1fr 90px}}

/* item de lista: um registro por linha, filete da cor do estado */
.item{display:grid;grid-template-columns:1fr auto;gap:6px 14px;background:var(--papel);border:1px solid var(--linha);
  border-left:3px solid var(--rotulo);padding:12px 15px;margin-bottom:6px;color:inherit;text-decoration:none;text-align:left;width:100%}
.item:hover{border-color:var(--linha-forte)}
.item.ok{border-left-color:var(--verde)}.item.atencao{border-left-color:var(--dourado)}.item.erro{border-left-color:var(--alerta)}.item.azul{border-left-color:var(--azul)}
.item .t{font-size:15.5px;font-weight:600;color:var(--azul)}
.item .t small{font-weight:500;color:var(--rotulo);font-size:12.5px;margin-left:8px}
.item .d{font-size:13.5px;color:var(--texto)}
.item .m{font-size:12.5px;color:var(--rotulo)}
.item .dir{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.item .valor{font:700 16px var(--titulo);font-variant-numeric:tabular-nums;color:var(--azul)}
.vazio{padding:44px 20px;text-align:center;color:var(--rotulo);font-size:14.5px}
/* dentro de um dia, um bloco por empresa */
.emp{display:flex;align-items:baseline;gap:10px;margin:12px 0 6px;font-size:13px;color:var(--texto)}
.emp b{font:700 14px var(--titulo);color:var(--azul)}
.emp .esp{flex:1}

/* abas em fases: rótulo discreto da fase e as abas dela */
.abas{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;column-gap:5px;padding:10px 0 8px;border-bottom:1px solid var(--linha);margin-bottom:14px}
.abas .fase{display:flex;gap:5px;align-items:center;padding:4px 12px 4px 0;margin-right:12px;border-right:1px solid var(--linha-forte)}
.abas .fase:last-child{border-right:none}
.abas .fase i{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--rotulo);margin-right:4px;font-weight:500}
.abas a,.abas button{padding:6px 10px;font-size:12.5px;font-weight:500;border:1px solid var(--linha-forte);background:var(--papel);
  color:var(--texto);border-radius:3px;cursor:pointer;white-space:nowrap;text-decoration:none}
.abas .ativo{background:var(--azul);color:#FFF;border-color:var(--azul);font-weight:600}
.abas .qt{display:inline-block;margin-left:6px;padding:0 5px;border-radius:8px;font-size:10.5px;font-weight:600;line-height:15px;
  background:#07395614;color:var(--azul)}
.abas .ativo .qt{background:#FFFFFF33;color:#FFF}
.abas .qt.atrasada{background:var(--alerta);color:#FFF}

/* ---- conversas do WhatsApp (whatsapp.html, aba Conversas) -----------------
   Lista à esquerda, conversa à direita, como o aplicativo. Sem JavaScript: cada
   conversa é um link. No celular aparece uma coluna por vez. */
.wa-filtros{margin-bottom:8px}
.wa-filtros summary{font-size:12.5px;margin-bottom:6px}
.wa-filtro{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-bottom:10px;font-size:12.5px}
.wa-filtro label{display:flex;flex-direction:column;gap:2px;color:var(--rotulo)}
.wa{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--linha);background:var(--papel);height:72vh;min-height:420px}
.wa-lista{overflow-y:auto;border-right:1px solid var(--linha)}
.wa-contato{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linha);text-decoration:none;color:var(--texto)}
.wa-contato:hover{background:var(--offwhite)}
.wa-contato.ativo{background:#07395612}
.wa-avatar{flex:0 0 38px;height:38px;border-radius:50%;background:var(--azul);color:#FFF;display:flex;align-items:center;justify-content:center;font-weight:600}
.wa-resumo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wa-linha{display:flex;gap:8px;align-items:center;justify-content:space-between;min-width:0}
.wa-linha b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-quando{font-size:11px;color:var(--rotulo);white-space:nowrap}
.wa-contato.nova .wa-quando{color:var(--verde);font-weight:600}
.wa-previa{font-size:12.5px;color:var(--rotulo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-novas{flex:0 0 auto;min-width:20px;padding:0 6px;border-radius:10px;background:var(--verde);color:#FFF;font-size:11px;font-weight:600;text-align:center;line-height:20px}
.wa-empresa{font-size:11px;color:var(--rotulo)}
.wa-chat{display:flex;flex-direction:column;min-width:0;background:var(--wa-fundo)}
.wa-cabeca{display:flex;gap:10px;align-items:center;padding:8px 14px;background:var(--papel);border-bottom:1px solid var(--linha)}
.wa-voltar{display:none;text-decoration:none;font-size:13px}
/* column-reverse com um filho so: a rolagem abre na ultima mensagem, como no app */
.wa-mensagens{flex:1;overflow-y:auto;padding:12px 6%;display:flex;flex-direction:column-reverse}
.wa-mensagens>div{display:flex;flex-direction:column;gap:4px}
.wa-dia{text-align:center;margin:10px 0 6px}
.wa-dia span{background:var(--papel);color:var(--rotulo);font-size:11.5px;padding:3px 10px;border-radius:6px;box-shadow:0 1px 0 #0000000F}
.wa-mais{text-align:center;font-size:12.5px}
.wa-msg{max-width:75%;padding:6px 9px 4px;border-radius:8px;box-shadow:0 1px 0 #00000014;font-size:13.5px}
.wa-msg.entrada{align-self:flex-start;background:var(--wa-entrada);border-top-left-radius:0}
.wa-msg.saida{align-self:flex-end;background:var(--wa-saida);border-top-right-radius:0}
.wa-texto{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--texto)}
.wa-anexo{display:block;font-size:13px;font-weight:600;margin-bottom:2px;overflow-wrap:anywhere}
.wa-rodape{text-align:right;font-size:10.5px;color:var(--rotulo);margin-top:2px}
.wa-resultado{font-size:11px;color:var(--rotulo);border-top:1px dashed var(--linha);margin-top:4px;padding-top:2px}
.wa-aviso{margin:0;padding:6px 14px;background:var(--papel);border-top:1px solid var(--linha)}
.wa-escolha{margin:auto}
/* app separado (/whatsapp/app): so as conversas, na tela inteira */
.wa-app{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--offwhite)}
.wa-app-topo{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--profundo);color:#FFF}
.wa-app-topo b{font-family:var(--titulo);font-size:16px}
.wa-app-topo a{margin-left:auto;color:var(--topo-claro);font-size:12.5px;text-decoration:none}
.wa-app-topo .c{font-size:11px;font-weight:600;background:var(--verde);color:#FFF;padding:0 7px;border-radius:9px}
.wa-app main{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px 10px}
.wa-app .wa{flex:1;height:auto;min-height:0}
.wa-app .wa-filtro{margin-bottom:8px}
.wa-push{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0;padding:6px 14px;background:var(--papel);border-bottom:1px solid var(--linha);font-size:12.5px;color:var(--texto)}
.wa-push[hidden]{display:none}
.wa-push form{margin:0}
.wa-push button{font-size:12px;padding:3px 10px}
@media (max-width:760px){
  .wa{grid-template-columns:1fr;height:auto;min-height:0}
  .wa-lista{border-right:none;max-height:none}
  .wa.com-conversa .wa-lista{display:none}
  .wa:not(.com-conversa) .wa-chat{display:none}
  .wa-voltar{display:inline}
  /* rolavel sem altura fixa encolhe a zero dentro da coluna flex: no celular a conversa tem o proprio tamanho */
  .wa-mensagens{flex:none;padding:10px 8px}
  .wa-msg{max-width:88%}
  /* no app separado a tela e so a conversa: ela ocupa a altura e rola por dentro */
  .wa-app .wa{grid-template-rows:minmax(0,1fr)}
  .wa-app .wa-chat{min-height:0}
  .wa-app .wa-mensagens{flex:1;min-height:0}
  .wa-app main{padding:6px}
}

.paginacao{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:13px}
details summary{cursor:pointer;color:var(--azul);font-weight:600;margin-bottom:8px}

/* ---- login -------------------------------------------------------------- */
.login{max-width:360px;margin:10vh auto;background:var(--papel);border:1px solid var(--linha);border-top:3px solid var(--azul);padding:28px 26px}
.login .marca-login{display:block;width:190px;max-width:100%;height:auto;margin:.2rem auto 1rem}
.login h1{text-align:center;font:600 10.5px var(--corpo);letter-spacing:.19em;text-transform:uppercase;color:var(--dourado);margin:0 0 20px}
.login input{width:100%;margin-bottom:12px}
.login button{width:100%;padding:11px}

/* ---- legado: partes de telas ainda não migradas ------------------------- */
.ficha-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.ficha-blocos .cartao{margin:0}
.grade-anual{border-collapse:collapse;font-size:13px}
.grade-anual td,.grade-anual th{padding:.2rem .35rem;text-align:center;border-bottom:1px solid var(--linha)}
.grade-anual td:first-child,.grade-anual th:first-child{text-align:left;white-space:nowrap}
.casa{display:inline-block;width:1.4rem;height:1.4rem;line-height:1.4rem;border-radius:2px;font-size:.7rem;color:#fff;text-decoration:none}
.casa.vazia{background:#ECE8DF;color:#AAA}
.casa.pendente{background:var(--dourado)}.casa.atrasada{background:var(--alerta)}.casa.entregue,.casa.paga{background:var(--verde)}
.casa.dispensada{background:#9AA3AD}.casa.emitida{background:var(--azul)}
.obrigacao-grupo summary{cursor:pointer;list-style:none;display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.obrigacao-grupo summary::-webkit-details-marker{display:none}
.obrigacao-grupo table td{vertical-align:middle}
/* previa da declaracao do PGDAS-D dentro de "detalhes" da linha da PGDAS-D */
.previa-pgdasd{margin:6px 0 10px;padding:10px 12px;background:var(--offwhite);border:1px solid var(--linha);border-radius:3px}
.previa-pgdasd .secao{margin-top:0}
.previa-pgdasd .aviso{margin:6px 0}
.previa-pgdasd .grade.g2{margin:8px 0}
.previa-pgdasd table{margin:6px 0}
/* editar contato do WhatsApp: a linha do formulário só aparece quando o
   'Editar' aponta para ela (âncora, sem JavaScript) */
tr.edicao-contato{display:none}
tr.edicao-contato:target{display:table-row}
@media (prefers-reduced-motion:no-preference){.item,button,.botao,.abas a,.lateral nav a{transition:background .12s,border-color .12s}}