/* ⚠️ AVISO CORRIGIDO EM 07/08/2026 — o que estava aqui MENTIA e mandava criar
   duplicação. Dizia que a home tinha "uma CÓPIA INLINE deste arquivo (marker
   'INLINE de /ds-v5.css')" e que era preciso re-inlinar a cada edição. Não é
   verdade e não há esse marker: a home carrega `<link rel=stylesheet
   href="/ds-v5.css">` (index.html:115) como todas as outras. O único INLINE da
   home é o de `/fonts.css` (index.html:87), contra render-blocking — provável
   origem da confusão. Provado ao mover o CSS do modo foco para cá e REMOVER o
   da home: a home continuou recolhendo. Seguir o aviso antigo criaria na página
   de maior tráfego exatamente a segunda verdade que o CLAUDE.md proíbe.
   O `<style>` da home (index.html:138) é OVERRIDE de layout do herói/composer,
   não cópia — o que for de barra vive aqui. */
/* ==========================================================================
   Tomé — Design System v5 ("padrão GPT + vermelho suíço")
   Fonte de verdade: mockups/v5-redesign/_head.html (+ variantes) e
   docs/REDESIGN-V5-DESIGN-SYSTEM.md. Extraído para a Fase 1 do redesign.
   Claro default + tema escuro opcional (DS §9). A "mockstrip" preta dos
   protótipos NÃO faz parte do DS e não está aqui.
   Reutilizável pelos 3 shells (logado / anônimo / público) e páginas do app.
   ========================================================================== */

:root{--fundo:#ffffff;--lateral:#f7f6f4;--tinta:#0d0d0d;--mut:#6b6b6b;--sutil:#6e6e6e;--verm:#e3120b;--verm-texto:#c8100a;--ok:#1f7a45;--atencao:#8a6a12;--linha:#e8e6e2;--hover:#efedea;--cinza-bolha:#f2f0ed;--campo:#ffffff;--classe-fip:#7a3fa8;--classe-cri:#3b5bd6;--perigo-tinta:#ffffff;--skel-brilho:#f7f6f4;--switch-trilha:#d5d2cc;--switch-botao:#ffffff}
/* Escala de espaçamento (Padrão Visual §2) — respiro vertical sai SEMPRE de um --sp-*.
   Antes o ds-v5 não tinha token de espaço e cada tela improvisava (respiro 0/2/8/12/22/24px). */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:18px;--sp-5:24px;--sp-6:34px;--sp-7:52px}
/* --sutil #767676→#6e6e6e: 4,2:1 sobre --lateral reprovava WCAG AA; #6e6e6e dá 4,75:1.
   --verm-texto: vermelho pra TEXTO pequeno sobre --lateral (o --verm da marca dá 4,49:1,
   no limite reprovado; #c8100a dá 5,1:1 e é visualmente o mesmo vermelho). Marca/fundos
   continuam usando --verm.
   --classe-fip: violeta do badge de classe do FIP (ver .classe.fip). NÃO é cor de estado
   como --ok/--atencao — é identidade de classe de ativo, e por isso tem nome próprio: usar
   --atencao aqui colidiria com o `.badge.atencao` ("reapresentado"/"informe atrasado"), que
   aparece na MESMA tela (seo.ts:1282/1302/1345 e a tabela de lote do chat). 6,77:1 no claro. */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fundo)}
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--verm);outline-offset:2px;border-radius:4px}
body{background:var(--fundo);color:var(--tinta);font-family:'Inter','Inter fallback',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
/* controles herdam Inter — sem isto <button>/<input> caem em Arial (bug do .sb-nova; Padrão Visual §1) */
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}

.app{display:flex;flex:1;min-height:0}

/* SIDEBAR */
aside{width:262px;background:var(--lateral);border-right:1px solid var(--linha);display:flex;flex-direction:column;flex-shrink:0}
@media(max-width:860px){
  aside{position:fixed;left:0;top:0;bottom:0;z-index:120;transform:translateX(-105%);transition:transform .22s ease;box-shadow:8px 0 30px rgba(13,13,13,.15);width:290px}
  body.menu-aberto aside{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(13,13,13,.35);z-index:110;opacity:0;pointer-events:none;transition:opacity .22s}
  body.menu-aberto .scrim{opacity:1;pointer-events:auto}
}
.mtopo{display:none}
@media(max-width:860px){
  .mtopo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linha);background:var(--fundo)}
  .topo{background:var(--fundo)}
  .mtopo .hamb{background:none;border:1px solid var(--linha);border-radius:10px;width:38px;height:38px;font-size:16px;cursor:pointer;color:var(--tinta)}
  .mtopo .m-marca{font-family:'Inter Tight','Inter Tight fallback',sans-serif;font-weight:900;font-size:16px}
  .mtopo .m-marca i{font-style:normal;color:var(--verm)}
  .mtopo .m-nova{background:none;border:1px solid var(--linha);border-radius:10px;width:38px;height:38px;font-size:18px;color:var(--verm);cursor:pointer;font-weight:700}
}
.sb-topo{padding:14px 14px 6px}
.sb-marca{font-family:'Inter Tight','Inter Tight fallback',sans-serif;font-weight:900;font-size:17px;padding:4px 8px;display:inline-block}
.sb-marca i{font-style:normal;color:var(--verm)}
.sb-nova{margin:8px 12px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;padding:10px 12px;border-radius:10px;border:1px solid var(--linha);background:var(--fundo);cursor:pointer;text-align:left}
.sb-nova:hover{background:var(--hover)}
.sb-nova .mais{color:var(--verm);font-weight:700}
.sb-busca{margin:2px 12px 6px;font-size:13px;color:var(--sutil);padding:8px 12px}
.sb-secao{font-size:10.5px;font-weight:600;color:var(--sutil);text-transform:uppercase;letter-spacing:.06em;padding:12px 20px 5px}
.sb-lista{padding:0 8px}
.sb-lista.rola{flex:1;overflow-y:auto}
.sb-item{display:block;font-size:13.5px;padding:8px 12px;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item:hover,.sb-item.ativo{background:var(--hover)}
/* --- navegação lateral canônica: o bloco "Ferramentas" e o "Equipe" ---------
   Veio do auth-comum.css em 07/08/2026. Motivo: aquele arquivo não é carregado
   por /status, /supervisao nem pelas telas de admin, então lá o bloco canônico
   nascia sem estilo e a barra ficava na versão antiga. Este é.
   As mesmas declarações existem no <style> inline da home, que carrega depois
   e repete valores idênticos — a home não muda. */
.sb-rola{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 8px;min-height:0}
.sb-rola .sb-secao{padding:14px 12px 5px}
/* Faixa ANCORADA (Ferramentas + Equipe): irmã da área rolável, nunca rola com
   ela. `flex-shrink:0` é o que garante o ancoramento — sem isso o flex espreme
   a faixa quando o histórico cresce e o menu volta a sumir, que é exatamente o
   defeito que esta faixa existe para matar. `max-height` + scroll próprio é a
   rede de segurança para telas muito baixas: aí quem cede é o histórico, não o
   menu. Divisória sutil porque o contrato marca a fronteira entre os dois. */
.sb-ancorado{flex-shrink:0;padding:0 8px 2px;border-top:1px solid var(--linha);max-height:52vh;overflow-y:auto}
.sb-ancorado .sb-secao{padding:12px 12px 5px}
.sb-ferramentas .sb-item{display:flex;align-items:center;gap:11px;font-size:13.5px;padding:9px 12px;border-radius:10px;white-space:nowrap;color:var(--tinta);cursor:pointer;position:relative;text-decoration:none}
.sb-ferramentas .sb-item .ic{width:20px;flex-shrink:0;text-align:center;color:var(--mut);font-size:14px}
.sb-ferramentas .sb-item .lbl{overflow:hidden;text-overflow:ellipsis;flex:1}
.sb-ferramentas .sb-item:hover{background:var(--hover)}
.sb-ferramentas .sb-item.ativo{background:var(--hover);color:var(--tinta)}
.sb-ferramentas .sb-item.feat .ic{color:var(--verm)}
/* selo "Novo" (expira sozinho — quem manda é o config de novidades) */
.tag-novo{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.05em;font-weight:700;color:var(--verm-texto,var(--verm));
  border:1px solid var(--verm);border-radius:5px;padding:1px 5px;margin-left:auto;text-transform:uppercase;flex-shrink:0}
.sb-vazio{font-size:12.5px;color:var(--sutil);padding:8px 20px;line-height:1.5}
.sb-fixo{border-top:1px solid var(--linha);padding:10px 12px}
.sb-fixo a{display:flex;gap:10px;font-size:13px;color:var(--mut);padding:7px 10px;border-radius:10px}
.sb-fixo a:hover{background:var(--hover);color:var(--tinta)}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.sb-user:hover{background:var(--hover)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--fundo);display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0}
.sb-user .quem{font-size:13px;font-weight:500}
.sb-user .plano{font-size:11px;color:var(--sutil)}
/* --- MODO FOCO (barra recolhida em rail de 64px) -----------------------------
   Veio do <style> inline da home em 07/08/2026, pelo mesmo motivo que o bloco
   acima: o botão "⇤ recolher" é item da barra CANÔNICA (contrato do mockup,
   `mockups/navegacao/index.html`), mas o CSS vivia só na home — então recolher
   funcionava em 1 das 18 superfícies. Medido: o usuário recolhia, navegava, e a
   barra voltava a 262px em /relatorios, /conta e /status com `tome-rail-v5=1`
   ainda no localStorage. Preferência guardada e ignorada é pior que preferência
   inexistente. Aqui é a fonte única; a home perdeu a cópia no mesmo commit. */
:root{--sb-rail:64px}
aside{transition:width .2s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sb-colapsar{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border:none;background:none;color:var(--mut);border-radius:9px;cursor:pointer;font-size:17px;line-height:1}
.sb-colapsar:hover{background:var(--hover);color:var(--tinta)}
.sb-fixo .sb-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;white-space:nowrap;position:relative;color:var(--mut);width:100%;text-decoration:none}
.sb-fixo .sb-item .ic{width:20px;flex-shrink:0;text-align:center;font-size:14px}
.sb-fixo .sb-item .lbl{overflow:hidden;text-overflow:ellipsis;flex:1}
.sb-fixo .sb-item:hover{background:var(--hover);color:var(--tinta)}
.sb-user{position:relative}
.sb-user .col{overflow:hidden;min-width:0}
/* "Falar no WhatsApp" — o wa-cta.js injeta em TODA superfície de app, não só na
   home, então estas regras vieram junto: sem elas o rótulo do CTA vazava do
   rail de 64px nas 17 telas que passaram a recolher. */
.sb-fixo #waCtaLink{align-items:center;gap:11px;padding:9px 12px;border-radius:10px}
.sb-fixo #waCtaLink>span:first-child{width:20px;flex-shrink:0;text-align:center}
.sb-fixo #waCtaLink>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O rail é EXCLUSIVO do desktop: abaixo de 861px a barra é gaveta cheia, por
   decisão de design. Antes isto era um bloco global + uma media query que
   desfazia regra por regra — e desfazia SÓ `display` e `justify-content`. O
   `width:40px;height:40px;padding:0` do "+ Nova conversa" escapava da reversão:
   quem recolhia no desktop e abria a gaveta no 360 via o botão esmagado num
   quadrado com o rótulo transbordando. Reversão parcial é dívida silenciosa;
   aqui a regra simplesmente NÃO EXISTE no mobile e não há o que reverter. */
@media(min-width:861px){
  body.rail aside{width:var(--sb-rail)}
  body.rail .sb-marca-full,body.rail .sb-nova .txt,body.rail .sb-busca input,
  body.rail .sb-rola .sb-secao,body.rail .sb-ancorado .sb-secao,
  body.rail .sb-ferramentas .sb-item .lbl,body.rail .sb-ferramentas .sb-item .tag-novo,
  body.rail #sbHistorico,body.rail .sb-fixo .sb-item .lbl,body.rail .sb-fixo a .lbl{display:none}
  /* Rodapé de perfil no rail: esconde TUDO que não é o avatar, mirando o filho
     direto — não `.col`, não `.quem`. Duas razões, ambas medidas: o markup das
     telas montadas envolve nome+plano num <span> SEM classe (só a home usa
     `.col`), e o `#sbNome` carrega `style="display:block"` INLINE, que ganha de
     qualquer regra de classe. Mirando `.quem`, o nome vazava 14px para fora do
     rail de 64px em todas as 11 telas montadas — invisível ao inventário, que lê
     texto, e visível a olho nu. */
  body.rail .sb-user>*:not(.avatar){display:none}
  body.rail .sb-head,body.rail .sb-topo{justify-content:center;padding:14px 0 6px}
  body.rail .sb-marca{display:none}
  body.rail .sb-colapsar{margin:0 auto}
  body.rail .sb-nova{justify-content:center;margin:10px auto 4px;width:40px;height:40px;padding:0;gap:0}
  body.rail .sb-busca{justify-content:center;margin:4px auto 2px;width:40px;padding:9px 0;cursor:pointer}
  body.rail .sb-rola{padding:0 12px}
  body.rail .sb-ancorado{padding:0 12px 2px;max-height:none;border-top:none}
  body.rail .sb-ferramentas .sb-item{justify-content:center;padding:10px 0}
  body.rail .sb-ferramentas .sb-item .ic{width:auto}
  body.rail .sb-fixo{padding:8px 12px 10px}
  body.rail .sb-fixo .sb-item,body.rail .sb-fixo a{justify-content:center;padding:10px 0}
  body.rail .sb-fixo .sb-item .ic{width:auto}
  body.rail .sb-user{justify-content:center;padding:8px 0}
  body.rail .sb-user .avatar{margin:0}
  /* Dois moradores do shell ANÔNIMO que não cabem em 64px e que o contrato do
     mockup não lista como itens da barra ("NÃO estão na barra: ◐ Tema · ⇥ Sair").
     Vazavam por cima do conteúdo no rail — o card por inteiro, e o "claro" do
     tema, cujo rótulo não dá para separar do ícone por seletor (ambos vivem no
     MESMO nó de texto: `◐&nbsp; Tema: <b>claro</b>`). No rail somem; expandir a
     barra devolve os dois. Só apareceu ao validar PROD anônimo: o QA local
     rodava logado, e logado nem o card nem o tema existem na barra.
     O card tem DOIS nomes conforme quem o montou: `.sb-anon` no shell estático e
     `#av2-card-sb` quando o auth-comum.js o injeta — mirar só o primeiro deixou
     o texto vazando em /status, / e /sobre. Os dois entram. */
  body.rail .sb-anon,body.rail #av2-card-sb,body.rail .tema-btn{display:none}
  body.rail #waCtaLink{justify-content:center;padding:10px 0;position:relative}
  body.rail #waCtaLink>span:first-child{width:auto}
  body.rail #waCtaLink>span:last-child{display:none}
  /* tooltip no rail — o rótulo some, o data-tip o devolve no hover */
  body.rail .sb-ferramentas .sb-item[data-tip]:hover::after,body.rail .sb-nova[data-tip]:hover::after,
  body.rail .sb-fixo .sb-item[data-tip]:hover::after,body.rail .sb-user[data-tip]:hover::after{
    content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--tinta);color:var(--fundo);font-size:12px;font-weight:500;padding:5px 10px;border-radius:7px;
    white-space:nowrap;z-index:60;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .sb-nova[data-tip],.sb-busca[data-tip]{position:relative}
}
@media(max-width:860px){
  .sb-colapsar{display:none}   /* gaveta cheia nao recolhe */
}
/* --- BARRINHA de proporção -------------------------------------------------
   Promovida do <style> inline do status.html (linhas 151-152) em 07/08/2026,
   quando a carteira precisou da mesma barra. Já existiam DUAS implementações da
   mesma ideia no repo — esta e a `.mdia .barra` segmentada do admin.html — e
   criar a terceira é exatamente o `X_v2` que o CLAUDE.md §🧬 proíbe. O
   status.html continua funcionando: as declarações dele são idênticas e ficam
   por cima; quando alguém encostar naquele arquivo, apaga de lá.

   Sem semântica de COR por padrão: numa carteira, pintar de vermelho a barra de
   uma posição grande é dizer que concentração é ruim — conselho de
   investimento, que o Tomé não dá. Quem quiser cor passa `--c` explicitamente,
   como o status.html faz para saúde de ingestão (onde cor É o significado). */
.barrinha{height:4px;border-radius:99px;background:var(--linha);overflow:hidden;max-width:150px}
.barrinha i{display:block;height:100%;background:var(--c,var(--mut));border-radius:99px}

/* card do shell anônimo ("Suas conversas ficam aqui") */
.sb-anon{border:1px solid var(--linha);border-radius:12px;padding:14px;background:var(--fundo)}
.sb-anon .t{font-size:13px;font-weight:600;margin-bottom:4px}
.sb-anon .d{font-size:12px;color:var(--mut);margin-bottom:10px}
.sb-anon .entrar{display:block;text-align:center;background:var(--tinta);color:var(--fundo);font-size:12.5px;font-weight:600;padding:9px;border-radius:10px}
.sb-anon .criar{display:block;text-align:center;font-size:12px;color:var(--verm);font-weight:600;margin-top:8px}

/* MAIN */
main{flex:1;display:flex;flex-direction:column;min-width:0}
.topo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;font-size:13px;color:var(--mut);border-bottom:1px solid var(--linha);flex-shrink:0}
.topo .titulo{font-weight:500;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo .modelo{font-weight:500;color:var(--tinta)}
.topo .modelo .v{color:var(--sutil);font-weight:400}
/* `align-items:center` (08/08): sem ele o default `stretch` estica cada filho até a
   altura da linha, e o TEXTO de um `<a>` fica preso no topo da caixa esticada — medido
   em prod: o "Sobre" da home subia 5,8px do centro da própria caixa enquanto o botão
   ao lado (que tem `align-items:center` interno) ficava a -0,8px. Espalhamento visual
   de 6px. Contadas 19 páginas com `.topo .direita`: 12 têm um filho só (inócuo —
   verificado em 8 delas em produção, espalhamento 0px antes e depois) e 7 têm dois ou
   mais. Dessas 7, o defeito era visível nas 4 que misturam alturas (home: link +
   botão; admin/admin-esteira/admin-raiox: span + a + button); em fundo.html e
   liqi.html os filhos são `<a>` idênticos e nada muda. ⚠️ conta.html tem badge
   (`.sino-badge`, inline-block) dentro do 1º `<a>`: só reproduzível logado e com
   alerta pendente — inspecionado no markup, NÃO medido em tela. */
.topo .direita{display:flex;gap:14px;flex-shrink:0;align-items:center}
.topo .direita a:hover{color:var(--tinta)}

.rolagem{flex:1;overflow-y:auto}
.fluxo{max-width:760px;margin:0 auto;padding:28px 24px 30px}
/* FRAME PROGRESSIVO — escada canônica do docs/PADRAO-VISUAL-TOME.md §1
   (900 → 1240 → 1400 → 1880). Estava travado em 980px: numa tela de 2560/3456
   a página inteira ocupava um terço e o resto ficava vazio, que é a "regra de
   ouro" que o padrão criou justamente para matar. As páginas que já traziam a
   escada no próprio <style> (carteira, workspace, conta, relatórios) continuam
   iguais — elas sobrescrevem com os MESMOS valores. */
.pagina{max-width:900px;width:100%;margin:0 auto;padding:34px 28px 60px}
@media(min-width:1180px){ .pagina{max-width:1240px} }
@media(min-width:1440px){ .pagina{max-width:1400px} }
@media(min-width:2000px){ .pagina{max-width:1880px} }
.pagina.estreita{max-width:760px}

/* tipografia de página */
h1.pg{font-family:'Inter Tight','Inter Tight fallback',sans-serif;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.025em}
h1.pg i{font-style:normal;color:var(--verm)}
/* --------------------------------------------------------------------------
   PAINEL LOGADO — o que as 4 telas de trabalho compartilham (10/08/2026)
   O Daniel: "acessei carteira, relatórios, o que acompanho e workspace logado —
   são todas diferentes e fora de um padrão".

   MEDIDO em 3456 antes de mexer: o container (1880) e o conteúdo (1824) JÁ
   estavam alinhados nas quatro. O que divergia era o SUBTÍTULO — 1700px na
   carteira (var --texto-largo), 871px no workspace (92ch) e 1824px nos alertas
   (sem limite) — e a fonte/tamanho do h1 em /relatorios.

   ⚠️ CORREÇÃO DE 11/08/2026 — a linha que dizia "os tetos de 1100px do
   workspace FICAM" estava ERRADA, e o erro era de MEDIÇÃO: eu medi `#ws-corpo`
   (o container externo, 1824px) e concluí que estava alinhado, sem nunca medir
   o `.ws-pane` DENTRO dele, que parava em 1.100. O Daniel abriu a tela e viu na
   hora o que a medição não pegou: três larguras empilhadas (cabeçalho 1400,
   abas 1100, rodapé 700).
   A régua velha também não podia pegar: ela comparava o TOPO de uma tela com o
   TOPO da outra, e nunca desceu a página. A que desce é
   `scripts/bateria_workspace/qa_vertical.mjs`.
   Os sintomas que o QA de 06/08 mediu eram reais — o remédio é que estava na
   camada errada. Regra da casa agora: `docs/PADRAO-LARGURA-TOME.md`.
   -------------------------------------------------------------------------- */
:root{ --texto-largo:1100px }
@media(min-width:1440px){ :root{ --texto-largo:1400px } }
@media(min-width:2000px){ :root{ --texto-largo:1700px } }

/* UMA largura de subtítulo para as quatro telas. */
.pg-sub{margin-top:10px;margin-bottom:var(--sp-4);font-size:15px;color:var(--mut);max-width:var(--texto-largo)}

/* Botão desabilitado tem de PARECER desabilitado. O `.botao` do ds-v5 não
   tinha estado :disabled — mas `.bt` (carteira) e `.btn` (relatorios), que
   estão sendo substituídos por ele, tinham. Sem isto, `ct-seguir-todos` e
   `#acoes-topo` ficariam idênticos a um botão ativo. */
.botao:disabled,.botao[disabled]{opacity:.55;cursor:default}
.botao:disabled:hover,.botao[disabled]:hover{background:var(--tinta)}

/* Rodapé da ressalva — em SEIS telas: alertas, carteira, conta, como-funciona,
   relatorios e workspace.
   O nó acumulava dois papéis contraditórios: `border-top` (aresta, tem de
   acompanhar o container) e `max-width:92ch` (medida de leitura, é do texto).
   Com os dois juntos, a régua morria em ~700px enquanto a página ia a 1.880.
   Separados: a borda acompanha, a prosa tem medida. A frase das telas de painel
   tem ~99 caracteres (~600px a 12px) e continua numa linha só — nenhuma quebra
   muda. Já /como-funciona traz <p> de ~185 caracteres, e é ele que o
   `.rodape p` protege.
   ⚠️ /relatorios é a exceção estrutural: lá o nó é IRMÃO do `.wrap`, filho
   direto de `.rolagem`, sem margem automática — sem o teto ele sangraria a tela
   inteira e começaria ~240px à esquerda do resto. O alinhamento dele está no
   <style> local daquela página, não aqui. */
.rodape{margin-top:40px;padding-top:18px;border-top:1px solid var(--linha);
  font-size:12px;color:var(--sutil);line-height:1.6;text-wrap:pretty}
.rodape p{max-width:78ch}
/* `/conta` traz `<div class="rodape" id="rodape"></div>` VAZIO (conta.html:405)
   e nada no código o preenche — conferido em `frontend/*.js` e no backend. Com
   `border-top` e a margem, isso desenha um traço solto com ~64px de vão e
   nenhum texto, e alargar a régua só o tornaria mais visível. Esconder quando
   vazio é melhor que apagar o nó: se algum fluxo passar a preenchê-lo, ele
   reaparece sozinho. */
.rodape:empty{display:none}

/* Estado vazio, carregando e erro — um tratamento para os 16 de hoje.
   `.sutil` é para sub-lista dentro do painel, onde o card cheio pesaria. */
/* `margin-inline:auto`: a caixa tem BORDA e teto menor que o container, então
   sem centragem ela encosta à esquerda e a folga toda fica de um lado — lê como
   corte, não como cartão. Teto sem centragem é o que produz degrau; teto COM
   centragem é elemento de design. (A variante `.sutil` não entra: ela não tem
   borda nem fundo, e é alinhada à esquerda de propósito.) */
/* 11/08/2026 — a MOLDURA segue o container; quem tem medida de leitura é o
   TEXTO dentro dela (`.pn-vazio p`, abaixo). Antes o cartão inteiro era capado
   em --texto-largo e centrado: em 3456 ficava 62px recuado de cada lado, e o
   olho lia um bloco que "para antes do fim" — exatamente a queixa que esta leva
   corrige. Teto na borda é corte; teto no texto é tipografia. */
.pn-vazio{border:1px solid var(--linha);border-radius:16px;background:var(--campo);
  padding:36px 30px;text-align:center}
.pn-vazio .fio{width:9px;height:9px;background:var(--verm);transform:rotate(45deg);margin:0 auto 16px}
.pn-vazio h3{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.pn-vazio p{font-size:14px;color:var(--mut);margin:0 auto 18px;line-height:1.6;max-width:56ch}
.pn-vazio.sutil{border:0;background:none;padding:16px 0;text-align:left}
.pn-vazio.sutil .fio{display:none}
.pn-vazio.sutil h3{font-size:14px;margin-bottom:4px}
.pn-vazio.sutil p{font-size:13px;color:var(--mut);margin:0;max-width:64ch}
.pn-vazio.erro{border-color:var(--verm)}
.pn-carregando{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13.5px;padding:18px 0}
.pn-carregando .fio{width:9px;height:9px;background:var(--verm);transform:rotate(45deg);animation:pnPulsa 1s ease-in-out infinite}
@keyframes pnPulsa{0%,100%{opacity:.25}50%{opacity:1}}
h2.sec{font-size:17px;font-weight:700;margin:34px 0 10px;letter-spacing:-.01em}
.texto{font-size:15px;line-height:1.65}
.texto p{margin-bottom:12px}

/* chat */
.msg-user{display:flex;justify-content:flex-end;margin:18px 0}
.msg-user .bolha{background:var(--cinza-bolha);border-radius:18px;padding:12px 18px;font-size:15px;max-width:82%}
.msg-user .bolha.mono-lista{font-family:'IBM Plex Mono',monospace;font-size:12.5px;white-space:pre-line;line-height:1.7}
.msg-tome{margin:20px 0 28px}
.msg-tome .corpo{font-size:15.5px;line-height:1.65}
.msg-tome .corpo p{margin-bottom:12px}
.msg-tome .corpo b{font-weight:600}
/* respostas longas: estrutura interna do .corpo */
.msg-tome .corpo h3{font-size:16.5px;font-weight:700;margin:22px 0 8px;letter-spacing:-.01em}
.msg-tome .corpo h4{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sutil);margin:16px 0 6px}
.msg-tome .corpo ul,.msg-tome .corpo ol{margin:8px 0 12px 20px;display:flex;flex-direction:column;gap:5px}
.msg-tome .corpo li{font-size:14.5px;line-height:1.55}
.msg-tome .corpo hr{border:none;border-top:1px solid var(--linha);margin:20px 0}
.msg-tome .corpo .ancora-topo{position:sticky;top:0;background:var(--fundo);padding:6px 0;z-index:5}
/* texto estreito, dados largos: tabela pode estourar a coluna do chat em telas grandes */
@media(min-width:1180px){
  .msg-tome .rolagem-x{margin-left:-120px;margin-right:-120px}
  .msg-tome .cartao-fundo{margin-left:-60px;margin-right:-60px}
}

.log-progresso{font-size:12.5px;font-family:'IBM Plex Mono',monospace;color:var(--mut);border:1px solid var(--linha);border-radius:14px;padding:14px 18px;line-height:2;margin:8px 0}
.log-progresso .feito::before{content:"✓  ";color:var(--ok)}
.log-progresso .rodando::before{content:"●  ";color:var(--verm)}
.log-progresso .rodando{color:var(--tinta)}
.pulsar{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verm);animation:pulsar 1.2s ease infinite;margin-left:6px;vertical-align:middle}
@keyframes pulsar{50%{opacity:.25}}

.cartao-fundo{border:1px solid var(--linha);border-radius:14px;overflow:hidden;margin:14px 0;box-shadow:0 2px 10px rgba(13,13,13,.04);background:var(--campo)}
.cartao-fundo .cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.cartao-fundo .cab .nome{font-weight:600;font-size:14.5px}
.cartao-fundo .cab .cnpj{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sutil)}
.classe{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--verm);border:1px solid currentColor;border-radius:6px;padding:2px 8px;text-transform:uppercase;flex-shrink:0}
/* Uma cor POR CLASSE — o badge só cumpre a função dele (distinguir) se duas classes
   nunca dividirem a mesma cor. FIP não tinha modificador: caía no `color:var(--verm)`
   do `.classe`, ou seja, IDÊNTICO ao FIDC (4.318 FIPs contra 3.137 FIDCs na base).
   Violeta é o único vazio do círculo: vermelho=FIDC, verde=FII, cinza=555, azul=CRI/CRA.
   Vem de `--classe-fip` (valor por tema, como --ok/--atencao) e não de hex literal, pra
   não repetir o `.cri`, que é #3b5bd6 fixo e MEDIDO em 2,99:1 sobre o `--campo` escuro
   (#1a1b20) — reprova WCAG AA. O violeta dá 6,77:1 no claro e 6,51:1 no escuro. */
.classe.fii{color:var(--ok)}.classe.c555{color:var(--mut)}.classe.cri{color:var(--classe-cri)}.classe.fip{color:var(--classe-fip)}.classe.cia{color:var(--tinta)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:12px 16px;border-right:1px solid var(--linha)}
.kpi:nth-child(4n){border-right:none}
@media(max-width:700px){.kpi:nth-child(2n){border-right:none}.kpi:nth-child(-n+2){border-bottom:1px solid var(--linha)}}
.kpi .l{font-size:11px;color:var(--sutil)}
.kpi .v{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;margin-top:2px}
.kpi .v.neg{color:var(--verm)}.kpi .v.ok{color:var(--ok)}

.rolagem-x{overflow-x:auto;margin:10px 0;background:linear-gradient(to right,var(--campo) 30%,transparent),linear-gradient(to left,var(--campo) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(13,13,13,.16),transparent),radial-gradient(farthest-side at 100% 50%,rgba(13,13,13,.16),transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
table{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.rolagem-x table{margin:0;min-width:520px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--sutil);text-align:left;padding:9px 14px;border-bottom:1px solid var(--linha);background:var(--lateral);font-weight:600}
td{padding:9px 14px;border-bottom:1px solid var(--linha)}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:12.5px;white-space:nowrap}
.sobe{color:var(--verm);font-weight:600}
.desce{color:var(--ok)}

.fonte-pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mut);border:1px solid var(--linha);border-radius:999px;padding:5px 12px;margin-top:6px;flex-wrap:wrap}
.fonte-pill b{color:var(--tinta);font-weight:500;white-space:nowrap}
.acoes-msg{display:flex;gap:4px;margin-top:12px;color:var(--sutil);font-size:13px;flex-wrap:wrap}
.acoes-msg span{padding:5px 8px;border-radius:8px;cursor:pointer}
.acoes-msg span:hover{background:var(--hover);color:var(--tinta)}
.followups{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.followups a{font-size:12.5px;color:var(--mut);border:1px solid var(--linha);border-radius:999px;padding:7px 14px}
.followups a:hover{background:var(--hover);color:var(--tinta)}

/* candidatos de desambiguação */
.candidatos{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.candidato{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--linha);border-radius:12px;padding:12px 16px;cursor:pointer;flex-wrap:wrap}
.candidato:hover{background:var(--hover);border-color:#d5d2cc}
.candidato .nm{font-weight:500;font-size:14px}
.candidato .dt{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sutil)}
.candidato .ir{color:var(--verm);font-weight:600;font-size:13px}

/* avisos e banners */
.aviso-bloco{border:1px solid var(--linha);border-left:4px solid var(--verm);border-radius:10px;padding:14px 18px;font-size:14px;margin:14px 0;background:var(--campo)}
.aviso-bloco.suave{border-left-color:var(--sutil)}
.aviso-bloco b{font-weight:600}
.banner-gate{border:1px solid var(--linha);border-radius:16px;padding:20px 22px;margin:16px 0;background:var(--lateral);text-align:center}
.banner-gate h3{font-size:16px;font-weight:700;margin-bottom:6px}
.banner-gate p{font-size:13.5px;color:var(--mut);max-width:48ch;margin:0 auto 12px}

/* composer */
.pe{padding:8px 24px 14px;background:linear-gradient(to top,var(--fundo) 72%,transparent);flex-shrink:0}
.composer{max-width:760px;margin:0 auto}
.composer .caixa{background:var(--campo);border:1px solid var(--linha);border-radius:26px;box-shadow:0 4px 24px rgba(13,13,13,.07);padding:12px 14px 8px}
.composer .caixa:focus-within{border-color:var(--verm)}
.composer textarea{width:100%;border:none;outline:none;resize:none;font-family:'Inter',sans-serif;font-size:15px;height:44px;background:transparent;color:var(--tinta)}
.composer textarea::placeholder{color:var(--sutil)}
.composer .acoes{display:flex;justify-content:space-between;align-items:center;gap:8px}
.composer .esq{display:flex;gap:6px;flex-wrap:wrap}
.ferramenta{font-size:12px;color:var(--mut);border:1px solid var(--linha);border-radius:999px;padding:5px 12px;display:inline-flex;gap:6px;align-items:center;cursor:pointer;background:transparent;font-family:'Inter',sans-serif}
.ferramenta:hover{background:var(--hover);color:var(--tinta)}
.enviar{background:var(--tinta);color:var(--fundo);border:none;width:34px;height:34px;border-radius:50%;font-size:14px;cursor:pointer;flex-shrink:0}
.enviar:hover{background:var(--verm)}
.enviar:disabled{background:var(--linha);color:var(--sutil);cursor:default}
.composer .aviso{text-align:center;font-size:11px;color:var(--sutil);margin-top:8px}

/* componentes de página */
.botao{display:inline-block;background:var(--tinta);color:var(--fundo);font-size:13.5px;font-weight:600;padding:11px 22px;border-radius:12px;border:none;cursor:pointer}
.botao:hover{background:var(--verm)}
.botao.fantasma{background:transparent;color:var(--tinta);border:1px solid var(--linha)}
.botao.fantasma:hover{background:var(--hover);color:var(--tinta)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:16px 0}
.card{border:1px solid var(--linha);border-radius:14px;padding:16px 18px;background:var(--campo)}
.card:hover{box-shadow:0 4px 18px rgba(13,13,13,.06)}
.card .cl-linha{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.card h3{font-size:14.5px;font-weight:600;line-height:1.4}
.card .meta{font-size:12px;color:var(--sutil);margin-top:8px;display:flex;justify-content:space-between;align-items:center}
.card .meta .ir{color:var(--verm);font-weight:600}
.badge{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:6px;border:1px solid;white-space:nowrap;display:inline-block}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.alerta{color:var(--verm);border-color:var(--verm)}
.badge.atencao{color:var(--atencao);border-color:var(--atencao)}
.badge.neutro{color:var(--sutil);border-color:var(--linha)}
.pill-num{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--mut);border:1px solid var(--linha);border-radius:999px;padding:5px 13px}
.pill-num b{font-family:'IBM Plex Mono',monospace;color:var(--tinta)}
.linha-pills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.dropzone{border:2px dashed var(--linha);border-radius:16px;padding:44px 22px;text-align:center;margin:18px 0}
.dropzone b{color:var(--verm)}
.dropzone .mini{font-size:12px;color:var(--sutil);margin-top:6px;font-family:'IBM Plex Mono',monospace}
.form-campo{margin:14px 0}
.form-campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form-campo input{width:100%;border:1px solid var(--linha);border-radius:12px;padding:12px 16px;font-size:14.5px;font-family:'Inter',sans-serif;outline:none;background:var(--campo);color:var(--tinta)}
.form-campo input:focus{border-color:var(--tinta)}
.divisor-ou{display:flex;align-items:center;gap:12px;color:var(--sutil);font-size:12px;margin:18px 0}
.divisor-ou::before,.divisor-ou::after{content:"";flex:1;height:1px;background:var(--linha)}
/* modal/dialog (novo padrão v5) */
.modal-scrim{position:fixed;inset:0;background:rgba(13,13,13,.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-scrim>.modal{background:var(--campo);border-radius:18px;box-shadow:0 24px 80px rgba(13,13,13,.25);max-width:480px;width:100%;padding:24px}
/* --- MODAL MAIS ALTO QUE A TELA -------------------------------------------
   Veio do workspace.css em 07/08/2026, e o lugar dele é AQUI: o defeito é do
   componente, não da feature. As regras acima fazem o scrim `position:fixed` +
   `align-items:center` sem rolagem — então qualquer modal mais alto que a
   viewport nasce com o topo cortado E o rodapé fora da tela.
   Medido em 360×800 numa página que NÃO carregava o workspace.css: um modal de
   1593px nasceu com o topo em **y=-396** e o botão de confirmar abaixo da
   dobra, sem gesto nenhum para alcançar nenhum dos dois. Ilegível em cima,
   inclicável embaixo.
   `overflow-y:auto` + `align-items:flex-start` devolvem a rolagem (com
   `center` puro o topo fica inalcançável ao rolar — bug clássico do flex
   centrado com overflow) e `margin:auto` mantém o centro quando cabe.
   O teto de altura resolve a LEITURA: o modal nunca passa da tela, o corpo
   rola por dentro e o rodapé de ações fica grudado no fim, sempre visível. */
.modal-scrim{overflow-y:auto;align-items:flex-start}
.modal-scrim>.modal{margin:auto;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:0}
/* o respiro de baixo migra do modal para o rodapé: sem isso o `sticky` para
   24px antes do fim e o conteúdo passa por baixo dele. O visual fica idêntico. */
.modal-scrim>.modal .m-acoes{position:sticky;bottom:0;background:var(--campo);padding:12px 0 24px;margin-top:6px}
.modal-scrim>.modal h3{font-size:17px;font-weight:700;margin-bottom:6px}
.modal-scrim>.modal .m-sub{font-size:13.5px;color:var(--mut);margin-bottom:16px}
.modal-scrim>.modal .m-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.modal-scrim>.modal .campo-link{display:flex;gap:8px;align-items:center;border:1px solid var(--linha);border-radius:12px;padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mut)}
.modal-scrim>.modal .campo-link b{color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.botao.perigo{background:var(--verm);color:var(--perigo-tinta)}
.botao.perigo:hover{background:#b30d08}
/* switch */
.switch{width:40px;height:24px;border-radius:999px;background:var(--switch-trilha);position:relative;cursor:pointer;border:none;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--sutil)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--switch-botao);transition:.15s}
.switch.on{background:var(--ok)}
.switch.on::after{left:19px}
/* skeleton */
.skel{background:linear-gradient(90deg,var(--hover) 25%,var(--skel-brilho) 37%,var(--hover) 63%);background-size:400% 100%;animation:skel 1.3s ease infinite;border-radius:8px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.pulsar,.skel{animation:none}}
/* banner de sistema */
.banner-sistema{background:#fdf6e3;border-bottom:1px solid #ecdfb8;color:#6b5a1a;font-size:12.5px;padding:8px 20px;text-align:center;flex-shrink:0}
.banner-sistema.erro{background:#fdecea;border-color:#f5c6c2;color:#8f1d18}
.card .rolagem-x table{min-width:0}
.so-mobile{display:none}
@media(max-width:700px){.so-mobile{display:block}.so-desktop{display:none}}

/* ===== Tema escuro (DS §9) — default claro; escuro opcional de 1ª classe ===== */
[data-theme="escuro"]{
  --fundo:#121316; --lateral:#191a1e; --campo:#1a1b20; --tinta:#ebe9e4; --mut:#a8a49c;
  --sutil:#8b8880; --verm:#ff5b57; --verm-texto:#ff5b57; --ok:#4cc07d; --atencao:#d5a83c; --linha:#26272c;
  --hover:#22232a; --cinza-bolha:#1f2026;
  --classe-fip:#c08ae0; /* violeta claro do badge FIP — 6,51:1 sobre o --campo escuro (#1a1b20) */
  /* Os 3 pares abaixo entraram em 27/09/2026 consertando bugs de tema escuro MEDIDOS em
     produção com navegador real (Playwright, 1440x900, deviceScaleFactor 2):
     --classe-cri   : #3b5bd6 dava 2,99:1 aqui e REPROVAVA AA. É o badge de CRI/CRA, a classe
                      de ativo mais frequente do público. #7fa9f0 dá 7,23:1.
     --perigo-tinta : o .botao.perigo tinha `color:#fff` LITERAL sobre um --verm que INVERTE
                      por tema — 4,82:1 no claro e 3,05:1 no escuro. O botão que apaga coisa
                      era o ilegível. Tinta escura sobre o vermelho claro: 6,09:1.
     --skel-brilho  : o shimmer tinha #f7f6f4 fixo, que no escuro dava 14,49:1 contra o
                      --hover — uma faixa quase branca varrendo fundo escuro em loop de 1,3s.
                      #34353d dá 1,28:1: sutil, que é o que um shimmer deve ser.
     A regra que os três violavam está no §A4 de docs/DESIGN-SYSTEM-O-QUE-NAO-FAZER.md:
     dentro de regra que usa var(--token), todo valor irmão TAMBÉM é token. */
  --classe-cri:#7fa9f0; --perigo-tinta:#121316; --skel-brilho:#34353d;
  /* 4º bug de tema: o .switch tinha trilha #d5d2cc e botão #fff LITERAIS, então no
     escuro era um interruptor de tema claro dentro de um painel escuro. E no CLARO a
     trilha dava 1,51:1 sobre o fundo — abaixo dos 3:1 que WCAG 1.4.11 pede para o
     LIMITE de um controle: o switch desligado quase não tinha forma.
     A borda resolve o limite (var(--sutil): 5,1:1 no claro, 4,86:1 no escuro) e os
     tokens resolvem o tema. Trilha escura sobre campo escuro NÃO alcança 3:1 sem
     parecer ligada — por isso o limite vai na borda, que é o que a norma pede. */
  --switch-trilha:#3a3b42; --switch-botao:#ebe9e4;
}
[data-theme="escuro"] .banner-sistema{background:#241f0e;border-color:#453b16;color:#d8c37a}
[data-theme="escuro"] .banner-sistema.erro{background:#2a1413;border-color:#57221f;color:#f0918d}
[data-theme="escuro"] .modal-scrim>.modal{box-shadow:0 24px 80px rgba(0,0,0,.6)}
.tema-btn{display:flex;gap:10px;font-size:13px;color:var(--mut);padding:7px 10px;border-radius:10px;background:none;border:none;cursor:pointer;width:100%;text-align:left;font-family:'Inter',sans-serif}
.tema-btn:hover{background:var(--hover);color:var(--tinta)}

/* ==========================================================================
   Páginas públicas SEO — dossiê SSR /f/<cnpj> (backend/src/seo.ts)
   Shell PÚBLICO: sem sidebar, documento que ROLA (não o app de altura fixa).
   "Um template, dois contextos" (SEO-PROGRAMATICO §2). Reusa os componentes
   acima (kpis, cartao-fundo, table, grid-cards, card, badge, aviso-bloco,
   botao, h1.pg, h2.sec) e só adiciona o que é específico do dossiê público.
   ========================================================================== */
body.publico{height:auto;min-height:100dvh;overflow:visible;display:block}
body.publico main{display:block;flex:none}
.pub-topo{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;background:var(--fundo);border-bottom:1px solid var(--linha)}
.pub-topo .marca{font-family:'Inter Tight',sans-serif;font-weight:900;font-size:18px;color:var(--tinta)}
.pub-topo .marca i{font-style:normal;color:var(--verm)}
.pub-agir{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pub-link{font-size:13.5px;color:var(--mut)}
.pub-link:hover{color:var(--tinta)}
.botao.mini{padding:8px 16px;font-size:13px;border-radius:10px}

/* ── PÁGINA PÚBLICA COM MENU LATERAL — body.publico.com-menu ─────────────────
   O shell público (backend/src/seo.ts) nasceu "sem sidebar" e serve ~11 mil
   dossiês /f/, as listas e as páginas de companhia. O menu é OPT-IN: só entra
   quando o backend passa `menuLateral: true`, que é o que acende a classe
   `com-menu` no <body>. TUDO aqui está preso ao par `.publico.com-menu` — sem a
   classe, as outras 11 mil páginas leem exatamente o que liam antes.

   A barra em si (largura, cores, `.sb-*`, gaveta do celular, rail de 64px) já
   está inteira lá em cima, na seção do app. Nada disso se repete: o que falta é
   só encaixar aquela barra num documento que ROLA NO BODY, em vez do app de
   altura fixa onde quem rola é o `.rolagem`.

   ⚠️ O `position:sticky` TEM de morar dentro do `@media(min-width:861px)`.
   `body.publico.com-menu aside` pesa (0,3,1) e vence por ESPECIFICIDADE o
   `aside{position:fixed}` da gaveta (0,0,1) — media query não desempata
   especificidade, ela só decide se a regra existe. Medido num protótipo de
   navegador a 390px com esta regra fora da media query: a barra voltava ao
   fluxo, somava 262px à linha e a página ganhava 208px de transbordo
   horizontal. Fora da media query, esta regra QUEBRA o celular. */
body.publico.com-menu .pub-col{flex:1;min-width:0}
/* O ☰ mora no `.pub-topo`, e não num `.mtopo` — a página pública não tem a
   barra de topo do app. Mesmo desenho do `.mtopo .hamb` (caixa de 38px, borda
   de 1px, raio 10) para o controle ser o MESMO objeto em toda superfície. */
body.publico.com-menu .pub-topo .hamb{background:none;border:1px solid var(--linha);border-radius:10px;width:38px;height:38px;font-size:16px;line-height:1;cursor:pointer;color:var(--tinta);flex-shrink:0}
@media(min-width:861px){
  /* `height:100dvh` + `align-self:flex-start` são o TRILHO do sticky, não
     enfeite: item de flex nasce `stretch`, fica da altura do documento inteiro
     e um sticky do tamanho do trecho não tem para onde correr — a barra
     simplesmente sobe com a página. Com altura de uma tela, o `.sb-rola`
     (flex:1 + overflow-y:auto, já definido acima) volta a ser quem rola o
     histórico por dentro, igual ao app. */
  body.publico.com-menu aside{position:sticky;top:0;height:100dvh;align-self:flex-start}
  body.publico.com-menu .pub-topo .hamb{display:none}
  /* UMA marca por tela. Achado no screenshot a 1440 (não estava no plano): com
     a barra aberta, o `.sb-marca` dela e o `.marca` do `.pub-topo` põem dois
     "TOMÉ." lado a lado, a 262px um do outro. A casa já resolve isto no app —
     o `.mtopo .m-marca` SÓ existe em `@media(max-width:860px)`, ou seja, a
     barra de topo repete a marca exatamente quando a barra lateral está fora
     da tela. Mesma régua aqui, e por isso a regra mora nesta media query: no
     celular a marca do topo é a ÚNICA visível com a gaveta fechada (medido:
     ela é o único "TOMÉ." na tela a 390px) e continua obrigatória.
     Some a marca, sobra um filho só no `.pub-topo`, e `space-between` jogaria o
     CTA para a esquerda — daí o `flex-end` junto: sem ele o "Perguntar ao Tomé"
     atravessa a tela. */
  body.publico.com-menu .pub-topo{justify-content:flex-end}
  body.publico.com-menu .pub-topo .marca{display:none}
}

/* cabeçalho do dossiê */
.pg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.pg-ident{font-size:12.5px;color:var(--sutil);margin-top:8px;line-height:1.5}
.pg-razao{font-size:12.5px;color:var(--mut);margin-top:4px}
.breadcrumb{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--mut);margin-bottom:14px}
.breadcrumb a:hover{color:var(--tinta)}
.breadcrumb .sep{color:var(--sutil)}
.breadcrumb [aria-current="page"]{color:var(--tinta);font-weight:500}

/* ações secundárias (acompanhar + dossiê interativo) */
.pub-acoes-sec{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--mut)}
.pub-acoes-sec a{color:var(--verm);font-weight:600}
.pub-acoes-sec a:hover{text-decoration:underline}
.pub-link-sec{color:var(--verm);font-weight:600}

/* prestadores + pares (interlinking §4) */
.lista-prest{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.lista-prest b{font-weight:600}
.lista-prest a{color:var(--verm);font-weight:500}
.lista-prest a:hover{text-decoration:underline}
.pares{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pares a{font-size:13px;color:var(--mut);border:1px solid var(--linha);border-radius:999px;padding:7px 14px}
.pares a:hover{background:var(--hover);color:var(--tinta)}

/* FAQ (§2.7) — <details> nativo, sem JS */
.faq details{border:1px solid var(--linha);border-radius:12px;background:var(--campo);padding:0 16px;margin:8px 0}
.faq summary{cursor:pointer;font-size:14.5px;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--verm);font-weight:700;font-size:18px;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq .resp{font-size:14px;color:var(--mut);line-height:1.6;padding:0 0 14px}

/* CTA de fim */
.cta-fim{border:1px solid var(--linha);border-radius:16px;background:var(--lateral);padding:22px 24px;margin:32px 0 8px}

/* rodapé público (metodologia + fonte + data de atualização) */
.pub-rodape{max-width:980px;margin:8px auto 0;padding:24px 28px 48px;border-top:1px solid var(--linha);color:var(--mut);font-size:12.5px;line-height:1.6}
.pub-rodape p{margin-bottom:10px}
.pub-rodape a{color:var(--mut);text-decoration:underline}
.pub-rodape a:hover{color:var(--tinta)}
.pub-rodape .rodape-meta{color:var(--sutil);font-size:12px}

/* ══ bloco-web — RODAPÉ DE CONFERÊNCIA (§8 do PRD-WEB-ENRIQUECIMENTO) ═══════
   Conteúdo de TERCEIRO tem rodapé próprio e ROTULADO. Não é decoração: é a peça
   que impede uma lista de links no fim da resposta de se parecer com fonte oficial.
   Só usa variáveis do ds-v5 — por isso herda claro e escuro sem override. */
.bloco-web{background:var(--lateral);border:1px solid var(--linha);border-radius:12px;
           padding:11px 14px;margin:16px 0 4px;display:flex;gap:10px 14px;flex-wrap:wrap;
           align-items:baseline}
.bw-rot{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.11em;
        text-transform:uppercase;color:var(--sutil);display:flex;gap:8px;flex-wrap:wrap;
        align-items:baseline}
.bw-rot span{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0;text-transform:none;
             font-weight:400;color:var(--sutil)}
.bw-fontes{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;min-width:0}
.bw-fontes a{font-size:12.5px;color:var(--tinta);text-decoration:none;border:1px solid var(--linha);
             background:var(--campo);border-radius:999px;padding:4px 11px;display:inline-flex;
             gap:6px;align-items:baseline;max-width:100%;overflow-wrap:break-word}
.bw-fontes a i{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sutil);font-style:normal}
.bw-fontes a::after{content:"↗";color:var(--verm);font-size:10px}
.bw-fontes a:hover{background:var(--hover);border-color:var(--verm)}
.bw-fontes a:focus-visible{outline:2px solid var(--verm);outline-offset:2px}

/* ==========================================================================
   PADRÃO DE MÓDULO — o estado VISITANTE de toda tela com gate de login
   --------------------------------------------------------------------------
   Contrato: `docs/PADRAO-MODULO-TOME.md`. Vale para /carteira,
   /alertas, /relatorios e /workspace — as quatro telas que pedem conta.

   Por que existe (Daniel, 08/08/2026, navegando a produção deslogado): as
   quatro telas com gate tinham QUATRO desenhos diferentes para o MESMO pedido —
   card de 420px com um botão em três delas, layout de duas colunas com conteúdo
   de verdade em /relatorios — mais três estilos de botão, o rodapé de ressalva
   em duas de quatro e `Entrar` no topo de uma só. O pedido foi: mesma anatomia,
   e cada tela VENDENDO a própria funcionalidade em vez de só pedir login.

   Só usa variáveis deste arquivo — por isso herda claro e escuro sem um único
   override de cor. O estado LOGADO de cada módulo não é tocado por este bloco.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESCADA DE LARGURA — PADRAO-VISUAL-TOME.md §1
   O `.pagina` do ds-v5 trava em 900px, que é a largura de LEITURA do painel.
   A mini-LP não é leitura: é vitrine, tem grade de 3 colunas e um vitral que
   precisa respirar. Nos prints do Daniel (3456px) o gate ocupava ~15% da área
   útil e o resto era vazio. A escada abaixo é a literal do PADRAO-VISUAL §1,
   descontada a barra de 262px que o shell A já consome.
   -------------------------------------------------------------------------- */
.pagina.mod{max-width:900px;padding-bottom:72px}
@media(min-width:1180px){ .pagina.mod{max-width:1240px} }
@media(min-width:1440px){ .pagina.mod{max-width:1400px} }
@media(min-width:2000px){ .pagina.mod{max-width:1880px} }

/* ==========================================================================
   A. CABEÇA — selo, promessa, subtítulo, ações, custo
   ========================================================================== */
.mod-cabeca{padding:8px 0 4px}

/* O selo diz a que FAMÍLIA o módulo pertence. É o que faz o usuário perceber
   que /carteira e /alertas são irmãos e /workspace é outra coisa — sem ler. */
.mod-selo{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--sutil);
  border:1px solid var(--linha);border-radius:999px;padding:5px 11px 5px 9px}
.mod-selo .ic{font-size:12px;color:var(--verm-texto)}

.mod-h1{font-family:'Inter Tight','Inter Tight fallback',sans-serif;font-weight:900;
  letter-spacing:-.03em;line-height:1.06;margin:18px 0 0;
  /* fluido: 30px no 360 e 52px no 2560+, sem degrau feio no meio */
  font-size:clamp(30px,1.4rem + 1.9vw,52px)}
.mod-h1 i{font-style:normal;color:var(--verm)}

/* §1.1 do PADRAO-VISUAL: a coluna de texto cresce com o frame. Medido no
   screenshot de 2560 e 3456 com 78ch: o subtítulo parava ~430px antes da borda
   do vitral e deixava um rasgo branco no meio da tela — exatamente o defeito
   que o §1.1 descreve ("o texto tem que ir quase até a borda do frame, não
   parar no meio"). 92ch é o piso que o próprio documento cita como aprovado
   (a home usa 92ch no chat desde 20/07). */
.mod-sub{margin-top:14px;margin-bottom:var(--sp-4);font-size:clamp(15px,.9rem + .35vw,19px);color:var(--mut);
  line-height:1.55}

.mod-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
/* Um só estilo de botão em todo o padrão: o `.av2-b` do auth-comum, que já é o
   botão do modal de login. Os prints tinham três (retângulo preto sentence
   case, pílula preta caixa-alta, pílula outline caixa-alta) e nenhum era
   errado sozinho — errado era existirem três. */
.mod-ctas .av2-b{width:auto;padding:12px 22px;font-size:14px;min-height:46px}

.mod-custo{margin-top:12px;font-size:12.5px;color:var(--sutil);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mod-custo b{font-weight:600;color:var(--mut)}
.mod-custo .sep{opacity:.45}

/* ==========================================================================
   B. VITRAL — "o que você vê depois de entrar"
   --------------------------------------------------------------------------
   É a peça que separa esta proposta de um gate com mais texto. O visitante não
   entende "carteira viva" por adjetivo; entende vendo a tabela.
   NÃO é screenshot: é HTML com os tokens do DS. Screenshot envelhece no
   primeiro redesign, não tem tema escuro e fica borrado no monitor do Daniel.
   ========================================================================== */
.mod-vitral{margin-top:40px;border:1px solid var(--linha);border-radius:16px;
  background:var(--lateral);overflow:hidden;position:relative}
/* Barra de janela: sinaliza "isto é uma prévia da tela", não um componente
   ativo. Sem ela o visitante tenta clicar nos dados de exemplo. */
.mod-vitral-topo{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--linha);background:var(--fundo)}
.mod-vitral-topo .tt{font-size:12.5px;font-weight:600;color:var(--tinta)}
.mod-vitral-topo .et{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sutil);
  border:1px solid var(--linha);border-radius:6px;padding:2px 7px}
.mod-vitral-corpo{padding:16px}
.mod-vitral-legenda{margin-top:12px;font-size:13px;color:var(--sutil);line-height:1.55}

/* tabela de prévia — densa, tabular, igual à do painel real */
.mod-t{width:100%;border-collapse:collapse;font-size:13.5px}
.mod-t th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--sutil);font-weight:600;padding:0 10px 9px;white-space:nowrap}
.mod-t td{padding:10px;border-top:1px solid var(--linha);vertical-align:middle}
.mod-t .num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mod-t .tic{font-weight:600}
.mod-t .nm{color:var(--mut);font-size:12.5px}
.mod-sobe{color:var(--ok);font-weight:500}
.mod-desce{color:var(--verm-texto);font-weight:500}

/* linha de aviso dentro do vitral (o "sino" do Tomé) */
.mod-aviso{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:12px;
  background:var(--fundo);border:1px solid var(--linha);margin-top:10px}
.mod-aviso:first-child{margin-top:0}
.mod-aviso .pt{width:8px;height:8px;border-radius:50%;background:var(--verm);flex-shrink:0;margin-top:6px}
.mod-aviso .pt.frio{background:var(--linha)}
.mod-aviso .tx{min-width:0;flex:1}
.mod-aviso .tx b{font-size:13.5px;font-weight:600;display:block}
.mod-aviso .tx span{font-size:12.5px;color:var(--mut);line-height:1.5;display:block;margin-top:2px}
.mod-aviso .qd{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sutil);white-space:nowrap;flex-shrink:0}

/* cartões dentro do vitral (relatórios salvos, membros do workspace).
   `auto-fit`, nunca `auto-fill`: com auto-fill os 3 cards ficavam em 3 das 5
   trilhas de 232px e a metade direita do vitral nascia vazia no 2560 — medido
   no screenshot. O auto-fit colapsa a trilha sem conteúdo e os cards esticam
   para ocupar o vitral inteiro, em qualquer largura. */
.mod-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px}
.mod-card{border:1px solid var(--linha);border-radius:12px;background:var(--fundo);padding:14px}
.mod-card .tt{font-size:13.5px;font-weight:600;line-height:1.35}
.mod-card .mt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sutil);
  letter-spacing:.05em;text-transform:uppercase;margin-top:8px;display:block}
.mod-card .ex{font-size:12.5px;color:var(--mut);margin-top:8px;line-height:1.5}

/* ==========================================================================
   C. RAZÕES — três, sempre três
   --------------------------------------------------------------------------
   Três é o número que cabe em uma linha no desktop e vira pilha legível no
   360px. Duas parecem pobres; quatro viram 2×2 e quebram o ritmo entre módulos.
   ========================================================================== */
.mod-razoes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.mod-razao{padding:20px 20px 22px;border:1px solid var(--linha);border-radius:14px;background:var(--fundo)}
.mod-razao .ic{font-size:17px;color:var(--verm-texto);line-height:1}
.mod-razao h3{font-family:'Inter Tight',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.01em;margin:12px 0 7px}
.mod-razao p{font-size:13.5px;color:var(--mut);line-height:1.6}

/* ==========================================================================
   D. PASSOS — como funciona, em três
   ========================================================================== */
.mod-secao-t{font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sutil);margin:52px 0 18px}
.mod-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:passo}
.mod-passo{position:relative;padding-left:44px}
.mod-passo::before{counter-increment:passo;content:counter(passo);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--linha);background:var(--fundo);
  display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  color:var(--mut);font-weight:500}
.mod-passo h4{font-size:14px;font-weight:600;margin-bottom:5px}
.mod-passo p{font-size:13px;color:var(--mut);line-height:1.6}

/* ==========================================================================
   E. FECHO — CTA repetido + a objeção que sobrou
   ========================================================================== */
.mod-fecho{margin-top:52px;border:1px solid var(--linha);border-radius:16px;
  background:var(--lateral);padding:28px 26px;display:flex;gap:22px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.mod-fecho .tx{min-width:0;flex:1 1 320px}
.mod-fecho h3{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em}
.mod-fecho p{font-size:13.5px;color:var(--mut);margin-top:6px;line-height:1.55;max-width:64ch}
.mod-fecho .bts{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.mod-fecho .av2-b{width:auto;padding:12px 22px;font-size:13.5px;min-height:46px}

/* A ressalva do rodapé é a MESMA frase nas quatro telas. Nos prints ela estava
   em /carteira e /workspace, sumia em /alertas e virava outro texto, em
   itálico, em /relatorios. */
.mod-rodape{margin-top:48px;padding-top:18px;border-top:1px solid var(--linha);
  font-size:12.5px;color:var(--sutil);line-height:1.6}

/* ==========================================================================
   RESPONSIVO — matriz real de [[tome-resolucoes-e-devices-reais]]
   mobile 53,2% do público; 360×780 é o pior caso de largura.
   ========================================================================== */
@media(max-width:900px){
  .mod-razoes,.mod-passos{grid-template-columns:1fr;gap:14px}
  .mod-vitral-corpo{padding:13px}
  .mod-fecho{padding:22px 20px}
}
@media(max-width:700px){
  .pagina.mod{padding-left:18px;padding-right:18px}
  .mod-sub{font-size:15px}
  .mod-ctas{gap:8px}
  /* o alvo de toque do iOS é 44px; o CTA primário ganha a linha inteira para
     não dividir a largura com o secundário e virar dois botões estreitos */
  .mod-ctas .av2-b{width:100%;justify-content:center}
  .mod-fecho .bts{width:100%}
  .mod-fecho .av2-b{width:100%;justify-content:center}
  .mod-secao-t{margin-top:40px}
  /* a tabela do vitral rola por dentro — ancestral rolável CONTÉM o transbordo
     (PADRAO-NAVEGACAO §7.2), então isto não é falha de overflow */
  .mod-rolagem-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mod-rolagem-x .mod-t{min-width:420px}
}
@media(max-width:380px){
  .mod-vitral-corpo{padding:11px}
  .mod-razao{padding:16px 16px 18px}
  .mod-passo{padding-left:38px}
}

/* ══ BUSCA ⌘K (busca.js) + item "Buscar" da barra ═══════════════════════════
   Vive aqui, e não no <style> da home, porque a barra é canônica: o modal abre
   em qualquer superfície que carregue o ds-v5. Só usa variáveis do tema — herda
   claro e escuro sem override. */
.sb-busca-btn{display:flex;align-items:center;gap:11px;font-size:13.5px;padding:9px 12px;
  border-radius:10px;color:var(--tinta);cursor:pointer;width:calc(100% - 24px);margin:0 12px;
  border:none;background:none;text-align:left;font-family:'Inter',sans-serif;position:relative}
.sb-busca-btn:hover{background:var(--hover)}
.sb-busca-btn .ic{width:20px;flex-shrink:0;text-align:center;color:var(--mut);font-size:14px}
.sb-busca-btn .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-busca-btn .atalho{font-size:10px;color:var(--sutil);border:1px solid var(--linha);
  border-radius:5px;padding:1px 5px;flex-shrink:0}
/* seção "Recentes" acima do histórico */
.sb-sec-hist{padding:14px 20px 5px}
/* no rail o botão vira só o ícone — mesma regra dos outros itens da barra */
@media(min-width:861px){
  body.rail .sb-busca-btn{justify-content:center;width:40px;margin:2px auto;padding:10px 0;gap:0}
  body.rail .sb-busca-btn .lbl,body.rail .sb-busca-btn .atalho,body.rail .sb-sec-hist{display:none}
  body.rail .sb-busca-btn .ic{width:auto}
  body.rail .sb-busca-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;
    left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--tinta);
    color:var(--fundo);font-size:12px;font-weight:500;padding:5px 10px;border-radius:7px;
    white-space:nowrap;z-index:60;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
}
body.bx-travado{overflow:hidden}
.bx-fundo{position:fixed;inset:0;background:rgba(13,13,13,.42);z-index:400;display:none;
  align-items:flex-start;justify-content:center;padding:10vh 20px 20px}
.bx-fundo.aberto{display:flex}
.bx{background:var(--campo);border-radius:18px;box-shadow:0 24px 80px rgba(13,13,13,.28);
  width:100%;max-width:640px;overflow:hidden;display:flex;flex-direction:column;max-height:74vh}
[data-theme="escuro"] .bx{box-shadow:0 24px 80px rgba(0,0,0,.6);border:1px solid var(--linha)}
.bx-topo{display:flex;align-items:center;gap:12px;padding:15px 19px;border-bottom:1px solid var(--linha);flex-shrink:0}
.bx-lupa{color:var(--sutil);font-size:17px;flex-shrink:0}
.bx-topo input{flex:1;border:none;outline:none;background:transparent;font-family:'Inter',sans-serif;
  font-size:16px;color:var(--tinta);min-width:0}
.bx-topo input::placeholder{color:var(--sutil)}
.bx-topo input::-webkit-search-cancel-button{display:none}
.bx-fechar{border:none;background:none;color:var(--sutil);font-size:15px;cursor:pointer;
  width:30px;height:30px;border-radius:8px;flex-shrink:0}
.bx-fechar:hover{background:var(--hover);color:var(--tinta)}
.bx-corpo{overflow-y:auto;padding:6px 0 8px;min-height:0}
.bx-sec{font-size:10px;font-weight:600;color:var(--sutil);padding:11px 19px 4px;
  text-transform:uppercase;letter-spacing:.07em;font-family:'IBM Plex Mono',monospace}
.bx-carreg{color:var(--mut);text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif;font-size:12px}
.bx-lin{display:flex;align-items:center;gap:11px;padding:9px 19px;cursor:pointer;min-width:0}
.bx-lin:hover,.bx-lin.sel{background:var(--hover)}
.bx-lin .bx-ic{color:var(--sutil);font-size:13px;flex-shrink:0;width:22px;text-align:center}
.bx-lin .classe{flex-shrink:0;width:auto;min-width:44px;text-align:center}
.bx-lin .t{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-lin .meta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sutil);flex-shrink:0}
.bx-vazio{padding:26px 19px;text-align:center;font-size:13.5px;color:var(--sutil);line-height:1.6}
.bx-vazio b{color:var(--mut)}
.bx-erro{color:var(--verm-texto)}
.bx-erro b{color:var(--verm-texto);font-weight:600}
.bx-pe{border-top:1px solid var(--linha);padding:8px 19px;display:flex;gap:15px;flex-wrap:wrap;
  font-size:10.5px;color:var(--sutil);font-family:'IBM Plex Mono',monospace;flex-shrink:0}
.bx-pe b{color:var(--mut);font-weight:500;border:1px solid var(--linha);border-radius:4px;padding:0 5px}
@media(max-width:560px){
  .bx-fundo{padding:0}
  .bx{max-width:none;max-height:100dvh;height:100dvh;border-radius:0}
  .bx-pe{display:none}          /* atalho de teclado não existe no celular */
}

/* --------------------------------------------------------------------------
   VIÚVA — a última linha do parágrafo com uma palavra sozinha
   --------------------------------------------------------------------------
   Pedido do Daniel (09/08/2026): "não deixe frases quebrando linha no meio das
   interfaces".

   ⚠️ A LIÇÃO DE 6 RODADAS: perseguir classe a classe NÃO fecha. Cada medição
   revelava classes novas (.texto, .dor, .lede, .nota, .contrato, depois .TD,
   .porque, .ct-vazio-lede…) e as regras de classe ainda PERDIAM por
   especificidade para `.pagina p`. `text-wrap` é propriedade HERDADA — medido
   no navegador — então UMA regra no container alcança todo o texto descendente,
   inclusive o que ainda não existe. É a diferença entre corrigir os casos e
   corrigir a causa.

   `balance` se auto-limita: o navegador o ignora acima de ~6 linhas, então
   parágrafo corrido não paga custo nem fica estranho.
   -------------------------------------------------------------------------- */
/* ⚠️ REVISTO 15/08/2026 — `balance` era o default e ESTAVA DESPERDICANDO LARGURA.
   O que ele faz é ENCURTAR as linhas de propósito para igualá-las. Em título de
   2-3 linhas isso é bonito; em texto corrido vira o que o Daniel chamou de "um
   enter no meio da frase": o parágrafo para antes da borda com espaço sobrando
   à direita.

   MEDIDO em produção, a 2560px, quanto da largura disponível o parágrafo usa:
       página            balance      pretty
       /docs-api           67%    ->    76%
       /sobre              76%    ->    91%
       /enquadramento      72%    ->    99%
   De 9 a 27 pontos percentuais de tela jogados fora.

   `pretty` PREENCHE a linha e continua evitando órfã — é o certo para texto
   corrido. `balance` fica só nos títulos, que é onde ele foi feito para agir.

   O pedido original (09/08: "não deixe frases quebrando linha no meio das
   interfaces") continua honrado; o que mudou é o entendimento de qual das duas
   quebras é a feia. A régua agora é: usar toda a resolução do usuário. */
h1, h2, h3, h4, .mod-h1, .pg, .titulo, .sb-secao{ text-wrap: balance }
.pagina, .conta-main, .wrap, .rolagem, main{ text-wrap: pretty }
/* O que NÃO deve equilibrar: tabela (colunas têm largura própria), código,
   campo de formulário e o composer do chat. */
table, pre, code, input, textarea, select, .mono, .composer{ text-wrap: wrap }

/* 2 · "Falar no WhatsApp": o wa-cta.js pinta a cor INLINE e o link é injetado
   em TODA navegação — mas a correção do escuro vivia no `auth-comum.css`, que
   `/status` NÃO carrega (medido: lá só entram fonts.css, ds-v5.css e o inline).
   Uma tela ficava com 3,25:1. Aqui alcança todas. */
[data-theme="escuro"] #waCtaLink{ color:#3fae6d !important }


/* ===========================================================================
   /desde-ontem — "o que eu aprendi desde ontem" (13/08/2026)
   ---------------------------------------------------------------------------
   Só o que NÃO existia. Cartão, grade, kpi, pílula e seção vêm do ds-v5 como
   estão — a página não ganha estilo próprio para parecer especial, ganha só o
   bloco de CITAÇÃO, que é o elemento que ela introduz no site.

   A citação é o coração desta página: é ela que torna o fato legível E é ela
   que impede alucinação (nenhum modelo resume nada aqui — o texto é o do
   documento que o fundo entregou à CVM). Por isso ela tem peso visual de
   conteúdo, não de nota de rodapé: fundo próprio, filete à esquerda como
   citação de jornal, e a assinatura de quem falou logo abaixo.
   =========================================================================== */
.fato-card{display:flex;flex-direction:column;gap:10px}
.fato-topo{display:flex;gap:10px;align-items:flex-start}
.fato-topo .pill-num{flex:0 0 auto;margin-top:1px}
.fato-card h3{margin:0}

.voz-doc{margin:0;padding:10px 0 10px 14px;border-left:3px solid var(--linha);
  background:transparent}
.voz-txt{display:block;font-size:13.5px;line-height:1.55;color:var(--tinta)}
.voz-quem{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--sutil);font-style:normal;letter-spacing:.02em}

.desde-sec{margin-top:34px}
.desde-h2{font-size:19px;font-weight:600;line-height:1.3;margin:0}
.desde-sub{margin-top:6px}
/* 3 KPIs numa grade desenhada para 4: sem isto o terceiro fica com filete solto
   à direita e a linha parece cortada no meio. */
.desde-kpis{grid-template-columns:repeat(3,1fr);border:1px solid var(--linha);
  border-radius:14px;overflow:hidden;margin:18px 0}
.desde-kpis .kpi:nth-child(3){border-right:none}
@media(max-width:700px){
  .desde-kpis{grid-template-columns:1fr}
  .desde-kpis .kpi{border-right:none;border-bottom:1px solid var(--linha)}
  .desde-kpis .kpi:last-child{border-bottom:none}
}
.desde-fecho{margin-top:30px;padding-top:18px;border-top:1px solid var(--linha);
  font-size:13px;color:var(--mut)}

/* ==========================================================================
   DEGUSTAÇÃO DOS MÓDULOS (PRD-DEGUSTACAO-MODULOS, 05/10/2026)
   --------------------------------------------------------------------------
   Componentes usados nas TRÊS telas (Monitor, Radar, Raio-X) — por isso moram
   aqui (A2). O comportamento é do frontend/degustacao.js; o modal reusa o
   .av2-scrim/.av2-modal do auth-comum (um modal só no produto).
   Tom: informar o limite com número e oferecer a versão completa — nunca
   alarme (sem --verm de fundo); o vermelho fica só no acento do selo.
   ========================================================================== */
/* faixa no topo do painel: dias restantes · consultas de hoje · CTA */
.deg-faixa{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  border:1px solid var(--linha);border-radius:12px;background:var(--lateral);
  padding:10px 14px;margin:0 0 var(--sp-4);font-size:13.5px;color:var(--mut)}
.deg-faixa b{color:var(--tinta);font-weight:600}
.deg-selo{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta);
  border:1px solid var(--linha);border-radius:999px;padding:3px 9px;background:var(--fundo);white-space:nowrap}
.deg-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verm)}
.deg-faixa .deg-txt{flex:1 1 280px;min-width:0}
.deg-faixa .deg-sep{opacity:.45;margin:0 4px}
.deg-faixa .deg-cta{margin-left:auto;white-space:nowrap;font-weight:600;color:var(--tinta);
  text-decoration:none;border-bottom:1px solid var(--linha)}
.deg-faixa .deg-cta:hover{border-bottom-color:var(--verm)}
.deg-faixa .deg-x{background:none;border:none;color:var(--sutil);font-size:16px;cursor:pointer;
  width:28px;height:28px;border-radius:8px;line-height:1}
.deg-faixa .deg-x:hover{background:var(--hover)}
/* 1º acesso: a mesma faixa, com a frase de boas-vindas em destaque */
.deg-faixa.boas-vindas{border-left:4px solid var(--ok)}
.deg-faixa.boas-vindas .deg-txt{color:var(--tinta)}
@media(max-width:640px){
  .deg-faixa{font-size:13px;padding:10px 12px}
  .deg-faixa .deg-cta{margin-left:0}
}

/* parecer da IA em degustação: o bloco existe, o texto não vem do servidor —
   as linhas desfocadas são DESENHO (nenhum texto real no DOM) */
.deg-teaser{position:relative;border:1px dashed var(--linha);border-radius:12px;
  padding:16px 18px;margin:var(--sp-4) 0;background:var(--lateral);overflow:hidden}
.deg-teaser h4{margin:0 0 4px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.deg-teaser h4 .ic{font-size:13px}
.deg-teaser p{margin:4px 0 12px;font-size:13.5px;color:var(--mut);line-height:1.55;max-width:72ch}
.deg-teaser p b{color:var(--tinta);font-weight:600}
.deg-linhas{display:grid;gap:8px;margin:6px 0 14px;filter:blur(3px);opacity:.7;user-select:none;pointer-events:none}
.deg-linhas span{display:block;height:10px;border-radius:6px;background:var(--linha)}
.deg-linhas span:nth-child(1){width:92%}
.deg-linhas span:nth-child(2){width:78%}
.deg-linhas span:nth-child(3){width:85%}
.deg-linhas span:nth-child(4){width:60%}

/* tela de fim / pausa: o mesmo esqueleto da mini-LP (selo · h1 · sub · CTAs) */
.deg-fim{padding:8px 0 var(--sp-6)}
.deg-fim .deg-resumo{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.deg-fim .deg-resumo div{border:1px solid var(--linha);border-radius:12px;padding:12px 16px;
  background:var(--lateral);min-width:150px}
.deg-fim .deg-resumo b{display:block;font-size:22px;font-weight:800;color:var(--tinta);
  font-family:'Inter Tight','Inter Tight fallback',sans-serif;letter-spacing:-.02em}
.deg-fim .deg-resumo span{font-size:12.5px;color:var(--sutil)}
.deg-fim ul{margin:var(--sp-5) 0 0;padding-left:20px;color:var(--mut);font-size:14.5px;line-height:1.7;max-width:80ch}

/* escolha do fundo da degustação (quem acompanha 2+ fundos) */
.deg-escolha{border:1px solid var(--linha);border-radius:14px;padding:18px;background:var(--lateral);margin:0 0 var(--sp-4)}
.deg-escolha h3{margin:0 0 4px;font-size:16px;font-weight:700}
.deg-escolha p{margin:0 0 12px;font-size:13.5px;color:var(--mut)}
.deg-escolha .deg-opcoes{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.deg-escolha button{text-align:left;background:var(--fundo);border:1px solid var(--linha);border-radius:10px;
  padding:10px 12px;cursor:pointer;font:inherit;color:var(--tinta);min-width:0}
.deg-escolha button:hover{border-color:var(--tinta)}
.deg-escolha button .nm{display:block;font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.deg-escolha button .cd{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--sutil)}

/* corte do Radar (top N): fora da tabela, para os filtros nunca o esconderem */
.deg-corte{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:space-between;
  border:1px solid var(--linha);border-radius:12px;background:var(--lateral);padding:12px 16px;
  margin:var(--sp-3) 0 var(--sp-4);font-size:13.5px;color:var(--mut)}
.deg-corte b{color:var(--tinta)}
.deg-corte .botao{padding:9px 16px;font-size:13px;text-decoration:none}

/* modal de aviso (cota/limite): conteúdo dentro do .av2-modal do auth-comum */
.deg-modal .av2-sub{max-width:44ch}
.deg-modal .deg-acoes{display:grid;gap:8px;margin-top:6px}
.deg-modal .deg-acoes a{text-decoration:none}
/* o selo "Grátis" não come o nome do módulo na barra (QA de prod 05/10) */
.sb-item .tag-novo[data-deg]{letter-spacing:0;flex-shrink:0}