/* =====================================================================
   Olho no Banco — estilos da tela
   =====================================================================
   Saiu de dentro do index.html, onde vivia como <style> inline. Não mudou
   uma regra sequer: é o mesmo arquivo, recortado.

   O motivo do recorte é duplo. Manutenção — o index.html tinha quase 6.000
   linhas e era o arquivo que mais muda no projeto. E segurança: enquanto
   estilo e script moravam dentro do HTML, a CSP era obrigada a aceitar
   'unsafe-inline', que é justamente a diretiva que conteria um XSS.
   ===================================================================== */
/* =====================================================================
   FONTES — servidas por nos, nunca pelo Google (AU-12)
   ---------------------------------------------------------------------
   Ate 02/09/2026 esta tela pedia o CSS a fonts.googleapis.com e os
   arquivos a fonts.gstatic.com. Como e a tela LOGADA, era a unica do
   produto que mandava o IP de cada usuario ao Google a cada
   carregamento — bem onde mora o dado de cliente, e em contradicao com o
   argumento de LGPD que a home vende ("zero requisicao externa").

   SITE-11 (03/09/2026): as nove declaracoes do IBM Plex sairam daqui e os
   sete arquivos sairam de publico/fontes/. As telas internas passaram para
   Jost e Libre Caslon Display, as mesmas do site, por decisao do dono — e
   fonte declarada que ninguem usa e peso que o navegador baixa a toa.

   O INCIDENTE DO AU-12 FICA REGISTRADO porque a licao nao era sobre qual
   fonte: eram SETE arquivos e nao nove, porque o IBM Plex Sans e variavel e
   o Google servia um unico .woff2 para 400, 500 e 600. Descobri porque tres
   arquivos baixados tinham o mesmo tamanho em bytes. Numero redondo repetido
   e sinal, e conferir por hash custa um comando.
   `font-display: swap` e deliberado e igual ao que o Google mandava: o
   texto aparece na fonte do sistema e troca quando a fonte chega, em vez
   de a tela ficar em branco. Com a fonte agora na MESMA origem, a espera
   e menor do que era.
   ===================================================================== */

/* =====================================================================
   PALETA — a mesma do site (site/index.html)
   ---------------------------------------------------------------------
   Saiu o azul-marinho frio (#0E2233) e o cinza esverdeado de fundo;
   entrou o neutro QUENTE sobre branco. O verde que havia aqui era da
   mesma safra provisória do site e nunca foi decisão de marca.

   A separação que estes tokens passam a ter, e que antes não existia:
   `--acento` é INTERAÇÃO (link, foco, botão, aba ativa, barra de uso) e
   `--verde` é SEMÂNTICA de "tudo certo" (conferido, sem limite, sem
   sinal de atenção). Os dois eram a mesma cor, e é por isso que a
   interface inteira parecia estar sempre dizendo "ok".
   ===================================================================== */
:root{
  /* Paleta da nova estrutura logada; páginas públicas continuam em marca.css. */
  --layout-marinho:#142239;
  --layout-marinho-hover:#263653;
  --layout-azul:#7157D9;
  --layout-azul-esc:#5C43C5;
  --layout-azul-soft:#EEEAFD;
  --layout-azul-fio:#CEC5F3;
  --layout-turquesa:#22B99A;
  --layout-turquesa-esc:#117761;
  --layout-menta:#E0F5EE;
  --layout-lilas:#F1EEFA;
  --layout-texto:#17243A;
  --layout-apoio:#5D6B80;
  --layout-fundo:#F4F7FB;
  --layout-suave:#EDF2F8;
  --layout-fio:#DCE4EE;
  --layout-fio-forte:#B8C5D5;
  --layout-texto-escuro:#9EACC0;
  --layout-superficie:#FFFFFF;
  --layout-campo:#F7F9FC;
  --layout-turquesa-anel:rgba(34,185,154,.28);
  --layout-azul-veu:rgba(113,87,217,.14);
  --layout-marinho-sombra:rgba(20,34,57,.05);
  --layout-marinho-sombra-forte:rgba(20,34,57,.13);
  --layout-azul-foco:rgba(113,87,217,.17);
  --layout-azul-painel:rgba(238,234,253,.72);
  /* A PALETA DA MARCA NAO MORA MAIS AQUI: ela vem de `/marca.css`, ligada
     antes deste arquivo no `index.html`. Sairam daqui os tokens que o site
     tambem usa — tinta, fundo, paper, rule, muted, acento e ocre —, porque
     era essa copia que fazia o vocabulario divergir: a mesma cor tinha
     `--ink` aqui e `--tinta` la, `--muted` aqui e `--tinta-2` la. Decisao do
     dono em 06/09/2026.
     O QUE FICOU sao os tokens que so o app tem: a semantica (verde,
     vermelho, roxo), os fios e veus, a familia do cabecalho ESCURO e a
     forma. Se o site passar a precisar de um deles, ele sobe para a
     `marca.css` — nao se copia. */
  --verde:#2E6B4F;        /* semântica: conferido, dentro do esperado */
  --verde-soft:#E7F0EA;
  /* `--vermelho` subiu para a `marca.css`: as paginas de assinatura o usam e
     nao ligam esta folha. O `-soft` fica aqui enquanto so o app o usar. */
  --vermelho-soft:#F7E9E9;
  /* os fios das caixas de aviso: mais firmes que o fundo suave, mais
     discretos que a cor cheia. Estavam cravados, um uso cada. */
  --ocre-fio:#E4D2A6;
  --vermelho-fio:#E2C0C0;
  /* O VEU dos modais. Era rgba(14,34,51,...), um azul-marinho do desenho
     frio anterior — em rgba(), que e a forma que uma busca por #hex nao
     acha. Agora e o proprio --tinta com alfa, entao escurecer a interface
     usa a MESMA tinta com que ela escreve. */
  --veu:rgba(50,48,47,.82);
  --veu-leve:rgba(50,48,47,.72);
  /* Roxo = "projetado". Frio de proposito, como o verde: e SEMANTICA, e
     semantica escolhe a cor pelo significado, nao pela temperatura. Esta
     aqui como token para ser revisado — cravado no corpo da regra, ele
     escapou de duas migracoes de paleta seguidas. */
  --roxo:#6B4780;
  --roxo-soft:#EFE7F2;
  /* SOBRE O --tinta DO CABECALHO. Nao e a paleta clara com outro nome:
     contraste e RELACAO, entao sobre fundo escuro os tons sao outros — e a
     semantica precisa de versoes CLARAS, senao o verde de "tudo certo" some
     no escuro. Estavam os sete cravados no corpo das regras (SITE-12 fatia 4). */
  --papel-escuro:#F1EDE7;      /* texto principal sobre o --tinta */
  --ink-texto:#FFFFFF;         /* o que precisa saltar: a marca */
  --ink-texto-2:#C9C2BC;       /* texto de apoio */
  --ink-suave:#A79E97;         /* aba em repouso, legenda */
  --ink-fio:#4A4744;           /* fio sobre o escuro */
  --verde-claro:#6FA98A;       /* semantica sobre escuro */
  --ocre-claro:#CFA23F;
  --vermelho-claro:#D4796B;
  /* SITE-12 — forma, com os MESMOS nomes do site (site/index.html). O app
     tinha um --radius de 3px e nenhum token de pilula: cantos duros e botao
     retangular, que e o que fazia a tela parecer de outro produto mesmo
     depois de acertar fonte e cor no SITE-11. */
  /* 12px e NAO 14px, que e o valor do mesmo token na home. Medido em
     04/09/2026 comparando os dois :root: e a UNICA divergencia de valor entre
     tokens de mesmo nome no projeto inteiro, e ela e deliberada — o cartao do
     app e menor e mais denso que o da home, e 14px nele fica inchado. Fica
     escrito porque diferenca nao registrada entre coisas de mesmo nome e
     exatamente o apodrecimento que este arquivo passou o dia removendo: sem
     esta linha, o proximo a comparar as duas paletas "conserta" uma das duas. */
  --raio:12px;            /* cartao e campo — a home usa 14px, ver acima */
  --raio-p:8px;           /* elemento pequeno */
  --pilula:100px;         /* botao */
  --radius:12px;          /* nome antigo, mantido: ha regras que o usam */
}
html[data-tema="noturno"]{
  --layout-marinho:#080F1B;
  --layout-marinho-hover:#2C2748;
  --layout-azul:#9A7CF2;
  --layout-azul-esc:#C2B2FF;
  --layout-azul-soft:#2C2748;
  --layout-azul-fio:#514775;
  --layout-turquesa:#66DFC0;
  --layout-turquesa-esc:#9CF1DA;
  --layout-menta:#1E493F;
  --layout-lilas:#29243F;
  --layout-texto:#EEF3FF;
  --layout-apoio:#9CABC1;
  --layout-fundo:#0F1827;
  --layout-suave:#1B2A40;
  --layout-fio:#2B3A50;
  --layout-fio-forte:#475A76;
  --layout-texto-escuro:#8FA0B9;
  --layout-superficie:#152235;
  --layout-campo:#1B2A40;
  --layout-turquesa-anel:rgba(102,223,192,.24);
  --layout-azul-veu:rgba(154,124,242,.14);
  --layout-marinho-sombra:rgba(0,0,0,.10);
  --layout-marinho-sombra-forte:rgba(0,0,0,.30);
  --layout-azul-foco:rgba(154,124,242,.24);
  --layout-azul-painel:rgba(44,39,72,.72);
  --verde:#66DFC0;
  --verde-soft:#1E493F;
  --vermelho-soft:#4A252C;
  --ocre-fio:#6B5528;
  --vermelho-fio:#754047;
  --veu:rgba(2,8,16,.88);
  --veu-leve:rgba(2,8,16,.78);
  --roxo:#C2B2FF;
  --roxo-soft:#2C2748;
  --papel-escuro:#EEF3FF;
  --ink-texto:#FFFFFF;
  --ink-texto-2:#C5D0E1;
  --ink-suave:#8FA0B9;
  --ink-fio:#34445A;
  --verde-claro:#66DFC0;
  --ocre-claro:#F0BF59;
  --vermelho-claro:#FF9A91;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--tinta);
  font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}
/* O NOME `.mono` FICOU, e a fonte deixou de ser monoespacada. Renomear
   exigiria editar o markup das telas, que e CONTEUDO e nao e desta frente
   — a casca e. O que a classe significa hoje: algarismo de largura fixa,
   que e o que ela sempre serviu para garantir. */
.mono{font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

.cond{font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;letter-spacing:.01em}
h1,h2,h3{margin:0;font-family:'Libre Caslon Display',Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-0.005em;line-height:1.15}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--acento-esc)}

/* ---------- Cabeçalho ---------- */
header{
  background:var(--tinta);
  color:var(--papel-escuro);
  padding:14px 16px 0;
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* O cabecalho nao dizia o nome do produto em lugar NENHUM: o h1 era o nome da
   tela e o subtitulo vira o nome da empresa do cliente em tempo de execucao.
   A marca aqui e a MESMA da tela de entrada — mesmo simbolo, mesmo peso —
   porque duas lockups diferentes para o mesmo produto e o tipo de coisa que
   ninguem nota e todo mundo sente. */
.marcaApp{display:flex;align-items:center;gap:9px}
.marcaApp svg{flex:none}
/* font-family:inherit e obrigatorio aqui: o h1 global e Libre Caslon
   Display, e a lockup da tela de entrada usa <strong>, que herda Jost. Sem
   esta linha as duas lockups sao de fontes DIFERENTES — e ainda por cima uma
   serifada de display em falso-negrito 600, que ela nao foi desenhada para
   ser. Medido renderizado; o comentario acima dizia "mesmo simbolo, mesmo
   peso" e nao era verdade ate esta linha existir. */
.brand h1{font-family:inherit;font-size:16px;font-weight:600;color:var(--ink-texto);letter-spacing:.01em}
.brand .sub{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-suave);margin-top:2px}
/* Tres dos quatro controles daqui eram <div onclick>: fora da ordem de
   tabulacao e sem o anel de foco da fatia 3 — na pratica, SAIR nao se
   alcancava pelo teclado. Viraram <button>, e este bloco serve aos dois: o
   reset existe porque botao traz fundo e fonte do navegador. */
.status{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  padding:4px 10px;border-radius:var(--pilula);border:1px solid var(--ink-fio);
  background:transparent;color:var(--ink-texto-2);
  font-family:inherit;line-height:1.5;cursor:pointer;
}
.status:hover{border-color:var(--ink-suave);color:var(--ink-texto)}
/* o anel da fatia 3 e --acento sobre fundo CLARO; sobre o --tinta ele some, e
   o offset o encostaria no vizinho. Aqui ele e claro e por dentro. */
.status:focus-visible{outline:2px solid var(--papel-escuro);outline-offset:1px}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-suave);flex:none}
.status.ok .dot{background:var(--verde-claro)}
.status.warn .dot{background:var(--ocre-claro)}
.status.err .dot{background:var(--vermelho-claro)}

nav{display:flex;gap:2px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
/* A barra rola na horizontal com a propria barra de rolagem escondida, entao
   NADA dizia que havia mais abas a direita. Medido a 1200px de largura: ela
   transborda 437px, entao as ultimas ficavam invisiveis para sempre. O
   esmaecido e a unica dica, e ele nao intercepta clique. */
.navEnvelope{position:relative}
.navEnvelope::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--tinta));
}
/* Eram rotulos em CAIXA ALTA com tracking, e uma fila deles vira parede: a
   caixa alta tira o perfil da palavra, que e justamente como se le de relance
   uma lista longa. Sao 15 abas na marcacao, das quais 5 dependem de papel —
   um usuario comum ve 10, um administrador ve as 15. Caixa de frase, peso
   menor, e o realce fica por conta da cor e do fio, que e o que o site faz. */
nav button{
  background:transparent;border:0;color:var(--ink-suave);padding:10px 13px;
  font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-weight:500;font-size:14px;
  text-transform:none;letter-spacing:0;white-space:nowrap;
  border-bottom:2px solid transparent;cursor:pointer;
}
nav button:hover{color:var(--ink-texto-2)}
nav button:focus-visible{outline:2px solid var(--papel-escuro);outline-offset:-3px;border-radius:var(--raio-p)}
/* A aba ativa e INTERACAO. O cabecalho da paleta ja separa --acento
   (interacao) de --verde (semantica de "tudo certo"), e a aba estava na cor
   da segunda — a mesma confusao que aquele comentario existe para desfazer. */
nav button.on{color:var(--ink-texto);border-bottom-color:var(--acento);font-weight:600}

main{padding:16px 14px 60px;max-width:1150px;margin:0 auto}
.view{display:none}
.view.on{display:block}

/* ---------- Blocos ---------- */
.card{background:var(--fundo);border:1px solid var(--rule);border-radius:var(--raio);
  margin-bottom:18px;box-shadow:0 1px 2px rgba(50,48,47,.03)}
.card > .hd{
  padding:14px 18px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
/* Caslon em caixa alta com tracking e o unico tratamento que o site nao usa
   em lugar nenhum: a serifada de display foi desenhada para caixa de frase.
   Rotulo pequeno em caixa alta continua existindo — e o .eyebrow, em Jost. */
.card > .hd h2{font-size:17px;text-transform:none;letter-spacing:-.005em}
.card > .bd{padding:18px}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:600}

/* ---------- Painel de totais ---------- */
.painel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule)}
.painel .cel{background:var(--fundo);padding:12px 13px}
/* Caslon aqui porque e numero ISOLADO por celula, igual ao .kpi .val da
   home. Caslon nao tem algarismo tabular — medido — entao NUNCA em coluna. */
.painel .cel .v{font-family:'Libre Caslon Display',Georgia,'Times New Roman',serif;font-size:24px;font-weight:400;letter-spacing:-.01em;margin-top:3px}
.painel .cel .v.sm{font-size:16px}
/* Total que exclui contrato bloqueado por metodologia pendente: o número
   fica marcado no próprio lugar em que é lido, não só na tarja abaixo —
   quem bate o olho na célula precisa ver que ela é parcial. */
.painel .cel .v.parcial{color:var(--vermelho)}
.painel .cel .v.parcial::after{
  content:'parcial';display:inline-block;vertical-align:middle;margin-left:7px;
  font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  background:var(--vermelho-soft);color:var(--vermelho);border-radius:var(--pilula);padding:2px 8px;
}

/* ---------- Formulários ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
label.f{display:block}
label.f > span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:6px}
input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--rule);border-radius:var(--raio-p);
  background:var(--fundo);font-family:inherit;font-size:15px;color:var(--tinta);
}
textarea{resize:vertical;min-height:84px}
/* O marcador de posicao vinha do navegador. Em --muted ele mede 5.55 sobre o
   campo — legivel, e ainda claramente mais leve que um valor de verdade. */
::placeholder{color:var(--muted);opacity:1}
input.mono,select.mono{font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:var(--acento)}
/* Medido antes desta linha: o arquivo inteiro tinha UMA regra de :focus, a de
   cima, e botao caia no anel do navegador (1px auto, desenhado SOBRE a pilula
   escura, quase invisivel). O anel aqui fica do lado de fora — offset 2px —
   porque sobre fundo escuro e o unico lugar onde ele aparece. */
/* `button` entrou nesta lista em 04/09/2026, e a razao e de CLASSE e nao de
   caso: a regra cobria `.btn`, e botao sem essa classe ficava sem contorno
   nenhum ao navegar por Tab — a pessoa perde o cursor e nao sabe onde esta.
   Medido: 132 botoes no app, 131 cobertos, 1 fora (o fechar do toast,
   `class="tbtn"`). Acrescentar `.tbtn` a lista consertaria o CASO; acrescentar
   `button` fecha a CLASSE, e o proximo botao com classe propria nasce coberto.
   As regras mais especificas continuam mandando: `nav button:focus-visible` e
   `.ajuda-btn:focus-visible` tem seletor mais forte e nao sao afetadas. */
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acento);outline-offset:2px;
}
/* a outline segue o border-radius, entao a pilula so vale para quem E pilula:
   num link ou num <summary> ela sairia arredondada e mentiria sobre a forma
   do que esta focado */
.btn:focus-visible{border-radius:var(--pilula)}
.chk input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* A caixa de selecao vinha no AZUL do navegador (accent-color: auto), a unica
   cor fria que sobrava numa tela de formulario inteira. */
.chk input,input[type=checkbox],input[type=radio]{accent-color:var(--acento)}
/* O ESTADO DE ERRO DO CAMPO, que nao existia — medido: nenhuma regra deste
   arquivo casava campo invalido. O formulario so reclamava na caixa do topo, e
   numa tela de doze campos "confira os campos marcados" nao apontava para
   lugar nenhum.
   O gancho e aria-invalid, o MESMO atributo que o leitor de tela usa: assim
   marcar para quem enxerga e marcar para quem ouve sao um ato so, e nao dois
   que podem divergir com o tempo. .f.erro existe para quem so tem o rotulo. */
[aria-invalid="true"],.f.erro input,.f.erro select,.f.erro textarea{
  border-color:var(--vermelho);background:var(--vermelho-soft);
}
[aria-invalid="true"]:focus,.f.erro input:focus,.f.erro select:focus,.f.erro textarea:focus{
  outline-color:var(--vermelho);border-color:var(--vermelho);
}
/* Com :has(), marcar aria-invalid no campo JA pinta o rotulo e a dica: um
   gancho so, e nao dois que podem divergir. A classe .f.erro continua valendo
   como atalho para quem tem o rotulo em maos, mas deixou de ser obrigacao —
   era ela que fazia o campo ficar vermelho com o rotulo preto quando alguem
   marcava so o atributo. Navegador sem :has() ainda marca o campo. */
.f.erro > span,label.f:has([aria-invalid="true"]) > span{color:var(--vermelho)}
.f.erro .hint,.hint.erro,label.f:has([aria-invalid="true"]) .hint{color:var(--vermelho)}

.chk{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;padding-top:4px}
.chk input{width:auto;margin-top:3px}
.hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}

.btn{
  background:var(--tinta);color:#fff;border:1px solid var(--tinta);
  padding:11px 22px;border-radius:var(--pilula);font-weight:500;font-size:14.5px;
}
.btn.sec{background:var(--fundo);color:var(--tinta);border-color:var(--rule-strong)}
.btn.danger{background:var(--fundo);color:var(--vermelho);border-color:var(--rule-strong)}
.btn.sm{padding:5px 10px;font-size:12.5px}
/* Era opacity:.45. O contraste REAL do texto ficava em 1.59 — ilegivel —
   enquanto getComputedStyle informava 13.13, porque ele le a cor ANTES da
   composicao. Opacidade compoe o elemento inteiro contra a pagina, entao o
   numero ingenuo nao mede o que a pessoa ve. "Salvando..." e estado que se
   LE, logo precisa de cor propria. */
.btn:disabled{background:var(--paper);color:var(--muted);border-color:var(--rule);cursor:not-allowed}
.acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- Tabelas ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{
  font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
/* SITE-12 fatia 2 — a borda POR LINHA saiu e entrou o zebrado. Numa tabela
   densa, um fio por linha desenha uma GRADE, e a grade compete com o numero,
   que e o que se veio ler. O zebrado da a mesma ancora de leitura sem traco.
   O fio fica onde separa GRUPO: sob o cabecalho e sobre o rodape. */
td{padding:9px 12px;border-bottom:0;vertical-align:top}
tbody tr:nth-child(even){background:var(--paper-suave)}
/* SITE-13 — ESTA E A CLASSE DO NUMERO, e ela ja existia antes do item.
   Eu escrevi uma segunda (`.num`) em 04/09/2026 sem procurar a que havia, e
   as duas faziam a mesma coisa no mesmo arquivo — a duplicacao que este
   arquivo passou o dia removendo em COR, criada por mim em FORMA. Desfeita:
   as celulas migraram para ca e a `.num` de raiz saiu. (A `.uso .num`, mais
   abaixo, e outra coisa e e anterior a mim: fica.)

   O QUE O ITEM APRENDEU, e vale para quem marcar celula nova:
   alinhar TODA celula numerica a direita esta errado. NAO levam `.n`:
   - IDENTIFICADOR de largura variavel (CNPJ, email, codigo, usuario);
   - PAR "3 / 10" — e razao, nao grandeza: alinhado, empilha o fim do
     SEGUNDO numero, e o olho compara pelo PRIMEIRO;
   - CAUDA CONDICIONAL: etiqueta que as vezes aparece DEPOIS do numero, na
     mesma linha. Quem encosta na borda vira a etiqueta e o numero muda de
     lugar conforme ela exista — medido, o ultimo digito caiu em 700.2,
     605.8, 700.2 e 605.8 nas quatro linhas de uma coluna so.

   LEVAM, e nao sao excecao: sufixo CONSTANTE (" mes(es)"), que desloca todas
   as linhas igual e mantem os digitos empilhados; e segunda linha depois de
   <br>, que nao disputa a borda com o numero. Data de largura fixa tanto faz
   — dd/mm/aaaa ocupa a mesma caixa alinhada ou nao —, e por isso a convencao
   anterior a alinha e nao esta errada.

   teste/app-alinhamento.js trava isso. */
td.n,th.n{text-align:right;font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;white-space:nowrap}

/* LINHA EM ESTADO ENCERRADO — arquivada, cancelada, encerrada.
   O sinal continua, o texto volta a ser legivel.

   O QUE ELA SUBSTITUI, e por que nao era escolha de estilo: tres telas
   marcavam esse estado com `style="opacity:.5"` (ou .55) na LINHA INTEIRA.
   `opacity` composita o elemento sobre o que esta atras, entao o texto passa
   a ser lido contra o fundo com a cor ja diluida — medido em 04/09/2026, o
   contraste real caia para 2,88 (opacity .5) e 3,31 (.55), contra um piso de
   4,5. Com esta classe, --muted sobre --fundo da 5,55 e continua
   distinguivel do texto normal (diferenca de luminancia 0,109).

   E O QUE FAZ ISSO SOBREVIVER A PORTAO: `getComputedStyle` devolve a cor
   CHEIA — 13,13 nos tres casos. Qualquer verificacao que leia cor computada
   PASSA. Foi assim que o botao "Salvando..." viveu informando 13,13 e
   valendo 1,59, e e a mesma armadilha aqui.

   O QUE FICA DE FORA DE PROPOSITO: `opacity` continua legitima onde nao
   cobre texto (o quadrado do passo nao feito, que e emoji de estado) e onde
   o contraste resultante ainda passa (.72 da 5,40; .75 da 5,90). A trava
   pergunta se a pessoa consegue LER, nao se alguem usou `opacity`. */
tr.inativa td{color:var(--muted)}
/* Era #F7F9F7, um branco esverdeado do desenho anterior. Sobreviveu a
   migracao de paleta porque cor CRAVADA nao usa token — terceiro caso do
   mesmo tipo neste projeto, depois do logotipo do aviso legal e da paleta
   fria do cabecalho. */
tbody tr:hover,tbody tr:nth-child(even):hover{background:var(--acento-soft)}
tfoot td{border-top:1.5px solid var(--tinta);border-bottom:0;font-weight:600;background:var(--paper)}
.neg{color:var(--vermelho)}
.cambial{color:var(--ocre-esc)}
/* tabela matriz (ex.: detalhamento por contrato x mês): cabeçalho e 1ª coluna fixos ao rolar */
.tw.fixo{max-height:440px;overflow-y:auto}
.tw.fixo table{border-collapse:separate;border-spacing:0}
.tw.fixo thead th{position:sticky;top:0;background:var(--fundo);z-index:2;box-shadow:0 1px 0 var(--rule-strong)}
.tw.fixo tfoot td{position:sticky;bottom:0;z-index:2}
.tw.fixo thead th:first-child,.tw.fixo tbody td:first-child,.tw.fixo tfoot td:first-child{
  position:sticky;left:0;background:var(--fundo);z-index:3;
}
/* A primeira coluna e fixa e tem fundo proprio, senao o texto passa por
   baixo ao rolar. Sem esta linha ela seria a unica que nao zebra, e a
   listra pararia no meio da tabela. */
.tw.fixo tbody tr:nth-child(even) td:first-child{background:var(--paper-suave)}
.tw.fixo tfoot td:first-child{background:var(--paper)}
.tw.fixo td.total,.tw.fixo th.total{background:var(--paper);font-weight:600}
/* AS ACOES FICAM PRESAS A DIREITA quando a tabela e mais larga que a tela.
   ACHADO DO DONO EM QA, 08/09/2026, e a frase dele diz o defeito melhor que
   qualquer descricao: "nao esta me aparecendo a opcao de editar contrato" e,
   depois de procurar, "e um problema de layout, o editar esta la mas tem que
   jogar para o lado".

   POR QUE ISTO E' PIOR QUE UM BOTAO FEIO: a coluna que sai da tela e a das
   ACOES, e a conclusao natural de quem nao rola e' que a acao NAO EXISTE — nao
   que ela esta escondida. Ele so a achou porque insistiu, e estava a corrigir
   uma leitura de IA errada num contrato de R$ 3 milhoes; quem nao insistisse
   concluiria que nao da para corrigir o dado.

   E O PRODUTO JA APONTAVA PARA O BOTAO INVISIVEL: a etiqueta "metodologia
   pendente" traz no proprio title "(botao Editar)". A tabela de contratos tem
   NOVE colunas, a ultima e a das acoes, e o `.tw` rola na horizontal — entao
   em tela estreita a instrucao mandava o usuario a um lugar fora do quadro.

   MESMO MECANISMO DA `.tw.fixo`, espelhado: la a PRIMEIRA coluna e presa
   porque e a que identifica a linha; aqui e a ULTIMA, porque e a que age sobre
   ela. O fundo proprio e a sombra existem pela mesma razao la e aqui — sem
   fundo o texto passa por baixo ao rolar, e sem a sombra nao se ve que a
   coluna esta flutuando sobre o resto.

   NAO MUDA NADA EM TELA LARGA: sem transbordo, `sticky` nao tem a que se
   prender e a tabela fica igual. */
.tw.acoes-presas thead th:last-child,
.tw.acoes-presas tbody td:last-child{
  position:sticky;right:0;background:var(--fundo);z-index:2;
  box-shadow:-1px 0 0 var(--rule);
}
/* O zebrado e o hover tem de acompanhar, senao a coluna presa e a unica que
   nao zebra e a listra para no meio da tabela — foi a mesma linha que a
   `.tw.fixo` precisou para a primeira coluna. */
.tw.acoes-presas tbody tr:nth-child(even) td:last-child{background:var(--paper-suave)}
.tw.acoes-presas tbody tr:hover td:last-child,
.tw.acoes-presas tbody tr:nth-child(even):hover td:last-child{background:var(--acento-soft)}
/* O tfoot fica de FORA de proposito: a ultima celula dele e um `colspan`, e
   prende-la a direita arrastaria duas colunas de total para cima das acoes. */

.vazio{padding:34px 18px;text-align:center;color:var(--muted);font-size:14px}

.tag{
  display:inline-block;font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;font-size:10.5px;font-weight:500;
  padding:3px 9px;border-radius:var(--pilula);background:var(--acento-soft);color:var(--acento-esc);
  letter-spacing:.03em;white-space:nowrap;
}
.tag.usd{background:var(--ocre-soft);color:var(--ocre-esc)}
.tag.proj{background:var(--roxo-soft);color:var(--roxo)}
/* A unica tag de fundo NEUTRO, entao a unica que pode sumir dentro de uma
   linha zebrada: medido, --paper contra a listra separa 1.028. O fio a
   sustenta em qualquer fundo sem mexer no texto — trocar o fundo por --rule
   resolveria a pilula e derrubaria o texto para 4.149, abaixo do piso. E e
   sombra interna, nao borda: borda deixava a pilula 2px mais alta que as
   vizinhas na mesma linha. */
.tag.cinza{background:var(--paper);color:var(--muted);box-shadow:inset 0 0 0 1px var(--rule)}
.tag.vermelho{background:var(--vermelho-soft);color:var(--vermelho)}

/* ---------- Utilização do plano (SSV-01) ---------- */
.uso{display:flex;flex-direction:column;gap:14px}
.uso .item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.uso .rot{font-size:13.5px;font-weight:600}
.uso .num{font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;text-align:right}
.uso .trilho{grid-column:1/-1;height:10px;background:var(--paper);border-radius:5px;overflow:hidden}
.uso .trilho i{display:block;height:100%;background:var(--acento);border-radius:5px}
.uso .trilho i.atencao{background:var(--ocre)}
.uso .trilho i.estourou{background:var(--vermelho)}
.uso .nota{grid-column:1/-1;font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){ .uso .trilho i{transition:width .35s ease} }
/* ---------- Régua de competência (assinatura) ---------- */
.regua{display:flex;flex-direction:column;gap:1px}
.regua .lin{display:grid;grid-template-columns:78px 1fr 118px;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule)}
.regua .mes{font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:12.5px;color:var(--muted)}
.regua .barra{height:16px;background:var(--paper);position:relative;border-radius:1px;overflow:hidden}
.regua .barra i{position:absolute;left:0;top:0;bottom:0;display:block}
.regua .barra i.j{background:var(--verde)}
.regua .barra i.c{background:var(--ocre);opacity:.85}
.regua .val{text-align:right;font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:13px;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px}
.legenda i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}

.aviso{
  background:var(--ocre-soft);border:1px solid var(--ocre-fio);border-left:3px solid var(--ocre);
  padding:10px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:13px;
}
.aviso.err{background:var(--vermelho-soft);border-color:var(--vermelho-fio);border-left-color:var(--vermelho)}
.aviso strong{display:block;margin-bottom:3px}

.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;align-items:end}
/* Medido: o botao saia com 253px, exatamente a largura de um campo, porque
   item de grid estica. Botao com largura de campo le como campo. */
.filtros .btn{justify-self:start}
details.detalhe{border-top:1px solid var(--rule);padding:10px 0 0}
details.detalhe summary{cursor:pointer;font-size:13px;color:var(--acento-esc);font-weight:600}
.sep{height:1px;background:var(--rule);margin:14px 0}
.linha-evento{display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:13.5px;align-items:center}
th.sortable{cursor:pointer;user-select:none;transition:background .15s}
th.sortable:hover{background:var(--paper);color:var(--acento-esc)}
.sort-icon{font-size:10.5px;margin-left:3px;opacity:0.75}
.sort-active{color:var(--acento-esc);font-weight:700}
.item-anexo{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--paper-suave);border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:6px;gap:8px;font-size:13.5px}
.item-anexo-info{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-anexo-acoes{display:flex;align-items:center;gap:6px;flex:none}
/* ---------- Conferência bancária ---------- */
.cf-box{border:1px solid var(--rule);border-left:4px solid var(--rule-strong);border-radius:var(--radius);
  padding:11px 13px;background:var(--paper-suave);font-size:13.5px;line-height:1.5}
.cf-box.ok{border-left-color:var(--verde);background:var(--verde-soft)}
.cf-box.alerta{border-left-color:var(--ocre-esc);background:var(--ocre-soft)}
.cf-box.erro{border-left-color:var(--vermelho);background:var(--vermelho-soft)}
.cf-box strong{display:block;font-size:15px;margin-bottom:3px}
/* ---------- Aviso flutuante ---------- */
#toast{position:fixed;right:16px;bottom:18px;z-index:300;display:none;max-width:330px;
  background:var(--tinta);color:#fff;border-radius:5px;padding:11px 14px;font-size:13.5px;line-height:1.45;
  box-shadow:0 12px 32px rgba(0,0,0,.32)}
#toast .tbtn{display:inline-block;margin-top:8px;background:var(--tinta);color:#fff;border:0;border-radius:4px;
  padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
/* ---------- Login (SITE-10) ----------
   A porta de entrada é a primeira tela do produto que alguém vê depois do
   site, e até 03/09/2026 ela não tinha relação nenhuma com ele: fundo de
   CARVÃO em tela cheia (`background:var(--tinta)`) onde o site é bege, título
   em sans onde o site usa Caslon, e sem a marca. Quem vinha da home trocava
   de identidade no clique — no momento em que a confiança mais importa.

   As fontes são as do SITE (Jost e Libre Caslon Display), declaradas logo
   abaixo e servidas de `publico/fontes/`. O IBM Plex continua nas telas
   internas: trocar a tipografia do produto inteiro é decisão visual grande e
   foi deixada para o dono, separada deste item. */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fontes/jost-latin.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fontes/caslon-latin.woff2) format('woff2')}

/* COLUNA, não linha: a marca é irmã do cartão, não vizinha. Em `row` — que é
   o padrão do flex e o que estava aqui — ela ficaria AO LADO da caixa. */
#login{
  position:fixed;inset:0;background:linear-gradient(135deg,var(--layout-azul-soft),var(--layout-menta));z-index:100;
  display:none;grid-template-columns:minmax(320px,46%) minmax(380px,54%);align-items:stretch;padding:0;
  font-family:'Jost','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
.loginBoasVindas{display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,7vw,104px);background:var(--layout-marinho);color:var(--fundo);position:relative;overflow:hidden}
.loginBoasVindas::before,.loginBoasVindas::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--layout-turquesa-anel)}
.loginBoasVindas::before{width:360px;height:360px;right:-160px;top:-100px}
.loginBoasVindas::after{width:240px;height:240px;left:-130px;bottom:-100px;background:var(--layout-azul-veu)}
.loginSinal{color:var(--layout-turquesa);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:20px}
.loginBoasVindas h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(38px,4.8vw,66px);font-weight:400;line-height:1.02;letter-spacing:-.035em;max-width:620px;margin:0 0 24px}
.loginBoasVindas p{max-width:520px;font-size:16px;line-height:1.65;color:var(--layout-texto-escuro);margin:0}
.loginBeneficios{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;position:relative;z-index:1}
.loginBeneficios span{padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:100px;background:rgba(255,255,255,.06);font-size:11px;color:var(--fundo)}
.loginAcesso{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px;min-width:0}
/* A marca, como no topo da home: o círculo e o nome do produto. Sem ela a
   tela dizia "Controle de Empréstimos", que é o que o sistema faz e não como
   ele se chama — quem chegou por um anúncio do Olho no Banco via outro nome. */
.loginMarca{display:flex;align-items:center;gap:9px;justify-content:center;
  margin-bottom:22px;color:var(--layout-azul)}
.loginMarca strong{color:var(--layout-marinho);font-size:16px;font-weight:600;letter-spacing:.01em}

.caixaLogin{background:var(--fundo);border:1px solid var(--layout-azul-fio);border-top:4px solid var(--layout-azul);border-radius:14px;
  padding:30px 28px;width:100%;max-width:380px;
  box-shadow:0 1px 2px var(--layout-marinho-sombra),0 18px 44px var(--layout-marinho-sombra-forte)}
.caixaLogin h2{font-family:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:25px;line-height:1.2;margin-bottom:4px;letter-spacing:-.01em}
.caixaLogin .sub{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:22px}
.caixaLogin label.f{margin-bottom:13px}
.caixaLogin .btn{width:100%;margin-top:8px;padding:12px;border-radius:100px;background:var(--layout-azul);border-color:var(--layout-azul);color:var(--fundo);font-weight:600}
.caixaLogin .btn:hover{background:var(--layout-azul-esc);border-color:var(--layout-azul-esc)}
.caixaLogin input:focus{border-color:var(--layout-azul);box-shadow:0 0 0 3px var(--layout-azul-foco)}
#loginErro{color:var(--vermelho);font-size:13px;min-height:18px;margin-top:9px;line-height:1.35}
@media(max-width:840px){
  #login{grid-template-columns:1fr;overflow-y:auto}
  .loginBoasVindas{min-height:230px;padding:34px 28px}
  .loginBoasVindas h1{font-size:38px;margin-bottom:12px}
  .loginBoasVindas p{font-size:14px;line-height:1.5}
  .loginBeneficios{margin-top:18px}
  .loginAcesso{padding:30px 18px 44px}
}
@media(max-width:480px){
  .loginBoasVindas{min-height:205px;padding:28px 20px}
  .loginBoasVindas h1{font-size:33px}
  .loginBeneficios{display:none}
  .caixaLogin{padding:25px 20px}
}
@media(max-width:620px){
  .regua .lin{grid-template-columns:62px 1fr 96px;gap:7px}
  .painel .cel .v{font-size:18px}
  main{padding:14px 10px 60px}
}
@media(prefers-reduced-motion:no-preference){
  .regua .barra i{transition:width .35s ease}
}

/* ---------- Aviso sobre cálculos e análises -------------------------------
   Discreto por decisão: quem confere um número não pode ter o número
   escondido por uma tarja. A nota fica no rodapé do bloco que mostrou o
   resultado, em corpo pequeno, com um link "Entenda esta análise" que abre a
   versão completa (#modalAvisoAnalise, publico/index.html). O ⓘ inline
   (.info-analise) faz o mesmo papel ao lado de um rótulo sensível — "Cobrado
   a maior", "Divergência", "Diferença encontrada" —, onde não cabe frase. */
.nota-analise{
  display:flex;gap:7px;align-items:flex-start;
  border-top:1px solid var(--rule);margin-top:12px;padding:9px 13px 3px;
  font-size:11.5px;line-height:1.45;color:var(--muted);
}
.nota-analise .ico{flex:none;line-height:1.5}
.nota-analise a{color:var(--acento-esc);font-weight:600;text-decoration:underline;white-space:nowrap}
/* O recuo lateral padrão (13px) é o mesmo do .bd e do .painel .cel, para a
   nota alinhar com o conteúdo quando ela é colada num container sem folga —
   tabela de relatório, corpo com padding:0. Quando o container JÁ tem a
   folga, quem chama pede a variante embutida e a nota não recua duas vezes. */
.nota-analise.embutida{padding-left:0;padding-right:0}

.info-analise{
  display:inline-block;margin-left:4px;width:14px;height:14px;line-height:14px;
  border-radius:50%;background:var(--acento-soft);color:var(--acento-esc);
  font-size:10px;font-weight:700;text-align:center;text-decoration:none;
  vertical-align:1px;cursor:help;
}
.info-analise:hover{background:var(--acento);color:#fff}

/* ONB-03: o link inline que abre um vídeo de ajuda. Discreto de
   propósito — é oferta, não instrução: quem já sabe fazer não deve
   tropeçar nele. */
.video-ajuda{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--acento-esc);font-size:12.5px;font-weight:600;
  text-decoration:none;cursor:pointer;
}
.video-ajuda:hover{text-decoration:underline}
.video-ajuda .dur{color:var(--muted);font-weight:400}

#modalVideo{
  position:fixed;inset:0;background:var(--veu);z-index:215;
  display:none;align-items:center;justify-content:center;padding:20px;
}
#modalVideo .caixa{
  background:var(--fundo);border-radius:5px;width:100%;max-width:840px;
  max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.45);
}
#modalVideo .topo{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--rule);
}
#modalVideo .topo h2{font-size:16px}
#modalVideo .corpo{padding:0;overflow-y:auto}
/* O player ocupa a largura e mantém 16:9 sem depender de resolução — a
   proporção é do vídeo, não da janela de quem assiste. */
#modalVideo .player{width:100%;aspect-ratio:16/9;background:#000;display:block;border:0}
#modalVideo .legenda{padding:12px 18px 16px;font-size:13px;color:var(--muted);line-height:1.5}

#modalAvisoAnalise{
  position:fixed;inset:0;background:var(--veu-leve);z-index:210;
  display:none;align-items:center;justify-content:center;padding:20px;
}
#modalAvisoAnalise .caixa{
  background:var(--fundo);border-radius:5px;width:100%;max-width:640px;
  max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.45);
}
#modalAvisoAnalise .topo{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--rule);
}
#modalAvisoAnalise .topo h2{font-size:17px}
#modalAvisoAnalise .corpo{padding:16px 20px 20px;overflow-y:auto;font-size:13.5px;line-height:1.55}
#modalAvisoAnalise .corpo h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px}
#modalAvisoAnalise .corpo h3:first-child{margin-top:0}
#modalAvisoAnalise .corpo p{margin:0 0 10px}
#modalAvisoAnalise .corpo ul{margin:0 0 10px;padding-left:18px}
#modalAvisoAnalise .corpo li{margin-bottom:6px}
#modalAvisoAnalise .rodape{
  border-top:1px solid var(--rule);padding:11px 20px;font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;
}

/* AJU-01 — o botão da ajuda contextual. Alvo de toque de 24px (o mínimo do
   WCAG 2.2 AA), foco visível pelo mesmo padrão do resto da tela, e nada de
   :hover como único caminho — quem abre a ajuda é o clique, o toque ou o
   Enter. Era exatamente isso que faltava aos 44 `title` que esta frente
   está substituindo: em celular e por teclado eles não existiam. */
.ajuda-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:6px;padding:0;vertical-align:middle;
  border:none;border-radius:50%;background:var(--acento-soft);color:var(--acento-esc);
  font-family:'Libre Caslon Display',Georgia,serif;font-size:12px;font-style:italic;
  line-height:1;text-transform:none;letter-spacing:0;cursor:pointer;
}
/* `--acento-esc` e nao `--acento`: branco sobre o acento da 4,49, contra um
   piso de 4,5. Doze centesimos abaixo e o tipo de numero que a gente aceita
   arredondando — e eu quase aceitei, tinha anotado como "na linha, nao chamaria
   de defeito". O escuro da 6,46, e o botao continua sendo o acento. */
.ajuda-btn:hover{background:var(--acento-esc);color:var(--fundo)}
.ajuda-btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.ajuda-txt{background:var(--paper);border-left:2px solid var(--acento-soft);padding:7px 10px;border-radius:var(--raio-p)}
/* Dentro de .grid a caixa é irmã dos campos, então sem isto ela vira mais uma
   COLUNA: o texto empilha em ~14 caracteres e estica a linha inteira. Medido
   na tela, e não deduzido — a versão anterior parecia certa no DOM. */
.grid > .ajuda-txt{grid-column:1 / -1;margin-top:0}
/* `.filtros` é a outra grade que hospeda campos com ajuda — a conferência
   bancária monta os dela ali (AJU-03). Mesma razão da linha acima, e as duas
   ficam juntas para ninguém corrigir uma e esquecer a outra. */
.filtros > .ajuda-txt{grid-column:1 / -1;margin-top:0}
/* Ajuda de coluna de tabela: a caixa mora DEPOIS da tabela, nunca dentro do
   <th>. Dentro dele ela herdava a caixa alta do cabeçalho, esticava a coluna
   e saía cortada pela rolagem horizontal — defeito que só apareceu com a
   tabela cheia. */
.ajuda-col{padding:0 14px 12px}
/* O bloco de caixas tambem cai dentro de `.grid` (a competencia mensal monta
   os totais dela ali, AJU-05) e de `.filtros`. Nas duas, sem atravessar a
   grade ele vira mais uma coluna — o mesmo defeito ja visto no painel. */
.grid > .ajuda-col, .filtros > .ajuda-col{grid-column:1 / -1;padding:0}
.ajuda-col > .ajuda-txt{margin-top:8px}
/* Ajuda de célula de painel (AJU-02): o painel é grade, então o bloco das
   caixas atravessa todas as colunas — sem isto ele vira mais uma célula, do
   tamanho de uma. E precisa de fundo próprio: o fundo do .painel é a régua
   que separa as células, e o texto ficaria sobre ela. */
.painel > .ajuda-painel{grid-column:1 / -1;background:var(--fundo);padding:0 13px}
.painel > .ajuda-painel > .ajuda-txt{margin:0 0 12px}
.painel > .ajuda-painel > .ajuda-txt:first-child{margin-top:12px}

/* Estrutura da migração: conserva rolagem da página e .tw.acoes-presas. */
#app{
  --tinta:var(--layout-texto);--tinta-hover:var(--layout-marinho-hover);
  --muted:var(--layout-apoio);--paper:var(--layout-fundo);--paper-suave:var(--layout-suave);
  --rule:var(--layout-fio);--rule-strong:var(--layout-fio-forte);
  --acento:var(--layout-azul);--acento-esc:var(--layout-azul-esc);--acento-soft:var(--layout-azul-soft);
  --largura-menu:236px;
  min-height:100vh;background:var(--paper);padding-left:var(--largura-menu);
}
#app h2,#app h3{font-family:inherit;font-weight:600;letter-spacing:-.02em}
#app .appCabecalho{
  background:var(--fundo);color:var(--tinta);padding:18px 28px;
  border-bottom:1px solid var(--rule);position:relative;z-index:40;
}
#app .brand{flex-wrap:nowrap}
#app .marcaApp svg{display:block;color:var(--layout-azul);width:28px;height:28px}
#app .brand h1{color:var(--tinta);font-size:15px}
#app .brand .sub{color:var(--muted);text-transform:none;letter-spacing:0;font-size:13px}
.controlesCabecalho{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#app .status{color:var(--tinta);border-color:var(--rule);min-height:36px;font-size:12px}
#app .status:hover{background:var(--paper);border-color:var(--rule-strong)}
#app .status:focus-visible{outline-color:var(--acento)}
#app .navEnvelope{
  position:fixed;inset:0 auto 0 0;width:var(--largura-menu);z-index:50;
  background:var(--layout-marinho);color:var(--fundo);overflow-y:auto;padding:28px 14px 24px;
}
#app .navEnvelope::after{display:none}
.marcaLateral{padding:0 12px 26px;display:flex;align-items:center;gap:10px;color:var(--layout-turquesa)}
.marcaLateral svg{flex:none}
.marcaLateral div{display:flex;min-width:0;flex-direction:column;gap:2px}
.marcaLateral strong{font-size:18px;line-height:1.1;letter-spacing:-.03em;color:var(--fundo)}
.marcaLateral span{font-size:10.5px;color:var(--layout-texto-escuro)}
#nav{display:flex;flex-direction:column;gap:22px;margin:0;overflow:visible}
.navGrupo{display:flex;flex-direction:column;gap:3px}
.navGrupo[hidden]{display:none}
.navTitulo{padding:0 12px 6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--layout-texto-escuro)}
.navSubitens{display:flex;flex-direction:column;gap:3px}
.navSubitens[hidden]{display:none}
#nav button{
  width:100%;text-align:left;white-space:normal;min-height:40px;padding:9px 12px;
  border:0;border-left:3px solid transparent;border-radius:6px;color:var(--layout-texto-escuro);font-size:13px;
}
#nav button:hover{background:var(--layout-marinho-hover);color:var(--fundo)}
#nav button.on{background:var(--layout-marinho-hover);border-left-color:var(--layout-turquesa);color:var(--fundo)}
#nav button:focus-visible{outline:2px solid var(--layout-turquesa);outline-offset:-2px}
#nav .navTituloBotao{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:3px 10px 6px 12px;
  border-left:0;background:transparent;border-radius:6px;color:var(--layout-texto-escuro);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}
#nav .navTituloBotao:hover{background:var(--layout-marinho-hover);color:var(--fundo)}
#nav .navTituloBotao .navSeta{flex:none;transform:rotate(90deg);transition:transform .18s ease}
#nav .navTituloBotao[aria-expanded="false"] .navSeta{transform:rotate(0deg)}
#nav .navSubitens>button{padding-left:18px}
#app main{max-width:1600px;min-width:0;padding:26px 28px 60px;margin:0 auto}
.contextoTela{margin:0 0 24px;padding:18px 20px;border-left:5px solid var(--layout-turquesa);border-radius:0 var(--raio) var(--raio) 0;background:linear-gradient(100deg,var(--layout-azul-soft),var(--layout-menta))}
.contextoTela .eyebrow{font-size:10px;color:var(--muted);margin-bottom:6px}
#app .contextoTela h2{font-size:28px;line-height:1.2}
#tituloTela:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
#app .card{box-shadow:none;overflow:hidden}
#app .painel{grid-template-columns:repeat(3,minmax(0,1fr))}
#app .painel .cel .v{font-family:inherit;font-weight:500;font-variant-numeric:tabular-nums}
#app .card>.hd h2{font-size:17px}
#app .btn{background:var(--acento);border-color:var(--acento);border-radius:var(--raio-p);font-weight:600}
#app .btn:hover{background:var(--acento-esc);border-color:var(--acento-esc)}
#app .btn.sec{background:var(--fundo);color:var(--tinta);border-color:var(--rule-strong)}
#app .btn.sec:hover{background:var(--paper-suave);border-color:var(--acento);color:var(--acento-esc)}
#app .btn.danger{background:var(--fundo);color:var(--vermelho);border-color:var(--vermelho-fio)}
#app .btn.danger:hover{background:var(--vermelho-soft);border-color:var(--vermelho)}
#app .menuAlternar{display:none}

/* Cor estrutural do modelo aprovado: azul, menta e turquesa se alternam
   nas superfícies; cores de alerta continuam reservadas à semântica. */
#app .view>.card>.hd{border-top:3px solid var(--layout-azul);background:var(--layout-azul-soft)}
#app .view>.card:nth-of-type(2n)>.hd{border-top-color:var(--layout-turquesa);background:var(--layout-menta)}
#app .view>.card:nth-of-type(3n)>.hd{border-top-color:var(--layout-marinho);background:var(--layout-lilas)}
#app .view .filtros{padding:14px;border:1px solid var(--layout-azul-fio);border-radius:var(--raio-p);background:var(--layout-azul-soft)}
#app .view .eyebrow{color:var(--layout-azul-esc)}
#app input[type="checkbox"],#app input[type="radio"]{accent-color:var(--layout-azul)}
#app .painel .cel:nth-child(6n+1),#app .painel .cel:nth-child(6n+4){background:var(--layout-azul-soft)}
#app .painel .cel:nth-child(6n+2),#app .painel .cel:nth-child(6n+5){background:var(--layout-menta)}
#app .painel .cel:nth-child(6n+3),#app .painel .cel:nth-child(6n+6){background:var(--layout-lilas)}
#app .painel .cel{border-top:3px solid transparent}
#app .painel .cel:nth-child(3n+1){border-top-color:var(--layout-azul)}
#app .painel .cel:nth-child(3n+2){border-top-color:var(--layout-turquesa)}
#app .painel .cel:nth-child(3n){border-top-color:var(--layout-marinho)}
#app .tag:not(.vermelho):not(.usd):not(.proj):not(.cinza){background:var(--layout-azul-soft);color:var(--layout-azul-esc)}
#app details.detalhe summary{color:var(--layout-azul-esc)}

/* Telas operacionais e de apoio: cada uma recebe uma hierarquia visual
   própria, mantendo a mesma paleta aprovada e os estados semânticos. */
#v-extratos .cardImportacao>.bd{background:linear-gradient(135deg,var(--fundo) 58%,var(--layout-menta))}
#v-extratos .cardImportacao .filtros{border-left:4px solid var(--layout-turquesa)}
#v-extratos input[type="file"]{min-height:42px;padding:7px;background:var(--fundo)}
#v-extratos input[type="file"]::file-selector-button{margin-right:10px;padding:8px 12px;border:0;border-radius:var(--raio-p);background:var(--layout-azul);color:var(--fundo);font:inherit;font-weight:600;cursor:pointer}
#v-extratos .cardListaExtratos>.hd{background:var(--layout-menta);border-top-color:var(--layout-turquesa)}

#v-usuarios .cardCadastroApoio>.bd,#v-entidades .cardCadastroApoio>.bd{background:linear-gradient(135deg,var(--fundo) 62%,var(--layout-azul-soft))}
#v-usuarios .cardCadastroApoio .grid,#v-entidades .cardCadastroApoio .grid{padding:14px;border:1px solid var(--layout-azul-fio);border-radius:var(--raio-p);background:var(--layout-azul-painel)}
#v-usuarios .cardPerfis>.hd{background:var(--layout-menta);border-top-color:var(--layout-turquesa)}
#v-usuarios .cardListaUsuarios>.hd,#v-entidades .cardListaEntidades>.hd{background:var(--layout-lilas);border-top-color:var(--layout-marinho)}
#v-usuarios .cardAtividade>.hd{background:var(--layout-menta);border-top-color:var(--layout-turquesa)}

#v-plano .cardPlano{border-color:var(--layout-azul-fio)}
#v-plano .cardPlano>.hd{background:linear-gradient(100deg,var(--layout-azul-soft),var(--layout-menta));border-top-color:var(--layout-turquesa)}
#v-plano .cardPlano>.bd{padding:20px;background:linear-gradient(155deg,var(--fundo) 72%,var(--layout-azul-soft))}
#v-plano .uso .item{padding:13px 14px;border:1px solid var(--rule);border-left:4px solid var(--layout-azul);border-radius:var(--raio-p);background:var(--fundo)}
#v-plano .uso .item:nth-child(2n){border-left-color:var(--layout-turquesa);background:var(--layout-menta)}
#v-plano .uso .item:nth-child(3n){border-left-color:var(--layout-marinho);background:var(--layout-lilas)}

#v-suporte .cardSuporteNovo>.hd{background:var(--layout-azul-soft);border-top:3px solid var(--layout-azul)}
#v-suporte .cardSuporteNovo>.bd{background:linear-gradient(145deg,var(--fundo) 62%,var(--layout-menta))}
#v-suporte .cardSuporteNovo .grid{padding:14px;border:1px solid var(--layout-azul-fio);border-radius:var(--raio-p);background:var(--layout-azul-soft)}
#v-suporte .cardListaChamados>.hd{background:var(--layout-menta);border-top-color:var(--layout-turquesa)}
#v-suporte textarea{background:var(--fundo)}

/* Administração: a visão geral e a fila têm cartões aninhados, por isso
   recebem a mesma alternância de cor que as demais telas diretamente. */
#v-empresas>.card:first-child{border-color:var(--layout-azul-fio)}
#v-empresas>.card:first-child>.hd{background:linear-gradient(100deg,var(--layout-azul-soft),var(--layout-menta));border-top-color:var(--layout-turquesa)}
#v-empresas>.card:first-child>.bd{background:linear-gradient(155deg,var(--fundo) 70%,var(--layout-azul-soft))}
#v-empresas>.card:nth-of-type(4n+2)>.hd{background:var(--layout-menta);border-top-color:var(--layout-turquesa)}
#v-empresas>.card:nth-of-type(4n+3)>.hd{background:var(--layout-lilas);border-top-color:var(--layout-marinho)}
#v-empresas>.card:nth-of-type(4n)>.hd{background:var(--layout-azul-soft);border-top-color:var(--layout-azul)}
#v-empresas .grid{padding:14px;border:1px solid var(--layout-azul-fio);border-radius:var(--raio-p);background:var(--layout-azul-painel)}
#v-empresas .tw{background:var(--fundo)}
#v-suporte-fila #filaLista>.card>.hd,#v-suporte-fila #filaDetalhe>.card>.hd{background:linear-gradient(100deg,var(--layout-marinho),var(--layout-marinho-hover));color:var(--fundo);border-top:3px solid var(--layout-turquesa)}
#v-suporte-fila #filaLista>.card>.hd h2,#v-suporte-fila #filaDetalhe>.card>.hd h2{color:var(--fundo)}
#v-suporte-fila #filaFiltros{background:var(--layout-azul-soft);border-bottom:1px solid var(--layout-azul-fio)}
#v-suporte-fila #filaDetalhe>.card>.bd{background:linear-gradient(145deg,var(--fundo) 70%,var(--layout-menta))}
#v-suporte-fila textarea{background:var(--fundo)}

/* Contratos: títulos e controles permanecem legíveis quando a largura diminui. */
.tituloBloco{min-width:190px}
.tituloBloco p{margin:4px 0 0;color:var(--muted);font-size:12.5px;font-weight:400;line-height:1.4}
.toolbarCabecalho{align-items:flex-start;gap:18px}
.toolbarAcoes{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.toolbarAcoes label{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.toolbarAcoes select{width:auto;min-height:34px;padding:5px 9px;font-size:12.5px}
.carteiraAjuda{margin:0;padding:9px 18px;background:var(--paper-suave);border-bottom:1px solid var(--rule)}
.cardResumo .hd{border-bottom:0;padding-bottom:9px!important;background:linear-gradient(100deg,var(--layout-azul-soft),var(--layout-menta))!important;border-top-color:var(--layout-turquesa)!important}
.cardResumo .painel{border-top:1px solid var(--rule)}
.cardCarteira tbody td{padding-top:13px;padding-bottom:13px}
/* a instituição numa coluna estreita, quebrando em até 2 linhas — o nome
   inteiro fica no title (pedido do dono, 15/09/2026) */
.cardCarteira td.celInst{max-width:190px;min-width:120px}
.cardCarteira .nomeInst{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere}

/* INI-02 — o Início: os quatro cartões, o fluxo como bloco dominante, e a
   grade de dois cartões (bancos × composição) que empilha no celular. */
.cardInicioRecorte>.bd{padding:14px 18px}
.gradeFiltrosInicio{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.gradeFiltrosInicio fieldset{border:1px solid var(--rule);border-radius:var(--raio-p);padding:8px 12px 10px;min-width:0;max-height:260px;overflow-y:auto}
.gradeFiltrosInicio legend{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.opcaoFiltro{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 0;cursor:pointer}
.opcaoFiltro input{width:auto;min-height:0}
.painel .cel .v .v-mes{display:block;font-family:'Futura PT','Jost',system-ui,sans-serif;font-size:12.5px;color:var(--muted);margin-top:2px;letter-spacing:0}
.gradeInicio{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.gradeInicio .card{margin:0}
.cardFluxo>.bd{padding:12px 18px}
.cardFluxo #inicioFluxoDetalhe{border-top:1px solid var(--rule);background:var(--paper-suave)}
.cardFluxo #inicioFluxoDetalhe .acoes{margin-top:10px}
.formaFluxo{display:inline-flex;gap:4px}
.formaFluxo .btn[aria-pressed="true"]{background:var(--layout-azul);border-color:var(--layout-azul);color:var(--acao-texto)}

/* INI-03 — os gráficos do Início: SVG gerado pela casca, cor só por token.
   Quem mudar a paleta muda aqui; o JavaScript não sabe de cor nenhuma. */
.grafico{display:block;width:100%;height:auto;max-width:100%}
.grafico text{font-family:'Futura PT','Jost',system-ui,sans-serif;font-size:11px;fill:var(--layout-apoio)}
.grafico .rotulo-valor,.grafico .rotulo-banco{fill:var(--layout-texto)}
.grafico .grade{stroke:var(--layout-fio);stroke-width:1}
.grafico .eixo{stroke:var(--layout-fio-forte);stroke-width:1}
.grafico-fluxo .barra-principal{fill:var(--layout-azul)}
.grafico-fluxo .barra-juros{fill:var(--layout-turquesa)}
.grafico-fluxo .legenda-principal{fill:var(--layout-azul)}
.grafico-fluxo .legenda-juros{fill:var(--layout-turquesa)}
.grafico-fluxo .grupo[tabindex]{cursor:pointer;outline:none}
.grafico-fluxo .grupo[tabindex]:hover rect,.grafico-fluxo .grupo[tabindex]:focus-visible rect{stroke:var(--layout-marinho);stroke-width:1.5}
.grafico-bancos .barra{fill:var(--layout-azul)}
.grafico-bancos .banco{cursor:pointer;outline:none}
.grafico-bancos .banco:hover .barra,.grafico-bancos .banco:focus-visible .barra{fill:var(--layout-azul-esc)}
.grafico-saldo .linha{fill:none;stroke:var(--layout-azul);stroke-width:2.5;stroke-linejoin:round}
.grafico-saldo .area{fill:var(--layout-azul-soft)}
.grafico-saldo .ponto{fill:var(--layout-superficie);stroke:var(--layout-azul);stroke-width:2}

/* Cadastro/leitura: um fluxo único, com o documento acima dos dados extraídos. */
.fluxoCadastro{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 18px;border:1px solid var(--rule);border-radius:var(--raio);overflow:hidden;background:var(--rule)}
.fluxoCadastro>div{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:13px 16px;background:var(--layout-azul-soft);border-top:3px solid var(--layout-azul);align-items:center}
.fluxoCadastro>div:nth-child(2){background:var(--layout-menta);border-top-color:var(--layout-turquesa)}
.fluxoCadastro>div:nth-child(3){background:var(--layout-lilas);border-top-color:var(--layout-marinho)}
.fluxoCadastro span{grid-row:1/3;display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:var(--acento);color:var(--fundo);font-weight:700;font-size:13px}
.fluxoCadastro>div:nth-child(2) span{background:var(--layout-turquesa);color:var(--layout-marinho)}
.fluxoCadastro>div:nth-child(3) span{background:var(--layout-marinho)}
.fluxoCadastro strong{font-size:13px;line-height:1.25}
.fluxoCadastro small{font-size:11.5px;color:var(--muted)}
.cardUpload{border-color:var(--layout-azul-fio);background:linear-gradient(120deg,var(--layout-azul-soft),var(--layout-menta))}
.cardUpload>.bd{padding:20px}
.cardUpload .eyebrow{display:block;color:var(--acento-esc);margin:0 0 4px}
.cardUpload strong{font-size:18px;display:block}
.cardUpload .hint{max-width:760px}
.cardContextoLeitura{border-left:4px solid var(--layout-turquesa);background:var(--layout-menta)}
.cardMetodologia{border-left:4px solid var(--ocre)}
.cardFormulario>.hd{background:linear-gradient(100deg,var(--layout-azul-soft),var(--layout-lilas))!important}
#v-cadastro .cardFormulario>.bd{padding:20px}
#v-cadastro .cardFormulario .sep{margin:25px 0 16px}
#v-cadastro .cardFormulario .sep+.eyebrow,
#v-cadastro .cardFormulario #wrapEmprestimo>.eyebrow{display:inline-block;font-size:11px;color:var(--acento-esc);background:var(--layout-azul-soft);border-left:3px solid var(--layout-turquesa);padding:5px 9px;border-radius:0 var(--raio-p) var(--raio-p) 0}
#v-cadastro .grid{gap:14px 16px}
#v-cadastro label.f>span{letter-spacing:.08em;color:var(--layout-apoio)}
#v-cadastro input,#v-cadastro select,#v-cadastro textarea{min-height:42px}
#v-cadastro .formActions{margin:24px -8px -8px;padding:12px;background:linear-gradient(100deg,var(--layout-azul-soft),var(--layout-menta));border:1px solid var(--layout-azul-fio);border-radius:var(--raio)}
#garantiasEdicao>div[style*="border:1px"],#encargosEdicao>div[style*="border:1px"]{border-radius:var(--raio-p)!important;background:var(--paper-suave)}
@media(max-width:1100px){
  #app{padding-left:0}
  #app .menuAlternar{display:inline-flex;flex:none}
  #app .navEnvelope{display:none;position:relative;inset:auto;width:100%;max-height:65vh}
  #app.menuAberto .navEnvelope{display:block}
  #app .appCabecalho{position:sticky;top:0;padding:12px 20px}
  #app main{padding:22px 20px 48px}
}
@media(max-width:600px){
  #app .painel{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .appCabecalho{padding:10px 12px}
  #app .brand{flex-wrap:wrap;gap:8px}
  #app .marcaApp{flex:1}
  .controlesCabecalho{width:100%;justify-content:flex-start;gap:6px}
  #app .status{font-size:11px;padding:4px 8px}
  #app .navEnvelope{width:100%}
  #app main{padding:20px 12px 40px}
  #app .contextoTela h2{font-size:24px}
  .toolbarCabecalho{display:block}
  .toolbarAcoes{justify-content:flex-start;margin-top:13px}
  .toolbarAcoes label{width:100%;justify-content:space-between}
  .toolbarAcoes select{flex:1;max-width:230px}
  .fluxoCadastro{grid-template-columns:1fr}
  .fluxoCadastro>div{padding:10px 12px}
  .cardUpload>.bd{align-items:flex-start!important;padding:16px}
  .cardUpload .btn{width:100%}
  #v-cadastro .cardFormulario>.bd{padding:16px}
  .gradeInicio{grid-template-columns:minmax(0,1fr)}
  #app .filtros{grid-template-columns:minmax(0,1fr)}
  #app .filtros>*{grid-column:1!important;min-width:0}
  #app .card>.hd label,#app .card>.hd select{max-width:100%;min-width:0}
  #app .btn.sm,#app .status,#app .toolbarAcoes select{min-height:40px}
  #app .linha-evento{grid-template-columns:minmax(0,1fr);gap:4px}
  #app .linha-evento>*{min-width:0;overflow-wrap:anywhere}
  #app .item-anexo{align-items:flex-start;flex-direction:column}
  #app .item-anexo-info{width:100%;white-space:normal;overflow-wrap:anywhere}
  #app .item-anexo-acoes{width:100%;flex-wrap:wrap}
}

/* =====================================================================
   TEMA G — leitura calma nos modos claro e noturno
   ===================================================================== */
#app{--fundo:var(--layout-superficie);background:var(--layout-fundo)}
#app .appCabecalho{background:var(--layout-superficie)}
#app .marcaApp svg,.marcaLateral,.loginMarca{color:var(--layout-turquesa)}
#app .navEnvelope{background:var(--layout-marinho);color:var(--ink-texto)}
.marcaLateral strong,#nav button.on,#nav button:hover{color:var(--ink-texto)}
#nav button.on{background:var(--layout-lilas);border-left-color:var(--layout-azul)}
html:not([data-tema="noturno"]) #nav button.on{color:var(--layout-marinho);background:var(--layout-lilas)}
.adminIntro{color:var(--muted);margin:0 0 24px;max-width:76ch;line-height:1.6}
.adminCadastro{margin:18px 0;border:1px solid var(--rule-strong);border-radius:12px;padding:0 18px;background:var(--paper)}
.adminCadastro>summary{padding:18px 0;cursor:pointer;font-weight:600;color:var(--tinta)}
.adminCadastro>.card{margin-top:0;border:0;box-shadow:none}
.adminAtalhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
@media(max-width:1000px){.adminAtalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.adminAtalhos{grid-template-columns:minmax(0,1fr)}}
.adminAtalho{display:flex;flex-direction:column;gap:6px;text-align:left;padding:20px;background:var(--paper);border:1px solid var(--rule-strong);border-radius:12px;color:var(--tinta);cursor:pointer;min-width:0}
.adminAtalho strong{font-size:16px}
.adminAtalho span{font-size:13px;color:var(--muted);line-height:1.5}
.adminAtalho:hover{border-color:var(--acento-esc)}
.adminAtalho:focus-visible,.adminCadastro>summary:focus-visible{outline:2px solid var(--acento-esc);outline-offset:3px}
.adminView,.adminView .card>.bd{min-width:0}
.adminView .tw{max-width:100%;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.adminEmpresasLista{border-radius:var(--raio-p)}
.tabelaEmpresasAdmin{min-width:1120px}
.adminView .tw[tabindex]:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

@media(max-width:700px){
  .adminView .card{margin-bottom:14px}
  .adminView .card>.hd{padding:12px 14px}
  .adminView .card>.bd{padding:14px}
  .adminView .tw table:not(.tabelaEmpresasAdmin){min-width:720px}
  #v-admin-clientes .adminEmpresasLista{overflow:visible}
  #v-admin-clientes .tabelaEmpresasAdmin,
  #v-admin-clientes .tabelaEmpresasAdmin tbody,
  #v-admin-clientes .tabelaEmpresasAdmin tr,
  #v-admin-clientes .tabelaEmpresasAdmin td{display:block;width:100%;min-width:0}
  #v-admin-clientes .tabelaEmpresasAdmin{min-width:0;border:0}
  #v-admin-clientes .tabelaEmpresasAdmin thead{display:none}
  #v-admin-clientes .tabelaEmpresasAdmin tr{margin:0 0 12px;border:1px solid var(--rule);border-radius:var(--raio);overflow:hidden;background:var(--fundo)}
  #v-admin-clientes .tabelaEmpresasAdmin tr:last-child{margin-bottom:0}
  #v-admin-clientes .tabelaEmpresasAdmin td{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding:10px 12px;border-bottom:1px solid var(--rule);overflow-wrap:anywhere;white-space:normal!important}
  #v-admin-clientes .tabelaEmpresasAdmin td::before{content:attr(data-rotulo);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  #v-admin-clientes .tabelaEmpresasAdmin .adminEmpresaNome{display:block;padding:14px 12px;background:var(--paper-suave);font-size:15px}
  #v-admin-clientes .tabelaEmpresasAdmin .adminEmpresaNome::before{content:none}
  #v-admin-clientes .tabelaEmpresasAdmin .adminEmpresaAcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-bottom:0;padding:12px}
  #v-admin-clientes .tabelaEmpresasAdmin .adminEmpresaAcoes::before{grid-column:1/-1}
  #v-admin-clientes .adminEmpresaAcoes .btn{width:100%;min-height:40px;padding:8px 7px;white-space:normal}
  .adminCadastro{padding:0 12px}
  .adminCadastro>summary{padding:15px 0}
}
#nav button:hover{background:var(--layout-marinho-hover)}

.contextoTela{margin-bottom:22px;padding:3px 0 20px;border:0;border-bottom:1px solid var(--layout-fio);border-radius:0;background:transparent}
.contextoTela .eyebrow{color:var(--layout-turquesa-esc)}
#app .contextoTela h2{font-family:'Libre Caslon Display',Georgia,'Times New Roman',serif;font-size:34px;font-weight:400;letter-spacing:-.025em}

#app .card{background:var(--layout-superficie);border-color:var(--layout-fio)}
#app .view>.card>.hd,
#app .view>.card:nth-of-type(2n)>.hd,
#app .view>.card:nth-of-type(3n)>.hd,
#v-extratos .cardListaExtratos>.hd,
#v-usuarios .cardPerfis>.hd,
#v-usuarios .cardListaUsuarios>.hd,
#v-usuarios .cardAtividade>.hd,
#v-entidades .cardListaEntidades>.hd,
#v-suporte .cardSuporteNovo>.hd,
#v-suporte .cardListaChamados>.hd,
#v-empresas>.card:first-child>.hd,
#v-empresas>.card:nth-of-type(4n+2)>.hd,
#v-empresas>.card:nth-of-type(4n+3)>.hd,
#v-empresas>.card:nth-of-type(4n)>.hd,
#v-suporte-fila #filaLista>.card>.hd,
#v-suporte-fila #filaDetalhe>.card>.hd{
  background:var(--layout-campo);color:var(--layout-texto);border-top:0;border-bottom-color:var(--layout-fio)
}
#v-suporte-fila #filaLista>.card>.hd h2,#v-suporte-fila #filaDetalhe>.card>.hd h2{color:var(--layout-texto)}
#app .view .filtros,#v-suporte-fila #filaFiltros{background:var(--layout-campo);border-color:var(--layout-fio)}
#app .view .eyebrow{color:var(--layout-turquesa-esc)}

#app .painel .cel,
#app .painel .cel:nth-child(6n+1),#app .painel .cel:nth-child(6n+2),#app .painel .cel:nth-child(6n+3),
#app .painel .cel:nth-child(6n+4),#app .painel .cel:nth-child(6n+5),#app .painel .cel:nth-child(6n+6){background:var(--layout-superficie);border-top:0}
.cardResumo{background:transparent!important;border:0!important;overflow:visible!important}
.cardResumo>.hd{padding:0 0 11px!important;background:transparent!important;border:0!important}
.cardResumo .painel{gap:12px;background:transparent;border:0}
.cardResumo .painel .cel{padding:16px;border:1px solid var(--layout-fio);border-radius:var(--raio);background:var(--layout-superficie)}
.cardResumo .painel .cel .v{font-size:22px;font-weight:600}

#v-extratos .cardImportacao>.bd,
#v-usuarios .cardCadastroApoio>.bd,#v-entidades .cardCadastroApoio>.bd,
#v-plano .cardPlano>.bd,#v-suporte .cardSuporteNovo>.bd,
#v-empresas>.card:first-child>.bd,#v-suporte-fila #filaDetalhe>.card>.bd{background:var(--layout-superficie)}
#v-usuarios .cardCadastroApoio .grid,#v-entidades .cardCadastroApoio .grid,
#v-suporte .cardSuporteNovo .grid,#v-empresas .grid{background:var(--layout-campo);border-color:var(--layout-fio)}
#v-plano .cardPlano,#v-empresas>.card:first-child,.cardUpload{border-color:var(--layout-fio)}
#v-plano .cardPlano>.hd,.cardUpload,.cardFormulario>.hd,#v-cadastro .formActions{background:var(--layout-campo)!important;border-color:var(--layout-fio)!important}
#v-plano .uso .item,#v-plano .uso .item:nth-child(2n),#v-plano .uso .item:nth-child(3n){background:var(--layout-campo);border-color:var(--layout-fio);border-left-color:var(--layout-azul)}
#v-plano .uso .item:nth-child(2n){border-left-color:var(--layout-turquesa)}
.fluxoCadastro>div,.fluxoCadastro>div:nth-child(2),.fluxoCadastro>div:nth-child(3){background:var(--layout-campo);border-top-color:var(--layout-fio)}
.fluxoCadastro>div:first-child{border-top-color:var(--layout-azul)}
.fluxoCadastro>div:nth-child(2){border-top-color:var(--layout-turquesa)}
.fluxoCadastro>div:nth-child(3){border-top-color:var(--layout-apoio)}
.cardContextoLeitura{background:var(--layout-campo)}
.cardFluxo #inicioFluxoDetalhe,.gradeFiltrosInicio fieldset{background:var(--layout-campo);border-color:var(--layout-fio)}

#app .btn{background:var(--acao);border-color:var(--acao);color:var(--acao-texto)}
#app .btn:hover{background:var(--acao-hover);border-color:var(--acao-hover)}
#app .btn.sec{background:var(--layout-superficie);color:var(--layout-texto)}
#app .btn.sec:hover{background:var(--layout-campo);color:var(--layout-azul-esc)}
#app .status{background:var(--layout-superficie)}
#app .status:hover{background:var(--layout-campo)}

#login{background:var(--layout-fundo)}
.loginBoasVindas{color:var(--ink-texto);background:var(--layout-marinho)}
.loginBoasVindas h1,.loginBeneficios span{color:var(--ink-texto)}
.loginAcesso{position:relative;background:var(--layout-fundo);color:var(--layout-texto)}
.loginMarca strong{color:var(--layout-texto)}
.caixaLogin{background:var(--layout-superficie);color:var(--layout-texto);border-color:var(--layout-fio);border-top-color:var(--layout-azul)}
.caixaLogin .btn{background:var(--acao);border-color:var(--acao);color:var(--acao-texto)}
.caixaLogin .btn:hover{background:var(--acao-hover);border-color:var(--acao-hover)}
.seletorTemaLogin{position:absolute;top:24px;right:24px}
.seletorTemaApp{margin-right:2px}
html[data-tema="noturno"] #modalPrimeiroAcesso .caixaLogin{background:var(--layout-superficie)!important;color:var(--layout-texto)}

html[data-tema="noturno"] input,html[data-tema="noturno"] select,html[data-tema="noturno"] textarea{color-scheme:dark}
html[data-tema="noturno"] .tw table tbody tr:nth-child(even){background:var(--layout-suave)}
html[data-tema="noturno"] .tag.cinza{background:var(--layout-campo)}

@media(max-width:600px){
  #app .contextoTela h2{font-size:29px}
  .seletorTemaLogin{top:12px;right:12px}
  .seletorTemaApp{order:10;margin-left:auto}
  .cardResumo .painel{gap:8px}
}

body:has(#confirmarDescadastro){min-height:100vh;padding:72px 18px;background:var(--paper)}
body:has(#confirmarDescadastro)>main{max-width:620px;padding:0;margin:0 auto}
.descadastroMarca{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--marca-turquesa)}
.descadastroMarca strong{color:var(--tinta);font-size:17px}
body:has(#confirmarDescadastro) .card>.hd{background:var(--paper-suave)}
body:has(#confirmarDescadastro) .card h1{font-size:28px}
body:has(#confirmarDescadastro) .card p{margin:0 0 15px}