/* =========================================================================
   CONSOLE DO ESCRITORIO - design system Jabour AI.

   Fundo preto quente, texto creme (nunca branco puro), um unico acento acido usado com
   parcimonia, cantos contidos, bordas em vez de sombra, e a assinatura estrutural de
   celulas coladas por fio de 1px.

   Adaptacao consciente para ferramenta de trabalho: o sistema foi desenhado para pagina
   de marketing, com titulos enormes e muito espaco negativo. Quem revisa dezenas de
   lancamentos por dia precisa do oposto, entao a escala de tipo cai e a densidade sobe.
   O que NAO muda: paleta, uso parcimonioso do acido, rotulos tecnicos em mono caixa
   alta, ausencia de biblioteca de icones (setas e sinais desenhados em CSS).

   NENHUM CONTROLE NATIVO FICA COM A CARA DO NAVEGADOR. Select, checkbox e barra de
   rolagem do sistema quebrariam o tema escuro na hora (fundo branco, azul do sistema),
   entao todos sao reconstruidos aqui. O select nativo e o pior caso: a lista suspensa
   dele nao aceita estilo nenhum, por isso existe o seletor proprio em app.js.
   ========================================================================= */

/* -------------------------------------------------------------------------
   FONTES DA MARCA, servidas do proprio dominio.

   A CSP trava tudo em 'self', entao Google Fonts esta fora: os woff2 vivem em
   /fontes. Archivo e Bricolage Grotesque sao fontes VARIAVEIS, um arquivo unico
   cobre toda a faixa de peso (por isso a declaracao de font-weight em intervalo).
   Subset latin apenas, que cobre todo o portugues: acentos e cedilha estao em
   U+0000-00FF. Custo total 103 KB.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fontes/archivo-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/fontes/bricolage-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fontes/plexmono-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fontes/plexmono-600.woff2') format('woff2');
}

:root{
  --jab-black:#100F0C;
  --jab-black-alt:#14130F;
  --jab-panel:#16150F;
  --jab-panel-hover:#191811;
  --jab-cream:#ECE9E1;
  --jab-acid:#D6F14E;
  --jab-acid-bright:#E8FA82;
  --jab-alert:#FF9C7A;

  --text-primary:var(--jab-cream);
  --text-secondary:rgba(236,233,225,.72);
  --text-body:rgba(236,233,225,.65);
  --text-muted:rgba(236,233,225,.62);
  /* A escala do design system vai até 0.35, e ali ela é para peça de marketing, onde o
     texto é grande. Aqui é ferramenta: `apoio` (fornecedor, CNPJ) e `meta` (linhas
     lidas, modo de leitura) são informação de conferência em corpo pequeno, e mediam
     3.93 e 2.84 sobre o fundo da linha, abaixo do mínimo da WCAG. Subiram até passar. */
  --text-faint:rgba(236,233,225,.55);
  --text-ghost:rgba(236,233,225,.52);

  --border-subtle:rgba(236,233,225,.12);
  --border-hairline:rgba(236,233,225,.15);
  --border-strong:rgba(236,233,225,.25);
  --border-acid:rgba(214,241,78,.45);

  --acid-06:rgba(214,241,78,.06);
  --acid-08:rgba(214,241,78,.08);
  --acid-14:rgba(214,241,78,.14);

  /* O acento quando ele é TEXTO, TRAÇO ou FIO fino. No escuro é o próprio ácido; no
     claro ele precisa escurecer, senão some sobre o creme. Preenchimento sólido
     (botão primário, chip ativo, caixa marcada) continua usando `--jab-acid` cheio nos
     dois temas, porque ali o texto é o preto quente e o contraste passa folgado. */
  --acento:var(--jab-acid);

  /* Texto e traço POR CIMA de um preenchimento ácido (botão primário, chip ativo, tique
     da caixa marcada). É o preto quente nos DOIS temas: o preenchimento continua ácido
     no claro, então o que vai em cima dele não muda. Existe separado de `--jab-black`
     porque aquele token vira creme no tema claro, e o tique ficaria invisível. */
  --sobre-acento:#100F0C;

  --font-display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --lateral:236px;
  /* Uma curva só para tudo que se move no recolhimento da barra: largura, legendas,
     puxador e a barra de ação em lote. Tempos diferentes dariam a impressão de que são
     peças soltas em vez de um painel único deslizando. */
  --t-lateral:.26s cubic-bezier(.2,.8,.3,1);
  --r-card:14px;
  --r-btn:9px;
}


/* =========================================================================
   TEMA CLARO - SOMENTE no console operacional.

   Por que existe: a equipe contábil passa o dia em Domínio, Excel, Onvio e Omie, todos
   claros, em escritório iluminado. O pulo de contraste a cada troca de janela cansa, e
   a leitura é de número denso. É decisão de usabilidade, não de estética.

   Onde NÃO vale: portal do cliente final (segue o aparelho), marketing, marca e
   qualquer tela institucional. Escuro segue sendo a assinatura, e o padrão.

   Ele é DESENHADO, não invertido:
   - o fundo é o creme quente da marca, nunca branco puro;
   - o texto é o preto quente #100F0C em transparências, espelhando a escala do escuro;
   - o ácido escurece para virar texto e traço legíveis sobre creme, e continua cheio
     onde é preenchimento com texto escuro por cima;
   - tipografia, raios, espaçamento e movimento ficam idênticos. A identidade não está
     na cor do fundo.

   Os valores abaixo foram escolhidos por contraste medido, não por gosto: todo texto
   fica em 4.5:1 ou mais sobre o seu fundo, e todo traço de componente em 3:1 ou mais.
   ========================================================================= */
[data-tema="claro"]{
  /* Superfícies: creme quente da família do #ECE9E1. */
  --jab-black:#F2F0EA;          /* fundo geral */
  --jab-black-alt:#EDEAE1;      /* faixa alternada, linhas de tabela */
  --jab-panel:#FAF9F5;          /* painéis e cards */
  /* Hover mais separado do fundo da linha do que no escuro: sobre creme, diferenças
     pequenas de luminância se percebem menos (o olho discrimina melhor no escuro), e
     com 1.06 o hover praticamente não aparecia numa tabela cheia. */
  --jab-panel-hover:#E2DDCF;    /* hover de célula e de linha */
  --jab-cream:#100F0C;          /* o "texto principal" agora é o preto quente */

  /* Texto: preto quente em transparências. A escala é mais comprimida que a do escuro
     porque, sobre creme, opacidade baixa perde legibilidade rápido. A hierarquia se
     apoia mais em tamanho e peso. */
  --text-primary:#100F0C;
  --text-secondary:rgba(16,15,12,.78);
  --text-body:rgba(16,15,12,.72);
  --text-muted:rgba(16,15,12,.68);
  --text-faint:rgba(16,15,12,.62);
  --text-ghost:rgba(16,15,12,.60);

  --border-subtle:rgba(16,15,12,.14);
  --border-hairline:rgba(16,15,12,.18);
  --border-strong:rgba(16,15,12,.30);

  /* Ácido escurecido para texto e traço. Sobre creme, o #D6F14E fica em 1.1:1, ou seja,
     ilegível. Este tom mantém a família amarelo-esverdeada e passa em AA. */
  --acento:#56621A;
  --border-acid:rgba(86,98,26,.55);
  /* Véu de acento mais forte que no escuro, por medição e não por gosto: com 7% sobre
     creme, a linha selecionada ficava em 1.15 contra a linha normal, praticamente
     invisível, enquanto no escuro a mesma regra dá 1.4. Seleção é a interação central
     da revisão, então ela precisa ser vista de relance. */
  --acid-06:rgba(86,98,26,.17);
  --acid-08:rgba(86,98,26,.24);
  --acid-14:rgba(86,98,26,.16);

  /* Salmão sobre creme fica em 1.8:1. Escurece para terracota, mantendo o papel de
     alerta e sem virar vermelho de erro. */
  --jab-alert:#8F4626;
}

/* Ajustes do tema claro que não saem de token, porque foram escritos com cor fixa.
   Cada um existe por um motivo concreto, não por simetria. */

/* Cartão: no escuro é um véu branco de 2% sobre o preto; sobre creme isso é invisível. */
[data-tema="claro"] .card{background:var(--jab-panel)}

/* Sombras: no escuro quase não existem (a separação é por borda). No claro, uma sombra
   curta e fria dá a elevação que a borda sozinha não dá sobre creme. */
[data-tema="claro"] .cz-lista{box-shadow:0 14px 36px rgba(16,15,12,.16)}
[data-tema="claro"] .toast{box-shadow:0 12px 28px rgba(16,15,12,.14)}

/* Faixas com fundo semitransparente escuro precisam virar creme. */
[data-tema="claro"] .barra-lote{background:rgba(250,249,245,.96)}
[data-tema="claro"] .login .card{background:rgba(250,249,245,.86)}
[data-tema="claro"] kbd{background:rgba(16,15,12,.06)}

/* Contorno ácido translúcido do item ativo e do bloco do escritório. */
[data-tema="claro"] .lateral .escritorio{border-color:rgba(86,98,26,.22)}
[data-tema="claro"] .lateral nav button[aria-current=true]{
  box-shadow:inset 0 0 0 1px rgba(86,98,26,.24);
}

/* Barra de rolagem: a do escuro é creme translúcido e some sobre creme. */
[data-tema="claro"]{scrollbar-color:rgba(16,15,12,.22) transparent}
[data-tema="claro"] ::-webkit-scrollbar-thumb{background:rgba(16,15,12,.20);background-clip:content-box}
[data-tema="claro"] ::-webkit-scrollbar-thumb:hover{background:rgba(16,15,12,.34);background-clip:content-box}

/* Pílulas de confiança baixa e de erro: o salmão da marca não passa em contraste sobre
   creme, então usam o terracota com fundo e borda na mesma família. */
/* A pílula neutra usa um véu de creme no escuro. No claro esse mesmo véu CLAREIA o
   fundo e derruba o contraste do texto (medido em 4.15). Aqui ele vira um véu escuro. */
[data-tema="claro"] .pill.media{background:rgba(16,15,12,.05)}

/* Na pílula de confiança alta, texto oliva sobre fundo oliva se anulava (4.15 medido).
   O fundo clareia para o texto voltar a respirar. */
[data-tema="claro"] .pill.alta{background:rgba(86,98,26,.10)}

[data-tema="claro"] .pill.baixa,
[data-tema="claro"] .pill.erro{
  background:rgba(143,70,38,.10);color:var(--jab-alert);border-color:rgba(143,70,38,.40);
}

/* Linha selecionada também ganha uma marca na borda esquerda: sobre creme, só o véu de
   fundo é sutil demais quando a tabela está cheia. */
[data-tema="claro"] .linha[data-sel]{border-left-color:var(--border-acid)}

/* Textura da marca: linhas escuras e brilho de acento, no lugar do creme e do ácido. */
[data-tema="claro"] .textura::before{
  background-image:
    linear-gradient(to right, rgba(16,15,12,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,15,12,.05) 1px, transparent 1px);
}
[data-tema="claro"] .textura::after{
  background:radial-gradient(closest-side, rgba(86,98,26,.14), transparent 70%);
}
[data-tema="claro"] .lateral .marca .logo{box-shadow:0 2px 10px rgba(16,15,12,.14)}
[data-tema="claro"] .marca-login .quadrado{box-shadow:0 0 0 3px rgba(86,98,26,.14)}

/* Troca de tema: fade curtíssimo, sem espetáculo, e nada sob prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  html.trocando-tema, html.trocando-tema body,
  html.trocando-tema .lateral, html.trocando-tema .card,
  html.trocando-tema .linha, html.trocando-tema .celula, html.trocando-tema .painel{
    transition:background-color .12s linear, color .12s linear, border-color .12s linear;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--jab-black);color:var(--text-primary);
  font:15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;
  overflow:hidden;                      /* o scroll vive nos paineis, nao no viewport */
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
::selection{background:var(--jab-acid);color:var(--sobre-acento)}

/* Barra de rolagem: a do sistema entra clara e destroi o tema escuro. */
*{scrollbar-width:thin;scrollbar-color:rgba(236,233,225,.18) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(236,233,225,.16);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(236,233,225,.3);background-clip:content-box}

/* ---------------------------------------------------------------- rotulos tecnicos */
.kicker{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.kicker.acid{color:var(--acento)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* =========================================================================
   ESTRUTURA: navegacao lateral fixa + area de trabalho que rola sozinha.
   Lateral em vez de topo porque a tela de revisao e uma TABELA: ela quer toda a
   altura disponivel, e o topo custava 54px de altura util em cada linha visivel.
   ========================================================================= */
#app{display:flex;height:100vh;overflow:hidden}

.lateral{
  /* Relativa e acima do conteúdo: o puxador fica pendurado na borda direita e, recolhida,
     os balões dos itens invadem a área de trabalho. Precisa passar dos cabeçalhos de
     tabela, que são `sticky` com z-index 2 e, por virem depois no DOM, ganhavam o empate.
     Fica abaixo da barra de ação em lote (40) e do overlay (60), que devem cobrir tudo. */
  position:relative;z-index:10;
  width:var(--lateral);flex:0 0 var(--lateral);
  border-right:1px solid var(--border-subtle);
  /* Leve gradiente vertical: dá profundidade sem virar um segundo tom de fundo. */
  background:linear-gradient(180deg, var(--jab-panel) 0%, var(--jab-black-alt) 40%);
  display:flex;flex-direction:column;padding:18px 12px 14px;
  transition:width var(--t-lateral), flex-basis var(--t-lateral), padding var(--t-lateral);
}

/* Marca do produto, com a marca oficial da Jabour AI. Este é o console, então ela
   aparece aqui; no portal do cliente final fica apenas no rodapé. */
.lateral .marca{display:flex;align-items:center;gap:11px;padding:4px 10px 14px}
/* A marca já vem com o próprio canto arredondado, sem placa escura por trás: na barra
   lateral, uma placa escura sobre fundo escuro vira caixa dentro de caixa. */
.lateral .marca .logo{
  width:30px;height:30px;flex:0 0 30px;display:block;
  box-shadow:0 0 22px rgba(214,241,78,.20);
}
.lateral .marca .textos{min-width:0}
.lateral .marca .produto{
  font-family:var(--font-display);font-size:14.5px;font-weight:800;letter-spacing:-.025em;
  line-height:1.1;
}
.lateral .marca .assinatura{
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-ghost);margin-top:3px;
}

/* O escritório é contexto de tudo abaixo, então ele fica logo sob a marca, num bloco
   próprio, e não espremido no rodapé junto do usuário. */
.lateral .escritorio{
  display:flex;align-items:center;gap:9px;margin:0 2px 6px;padding:9px 10px;
  background:var(--acid-06);border:1px solid rgba(214,241,78,.14);border-radius:10px;
}
.lateral .escritorio .ponto{
  width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--acento);
  animation:pulso 2.4s ease-in-out infinite;
}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.3}}
.lateral .rotulo-escritorio{
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-ghost);line-height:1;
}
.lateral .nome-escritorio{
  font-size:13px;font-weight:650;color:var(--text-primary);line-height:1.25;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.lateral nav{display:flex;flex-direction:column;gap:1px}
.lateral nav button{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:9px 11px;border-radius:var(--r-btn);cursor:pointer;
  color:var(--text-muted);font-size:14px;font-weight:500;
  transition:color .16s ease,background .16s ease;
}
/* Ícone em traço, sempre em currentColor: herda o creme e vira ácido no item ativo,
   sem introduzir cor nenhuma fora da paleta. */
.lateral nav button .icone{
  width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;transition:opacity .16s ease;
}
.lateral nav button:hover{color:var(--text-primary);background:var(--jab-panel-hover)}
.lateral nav button:hover .icone{opacity:1}
.lateral nav button[aria-current=true]{
  color:var(--acento);background:var(--acid-08);
  box-shadow:inset 0 0 0 1px rgba(214,241,78,.16);
}
.lateral nav button[aria-current=true] .icone{opacity:1}

.lateral .secao{
  padding:16px 11px 6px;font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-ghost);
}

.lateral .rodape{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-subtle)}
/* Identidade à esquerda, ações em ícone à direita. Três botões de largura cheia
   empilhados ocupavam mais altura do que a navegação inteira. */
.lateral .conta{display:flex;align-items:center;gap:8px;padding:2px 4px 0 11px}
.lateral .quem{min-width:0;flex:1}
.lateral .quem .nome{
  font-size:13px;font-weight:600;line-height:1.3;color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lateral .quem .papel{
  font-size:11px;color:var(--text-ghost);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lateral .acoes-conta{display:flex;gap:4px;flex:0 0 auto;transition:gap var(--t-lateral)}
.lateral .acoes-conta .btn-icone{width:30px;height:30px;flex:0 0 30px;border-color:transparent}
.lateral .acoes-conta .btn-icone:hover{border-color:var(--border-acid)}

/* =========================================================================
   BARRA LATERAL RECOLHIDA.

   Recolher NÃO é esconder a barra: é trocar a legenda pelo ícone e manter tudo no mesmo
   lugar vertical. Quem recolhe já sabe onde cada coisa fica, e mover os itens junto com
   a largura destruiria essa memória.

   As legendas somem por `max-width` e não por `display:none`. Display não anima: a barra
   deslizaria suave e os textos sumiriam de estalo no primeiro quadro. Encolhendo a
   largura máxima com `overflow:hidden`, o texto é comido pela borda no mesmo ritmo do
   painel, que é o que faz o movimento parecer uma peça só.
   ========================================================================= */
.lateral .marca .textos,
.lateral nav button span,
.lateral .textos-escritorio,
.lateral .quem{
  overflow:hidden;white-space:nowrap;max-width:170px;opacity:1;
  transition:max-width var(--t-lateral), opacity .14s ease;
}
.lateral .marca,
.lateral nav button,
.lateral .escritorio,
.lateral .conta{transition:gap var(--t-lateral), padding var(--t-lateral)}

/* A inicial do escritório: só existe recolhida. Um ponto pulsante sozinho seria enfeite;
   a letra continua respondendo "qual escritório é este". */
.lateral .escritorio .sigla{
  display:none;width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  background:var(--acento);color:var(--sobre-acento);
  font-family:var(--font-display);font-size:12px;font-weight:800;font-style:normal;
  align-items:center;justify-content:center;line-height:1;
}

/* O puxador mora na própria borda da barra, que é onde a mão procura por ele. */
.puxador-lateral{
  position:absolute;top:25px;right:-11px;z-index:30;
  width:22px;height:22px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--jab-black-alt);border:1px solid var(--border-subtle);
  color:var(--text-ghost);cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease,
             transform var(--t-lateral);
}
.puxador-lateral:hover{
  color:var(--acento);border-color:var(--border-acid);background:var(--jab-panel);
}
.puxador-lateral .icone{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Abaixo de 861px a barra já vira uma faixa horizontal no topo, e recolher deixa de
   fazer sentido: não há largura para devolver. Todo o estado recolhido vive aqui dentro
   para não brigar com aquele modo. */
@media (min-width:861px){
  /* 66px = 40px de alvo clicável mais o respiro. Menos que isso e o ícone vira mira. */
  :root[data-lateral="retraida"]{--lateral:66px}

  [data-lateral="retraida"] .lateral{padding-left:13px;padding-right:13px}
  [data-lateral="retraida"] .lateral .marca{gap:0;padding:4px 0 14px;justify-content:center}
  [data-lateral="retraida"] .lateral nav button{gap:0;padding:9px 0;justify-content:center}
  [data-lateral="retraida"] .lateral .conta{gap:0;padding:2px 0 0;justify-content:center}
  [data-lateral="retraida"] .lateral .acoes-conta{flex-direction:column;gap:5px}
  [data-lateral="retraida"] .lateral .marca .textos,
  [data-lateral="retraida"] .lateral nav button span,
  [data-lateral="retraida"] .lateral .textos-escritorio,
  [data-lateral="retraida"] .lateral .quem{max-width:0;opacity:0}

  [data-lateral="retraida"] .lateral .escritorio{
    padding:8px 0;margin:0 0 6px;justify-content:center;gap:0;
  }
  [data-lateral="retraida"] .lateral .escritorio .ponto{display:none}
  [data-lateral="retraida"] .lateral .escritorio .sigla{display:flex}

  /* O rótulo da seção vira um fio. O agrupamento continua legível sem a palavra: o que
     ele separa é visual, não textual. */
  [data-lateral="retraida"] .lateral .secao{
    padding:13px 5px 8px;font-size:0;line-height:0;
  }
  [data-lateral="retraida"] .lateral .secao::before{
    content:"";display:block;height:1px;background:var(--border-subtle);
  }

  [data-lateral="retraida"] .puxador-lateral{transform:rotate(180deg)}

  /* Balão com o nome do item. Só existe recolhida: expandida a legenda está na tela e um
     balão repetindo o que já se lê é ruído.

     Ele é o INVERSO da página, não uma superfície elevada. Balão feito de `--jab-panel`
     sobre `--jab-black` são dois tons separados por seis pontos de luminância: some. E
     no tema claro era pior, creme sobre creme, invisível justamente por cima do cartão
     de conteúdo.

     `--jab-cream` e `--jab-black` já trocam de lado entre os temas (no claro, cream é o
     preto quente), então esta única declaração dá balão claro no escuro e balão escuro
     no claro, sem regra condicional. Os dois polos da marca são os extremos da paleta,
     que é exatamente o que um balão precisa. */
  [data-lateral="retraida"] .lateral nav button::after{
    content:attr(data-dica);
    position:absolute;left:calc(100% + 14px);top:50%;
    transform:translateY(-50%) translateX(-5px);
    padding:7px 11px;border-radius:9px;
    background:var(--jab-cream);color:var(--jab-black);
    font-size:12.5px;font-weight:600;white-space:nowrap;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;z-index:70;
    transition:opacity .14s ease,transform .14s ease,visibility .14s;
  }
  [data-lateral="retraida"] .lateral nav button:hover::after,
  [data-lateral="retraida"] .lateral nav button:focus-visible::after{
    opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
  }
}

/* Configurações da conta. */
.linha-config{
  display:flex;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--border-subtle);font-size:14px;
}
.linha-config .kicker{flex:0 0 84px}
.temas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opcao-tema{
  display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:transparent;border:1px solid var(--border-subtle);border-radius:10px;
  padding:11px 12px;color:var(--text-secondary);transition:all .16s;
}
.opcao-tema svg{
  width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.opcao-tema strong{display:block;font-size:13.5px;font-weight:600;color:var(--text-primary)}
.opcao-tema small{display:block;font-size:11.5px;color:var(--text-ghost);margin-top:1px}
.opcao-tema:hover{border-color:var(--border-acid)}
.opcao-tema[aria-pressed=true]{
  border-color:var(--border-acid);background:var(--acid-08);color:var(--acento);
}
.opcao-tema[aria-pressed=true] strong{color:var(--acento)}

.conteudo{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
/* Progresso da troca de tela: a tela atual fica de pé enquanto a próxima carrega. */
.progresso-rota{
  position:absolute;top:0;left:0;right:0;height:2px;z-index:30;overflow:hidden;
  background:rgba(214,241,78,.10);
}
.progresso-rota::after{
  content:"";position:absolute;inset:0;width:38%;border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--acento), transparent);
  animation:correr 1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes correr{from{transform:translateX(-100%)}to{transform:translateX(360%)}}
/* `scrollbar-gutter: stable` reserva a calha da barra de rolagem SEMPRE, mesmo quando
   não há o que rolar. Sem isso, trocar de uma aba longa (revisão, atividade) para uma
   curta (envio) fazia a barra sumir e devolver 10px de largura à página: o painel de
   números e os chips mudavam de tamanho a cada clique. Reservar 10px que às vezes ficam
   vazios custa menos do que uma coluna que respira. */
main{flex:1;overflow:auto;padding:26px 28px 92px;scrollbar-gutter:stable}
/* UMA medida para todas as telas. Antes havia duas (1120 para lotes e identidade, 1560
   para o resto) e a diferença aparecia como uma margem enorme que ia e vinha ao trocar
   de aba: o título mudava de lugar horizontalmente a cada clique no menu. Coluna que
   dança destrói a sensação de que é o mesmo produto. Formulários que ficariam largos
   demais nesta medida se limitam por dentro, não estreitando a página. */
.largura{max-width:1560px;margin:0 auto}

/* Titulos na face de display da marca, com o tracking negativo do sistema. */
h1{font-family:var(--font-display);font-size:26px;line-height:1.1;letter-spacing:-.03em;
  font-weight:800;margin:0 0 6px}
h2{font-family:var(--font-display);font-size:18px;line-height:1.18;letter-spacing:-.025em;
  font-weight:700;margin:0 0 12px}
.sub{color:var(--text-body);margin:0 0 20px;font-size:14.5px;max-width:70ch}
.cabeca{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
/* As ações do cabeçalho não quebram entre si: busca e botão de ação são um par, e o
   botão descendo sozinho para a linha de baixo parece um segundo bloco. Quando o espaço
   aperta de verdade, quem quebra é `.cabeca`, levando o par inteiro para a própria linha,
   que é o comportamento certo. Sem isto, a soma dos itens dava exatamente a largura do
   container, sem folga nenhuma: qualquer arredondamento de subpixel quebrava a linha. */
.cabeca .acoes{
  margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;
  /* `flex:0 0 auto` fecha a última porta pela qual o botão caía sozinho: sem isto, o
     bloco de ações ainda podia ser ENCOLHIDO por um título comprido até o botão sair da
     linha visível. Quando o espaço aperta de verdade, quem cede é `.cabeca`, levando o
     par busca-mais-botão inteiro para a linha de baixo, junto, que é o certo. */
  flex:0 0 auto;
}

/* ---------------------------------------------------------------- botoes */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-btn);
  border:1px solid var(--border-strong);background:transparent;color:var(--text-primary);
  cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s;
}
.btn:hover{border-color:var(--border-acid);color:var(--acento)}
.btn[disabled]{opacity:.4;cursor:default}
.btn[disabled]:hover{border-color:var(--border-strong);color:var(--text-primary)}
.btn.primario{background:var(--jab-acid);border-color:var(--acento);color:var(--sobre-acento);font-weight:650}
.btn.primario:hover{background:var(--jab-acid-bright);border-color:var(--jab-acid-bright);color:var(--sobre-acento)}
.btn.pequeno{padding:5px 10px;font-size:13px}
.btn.perigo:hover{border-color:var(--jab-alert);color:var(--jab-alert)}
/* Botão só de ícone: ação reconhecida pela forma, sem ocupar largura de rótulo. Usado
   onde três ações lado a lado quebrariam para uma segunda linha. */
.btn-icone{
  width:32px;height:32px;flex:0 0 32px;padding:0;display:grid;place-items:center;
  background:transparent;border:1px solid var(--border-subtle);border-radius:9px;
  color:var(--text-muted);cursor:pointer;transition:all .16s;
}
.btn-icone .icone{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn-icone:hover{border-color:var(--border-acid);color:var(--acento);background:var(--acid-06)}
.btn-icone.perigo:hover{border-color:var(--jab-alert);color:var(--jab-alert);background:transparent}
.btn-icone.armado{
  border-color:var(--jab-alert);color:var(--jab-alert);
  background:transparent;animation:pulsa-confirma 1s ease-in-out infinite;
}
@keyframes pulsa-confirma{0%,100%{opacity:1}50%{opacity:.55}}
/* Ações da linha: nunca quebram, nunca encolhem, e ficam encostadas na direita.
   `nowrap` sozinho não bastava: os botões ainda podiam ser espremidos abaixo dos 32px
   quando a coluna apertava, e um alvo de 24px com ícone dentro é um erro esperando. Se
   faltar espaço, a coluna transborda de forma visível em vez de o "Excluir" descer
   sozinho para a linha de baixo e desalinhar a altura da linha inteira. */
.acoes-linha{
  display:flex;gap:6px;align-items:center;justify-content:flex-end;
  flex-wrap:nowrap;
}
.acoes-linha > *{flex:0 0 auto}

/* Célula de status: a pílula centralizada no eixo do próprio rótulo da coluna. */
.cel.status{display:flex;align-items:center;justify-content:center}

/* Galão de "esta linha abre". Ele é afordância, não botão: fica apagado e acende com a
   linha inteira, que é o alvo de clique de verdade. */
.linha .icone.galao{
  width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--text-ghost);opacity:.5;transition:opacity .16s ease,color .16s ease;
}
.linha.clicavel:hover .icone.galao{opacity:1;color:var(--acento)}
.cel.pilulas{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

kbd{
  font-family:var(--font-mono);font-size:10.5px;padding:2px 5px;border-radius:4px;
  border:1px solid var(--border-subtle);background:rgba(0,0,0,.3);color:var(--text-muted);
}
.btn kbd{margin-left:2px}

/* =========================================================================
   CAMPOS. Nenhum controle nativo sobra com a cara do navegador.
   ========================================================================= */
input[type=text],input[type=email],input[type=password],input[type=month],
input[type=date],input[type=number],textarea{
  background:var(--jab-panel);border:1px solid var(--border-subtle);border-radius:var(--r-btn);
  padding:9px 11px;color:var(--text-primary);width:100%;
  transition:border-color .16s;
}
input::placeholder,textarea::placeholder{color:var(--text-ghost)}
input:focus,textarea:focus{outline:none;border-color:var(--acento)}
textarea{resize:vertical;min-height:88px}

/* O botao de calendario do input de data vem preto e some no tema escuro. */
input[type=month]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(88%) sepia(9%) saturate(180%) brightness(105%);
  opacity:.6;cursor:pointer;
}
input[type=month]::-webkit-calendar-picker-indicator:hover,
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
/* O preenchimento automatico do navegador pinta o campo de azul claro. */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-primary);
  -webkit-box-shadow:0 0 0 1000px var(--jab-panel) inset;
  caret-color:var(--text-primary);
}

label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:6px}
.campo{margin-bottom:15px}
.linha-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}

/* --- caixa de marcacao propria (o checkbox nativo nao aceita tema) --- */
.marcador{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:14px;color:var(--text-primary);margin:0;
}
.marcador input{position:absolute;opacity:0;width:0;height:0}
.marcador .caixa{
  width:18px;height:18px;flex:0 0 18px;border-radius:5px;
  border:1.5px solid var(--border-strong);background:var(--jab-panel);
  display:grid;place-items:center;transition:background .15s,border-color .15s;
}
.marcador .caixa::after{
  content:"";width:9px;height:5px;margin-top:-2px;
  border-left:2px solid var(--sobre-acento);border-bottom:2px solid var(--sobre-acento);
  transform:rotate(-45deg) scale(.5);opacity:0;transition:opacity .12s,transform .12s;
}
/* O estado visual vem de data-marcado, escrito pelo JS no evento change, e nao do
   pseudo-seletor :checked com combinador de irmao. Motivo pratico: o input real fica
   escondido (opacity 0, tamanho 0) para podermos desenhar a caixa, e nessa condicao a
   propagacao do :checked pelo combinador se mostrou instavel. Atributo explicito e
   deterministico, sobrevive a re-render e ainda deixa o estado visivel no DOM. */
.marcador[data-marcado] .caixa{background:var(--jab-acid);border-color:var(--acento)}
.marcador[data-marcado] .caixa::after{opacity:1;transform:rotate(-45deg) scale(1)}
.marcador:hover .caixa{border-color:var(--border-acid)}
.marcador[data-foco] .caixa{outline:2px solid var(--acento);outline-offset:2px}

/* --- seletor proprio (substitui o <select>; a lista nativa nao aceita estilo) --- */
.cz-sel{position:relative;width:100%}
.cz-sel > button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--jab-panel);border:1px solid var(--border-subtle);border-radius:var(--r-btn);
  padding:9px 11px;color:var(--text-primary);font-size:15px;transition:border-color .16s;
}
.cz-sel > button:hover{border-color:var(--border-strong)}
.cz-sel > button[aria-expanded=true]{border-color:var(--acento)}
.cz-sel .rotulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* `sem-valor`, nao `vazio`. A classe `.vazio` e o estado vazio de PAGINA, com 52px de
   respiro e texto centralizado; caindo no rotulo de um seletor sem escolha, ela inflava
   o gatilho para 146px de altura e centralizava o texto. Duas coisas diferentes nao
   podem dividir o mesmo nome de classe num CSS sem escopo. */
.cz-sel .rotulo.sem-valor{color:var(--text-ghost)}
.cz-sel .seta{
  width:7px;height:7px;flex:0 0 7px;margin-right:3px;
  border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.cz-sel > button[aria-expanded=true] .seta{transform:rotate(-135deg) translate(-2px,-2px)}

/* A lista abre presa ao body (posicao fixa) para nunca ser cortada por painel com
   overflow escondido. */
.cz-lista{
  position:fixed;z-index:90;background:var(--jab-panel);
  border:1px solid var(--border-strong);border-radius:var(--r-card);
  box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden;
  display:flex;flex-direction:column;max-height:320px;
}
.cz-lista .busca{padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.cz-lista .busca input{
  background:transparent;border:0;padding:0;width:100%;font-size:14.5px;
}
.cz-lista .busca input:focus{outline:none}
.cz-lista .itens{overflow:auto;padding:6px}
.cz-lista .item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  cursor:pointer;font-size:14px;line-height:1.35;
}
.cz-lista .item:hover{background:var(--jab-panel-hover)}
.cz-lista .item[data-cursor]{background:var(--acid-08);box-shadow:inset 0 0 0 1px var(--border-acid)}
.cz-lista .item[data-escolhido] .txt{color:var(--acento)}
.cz-lista .item .txt{flex:1;min-width:0}
.cz-lista .item .txt small{display:block;color:var(--text-ghost);font-size:11.5px;margin-top:1px}
.cz-lista .item .marca{
  width:6px;height:6px;border-radius:50%;background:var(--acento);flex:0 0 6px;opacity:0;
}
.cz-lista .item[data-escolhido] .marca{opacity:1}
.cz-lista .grupo{
  padding:9px 10px 4px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-ghost);
}
.cz-lista .nada{padding:16px 12px;color:var(--text-ghost);font-size:13.5px;text-align:center}

/* Seletor de competência: grade de doze meses no lugar do calendário do sistema, que
   é desenhado pelo SO e não aceita tema. O trabalho é sempre por competência, nunca
   por dia, então a grade também é mais rápida do que um calendário. */
/* O CABECALHO (setas e titulo) e o mesmo nos dois calendarios, entao ele vive aqui e nao
   dentro de `.cz-mes`. Preso ao seletor de mes, o calendario de DIA nascia sem regra
   nenhuma: as setas caiam no botao padrao do navegador, cinza e retangular, no meio de
   uma tela escura. Um controle sem estilo no meio do resto denuncia software inacabado
   mais rapido do que qualquer bug. */
.cz-mes,.cz-dia{padding:12px}
.cz-mes .cabeca-ano,.cz-dia .cabeca-ano{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
}
.cz-mes .ano,.cz-dia .ano{
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.1em;
  color:var(--text-primary);
  /* O titulo do calendario de dia e "agosto de 2026", nao so o ano: sem isto ele quebra
     em duas linhas e empurra as setas para fora do eixo. A maiuscula da primeira letra
     vem do JS: `text-transform:capitalize` escreveria "Agosto De 2026". */
  white-space:nowrap;
}
.cz-mes .nav,.cz-dia .nav{
  width:28px;height:28px;flex:0 0 28px;padding:0;
  border-radius:7px;border:1px solid var(--border-subtle);
  background:transparent;color:var(--text-secondary);cursor:pointer;
  font-family:inherit;font-size:15px;line-height:1;
  display:grid;place-items:center;transition:border-color .14s,color .14s;
}
.cz-mes .nav:hover,.cz-dia .nav:hover{border-color:var(--border-acid);color:var(--acento)}
.cz-mes .nav:focus-visible,.cz-dia .nav:focus-visible{
  outline:2px solid var(--border-acid);outline-offset:1px;
}
.cz-mes .meses{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cz-mes .mes{
  padding:10px 4px;border-radius:8px;border:1px solid var(--border-subtle);
  background:transparent;color:var(--text-secondary);cursor:pointer;font-size:13px;
  text-transform:capitalize;transition:all .14s;
}
.cz-mes .mes:hover:not([disabled]){border-color:var(--border-acid);color:var(--acento)}
.cz-mes .mes[data-escolhido]{
  background:var(--jab-acid);border-color:var(--acento);color:var(--sobre-acento);font-weight:650;
}
.cz-mes .mes[disabled]{opacity:.28;cursor:default}

/* Calendário de dia, para o vencimento da parcela: uma das cinco chaves da baixa, que o
   Domínio compara caractere por caractere. Campo de texto ali era convite a erro. */
.cz-dia .dias{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.cz-dia .cabeca-dia{
  text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  color:var(--text-ghost);padding-bottom:4px;
}
.cz-dia .dia{
  aspect-ratio:1;border-radius:7px;border:1px solid transparent;background:transparent;
  color:var(--text-secondary);cursor:pointer;font-size:12.5px;font-variant-numeric:tabular-nums;
  transition:all .12s;
}
.cz-dia .dia:hover{border-color:var(--border-acid);color:var(--acento)}
.cz-dia .dia[data-escolhido]{
  background:var(--jab-acid);border-color:var(--acento);color:var(--sobre-acento);font-weight:650;
}
.cz-dia .rodape-dia{
  display:flex;justify-content:flex-end;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--border-subtle);
}

/* ---------------------------------------------------------------- cards e grade colada */
.card{
  background:rgba(255,255,255,.02);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);padding:18px;
}
.painel-numeros{margin-bottom:22px}
/* Flex, não grid. Com `grid auto-fit`, a última linha mantém as colunas vazias e sobra
   uma célula órfã ocupando um quinto da largura, que foi o que quebrou em tela estreita.
   No flex com wrap, os itens da última linha crescem e preenchem a faixa em qualquer
   largura, sem buraco. */
.grade-colada{
  display:flex;flex-wrap:wrap;gap:1px;
  background:var(--border-hairline);border:1px solid var(--border-hairline);
  border-radius:var(--r-card);overflow:hidden;
}
/* Linha de resumo: o que não é contagem. Reflui como texto, então nunca sobra um bloco
   solto ocupando uma linha inteira quando a janela estreita. */
.resumo-lote{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding:11px 16px;margin-top:1px;
  background:var(--jab-black-alt);border:1px solid var(--border-hairline);border-top:0;
  border-radius:0 0 var(--r-card) var(--r-card);
}
.resumo-lote .item{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.resumo-lote .mono{font-size:13px;font-variant-numeric:tabular-nums}
.resumo-lote .entrada{color:var(--acento)}
.resumo-lote .saida{color:var(--text-secondary)}
.grade-colada:has(+ .resumo-lote){border-radius:var(--r-card) var(--r-card) 0 0}
.celula{
  flex:1 1 150px;min-width:0;
  background:var(--jab-black-alt);padding:14px 16px;transition:background .2s;
}
.celula:hover{background:var(--jab-panel-hover)}
.celula .valor{
  font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.03em;
  line-height:1;margin:7px 0 0;font-variant-numeric:tabular-nums;
}
.celula .apoio{font-size:11.5px;color:var(--text-ghost)}
.celula.destaque .valor{color:var(--acento)}
.celula.alerta .valor{color:var(--jab-alert)}

/* Botao armado para confirmar (excluir regra, remover arquivo). */
.btn.armado{border-color:var(--jab-alert);color:var(--jab-alert);font-weight:650}

/* Barra de filtros: chips a esquerda (o recorte), seletores a direita (o escopo).
   Duas funcoes diferentes, entao dois grupos, e nao uma fileira unica de dez controles
   em que nada tem hierarquia. */
.barra-filtros{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--border-hairline);
}
.seletores-filtro{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.seletores-filtro .cz-sel{width:210px}
.seletores-filtro .cz-sel > button{padding:6px 11px;font-size:13.5px;border-radius:999px}
@media (max-width:900px){
  .seletores-filtro{margin-left:0}
  .seletores-filtro .cz-sel{width:170px}
}
/* A contagem e um segundo dado dentro do mesmo botao, entao ela precisa de um degrau de
   contraste em relacao ao rotulo. Fundo proprio, e nao so opacidade: em cima do acento
   do chip escolhido, opacidade sozinha some. */
.chip .contagem{
  margin-left:7px;padding:1px 6px;border-radius:999px;
  background:var(--jab-black-alt);color:var(--text-faint);
  font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;
}
.chip[aria-pressed=true] .contagem{background:rgba(0,0,0,.16);color:var(--sobre-acento)}
.chip:has(.contagem){display:inline-flex;align-items:center;padding:5px 8px 5px 13px}

/* ---------------------------------------------------------------- chips e pilulas */
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{
  border:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);
  border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer;transition:all .16s;
}
.chip:hover{border-color:var(--border-acid);color:var(--acento)}
.chip[aria-pressed=true]{background:var(--jab-acid);border-color:var(--acento);color:var(--sobre-acento);font-weight:600}
.chip .n{opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}
.chip[aria-pressed=true] .n{opacity:.7}

.pill[data-dica],.celula[data-dica],.resumo-lote .item[data-dica]{cursor:help}
.celula[data-dica]:focus-visible,.pill[data-dica]:focus-visible{
  outline:2px solid var(--acento);outline-offset:2px;border-radius:4px;
}
.pill{
  display:inline-block;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);white-space:nowrap;
}
.pill.alta{background:var(--acid-14);color:var(--acento);border:1px solid var(--border-acid)}
.pill.media{background:rgba(236,233,225,.07);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.pill.baixa,.pill.erro{background:rgba(255,156,122,.12);color:var(--jab-alert);border:1px solid rgba(255,156,122,.4)}
.pill.neutra{background:transparent;color:var(--text-muted);border:1px solid var(--border-subtle)}

/* ---------------------------------------------------------------- tabelas */
.tabela{border:1px solid var(--border-hairline);border-radius:var(--r-card);overflow:hidden}
.linha{
  display:grid;
  grid-template-columns:34px 88px 108px minmax(220px,1fr) 190px 96px 34px;
  align-items:start;padding:9px 12px;
  border-bottom:1px solid var(--border-subtle);background:var(--jab-black-alt);
  border-left:2px solid transparent;
}
.linha:last-child{border-bottom:0}
.linha:hover{background:var(--jab-panel-hover)}
.linha[data-cursor]{border-left-color:var(--acento);background:var(--jab-panel-hover)}
.linha[data-sel]{background:var(--acid-06)}
.linha[data-sel][data-cursor]{background:var(--acid-08)}
.linha.cabecalho{
  background:var(--jab-panel);position:sticky;top:0;z-index:2;padding:8px 12px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);border-left:2px solid transparent;
}
.linha.cabecalho:hover{background:var(--jab-panel)}
.linha.clicavel{cursor:pointer}
.cel{min-width:0;padding-right:10px}
.cel .principal{font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cel .apoio{font-size:11.5px;color:var(--text-faint);line-height:1.4;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cel.valor{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.cel.valor .entrada{color:var(--acento)}
.cel.data{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
/* A explicacao NAO e decoracao: e o conteudo que a equipe audita para saber por que o
   sistema decidiu como decidiu. Ficava em --text-ghost (creme a 35%), abaixo do minimo
   de contraste da WCAG para texto pequeno. Subiu para --text-muted, que passa em AA. */
.explicacao{
  grid-column:2/-1;font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.5;
  padding-right:10px;
}
.explicacao b{color:var(--text-secondary);font-weight:600}
/* Caixa de marcação da linha: é um botão de verdade, com área de clique confortável.
   Antes era um div decorativo, então quem apontava para ela não conseguia marcar. */
.marca-sel{
  width:18px;height:18px;padding:0;background:transparent;cursor:pointer;
  border:1.5px solid var(--border-strong);border-radius:5px;
  display:grid;place-items:center;margin-top:1px;position:relative;
  transition:background .14s,border-color .14s;
}
.marca-sel::before{                       /* alvo de clique maior que o desenho */
  content:"";position:absolute;inset:-7px;
}
.marca-sel::after{
  content:"";width:8px;height:4px;margin-top:-2px;
  border-left:2px solid var(--sobre-acento);border-bottom:2px solid var(--sobre-acento);
  transform:rotate(-45deg) scale(.5);opacity:0;transition:opacity .12s,transform .12s;
}
.marca-sel:hover{border-color:var(--border-acid)}
.linha[data-sel] .marca-sel,
.marca-sel[aria-checked=true]{background:var(--jab-acid);border-color:var(--acento)}
.linha[data-sel] .marca-sel::after,
.marca-sel[aria-checked=true]::after{opacity:1;transform:rotate(-45deg) scale(1)}
/* Parcial: parte dos visíveis marcada. Traço em vez de tique. */
.marca-sel[data-parcial]{background:var(--jab-acid);border-color:var(--acento)}
.marca-sel[data-parcial]::after{
  opacity:1;width:9px;height:0;margin-top:0;border-left:0;
  border-bottom:2px solid var(--sobre-acento);transform:none;
}
.acao-linha{
  background:none;border:0;color:var(--text-ghost);cursor:pointer;font-size:15px;
  padding:0 4px;line-height:1;
}
.acao-linha:hover{color:var(--acento)}

/* Acesso desativado: some do caminho sem sumir da lista, porque a auditoria continua
   apontando para ele. */
.linha[data-inativo]{opacity:.62}
.linha[data-inativo]:hover{opacity:1}

/* A senha provisória aparece uma única vez, então precisa ser fácil de ler em voz alta
   e de copiar sem erro. */
.senha-provisoria{
  margin-top:14px;padding:16px;text-align:center;border-radius:var(--r-card);
  background:var(--acid-08);border:1px solid var(--border-acid);
  font-size:24px;font-weight:600;letter-spacing:.16em;color:var(--acento);
  user-select:all;word-break:break-all;
}

.pendencias{display:flex;flex-wrap:wrap;gap:4px}
.pendencias .pill{cursor:help}

/* Cabeçalho de grupo por fornecedor. Sem barra lateral: o que separa é a superfície
   mais clara e o fio de baixo, como no cabeçalho da própria tabela. */
.grupo-linha{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--jab-panel);border-bottom:1px solid var(--border-subtle);
  border-top:1px solid var(--border-subtle);
}
.grupo-linha:first-child{border-top:0}
.grupo-linha .nome-grupo{font-size:13px;font-weight:650;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grupo-linha .conta-grupo{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-ghost);
}
.grupo-linha .soma-grupo{margin-left:auto;font-size:13px;color:var(--text-secondary)}

/* Linha do tempo do lote. */
.linha-tempo{border-left:1px solid var(--border-subtle);margin-left:6px;padding-left:0}
.linha-tempo .evento{display:flex;gap:14px;padding:0 0 18px 18px;position:relative}
.linha-tempo .marcador{
  position:absolute;left:-4px;top:5px;width:7px;height:7px;border-radius:50%;
  background:var(--jab-panel);border:1.5px solid var(--border-strong);
}
.linha-tempo .evento:first-child .marcador{background:var(--acento);border-color:var(--acento)}
.linha-tempo .acao{font-size:14px;font-weight:600;line-height:1.3}
.linha-tempo .detalhe{font-size:13px;color:var(--text-secondary);margin-top:2px;line-height:1.45}
.linha-tempo .quando{font-size:11.5px;color:var(--text-ghost);margin-top:3px}

.vazio{padding:52px 24px;text-align:center;color:var(--text-muted);font-size:14.5px}
.vazio p{max-width:46ch;margin-left:auto;margin-right:auto}

/* Soma do que esta marcado, na barra de acao em lote. */
.barra-lote .soma{
  font-size:13px;color:var(--text-secondary);white-space:pre;margin-right:8px;
}

/* Envio de arquivo em andamento. */
.solta.enviando{
  border-color:var(--border-acid);color:var(--acento);cursor:default;
  background:var(--acid-06);
}

.toast{display:flex;align-items:flex-start;gap:10px}
.toast .corpo-toast{flex:1;min-width:0}
.toast .desfazer{
  display:block;margin-top:8px;background:none;border:1px solid var(--border-strong);
  color:var(--acento);border-radius:7px;padding:5px 11px;font-size:12.5px;
  font-weight:600;cursor:pointer;
}
.toast .desfazer:hover{border-color:var(--border-acid);background:var(--acid-08)}
.toast .fechar{
  background:none;border:0;color:var(--text-ghost);cursor:pointer;font-size:16px;
  line-height:1;padding:0 2px;margin-left:auto;
}
.toast .fechar:hover{color:var(--text-primary)}

/* Entrada de tela.

   A classe é aplicada pelo render APENAS quando a vista muda de verdade. Antes a regra
   era `main > *`, então ela reexecutava a cada atualização de dado (marcar uma linha,
   filtrar, confirmar) e o resultado era o piscar constante.

   Sem sair de opacidade zero: partir do nada é o que lê como "flash". Sair de 0.55 com
   3px de subida lê como assentar. */
@keyframes entraTela{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
.entra{animation:entraTela .18s cubic-bezier(.2,.6,.2,1)}

/* Troca de aba dentro do lote.

   As abas são etapas em sequência (chega arquivo, revisa, envia), então a troca entra
   pelo lado que corresponde ao movimento: avançar vem da direita, voltar vem da
   esquerda. Só o conteúdo da aba se move; o cabeçalho, os números e os próprios chips
   ficam parados, que é o que separa "trocar de aba" de "trocar de tela".

   Mesma disciplina da entrada de tela: parte de 0.55, nunca de zero, senão a tabela de
   revisão inteira pisca. O deslocamento é maior (10px contra 3px) porque aqui ele
   carrega informação, a direção, e não é só o assentar. */
@keyframes abaAdiante{from{opacity:.55;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes abaAtras{from{opacity:.55;transform:translateX(-10px)}to{opacity:1;transform:none}}
.entra-aba-adiante{animation:abaAdiante .2s cubic-bezier(.2,.6,.2,1)}
.entra-aba-atras{animation:abaAtras .2s cubic-bezier(.2,.6,.2,1)}

/* ---------------------------------------------------------------- barra de lote */
.barra-lote{
  position:fixed;left:var(--lateral);right:0;bottom:0;z-index:40;
  background:rgba(16,15,12,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--border-acid);padding:11px 26px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  /* Ela se alinha pela borda da barra lateral, então acompanha o recolhimento na mesma
     curva. Sem isso, a barra desliza e a régua de ação salta para o lugar novo. */
  transition:left var(--t-lateral);
}
.barra-lote .conta{font-weight:700;font-size:14px;color:var(--acento);margin-right:6px}
.barra-lote .espaco{margin-left:auto}

/* ---------------------------------------------------------------- overlay / painel */
.overlay{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.62);
  display:flex;align-items:flex-start;justify-content:center;padding:9vh 20px 20px;
}
.painel{
  background:var(--jab-panel);border:1px solid var(--border-strong);border-radius:var(--r-card);
  width:100%;max-width:560px;max-height:76vh;display:flex;flex-direction:column;overflow:hidden;
}

/* Abertura e fechamento do painel.

   O fundo escurece e o painel desce um pouco, em vez de os dois aparecerem prontos. São
   180ms: o seletor de categoria é aberto dezenas de vezes por lote, no teclado, e
   qualquer coisa mais lenta que isso vira atraso percebido em vez de transição.

   O painel parte de 0.985, não de 0.9: escala grande lê como pop-up de anúncio. */
@keyframes fundoEntra{from{opacity:0}to{opacity:1}}
@keyframes painelEntra{
  from{opacity:0;transform:translateY(-10px) scale(.985)}
  to{opacity:1;transform:none}
}
.overlay{animation:fundoEntra .18s ease-out}
.overlay > .painel{animation:painelEntra .18s cubic-bezier(.2,.8,.3,1)}

@keyframes fundoSai{from{opacity:1}to{opacity:0}}
@keyframes painelSai{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-8px) scale(.985)}
}
.overlay.saindo{animation:fundoSai .16s ease-in forwards;pointer-events:none}
.overlay.saindo > .painel{animation:painelSai .16s ease-in forwards}
.painel.largo{max-width:920px}
.painel > header{
  padding:14px 16px;border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;gap:10px;
}
.painel > header input{background:transparent;border:0;padding:0;font-size:16px}
.painel .corpo-painel{padding:16px;overflow:auto}
.painel .lista{overflow:auto;padding:6px}
.opt{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-btn);
  cursor:pointer;font-size:14px;
}
.opt:hover{background:var(--jab-panel-hover)}
.opt[data-cursor]{background:var(--acid-08);box-shadow:inset 0 0 0 1px var(--border-acid)}
.opt .nat{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-ghost)}
/* Divisor de assunto dentro de um painel longo.

   Ele era um rótulo em mono de 9px, caixa alta e 52% de opacidade: o mesmo tratamento
   dos rótulos da barra lateral. Ali funciona, porque são três palavras soltas num
   painel curto. Aqui não: o cadastro de cliente tem quatro seções e quinze campos, e
   com 9px o título pesava MENOS que os rótulos dos campos que ele deveria agrupar.
   Hierarquia invertida é o que faz um formulário longo parecer uma pilha.

   Agora ele é um título de verdade: corpo de leitura, na face de display da marca, na
   cor cheia do texto. O fio acima continua separando; o que mudou foi quem manda. */
.secao-painel{
  margin:30px 0 14px;padding-top:20px;border-top:1px solid var(--border-subtle);
  font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.015em;
  color:var(--text-primary);
}
.secao-painel:first-child{margin-top:0;padding-top:0;border-top:0}
/* Quando a seção tem uma linha de explicação logo abaixo, ela cola no título. */
.secao-painel + .sub{margin-top:-8px}
/* Espécie, série e subsérie são três campos curtos que só fazem sentido juntos: em
   linhas separadas, ocupavam meia tela para guardar seis caracteres. */
.colunas-tres{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media (max-width:560px){.colunas-tres{grid-template-columns:1fr}}

.painel .rodape{
  padding:12px 16px;border-top:1px solid var(--border-subtle);
  display:flex;gap:10px;align-items:center;font-size:12px;color:var(--text-ghost);flex-wrap:wrap;
}
.grupo-rotulo{
  padding:9px 11px 4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-ghost);
}

/* ---------------------------------------------------------------- avisos */
/* Bloco de aviso.

   Antes era um card com uma barra colorida grossa na borda esquerda. Aquilo é o
   carimbo de "callout de template": chama mais atenção para si do que para o texto e
   não tem nada a ver com o vocabulário da marca, que trabalha com fio de 1px, rótulo
   em mono caixa alta e o quadrado ácido.

   Agora: painel discreto com um FIO SUPERIOR de acento e um marcador quadrado ao lado
   do texto. O peso vem da tipografia, não de um bloco de cor. */
.aviso{
  position:relative;background:var(--jab-panel);border:1px solid var(--border-subtle);
  border-radius:10px;padding:14px 16px 14px 34px;margin-bottom:16px;overflow:hidden;
  font-size:13.5px;color:var(--text-secondary);line-height:1.55;
}
.aviso::before{                      /* fio superior, do quadrado até o fim do bloco */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--acento);
  opacity:.55;
}
.aviso::after{                       /* o quadrado ácido, o bullet da marca */
  content:"";position:absolute;left:16px;top:19px;width:8px;height:8px;
  background:var(--acento);
}
.aviso.alerta::before,
.aviso.alerta::after{background:var(--jab-alert);opacity:1}
.aviso.alerta::before{opacity:.55}
.aviso strong{color:var(--text-primary);font-weight:650}
.aviso ul{margin:8px 0 0;padding-left:16px}
.aviso li{margin-bottom:3px}

/* ---------------------------------------------------------------- identidade do portal
   A previa reproduz o portal do cliente final DENTRO do console. Ela e clara de
   proposito: o portal e claro e sobrio, e mostrar a previa no tema escuro do console
   enganaria quem esta escolhendo a cor. */
/* A página agora mede 1560, mas campo de formulário com 700px de largura é ilegível:
   o olho perde a relação entre o rótulo e o que digitou. O limite fica aqui dentro. */
.colunas-marca{
  display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);
  gap:22px;max-width:1000px;
}
.amostra-cor{
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;
  border:1px solid var(--border-subtle);
}
.previa{
  --previa-marca:#1F5C4C;--previa-texto:#fff;
  background:#FBFAF8;color:#1A1A18;border:1px solid var(--border-subtle);
  border-radius:var(--r-card);padding:20px;font-size:14px;
}
.previa-marca{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.previa-marca img{height:30px;max-width:170px;object-fit:contain}
.previa-mono{
  width:32px;height:32px;flex:0 0 32px;border-radius:8px;display:grid;place-items:center;
  background:var(--previa-marca);color:var(--previa-texto);font-size:13px;font-weight:700;
}
.previa-nome{font-size:14px;font-weight:650;color:#1A1A18}
.previa-saudacao{font-size:17px;line-height:1.35;font-weight:640;margin:0 0 6px;color:#1A1A18}
.previa-linha{font-size:12.5px;color:#57564F;margin:0}
.previa-cartao{
  background:#F4F2ED;border:1px solid #E5E2DA;border-radius:12px;padding:14px;margin:14px 0;
}
.previa-selo{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#57564F;border:1px solid #D2CEC3;border-radius:99px;
  padding:3px 9px;margin-bottom:9px;
}
.previa-valor{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-bottom:4px}
.previa-botao{
  background:var(--previa-marca);color:var(--previa-texto);border-radius:11px;
  padding:12px 15px;font-weight:640;font-size:15px;text-align:center;
}
.previa-rodape{
  margin-top:16px;padding-top:12px;border-top:1px solid #E5E2DA;text-align:center;
  font-size:12.5px;color:#57564F;
}
.previa-assinatura{font-size:11px;color:#9A9892;margin-top:5px}

@media (max-width:900px){.colunas-marca{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- textura da marca
   As duas camadas de fundo do design system: grade de linhas de 1px a cada 46px com
   mascara radial que apaga as bordas, e um brilho acido difuso em loop lento.

   Elas aparecem so no login e nos estados vazios. Na tabela de revisao seriam ruido
   atras de dado que precisa ser lido, e o sistema e explicito: o acento perde forca se
   estiver em tudo. */
.textura{position:relative;overflow:hidden;isolation:isolate}
.textura::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(236,233,225,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236,233,225,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 48%, #000 22%, transparent 78%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 48%, #000 22%, transparent 78%);
}
.textura::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:520px;height:520px;top:-160px;right:-160px;
  background:radial-gradient(closest-side, rgba(214,241,78,.16), transparent 70%);
  filter:blur(46px);animation:brilho 14s ease-in-out infinite;
}
@keyframes brilho{
  0%,100%{transform:scale(1) translate(0,0);opacity:.9}
  50%{transform:scale(1.18) translate(-24px,18px);opacity:.55}
}

/* ---------------------------------------------------------------- login */
.login{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  height:100vh;padding:20px;width:100%;
}

/* ---------------------------------------------------------------- fundo do login
   Exatamente as duas camadas que o design system define: grade de 1px a cada 46px
   com máscara radial, e brilho ácido difuso em loop lento. Nada além disso. É a
   única tela do console que pode se dar ao luxo de ter fundo animado: nas telas de
   trabalho, movimento atrás de número seria ruído. */
.fundo-login{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fundo-login .grade{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(to right, rgba(236,233,225,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236,233,225,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 78%);
  animation:deriva-grade 40s linear infinite;
}
@keyframes deriva-grade{from{transform:translate(0,0)}to{transform:translate(46px,46px)}}

/* No máximo dois brilhos, em cantos opostos, o segundo mais fraco e em contratempo. */
.fundo-login .brilho{position:absolute;border-radius:50%;filter:blur(60px)}
.fundo-login .b1{
  width:min(60vw,720px);height:min(60vw,720px);top:-18%;right:-12%;
  background:radial-gradient(closest-side, rgba(214,241,78,.16), transparent 70%);
  animation:brilho-a 16s ease-in-out infinite;
}
.fundo-login .b2{
  width:min(52vw,620px);height:min(52vw,620px);bottom:-20%;left:-14%;
  background:radial-gradient(closest-side, rgba(214,241,78,.09), transparent 70%);
  animation:brilho-b 22s ease-in-out infinite;
}
@keyframes brilho-a{
  0%,100%{transform:scale(1) translate(0,0);opacity:.95}
  50%{transform:scale(1.18) translate(-40px,30px);opacity:.5}
}
@keyframes brilho-b{
  0%,100%{transform:scale(1.12) translate(0,0);opacity:.5}
  50%{transform:scale(1) translate(40px,-28px);opacity:.9}
}

.login .card{
  position:relative;width:100%;max-width:390px;
  background:rgba(22,21,15,.78);backdrop-filter:blur(10px);
  border-color:var(--border-strong);
}
.login h1{font-size:29px;margin-bottom:4px}
.login mark{background:var(--jab-acid);color:var(--sobre-acento);padding:0 5px;border-radius:3px}
.marca-login{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.marca-login .logo{width:34px;height:34px;flex:0 0 34px;display:block}
.marca-login .produto{
  font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.025em;
  line-height:1.1;
}
.marca-login .assinatura{
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-ghost);margin-top:3px;
}

/* Tema claro: o fundo escuro do login não se inverte (a tela de entrada é a peça de
   marca), mas o cartão precisa continuar legível sobre ele. */
/* Valor literal, não o token: no tema claro `--jab-black` é o creme, e a tela de
   entrada tem que continuar escura nos dois temas. */
[data-tema="claro"] .login{background:#100F0C}
[data-tema="claro"] .login .card{
  background:rgba(22,21,15,.82);color:var(--jab-cream);border-color:rgba(236,233,225,.25);
}
[data-tema="claro"] .login .card h1{color:#ECE9E1}
[data-tema="claro"] .login .card .sub,
[data-tema="claro"] .login .card label{color:rgba(236,233,225,.7)}
[data-tema="claro"] .login .card input{
  background:rgba(16,15,12,.5);border-color:rgba(236,233,225,.2);color:#ECE9E1;
}
[data-tema="claro"] .login .card .btn{color:#ECE9E1;border-color:rgba(236,233,225,.3)}
[data-tema="claro"] .login .card .btn.primario{color:var(--sobre-acento)}
[data-tema="claro"] .assinatura-login{color:rgba(236,233,225,.45)}
/* O recado de erro fica no formulário, colado nos campos, e não num aviso flutuante no
   canto oposto da tela. Só ocupa espaço quando tem o que dizer, senão o botão Entrar
   pula de lugar entre uma tentativa e outra. O cartão de login é escuro nos dois temas,
   por isso o tom de alerta aqui é sempre o claro, não o token que inverte. */
.erro-login{
  margin:-4px 0 12px;font-size:13px;line-height:1.4;color:#FF9C7A;
}
.erro-login:empty{display:none}
.login .campo.invalido input{
  border-color:#FF9C7A;
  box-shadow:0 0 0 3px rgba(255,156,122,.14);
}

.assinatura-login{
  margin:0;font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-ghost);text-align:center;
}

/* ---------------------------------------------------------------- upload */
.solta{
  border:1.5px dashed var(--border-strong);border-radius:var(--r-card);padding:22px;
  text-align:center;color:var(--text-muted);font-size:13.5px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.solta:hover{border-color:var(--border-acid);color:var(--text-secondary)}
.solta[data-sobre]{border-color:var(--acento);background:var(--acid-06);color:var(--acento)}
.arquivos{list-style:none;margin:14px 0 0;padding:0}
.arquivos li{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--border-subtle);font-size:13.5px;
}
.arquivos li:last-child{border-bottom:0}
.arquivos .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arquivos .meta{margin-left:auto;color:var(--text-ghost);font-size:11.5px;
  font-family:var(--font-mono);white-space:nowrap}

/* ---------------------------------------------------------------- toast */
#toasts{position:fixed;right:22px;bottom:76px;z-index:80;display:flex;flex-direction:column;gap:8px}
/* Notificação: painel inteiro, sem barra na lateral esquerda. O estado aparece num
   rótulo em mono caixa alta, que é como a marca nomeia as coisas, e o erro assume a
   borda inteira em vez de um traço decorativo. */
.toast{
  position:relative;background:var(--jab-panel);border:1px solid var(--border-strong);
  border-radius:11px;padding:12px 15px;font-size:13.5px;max-width:370px;line-height:1.45;
  box-shadow:0 16px 38px rgba(0,0,0,.45);animation:entra .22s cubic-bezier(.2,.8,.3,1);
}
.toast::before{
  content:"OK";position:absolute;top:-1px;left:15px;
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.16em;
  color:var(--sobre-acento);background:var(--acento);padding:2px 6px 2px 6px;
  border-radius:0 0 4px 4px;line-height:1;
}
.toast{padding-top:20px}
.toast.erro{border-color:var(--jab-alert)}
.toast.erro::before{content:"ERRO";background:var(--jab-alert);color:var(--jab-panel)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Prazo do aviso: a barra ENCOLHE ate zero e o fim dela e o que remove o aviso, entao
   pausar a barra pausa o desaparecimento de verdade, nao so o desenho. Ponteiro em cima
   ou foco dentro (teclado chega no Desfazer) segura o aviso pelo tempo que precisar. */
.toast .prazo{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--acento);opacity:.5;border-radius:0 0 0 11px;
  transform-origin:left center;
  animation:prazo-aviso linear forwards;
}
.toast.erro .prazo{background:var(--jab-alert);opacity:.65}
.toast:hover .prazo,.toast:focus-within .prazo{animation-play-state:paused}
@keyframes prazo-aviso{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ------------------------------------------------------- entrada no console
   Login sai para tras, console entra: a lateral vem da propria borda e o conteudo
   sobe de leve, na mesma curva do resto do sistema. Uma vez so, no login. */
.login.saindo{animation:sai-login .26s cubic-bezier(.4,0,1,1) forwards}
@keyframes sai-login{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.975)}
}
.entra-lateral{animation:entra-lateral .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes entra-lateral{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:none}
}
/* O conteudo entra logo depois da lateral: a ordem conta a hierarquia da tela. */
.entra-conteudo{animation:entra-conteudo .38s cubic-bezier(.2,.8,.3,1) .07s both}
@keyframes entra-conteudo{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.carregando{padding:40px;text-align:center;color:var(--text-ghost);font-size:13.5px}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* Tela estreita: a lateral vira uma faixa no topo. Sem JS, sem menu escondido. */
@media (max-width:860px){
  #app{flex-direction:column}
  .lateral{
    width:100%;flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;
    border-right:0;border-bottom:1px solid var(--border-subtle);padding:10px 14px;overflow:auto;
  }
  .lateral .marca{
    padding:0 12px 0 0;margin:0;white-space:nowrap;
    border-right:1px solid var(--border-subtle);
  }
  .lateral .marca .assinatura{display:none}
  .lateral nav{flex-direction:row}
  .lateral .secao{display:none}
  .lateral .rodape{margin-top:0;margin-left:auto;padding-top:0;border-top:0;display:flex;
    align-items:center;gap:10px;white-space:nowrap}
  /* Em faixa horizontal o escritório vira uma pílula compacta ao lado da marca. */
  .lateral .escritorio{margin:0;padding:6px 10px}
  .lateral .rotulo-escritorio{display:none}
  .lateral .quem{display:none}
  /* A barra já é uma faixa no topo: não há largura para devolver, e o puxador ficaria
     pendurado no meio da tela, sem borda em que se apoiar. */
  .puxador-lateral{display:none}
  .lateral .escritorio .sigla{display:none}
  main{padding:18px 16px 92px}
  .barra-lote{left:0;padding:11px 16px}
  .linha{grid-template-columns:30px 74px 96px minmax(140px,1fr) 150px}
  .linha .cel.conf,.linha .acao-linha{display:none}
}

/* =========================================================================
   RELATÓRIO DE IMPACTO.

   A única tela do console que é DOCUMENTO e não ferramenta. Ela vai ser projetada numa
   reunião de entrega e depois virar PDF que circula sem ninguém para explicar, então ela
   pode gastar espaço e escala tipográfica que nenhuma tela de trabalho poderia.

   O resto do console tem números em 13px porque quem trabalha lê dezenas por minuto.
   Aqui é o contrário: três números por tela, lidos de longe, por quem está decidindo.
   ========================================================================= */
.faixa-numeros{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border-hairline);border:1px solid var(--border-hairline);
  border-radius:var(--r-card);overflow:hidden;margin-bottom:26px;
}
.faixa-numeros.compacta{
  grid-template-columns:repeat(2,1fr);margin:0 0 4px;border:0;background:none;
  /* Sem borda e sem fundo, o raio de canto so tem um efeito: recortar a primeira
     letra do rotulo da esquerda, que nao tem mais respiro para se afastar dele. */
  border-radius:0;overflow:visible;
}
.faixa-numeros.compacta .numerao{background:none;padding:0 18px 0 0}

.numerao{background:var(--jab-black);padding:22px 24px 20px}
.numerao .valor{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(34px,3.4vw,52px);color:var(--text-primary);
  /* Tabular: com o seletor de período trocando 62,5% por 8, o número não pode dançar. */
  font-variant-numeric:tabular-nums;
}
/* O número que sustenta a reunião inteira vem no acento da marca. Um só: se todos os
   três forem ácidos, nenhum é o principal e a página perde a hierarquia. */
.numerao.destaque .valor{color:var(--acento)}
.numerao .rotulo{
  margin-top:9px;font-size:14px;line-height:1.35;color:var(--text-secondary);max-width:26ch;
}
.numerao .nota{
  margin-top:7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-ghost);
}
.faixa-numeros.compacta .valor{font-size:clamp(26px,2.2vw,34px)}
.faixa-numeros.compacta .rotulo{font-size:13px;margin-top:6px}

.bloco-relatorio{
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  padding:24px;margin-bottom:22px;background:var(--jab-panel);
}
.bloco-relatorio h2{
  font-family:var(--font-display);font-size:19px;font-weight:750;letter-spacing:-.02em;
  margin:0 0 6px;color:var(--text-primary);
}
.bloco-relatorio .sub{margin-bottom:18px}
.bloco-relatorio .nota-bloco{margin:16px 0 0;font-size:12.5px}
.bloco-relatorio .tabela{margin-top:4px}
.colunas-relatorio{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.colunas-relatorio.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:1240px){.colunas-relatorio.tres{grid-template-columns:1fr 1fr}}
.colunas-relatorio > .bloco-relatorio{margin-bottom:22px}
@media (max-width:1000px){.colunas-relatorio{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- curva */
.curva{width:100%;height:auto;display:block;margin-top:4px}
.curva .grade-h{stroke:var(--border-subtle);stroke-width:1}
.curva .eixo{
  font-family:var(--font-mono);font-size:11px;fill:var(--text-ghost);letter-spacing:.04em;
}
.curva .area{fill:var(--acid-08);stroke:none}
.curva .linha{fill:none;stroke:var(--acento);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.curva .ponto{fill:var(--jab-black);stroke:var(--acento);stroke-width:2.5}
.curva .valor-ponto{
  font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.02em;
  fill:var(--text-primary);
}
.curva-vazia{
  border:1px dashed var(--border-strong);border-radius:var(--r-card);
  padding:34px 24px;text-align:center;
}
.curva-vazia p{margin:0;color:var(--text-muted);font-size:13.5px;max-width:52ch;
  margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- origem */
.barras-origem{display:flex;flex-direction:column;gap:15px}
.barra-origem .topo{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.barra-origem .rot{font-size:13.5px;color:var(--text-secondary)}
.barra-origem .n{margin-left:auto;font-size:14px;font-weight:600;color:var(--text-primary);
  font-variant-numeric:tabular-nums}
.barra-origem .trilho{height:8px;border-radius:999px;background:var(--jab-panel-hover);
  overflow:hidden}
.barra-origem .trilho i{display:block;height:100%;border-radius:999px;background:var(--acento)}
/* As três origens compartilham a paleta e se separam por PESO, não por matiz. Cor
   categórica aqui sugeriria que "equipe" é um estado ruim, e não é: é trabalho feito. */
.barra-origem.cliente .trilho i{opacity:.6}
.barra-origem.equipe .trilho i{opacity:.32}

/* ---------------------------------------------------------------- rodapé do documento */
.rodape-relatorio{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--border-subtle);
}
.rodape-relatorio p{
  margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--text-ghost);max-width:88ch;
}
.assinatura-relatorio{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-top:14px !important;
}

/* =========================================================================
   IMPRESSÃO / PDF.

   O PDF vai circular internamente na RBC e depois, anonimizado, vira material comercial.
   Ele não pode parecer print de tela: sai a interface inteira (barra lateral, chips,
   botões) e fica só o documento.

   Fundo claro na impressão mesmo com o console no escuro. Não é preferência: é que
   ninguém imprime 40 cm² de preto, e um PDF escuro no e-mail de outra pessoa abre com
   cara de erro. As cores viram tinta sobre papel, e o ácido da marca escurece para o tom
   que já usamos no tema claro, que é o que passa em contraste sobre branco.
   ========================================================================= */
@media print{
  @page{size:A4;margin:14mm}

  .lateral,.sem-impressao,.barra-lote,#toasts,.puxador-lateral,.overlay,
  .dica,.bolha-ajuda{display:none !important}
  html,body,#app,.conteudo,main{
    display:block !important;height:auto !important;overflow:visible !important;
    background:#FFFFFF !important;
  }
  main{padding:0 !important}
  .largura{max-width:none !important}

  /* Tinta sobre papel, independente do tema em que a tela estava. */
  .relatorio,.relatorio *{
    color:#100F0C !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .relatorio .numerao.destaque .valor{color:#56621A !important}
  .relatorio .kicker.acid{color:#56621A !important}
  .relatorio .sub,.relatorio .numerao .rotulo{color:#3B3A34 !important}
  .relatorio .numerao .nota,.rodape-relatorio p{color:#5A594F !important}

  .faixa-numeros{background:#DAD7CE !important;border-color:#DAD7CE !important}
  .numerao{background:#FFFFFF !important}
  .bloco-relatorio{
    background:#FFFFFF !important;border-color:#DAD7CE !important;
    /* Bloco cortado ao meio entre páginas é o defeito que mais denuncia PDF improvisado. */
    break-inside:avoid;page-break-inside:avoid;
  }
  .colunas-relatorio{break-inside:avoid;page-break-inside:avoid}
  .curva .linha{stroke:#56621A !important}
  .curva .area{fill:rgba(86,98,26,.14) !important}
  .curva .ponto{fill:#FFFFFF !important;stroke:#56621A !important}
  .curva .grade-h{stroke:#DAD7CE !important}
  .curva .eixo{fill:#5A594F !important}
  .barra-origem .trilho{background:#EDEAE1 !important}
  .barra-origem .trilho i{background:#56621A !important}
  .linha,.linha.cabecalho{background:transparent !important;border-color:#DAD7CE !important}
  .rodape-relatorio{border-top-color:#DAD7CE !important}

  /* A curva é o argumento: ela não pode nascer no rodapé de uma página. */
  .relatorio .bloco-relatorio:has(.curva){break-before:auto;page-break-before:auto}
}

/* =========================================================================
   PARAMETRIZAÇÃO, IMPORTAÇÃO E PRONTIDÃO DA CARTEIRA.
   ========================================================================= */

/* Prontidão: a única pergunta que importa antes de virar a competência com 140 clientes
   na carteira é "quantos ainda travam". Ela vem em corpo grande, à esquerda, e o que
   trava vem ao lado, já contado, porque a pergunta seguinte é sempre "por quê". */
.prontidao{
  display:grid;grid-template-columns:minmax(200px,240px) 1fr;gap:24px;
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  padding:20px 22px;margin-bottom:18px;background:var(--jab-panel);
}
@media (max-width:860px){.prontidao{grid-template-columns:1fr}}
.prontidao .numero{
  font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--acento);font-variant-numeric:tabular-nums;
}
.prontidao .rotulo{margin-top:7px;font-size:13px;color:var(--text-secondary)}
.prontidao .trilho{
  margin-top:12px;height:6px;border-radius:999px;background:var(--jab-panel-hover);
  overflow:hidden;
}
.prontidao .trilho i{display:block;height:100%;border-radius:999px;background:var(--acento)}
.prontidao .titulo-faltas{
  font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-ghost);margin-bottom:10px;
}
.prontidao .faltas{display:flex;flex-direction:column;justify-content:center}

/* Rótulo de natureza dentro do de-para: separa trinta linhas em quatro blocos com
   significado contábil, em vez de uma lista corrida onde nada se acha. Mesmo problema
   do `.secao-painel`: em 9px ele desaparecia justamente na tela em que a pessoa está
   procurando um item numa lista longa. */
.grupo-natureza{
  padding:18px 12px 8px;font-family:var(--font-display);font-size:13.5px;font-weight:700;
  letter-spacing:-.01em;color:var(--text-secondary);
  border-top:1px solid var(--border-subtle);
}
.tabela .grupo-natureza:first-of-type{border-top:0}

/* Lista embutida (sócios, contas bancárias): cada item numa linha, e a inclusão no pé,
   sempre visível. Um botão "adicionar" que abre outro painel dentro de um painel é
   exatamente o tipo de camada que faz ninguém preencher o cadastro. */
.lista-embutida{
  border:1px solid var(--border-subtle);border-radius:var(--r-card);padding:12px;
}
.item-embutido{
  display:flex;align-items:center;gap:10px;padding:8px 4px;
  border-bottom:1px solid var(--border-subtle);
}
.item-embutido:last-of-type{border-bottom:0}
.item-embutido .corpo{min-width:0;flex:1}
.item-embutido .principal{font-size:13.5px;color:var(--text-primary)}
.item-embutido .apoio{font-size:12px;color:var(--text-ghost);margin-top:2px}
.lista-embutida .nova-linha{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:10px;padding-top:11px;border-top:1px solid var(--border-subtle);
}
.lista-embutida .nova-linha input{min-width:90px}

/* Passos da importação. Cada um só aparece quando o anterior terminou: mostrar o
   mapeamento de colunas antes de haver arquivo seria um formulário vazio pedindo para
   ser ignorado. */
.passo-importacao:empty{display:none}
.ajuda-campo{margin-top:5px;font-size:12px;color:var(--text-ghost);line-height:1.4}
/* O exemplo tirado da própria planilha. É ele que responde "essa é mesmo a coluna
   certa?" sem precisar abrir o arquivo de novo do outro lado da tela. */
.eco-coluna{
  margin-top:6px;font-family:var(--font-mono);font-size:11.5px;
  color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.eco-coluna.faltando{color:var(--jab-alert)}

/* Importação: a prévia é o produto desta tela, então ela tem espaço e a lista de
   problemas vem antes da amostra do que vai entrar. */
.resultado-importacao{margin-top:16px}
.resultado-importacao .aviso{margin-bottom:12px}
.resultado-importacao ul{margin:8px 0 0;padding-left:18px}
.resultado-importacao li{font-size:12.5px;line-height:1.5;color:var(--text-body)}
.amostra-importacao{
  margin:0;padding:10px 12px;list-style:none;border-radius:var(--r-btn);
  background:var(--jab-black-alt);border:1px solid var(--border-subtle);
}
.amostra-importacao li{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);
  padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
textarea{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.6;resize:vertical;
  min-height:120px;
}

/* Link do portal: código legível e um botão de copiar do lado. O link é longo e vai ser
   colado no WhatsApp com frequência, então ele quebra em vez de estourar a caixa. */
.linha-copiavel{
  display:flex;align-items:flex-start;gap:8px;
  border:1px solid var(--border-subtle);border-radius:var(--r-btn);
  padding:9px 9px 9px 11px;background:var(--jab-black-alt);
}
.linha-copiavel code{
  flex:1;min-width:0;font-family:var(--font-mono);font-size:12px;line-height:1.5;
  color:var(--text-secondary);word-break:break-all;
}
.linha-copiavel .btn-icone{flex:0 0 30px;width:30px;height:30px;border-color:transparent}
.linha-copiavel .btn-icone:hover{border-color:var(--border-acid)}

/* Link com cara de botao de icone (baixar a remessa). O `<a>` precisa da mesma caixa do
   `<button>` ao lado, senao a linha de acoes fica com dois tamanhos diferentes. */
a.btn-icone{
  display:inline-grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border:1px solid transparent;border-radius:var(--r-btn);
  color:var(--text-secondary);text-decoration:none;transition:all .16s;
}
a.btn-icone:hover{border-color:var(--border-acid);color:var(--acento)}

/* ---------------------------------------------------------------- central de ajuda
   A bolha fica no canto inferior direito, que é onde a mão procura ajuda em qualquer
   software. Em repouso ela é só o ícone; ao passar o mouse ela revela a palavra. Assim
   ela é reconhecível para quem nunca viu e some do caminho de quem já entendeu.
   Fica ACIMA da barra lateral e ABAIXO do overlay, porque quando o painel abre ela
   não deve continuar boiando por cima dele. */
.bolha-ajuda{
  position:fixed;right:22px;bottom:22px;z-index:50;
  display:flex;align-items:center;gap:0;
  height:46px;padding:0 12px;border-radius:999px;
  background:var(--jab-panel);border:1px solid var(--border-strong);
  color:var(--text-secondary);cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  transition:gap .18s ease,padding .18s ease,color .18s ease,
             border-color .18s ease,transform .18s ease;
}
[data-tema="claro"] .bolha-ajuda{box-shadow:0 10px 28px rgba(16,15,12,.16)}
.bolha-ajuda .icone{width:22px;height:22px;flex:0 0 22px;stroke-width:1.6;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}
/* A palavra é revelada por largura, não por display: assim ela desliza para fora em vez
   de aparecer de estalo, e o botão continua com um alvo de clique honesto o tempo todo. */
.bolha-ajuda .rotulo{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  transition:max-width .2s ease;
}
.bolha-ajuda:hover,.bolha-ajuda:focus-visible{
  color:var(--text-primary);border-color:var(--acento);transform:translateY(-1px);gap:8px;
}
.bolha-ajuda:hover .rotulo,.bolha-ajuda:focus-visible .rotulo{max-width:70px}
body:has(.overlay) .bolha-ajuda{opacity:0;pointer-events:none;transition:opacity .16s ease}
@media (max-width:640px){.bolha-ajuda{right:14px;bottom:14px}}

.painel.ajuda{max-width:1000px;max-height:82vh}
.painel.ajuda > header{gap:16px}
.busca-ajuda{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  padding:0 11px;height:34px;width:250px;
  border:1px solid var(--border-subtle);border-radius:999px;background:var(--jab-black-alt);
}
.busca-ajuda:focus-within{border-color:var(--acento)}
.busca-ajuda .icone{width:16px;height:16px;flex:0 0 16px;color:var(--text-faint);stroke-width:1.7;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}
.busca-ajuda input{
  flex:1;min-width:0;background:transparent;border:0;padding:0;font-size:13.5px;
}
.busca-ajuda input:focus{outline:none;box-shadow:none}
.busca-ajuda input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}

/* O índice é navegação, não conteúdo: ele não rola junto. Some na busca, porque durante
   a busca a lista da esquerda estaria mentindo sobre o que sobrou à direita. */
.grade-ajuda{display:grid;grid-template-columns:200px 1fr;min-height:0;flex:1}
.indice-ajuda{
  border-right:1px solid var(--border-subtle);padding:14px 10px;
  display:flex;flex-direction:column;gap:2px;overflow:auto;
}
.item-indice{
  text-align:left;padding:8px 10px;border-radius:var(--r-btn);border:0;background:transparent;
  color:var(--text-secondary);font-size:13px;cursor:pointer;line-height:1.35;
}
.item-indice:hover{background:var(--jab-black-alt);color:var(--text-primary)}
.corpo-ajuda{padding:18px 22px 26px;overflow:auto;scroll-behavior:smooth}
@media (max-width:760px){
  .grade-ajuda{grid-template-columns:1fr}
  .indice-ajuda{display:none}
}

.secao-ajuda + .secao-ajuda{margin-top:26px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.secao-ajuda > h3{
  font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 8px;
  color:var(--text-primary);letter-spacing:-.01em;
}
.titulo-ajuda{
  font-family:var(--font-display);font-size:14px;font-weight:700;
  margin:22px 0 6px;color:var(--text-primary);
}

/* Pergunta fechada é uma linha; aberta, ganha o fundo para separar a resposta do resto.
   Sem isso, três respostas abertas viram um bloco único de texto. */
.perguntas{display:flex;flex-direction:column}
.pergunta{border-bottom:1px solid var(--border-subtle)}
.pergunta > summary{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:12px 2px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.4;
}
.pergunta > summary::-webkit-details-marker{display:none}
.pergunta > summary:hover{color:var(--acento)}
.pergunta > summary .chevron{
  width:18px;height:18px;flex:0 0 18px;color:var(--text-faint);transition:transform .18s ease;
  stroke-width:1.7;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
}
.pergunta[open] > summary .chevron{transform:rotate(180deg)}
.pergunta > p{margin:0 0 14px;padding-right:30px;font-size:13.5px;line-height:1.6}
.vazio-busca{text-align:center;padding:30px 0}

.caminhos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:4px}
@media (max-width:640px){.caminhos{grid-template-columns:1fr}}
.caminho{
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  padding:14px 15px;background:var(--jab-black-alt);
}
/* Os quatro destinos se separam por PESO do acento, não por matiz. Quatro cores
   diferentes sugeririam que um é bom e outro é ruim; eles são só diferentes. */
.caminho .titulo{
  font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--text-primary);
}
.caminho.manual{border-left:2px solid var(--acento)}
.caminho.tomado{border-left:2px solid rgba(214,241,78,.6)}
.caminho.prestado{border-left:2px solid rgba(214,241,78,.4)}
.caminho.folha{border-left:2px solid rgba(214,241,78,.25)}
[data-tema="claro"] .caminho.tomado{border-left-color:rgba(86,98,26,.6)}
[data-tema="claro"] .caminho.prestado{border-left-color:rgba(86,98,26,.4)}
[data-tema="claro"] .caminho.folha{border-left-color:rgba(86,98,26,.25)}
.caminho .quando{margin-top:7px;font-size:13px;color:var(--text-secondary);line-height:1.45}
.caminho .exemplos{margin-top:5px;font-size:12.5px;color:var(--text-ghost);line-height:1.45}
.caminho .destino{
  margin-top:9px;padding-top:8px;border-top:1px solid var(--border-subtle);
  font-size:12px;color:var(--text-faint);line-height:1.4;
}

.passo-fluxo{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.numero-passo{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--acid-14);color:var(--acento);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  display:grid;place-items:center;margin-top:1px;
}
.titulo-passo{font-size:14px;font-weight:650;color:var(--text-primary)}

/* ---------------------------------------------------------------- dica
   Mesma logica do balão da barra retraída: o balão é o INVERSO da página. `--jab-cream`
   e `--jab-black` trocam de lado entre os temas, então uma declaração só dá balão claro
   no escuro e balão escuro no claro.
   Aqui ele tem largura máxima e quebra de linha, porque estas explicações são frases
   inteiras e não rótulos: um balão de uma linha só teria 700px de largura. */
.dica{
  /* Nasce fora da tela: sem top/left escritos, `fixed` ancora no canto superior
     esquerdo, e a primeira dica da sessão piscava lá antes de ser posicionada. */
  position:fixed;top:-999px;left:-999px;z-index:80;max-width:320px;
  padding:9px 12px;border-radius:10px;
  background:var(--jab-cream);color:var(--jab-black);
  font-size:12.5px;line-height:1.45;font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.dica[data-abaixo]{transform:translateY(-4px)}
.dica[data-visivel]{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){
  .dica{transition:opacity .01s}
}

/* Janela para confirmar, desenhada. O botão armado já muda de cor e de ícone; o que
   faltava era mostrar que a chance de confirmar tem prazo. A barra esvazia em 4,5s,
   exatamente o tempo do temporizador que desarma o botão. */
.btn.armado,.btn-icone.armado{position:relative;overflow:hidden}
.btn.armado::after,.btn-icone.armado::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--jab-alert);transform-origin:left;
  animation:janela-confirma 4.5s linear forwards;
}
@keyframes janela-confirma{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .btn.armado::after,.btn-icone.armado::after{animation:none;opacity:.5}
  .btn-icone.armado{animation:none}
}