/* =============================================================================
 * estilo.css — a casca da plataforma.
 *
 * Os tokens são PORTADOS do MVP, não reinventados: as cores vêm de
 * `includes/render-core.css` e de `dashboard.php`, e a sidebar escura com
 * dot-grid vem de `includes/sidebar.php`. A instrução foi respeitar a UX
 * existente, e um cliente que já usa o produto não pode sentir que trocou de
 * empresa ao entrar na plataforma nova.
 *
 * A regra que atravessa: produto é CLARO por dentro (leitura longa, densidade
 * alta, sem movimento decorativo). O escuro fica na sidebar e nos momentos de
 * impacto — nunca numa tela que se lê por vinte minutos.
 * ========================================================================== */

:root {
  /* superfícies — dashboard.php */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-hi: #f3f4f6;
  --border: #e5e7eb;

  /* texto — render-core.css (as versões -ink passam em AA) */
  --ink: #111827;
  --dim: #6b7280;
  --dim-ink: #5b616b;
  --faint: #9ca3af;
  --faint-ink: #6e737c;

  /* marca */
  --primary: rgb(0, 29, 245);
  --primary-soft: rgba(0, 29, 245, 0.06);
  --primary-line: rgba(0, 29, 245, 0.25);
  --gold: #c5a059;
  --gold-ink: #8a6a28;

  /* estado */
  --ok: #10b981;
  --ok-ink: #047857;
  --warn: #f59e0b;
  --warn-ink: #b45309;
  /* AMARELO QUE PASSA EM CIMA DO PRÓPRIO FUNDO DE AVISO.
     `--warn-ink` sobre `--warn-fundo` composto dá 4,32:1 — reprova o AA de
     4,5:1 a 12px, e a régua deste produto é 12px. Este tom dá 6,09:1 no mesmo
     lugar. O claro continua valendo onde o fundo é a superfície normal. */
  --warn-ink-forte: #92400e;
  --danger: #ef4444;
  --danger-ink: #b91c1c;

  /* sidebar — sidebar.php */
  /* A barra lateral é o mesmo material das capas (06.09.2026): marinho de
     base, com uma luz azul fraca atrás da marca — sem ouro e sem grão, que
     são o que faz a capa ser capa. */
  --side: #0b1020;
  --side-foot: #080c19;
  /* O SEGUNDO MATERIAL. Marinho profundo com luz azul num canto e um sopro
     de ouro no outro, grão fino por cima. Entra onde a plataforma fala com
     autoridade — capa de relatório, cartão-herói, cerimônia, login — e em
     mais lugar nenhum. É o "gradiente inteligente": codifica o momento. */
  --navy: #0b1020;
  --luz-azul: rgba(31, 59, 255, 0.55);
  --luz-ouro: rgba(197, 160, 89, 0.28);

  /* ── A FAMÍLIA, e agora é uma só ──────────────────────────────────────────
   *
   * Era Space Grotesk nos títulos e Inter no corpo. A Space Grotesk tem
   * detalhes que foram frescos em 2020 e viraram assinatura de landing page de
   * startup, e ter DUAS sans no mesmo produto é a duplicata que não paga o
   * próprio custo: dois arquivos a baixar para dizer a mesma coisa.
   *
   * A Onest faz os dois papéis. `--brand` e `--body` continuam existindo como
   * nomes separados porque eles marcam INTENÇÃO (isto é título, isto é corpo),
   * e um dia podem voltar a divergir sem uma varredura no arquivo inteiro.
   *
   * A monoespaçada fica: ela tem trabalho próprio, que é marcar número medido,
   * código e rótulo de sistema. É identidade do produto, não decoração.
   * ───────────────────────────────────────────────────────────────────────── */
  --brand: 'Onest', system-ui, sans-serif;
  --body: 'Onest', system-ui, sans-serif;
  /* A MONO É GEIST MONO (06.09.2026). A JetBrains Mono era alta e fina
     demais ao lado da Onest; a Geist Mono tem a mesma construção geométrica
     da Onest, altura de x menor e traço mais firme. Só em rótulo, selo, data
     e número — nunca em corpo. */
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── SOMBRAS: quatro degraus, e só ────────────────────────────────────
   * A auditoria contou 37 sombras distintas, com pares separados por 1% de
   * alfa (`0 8px 24px rgba(0,0,0,.07)` e `…/.06`). Elevação é uma escala
   * discreta: repouso, hover, flutuante, modal. Quatro. */
  /* A superfície de VIDRO: o cartão translúcido que flutua sobre o fundo.
     Existe como token porque componente com branco fixo não troca de tema. */
  --vidro: rgba(255, 255, 255, 0.85);
  --warn-fundo: rgba(245, 158, 11, 0.08);

  /* ELEVAÇÃO EM TRÊS NÍVEIS (auditoria de 05.09.2026). Cartão, painel e linha
     não flutuam: são borda de 1px sobre o chão (nível 0). O que responde ao
     mouse levanta um fio (nível 1). Só o que está por cima da tela — popover,
     menu, modal — tem sombra de verdade (nível 2). Superfície quieta é isto. */
  --shadow-card: none;
  --shadow-hover: 0 4px 14px -4px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-modal: 0 32px 64px -12px rgba(0, 0, 0, 0.3);
  /* A pílula levantada: aba ativa, botão de segmento. Elevação de 2px com um
     fio de contorno, e não uma sombra difusa: o objeto é pequeno.
     ⚠️ ESTE TOKEN ESTAVA QUEBRADO: ele referenciava a si mesmo
     (`--shadow-pilula: var(--shadow-pilula)`), que é um ciclo, e ciclo resolve
     para o valor garantido-inválido. Como `box-shadow` não herda, a aba ativa
     do relatório caía em `none` e perdia a elevação inteira. O comentário
     acima descrevia um efeito que nunca chegou à tela. */
  --shadow-pilula: 0 2px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  /* O anel de foco. Era escrito à mão em seis lugares. */
  --foco: 0 0 0 3px var(--primary-soft);

  /* ── RAIO: cinco degraus ──────────────────────────────────────────────
   * Eram 33 valores, incluindo `1px` e `2px` (invisíveis) e três grafias de
   * pílula (99px, 999px, 9999px). */
  --r-xs: 8px;    /* selo, campo pequeno */
  --r: 14px;      /* padrão: cartão pequeno, botão */
  --r-md: 18px;   /* cartão de conteúdo */
  --r-lg: 22px;   /* painel, modal */
  --r-pill: 999px;

  /* ── SUPERFÍCIE SUTIL ─────────────────────────────────────────────────
   * Um só. Havia #fcfcfd, #fbfbfc, #fafbfc e #f9fafb na árvore: quatro tons
   * entre 249 e 252 de luminância, que ninguém distingue. */
  --surface-sutil: #fbfbfc;
  /* O verde forte do gradiente do MVP. Aparecia cru 9 vezes; é mais escuro
     que `--ok` de propósito: sobre azul, o tom claro lava a faixa. */
  --ok-forte: #059669;
  /* Cinzas da impressão. Em papel a escala de tela não vale: `--border` some
     no laser e `--dim-ink` fica pesado demais. */
  --papel-linha: #c7cdd6;
  --papel-tinta: #5f6775;

  /* ── ÍCONES: três tamanhos ────────────────────────────────────────────
   * O DOM tinha sete (11,12,13,14,15,16,18). Um traçado de 2px num viewBox de
   * 24 renderizado a 13px produz meio pixel por linha, e é por isso que
   * alguns ícones pareciam mais moles que outros. */
  --ic-sm: 12px;
  --ic: 16px;
  --ic-lg: 20px;
  /* O quarto degrau, e ele e um PAPEL diferente dos tres de cima.
   *
   * De 12 a 20px o icone acompanha um rotulo: ele e pontuacao, e cresce junto
   * com o texto ao lado. Em 24px ele esta dentro de um contentor proprio e vira
   * ELEMENTO GRAFICO, o objeto que a pessoa ve antes de ler. Sao usos
   * diferentes, entao sao tokens diferentes, e nao um exagero do mesmo. */
  --ic-xl: 24px;

  /* ── TEMPO ────────────────────────────────────────────────────────────
   * Micro-interação em 0,18s; mudança de estado visível em 0,25s; entrada de
   * bloco em 0,45s. Havia dez durações entre 0,15s e 0,7s. */
  /* TRÊS TEMPOS E UMA CURVA. Antes: 0.18, 0.25, 0.28, 0.4, 0.45, 0.5, 0.55 e
     0.6s, com `ease`, `ease-out`, `ease-in-out` e `linear` misturados nas
     transições. Cada tela se movia num ritmo. Agora: rápido para estado
     (hover, foco), médio para deslocamento (abrir, levantar), lento para
     entrada de tela. A curva é uma só; `linear` fica só para o que gira. */
  --t-rapido: 0.18s;
  --t-medio: 0.25s;
  --t-lento: 0.45s;
  --escalonar: 40ms;
  /* A barra de progresso e o unico caso legitimo fora da escala de micro
     interacao: uma barra que preenche em 180ms nao se le como progresso, se le
     como salto. Ela merece um tempo proprio em vez de um numero solto. */
  --t-barra: 0.6s;

  /* ── O COMPASSO DOS PULSOS ────────────────────────────────────────────────
   *
   * Medido: em qualquer tela há de 3 a 5 elementos pulsando ao mesmo tempo, e
   * eles rodavam em 1,6s · 1,8s · 2s · 2,5s · 2,6s. Dois deles separados por
   * UM DÉCIMO de segundo, que é perto demais para parecer intencional e longe
   * demais para chegar a coincidir.
   *
   * Ritmos que não coincidem derivam uns contra os outros para sempre, e o
   * olho lê deriva como ruído. A saída não é apagar pulsos: é dar um compasso
   * só. Respirando junto, cinco pontos leem como um sistema vivo; respirando
   * cada um no seu, leem como cinco erros.
   *
   * O FOCO É A EXCEÇÃO, e é de propósito. Ele não diz "estou vivo", diz
   * "aja aqui": um tempo próprio e mais curto é o que separa as duas
   * mensagens. Uma exceção declarada é sistema; cinco acidentes não são. */
  --t-pulso: 2.4s;
  --t-pulso-urgente: 1.4s;

  /* ═══════════════════════════════════════════════════════════════════════
     OS TONS (Salto 2 · parada 1 · 05.09.2026)

     Antes disto havia 275 rgba() fora do :root, com 169 valores distintos:
     76% eram seis cores com alfas escolhidos à mão, um a um. É a diferença
     entre montado e desenhado, e era o que impedia o modo escuro — um tom
     escrito como rgba(16,185,129,.07) não sabe que a base mudou.

     Agora cada tom deriva da cor-base por color-mix(), numa escala de nove
     degraus. Trocar a base troca todos os tons. Só existem aqui os degraus
     que a folha usa; os outros nascem quando forem precisos.

     A régua em `verifica-estilo.mjs` segura a porta: rgba() fora do :root
     tem teto, e o teto só desce.
     ═══════════════════════════════════════════════════════════════════════ */
  --tom-primario-4: color-mix(in srgb, var(--primary) 4%, transparent);
  --tom-primario-8: color-mix(in srgb, var(--primary) 8%, transparent);
  --tom-primario-12: color-mix(in srgb, var(--primary) 12%, transparent);
  --tom-primario-18: color-mix(in srgb, var(--primary) 18%, transparent);
  --tom-primario-25: color-mix(in srgb, var(--primary) 25%, transparent);
  --tom-primario-35: color-mix(in srgb, var(--primary) 35%, transparent);
  --tom-primario-50: color-mix(in srgb, var(--primary) 50%, transparent);
  --tom-primario-70: color-mix(in srgb, var(--primary) 70%, transparent);
  --tom-ok-4: color-mix(in srgb, var(--ok) 4%, transparent);
  --tom-ok-8: color-mix(in srgb, var(--ok) 8%, transparent);
  --tom-ok-12: color-mix(in srgb, var(--ok) 12%, transparent);
  --tom-ok-18: color-mix(in srgb, var(--ok) 18%, transparent);
  --tom-ok-25: color-mix(in srgb, var(--ok) 25%, transparent);
  --tom-ok-35: color-mix(in srgb, var(--ok) 35%, transparent);
  --tom-ok-50: color-mix(in srgb, var(--ok) 50%, transparent);
  --tom-ok-60: color-mix(in srgb, var(--ok) 60%, transparent);
  --tom-ok-70: color-mix(in srgb, var(--ok) 70%, transparent);
  --tom-warn-4: color-mix(in srgb, var(--warn) 4%, transparent);
  --tom-warn-8: color-mix(in srgb, var(--warn) 8%, transparent);
  --tom-warn-12: color-mix(in srgb, var(--warn) 12%, transparent);
  --tom-warn-25: color-mix(in srgb, var(--warn) 25%, transparent);
  --tom-warn-35: color-mix(in srgb, var(--warn) 35%, transparent);
  --tom-warn-50: color-mix(in srgb, var(--warn) 50%, transparent);
  --tom-danger-4: color-mix(in srgb, var(--danger) 4%, transparent);
  --tom-danger-8: color-mix(in srgb, var(--danger) 8%, transparent);
  --tom-danger-12: color-mix(in srgb, var(--danger) 12%, transparent);
  --tom-danger-18: color-mix(in srgb, var(--danger) 18%, transparent);
  --tom-danger-25: color-mix(in srgb, var(--danger) 25%, transparent);
  --tom-danger-35: color-mix(in srgb, var(--danger) 35%, transparent);
  --tom-danger-50: color-mix(in srgb, var(--danger) 50%, transparent);
  --tom-ouro-4: color-mix(in srgb, var(--gold) 4%, transparent);
  --tom-ouro-8: color-mix(in srgb, var(--gold) 8%, transparent);
  --tom-ouro-12: color-mix(in srgb, var(--gold) 12%, transparent);
  --tom-ouro-18: color-mix(in srgb, var(--gold) 18%, transparent);
  --tom-ouro-25: color-mix(in srgb, var(--gold) 25%, transparent);
  --tom-ouro-35: color-mix(in srgb, var(--gold) 35%, transparent);
  --tom-tinta-4: color-mix(in srgb, var(--ink) 4%, transparent);
  --tom-tinta-50: color-mix(in srgb, var(--ink) 50%, transparent);
  --tom-branco-25: color-mix(in srgb, #fff 25%, transparent);
  --tom-primario-60: color-mix(in srgb, var(--primary) 60%, transparent);
  --tom-branco-4: color-mix(in srgb, #fff 4%, transparent);
  --tom-branco-8: color-mix(in srgb, #fff 8%, transparent);
  --tom-branco-12: color-mix(in srgb, #fff 12%, transparent);
  --tom-branco-18: color-mix(in srgb, #fff 18%, transparent);
  --tom-branco-35: color-mix(in srgb, #fff 35%, transparent);
  --tom-branco-50: color-mix(in srgb, #fff 50%, transparent);
  --tom-branco-60: color-mix(in srgb, #fff 60%, transparent);
  --tom-branco-70: color-mix(in srgb, #fff 70%, transparent);
  --tom-sombra-4: color-mix(in srgb, #000 4%, transparent);
  --tom-sombra-8: color-mix(in srgb, #000 8%, transparent);
  --tom-sombra-12: color-mix(in srgb, #000 12%, transparent);
  --tom-sombra-25: color-mix(in srgb, #000 25%, transparent);
  --tom-sombra-50: color-mix(in srgb, #000 50%, transparent);
  --tom-sombra-60: color-mix(in srgb, #000 60%, transparent);
  --tom-sombra-70: color-mix(in srgb, #000 70%, transparent);
}

* { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════════════
   A COLUNA NÃO SALTA MAIS AO TROCAR DE TELA.

   Medido a 1280px: a Visão Geral não rola e entrega 1020px de conteúdo; o
   Estúdio rola e entrega 1005. A diferença é a barra, que nasce e morre
   conforme a altura da tela — e com ela a página inteira, título, cartões e
   botões, andava quinze pixels para o lado a cada navegação.

   `stable` reserva a goteira sempre, tenha barra ou não. O preço são 15px de
   largura nas telas curtas; o troco é a coluna parar de se mexer, que é a
   primeira coisa que o olho nota num produto e a última que ele perdoa. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  /* Uma palavra sem espaço não pode estourar a largura da página.
   *
   * O dossiê da Empresa G guarda o nome como "Empresa G Consultoria Empresarial | Site:
   * https://www.empresagconsultoriaempresarial.com.br". A URL não tem onde quebrar,
   * então o h1 foi para 603px, e com ele a página inteira: 650px de rolagem
   * lateral numa tela de 375. O separarEmpresa() já trata esse formato hoje,
   * mas registros antigos continuam no banco e a pessoa segue livre para
   * colar uma URL em qualquer campo.
   *
   * `break-word` só age quando a palavra realmente não cabe: o texto normal
   * quebra nos espaços como sempre. */
  overflow-wrap: break-word;
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--brand); letter-spacing: -0.02em; margin: 0; }

/* ── SEMINEGRITO EM VEZ DE NEGRITO ────────────────────────────────────────
 *
 * A Onest é geométrica e de contraste baixo. No peso 700 as contraformas do
 * `a`, do `e` e do `o` fecham, e o título deixa de ler como firme para ler
 * como pesado. No 600 ele mantém a autoridade e recupera o ar.
 *
 * Vale de referência: o título grande do Retool, que foi a pista, está em peso
 * 300. A ClauseOS usa 600. Nenhum dos dois usa 700.
 *
 * OS TÍTULOS ENTRAM AQUI, e é fácil esquecer disso. `h1` a `h6`, `b` e
 * `strong` puxam `bold` da folha do NAVEGADOR, e não do nosso CSS: trocar os
 * 190 `font-weight: 700` declarados não alcança nenhum deles.
 *
 * Medido depois da primeira tentativa: o `h1` continuava em 700 enquanto o
 * negrito inline já estava em 600, ou seja, o negrito no meio do parágrafo
 * ficou mais leve que o título, que é a hierarquia invertida. */
h1, h2, h3, h4, h5, h6, b, strong { font-weight: 600; }

/* ── A ALTURA DO CABEÇALHO FIXO, e por que ela precisa ser um token ────────
 *
 * O cabeçalho do conteúdo é `position: sticky; top: 0` e tem 64px. Sem
 * `scroll-margin-top`, TODO destino de rolagem interna encosta em `top: 0` e
 * fica escondido atrás dele: a pessoa clica num link do relatório, a página
 * rola, e o que ela foi buscar está debaixo da barra.
 *
 * Medido antes: `scroll-margin-top` era 0 em toda a página.
 * ───────────────────────────────────────────────────────────────────────── */
:root { --altura-cromo: 64px; }

/* Vale para qualquer alvo de rolagem, e não para uma lista de seletores que
   alguém teria de lembrar de aumentar. */
[id], .secao, .aba-painel, [data-plano] { scroll-margin-top: calc(var(--altura-cromo) + var(--e4)); }

/* ── CONTADOR DE CARACTERES ────────────────────────────────────────────────
 * Dentro do campo, no canto de baixo. Ver `contador.js` para o porquê de ele
 * só aparecer perto do limite. */
.ctd-caixa { position: relative; display: block; }
/* O campo vira bloco DENTRO do invólucro. textarea e input são inline por
   padrão, e o inline deixa uma folga de descida embaixo: sem isto o contador,
   ancorado no rodapé do invólucro, cai nessa folga e aparece FORA do campo.
   Medido: o retângulo do contador ficava abaixo do retângulo do campo. */
.ctd-caixa > textarea, .ctd-caixa > input { display: block; }
.ctd {
  position: absolute; right: 10px; bottom: 8px;
  padding: var(--e0) var(--e2); border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--border);
  font: 500 var(--f-micro)/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--dim-ink);
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
  pointer-events: none;
}
.ctd.vis { opacity: 1; transform: none; }
.ctd.apertando { color: var(--warn-ink); border-color: var(--warn-linha, var(--border)); }
@media (prefers-reduced-motion: reduce) { .ctd { transition: none; } }

/* A ação da tela, ancorada no cabeçalho. Ver `acaoDaTela` em app.js. */
.acao-tela:empty { display: none; }
.acao-tela .btn { white-space: nowrap; }
a { color: inherit; }
.mono { font-family: var(--mono); }

/* ── layout ───────────────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

/* ⚠️ `fixed`, e NÃO `sticky`. MEDIDO.
 *
 * A barra era `position: sticky; top: 0`, e funcionava — até um modal abrir.
 * A trava de rolagem põe `overflow: hidden` no `<html>`, e isso destrói o
 * contexto de rolagem de que o `sticky` depende: o elemento volta para a
 * posição ESTÁTICA dele, que é o topo do documento.
 *
 * Medido a 1000px de largura, com a página em 1100 e o painel de Detalhes
 * abrindo: o topo da barra saltou de 0 para -1100. Na tela, a barra escura
 * sumia e sobrava só o rodapé dela espremido no alto, que foi o que o dono do
 * produto fotografou.
 *
 * `fixed` não depende de contexto de rolagem nenhum, então a trava não o
 * alcança. O preço é que a barra sai do fluxo e o `.main` precisa da margem,
 * logo abaixo. Abaixo de 900px a barra some e a margem some junto. */
.side {
  flex-shrink: 0;
  background: radial-gradient(90% 40% at 0% 0%, var(--tom-primario-25), transparent 70%), var(--side);
  border-right: 1px solid var(--tom-branco-4);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 30;
}

.marca { display: flex; align-items: center; gap: var(--e3); }
/* A marca do topo é do TELEFONE. No computador quem a carrega é a barra
   lateral, e duas marcas na mesma tela seriam uma a mais. */
.marca-topo { display: none; }
.marca .ic {
  width: 32px; height: 32px; border-radius: var(--r-xs);
  background: var(--tom-primario-18); border: 1px solid var(--tom-primario-25);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 15px var(--tom-primario-18);
}
.marca .n { color: #fff; font-family: var(--brand); font-weight: 600; }
.marca .s { font-family: var(--mono); }

.nav { display: flex; flex-direction: column; }
.nav button {
  display: flex; align-items: center;            width: 100%;                       border: 1px solid transparent;
  background: none; color: var(--tom-branco-60);
  font: inherit;                  text-align: left; cursor: pointer;
}
.nav button:hover { background: var(--tom-branco-4); color: #fff; }
/* estado ativo: o mesmo gradiente do sidebar.php do MVP */
.nav button.on {
  color: #fff;
}
.nav button .pt {
  /* CONTAGEM, NÃO ALARME (06.09.2026): a pílula azul chapada gritava para uma
     pendência "quando puder". Fica neutra; vira vermelha só com algo para agora. */
  margin-left: auto; background: var(--tom-branco-12); color: #fff;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  min-width: 19px; height: 19px; padding: 0 var(--e2); border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
}
.nav-titulo {
  /* O fio que desvanece à direita do rótulo: dá fim à seção sem desenhar uma
     linha inteira, que num painel escuro vira uma cicatriz. */
  display: flex; align-items: center; gap: var(--e3);
}
.nav-titulo::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--tom-branco-8), transparent);
}

.side-foot { border-top: 1px solid var(--tom-branco-4); background: var(--side-foot); }
.perfil .av { border: 1px solid var(--tom-primario-35);
}
.perfil button {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--tom-branco-50); font: inherit; font-size: var(--f-micro); padding: var(--e1);
}
.perfil button:hover { color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 260px; }

/* `.main > header` e NÃO `header`.
 *
 * Este bloco desenha a barra do topo do aplicativo. Como seletor de elemento
 * puro, ele reivindicava TODO `<header>` da página: quando o Plano ganhou
 * cabeçalhos de seção semânticos, cada um deles nasceu com 64px de altura,
 * `display:flex` e `position:sticky`, e o número, o título e a descrição
 * saíram lado a lado grudados no topo.
 *
 * Seletor de elemento nu para um componente específico é uma armadilha que só
 * dispara quando alguém usa a tag pelo motivo certo. */
/* ═════════════════════════════════════════════════════════════════════════
   O CABEÇALHO É UMA LINHA, EM QUALQUER LARGURA.

   Estas regras viviam dentro de `@media (max-width: 900px)`, e o comentário de
   lá já descrevia este defeito: "com título mais longo o bloco de créditos
   descia e cobria o sino". O ponto de corte é que estava errado — ele mede a
   JANELA, e quem aperta a barra é a ÁREA DE CONTEÚDO. Num tablet de 1024 a
   barra lateral come 208px e sobram 816: a barra some do ponto de corte de
   900 e volta a quebrar.

   Medido a 1024px, na tela de um relatório: a altura fixa de 64px com o
   conteúdo em duas linhas jogava o sino para y = -9, ou seja, PARA FORA da
   tela, e o botão da ação flutuava por cima da migalha.

   Barra não quebra. Não é regra de tablet, é regra de barra. ═════════════ */
.main > header {
  min-height: 64px; flex-shrink: 0; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: var(--e4);
  padding: 0 var(--e5); position: sticky; top: 0; z-index: 40;
}
/* A migalha é quem cede: ela diz onde se está, e o h1 logo abaixo repete o
   nome da tela. O sino, os créditos e a ação da tela não têm segunda chance. */
.main > header .crumb { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* O NÍVEL DO PRODUTO SAIU DE VEZ (22.09.2026). Ele já sumia abaixo de 1080px
   por falta de espaço, e o que sobrou foi perceber que ele aparecia só ACIMA
   de 1080 — exatamente onde a barra lateral está visível com a marca escrita
   por extenso. Dizia "Oráculo Business" ao lado de um "Oráculo Business", e
   custava uns 140px da única linha do cabeçalho que disputa espaço com as
   ações da direita. A migalha agora começa em Biblioteca. */
/* Migalha vazia não ocupa a linha nem consome o `gap` do cabeçalho: com ela
   presente e sem texto, as ações começavam 16px adiante e transbordavam. */
.main > header .crumb:empty { display: none; }
/* O RÓTULO É UM FILHO SÓ. `.creditos` é flex com `gap`, então cada nó de
   texto solto vira um item e ganha espaçamento: partir o rótulo em pedaços
   soltos abria um vão antes dos dois-pontos ("Jornadas disponíveis : 0"). */
.cred-rot { white-space: nowrap; }
@media (max-width: 900px) {
  /* ═══════════════════════════════════════════════════════════════════════
     A BARRA ESTREITA É O MATERIAL DE IMPACTO.

     ── ELA COMEÇA EM 900, E NÃO EM 560 ─────────────────────────────────────

     Este bloco valia só no telefone, e o número certo sempre foi 900: é aí que
     a BARRA LATERAL some (ver `.abrir-menu`), e a razão inteira da regra é que
     a marca precisa de casa quando a lateral não existe. Entre 561 e 900 — todo
     tablet — o produto ficava sem assinatura nenhuma, numa barra branca sobre
     fundo branco. Era o mesmo defeito, na faixa que ninguém tinha aberto para
     olhar.

     No computador a barra lateral escura é a presença da marca. Sem ela, o
     mesmo material das capas assume esse papel, e de quebra o par de controles
     ganha um fundo que os agrupa como uma coisa só.

     A BARRA É MARCA, SINO E MENU, e mais nada. O saldo saiu daqui: ele não é
     ação, e disputava espaço com as duas coisas que são. Ele voltou para a
     pílula do menu, que é onde estava antes (ver `pilula-cred` em `app.js`).
     Com a marca à esquerda e as ações à direita, a barra se equilibra sozinha
     e não precisa de centralização. Os 24px de respiro lateral caem para 16:
     numa tela de 375 eles eram 48px tirados do conteúdo. ═════════════════ */
  .main > header {
    padding: 0 var(--e4); justify-content: space-between;
    background: var(--impacto-fundo); border-bottom-color: transparent;
  }
  .main > header .marca-topo { display: flex; padding: 0; min-width: 0; gap: var(--e2); }
  .main > header .marca-topo .ic { width: 28px; height: 28px; flex: none; }
  .main > header .marca-topo .n { font-size: var(--f-corpo); white-space: nowrap; }
  /* O saldo não é ação, e o menu já o mostra. */
  .main > header .creditos { display: none; }
  /* E A AÇÃO DA TELA TAMBÉM NÃO ENTRA AQUI.
     Ela é atalho para algo que já está na página: "Abrir Plano Tático" repete
     o botão Abrir da lista de derivados, e "Gerar Plano Tático" só rola até o
     bloco de baixo, onde o preço em Jornadas está à vista. Numa tela estreita
     o documento é uma coluna só e essa rolagem é curta. Ver `acaoDaTela` em
     app.js. Sem esta linha ela entrava por cima da marca: medido a 390px, o
     botão cobria o nome do produto e empurrava o sino para debaixo dele. */
  .main > header .acao-tela { display: none; }
  /* Sobre o material, a tinta é branca. O sino e o menu viram vidro: fundo
     translúcido em vez de superfície branca, que ali viraria dois selos.

     A ESPECIFICIDADE SOBE DE PROPÓSITO. As regras base de `.creditos` e de
     `.abrir-menu` moram DEPOIS deste bloco no arquivo, e com o mesmo peso elas
     venciam por ordem: o chip ficava com fundo cinza-claro e tinta branca, ou
     seja, ilegível. Subir o peso resolve sem depender de quem vem antes. */
  .main > header .sino,
  button.abrir-menu { background: var(--tom-branco-12); border-color: var(--tom-branco-25); color: #fff; }
  .main > header .sino:hover, button.abrir-menu:hover { background: var(--tom-branco-18); }
  .main > header .sino.on { background: var(--tom-branco-25); border-color: var(--tom-branco-35); }
  button.abrir-menu span { background: #fff; }

  /* E A MIGALHA SAI DE VEZ — no tablet também, e pela mesma razão.
     Ela cede com reticências, e cortada não diz onde se está: sobra
     "Biblioteca · Empresa de Exempl…" a 768px e "Biblic" a 600px, sempre comendo
     JUSTAMENTE a última parte, que é onde a pessoa está. Migalha que perde o
     fim é pior que migalha nenhuma, porque ocupa espaço e parece defeito. Nada
     se perde: o h1 logo abaixo nomeia a tela, e nos relatórios o olho da capa
     repete o tipo. Ela volta inteira no computador, onde cabe inteira. */
  .main > header .crumb { display: none; }
}
.main > header .acoes { flex-shrink: 0; flex-wrap: nowrap; }
.crumb { font-size: var(--f-corpo); color: var(--dim-ink); }
.crumb b { color: var(--ink); font-weight: 600; }

.creditos {
  display: flex; align-items: center; gap: var(--e2); height: 36px; white-space: nowrap;
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: var(--r); padding: 0 var(--e3); font-family: var(--mono);
}
.creditos .bolinha { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--tom-ok-60); }

.conteudo {
  /* ═══════════════════════════════════════════════════════════════════════
     O TETO SAIU DE 1180 PARA 1600, e mudou de dono.
     Num monitor de 2560 sobravam cerca de 1150px vazios: a Biblioteca, o
     admin, as tabelas e a página da empresa ficavam apertados enquanto meia
     tela não era usada. Mas soltar tudo estragaria justamente onde está o
     valor do produto: a 2000px uma linha de prosa passa de 250 caracteres, e
     ninguém lê isso.
     Então o teto não foi removido, foi MOVIDO para quem lê (`.dossie`, logo
     abaixo). As telas de trabalho crescem; o relatório mantém exatamente a
     largura de leitura de hoje. */
  flex: 1; padding: var(--e5) var(--e5) var(--e7); max-width: 1600px; width: 100%;
  /* O CONTÊINER "tela". Os componentes que vivem aqui dentro medem o próprio
     espaço (`@container tela`), não a janela: com a barra lateral aberta numa
     janela de 900px o conteúdo tem 600px, e um cartão que só apertava abaixo
     de 640px DE JANELA ficava espremido sem perceber. */
  container-type: inline-size; container-name: tela;
}

/* ── o sino ───────────────────────────────────────────────────────────── */

.sino-wrap { position: relative; }
.sino {
  width: 36px; height: 36px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: all var(--t-rapido);
}
.sino:hover { background: var(--surface-hi); }
.sino.on { background: var(--primary-soft); border-color: var(--primary-line); }
/* `.sino-n` E NÃO `.contador`, e a diferença de nome é o conserto.
 *
 * Duas coisas sem relação nenhuma dividiam a classe `.contador`: o badge do
 * sino e o contador de caracteres embaixo do campo de texto do formulário. A
 * regra genérica dele, lá na seção 6, traz `margin-top` e `text-align: right`,
 * que nenhuma regra daqui sobrescrevia porque elas nem existem aqui.
 *
 * O resultado media: o badge descia var(--e2) e ia parar EM CIMA do desenho do
 * sino, em vez de ficar no canto. Nome próprio resolve de vez, porque não há
 * mais o que colidir.
 *
 * O padding também encolheu. Ele era var(--e2) dos dois lados, e um badge de
 * um dígito ficava com 29,7px de largura dentro de um botão de 36px, vazando
 * 6,2px pela direita. A fonte fica em --f-micro (12px), que é o piso do
 * sistema: quem encolhe é o espaço em volta, nunca a letra. */
.sino-n {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 var(--e1); border-radius: var(--r-pill); color: #fff;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
}
.drop {
  position: absolute; top: 46px; right: 0; width: 390px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); overflow: hidden; z-index: 50;
}
.drop-h {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--border); background: var(--surface-sutil);
}
.drop-h .t { font-family: var(--brand); font-weight: 600; font-size: var(--f-corpo); }
/* `font: inherit` PRIMEIRO. Um `<button>` não herda fonte: sem esta linha ele
   sai na fonte padrão do navegador, e "marcar todas como lidas" aparecia em
   Arial no meio de uma gaveta inteira em Onest. O `.drop-f button` logo abaixo
   já fazia certo — esta era a única da dupla que faltava. */
.drop-h .marcar { margin-left: auto; font: inherit; font-size: var(--f-micro); color: var(--primary); cursor: pointer; background: none; border: 0; }
.drop-corpo { max-height: 420px; overflow-y: auto; }
.drop-f { padding: var(--e3); text-align: center; border-top: 1px solid var(--border); background: var(--surface-sutil); }
.drop-f button { background: none; border: 0; color: var(--primary); font: inherit; font-size: var(--f-apoio); font-weight: 500; cursor: pointer; }

/* ═════════════════════════════════════════════════════════════════════════
   NO TELEFONE A GAVETA DO SINO NÃO PENDURA NO SINO.

   Ela é `position: absolute; right: 0` presa ao botão, com 390px de largura e
   teto de 92vw. Num telefone de 375 isso dá 345px ancorados num botão que fica
   a 160px da esquerda: medido, o painel começava em x = -185, ou seja, METADE
   dele nascia fora da tela, e o que sobrava cobria o conteúdo pela metade.

   Aqui ela deixa de ser um balão do botão e passa a ser uma folha do alto da
   tela, presa à janela e não ao sino. O corpo ganha teto em altura de tela,
   senão com dez avisos ela passa do rodapé. ═══════════════════════════════ */
@media (max-width: 560px) {
  /* E ela PENDE DA BARRA, não flutua. Com folga nas laterais e cantos
     arredondados ela virava um cartão solto no meio da tela, sem relação
     visível com o sino que a abriu. Encostada na barra, de ponta a ponta e com
     os cantos de cima retos, ela lê como a barra se abrindo. */
  .drop {
    position: fixed; top: 64px; left: 0; right: 0; width: auto; max-width: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    border-top: 0; border-left: 0; border-right: 0;
  }
  .drop-corpo { max-height: calc(100vh - 180px); }
}

/* ── painel de pendências ─────────────────────────────────────────────── */

.painel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--e5); box-shadow: var(--shadow-card); }
.painel-h { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--border); background: var(--surface-sutil); }
.painel-h .tt { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink); }
.painel-h .n { background: var(--surface-hi); color: var(--dim-ink); font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; min-width: 19px; height: 19px; padding: 0 var(--e2); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; }

.emp { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e5) var(--e2); background: var(--surface-sutil); border-bottom: 1px solid var(--border); }
.emp .pt2 { width: 5px; height: 5px; border-radius: 50%; background: var(--papel-linha); }
.emp .nm { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--papel-tinta); }

.row { display: flex; align-items: center;                                border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface-sutil); }
.row .ico { width: 34px; height: 34px; border-radius: var(--r); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--f-corpo); }
.ico.urg { background: var(--tom-warn-8); }
.ico.inf { background: var(--primary-soft); color: var(--primary); }
.ico.ok { background: var(--tom-ok-8); color: var(--ok-ink); }
.ico.alerta { background: var(--tom-danger-8); color: var(--danger-ink); }
.row .txt { flex: 1; min-width: 0; }
.row .t1 { font-size: var(--f-corpo); font-weight: 600; }
.row .t2 { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e0); }

.h-tela { font-size: var(--f-tela); line-height: 1.2; letter-spacing: var(--tr-tight); }

.chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--f-micro); text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--r-xs); margin-left: var(--e2); white-space: nowrap; }
.chip.tr { background: var(--tom-danger-8); color: var(--danger-ink); }
.chip.ap { background: var(--tom-warn-12); color: var(--warn-ink); }
/* `--dim-ink` e nao `--papel-tinta`. O `--papel-*` e a escala da IMPRESSAO,
   calibrada para laser sobre folha branca, e por isso ele nao e redefinido no
   admin escuro: um chip de tela usando token de papel fica com a cor do papel
   sobre o fundo preto, e deu 2.93 medido, em 27 pastilhas so na aba Motores.
   `--dim-ink` e o token de tela para texto secundario, e ele acompanha o tema. */
.chip.nt { background: var(--surface-hi); color: var(--dim-ink); }
.chip.ok { background: var(--tom-ok-8); color: var(--ok-ink); }

/* ── botões, cards, formulário ────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  height: 40px; padding: 0 var(--e5); border-radius: var(--r);
  border: 1px solid transparent; font: inherit; font-size: var(--f-corpo); font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all var(--t-rapido); white-space: nowrap;
}
.btn.p { background: var(--impacto-fundo); color: #fff; border-color: transparent; }
.btn.p:hover { filter: brightness(1.18); }
.btn.s { background: var(--surface); border-color: var(--border); color: var(--dim-ink); }
.btn.s:hover { border-color: var(--papel-linha); color: var(--ink); }
.btn.g { background: var(--gold-ink); color: #fff; }
/* 36px, E NÃO 33. O 33 não pertencia a escala nenhuma: não é múltiplo de 4,
   não é o alvo de dedo de 44, e ficava três pixels abaixo do 36 que duas outras
   regras deste arquivo já impunham ao MESMO botão — o resultado era o `pq`
   saindo a 33px no Toolbox e a 36px na Biblioteca, lado a lado no produto.
   Com 36 aqui, aquelas duas regras viram repetição e saem. Restam quatro
   alturas, todas na grade e cada uma com motivo: 36 miúdo, 40 normal, 44 alvo
   de dedo, 48 cerimônia. */
.btn.pq { height: 36px; padding: 0 var(--e4); font-size: var(--f-apoio); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ═══════════════════════════════════════════════════════════════════════════
 *  O ANEL DE FOCO DO BOTÃO, que era o padrão laranja do Chrome.
 *
 *  Achado da auditoria do caminho do dinheiro (08.09.2026): este arquivo tem
 *  setenta e cinco regras de `:focus-visible` e nenhuma para a classe de botão
 *  mais usada do produto. Aparecia sem avisar no lugar pior possível: o
 *  `<dialog>` foca o primeiro elemento ao abrir, então o modal de compra abria
 *  com um anel laranja de sistema em volta do botão "Fechar" — a única coisa
 *  destacada na tela era a saída.
 *
 *  Sobre superfície de impacto o anel vira branco, pelo mesmo motivo que o
 *  botão primário vira: azul sobre marinho não se vê.
 * ═══════════════════════════════════════════════════════════════════════════ */
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.impacto .btn:focus-visible { outline-color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
/* Dentro do bento a grade e SEMPRE 2x2: `auto-fit` ali criava tres numa
   linha e um orfao na outra, que e o defeito que a Visao Geral tinha. */
.cards-2x2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; margin-bottom: 0; }
.c {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e5);
  min-height: 132px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--e4); box-shadow: var(--shadow-card);
  transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.c:hover { box-shadow: var(--shadow-hover); }
.c-ic { color: var(--faint-ink); }
.c .v { font-family: var(--brand); font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.c .h { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e1); }
/* O cartao de contraste. Fundo da barra lateral, e nao um degrade: e a mesma
   tinta escura que o produto ja usa, entao ele pertence a casa. */
.c.escuro { background: var(--side); border-color: transparent; }
.c.escuro .v { color: #fff; }
.c.escuro .h, .c.escuro .c-ic { color: var(--tom-branco-60); }

.caixa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e5); box-shadow: var(--shadow-card); }
.caixa + .caixa { margin-top: var(--e4); }

label { display: block; font-size: var(--f-apoio); font-weight: 600; margin-bottom: var(--e2); }
label .op { font-weight: 400; color: var(--faint-ink); }
input, textarea, select {
  width: 100%; padding: var(--e3) var(--e3); border: 1px solid var(--border); border-radius: var(--r);
  font: inherit; font-size: var(--f-corpo); background: var(--surface); color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary-line); outline-offset: 1px; border-color: var(--primary); }
textarea { min-height: 84px; resize: vertical; }
.campo .dica { font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e2); }

.aviso { border-radius: var(--r);                     font-size: var(--f-apoio);                      border: 1px solid; }
.aviso.erro { background: var(--tom-danger-4); border-color: var(--tom-danger-25); color: var(--danger-ink); }
.aviso.ok { background: var(--tom-ok-8); border-color: var(--tom-ok-25); color: var(--ok-ink); }
.aviso.info { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }
/* O âmbar: atenção sem erro. Faltava, e dois avisos da aba Compras usavam a
   classe e saíam só com a borda, sem fundo nem cor (10.09.2026). */
.aviso.ap { background: var(--tom-warn-8); border-color: var(--tom-warn-25); color: var(--warn-ink); }

table { width: 100%; border-collapse: collapse; font-size: var(--f-corpo); }
th { text-align: left; font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink); font-weight: 400; padding: 0 var(--e3) var(--e3) 0; border-bottom: 1px solid var(--border); }
td { padding: var(--e3) var(--e3) var(--e3) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.tabela-wrap { overflow-x: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
 *  ⚠️ OS BOTÕES QUE "SOMEM" NO CELULAR ESTÃO A 140PX DA BORDA.
 *
 *  Bloqueador da auditoria do painel (08.09.2026). Medido a 375px: em Contas
 *  o "Abrir" terminava em 413; em Gerações, "Abrir" em 446 e "Rastro" em 524;
 *  no Catálogo, "Salvar" em 390. A página não rolava de lado; a tabela vivia
 *  num `.tabela-wrap { overflow-x: auto }` — e era isso, a regra inteira. Sem
 *  sombra na borda, sem coluna fixa, sem dica: a tabela parecia inteira e a
 *  única ação estava além de uma borda que não convidava a deslizar. Para quem
 *  opera, o efeito era "o botão não existe no celular".
 *
 *  O conserto é um só para as dezoito tabelas: quando a caixa ROLA de verdade
 *  (a classe `.rola` é posta por `vigiarTabelas` em app.js, medindo
 *  `scrollWidth > clientWidth`), a última coluna — que em toda tabela do
 *  produto é a da ação — fica presa à direita, com fundo opaco e uma sombra
 *  na borda esquerda dizendo que há mais por baixo. No computador, onde nada
 *  rola, nada muda.
 * ═══════════════════════════════════════════════════════════════════════════ */
.tabela-wrap.rola th:last-child,
.tabela-wrap.rola td:last-child {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface);
  box-shadow: -10px 0 10px -10px var(--tom-tinta-50);
}
.tabela-wrap.rola tr:hover td:last-child { background: var(--surface-hi); }
.tabela-wrap.rola tr.sel td:last-child { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
/* No telefone a caixa da tabela sangra até a borda do cartão: eram 66px de
   recuos aninhados numa tela de 375, e cada pixel de largura aqui é uma
   coluna que cabe. O recuo volta dentro da primeira e da última célula. */
@container tela (max-width: 560px) {
  .caixa > .tabela-wrap { margin-inline: calc(var(--e5) * -1); }
  .caixa > .tabela-wrap th:first-child, .caixa > .tabela-wrap td:first-child { padding-left: var(--e5); }
  .caixa > .tabela-wrap th:last-child, .caixa > .tabela-wrap td:last-child { padding-right: var(--e5); }
}

/* O ESTADO VAZIO EM COLUNA (20.09.2026, o dono viu no Delfos). Era um bloco de
   texto centralizado, e o botão, sendo inline, terminava grudado no fim da
   última linha, encostado na borda direita do cartão. Agora título, frase e
   botão são três itens empilhados, com vão entre eles, e a frase tem largura de
   leitura. Vale para todas as telas: a peça é a mesma. */
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  text-align: center; color: var(--faint-ink);
}
.vazio .t { font-size: var(--f-corpo); font-weight: 600; color: var(--dim-ink); }
.vazio > :not(.t):not(.btn) { max-width: 62ch; }

/* ── progresso da geração ─────────────────────────────────────────────── */

.barra { height: 6px; background: var(--surface-hi); border-radius: var(--r-pill); overflow: hidden; margin: var(--e4) 0 var(--e3); }
.barra i { display: block; height: 100%; background: var(--primary); border-radius: var(--r-pill); transition: width 0.5s var(--curva); }
.etapas { list-style: none; padding: 0; margin: 0; }
.etapas li { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0; font-size: var(--f-corpo); color: var(--dim-ink); }
.etapas li .b { width: 20px; height: 20px; border-radius: 50%; background: var(--tom-ok-12); color: var(--ok-ink); display: flex; align-items: center; justify-content: center; font-size: var(--f-micro); flex-shrink: 0; }
.etapas li.atual { color: var(--ink); font-weight: 600; }
.etapas li.atual .b { background: var(--primary-soft); color: var(--primary); }
/* A etapa em que a geração parou. Sem isto o ◷ girava para sempre ao lado do
   aviso de que não concluiu. */
.etapas li.parou { color: var(--ink); font-weight: 600; }
.etapas li.parou .b { background: var(--tom-danger-12); color: var(--danger-ink); }

/* ── autenticação ─────────────────────────────────────────────────────── */

/* ── A PORTA DE ENTRADA ───────────────────────────────────────────────────
 *
 * Estrutura portada do login do MVP. As cores já eram as mesmas (`--side` no
 * fundo, `--primary` no botão); o que faltava aqui era o ARRANJO: o selo acima
 * do cartão, o filete de gradiente no topo, o ladrilho do ícone, o rótulo em
 * versalete monoespaçado com o ícone dentro do campo, a faixa de criptografia
 * e o convite num painel próprio.
 *
 * O brilho do fundo é UM gradiente radial, e não movimento: esta tela aparece
 * antes de qualquer coisa e não pode custar quadro nenhum. O dot-grid antigo
 * fica, ele é a assinatura da sidebar e amarra as duas telas.
 */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: var(--e5); background: var(--side);
        }

/* O selo. Versalete com espaçamento porque é etiqueta, não frase. */
.auth .au-selo { display: flex; align-items: center; gap: 7px; margin-bottom: var(--e4);
                 font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.16em;
                 text-transform: uppercase; color: #8b929e; }
.auth .au-selo .ic { color: #6f8dff; }

.auth .cartao { position: relative; width: 100%; max-width: 430px; background: var(--surface);
                border-radius: var(--r-lg); padding: var(--e6); overflow: hidden;
                box-shadow: 0 30px 70px -20px var(--tom-sombra-60); }
/* O filete muda de cor no desvio: quem está recuperando acesso saiu do caminho
   normal, e a tela diz isso antes do texto dizer. */
.auth .cartao::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px;
                        background: var(--primary); }
.auth .cartao.desvio::before { background: #7c3aed; }

.auth .au-cabeca { text-align: center; margin-bottom: var(--e5); }
.auth .au-ladrilho { display: inline-grid; place-items: center; width: 54px; height: 54px;
                     border-radius: 15px; margin-bottom: var(--e3); color: #fff;
                     background: var(--primary);
                     box-shadow: 0 10px 22px -8px var(--tom-primario-50); }
.auth h1 { font-size: var(--f-secao); margin-bottom: 4px; letter-spacing: -0.02em; }
.auth .sub { color: var(--dim-ink); font-size: var(--f-apoio); margin: 0; max-width: 34ch;
             margin-inline: auto; line-height: 1.5; }

/* O rótulo é etiqueta de campo, no mesmo dialeto do selo lá de cima. */
.auth .au-campo label { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink); }
.auth .au-caixa { position: relative; }
.auth .au-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
               color: var(--faint-ink); pointer-events: none; }
.auth .au-caixa input { padding-left: 38px; }
.auth .au-caixa:focus-within .au-ic { color: var(--primary); }

.auth .au-esqueci { text-align: right; margin: -6px 0 var(--e4); }
.auth .au-esqueci button { background: none; border: 0; padding: 6px 2px; font: inherit;
                           font-size: var(--f-apoio); color: var(--dim-ink); cursor: pointer; }
.auth .au-esqueci button:hover { color: var(--primary); text-decoration: underline; }

.auth .au-dica { font-size: var(--f-micro); color: var(--faint-ink); margin: -8px 0 var(--e4); }

/* 46px de altura: acima do piso de toque de 44px, com a folga da sombra. */
.auth .au-acao { width: 100%; min-height: 46px; display: inline-flex; align-items: center;
                 justify-content: center; gap: 8px; font-size: var(--f-corpo); font-weight: 600;
                 box-shadow: 0 12px 26px -12px var(--tom-primario-70); }

/* A faixa que separa o que se DIGITA do que se OFERECE. */
.auth .au-cripto { display: flex; align-items: center; justify-content: center; gap: 6px;
                   margin: var(--e5) 0 var(--e4); padding-top: var(--e4);
                   border-top: 1px solid var(--border);
                   font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em;
                   text-transform: uppercase; color: var(--faint-ink); }

.auth .au-convite { text-align: center; background: var(--surface-hi); border: 1px solid var(--border);
                    border-radius: var(--r-md); padding: var(--e4); }
.auth .au-convite p { font-size: var(--f-apoio); color: var(--dim-ink); margin: 0 0 var(--e3); }
/* 44, e não 42: é um botão de largura inteira numa tela de entrada, tocado no
   telefone. 42 não era degrau de nada. */
.auth .au-convite .btn { width: 100%; min-height: 44px; }

/* #8b929e sobre #0d0f14 dá 6,4:1. O rodapé do MVP é quase invisível, e o piso
   de 12px deste produto vale também para a linha que ninguém lê. */
.auth .au-rodape { margin: var(--e5) 0 0; font-family: var(--mono); font-size: var(--f-micro);
                   color: #8b929e; text-align: center; }

/* ── dossiê (render do artefato) ──────────────────────────────────────── */

/* ── AS SETE FAMÍLIAS ────────────────────────────────────────────────────
 *
 * Cada relatório tem uma cor, e ela é o que faz a pessoa saber onde está antes
 * de ler o título. Os três tokens têm trabalhos diferentes:
 *
 *   --fam       o traço de identidade: borda, filete, ícone. Pode ser vivo.
 *   --fam-text  a cor em TEXTO. Medida contra o branco E contra o tingido.
 *   --fam-soft  o fundo, a 7% ou 8%. Nunca carrega texto sozinho.
 *
 * Todos os `--fam-text` foram medidos acima de 6:1 nas duas superfícies, com
 * folga de propósito: eles caem em rótulo pequeno e em maiúscula com tracking,
 * que lê menor do que o número sugere.
 *
 * Raio-X, verde. */
/* ═══ A PROSA DO RELATÓRIO, JUSTIFICADA (20.09.2026, pedido do dono) ══════
 *
 * `text-align: justify` sozinho é o remédio pior que a doença: sem
 * hifenização o navegador só tem os espaços para esticar, e numa linha longa
 * em português — que tem palavra comprida — isso abre buracos entre as
 * palavras e forma os "rios" de branco descendo pelo parágrafo.
 *
 * Por isso os dois vêm juntos. `hyphens: auto` funciona porque o documento
 * declara `lang="pt-BR"`: é a tabela de hifenização do idioma que o navegador
 * carrega a partir dali. Sem o `lang` correto, `hyphens: auto` não faz nada e
 * a justificação volta a ser a versão ruim.
 *
 * `text-wrap` não entra aqui: `balance` e `pretty` brigam com justify.
 *
 * Só a PROSA. Rótulo, número, selo e o que vive em grade continuam alinhados
 * à esquerda — justificar uma linha de três palavras estica ela até a borda. */
/* A CLASSE É POSTA POR MEDIÇÃO, não por seletor — ver `telas/prosa-justa.js`.
   Justificar pede linha longa: abaixo de 560px o navegador só tem os espaços
   para esticar e abre os "rios" de branco. Só no Plano e no Radar são 31
   caminhos estruturais diferentes de prosa larga, então lista de seletor aqui
   nasceria incompleta e apodreceria no primeiro render novo. */
.prosa-justa {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ⚠️ O TETO DE LEITURA É OUTRA CLASSE, e a separação foi paga com um erro.
   Eu o pendurei na `.prosa-justa`, que começa em 120 caracteres, e blocos de
   três linhas apareceram espremidos com metade do cartão vazia — o defeito
   que o dono já tinha mandado tirar, de volta por outra porta.
   `.prosa-medida` exige texto LONGO além da largura (ver `prosa-justa.js`):
   linha comprida só cansa quando há muitas linhas.
   Não oscila: 67ch dá uns 570px nesta fonte, acima dos 560 que a medição
   exige, então o elemento encolhido continua qualificado. */
.prosa-medida { max-width: var(--medida-leitura); }

/* ═══ O CORPO DO RELATÓRIO PREENCHE O CARTÃO (20.09.2026, decisão do dono) ══
 *
 * Havia um teto de 78 caracteres por linha em toda prosa de relatório. Ele é
 * a medida de leitura clássica e existia por um bom motivo, mas com o cartão
 * na largura da plataforma (1304) ele deixava o texto ocupando pouco mais da
 * metade — e ao lado de uma barra de termômetro que atravessa o cartão
 * inteiro, a diferença lê como defeito, não como respiro.
 *
 * O dono viu isso três vezes e decidiu: o texto acompanha o cartão.
 *
 * ⚠️ O QUE ISSO CUSTA, para quem mexer aqui depois: a linha passa a ter cerca
 * de 125 caracteres numa tela larga, contra os 45–90 que a tipografia
 * recomenda para leitura corrida. É uma troca consciente — consistência de
 * largura entre os blocos, contra conforto de linha. Se um dia a queixa virar
 * "a linha está longa demais", o botão é aqui: um `max-width` entre 95ch e
 * 110ch devolve conforto sem voltar à coluna estreita.
 *
 * ── E A QUEIXA VEIO (22.09.2026) ─────────────────────────────────────────
 *
 * Medido depois, o custo era maior do que este comentário estimava: 153
 * caracteres por linha no Raio-X e 169 no Radar, não 125. O botão previsto
 * acima foi apertado, só que mais fundo do que os 95–110ch sugeridos aqui —
 * `--medida-leitura` está em 67ch, uns 74 caracteres.
 *
 * O teto NÃO volta a este seletor: ele mora em `.prosa-justa`, que é posta
 * por medição e por isso já seleciona só a prosa larga. O bloco continua com
 * a largura da plataforma, como o dono decidiu em 20.09; o que ganhou teto é
 * a linha dentro dele.
 *
 * O texto de APOIO continua estreito: `.hero-sub` (62ch), `.tb-nota` (62ch) e
 * `.tb-base-n` (68ch) são legenda e nota de rodapé, não corpo. */

/* A LARGURA DO RELATÓRIO É A DA PLATAFORMA (20.09.2026, decisão do dono).
   Sem teto próprio: o `.dossie` ocupa o mesmo que a Visão Geral, o Estúdio e
   as outras telas. Tentei antes uma coluna de leitura de 900 com trilho ao
   lado; ficou fora do padrão e o dono cortou. Consistência entre telas vale
   mais que a folga dentro do cartão. */



/* TODO RELATÓRIO É UM `.dossie`: Raio-X, Plano, Radar, Toolbox, Conselho,
   Mentor e Manual. O teto de leitura mora aqui, e é o mesmo 1180 que o
   conteúdo inteiro tinha antes, para o relatório não mudar de forma nenhuma.
   Alinhado à esquerda, e não centrado, para continuar casando com a migalha e
   o cabeçalho da tela. */
.dossie { --fam: #16A34A; --fam-text: #166534; --fam-soft: rgba(22, 163, 74, 0.07); --fam-icone:#166534; }
/* ── A CAPA ────────────────────────────────────────────────────────────────
 * Porte do `.rc-cover` do render-core.css do MVP, o sistema de design dos
 * renders. Ele estava lá pronto e sem uso: só o arquivo de demonstração o
 * consumia.
 *
 * O que separa "dossiê" de "tela de sistema" são quatro gestos baratos: o fio
 * de timbre no topo na cor da família, o nome da empresa empurrado para BAIXO
 * (enquadramento de capa de livro: marca em cima, assunto embaixo, respiro no
 * meio), o divisor em ouro, e o score num anel em vez de numa caixa.
 * ------------------------------------------------------------------------ */
/* A ATMOSFERA. Canvas atrás de tudo, sangrando para fora da capa pela
   direita: é ali que sobra espaço em todas as quatro capas, e é o lado oposto
   ao do título. `z-index: 0` porque `.impacto > *` sobe todo filho direto para
   1, e a atmosfera é justamente o que tem que ficar embaixo. */
/* `.impacto > .atm` e nao `.atm`: `.impacto > *` sobe todo filho direto para
   `position: relative; z-index: 1`, mora mais adiante no arquivo e tem a mesma
   especificidade -- entao ganhava, e a atmosfera saia do lugar e ficava por
   cima do texto. Um seletor a mais resolve, e a armadilha fica anotada. */
.impacto > .atm, .atm {
  position: absolute; z-index: 0; pointer-events: none;
  /* BEM MAIOR QUE O CABEÇALHO, de propósito. A nébula tem uma borda: ela some
     antes da moldura do próprio canvas, senão apareceria um retângulo. Se o
     canvas for maior que a capa, essa borda cai fora do recorte e ninguém a vê
     -- o que se vê é só o miolo denso, e o gás parece continuar para além do
     cartão. É o oposto de esconder um defeito: é enquadrar o que interessa. */
  /* Grande e empurrada para fora pela direita: assim o lado onde o gás se
     apaga cai FORA do recorte da capa, e o que sobra dentro dela é só miolo.
     A borda de esquerda continua sendo um degradê, que e o que uma nuvem faz
     de qualquer jeito. */
  /* ENCOLHER, E NÃO AFASTAR. A primeira tentativa foi empurrar a nuvem para
     fora, e ela sumiu: o que ficava dentro da capa era só a franja apagada.
     O que resolve é reduzir o ALCANCE — nuvem menor, densa, ancorada no canto
     direito. Assim ela chega inteira ao canto e morre antes do anel do score,
     que volta a ser a coisa mais clara daquele lado. */
  width: 560px; height: 560px; right: -190px; top: 50%; transform: translateY(-50%);
}
.hero.impacto, .capa.impacto { position: relative; overflow: hidden; }
/* AQUI HAVIA UM TAMANHO PARA CAPA ESTREITA, e ele virou letra morta: nenhuma
   capa abaixo de 860px tem canvas para dimensionar, porque `atmosferaDaCapa`
   não cria atmosfera em capa empilhada. Um tamanho só, para o único caso que
   existe. */

/* A espera: a nébula cobre o palco inteiro, atrás dos anéis. */
/* A NÉBULA É A ESPERA.
   Ela tomou o lugar dos três anéis e do ícone: os anéis diziam "estou
   trabalhando" e nada mais, enquanto o gás diz QUANTO já existe — ele adensa
   com o percentual que vem do fluxo de eventos. Um indicador que muda de
   matéria conta mais que um que só gira.

   E a espera passou ao material de impacto. A nébula é feita de luz sobre
   marinho; sobre papel branco ela desbota e vira uma nuvem pálida. Esperar
   dois a cinco minutos também é o momento em que o produto pode se dar ao
   luxo do palco escuro — e a entrega, logo depois, volta ao claro, o que faz
   a troca de fundo virar o próprio sinal de que acabou. */
.gerando > .ger-atm {
  display: block; margin: 0 auto var(--e3); width: 260px; height: 260px; pointer-events: none;
}

.capa {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: var(--e7) var(--e7) var(--e5); margin-bottom: var(--e5);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; min-height: 300px;
}
/* O timbre: o fio da família, chapado. Ele esmaecia para a direita, e o
   esmaecer era o único degradê que restava numa capa que já tem grade,
   ouro e título grande: sem ele, a capa fica mais quieta e o fio mais fio. */
.capa::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: var(--fam);
}
.capa > * { position: relative; z-index: 1; }

.capa-marca { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.22em; color: var(--gold-ink); }
.capa .kicker {
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim-ink); font-weight: 600; margin-top: var(--e2);
}
/* `margin-top: auto` é o gesto: empurra o nome para o fim do bloco. */
.capa h1, .conteudo .capa h1 {
  /* O mesmo título das capas do Raio-X, do Plano e do Radar (06.09.2026). */
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(var(--f-heroi), 5vw, 56px); line-height: 1; letter-spacing: -0.04em;
  margin-top: var(--e3); padding-top: 0; overflow-wrap: anywhere;
}
.capa-sub { font-size: var(--f-corpo); color: var(--dim-ink); margin-top: var(--e2); }
.capa-div { height: 1px; margin: var(--e5) 0 var(--e5); background: var(--tom-ouro-35); }
.capa-baixo { display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap; }
.capa-pe {
  margin-top: var(--e5); font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint-ink);
}

/* O anel lê como instrumento; um retângulo com borda lê como etiqueta. O arco
   é proporcional à nota, então o número é visto antes de ser lido. */
.capa-anel { position: relative; width: 104px; height: 104px; flex-shrink: 0; --anel: var(--ok); }
.capa-anel.faixa-ap { --anel: var(--warn); }
.capa-anel.faixa-tr { --anel: var(--danger); }
.capa-anel .ca-trilho { stroke: var(--surface-hi); }
.capa-anel .ca-arco { stroke: var(--anel); }
.capa-anel .ca-marca { stroke: var(--border); stroke-width: 1.5; stroke-linecap: round; }
.capa-anel .ca-marca.acesa { stroke: var(--anel); }
.capa-anel .ca-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.capa-anel .ca-num b { font-family: var(--brand); font-weight: 700; font-size: var(--f-heroi); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.capa-anel .ca-num span { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.1em; color: var(--faint-ink); margin-top: var(--e0); }

/* A faixa dá régua ao número. "5" sozinho cada um interpreta do seu jeito. */
.capa-faixa { font-size: var(--f-apoio); font-weight: 600; max-width: 150px; line-height: 1.35; }
.capa-faixa.ok { color: var(--ok-ink); }
.capa-faixa.ap { color: var(--warn-ink); }
.capa-faixa.tr { color: var(--danger-ink); }

.capa-meta { display: flex;            flex-wrap: wrap; }
.capa-meta > div span {
  display: block; font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.capa-meta > div b { font-family: var(--brand); font-weight: 600; }

@container tela (max-width: 640px) {
  .capa { padding: var(--e5) var(--e5) var(--e5); border-radius: var(--r-md); min-height: 0; }
  .capa h1 { font-size: clamp(26px, 8vw, 34px); padding-top: var(--e5); }
  .capa-baixo { gap: var(--e5); }
  .capa-meta { gap: var(--e5); }
}

.secao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4); }
.secao > h2 { font-size: var(--f-leitura); margin-bottom: var(--e1); padding-left: var(--e3); border-left: 3px solid var(--fam); }
.secao > .desc { color: var(--faint-ink); font-size: var(--f-apoio); margin: 0 0 var(--e4) var(--e4); }
.secao p { margin: 0 0 var(--e3); }

.soco { background: var(--fam-soft); border: 1px solid var(--fam); border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4); }
.soco .l { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink); margin-bottom: var(--e2); }
.soco .t { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; line-height: 1.35; }

.item { border: 1px solid var(--border); border-radius: var(--r); padding: var(--e4) var(--e5); margin-bottom: var(--e3); }
.item h3 { font-size: var(--f-corpo); margin-bottom: var(--e2); }
.item .campo-l { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink); margin: var(--e3) 0 var(--e1); }
.passos { margin: var(--e2) 0 0; padding-left: var(--e5); font-size: var(--f-corpo); }
.passos li { margin-bottom: var(--e1); }

.termometro { display: flex; align-items: center; gap: var(--e4); padding: var(--e5); border-radius: var(--r); background: var(--surface-hi); }
.termometro .nivel { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; }

/* ── decisão + Conselho Estratégico ───────────────────────────────────────
 *
 * Identidade OURO, herdada do MVP: o Conselho é "Governança & Direção", e ouro
 * é a cor escassa do sistema — usada onde há julgamento, não decoração.
 * O veredito colore só a borda esquerda do cartão e o próprio título; o resto
 * da página fica neutro, senão a página inteira grita e o veredito some.
 */

/* Conselho, dourado. O `--fam-text` NÃO é o `--gold-ink` global: aquele dá
   4,53 sobre o tingido, que passa por um décimo e cai em rótulo de 12px em
   maiúscula, que lê menor do que o número promete. Aqui vale um tom próprio
   com folga, sem mexer no token que outras telas usam. */
.conselho { --fam: var(--gold); --fam-text: #75591F; --fam-soft: var(--tom-ouro-8); --fam-icone:#75591F; }

/* A decisão em julgamento, citada. É o objeto do parecer — vem antes dele. */
.decisao-citada {
  border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4);
  background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--gold);
}
.decisao-citada .l { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--e2); }
.decisao-citada .t { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 500; line-height: 1.45; }
.decisao-citada .rev { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e3); }

/* O veredito. Três estados VISUALMENTE distintos — no MVP dois deles eram iguais. */
.veredito { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4); background: var(--surface); border-left-width: 6px; }
.veredito .l { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: var(--e2); }
.veredito h2 { font-size: var(--f-tela); line-height: 1.1; margin: 0; }
.veredito .porque { margin: var(--e3) 0 0; font-size: var(--f-corpo); color: var(--dim-ink); }
.veredito.aprovado { border-left-color: var(--ok); }
.veredito.aprovado h2 { color: var(--ok-ink); }
.veredito.ajustes { border-left-color: var(--warn); }
.veredito.ajustes h2 { color: var(--warn-ink); }
.veredito.reprovado { border-left-color: var(--danger); }
.veredito.reprovado h2 { color: var(--danger-ink); }

/* Coerência × ponto cego, lado a lado — a leitura é uma comparação. */
.par { grid-template-columns: 1fr 1fr;            margin-bottom: var(--e4); }
.par .secao { margin-bottom: 0; }
.par .secao.cego > h2 { border-left-color: var(--danger); }
.par .secao.cego p { border-left: 2px solid var(--tom-danger-25); padding-left: var(--e4); font-weight: 500; }

/* A ponte para o Toolbox. Indigo, como no MVP — cor de execução, não de análise. */
.ponte { border: 1px solid rgba(79, 70, 229, 0.25); background: rgba(79, 70, 229, 0.04); border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4); }
.ponte .l { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: #4338ca; margin-bottom: var(--e2); }
.ponte h3 { font-size: var(--f-secao); color: #312e81; margin-bottom: var(--e1); }
.ponte .cmd { position: relative; margin-top: var(--e4); }
.ponte-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e3); }
.ponte textarea {
  width: 100%; min-height: 118px; resize: vertical; border-radius: var(--r); padding: var(--e4) var(--e4) var(--e7);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--mono); font-size: var(--f-micro); line-height: 1.65; color: var(--dim-ink);
}
.ponte .copiar { position: absolute; right: 12px; bottom: 12px; }

/* Captura da decisão — o gargalo real do produto: 36% dos dossiês têm decisão. */
.captura textarea {
  width: 100%; min-height: 96px; resize: vertical; border-radius: var(--r); padding: var(--e4) var(--e4);
  border: 1px solid var(--border); background: var(--surface);
  font: 400 var(--f-corpo)/1.6 var(--body); color: var(--ink);
}
.captura textarea:focus { outline: none; border-color: var(--primary-line); box-shadow: var(--foco); }
.acoes { display: flex; align-items: center;                              flex-wrap: wrap; }
.nota-acao { font-size: var(--f-apoio); color: var(--faint-ink); }  /* NÃO usar .aviso: já é a caixa de alerta */
.captura .rev-antiga { border-top: 1px dashed var(--border); margin-top: var(--e4); padding-top: var(--e3); font-size: var(--f-apoio); color: var(--dim-ink); }
.captura .rev-antiga .q { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink); }

/* ── Modo Mentor ───────────────────────────────────────────────────────────
 *
 * Família VERDE. No sistema de dossiês a cor diz o gênero do documento antes
 * de qualquer leitura: laranja = análise (Raio-X), ouro = julgamento
 * (Conselho), verde = execução (Mentor).
 */

/* Mentor, marrom claro. Saiu do verde porque o verde passou a ser o Raio-X, e
   duas famílias na mesma cor é o mesmo que nenhuma das duas ter cor. */
.mentor { --fam: #A97155; --fam-text: #7C4A2D; --fam-soft: rgba(169, 113, 85, 0.07); --fam-icone:#7C4A2D; }
.mentor .secao > h2 { display: flex; align-items: baseline; gap: var(--e2); }
.mentor .secao > h2 .ic { font-size: var(--f-corpo); line-height: 1; }

/* Checklist. Caixa desenhada em CSS: é para imprimir e marcar à caneta —
 * marcar na tela exigiria persistir estado que o Plano Tático ainda não tem. */
.tarefas { list-style: none; margin: var(--e3) 0 0; padding: 0; font-size: var(--f-corpo); }
.tarefas li { position: relative; padding: var(--e2) 0 var(--e2) var(--e5); }
.tarefas li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 14px; height: 14px;
  border: 1.5px solid var(--faint); border-radius: var(--r-xs); background: var(--surface);
}
.tarefas li strong, .passos li strong { font-weight: 600; }

/* Título de grupo dentro de uma seção ("Esta semana", "Fase 1"). O modelo
 * escreve isso como uma linha inteira em negrito; vira rótulo, não parágrafo. */
.grupo-l { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint-ink); margin: var(--e4) 0 var(--e2); }
.grupo-l:first-child { margin-top: 0; }
.grupo-l strong { font-weight: inherit; }

/* A única coisa para fazer hoje. Fecha o guia e é o que mais gera ação. */
.passo-unico { border: 1px solid var(--ok); background: var(--tom-ok-4); border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4); }
.passo-unico .l { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok-ink); margin-bottom: var(--e2); }
.passo-unico .t { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; line-height: 1.35; }

/* ── PLANO TÁTICO ──────────────────────────────────────────────────────────
 * Família roxa, a mesma do `render-core.css` do MVP (#7C3AED). O cliente
 * reconhece o documento pela cor antes de ler o título.
 * ------------------------------------------------------------------------ */
/* Plano Tático, azul. E é um azul PRÓPRIO, não o `--primary` da marca: o azul
   do produto significa "esta é a ação principal" em todo botão da plataforma, e
   dar a ele um segundo significado faria a cor deixar de dizer as duas coisas. */
.plano { --fam: #2563EB; --fam-text: #1D4ED8; --fam-soft: rgba(37, 99, 235, 0.07); --fam-icone:#1D4ED8; }



/* A tática: fechada por padrão. Seis blocos de passos abertos ao mesmo tempo
 * viram uma parede que o dono rola sem achar a fase seguinte. */
.tat { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--e3); background: var(--surface); overflow: hidden; }
.tat-cab {
  width: 100%; display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e4); background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.tat-cab:hover { background: var(--fam-soft); }
.tat-cab:focus-visible { outline: 2px solid var(--fam); outline-offset: -2px; }
/* A FAIXA DE DIAS ERA UMA PÍLULA CHEIA na cor da família, e num cartão de seis
   táticas isso são seis manchas roxas antes de qualquer título. Em contorno ela
   continua legível, para de competir com o texto que rotula, e o "dias" escrito
   diz o que "16-30" sozinho não dizia. */
.tat-dias {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--fam) 30%, transparent);
  padding: var(--e1) var(--e2); border-radius: var(--r-xs); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tat-titulo { font-weight: 600; font-size: var(--f-corpo); flex: 1; }
/* Seta que gira, como TODO outro dobrável da plataforma (`.opo`, `.rec-linha`,
   `.mc-porque`, `.sanfona`). O cabeçalho da tática era o único usando um "+"
   que virava "×": mesmo gesto, símbolo diferente, sem motivo. */
.tat-abrir { color: var(--faint-ink); display: inline-flex; transition: transform var(--t-medio) var(--curva); }
.tat-cab[aria-expanded='true'] .tat-abrir { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .tat-abrir { transition: none; } }

.tat-corpo { display: none; padding: 0 var(--e4) var(--e4); border-top: 1px solid var(--border); }
.tat-corpo.aberto { display: block; padding-top: var(--e4); }
.tat-obj { font-size: var(--f-corpo); color: var(--dim-ink); margin-bottom: var(--e4); }

/* ── A RÉGUA DE PASSOS DA TÁTICA ─────────────────────────────────────────
 *
 * Havia um círculo CHEIO de 20px na cor da família com o número em branco, e
 * ao lado a prosa começando por "Dia 1-2:". Dois marcadores na mesma linha
 * dizendo coisas diferentes, e três círculos roxos empilhados viravam a coisa
 * mais pesada do cartão, competindo com o texto que anunciavam.
 *
 * Agora é uma régua: um fio vertical, o número em CONTORNO e o dia numa coluna
 * própria, alinhada. É a mesma linguagem da espinha das fases, duas telas
 * acima, e a prosa passa a começar no verbo. */
.passos-reg {
  list-style: none; margin: 0 0 var(--e4); padding: 0 0 0 var(--e1);
  position: relative; counter-reset: passo;
}
/* O fio começa e termina NO CENTRO dos marcadores das pontas, não na borda do
   bloco: fio que sobra em cima do primeiro número parece rabo solto. */
.passos-reg::before {
  content: ''; position: absolute; left: 16px; top: 14px; bottom: 14px;
  width: 1px; background: var(--border);
}
.passos-reg .passo {
  position: relative; display: grid; align-items: baseline;
  grid-template-columns: 24px 1fr; gap: var(--e1) var(--e3);
  padding: var(--e2) 0;
}
/* `max-content`, não uma largura fixa. Eu tinha posto 72px e "Dia 4-15" (que
   precisa de 52px depois dos 24 do número e dos 8 do respiro) transbordava e
   encostava na prosa: "Dia 4-15Bloqueie 90 minutos". Como colunas de grid são
   compartilhadas entre as linhas, `max-content` mede o marcador mais largo do
   bloco e alinha todos por ele, sem eu precisar adivinhar o número. */
.passos-reg.com-dia .passo { grid-template-columns: max-content 1fr; }

.passo-mk { display: flex; align-items: baseline; gap: var(--e2); min-width: 0; }
/* Contorno, não preenchimento: o número ORDENA, não chama. Quem chama é o
   dia, que é a informação que a pessoa procura ao voltar no plano. */
.passo-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--dim-ink);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; align-self: flex-start; position: relative;
}
.passo-dia {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.04em; color: var(--dim-ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.passo-t { font-size: var(--f-corpo); line-height: 1.65; color: var(--prosa); min-width: 0; }

/* O passo concluído não some, mas para de puxar o olho. */
.tat.est-concluido .passo-n { border-color: var(--ok); color: var(--ok-ink); }

@container tela (max-width: 640px) {
  /* O dia desce para baixo do número: 72px de coluna fixa numa tela de 375
     deixa a prosa em 40% da largura, e cada passo vira oito linhas. */
  .passos-reg.com-dia .passo { grid-template-columns: 24px 1fr; }
  .passo-mk { flex-direction: column; align-items: flex-start; gap: var(--e1); }
}

/* KPI: "hoje → alvo" numa linha. `baseline: desconhecido` vira lacuna
 * declarada, não número — a regra 12 do prompt proíbe inventar o de partida. */
.kpi { margin-bottom: var(--e4); }
.kpi-metrica { font-weight: 600; font-size: var(--f-corpo); margin-bottom: var(--e3); }
.kpi-linha { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.kpi-c { display: flex; flex-direction: column; gap: var(--e0); }
.kpi-r { font-family: var(--body); font-size: var(--f-micro); color: var(--faint-ink); font-weight: 600; }
.kpi-v { font-size: var(--f-corpo); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-c.alvo .kpi-v { color: var(--ink); }
.kpi-c.vago .kpi-v { color: var(--faint-ink); font-weight: 400; }
.kpi-seta { font-family: var(--mono); color: var(--faint-ink); }
.kpi-nota { font-size: var(--f-micro); color: var(--dim-ink); margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--border); }
/* A META QUE NÃO FECHA. Sobe de tom porque o dono precisa AGIR antes de
   começar, e não só saber. Fundo e tinta de aviso — é a única coisa do card
   que pede ação imediata, então pode ganhar peso sem competir com nada. */
.kpi-nota.atencao {
  color: var(--warn-ink-forte); background: var(--warn-fundo);
  border-top: 0; border-left: 2px solid var(--warn);
  padding: var(--e3); border-radius: var(--r-xs);
}
/* DE ONDE VEM O ALVO. Fica abaixo da linha da métrica e em tom quieto: é
   contexto para quem duvida do número, não o número. O rótulo herda a
   caixa-alta mono dos outros rótulos do KPI e fica EMPILHADO sobre o texto,
   porque `.kpi-r` é `display: block` — tentar deixá-lo em linha aqui exigiria
   derrubar isso, e empilhado é o que combina com `.kpi-nota` e `.fc-porta`,
   que são os vizinhos diretos. */
.kpi-origem { font-size: var(--f-micro); color: var(--dim-ink); margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--border); }

.kpi-simples { font-size: var(--f-corpo); margin-bottom: var(--e4); }
.kpi-simples b { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink); margin-right: var(--e2); }

.tat-grade { display: flex; gap: var(--e5); flex-wrap: wrap; margin-bottom: var(--e3); }
.par { display: flex; flex-direction: column; gap: var(--e0); }
.par b { font-family: var(--body); font-size: var(--f-micro); color: var(--faint-ink); font-weight: 600; }
.par span { font-size: var(--f-apoio); }

.tat-conexao { font-size: var(--f-apoio); line-height: 1.55; color: var(--dim-ink); border-left: 2px solid var(--fam); padding-left: var(--e3); margin-top: var(--e3); }
.tat-conexao.alt { border-left-color: var(--border); }
.tat-conexao b { display: block; font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink); margin-bottom: var(--e1); }
.tat-conexao.alt b { color: var(--faint-ink); }

.narrativa { font-size: var(--f-corpo); line-height: 1.75; }
.narrativa p { margin-bottom: var(--e3); }

.item.mov ul, .item ul { margin: var(--e2) 0 0; padding-left: var(--e5); font-size: var(--f-corpo); }
.item.mov li, .item li { margin-bottom: var(--e1); }
.item.hip b { display: block; margin-bottom: var(--e1); }

.ferramentas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }

.orcamento { background: var(--fam-soft); border: 1px solid var(--fam); border-radius: var(--r); padding: var(--e5) var(--e5); margin-top: var(--e4); }
.orc-meses { flex-wrap: wrap; padding-top: var(--e3); }
.orc-meses > div { display: flex; flex-direction: column; gap: var(--e0); }
.orc-meses b { font-variant-numeric: tabular-nums; }
.orc-nota { margin-top: var(--e3); }


@container tela (max-width: 760px) {
  .canvas { grid-template-columns: 1fr; }
  .kpi-linha { gap: var(--e3); }

  /* A LINHA DA TÁTICA EMPILHA.
   *
   * O `flex-wrap: wrap` sozinho, que estava aqui antes, não fazia nada: o
   * título tem `flex: 1`, então ele ENCOLHE em vez de quebrar para a linha de
   * baixo. Numa tela de 375px o selo de dias e os dois controles deixavam 134px
   * para o título, e "Tática 2: Criação do Ativo de Autoridade (Lead Magnet)"
   * descia em quatro linhas de duas palavras.
   *
   * Agora a primeira linha carrega só os elementos curtos -- dias à esquerda,
   * estado e abrir à direita -- e o título ocupa a largura inteira embaixo. */
  .tat-cab { flex-wrap: wrap; row-gap: var(--e2); }
  .tat-dias { order: 1; }
  .tat-selo { order: 2; margin-left: auto; }
  .tat-abrir { order: 3; }
  .tat-titulo { order: 4; flex: 1 0 100%; font-size: var(--f-corpo); }
}

/* ── Plano Vivo: faixa de execução e estados da tática ─────────────────── */
.exec { padding: var(--e5) var(--e5); }

.barra-exec { height: 8px; background: var(--surface-hi); border-radius: var(--r-pill); overflow: hidden; }
.barra-preenche { height: 100%; background: var(--fam); border-radius: var(--r-pill); transition: width 320ms var(--curva); }
@media (prefers-reduced-motion: reduce) { .barra-preenche { transition: none; } }



/* O selo à esquerda do título diz o estado sem abrir a tática. */
.tat-selo { font-size: var(--f-apoio); color: var(--faint-ink); line-height: 1; }
.tat.est-em_andamento { border-color: var(--warn); }
.tat.est-em_andamento .tat-selo { color: var(--warn-ink); }
.tat.est-concluido { border-color: var(--ok); }
.tat.est-concluido .tat-selo { color: var(--ok-ink); }
.tat.est-concluido .tat-titulo { color: var(--dim-ink); }

.tat-status { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--border); }
.est-btn {
  font: inherit; font-size: var(--f-apoio); padding: var(--e2) var(--e3); border-radius: var(--r-xs);
  border: 1px solid var(--border); background: var(--surface); color: var(--dim-ink); cursor: pointer;
}
.est-btn:hover { border-color: var(--fam); color: var(--ink); }
.est-btn:focus-visible { outline: 2px solid var(--fam); outline-offset: 1px; }
.est-btn.sel { background: var(--fam); border-color: var(--fam); color: #fff; font-weight: 600; }
.est-btn:disabled { opacity: 0.5; cursor: default; }

/* A faixa de execução, os botões de estado e a expansão das táticas são regra
 * de PAPEL, e agora vivem num lugar só: a seção "MODO PAPEL" no fim deste
 * arquivo. Estavam duplicados aqui, e duplicata de regra de impressão é como
 * se descobre, meses depois, que só uma das duas foi corrigida. */

/* ── FORMULÁRIO DO RAIO-X — 13 etapas ──────────────────────────────────────
 * Uma pergunta por tela. Trinta campos numa página só é um muro; treze telas
 * com uma pergunta cada é uma conversa. É a escolha do MVP, e o motivo está
 * escrito na tela dele: são ~30 minutos reais.
 * ------------------------------------------------------------------------ */
.form-topo { margin-bottom: var(--e5); }
/* A BARRA de progresso do formulário. Classe própria, e não `.passos`, porque
 * `.passos` já era a LISTA de passos que o dossiê e o Mentor renderizam. As
 * duas coexistiam: a regra da barra (4px de altura mais overflow:hidden)
 * vencia por vir depois, e engolia toda lista de passos do produto. Um único
 * Raio-X tinha oito listas invisíveis, incluindo o "Como" de cada ação. */
.barra-passos { background: var(--surface-hi); border-radius: var(--r-pill); overflow: hidden; }
/* A transicao desta barra NAO mora aqui: ela e definida mais abaixo, junto do
   opt-out de movimento reduzido que precisa vir depois dela. Ver o comentario
   la. Escrever uma transicao aqui produzia exatamente o bug que foi corrigido. */
.barra-passos-preenche { height: 100%; background: var(--primary); border-radius: var(--r-pill); }

.form-meta { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e3); flex-wrap: wrap; }
.form-selo {
  font-family: var(--mono);                                          text-transform: uppercase;                                                                             border-radius: var(--r-xs); font-weight: 600;
}
.form-conta { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); font-variant-numeric: tabular-nums; }
.form-salvo { margin-left: auto; font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.form-salvo.ok { color: var(--ok-ink); }
.form-salvo.erro { color: var(--danger-ink); }

.instrucoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.instr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--e4) var(--e4); }
.instr b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e1); }
.instr p { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.55; }

/* ═══ O FORMULÁRIO EM DUAS COLUNAS (20.09.2026) ═══════════════════════════
 * Medido: a casca da plataforma dá 1304px de conteúdo útil e o formulário
 * usava 678. Metade da tela ficava vazia, e o dono viu isso como "espremido"
 * — a palavra certa, porque o defeito não era a coluna ser estreita e sim
 * não haver NADA ao lado dela.
 *
 * Alargar o campo era o conserto errado: uma caixa de texto com 1300px de
 * largura é péssima para escrever, e a medida de leitura de 680 está certa.
 * O que entra é a segunda coluna, com o mesmo desenho do Boas-vindas e do
 * Módulo travado: um trilho fixo que carrega o que pertence AO LADO de quem
 * escreve — em que etapa ela está, quais já respondeu, e a ajuda da pergunta
 * atual, que antes vivia escondida num "?" que ninguém clica.
 *
 * Abaixo de 1024px o trilho sai: no telefone ele viraria uma lista de treze
 * itens empurrando o campo para fora da tela. Lá o topo já traz a barra de
 * progresso e o "5 de 13". */
.form-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: var(--e6); align-items: start; max-width: 1080px; }
.form-trilho { position: sticky; top: var(--e5); min-width: 0; }
/* Dentro da grade o corpo usa a coluna inteira: o teto de 680 é para quando
   ele está sozinho na tela, e aqui a coluna já é a medida de leitura. */
.form-grade > .form-corpo { max-width: none; }
@media (max-width: 1024px) {
  .form-grade { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .form-trilho { display: none; }
}

.ft-caixa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e4) var(--e4); }
.ft-caixa + .ft-caixa { margin-top: var(--e4); }
.ft-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.ft-titulo b { font-size: var(--f-apoio); font-weight: 600; color: var(--ink); }
.ft-titulo span { font-size: var(--f-apoio); color: var(--faint-ink); }

/* A lista das treze etapas. O fio à esquerda liga uma na outra: é ele que diz
   que isto é um caminho, e não um menu. */
.ft-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.ft-lista::before { content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.ft-lista li { position: relative; }
.ft-lista li > * { display: flex; align-items: flex-start; gap: var(--e3); width: 100%; min-height: 34px; padding: var(--e1) 0; border: 0; background: none; font: inherit; text-align: left; color: var(--dim-ink); }
.ft-lista i { position: relative; z-index: 1; flex: none; width: 17px; height: 17px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); }
.ft-lista span { font-size: var(--f-apoio); line-height: 1.35; min-width: 0; }

.ft-lista li.feito i { border-color: var(--primary); background: var(--primary); }
.ft-lista li.feito i::after { content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.ft-lista li.feito button { cursor: pointer; }
.ft-lista li.feito button:hover span { color: var(--primary); text-decoration: underline; }
.ft-lista li.feito button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-xs); }
.ft-lista li.agora i { border-color: var(--primary); box-shadow: 0 0 0 4px var(--tom-primario-12); }
.ft-lista li.agora span { color: var(--ink); font-weight: 600; }
.ft-lista li.vazia i { border-style: dashed; }

/* A ajuda da pergunta, ABERTA. Ela existe desde sempre no catálogo e morria
   atrás de um "?" de 16px, que é o lugar onde texto de ajuda vai para não ser
   lido. Aqui ela fica no campo de visão de quem está com o cursor no campo. */
.ft-ajuda b { display: block; font-size: var(--f-apoio); font-weight: 600; color: var(--ink); margin-bottom: var(--e2); }
.ft-ajuda p { margin: 0; font-size: var(--f-apoio); line-height: 1.55; color: var(--dim-ink); }

.form-corpo { max-width: 680px; }
.form-pergunta { margin: 0 0 var(--e2); }
.form-sub { color: var(--dim-ink); margin: 0 0 var(--e5); }
.form-nota { font-size: var(--f-apoio); color: var(--faint-ink); margin-top: var(--e3); }
.form-nota.destaque { color: var(--dim-ink); background: var(--surface-hi); padding: var(--e3) var(--e3); border-radius: var(--r-xs); margin-bottom: var(--e4); }
.form-campo { margin-bottom: var(--e5); }

.campo-grande {
  width: 100%; font: inherit; font-size: var(--f-leitura);
  border: 1px solid var(--border);                          background: var(--surface); color: var(--ink);
}
.campo-grande:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.campo-grande.alta { resize: vertical; line-height: 1.6; }

.opcoes { display: flex; flex-direction: column; gap: var(--e2); }
.opcao {
  font: inherit; font-size: var(--f-corpo); text-align: left;
  border: 1px solid var(--border);                          background: var(--surface);                    cursor: pointer;
}
.opcao:hover { border-color: var(--primary); }
.opcao:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.opcao.sel { background: var(--impacto-fundo); border-color: transparent; font-weight: 600; }

.modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-bottom: var(--e5); }
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e2); margin-bottom: var(--e5); }
.modo, .modelo {
  font: inherit; padding: var(--e3) var(--e4); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer; text-align: center;
}
.modo.sel, .modelo.sel { background: var(--impacto-fundo); border-color: transparent; color: #fff; }
.modo:focus-visible, .modelo:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.modelo b { display: block; font-size: var(--f-apoio); }
.modelo span { display: block; font-size: var(--f-micro); font-weight: 400; margin-top: var(--e1); line-height: 1.3; opacity: 0.75; }

.micro { display: flex; flex-direction: column; gap: var(--e4); }
.micro-item { display: flex; flex-direction: column; gap: var(--e2); }
.micro-rotulo {
  font-family: var(--body); font-size: var(--f-micro);
  color: var(--faint-ink); font-weight: 600; display: flex; align-items: center; gap: var(--e2);
}
.micro-rotulo.bloco { margin-bottom: var(--e3); }
.micro-texto, .micro-input {
  width: 100%; font: inherit; font-size: var(--f-corpo);
  border: 1px solid var(--border);                             background: var(--surface); color: var(--ink);
}
.micro-texto { resize: vertical; line-height: 1.55; }
.micro-texto:focus-visible, .micro-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.concs { display: flex; flex-direction: column; gap: var(--e4); margin-bottom: var(--e3); }
.conc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--e4) var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.conc-topo { justify-content: space-between; }
.conc-topo b { font-size: var(--f-apoio); }
.conc-x { background: none; border: 0; cursor: pointer; color: var(--faint-ink); font-size: var(--f-corpo); line-height: 1; padding: var(--e0) var(--e2); }
.conc-x:hover { color: var(--danger); }

.form-acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); margin-top: var(--e2); }
.link-pular, .link-descartar, .link-info {
  background: none; border: 0; font: inherit; font-size: var(--f-apoio); color: var(--faint-ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: var(--e2) 0; display: block;
}
.link-pular:hover, .link-descartar:hover, .link-info:hover { color: var(--ink); }
.link-info { color: var(--primary); margin-bottom: var(--e4); }

/* A dica do "?" — o MVP mostra no hover; aqui também no foco, para quem
 * navega por teclado não ficar sem a explicação. */
.dica-wrap { position: relative; display: inline-flex; }
.dica-btn { border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-hi); color: var(--faint-ink);                  font-weight: 600;
  cursor: help; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.dica-box {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--side); color: var(--border); font-family: var(--body); font-size: var(--f-micro);
  font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.5;
  padding: var(--e2) var(--e3); border-radius: var(--r-xs); width: max-content; max-width: 270px;
  opacity: 0; visibility: hidden; transition: opacity 140ms; z-index: 20; pointer-events: none;
}
.dica-wrap:hover .dica-box, .dica-btn:focus-visible + .dica-box { opacity: 1; visibility: visible; }

/* ── Tela de retomada ─────────────────────────────────────────────────────── */
.retomar { max-width: 560px; margin: var(--e7) auto; text-align: center; }
.selo-retomar {
  display: inline-block; font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--primary); background: var(--primary-soft);
  padding: var(--e2) var(--e4); border-radius: var(--r-pill); font-weight: 600; margin-bottom: var(--e5);
}
.retomar h1 { font-size: var(--f-heroi); line-height: 1.15; margin-bottom: var(--e4); }
.retomar h1 .azul { color: var(--primary); }
.retomar .sub { font-size: var(--f-corpo); color: var(--dim-ink); margin: 0 auto var(--e6); max-width: 440px; }
.retomar-acoes { display: flex; flex-direction: column; gap: var(--e3); align-items: stretch; }
/* Sair da tela não se estica como as ações de começar: largura do próprio
   texto, centrado, depois da nota que fecha o assunto. */
.retomar-sair { align-self: center; margin-top: var(--e2); }
.btn.grande { padding: var(--e4) var(--e5); font-size: var(--f-corpo); }
.retomar-nota { font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e5); }
.retomar-lista { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e5); text-align: left; }
.rasc { display: flex; align-items: center; gap: var(--e3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs); padding: var(--e3) var(--e4); }
.rasc-info { flex: 1; display: flex; flex-direction: column; gap: var(--e0); }
.rasc-info b { font-size: var(--f-corpo); }
.rasc-info span { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.btn.perigo { color: var(--danger-ink); }

.modal-pilares { background: var(--surface); border-radius: var(--r-md); max-width: 460px; width: 92%; max-height: 82vh; overflow-y: auto; }
.modal-pilares .modal-topo { display: flex; align-items: center; justify-content: space-between; padding: var(--e4) var(--e5); border-bottom: 1px solid var(--border); }
.modal-pilares .modal-topo button { background: none; border: 0; cursor: pointer; font-size: var(--f-corpo); color: var(--faint-ink); }
.modal-pilares .modal-corpo { padding: var(--e2) var(--e5) var(--e5); }
.pilar { display: flex; flex-direction: column; gap: var(--e1);                  border-bottom: 1px solid var(--border); }
.pilar:last-child { border-bottom: 0; }
.pilar b { font-size: var(--f-corpo); }

@container tela (max-width: 700px) {
  .form-pergunta { font-size: var(--f-secao); }
  .retomar h1 { font-size: var(--f-tela); }
  .modos { grid-template-columns: 1fr; }
}

/* Bloco de referência da etapa de orçamento. A segunda linha existe para o
 * cliente não ler "Agressivo (20%+)" e entender que o Oráculo custa 20% do
 * faturamento dele. */
.referencia {
  background: var(--primary-soft); border: 1px solid var(--primary-line);
  border-radius: var(--r); padding: var(--e4) var(--e4); margin-top: var(--e4);
}
.referencia p { margin: 0; font-size: var(--f-apoio); line-height: 1.55; color: var(--ink); }
.referencia .ref-nota {
  margin-top: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--primary-line);
  font-size: var(--f-micro); color: var(--dim-ink);
}

/* Campo que abre quando a opção escolhida pede um valor digitado. */
.valor-livre { display: flex; gap: var(--e2); margin-top: var(--e4); align-items: stretch; }
.valor-livre .campo-grande { flex: 1; }
.valor-livre .btn { white-space: nowrap; }
@container tela (max-width: 560px) { .valor-livre { flex-direction: column; } }

/* ── Revisão final ────────────────────────────────────────────────────────
 * O que ficou em branco não fica igual ao que foi respondido. É a informação
 * que o MVP não dá: lá a revisão lista os campos, e quem pulou seis etapas não
 * percebe que pulou.
 * ------------------------------------------------------------------------ */
/* A MESMA LARGURA EXTERNA do formulário em duas colunas (20.09.2026), para a
   revisão não mudar a borda direita da tela no meio do caminho. Aqui não entra
   trilho: a revisão JÁ é a lista das treze etapas, com "Editar" em cada uma. */
.form-corpo.largo { max-width: 1080px; }

.revisao { display: flex; flex-direction: column; gap: var(--e0); margin-bottom: var(--e5); }
.rev-linha {
  display: flex; align-items: flex-start; gap: var(--e4);
  background: var(--surface); border: 1px solid var(--border);
  padding: var(--e3) var(--e4);
}
.rev-linha + .rev-linha { border-top: 0; }

.rev-selo {
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint-ink); font-weight: 600;
  width: 150px; flex-shrink: 0; padding-top: var(--e1);
}
.rev-corpo { flex: 1; min-width: 0; }
.rev-valor { font-size: var(--f-corpo); line-height: 1.5; word-break: break-word; }

.rev-linha.vazia { background: var(--warn-fundo); border-color: var(--tom-warn-25); }
.rev-linha.vazia .rev-selo { color: var(--warn-ink); }
.rev-vazio { font-size: var(--f-corpo); font-weight: 600; color: var(--warn-ink); }
.rev-custo { font-size: var(--f-micro); color: var(--dim-ink); margin-top: var(--e1); line-height: 1.5; }

.atalhos { display: flex; gap: var(--e2); flex-wrap: wrap; }

@container tela (max-width: 640px) {
  .rev-linha { flex-wrap: wrap; }
  .rev-selo { width: 100%; padding-top: 0; }
}

/* ── Ressalvas da verificação da saída (V2, 01.10.2026) ───────────────────
 * Ver `telas/ressalvas.js`. O que pede decisão vem em âmbar, item a item; a
 * nota sobre números sem conta vem numa linha só, no tom do texto, porque é
 * qualificação e não alarme.
 * ------------------------------------------------------------------------ */
.ressalvas {
  margin: var(--e4) 0; padding: var(--e4) var(--e5);
  border-radius: var(--r); background: var(--tom-warn-8); border: 1px solid var(--tom-warn-25);
}
.ressalvas:not(:has(.ress-lista)) { background: var(--surface-sutil); border-color: var(--border); }
.ress-topo { display: flex; align-items: center; gap: var(--e2); color: var(--warn-ink); font-size: var(--f-apoio); }
.ress-topo b { font-weight: 600; }
.ress-lista { list-style: none; padding: 0; margin: var(--e3) 0 0; display: grid; gap: var(--e3); }
.ress-item { padding-left: var(--e4); border-left: 2px solid var(--warn); }
.ress-rot { display: block; font-size: var(--f-apoio); font-weight: 600; color: var(--ink); }
.ress-item p { margin: 2px 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.ress-nota { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; font-size: var(--f-micro); color: var(--dim-ink); line-height: 1.6; }
.ress-lista + .ress-nota { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--tom-warn-25); }
.ress-nota svg { flex-shrink: 0; margin-top: 2px; }

/* ── "Este relatório ajudou?" (Bloco D, 01.10.2026) ───────────────────────
 * Ver `telas/avaliacao.js`. Cartão flutuante no canto, que aparece quando a
 * pessoa alcança o fim do relatório. Fica ACIMA da pílula do chat de ajuda,
 * que mora no mesmo canto, e não tranca a tela: ler continua possível com ele
 * aberto. */
.avalia-ancora { height: 1px; }
.avalia-flutua {
  position: fixed; right: var(--e5); bottom: 96px; z-index: 60;
  width: min(380px, calc(100vw - 32px)); padding: var(--e5) var(--e5) var(--e4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), 0 18px 40px -18px rgba(15, 23, 42, 0.35);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva);
}
.avalia-flutua.aberto { opacity: 1; transform: none; }
.avalia-flutua h3 { margin: 0 var(--e5) 0 0; font-size: var(--f-corpo); font-weight: 600; color: var(--ink); line-height: 1.4; }
.avalia-x {
  position: absolute; top: var(--e3); right: var(--e3);
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: var(--r); color: var(--faint-ink); cursor: pointer;
}
.avalia-x:hover { background: var(--surface-hi); color: var(--ink); }
.avalia-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .avalia-flutua { transition: none; transform: none; }
}
@media (max-width: 620px) {
  .avalia-flutua { right: 12px; left: 12px; width: auto; bottom: 84px; }
}
.avalia-opcoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.avalia-texto {
  display: block; width: 100%; min-height: 84px; margin-top: var(--e3); padding: var(--e3);
  font: inherit; font-size: var(--f-apoio); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.avalia-feito { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.avalia-feito svg { flex-shrink: 0; margin-top: 3px; color: var(--ok-ink); }
.avalia-feito b { color: var(--ink); }

/* ── Verificação das entradas (V1, 01.10.2026) ────────────────────────────
 * Ver `telas/verificacao.js`. Crítica e aviso se distinguem pela FORMA além
 * da cor: a crítica tem o fio grosso à esquerda, o aviso o fio fino. A
 * resolvida apaga, mas fica: a pessoa vê o que confirmou antes de gerar.
 * ------------------------------------------------------------------------ */
.verif { margin-bottom: var(--e5); display: grid; gap: var(--e3); }
.verif-topo h2 { margin: 0; font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.verif-topo p { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; max-width: 66ch; }
.verif-item {
  display: flex; align-items: flex-start; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warn);
}
.verif-item.aviso { border-left-width: 2px; border-left-color: var(--border); }
.verif-item.resolvido { border-left-color: var(--ok); background: var(--surface-sutil); }
.verif-txt { flex: 1; min-width: 240px; }
.verif-txt b { display: block; font-size: var(--f-corpo); font-weight: 600; color: var(--ink); }
.verif-txt p { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.verif-ok { display: inline-flex; align-items: center; gap: var(--e1); margin-top: var(--e2); font-size: var(--f-micro); color: var(--ok-ink); }
.verif-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
/* O aviso de pouca base traz ícone e texto lado a lado; `.aviso` sozinho não é flex. */
.form-corpo > .aviso.ap { display: flex; gap: var(--e3); align-items: flex-start; line-height: 1.6; margin-bottom: var(--e5); }
.form-corpo > .aviso.ap svg { flex-shrink: 0; margin-top: 3px; }

/* ── Score de qualidade da entrada ────────────────────────────────────────
 * A cor muda com a faixa, e é de propósito: o número sozinho não diz se 5 é
 * bom. O verde é permissão para seguir; o âmbar é convite a voltar.
 * ------------------------------------------------------------------------ */
.qualidade {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--e5) var(--e5); margin-bottom: var(--e5);
}
.qualidade.bom { border-color: var(--tom-ok-35); background: var(--tom-ok-4); }
.qualidade.medio { border-color: var(--tom-warn-35); background: var(--tom-warn-4); }
.qualidade.fraco { border-color: var(--tom-danger-35); background: var(--tom-danger-4); }

.q-topo { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.q-anel {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%;
  border: 3px solid var(--border); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.qualidade.bom .q-anel { border-color: var(--ok); color: var(--ok-ink); }
.qualidade.medio .q-anel { border-color: var(--warn); color: var(--warn-ink); }
.qualidade.fraco .q-anel { border-color: var(--danger); color: var(--danger-ink); }
.q-anel b { font-family: var(--brand); font-size: var(--f-secao); font-variant-numeric: tabular-nums; }
.q-anel span { font-family: var(--mono); font-size: var(--f-micro); opacity: 0.7; margin-top: var(--e0); }

.q-rot {
  font-family: var(--body); font-size: var(--f-micro); color: var(--faint-ink); font-weight: 600;
}
.q-faixa { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; margin-top: var(--e0); }
.qualidade.bom .q-faixa { color: var(--ok-ink); }
.qualidade.medio .q-faixa { color: var(--warn-ink); }
.qualidade.fraco .q-faixa { color: var(--danger-ink); }
.q-recado { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e0); }

.q-barras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--e3); }
.q-barra {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: var(--e3) var(--e3); text-align: center;
}
.q-barra.gargalo { border-color: var(--warn); }
.q-n { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; font-variant-numeric: tabular-nums; }
.q-l {
  font-family: var(--body); font-size: var(--f-micro); color: var(--faint-ink); font-weight: 600; margin: var(--e0) 0 var(--e2);
}
.q-t { height: 3px; background: var(--surface-hi); border-radius: var(--r-pill); overflow: hidden; }
.q-p { height: 100%; background: var(--ok); border-radius: var(--r-pill); }
.qualidade.medio .q-p { background: var(--warn); }
.qualidade.fraco .q-p { background: var(--danger); }
.q-barra.gargalo .q-p { background: var(--warn); }

.q-dica { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e4) 0 0; line-height: 1.55; }

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

/* Número com procedência. O valor em destaque, a trilha em voz baixa — quem só
 * quer o número lê o número; quem vai apostar dinheiro nele lê de onde veio. */
.num { font-weight: 600; }
.proc { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); margin-left: var(--e2); }
.base { display: block; font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e1); }

/* ── console de logs (admin) ───────────────────────────────────────────────
 *
 * Densidade alta de propósito: quem abre esta tela está procurando uma agulha,
 * e cada linha a mais que cabe na tela é uma rolagem a menos.
 */

.log-filtros { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; margin-bottom: var(--e4); }
.log-filtros input, .log-filtros select {
  height: 36px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface);
  padding: 0 var(--e3); font: 400 var(--f-apoio) var(--body); color: var(--ink);
}
.log-filtros input { flex: 1 1 240px; }
/* Os selects encolhem antes da busca e voltam a dividir a linha quando cabem.
 * Sem base flexível eles esticam sozinhos assim que a linha quebra. */
.log-filtros select { flex: 0 1 168px; min-width: 132px; }
.log-filtros input:focus, .log-filtros select:focus { outline: none; border-color: var(--primary-line); box-shadow: var(--foco); }
.log-filtros .janelas { display: flex; gap: var(--e1); margin-left: auto; }

/* O detalhe é longo e imprevisível: quebra em vez de esticar a tabela. */
.log-detalhe {
  font-family: var(--mono); font-size: var(--f-micro); line-height: 1.55; color: var(--dim-ink);
  max-width: 460px; word-break: break-word;
}


@media (max-width: 900px) {
  .log-filtros .janelas { margin-left: 0; }
  .log-detalhe { max-width: 220px; }
}

/* ── sala de operações ─────────────────────────────────────────────────────
 *
 * Densidade alta: quem abre esta tela está procurando uma agulha, e cada linha
 * a mais que cabe é uma rolagem a menos.
 */

/* O pulso. Seis números que respondem "está tudo bem?" em dois segundos.
   É a mesma faixa de KPIs do cliente (06.09.2026), com o estado na cor do número. */
.faixa-kpi.pulso { box-shadow: none; border: 0; border-radius: 0; }
.faixa-kpi.pulso .kpi-c { padding: var(--e3) var(--e4); }

/* Saúde por modelo, derivada do tráfego real — não de ping sintético. */
.saude { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--border); }
.saude-item { display: flex; align-items: center; gap: var(--e2); font-size: var(--f-apoio); padding: var(--e2) var(--e3); border: 1px solid var(--border); border-radius: var(--r-pill); }
.saude-item .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.saude-item.degradado .ponto { background: var(--warn); }
.saude-item.instavel .ponto, .saude-item.quota .ponto { background: var(--danger); }
.saude-item.sem_dados .ponto { background: var(--faint); }
.saude-item .det { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.saude-item .chip { margin-left: 0; }

/* Uma geração travada é a única coisa desta tela que pede ação imediata. */
tr.travado td { background: var(--tom-danger-4); }

/* Barra de andamento dentro da tabela — menor que a do cliente. */
table .barra { height: 5px; margin: 0; }

/* A barra do vivo. */
.ops-vivo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); padding-bottom: var(--e4); border-bottom: 1px solid var(--border); }
.ops-estado { font-size: var(--f-micro); color: var(--faint-ink); }
.pulso-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulsando var(--t-pulso) ease-in-out infinite; }
.pulso-ponto.pausado { background: var(--warn); animation: none; }
@keyframes pulsando { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Linha nova entrando ao vivo: um realce curto, que passa. Piscar para sempre
 * transformaria a tela num alarme que ninguém consegue olhar. */
tr.nova td { animation: chegou 1.2s ease-out; }
@keyframes chegou {
  from { background: var(--primary-soft); }
  to { background: transparent; }
}

/* Os `dados` estruturados da linha, sob demanda. */
.log-detalhe details { margin-top: var(--e1); }
.log-detalhe summary { cursor: pointer; font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.log-detalhe pre { margin: var(--e2) 0 0; padding: var(--e2) var(--e3); background: var(--surface-hi); border-radius: var(--r-xs); font-size: var(--f-micro); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 1100px) {
  .pulso { grid-template-columns: repeat(3, 1fr); }
}

/* ── perguntas de dor ──────────────────────────────────────────────────────
 *
 * Modal porque a pessoa está no meio de um formulário: tirar ela da página
 * significaria perder o que já digitou. O fundo escurece, o corpo trava e o Esc
 * fecha — se ela quiser desistir, desiste sem susto.
 */

.dor-cta { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e3); }
.dor-cta .dica { flex: 1; min-width: 240px; }

/* Isto é um `<dialog>`, e não uma `<div>`. Ver `modal.js` para o porquê.
 * Os resets abaixo desfazem o estilo que o navegador dá a todo `<dialog>`:
 * borda sólida, `padding: 1em`, `margin: auto`, `width: fit-content` e um
 * fundo opaco. Sem eles a casca escurecida vira uma caixinha branca no meio
 * da tela. */
.modal-fundo {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: var(--e5); background: var(--tom-tinta-50);
  border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  color: inherit; overflow: visible;
}
/* ⚠️ ESTA LINHA É OBRIGATÓRIA, e o próprio arquivo já ensinou o porquê uma vez.
 *
 * `display: flex` numa CLASSE vence o `display: none` que o navegador aplica a
 * um `<dialog>` fechado, exatamente como vencia o `display: none` do atributo
 * `[hidden]`. Aconteceu antes: o modal dos pilares abria sozinho na etapa 1 do
 * formulário. Sem a regra abaixo, os sete modais nasceriam abertos. */
dialog.modal-fundo:not([open]) { display: none; }
/* O escurecido é o próprio diálogo, que ocupa a tela toda. O `::backdrop` por
 * baixo dele escureceria de novo, então ele fica transparente. */
.modal-fundo::backdrop { background: transparent; }
/* ═══════════════════════════════════════════════════════════════════════════
 *  `[hidden]` PRECISA GANHAR DE QUALQUER `display`.
 *
 *  O `hidden` do HTML é só uma dica do navegador com `display: none`, e ela
 *  perde para qualquer regra nossa que declare `display`. Então `el.hidden =
 *  true` num `.btn`, que é `inline-flex`, não esconde nada: o botão continua
 *  na tela, e o código que o escondeu parece ter funcionado.
 *
 *  Já tinha acontecido duas vezes nesta folha, e as duas foram remendadas no
 *  componente (`.modal-fundo[hidden]`, `.menu-cheio[hidden]`). A terceira foi
 *  no botão de comprar. Remendo por componente não fecha a classe do erro:
 *  fecha uma instância e deixa a próxima acontecer em silêncio.
 *
 *  Sete telas usam `el.hidden`. Esta linha vale para todas.
 * ═══════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

.modal-fundo[hidden] { display: none; }
.modal {
  background: var(--bg); border-radius: var(--r-lg); width: min(720px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: var(--shadow-pop); overflow: hidden;
}
.modal-topo { display: flex; align-items: flex-start; gap: var(--e4); padding: var(--e5) var(--e5) var(--e4); border-bottom: 1px solid var(--border); background: var(--surface); }
.modal-topo h2 { font-size: var(--f-leitura); margin: 0 0 var(--e1); }
.modal-topo .desc { font-size: var(--f-apoio); color: var(--faint-ink); margin: 0; }
.modal-topo button { margin-left: auto; flex-shrink: 0; }
.modal-corpo { padding: var(--e5) var(--e5); overflow-y: auto; flex: 1; }
.modal-pe { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5); border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.modal-pe button:last-child { margin-left: auto; }
/* O contador e o aviso de gravação dividem a mesma linha e o mesmo tratamento:
   são os dois selos discretos do pé do modal. Quem está escrevendo não precisa
   de confirmação vistosa — precisa saber, na hora em que der errado, que o que
   ele escreveu NÃO foi guardado. */
.dor-conta, .dor-salvo { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint-ink); }
.dor-salvo { color: var(--ok-ink); }
.dor-salvo.ruim { color: var(--warn-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  A TELA QUE UM TERCEIRO ABRE (revista em 22.09.2026).
 *
 *  É a única superfície pública do produto: quem abre não é o cliente, é
 *  alguém do time dele, no celular, com dois minutos de paciência. E era a que
 *  menos tinha recebido cuidado.
 *
 *  Medido antes de mexer: o campo de resposta tinha 72px e duas linhas, para
 *  uma pergunta que pede número, causa e exemplo. A caixa COMUNICA o tamanho da
 *  resposta esperada, e aquela pedia uma frase — no mesmo dia em que o campo de
 *  preço do Radar foi de 200 para 1500 caracteres pela mesma razão.
 * ═══════════════════════════════════════════════════════════════════════════ */
.dor-q { padding: var(--e5) 0; border-bottom: 1px solid var(--border); }
.dor-q:last-child { border-bottom: 0; }
/* O número dá lugar na fila: "estou na 2 de 5" é o que segura quem responde no
   celular, e o contador do rodapé só aparece depois de rolar tudo. */
.dor-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-right: var(--e2); flex: none;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  font: 600 var(--f-micro)/1 var(--mono);
}
.dor-cab { display: flex; gap: var(--e2); margin-bottom: var(--e2); }
.dor-cab .chip { margin-left: 0; }
.dor-q label { display: flex; align-items: baseline; font-size: var(--f-corpo); font-weight: 600; line-height: 1.45; margin-bottom: var(--e2); }
/* O "por que esta pergunta" fica visível: é o que transforma "sei lá" em resposta. */
.dor-motivo { font-size: var(--f-apoio); color: var(--faint-ink); margin-bottom: var(--e2); }
.dor-q textarea {
  /* 168px é a altura de seis linhas, e ela é a instrução mais honesta desta
     tela: o campo de duas linhas pedia uma frase e recebia uma frase. */
  width: 100%; min-height: 168px; resize: vertical; border-radius: var(--r); padding: var(--e3) var(--e3);
  border: 1px solid var(--border); background: var(--surface); font: 400 var(--f-apoio)/1.6 var(--body); color: var(--ink);
}
.dor-q textarea:focus { outline: none; border-color: var(--primary-line); box-shadow: var(--foco); }
/* O EXEMPLO SAIU DE TRÁS DO CLIQUE e ficou ANTES do campo. Ele era um
   `<details>` com "Ver um exemplo de resposta útil": o único guia sobre COMO
   responder exigia um gesto que ninguém faz antes de escrever, numa tela cujo
   problema é exatamente a resposta vaga. Depois do campo já seria tarde — quem
   leu a pergunta e caiu na caixa já começou. */
.dor-ex {
  margin: 0 0 var(--e3); padding: var(--e2) var(--e3);
  border-left: 2px solid var(--primary-line); background: var(--surface-hi);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--f-apoio); line-height: 1.55; color: var(--dim-ink);
}
.dor-ex b { color: var(--ink); font-weight: 600; }

/* A COLETA RETOMADA. O andamento vem antes do link porque quem volta aqui
   pergunta "alguém respondeu?" primeiro, e só depois quer o link de novo. */
.dor-retoma { margin-bottom: var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--border); }
.dor-areas-and { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e2); }

@media (max-width: 700px) {
  .modal-fundo { padding: 0; }
  .modal { max-height: 100vh; border-radius: 0; width: 100%; }
}

/* Fontes: DOMÍNIO, não link. As URLs do grounding são redirecionadores que
 * expiram — link morto num relatório pago custa mais que nenhum link. */
.fontes { display: flex; flex-direction: column; gap: var(--e2); }
.fonte { border: 1px solid var(--border); border-radius: var(--r); padding: var(--e3) var(--e4); }
.fonte .d { font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; }
.fonte .d .chip { margin-left: var(--e2); }
.fonte .ex { font-size: var(--f-apoio); color: var(--faint-ink); margin-top: var(--e2); }

/* ── coleta em time: entrega do link e do passe ────────────────────────────
 *
 * Link e passe em blocos SEPARADOS e numerados. Se o dono colar os dois na
 * mesma mensagem, a proteção vira enfeite, e ninguém lê aviso em letra miúda
 * embaixo de um botão de copiar.
 *
 * ── `dor-passo` E NÃO `entrega`: A COLISÃO QUE ISTO DESFAZ ────────────────
 *
 * Estes blocos se chamavam `.entrega`, e 5.100 linhas abaixo existe OUTRA
 * `.entrega`: o cartão do "momento da entrega", o que aparece quando um
 * relatório fica pronto. Ela vem depois no arquivo, então ganhava tudo o que
 * declara.
 *
 * O efeito, medido no modal do time: os três blocos herdavam
 * `max-width: 500px` dentro de um modal de 720px, `text-align: center` num
 * parágrafo de três linhas, e um halo verde de "relatório pronto" em volta de
 * um campo de senha. A tela parecia desalinhada porque ela ESTAVA: o conteúdo
 * era pintado por um componente de outro assunto.
 *
 * É a mesma armadilha do `.tb-base`, e a lição também: nome genérico em CSS
 * global é questão de tempo. */

.dor-passo {
  margin-bottom: var(--e3);
  padding: var(--e4); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.dor-passo .l { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink); margin-bottom: var(--e2); }
.dor-passo.passe { border-color: var(--gold); background: var(--tom-ouro-4); }
.dor-passo.passe .l { color: var(--gold-ink); }
.dor-passo .cmd { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.dor-passo input {
  flex: 1; min-width: 180px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 0 var(--e3); background: var(--surface); font: 400 var(--f-apoio) var(--mono); color: var(--ink);
}
.dor-passo .ajuda { margin: var(--e3) 0 0; }

/* O passe é curto e é ditado: precisa ser grande e espaçado.
 *
 * O seletor é `input.passe-campo`, e antes eram quatro `!important`. Eles
 * existiam para vencer `.dor-passo input`, que é (0,1,1) contra os (0,1,0) de
 * uma classe sozinha. Subir a especificidade honestamente resolve o mesmo
 * conflito sem deixar uma regra que nada mais consegue sobrescrever depois. */
input.passe-campo {
  font-family: var(--brand); font-size: var(--f-secao); font-weight: 600;
  letter-spacing: 0.28em; text-align: center; text-transform: uppercase; height: 48px;
}

/* Escolha de áreas (dono) e de área (quem responde). */
.areas { display: flex; gap: var(--e2); flex-wrap: wrap; }
/* O CARREGAMENTO DAS PERGUNTAS DE DOR.
   Medido: 22s no modo do dono, 27s no do time. É tempo suficiente para alguém
   concluir que travou, então o estado precisa de movimento (o mesmo giro da
   faixa de gerações) e do FORMATO do que vem (o esqueleto já existente). */
.dor-load { display: flex; flex-direction: column; gap: var(--e3); }
.dor-load-cab {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--f-corpo); font-weight: 600; color: var(--ink);
}
.dor-load-p { margin: 0 0 var(--e2); }

/* Utilitários que substituem `style=""` no JS: espaçamento é do CSS. */
.dor-nota { margin-top: var(--e4); }
.dor-erro { margin-bottom: var(--e4); }
.sem-margem { margin: 0; }
.empurra { margin-left: auto; }

/* 44px de alvo de toque: são caixas de seleção que se marcam com o dedo, e
   estavam com 38px de altura. */
.area-check { min-height: 44px; }
.area-check { display: flex; align-items: center; gap: var(--e2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--e2) var(--e4); cursor: pointer; font-size: var(--f-corpo); }
.area-check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.area-check input { accent-color: var(--primary); }
.area-botao {
  display: inline-flex; align-items: center; gap: var(--e2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: var(--e3) var(--e5); background: var(--surface); font: 600 var(--f-corpo) var(--body); color: var(--ink); cursor: pointer;
}
.area-botao:hover { border-color: var(--primary); background: var(--primary-soft); }
.area-botao.travada { opacity: 0.55; cursor: not-allowed; }
.area-botao.travada:hover { border-color: var(--border); background: var(--surface); }
.area-botao .chip { margin-left: 0; }

/* ── tela pública de resposta ─────────────────────────────────────────────
 * Quem abre isto está no celular, veio de um link, e não tem conta. Uma coluna,
 * texto grande, nada de barra lateral. */

/* 660px era medida de leitura, e esta tela não é para ler: é para ESCREVER.
   Medido no desktop, o cartão ocupava 54% da largura e 46% da altura, com
   615px vazios embaixo — parecia um modal que perdeu a página. 780px dá ao
   campo de resposta a largura de um parágrafo de verdade. */
.publico { max-width: 780px; margin: 0 auto; padding: var(--e6) var(--e5) var(--e7); }
.cartao-publico { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--e5) var(--e6); box-shadow: var(--shadow-card); }
.cartao-publico .marca, .ficha-cab .marca { padding: 0; font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: var(--e4); }
.cartao-publico h1 { font-size: var(--f-tela); line-height: 1.25; margin-bottom: var(--e3); }
.cartao-publico p { font-size: var(--f-corpo); color: var(--dim-ink); margin: 0 0 var(--e3); }
.cartao-publico .ajuda { font-size: var(--f-apoio); color: var(--faint-ink); }
.cartao-publico .areas { margin-top: var(--e3); }
.cartao-publico .campo-l { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink); margin: 0 0 var(--e3); width: 100%; }

@media (max-width: 700px) {
  .publico { padding: var(--e4) var(--e3) var(--e7); }
  .cartao-publico { padding: var(--e5) var(--e5); border-radius: var(--r-md); }
}

@media (max-width: 900px) {
  .side { display: none; }
  /* Sem barra, sem margem: senão sobra uma faixa de 260px de nada. */
  .main { margin-left: 0; }
  .capa { padding: var(--e5) var(--e5); }
  /* `.selo` era a caixa de score da capa antiga; virou `.capa-anel`, que já
     nasce no fluxo e não precisa de reposicionamento no celular. */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PASSADA DE DESIGN NA CAPTAÇÃO
 *
 * Referência puxada do MVP, medida no `inicio.php`, não copiada de olho. Seis
 * diferenças concretas, cada uma com o motivo de existir:
 *
 *  1. Tipografia FLUIDA. O MVP usa clamp(20px, 4vw, 26px) na pergunta; a minha
 *     era fixa em 25px e ficava grande demais no celular, que é onde metade
 *     das pessoas vai responder.
 *  2. Raios MAIORES: 14px no campo, 12px na opção. Os meus 10px deixavam tudo
 *     com cara de formulário de sistema. É a diferença entre "preencha" e
 *     "converse".
 *  3. A CURVA. cubic-bezier(0.16, 1, 0.3, 1) é a assinatura de movimento do
 *     produto — aparece nas três animações do MVP. `ease` é de fábrica.
 *  4. Badge MAIOR e sem caixa: 12px na cor da marca. O meu era 9.5px com fundo,
 *     que lê como etiqueta e não como nome da seção.
 *  5. Cada pergunta ENTRA. No MVP o slideKey força remontagem e dispara o
 *     slide-up; a minha trocava seco. É o que faz treze telas parecerem uma
 *     conversa em vez de treze recarregamentos.
 *  6. Contador de caracteres, com aviso. O MVP mostra na dor e no pitch, e
 *     acende quando o texto está curto demais para render diagnóstico.
 * ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* A curva do MVP. Usada em tudo que se move na captação. */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 5. entrada de cada etapa ───────────────────────────────────────────── */
@keyframes sobe {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* `backwards` e não `both`, de propósito.
 *
 * `both` mantém o estado do último quadro aplicado para sempre, e o último
 * quadro de `sobe` é um transform. Um transform, mesmo sendo a identidade,
 * torna o elemento containing block de qualquer `position: fixed` dentro dele:
 * a dica do formulário, que deveria encostar na base da TELA no celular,
 * encostava na base do `.form-corpo` e aparecia no meio da página.
 *
 * `backwards` aplica o primeiro quadro ANTES de começar (que é o que evita o
 * piscar) e não deixa nada aplicado depois que termina. */
.form-corpo { animation: sobe 0.22s var(--curva) backwards; }
.retomar    { animation: sobe 0.22s var(--curva) backwards; }
@media (prefers-reduced-motion: reduce) {
  .form-corpo, .retomar { animation: none; }
}

/* ── 1 e 4. tipografia da pergunta e do selo ────────────────────────────── */
.form-pergunta {
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.3;
  font-weight: 600;
}
.form-selo {
  font-size: var(--f-micro);
  letter-spacing: 0.1em;
  background: none;
  padding: 0;
  color: var(--primary);
}
.form-sub { font-size: clamp(13.5px, 2.2vw, 14.5px); }

/* ── 2. raios e respiro ─────────────────────────────────────────────────── */
.campo-grande { border-radius: var(--r-md); padding: var(--e4) var(--e5); }
.opcao {
  border-radius: var(--r);
  padding: var(--e4);
  font-weight: 600;
  color: var(--dim-ink);
  transition: border-color 180ms var(--curva), background 180ms var(--curva), transform 180ms var(--curva);
}
.opcao:hover { transform: translateY(-1px); }
.opcao.sel { color: #fff; }
.modo, .modelo { border-radius: var(--r); }
.micro-texto, .micro-input { border-radius: var(--r); padding: var(--e3) var(--e4); }
.conc, .instr, .qualidade, .rev-linha { border-radius: var(--r); }
.rev-linha:first-child { border-radius: 12px 12px 0 0; }
.rev-linha:last-child { border-radius: 0 0 12px 12px; }

/* ── 3. a curva na barra de progresso ───────────────────────────────────── */
.barra-passos { height: 3px; }
/* ⚠️ O OPT-OUT DE MOVIMENTO REDUZIDO PRECISA VIR DEPOIS DESTA LINHA.
   Ele existia 561 linhas ACIMA, com a mesma especificidade, entao esta regra
   o derrotava por posicao: quem pediu movimento reduzido ao sistema recebia a
   barra animada assim mesmo. Medido antes da correcao, com a preferencia
   ligada, o valor efetivo era 0.6s e nao none. */
.barra-passos-preenche { transition: width var(--t-barra) var(--curva); }
@media (prefers-reduced-motion: reduce) { .barra-passos-preenche { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
 *  GERAÇÕES EM ANDAMENTO — a faixa da Visão Geral e a pastilha do cabeçalho.
 *
 *  ── ESTE BLOCO NÃO EXISTIA ────────────────────────────────────────────────
 *
 *  As classes `.and-*` foram escritas no JS e o CSS nunca entrou. O resultado
 *  era texto cru empilhado no meio de uma tela desenhada: título sem peso,
 *  linhas sem separação, o "spinner" invisível porque `.and-giro` é um span
 *  vazio que só existe se o CSS o desenhar.
 *
 *  ── POR QUE A BARRA, E NÃO SÓ UM SPINNER ─────────────────────────────────
 *
 *  Uma geração leva de dois a cinco minutos. Spinner responde "está vivo?" e
 *  não responde "falta muito?", que é a pergunta de quem espera cinco minutos.
 *  O motor já grava etapa e percentual a cada passo; a barra só mostra o que
 *  já estava no banco.
 * ═══════════════════════════════════════════════════════════════════════════ */

.and-faixa {
  margin-bottom: var(--e5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.and-cab {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-hi);
  font-size: var(--f-apoio); font-weight: 600; color: var(--ink);
}
.and-linha {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
}
.and-linha + .and-linha { border-top: 1px solid var(--border); }
.and-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: var(--fam-soft); color: var(--dim-ink);
}
.and-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.and-txt b {
  font-size: var(--f-corpo); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `i` sem itálico: a fonte do produto não tem face itálica, e o navegador
   inventa uma oblíqua sintética que destoa de todo o resto da interface. */
.and-txt i {
  font-style: normal; font-size: var(--f-apoio); color: var(--prosa);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.and-barra {
  display: block; height: 4px; margin-top: var(--e1);
  border-radius: var(--r-pill); background: var(--border); overflow: hidden;
}
.and-barra > span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--primary);
  transition: width var(--t-lento) var(--curva);
}
/* NA FILA NÃO TEM PERCENTUAL, então não ganha barra falsa: ganha uma listra
   que anda, que diz "esperando" sem fingir que mediu alguma coisa. */
.and-barra.espera > span {
  background: repeating-linear-gradient(
    90deg, var(--primary-line) 0 10px, transparent 10px 20px
  );
  animation: and-anda 900ms linear infinite;
}
@keyframes and-anda { to { background-position-x: 20px; } }

.and-pct {
  flex-shrink: 0; font-family: var(--mono); font-size: var(--f-micro);
  color: var(--dim-ink); font-variant-numeric: tabular-nums;
}

/* O GIRO: o mesmo desenho na faixa e na pastilha do cabeçalho. */
.and-giro {
  display: inline-block; flex-shrink: 0; width: 12px; height: 12px;
  border: 2px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%;
  animation: and-gira 700ms linear infinite;
}
@keyframes and-gira { to { transform: rotate(360deg); } }

.and-pilula {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--primary-line); background: var(--primary-soft);
  color: var(--primary); font-size: var(--f-apoio); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-rapido) var(--curva);
}
.and-pilula:hover { background: var(--primary-line); }
.and-pilula:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .and-giro, .and-barra.espera > span { animation: none; }
}
@container tela (max-width: 620px) {
  /* No estreito o botão desce: o nome do relatório e a barra valem mais que
     ter tudo na mesma linha. */
  .and-linha { flex-wrap: wrap; }
  .and-txt { flex-basis: calc(100% - 30px - var(--e3)); }
  .and-linha .btn { margin-left: calc(30px + var(--e3)); }
}

/* PARTIR DE UM RAIO-X ANTERIOR: o bloco fica DEPOIS das acoes, e nao no lugar
   delas. Quem chegou aqui com rascunho quer o rascunho; quem chegou sem, ja
   leu o titulo dizendo que nao precisa comecar do zero. */
.retomar-antes {
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--border); text-align: left;
}
.ra-titulo {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: var(--tr-widest); text-transform: uppercase;
  color: var(--dim-ink); margin-bottom: var(--e2);
}
.ra-nota {
  margin: 0 0 var(--e4); max-width: 68ch;
  font-size: var(--f-apoio); color: var(--prosa); line-height: var(--lh-solto);
}
.ra-nota b { font-weight: 600; color: var(--ink); }

/* ── 6. contador de caracteres ──────────────────────────────────────────── */
/* Esta classe é SÓ do campo de texto. Ela já foi genérica o bastante para
   pegar o badge do sino junto e empurrá-lo para cima do desenho; por isso o
   badge virou `.sino-n`. Se um terceiro contador aparecer, ele ganha nome
   próprio também. */
.contador {
  font-family: var(--mono);
  font-size: var(--f-micro);
  color: var(--faint-ink);
  text-align: right;
  margin-top: var(--e2);
}
.contador.curto { color: var(--warn-ink); }

/* ── caixa de coaching, do MVP ──────────────────────────────────────────
 * Fundo âmbar, borda âmbar. Aparece quando a pessoa tenta avançar sem o que a
 * etapa precisa. O MVP a usa como professor, não como erro: ela explica em vez
 * de só barrar. */
.coaching {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  /* `#fffbeb` fixo virava uma faixa creme no admin escuro. O par cor+alfa
     funciona nos dois temas porque compõe sobre o fundo de cada um. */
  background: var(--warn-fundo);
  border: 1px solid var(--warn);
  border-radius: var(--r);
  padding: var(--e4) var(--e4);
  margin-bottom: var(--e5);
  font-size: var(--f-corpo);
  line-height: 1.55;
  color: var(--ink);
  animation: sobe var(--t-medio) var(--curva) backwards;
}
.coaching b { display: block; margin-bottom: var(--e0); }
:root:not([data-theme='light']) .coaching { background: var(--tom-warn-8); }

/* Foco visível e consistente em tudo que recebe teclado na captação. */
.opcao:focus-visible,
.modo:focus-visible,
.modelo:focus-visible,
.campo-grande:focus-visible,
.micro-texto:focus-visible,
.micro-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CELULAR
 *
 * A plataforma nasceu para tela grande. Este bloco a torna usável no telefone,
 * que é onde metade das pessoas vai responder um formulário de 30 minutos e
 * onde o dono vai abrir o plano no meio da semana.
 *
 * Seis correções, todas medidas antes:
 *
 *  1. NAVEGAÇÃO. A lateral some abaixo de 900px e não sobrava item nenhum:
 *     zero botões de menu alcançáveis. Quem abrisse no telefone não chegava
 *     na Biblioteca. Barra inferior resolve, e o polegar já vive lá.
 *  2. DICA NO TOQUE. As explicações do "?" só abriam no :hover, que não existe
 *     em touch. Todo o trabalho de instrução do MVP sumia no celular -- e o
 *     MVP tem o mesmo defeito.
 *  3. ALVOS DE 44px. Os botões tinham 33px de altura e a dica, 15x15.
 *  4. A PERGUNTA ACIMA DA DOBRA. As três instruções ocupavam 385px de 812 e
 *     empurravam a pergunta para y=564: a pessoa abria e não via o que foi
 *     perguntado.
 *  5. CABEÇALHO que não quebra em duas linhas.
 *  6. Área segura embaixo, para o iPhone não cobrir a barra com a faixa dele.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. menu de tela cheia ──────────────────────────────────────────────── */
.abrir-menu, .menu-cheio { display: none; }

@media (max-width: 900px) {
  /* O botão vive no canto do cabeçalho, com 44px de alvo e duas barras
   * finas: ícone que não precisa de legenda porque a posição já ensina. */
  .abrir-menu {
    /* `right` EM TOKEN, e igual ao recuo do cabecalho.
       Estava em 14px escritos a mao contra os 16 de `padding: 0 var(--e4)`
       do cabecalho: o logotipo comecava a 16 da borda esquerda e o botao
       parava a 14 da direita. Dois pixels que ninguem mede e todo mundo ve,
       porque o botao e o elemento mais pesado da barra e mora no canto. */
    /* `top: 10px`, e nao 12: o cabecalho tem 64px e o botao 44, e so os 10
       de cada lado o deixam no meio da barra. Com 12 ele descia 2px em
       relacao ao sino, e o dono viu (16.09.2026). */
    position: fixed; top: 10px; right: var(--e4); z-index: 60;
    display: flex; flex-direction: column; justify-content: center; gap: var(--e2);
    width: 44px; height: 44px; padding: 0 var(--e3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); cursor: pointer;
 }
  /* DUAS BARRAS DE 1,5px, a segunda com 70% da largura, liam como dois fios
     tortos: fino demais para o traço do resto do produto, que desenha ícones
     em 2px, e a barra curta parecia defeito e não estilo. Agora são duas
     barras de 2px, iguais, com ponta arredondada como os ícones da casa. */
  .abrir-menu span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; }
  .abrir-menu:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  .menu-cheio {
    position: fixed; inset: 0; z-index: 70;
    display: flex; flex-direction: column;
    background: var(--side); color: #fff;
    padding: var(--e5) var(--e5) calc(var(--e5) + env(safe-area-inset-bottom, 0));
    animation: sobe 0.28s var(--curva) backwards;
 }
  .menu-cheio[hidden] { display: none; }

  .mc-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e6); }
  .mc-topo .marca .n, .mc-topo .marca .s { color: #fff; }
  /* A MARCA NUMA LINHA SÓ, como no cabeçalho do celular e na lateral do
     computador (16.09.2026). Empilhada ela gastava 96px de altura, e o
     `padding` de 24px herdado de `.marca` da lateral empurrava o ícone 19px
     para dentro da coluna dos ícones do menu. */
  .mc-topo .marca { padding: 0; min-width: 0; }
  .mc-topo .marca .n { white-space: nowrap; }
  .mc-fechar {
    width: 44px; height: 44px; background: none; border: 0;
    color: #fff; font-size: var(--f-leitura); cursor: pointer; border-radius: var(--r);
 }
  .mc-fechar:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

  .mc-nav { flex: 1; display: flex; flex-direction: column; gap: var(--e0); }
  .mc-nav button {
    display: flex; align-items: center; gap: var(--e4);
    width: 100%; min-height: 58px; padding: var(--e3) var(--e1);
    background: none; border: 0; cursor: pointer;
    /* Tipografia grande: o menu ocupa a tela inteira, então cabe respirar --
     * e alvo grande é o que torna a lista confortável no polegar. */
    font-family: var(--brand); font-size: var(--f-secao); font-weight: 600;
    color: var(--tom-branco-60); text-align: left;
    border-bottom: 1px solid var(--tom-branco-8);
    /* O FIO DO ITEM ATIVO PRECISA DE UM PAI POSICIONADO. Ele é um `::before`
       absoluto em `left: 0`, e a regra que dá `position: relative` só cobria
       `.nav button`, do computador. Sem pai posicionado ele se ancorava no
       menu inteiro: aparecia um risco azul solto na borda esquerda, na metade
       da altura da tela, longe do item que estava ativo. */
    position: relative;
 }
  .mc-nav button.on { color: #fff; }
  .mc-nav button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .mc-ic { font-size: var(--f-corpo); width: 22px; text-align: center; opacity: 0.75; }
  .mc-pt {
    /* Neutro; vermelho só com item para agora (`.urg`), como na barra lateral. */
    margin-left: auto; background: var(--tom-branco-12); color: #fff;
    font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
    min-width: 22px; height: 22px; border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center; padding: 0 var(--e2);
 }
  .mc-titulo {
    font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--tom-branco-35);
    margin: var(--e5) 0 var(--e2); font-weight: 600;
 }
  .mc-cadeado { display: inline-flex; margin-left: auto; padding-left: 10px; color: #9aa3b2; opacity: .8; }
  .mc-pe { border-top: 1px solid var(--tom-branco-8); padding-top: var(--e5); }
  /* O CARTAO DE PERFIL LEVA A CONFIGURACOES, como no desktop. No celular ele
     era so texto, e o unico controle ali era "Sair": quem usa so o celular nao
     conseguia exportar os proprios dados, mudar o nome nem ver as sessoes. */
  .mc-pe .perfil-ir {
    flex: 1; min-width: 0; text-align: left; cursor: pointer;
    background: none; border: 0; padding: var(--e1) 0; color: inherit; font: inherit;
  }
  .mc-pe .perfil-ir .t2 { color: #9aa3b2; }
  .mc-pe .perfil-ir:hover .t2 { color: #fff; }

  /* O cabeçalho abre espaço para o botão. */
  header .acoes { padding-right: var(--e7); flex-shrink: 0; }
  /* O sino do mesmo tamanho do botao do menu ao lado: 36 contra 44 lia como
     desalinhado mesmo com os dois centrados, e 44 e o alvo de toque. */
  .main > header .sino { width: 44px; height: 44px; }
  /* As regras de "o cabeçalho é uma linha" subiram para a regra base: elas
     valem em qualquer largura, e presas aqui não valiam no tablet. */

  /* ── 5. cabeçalho numa linha só ──────────────────────────────────────── */
  header .crumb { font-size: var(--f-corpo); }

  /* ── 3. alvos de toque ───────────────────────────────────────────────── */
  .btn, .opcao, .modo, .modelo { min-height: 44px; }
  .btn.pq { min-height: 40px; }

  /* ── 4. instruções recolhidas ────────────────────────────────────────── */
  .instrucoes { display: none; }
  .instrucoes.aberta { display: grid; }
  .abrir-instrucoes {
    display: flex; align-items: center; gap: var(--e2);
    background: none; border: 0; font: inherit; font-size: var(--f-apoio);
    color: var(--primary); text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer; padding: var(--e2) 0; min-height: 44px;
 }
}

/* Acima de 900px as instruções ficam sempre abertas e o botão não existe. */
@media (min-width: 901px) {
  .abrir-instrucoes { display: none; }
}

/* ── 2 e 3. a dica funciona no toque ────────────────────────────────────
 * `.aberta` é ligada por clique no JS. O hover continua valendo no desktop;
 * o toque passa a valer em todo lugar. */
.dica-btn { width: 22px; height: 22px; font-size: var(--f-micro); }
.dica-wrap .dica-box.aberta { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  /* Alvo de 44px sem inchar o desenho: a área clicável cresce, o círculo não. */
  .dica-btn { position: relative; }
  .dica-btn::after {
    content: '';
    position: absolute;
    inset: -11px;
 }
  /* A caixa deixa de ser balão e vira folha inferior.
   *
   * Ancorada no botão ela saía pela lateral: o "?" da pergunta fica a ~150px
   * da borda esquerda e os 270px da caixa não cabem nos 375 da tela, sobrasse
   * ela para a esquerda ou para a direita. Encostar num dos lados só troca
   * qual metade some.
   *
   * Embaixo o problema não existe -- a largura é a da tela, não a do gatilho --
   * e a explicação nasce onde o polegar já está. Some no toque fora, que o JS
   * já trata. */
  .dica-box {
    position: fixed;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    transform: translateY(8px);
    width: auto;
    max-width: none;
    font-size: var(--f-corpo);
    line-height: 1.55;
    padding: var(--e4) var(--e4);
    border-radius: var(--r-md);
    box-shadow: 0 10px 30px var(--tom-sombra-25);
    transition: opacity 160ms var(--curva, var(--curva)), transform 160ms var(--curva, var(--curva));
    z-index: 60;
 }
  .dica-box.aberta { transform: translateY(0); }
  /* No toque não existe hover: sem isto a caixa pisca ao encostar. */
  .dica-wrap:hover .dica-box:not(.aberta) { opacity: 0; visibility: hidden; }
}

/* ── formulário no celular ──────────────────────────────────────────────── */
@container tela (max-width: 640px) {
  .form-acoes { flex-wrap: wrap; gap: var(--e3); }
  .form-acoes .btn.p { width: 100%; order: -1; }
  .atalhos { width: 100%; }
  .atalhos .btn { flex: 1; }
  .q-topo { flex-wrap: wrap; }
  .exec-acoes .btn { width: 100%; }
  .rasc { flex-wrap: wrap; }
  .rasc-info { flex-basis: 100%; margin-bottom: var(--e2); }
}

/* ── Tabela que vira cartão no celular ─────────────────────────────────────
 *
 * A Biblioteca é uma tabela de quatro colunas. Em 375px ela não cabe: o nome
 * da empresa quebrava em três linhas, o "Modo Mentor" ficava cortado e o botão
 * "Abrir" -- a razão da tela existir -- só aparecia arrastando o cartão para o
 * lado. Contido pelo overflow, então nenhuma auditoria de rolagem horizontal
 * acusava, e mesmo assim ninguém chegava no dossiê pelo telefone.
 *
 * Aqui cada linha vira um cartão: empresa em cima, tipo e data lado a lado,
 * ações ocupando a largura toda embaixo. Nenhum rótulo repetido por linha,
 * porque as três colunas se explicam sozinhas.
 * ------------------------------------------------------------------------ */
@container tela (max-width: 640px) {
  .tabela-cartoes { overflow-x: visible; }
  .tabela-cartoes table,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td { display: block; width: 100%; }

  /* O cabeçalho some: os rótulos viram redundantes quando cada linha é um
     bloco isolado, e ocupavam a largura toda. */
  .tabela-cartoes tr:first-child { display: none; }

  .tabela-cartoes tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--e2) var(--e3);
    padding: var(--e4) var(--e0);
    border-top: 1px solid var(--border);
 }
  .tabela-cartoes tr:nth-child(2) { border-top: 0; }
  .tabela-cartoes td { border: 0; padding: 0; }

  .tabela-cartoes td:nth-child(1) { grid-column: 1 / -1; font-size: var(--f-corpo); }
  /* Dentro de um painel que já anuncia a empresa, repetir o nome em cada linha
     gasta uma linha inteira de tela para não informar nada. Ali o tipo do
     dossiê passa a ser o título do cartão. */
  .tabela-cartoes.agrupada td:nth-child(1) { display: none; }
  .tabela-cartoes.agrupada td:nth-child(2) .chip { font-size: var(--f-micro); padding: var(--e2) var(--e3); }
  .tabela-cartoes td:nth-child(2) { grid-column: 1; justify-self: start; }
  .tabela-cartoes td:nth-child(3) { grid-column: 2; justify-self: end; font-size: var(--f-apoio); }
  .tabela-cartoes td:nth-child(4) {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--e2);
    margin-top: var(--e1);
    text-align: left !important;
 }
  .tabela-cartoes td:nth-child(4) .btn { flex: 1; min-height: 44px; }
}

/* ── Campo de texto no celular: 16px é regra, não gosto ────────────────────
 *
 * O Safari do iPhone dá zoom na página inteira quando o campo que recebe o
 * foco tem fonte menor que 16px. A pessoa toca no e-mail, a página amplia, o
 * layout sai do lugar e ela precisa pinçar de volta a cada campo. Num
 * formulário de treze etapas isso acontece dezenas de vezes.
 *
 * O `.campo-grande` já nasceu em 16px. As outras cinco famílias vinham de 13
 * a 14px, tamanho pensado para a tela grande. Aqui elas sobem só no celular:
 * o desktop mantém a tipografia como desenhada.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  input,
  textarea,
  select,
  .micro-texto,
  .micro-input,
  .dor-q textarea,
  .dor-passo input,
  .exec-ancora input,
  .log-filtros input,
  .log-filtros select {
    font-size: var(--f-leitura);
 }
  /* A altura fixa de 36px corta o texto de 16px. */
  .dor-passo input { height: 46px; }

  /* Os secundários da tela de entrada tinham 23px de altura. São a saída de
     quem não tem conta ou perdeu a senha, e ficavam difíceis de acertar. */
  .troca button {
    min-height: 44px;
    padding: 0 var(--e1);
    display: inline-flex;
    align-items: center;
 }
}

/* ── Ponte do Toolbox no celular ───────────────────────────────────────────
 * No desktop o "Copiar comando" flutua no canto do campo e sobra folga de
 * sobra. Em 375px o campo tem 258px e o botão tem 130: ele cobria o comando
 * que a pessoa precisa ler antes de copiar. Aqui os dois empilham. */
@container tela (max-width: 640px) {
  .ponte { padding: var(--e5); }
  .ponte .copiar {
    position: static;
    width: 100%;
    margin-top: var(--e3);
    min-height: 44px;
 }
  /* O comando é técnico e a pessoa confere antes de colar: 13px em mono ainda
     cabe na largura e não dispara o zoom do iOS ao receber foco.
     O padding de 44px embaixo existia para o botão flutuar sobre o campo sem
     cobrir texto. Com o botão empilhado, vira buraco. */
  .ponte textarea { font-size: var(--f-apoio); padding: var(--e4) var(--e4); }
}

/* ── Filtros da Biblioteca ─────────────────────────────────────────────────
 * Mesma linguagem do filtro do painel do admin: campo largo, controles curtos
 * ao lado. No celular o campo ocupa a linha e os tipos rolam numa faixa, em
 * vez de quebrarem em duas fileiras e empurrarem o acervo para baixo da dobra.
 * ------------------------------------------------------------------------ */
.bib-filtros { display: flex; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e5); align-items: center; }
.bib-filtros input {
  flex: 1 1 260px; font: inherit; font-size: var(--f-corpo); padding: var(--e3) var(--e3);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.bib-filtros input:focus { outline: none; border-color: var(--primary-line); box-shadow: var(--foco); }
.bib-tipos { display: flex; gap: var(--e2); flex-wrap: wrap; }

@container tela (max-width: 640px) {
  .bib-filtros { gap: var(--e2); }
  /* 16px pela mesma razão dos outros campos: abaixo disso o Safari do iPhone
     dá zoom na página ao focar. A regra geral do bloco de celular não alcança
     aqui, porque `.bib-filtros input` tem a mesma especificidade e vem depois
     no arquivo. */
  .bib-filtros input { flex: 1 1 100%; font-size: var(--f-leitura); }
  /* DUAS FILEIRAS, E NÃO UMA FAIXA QUE ROLA (15.09.2026). A faixa economizava
     44px e escondia o Toolbox fora da tela, sem nenhuma pista de que dava para
     arrastar: o filtro que não se vê é o filtro que não existe. É a mesma
     lição da barra de abas, em `abas.js`. */
  .bib-tipos { width: 100%; }
  .bib-tipos .btn { flex: 0 0 auto; min-height: 40px; }
}

/* ── Nome do artefato e renomeação no lugar ────────────────────────────────
 * O lápis fica discreto até a linha receber o ponteiro, porque é uma ação
 * ocasional, e um ícone sempre aceso ao lado de cada nome vira ruído numa
 * lista de vinte. No toque ele fica sempre visível: não existe hover, e um
 * controle que só aparece no hover simplesmente não existe no celular.
 * ------------------------------------------------------------------------ */
.art-nome { display: inline; }
.art-renomear {
  background: none; border: 0; cursor: pointer; padding: var(--e0) var(--e2);
  color: var(--faint-ink); font-size: var(--f-micro); line-height: 1;
  opacity: 0; transition: opacity 140ms var(--curva);
}
tr:hover .art-renomear, .art-renomear:focus-visible { opacity: 1; }
.art-renomear:hover { color: var(--primary); }
.art-emp { font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e0); }
.art-campo {
  font: inherit; font-size: var(--f-corpo); font-weight: 600;
  padding: var(--e1) var(--e2); border: 1px solid var(--primary); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink); width: 100%; max-width: 320px;
}
.art-campo:focus { outline: none; box-shadow: var(--foco); }

@media (max-width: 900px) {
  .art-renomear { opacity: 1; min-height: 44px; min-width: 44px; }
  .art-campo { font-size: var(--f-leitura); max-width: none; }
}

/* ── Nome do relatório, na revisão ─────────────────────────────────────────
 * Neutro quando é o primeiro relatório da empresa (é só uma conveniência) e
 * âmbar quando já existe outro (aí é a resposta para um problema que a pessoa
 * vai ter). A mesma gramática de cor da caixa de coaching do formulário.
 * ------------------------------------------------------------------------ */
.titulo-art {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--e4) var(--e5); margin-bottom: var(--e5); background: var(--surface);
}
.titulo-art.repetida { border-color: var(--warn); background: #fffbeb; }
:root:not([data-theme='light']) .titulo-art.repetida { background: var(--tom-warn-8); }
.titulo-art .opc {
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink); margin-left: var(--e2);
}
.titulo-ajuda, .titulo-aviso { font-size: var(--f-apoio); line-height: 1.55; margin: var(--e1) 0 var(--e3); }
.titulo-ajuda { color: var(--dim-ink); }
.titulo-aviso { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ESTÚDIO DE IA, AJUDA E PERFIL
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 54ch e não 62ch: medido na tela, 62ch dava 80 caracteres por linha. Ver a
   nota do `ch` em `.tb-lista li span`. */
.sub-tela { color: var(--dim-ink); font-size: var(--f-corpo); margin: var(--e1) 0 var(--e5); max-width: 54ch; }
.sec-t { font-size: var(--f-corpo); margin-bottom: var(--e4); }
.campo-nota { font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.55; }
.nav-pe { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--side-linha, var(--tom-branco-8)); }

/* ── Estúdio ───────────────────────────────────────────────────────────────
 * Cartão por motor. O que muda entre eles é só o estado, então a diferença
 * visual precisa ser de peso e não de forma: o destaque tem borda da marca, o
 * travado perde saturação, o previsto perde a ação inteira. Três estados que
 * se leem de longe sem depender de ler o rótulo.
 * ------------------------------------------------------------------------ */

.mot.destaque { border-color: var(--primary-line); }
.mot.travado { opacity: 0.72; }
.mot.previsto { background: none; border-style: dashed; opacity: 0.66; }

.mot.previsto .mot-ic { color: var(--faint-ink); }
/* `min-width: 0` não é enfeite: um <select> não encolhe abaixo da opção mais
 * longa, e "Empresa G Consultoria Empresarial · Raio-X" esticava o cartão inteiro 26px
 * além do container em 375px. Item flex tem `min-width: auto` por padrão, que
 * é justamente o tamanho do conteúdo. */

/* ── Ajuda ─────────────────────────────────────────────────────────────── */
.ajuda-bloco { margin-bottom: var(--e5); }
/* 68ch dava 87 caracteres por linha, medidos na Ajuda. */
.ajuda-p { font-size: var(--f-corpo); line-height: 1.65; color: var(--dim-ink); max-width: 55ch; }
/* OS SETE MOTORES (06.09.2026): cartões com o ícone no tom da família e um
   fio de cima da mesma cor. Era uma lista de fios azuis iguais. */
.ajuda-motores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e3); }
.ajuda-motor {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: var(--e4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.ajuda-motor:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.ajuda-motor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--fam-icone, var(--primary)); }
.am-ic { width: 36px; height: 36px; border-radius: var(--r-xs); display: grid; place-items: center; margin-bottom: var(--e3); background: var(--fam-soft, var(--surface-hi)); color: var(--fam-icone, var(--dim-ink)); }
.am-nome { font-family: var(--brand); font-weight: 600; font-size: var(--f-corpo); letter-spacing: -0.01em; }
.am-o { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e1); line-height: 1.55; flex: 1; }
.am-quando { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--border); line-height: 1.5; }
.am-quando span { display: block; font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: var(--e0); }

.faq { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:first-child { border-top: 0; }
.faq-item summary {
  cursor: pointer; padding: var(--e4) 0; font-size: var(--f-corpo); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: var(--e3); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* O sinal gira ao abrir: é a única pista de que o item é clicável antes do
   primeiro clique, já que não há seta nativa. */
.faq-item summary::before {
  content: '+'; font-family: var(--mono); color: var(--primary);
  font-size: var(--f-corpo); transition: transform 180ms var(--curva); display: inline-block;
}
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-item p { font-size: var(--f-corpo); line-height: 1.7; color: var(--dim-ink); padding: 0 0 var(--e4) var(--e5); max-width: 55ch; }

/* Os canais de contato: o botao e o numero legivel lado a lado. O numero fica
   VISIVEL e nao so dentro do href, porque quem prefere salvar o contato no
   proprio telefone nao vai clicar num botao para descobrir o numero. */
.ajuda-canais {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e4);
}
/* 44px de altura mínima, e não os 33px que o `.pq` dá. Este é um botão de
   contato, o que quer dizer que ele é clicado no telefone com o polegar e
   quase sempre por alguém que já está irritado com alguma coisa. É o pior
   lugar possível para um alvo pequeno. */
.ajuda-canais .btn { min-height: 44px; }

.ajuda-diag {
  font-family: var(--mono); font-size: var(--f-micro); line-height: 1.7;
  background: var(--surface-hi); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--e4) var(--e4); margin: var(--e4) 0; white-space: pre-wrap; word-break: break-word;
  color: var(--dim-ink); max-height: 220px; overflow-y: auto;
}
.ajuda-copiado { font-size: var(--f-micro); color: var(--ok-ink); margin-left: var(--e3); }

/* ── A BUSCA E OS ATALHOS (19.09.2026, tela do Codex aprovada pelo dono) ──── */
.ajuda-busca { max-width: 760px; margin: 0 0 var(--e6); }
.ajuda-busca-campo {
  display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: 0 var(--e4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); color: var(--faint-ink); cursor: text;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.ajuda-busca-campo:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--tom-primario-12); }
.ajuda-busca-campo input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; outline: 0; box-shadow: none; background: none;
  font: inherit; font-size: var(--f-corpo); color: var(--ink);
}
/* O resultado aparece colado na busca, e não lá embaixo na lista: quem busca
   precisa ver o achado sem rolar. Clicar leva à pergunta aberta. */
.ajuda-achados {
  margin-top: var(--e2); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.ajuda-achados button {
  display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 44px; padding: var(--e2) var(--e4);
  border: 0; background: none; font: inherit; font-size: var(--f-corpo); color: var(--ink); text-align: left; cursor: pointer;
}
.ajuda-achados button + button, .ajuda-achados p + button { border-top: 1px solid var(--border); }
.ajuda-achados button:hover, .ajuda-achados button:focus-visible { background: var(--surface-hi); outline: none; }
.ajuda-achados button .ic { color: var(--faint-ink); flex: none; }
.ajuda-achados .ajuda-perguntar { color: var(--primary); font-weight: 600; }
.ajuda-achados .ajuda-perguntar .ic { color: var(--primary); }
.ajuda-achados p { margin: 0; padding: var(--e3) var(--e4); font-size: var(--f-apoio); color: var(--dim-ink); }
.ajuda-populares { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e3); font-size: var(--f-apoio); color: var(--dim-ink); }
.ajuda-populares button {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e3);
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  font: inherit; font-size: var(--f-apoio); color: var(--ink); cursor: pointer;
  transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.ajuda-populares button:hover { border-color: var(--tom-primario-60); background: var(--surface-hi); }
.ajuda-populares button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* O título das perguntas com o atalho para o suporte ao lado. */
.ajuda-faq-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); flex-wrap: wrap; margin-bottom: var(--e2); }
.ajuda-faq-cab .sec-t { margin-bottom: 0; }
.ajuda-faq-link {
  display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px; padding: 0;
  border: 0; background: none; font: inherit; font-size: var(--f-apoio); color: var(--dim-ink); cursor: pointer;
}
.ajuda-faq-link { text-align: left; }
.ajuda-faq-link b { display: inline-flex; align-items: center; gap: var(--e1); color: var(--primary); font-weight: 600; white-space: nowrap; }
/* No telefone a frase inteira não cabe ao lado do título e quebrava em quatro
   pedaços centralizados (visto pelo dono). Fica só o atalho, numa linha. */
@container tela (max-width: 560px) {
  .ajuda-faq-link .afl-q { display: none; }
}
.ajuda-faq-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* A pergunta achada acende por um instante, para o olho saber onde pousar. */
.faq-item { transition: background var(--t-medio) var(--curva); border-radius: var(--r-xs); }
.faq-item.faq-realce { background: var(--tom-primario-8); }

/* ── O SUPORTE EM DUAS COLUNAS: a fala e os canais; o diagnóstico resumido ── */
.sup-grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e6); align-items: start; }
.sup-fala .ajuda-canais { margin: var(--e4) 0 var(--e3); }
.sup-nota { display: block; font-size: var(--f-apoio); }
.sup-diag { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e5); border-radius: var(--r-md); }
.sup-diag-t { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--f-corpo); font-weight: 600; }
.sup-diag p { margin: 0; font-size: var(--f-apoio); line-height: 1.55; }
.sup-resumo {
  display: flex; flex-direction: column; gap: var(--e1); width: 100%; margin: var(--e2) 0;
  padding: var(--e3) var(--e4); border-radius: var(--r); font-family: var(--mono); font-size: var(--f-micro); line-height: 1.6;
  word-break: break-word;
}
.sup-resumo b { display: inline-block; min-width: 9ch; font-weight: 500; }
.sup-diag .ajuda-diag { width: 100%; margin: var(--e2) 0 0; }
@container tela (max-width: 760px) {
  /* `minmax(0, 1fr)` e não `1fr`: o `1fr` cresce até o texto mais comprido
     (o e-mail em mono, o bloco completo) e vazava 48px no telefone. */
  .sup-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .sup-diag .btn, .sup-fala .ajuda-canais .btn { width: 100%; justify-content: center; }
}

/* ── Perfil ────────────────────────────────────────────────────────────── */
/* `margin-top: 0` nos filhos porque `.caixa + .caixa` dá 16px de topo a todo
   cartão que vem depois de outro, e numa grade isso desalinha a primeira
   linha: o primeiro cartão começa 16px acima dos irmãos. Era o "olha que
   desorganização" do print. `stretch` iguala as alturas na mesma linha. */
.perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); align-items: stretch; }
.perfil-grade > .caixa { margin-top: 0; }
.perfil-saldo { display: flex; align-items: baseline; gap: var(--e2); margin-bottom: var(--e4); }
.ps-n { font-family: var(--brand); font-size: var(--f-heroi); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-l { font-size: var(--f-apoio); color: var(--faint-ink); }
.perfil-sessoes {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: var(--e5); padding-top: var(--e5);
}
.perfil-sessoes > div { flex: 1 1 200px; }
.perfil-sessoes .t1 { font-size: var(--f-corpo); font-weight: 600; }

@container tela (max-width: 640px) {
  .est-grade, .perfil-grade, .ajuda-motores { grid-template-columns: 1fr; }
  .mot-acao .btn { width: 100%; }
}

/* Campo desabilitado precisa PARECER desabilitado. O e-mail do perfil é só de
   leitura, e desenhado igual a um campo comum ele convida ao clique e depois
   não responde, o que lê como bug e não como regra. */
input:disabled, textarea:disabled, select:disabled {
  background: var(--surface-hi);
  color: var(--faint-ink);
  cursor: not-allowed;
  border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MODO PAPEL
 *
 * Porte do `print_shared.php` do MVP (501 linhas), com uma decisão diferente:
 * o relatório NÃO é remontado. Ele já está desenhado, e um segundo
 * renderizador seria uma segunda verdade que envelhece calada. O motivo longo
 * está no cabeçalho de `impressao.js`.
 *
 * POR QUE UMA CLASSE, E NÃO SÓ `@media print`
 *
 * Porque ninguém consegue revisar o que não vê. Enquanto essas regras viviam
 * só dentro de `@media print`, elas eram invisíveis até o papel sair da
 * impressora, e uma delas estava errada: `button { display: none }` apagava os
 * seis títulos de tática do plano, porque `.tat-cab` é um <button> que carrega
 * o nome da tática. O PDF sairia com os corpos e sem os nomes.
 *
 * Agora a mesma folha liga em três situações, sem duplicar uma linha:
 *
 *   1. Na tela de impressão (`/imprimir/:id`), que mostra exatamente o que vai
 *      sair, ANTES de sair.
 *   2. No `beforeprint`, que o navegador dispara também no Ctrl+P direto.
 *   3. Ao imprimir a própria tela de impressão.
 *
 * O `@media print` no fim guarda só o que não faz sentido em tela: tamanho de
 * página, quebras e ajuste de cor.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Elementos que SÓ existem no papel. Ficam fora da tela por padrão. */
.so-papel { display: none; }

html.modo-papel,
html.modo-papel body {
  background: #fff !important;
  color: #000;
}
html.modo-papel body { font-size: 10.5pt; line-height: 1.55; }
html.modo-papel {
  --bg: #fff;
  --surface: #fff;
  --surface-hi: #fff;
}

/* ── O que não vai para o papel ───────────────────────────────────────────
 * Lista NOMEADA, e nunca `button` em bloco. A regra correta não é "esconder
 * botão", é "esconder AÇÃO": um elemento que também carrega texto do
 * relatório não é ação, é conteúdo com um clique em cima. */
html.modo-papel .side,
/* `.main > header` e NÃO `header`, que é a mesma lição escrita no alto deste
   arquivo e desobedecida aqui. `<header>` é um elemento de SEÇÃO: cada bloco
   do Toolbox tem o seu, com o número e o título dentro. O seletor solto
   apagava os cinco títulos da Proposta no papel, e o cliente recebia um PDF
   que começa direto em parágrafos soltos, sem "Seu Investimento" nem "Nosso
   Compromisso". O conteúdo continuava lá; a narrativa é que sumia. */
html.modo-papel .main > header,
html.modo-papel .abrir-menu,
html.modo-papel .menu-cheio,
html.modo-papel .sino-wrap,
html.modo-papel .creditos,
html.modo-papel .bib-filtros,
html.modo-papel .form-topo,
html.modo-papel .btn,
html.modo-papel .art-renomear,
html.modo-papel .dica-btn,
html.modo-papel .dica-box,
html.modo-papel .mc-fechar,
html.modo-papel .pedir,
html.modo-papel .ponte .copiar,
html.modo-papel .exec,
html.modo-papel .exec-acoes,
html.modo-papel .tat-status,
html.modo-papel .rev-linha .btn,
html.modo-papel .continuar { display: none !important; }

/* A BARRA DA PREVIA NAO E PAPEL, E ELA SE APAGAVA SOZINHA.
   A regra acima existe para tirar botao do que vai ser impresso, e pegava
   tambem os dois botoes da propria previa — "Voltar ao relatorio" e
   "Imprimir" — porque eles tambem sao `.btn`. Resultado: a pessoa entrava na
   previa e nao tinha como imprimir nem como sair pela interface, so pelo botao
   de voltar do navegador. Nao dependia da largura: era sempre.
   No papel de verdade a barra inteira some, pela regra do @media print. */
html.modo-papel .papel-barra .btn { display: inline-flex !important; }

/* O cabeçalho da tática É conteúdo: carrega o selo de dias e o nome. Só perde
   a cara de botão. */
html.modo-papel .tat-cab {
  display: flex !important;
  cursor: default;
  background: none !important;
  padding-bottom: var(--e1);
}
html.modo-papel .tat-abrir { display: none; }

/* ── OS CONTROLES QUE SOBRARAM NO PLANO IMPRESSO ─────────────────────────
 * Medidos na prévia: onze elementos vivos, e a lista NOMEADA do alto não
 * pegava dois deles.
 *
 * `.bt-ajustar` é ação pura: "Ajustar" num papel é um botão que não obedece.
 *
 * O `textarea` de decisão é pior que um botão inútil. Vazio, ele imprime uma
 * caixa em branco no meio do relatório, e quem recebe lê isso como informação
 * que faltou. Com decisão registrada ele é conteúdo e continua saindo, agora
 * como texto e não como campo: sem borda, sem fundo, sem altura de formulário.
 *
 * (O `.tat-cab` também aparecia na contagem, mas ele já sai estático pela
 * regra acima: é o nome da tática, e nome é conteúdo.) */
html.modo-papel .bt-ajustar { display: none !important; }
html.modo-papel .sf-corpo textarea:placeholder-shown { display: none !important; }
html.modo-papel .sf-corpo textarea {
  border: 0 !important; background: none !important; padding: 0 !important;
  resize: none; height: auto; min-height: 0;
}

/* Tática colapsada não pode sumir do papel: no PDF não existe expandir. */
html.modo-papel .tat-corpo { display: block !important; }

/* AS TRÊS FASES VÃO INTEIRAS PARA O PAPEL, sempre.
 * Na tela a trilha mostra uma de cada vez, porque as três juntas eram o muro
 * que ninguém lia; em papel não existe clicar, e um PDF com um terço do plano
 * é a mesma falha do `<details>` fechado, que já custou 73 caracteres uma vez.
 * Junto voltam a espinha e os pontos, que são o que diz que há uma ordem.
 *
 * O cartão "comece por aqui" NÃO vai: ele é um ponteiro para uma tática que
 * está inteira algumas páginas adiante, e ponteiro em papel é repetição. */
html.modo-papel .comeco,
html.modo-papel .tr-nav { display: none !important; }
html.modo-papel .fase { display: block !important; content-visibility: visible !important; }
html.modo-papel .trilha:not(.todas) .fases { padding-left: var(--e5); }
html.modo-papel .trilha:not(.todas) .fases::before,
html.modo-papel .trilha:not(.todas) .fase-ponto { display: block !important; }

/* A casca vira o documento. */
html.modo-papel .app,
html.modo-papel .main,
html.modo-papel .conteudo {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
html.modo-papel .conteudo { padding: 0 !important; }
html.modo-papel .dossie {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* A tabela deixa de rolar e passa a caber: em papel não existe arrastar. */
html.modo-papel .tabela-wrap { overflow: visible !important; }
html.modo-papel table { width: 100% !important; font-size: 9pt; }

/* Link vira texto: sublinhado azul em papel é ruído, e o endereço não é
   clicável de qualquer forma. */
html.modo-papel a { color: inherit; text-decoration: none; }

/* ── Capa ───────────────────────────────────────────────────────────────── */
html.modo-papel .capa-papel {
  display: flex !important;
  flex-direction: column;
  height: 24cm;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 1.2cm;
}
html.modo-papel .cp-marca {
  font-size: 10pt; text-transform: uppercase; letter-spacing: 5px;
  color: var(--dim-ink); font-weight: 600; border-bottom: 1px solid var(--border);
  padding-bottom: var(--e3); width: 50%; margin-bottom: 2cm;
}
html.modo-papel .cp-meio { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
html.modo-papel .cp-titulo {
  font-family: var(--brand); font-size: 34pt; line-height: 1.05;
  color: var(--primary); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4cm;
}
html.modo-papel .cp-sub { font-size: 15pt; font-weight: 600; color: var(--ink); }
html.modo-papel .cp-pe {
  margin-top: auto; font-size: 9pt; color: var(--dim-ink);
  border-top: 1px solid var(--border); padding-top: var(--e4); width: 80%;
}
html.modo-papel .cp-pe p { margin: var(--e0) 0; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
html.modo-papel .rodape-papel {
  display: block !important;
  margin-top: 1.6cm; padding-top: var(--e4); text-align: center;
  font-size: 8.5pt; color: var(--faint-ink); border-top: 1px solid var(--border);
}

/* ── A tela de impressão ─────────────────────────────────────────────────
 * A barra existe SÓ na tela, e é o ponto inteiro desta rota: a pessoa vê o
 * documento como ele vai sair e só então decide imprimir. Some no papel. */
.papel-barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); margin-bottom: var(--e5);
  background: var(--side); color: var(--border); border-radius: var(--r);
}
.papel-barra .pb-t { font-size: var(--f-apoio); flex: 1 1 220px; }
.papel-barra .pb-t b { color: #fff; }
.papel-folha { max-width: 21cm; margin: 0 auto; padding: 0 var(--e2) var(--e7); }

@media print {
  /* A4 com as margens do MVP. */
  @page { size: A4; margin: 2cm 1.5cm; }

  .papel-barra { display: none !important; }

  .papel-folha { max-width: none; margin: 0; padding: 0; }

  /* A capa ocupa a primeira página inteira. */
  .capa-papel { page-break-after: always; break-after: page; }
  .rodape-papel { page-break-inside: avoid; break-inside: avoid; }

  /* ── O QUE NÃO PODE SER CORTADO ────────────────────────────────────────
   *
   * `break-inside: avoid` só funciona em elemento que CABE numa página. Num
   * elemento mais alto que a folha, o navegador ignora a regra e quebra onde
   * der — e é aí que a lista abaixo mudou de forma.
   *
   * MEDIDO, e não suposto. Na prévia de um Raio-X real, a folha tem 12.215px e
   * a área útil de uma página A4 com margem de 2cm é 971px. A `.secao` das
   * ações mede 1.832px: a regra estava escrita nela, era ignorada, e os três
   * `.acao-card` de 625, 530 e 555px que ela contém — que CABEM numa página —
   * não estavam protegidos por nada. O resultado impresso é uma ação cortada ao
   * meio, exatamente o defeito que a regra existe para evitar.
   *
   * A correção é de GRANULARIDADE: proteger a unidade atômica, que é o cartão,
   * e não o contêiner que a agrupa. Um contêiner que estoura a página não deve
   * nem tentar ficar inteiro; ele deve deixar a quebra cair ENTRE os cartões.
   *
   * Os dois padrões no fim (`-card`, `-item`) não são preguiça: eles fazem a
   * proteção valer para o próximo cartão que alguém escrever, em vez de exigir
   * que a pessoa lembre de vir aqui. É a convenção de nome que o produto já
   * segue em todos os renders. */
  .caixa, .painel, table, .soco, .alerta, .veredito, .decisao-citada,
  .tat, .ponte, .passo-unico, .q-anel, li, .rev-linha, .ajuda-motor,
  [class*="-card"], [class*="-item"], .metrica, .callout, .quickwins, .faixa-num,
  .hero {
    page-break-inside: avoid;
    break-inside: avoid;
 }

  /* A `.secao` e a `.fase` são CONTÊINERES, e saíram da lista acima. Elas
     agrupam cartões e passam de uma página com frequência; pedir que fiquem
     inteiras é pedir o impossível e receber a quebra no pior lugar. O que se
     pede delas é o que dá para cumprir: não começar uma no fim da folha só
     para o título ficar órfão do primeiro cartão. */
  .secao > h2, .secao > h3, .fase > h2 { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* ── TABELA LONGA ──────────────────────────────────────────────────────────
   *
   * `table` está na lista acima, e para uma tabela curta isso basta: ela desce
   * inteira para a folha seguinte. Uma tabela mais alta que a página não tem
   * essa saída, e aí o navegador ignora a regra e quebra onde der — SEM levar
   * o cabeçalho junto. A segunda folha sai com uma grade de números sem uma
   * única coluna identificada, que é o defeito exato que o comentário da regra
   * acima diz estar evitando.
   *
   * `table-header-group` é a resposta do próprio CSS para isso: o `<thead>`
   * passa a se repetir no alto de cada folha que a tabela ocupar. E a proteção
   * desce para a LINHA, que é a unidade que de fato não pode ser partida.
   *
   * O Toolbox é quem gera tabela hoje (`toolbox-render.js`), e as tabelas dele
   * têm tamanho ditado pelo modelo: não dá para supor que caibam. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, th, td { page-break-inside: avoid; break-inside: avoid; }

  /* Cada fase do plano começa em página nova: são três blocos longos, e o
     cliente lê fase por fase, não em fluxo contínuo.
     `.fase ~ .fase` e não `:first-of-type`: as fases são <section> e há outras
     <section> antes delas, então `:first-of-type` casaria a primeira seção do
     plano e a Fase 1 começaria depois de uma página quase vazia. */
  .dossie.plano .fase ~ .fase { page-break-before: always; break-before: page; }

  /* Cores que carregam significado (o âmbar do risco, o verde do bom) precisam
     sair impressas, senão o documento perde a leitura de gravidade. */
  .soco, .alerta, .veredito, .ponte, .titulo-art.repetida, .rev-linha.vazia {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
 }
}

/* ── Modal de compra ───────────────────────────────────────────────────────
 * Um item por linha, preço à direita do nome. Grade de cartões daria a cara
 * de tabela de planos, e isto não é uma página de preços: é uma decisão curta
 * tomada no meio de outra coisa.
 * ------------------------------------------------------------------------ */
/* O VÍDEO COM FACHADA, usado no checkout, no primeiro acesso e no começo do
   formulário. Ver `video.js` para por que o
   `<iframe>` só nasce no clique. A proporção é fixa em 16:9 para o quadro
   entrar exatamente no lugar do botão, sem a página pular quando ele troca. */
.video-facha { margin: 0 0 var(--e4); }
.video-facha > * {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.vf-play {
  position: relative; cursor: pointer; padding: 0; font: inherit; color: #fff;
  /* Material de impacto, e não o marinho chapado da barra lateral: a fachada é
     uma superfície de apresentação nos três lugares onde aparece (primeiro
     acesso, checkout e formulário), e chapada ela lia como um buraco. */
  background: var(--impacto-fundo);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e3);
  transition: border-color var(--t-rapido) var(--curva);
}
.vf-play:hover { border-color: var(--primary); }
.vf-play:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vf-tri {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--primary); color: #fff;
  transition: transform var(--t-medio) var(--curva);
}
.vf-play:hover .vf-tri { transform: scale(1.06); }
.vf-txt { font-size: var(--f-corpo); font-weight: 600; }
.vf-quadro { border: 1px solid var(--border); }

/* O aviso de pagamento: espaçamento é do CSS, e não de `style=""` no JS. */
.compra-aviso { margin-bottom: var(--e4); }

.compra-itens { display: flex; flex-direction: column; gap: var(--e3); }
.compra-item {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--e4) var(--e5); background: var(--surface);
}
.compra-item.destaque { border-color: var(--primary-line); background: var(--primary-soft); }
.ci-topo { display: flex; align-items: baseline; gap: var(--e3); }
.ci-topo h3 { font-size: var(--f-corpo); flex: 1; min-width: 0; }
.ci-preco { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; font-variant-numeric: tabular-nums; }
.ci-desc { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.55; margin: var(--e2) 0 var(--e3); }

/* AS CONDIÇÕES DA COMPRA. Ficam entre a descrição e o botão de propósito: é o
   último lugar onde o olho passa antes de decidir, e parcelamento e garantia
   são justamente o que responde a hesitação de um preço de quatro dígitos. */
/* A PONTE ENTRE A ENTRADA E O PACOTE.
   Verde, e nao azul de marca: aqui a cor tem trabalho semantico, ela diz
   "isto e dinheiro que volta para voce". E ela fica ACIMA das condicoes
   porque muda a conta que a pessoa esta fazendo, enquanto parcelamento e
   garantia so ajustam uma conta ja feita. */
.ci-ponte { display: flex; gap: 8px; align-items: flex-start;
            margin: var(--e3) 0 0; padding: 10px 12px;
            background: var(--tom-ok-8); border-radius: var(--r-xs);
            font-size: var(--f-apoio); line-height: 1.45; color: var(--ok-ink); }
.ci-ponte .ic { flex-shrink: 0; margin-top: 2px; }
/* A resposta do clique, dentro do cartão. Vazia ela não ocupa nada: o cartão
   só cresce quando há o que dizer. */
.ci-msg:empty { display: none; }
.ci-msg { margin-top: var(--e3); }
.ci-msg .aviso { margin: 0; }
/* A nota da cobrança aberta, logo abaixo do seletor travado: diz por que ele
   não escolhe mais e qual é a saída. */
.ci-aberto { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.55; }
.ci-cond { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e1); }
.ci-cond li {
  display: flex; align-items: center; gap: var(--e1);
  font-size: var(--f-apoio); line-height: 1.5; color: var(--ok-ink);
}
.ci-cond svg { flex-shrink: 0; }

.tv-cond { list-style: none; margin: var(--e2) 0 0; padding: 0; }
.tv-cond li { font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink); }
.tv-cond li::before { content: '· '; color: var(--ok-ink); }

/* ── Bloco de continuidade no fim do relatório ─────────────────────────────
 * Discreto de propósito. O cliente pagou para receber este documento, e um
 * bloco chamativo no fim dele faz o documento inteiro parecer anúncio. */
.continuar {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--e4) var(--e5); background: var(--surface);
  background-image: linear-gradient(180deg, var(--tom-primario-8), transparent 45%);
}
.continuar .cont-l { flex-basis: 100%; }
.continuar .cont-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.cont-l {
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint-ink); font-weight: 600;
}
.cont-t { flex: 1 1 260px; font-size: var(--f-corpo); color: var(--dim-ink); }

@container tela (max-width: 640px) {
  .ci-topo { flex-wrap: wrap; }
  .compra-item .btn { width: 100%; }
  .continuar .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MOVIMENTO E COMPONENTES DO RENDER
 *
 * Porte do que faltava do `includes/render-core.css` do MVP: a revelação no
 * scroll, o callout com tons, a citação de destaque e os KPIs. O sistema
 * existia lá pronto e sem uso, consumido só pelo arquivo de demonstração.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Revelação no scroll ────────────────────────────────────────────────── */
/* `var(--atraso)` no lugar do atalho `transition-delay`: o atalho valeria
   para toda transição do elemento, e um bloco revelado com 240ms de atraso
   responderia ao mouse com 240ms de atraso depois. Ver `movimento.js`. */
.revela { opacity: 0; transform: translateY(14px); transition: opacity var(--t-lento) var(--curva) var(--atraso, 0ms), transform var(--t-lento) var(--curva) var(--atraso, 0ms); }
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
}
/* No papel, um bloco esperando o observador seria uma página em branco. */
html.modo-papel .revela { opacity: 1 !important; transform: none !important; }

/* ── Cartão que responde ao ponteiro ─────────────────────────────────────
 * Só nos blocos que a pessoa pode ABRIR ou seguir. Um cartão de leitura que
 * levanta ao passar o mouse promete um clique que não existe. */
.item, .tat, .compra-item, .mot {
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}
.tat:hover, .compra-item:hover, .mot:not(.previsto):hover {
  border-color: var(--fam, var(--primary-line));
  box-shadow: var(--shadow-hover);
}
.mot:not(.previsto):not(.travado):hover { transform: translateY(-2px); }

/* ── Linha de tabela que acende ──────────────────────────────────────────
 * Numa tabela de risco com cinco colunas, o olho perde a linha no meio do
 * caminho. O realce resolve sem precisar de zebra. */
.tabela-wrap tbody tr:hover td,
.tabela-wrap tr:hover td { background: var(--surface-hi); }
html.modo-papel .tabela-wrap tr:hover td { background: none; }

/* ── Callout com tom ─────────────────────────────────────────────────────
 * Barra na lateral, fundo suave. O tom carrega significado: âmbar é atenção,
 * vermelho é risco, verde é confirmação. Sem o tom, tudo vira o mesmo aviso e
 * a pessoa para de ler todos. */
.callout {
  border-left: 3px solid var(--fam); background: var(--fam-soft);
  border-radius: 0 12px 12px 0; padding: var(--e4) var(--e4); font-size: var(--f-corpo); line-height: 1.6;
}
.callout .l {
  display: block; margin-bottom: var(--e2); font-family: var(--body); font-size: var(--f-micro); color: var(--dim-ink); font-weight: 600;
}
.callout[data-tom='danger'] { border-left-color: var(--danger); background: var(--tom-danger-8); }
.callout[data-tom='danger'] .l { color: var(--danger-ink); }
.callout[data-tom='ok'] { border-left-color: var(--ok); background: var(--tom-ok-8); }
.callout[data-tom='ok'] .l { color: var(--ok-ink); }
.callout[data-tom='warn'] { border-left-color: var(--warn); background: var(--tom-warn-8); }
.callout[data-tom='warn'] .l { color: var(--warn-ink); }

/* ── Citação de destaque ─────────────────────────────────────────────────
 * O ouro na lateral. Serve para a frase que o cliente vai repetir para o
 * sócio, e por isso aparece pouco: uma por relatório. */

/* ── KPIs ────────────────────────────────────────────────────────────────── */
.kpi { background: var(--surface-hi); border-radius: var(--r); padding: var(--e4) var(--e4); }
.kpi span {
  display: block; font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink);
}
.kpi b { font-family: var(--brand); font-weight: 600; font-size: var(--f-tela); }
.kpi[data-tom='ok'] b { color: var(--ok-ink); }
.kpi[data-tom='danger'] b { color: var(--danger-ink); }
.kpi[data-tom='warn'] b { color: var(--warn-ink); }
.kpi[data-tom='fam'] b { color: var(--ink); }

/* Marcador de lista na cor da família: detalhe pequeno que amarra a página
   inteira ao tipo de relatório. */
.dossie li::marker { color: var(--faint-ink); }

/* ── Radar 360°, já com a família reservada ──────────────────────────────
 * Azul, do render-core.
 *
 * ⚠️ A COR DO RADAR NÃO MORA MAIS AQUI. Este bloco foi escrito quando o motor
 * do Radar não existia ("quando existir, o render nasce com a identidade certa
 * sem tocar aqui"). O motor passou a existir, o render trouxe a própria cor
 * mais abaixo, e esta declaração virou letra morta: um `.radar { --fam }`
 * idêntico e posterior a vence.
 *
 * Ficaram dois azuis diferentes no arquivo, #0ea5e9 aqui e #0E7490 lá, e quem
 * lesse este bloco acreditaria no primeiro. Medido no navegador: a cor que a
 * tela usa é #0E7490. */

/* ═══════════════════════════════════════════════════════════════════════════
 * MOVIMENTO DA INTERFACE
 *
 * Vocabulário do MVP, lido do `inicio.php`: três animações e UMA curva,
 * `cubic-bezier(0.16, 1, 0.3, 1)`, que é a assinatura do produto. Ela desacelera
 * forte no fim, e é o que faz a interface parecer que POUSA em vez de parar.
 *
 * O ganho aqui não é decorativo. Numa aplicação de página única, trocar de tela
 * é substituir o conteúdo de uma div: sem transição, a tela nova aparece de
 * estalo e a pessoa não sabe se navegou ou se algo recarregou. A entrada é o
 * que diz "isto é outro lugar".
 * ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sobe-tela {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

/* A tela inteira entra a cada troca de rota. `backwards` e não `both`: `both`
 * deixa um transform identidade grudado para sempre, e transform torna o
 * elemento containing block de qualquer `position: fixed` dentro dele. Foi
 * assim que a dica do formulário passou a encostar na base do formulário em
 * vez da base da tela. */
/* ENTRADA EM 250ms, SOMADA (auditoria de 05.09.2026). Duas capturas seguidas
 * pegaram telas no meio do fade, quase um segundo depois do clique: a soma
 * das escadas (tela 0,4s + painéis 0,45s + 200ms de atraso + itens) passava
 * a sensação de plataforma lenta. Agora nada demora mais que um quarto de
 * segundo, e na REVISITA (`.conteudo.revisita`, posta pelo roteador) a tela
 * entra seca. */
.conteudo > * { animation: sobe-tela 0.22s var(--curva) backwards; }

/* Entrada em cascata nas listas. O atraso é pequeno de propósito: 40ms por
 * item é percebido como ritmo; 150ms é percebido como lentidão. Só os seis
 * primeiros recebem atraso, porque a partir daí a pessoa já rolou e a cascata
 * viraria espera. */
.painel { animation: sobe-tela 0.2s var(--curva) backwards; }
.painel:nth-child(2) { animation-delay: 25ms; }
.painel:nth-child(3) { animation-delay: 50ms; }
.painel:nth-child(4) { animation-delay: 75ms; }
.painel:nth-child(5) { animation-delay: 100ms; }
.painel:nth-child(6) { animation-delay: 125ms; }
.conteudo.revisita > *, .conteudo.revisita .painel, .conteudo.revisita .entra,
.conteudo.revisita .aba-painel.on, .conteudo.revisita .aba-painel.on .intro,
.conteudo.revisita .aba-painel.on .intro::before, .conteudo.revisita .aba-painel.on .intro-ic,
.conteudo.revisita .aba-painel.on .intro-o, .conteudo.revisita .aba-painel.on .intro-como,
.conteudo.revisita .aba-painel.on .intro-x, .conteudo.revisita .tb-grade .tbc { animation: none; }

/* O item ativo do menu ganha um fio na lateral, em vez de só mudar de cor.
 * Cor sozinha some para quem enxerga pouco contraste; a barra não. */
.nav button { position: relative; transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
.nav button.on::before,
.mc-nav button.on::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 18px; border-radius: 0 2px 2px 0; background: var(--fam-nav, var(--primary));
}

/* O sino pulsa enquanto há pendência não lida. Uma vez a cada dois segundos e
 * meio: rápido o bastante para ser notado, lento o bastante para não irritar
 * em quem fica com a aba aberta o dia todo. */
@keyframes pulso-sino {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
.sino-n { animation: pulso-sino var(--t-pulso) var(--curva) infinite; }

/* Movimento é preferência, não decisão nossa. */
@media (prefers-reduced-motion: reduce) {
  .conteudo > *, .painel { animation: none; }
  .sino-n { animation: none; }
}
/* No papel nada anima, e nada pode nascer transparente. */
html.modo-papel .conteudo > *,
html.modo-papel .painel { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * ABAS DO RELATÓRIO
 *
 * Estrutura dos renders de PRODUÇÃO do MVP (`render_raiox.php` e
 * `render_plan.php`): sete abas por relatório. A pílula branca com sombra azul
 * é de lá; o sublinhado que desliza é do `render-core.css`. Os dois juntos dão
 * o estado ativo lido de duas formas, que é o que sobrevive a monitor ruim.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* O INVÓLUCRO das abas: ele existe para as setas terem contra o que se
   posicionar. Dentro da barra elas rolariam junto e sairiam da tela justamente
   quando fossem necessárias. O `sticky` mudou de lugar: quem gruda agora é o
   invólucro, senão a barra gruda e as setas ficam para trás. */
.abas-wrap { position: sticky; top: 0; z-index: 30; }

/* O ESMAECIDO É DO INVÓLUCRO e não da barra, pelo mesmo motivo. Ele acende
   junto com a seta, pelas classes que o JS liga conforme a posição. */
.abas-wrap::before,
.abas-wrap::after {
  content: ''; position: absolute; top: 1px; bottom: 1px; width: 40px;
  pointer-events: none; opacity: 0; z-index: 1;
  transition: opacity var(--t-rapido) var(--curva);
}
.abas-wrap::before { left: 1px; background: linear-gradient(90deg, var(--surface-hi), transparent); }
.abas-wrap::after { right: 1px; background: linear-gradient(270deg, var(--surface-hi), transparent); }
.abas-wrap:has(.tem-esq)::before,
.abas-wrap:has(.tem-dir)::after { opacity: 1; }

.abas-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: none; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--dim-ink); cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.abas-seta:hover { color: var(--ink); background: var(--surface-hi); }
.abas-seta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.abas-seta.esq { left: var(--e2); }
.abas-seta.dir { right: var(--e2); }
.abas-seta.esq svg { transform: rotate(180deg); }
/* Cada seta só existe quando há para onde ir daquele lado. */
.abas-wrap:has(.tem-esq) .abas-seta.esq,
.abas-wrap:has(.tem-dir) .abas-seta.dir { display: grid; }

/* Espaço para a seta não cobrir a primeira nem a última aba. */
.abas-nav.tem-esq { scroll-padding-left: 38px; padding-left: 38px; }
.abas-nav.tem-dir { scroll-padding-right: 38px; padding-right: 38px; }

.abas-nav {
  scroll-behavior: smooth;
  display: flex; align-items: center; gap: var(--e1);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--e2);
  background: var(--surface-hi); border: 1px solid var(--border); border-radius: var(--r-md);
}
.abas-nav::-webkit-scrollbar { display: none; }
.aba-sep { flex-shrink: 0; width: 1px; height: 18px; background: var(--tom-sombra-12); border-radius: 0; }

.aba-btn {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4); border: 0; border-radius: var(--r);
  background: none; font: inherit; font-size: var(--f-corpo); font-weight: 500;
  color: var(--dim-ink); cursor: pointer; white-space: nowrap;
  transition: color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.aba-btn:hover { color: var(--ink); }
.aba-btn.on {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-pilula);
}
.aba-btn:focus-visible { outline: 2px solid var(--fam); outline-offset: -2px; }
.aba-ic { font-size: var(--f-micro); line-height: 1; opacity: 0.9; }

/* O sublinhado que desliza, do render-core. Escala de 0 a 1 na curva do
   produto: some e volta na mesma velocidade em que a aba troca. */
.aba-btn::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--fam); border-radius: 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-medio) var(--curva);
}
.aba-btn.on::after { transform: scaleX(1); }

/* Quem esconde o painel inativo é o atributo `hidden="until-found"`, e não uma
   regra daqui. É deliberado: `display: none` some com o texto para a busca do
   navegador, e um Raio-X tem oito abas e nove mil pixels que a pessoa precisa
   conseguir procurar. Ver o comentário em `abas.js`. */
.aba-painel:focus-visible { outline: none; }

/* As ações ficam entre a capa e as abas: pedir o Plano, registrar a decisão e
   chamar o Conselho não pertencem a uma seção, e dentro de uma aba elas
   sumiriam. */
.acoes-dossie:empty { display: none; }

/* ── No papel, toda aba vira seção ───────────────────────────────────────
 * Regra do MVP, verbatim: `.tab-panel { display: block !important }` e
 * `.tab-nav { display: none !important }`. Em papel não existe clicar, e um
 * PDF com uma aba só seria um documento com um sétimo do conteúdo. */
/* ── CONTROLE NÃO É CONTEÚDO ────────────────────────────────────────────────
 *
 * O papel sai do produto: vai para reunião de sócio, para o e-mail de um
 * consultor, para a mão de quem executa. Um botão impresso não faz nada, e pior,
 * promete uma ação a quem não tem como executá-la.
 *
 * ESTAS REGRAS FICAM AQUI, E NÃO DENTRO DE `@media print`, e a diferença é a
 * razão de a tela de prévia existir. Ela promete, com todas as letras, "o que
 * você vê aqui é o que sai no papel". Uma regra que só vale dentro do
 * `@media print` não vale na prévia, e a prévia passa a mentir sobre a única
 * coisa que ela existe para mostrar. Como `ligarImpressaoDireta` liga
 * `modo-papel` no `beforeprint`, esta classe também está presente no Ctrl+P
 * direto: uma regra só, verdadeira nos dois caminhos.
 *
 * A barra de abas já estava aqui. Faltavam os outros, e a medição na prévia de
 * um Raio-X real achou OITO botões indo para o papel: o "✕" de fechar cada
 * faixa de introdução. Junto deles saem os blocos de ação, que imprimiam
 * "1 crédito" e um botão clicável num documento de papel. */
html.modo-papel .abas-nav,
html.modo-papel .intro-x,
html.modo-papel .acoes-dossie,
html.modo-papel .dossie-acoes,
html.modo-papel .dossie-pe { display: none !important; }
/* No papel todas as abas entram. `display` não basta: o painel inativo está em
   `content-visibility: hidden` por causa do `until-found`, e isso o mantém fora
   da renderização mesmo exibido. */
html.modo-papel .aba-painel { display: block !important; content-visibility: visible !important; }

@container tela (max-width: 640px) {
  .abas-nav { border-radius: var(--r); padding: var(--e2); margin-left: -2px; margin-right: -2px; }
  .aba-btn { padding: var(--e3) var(--e3); font-size: var(--f-apoio); min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .aba-btn::after { transition: none; }
}

/* O anel nasce vazio e é preenchido pelo JS. Se o JS não rodar, esta regra
   entrega o estado final: nota é conteúdo, não efeito. */
html.modo-papel .ca-arco { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * SISTEMA VISUAL DO RAIO-X
 *
 * Porte do `render_raiox.php` do MVP, o render de PRODUÇÃO (135 KB). Antes eu
 * tinha trazido o `includes/render-core.css`, que é o sistema de design dos
 * renders e estava sem uso: peguei a folha certa e a estrutura errada.
 *
 * O que faz aquele relatório parecer caro não é uma coisa, são sete, e todas
 * pequenas. Cada bloco abaixo é uma delas, com o motivo de existir.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. VIDRO ─────────────────────────────────────────────────────────────
 * `var(--tom-branco-70)` sobre `blur(16px)`. O cartão deixa passar um
 * fantasma do que está atrás, e é isso que dá profundidade sem sombra pesada:
 * o olho entende que há camadas.
 *
 * O hover levanta 2px e a borda puxa para o azul. Dois sinais, não um: a
 * sombra sozinha some em monitor claro, a borda sozinha some em monitor com
 * pouco contraste. */
.dossie .secao,
.dossie .item,
.dossie .painel,
.caixa {
  /* A superfície de VIDRO é token, e não branco escrito à mão.
     Era `var(--tom-branco-70)` fixo, e no admin escuro isso virava uma placa
     branca no meio do painel — o cartão continuava lá, bonito, e ilegível. É a
     mesma regra das duas auditorias que já valia para cor: valor literal em
     componente é o que impede o tema de ser trocado num lugar só. */
  background: var(--vidro);
  -webkit-;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.dossie .secao:hover,
.dossie .item:hover {
  border-color: color-mix(in srgb, var(--fam) 22%, transparent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* Fundo sólido no papel: `backdrop-filter` não existe na impressão e o
   resultado é um cartão cinza sujo. */
html.modo-papel .dossie .secao,
html.modo-papel .dossie .item,
html.modo-papel .caixa {
  background: #fff; backdrop-filter: none; box-shadow: none; transform: none;
}

/* ── 2. O BOTÃO QUE FLUTUA ────────────────────────────────────────────────
 * A sombra do primário é COLORIDA (`var(--tom-primario-25)`), não cinza. É o
 * detalhe que separa "botão azul" de "botão que emite luz azul", e custa uma
 * linha. No hover ela cresce e o botão sobe 2px. */
.btn.p {
  /* Luz interna de 1px, levanta 1px no hover, desce 1px no clique (06.09.2026). */
  box-shadow: inset 0 1px 0 var(--tom-branco-25), 0 6px 16px -8px color-mix(in srgb, var(--navy) 70%, transparent);
  transition: filter var(--t-medio) var(--curva), transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.btn.p:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--tom-branco-25), 0 10px 22px -8px color-mix(in srgb, var(--navy) 80%, transparent);
}
.btn.p:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--tom-branco-25); }
.btn.s { transition: background var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva); }
.btn.s:hover:not(:disabled) { border-color: var(--tom-primario-25); box-shadow: 0 4px 12px var(--tom-primario-4); }
html.modo-papel .btn { box-shadow: none !important; }

/* ── 3. O RÓTULO DE SEÇÃO ─────────────────────────────────────────────────
 * Mono, caixa alta, `letter-spacing: .3em`. Esse espaçamento é exagerado de
 * propósito: ele transforma três palavras num elemento gráfico, e é o que
 * separa "título pequeno" de "etiqueta de dossiê". */
/* A RÉGUA DE SEÇÃO (06.09.2026). O número grande, fora do cartão, como numa
   revista; o título ao lado em peso 600. Era mono em caixa alta com 0.3em. */
.rotulo-secao { display: flex; align-items: baseline; gap: var(--e4); color: var(--ink); margin: var(--e6) 0 var(--e4); }
.rotulo-secao .rs-n { font-size: var(--f-tela); font-weight: 700; letter-spacing: -0.03em; color: var(--faint-ink); font-variant-numeric: tabular-nums; line-height: 1; min-width: 44px; }
.rotulo-secao .rs-t { font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.rotulo-secao:first-child { margin-top: var(--e4); }
.rotulo-secao .bt-ajustar { margin-left: auto; align-self: center; }
.rotulo-secao .chip { align-self: center; }

/* ── 4. CASCATA DE ENTRADA ────────────────────────────────────────────────
 * 80ms por degrau, cinco degraus. É o ritmo do MVP, e o teto de cinco existe
 * porque o sexto elemento já entra depois de a pessoa ter começado a ler. */
@keyframes entra-subindo {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entra   { animation: entra-subindo 0.22s var(--curva) backwards; }
.entra-1 { animation-delay: 0.03s; }
.entra-2 { animation-delay: 0.06s; }
.entra-3 { animation-delay: 0.09s; }
.entra-4 { animation-delay: 0.12s; }
.entra-5 { animation-delay: 0.15s; }

/* ── 5. TROCA DE ABA COM MOVIMENTO ────────────────────────────────────────
 * Sem isto a aba nova aparece de estalo e a pessoa não sabe se algo mudou. O
 * painel entra subindo 10px, curto: é confirmação, não espetáculo. */
@media (prefers-reduced-motion: reduce) {
  .aba-painel.on, .entra { animation: none; }
}
html.modo-papel .aba-painel, html.modo-papel .entra { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── 6. LINHA DO TEMPO DO ROADMAP ─────────────────────────────────────────
 * O fio desce e ESMAECE: ele indica continuidade sem fingir que o plano tem
 * fim definido. Os marcos são círculos de 40px, grandes o bastante para caber
 * um número dentro. */

/* ── 7. SEGMENTADO (o "cenário" do MVP) ───────────────────────────────────
 * Grupo de pílulas dentro de uma calha cinza. A ativa fica branca com sombra
 * curta, o que a faz parecer levantada da calha. */
.segmentado { display: inline-flex; gap: var(--e1); background: var(--surface-hi); border-radius: var(--r); padding: var(--e1); }
.segmentado button {
  padding: var(--e2) var(--e4); border: 0; border-radius: var(--r-xs); background: none;
  font: inherit; font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
  cursor: pointer; transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.segmentado button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

/* ── Barra de progresso ─────────────────────────────────── */
.barra i, .barra-exec-fill, .passos-preenche, .barra-passos-preenche {
  background: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * A TELA DE CARREGAMENTO — três anéis
 *
 * Do `render_raiox.php`. Três anéis concêntricos girando em velocidades e
 * SENTIDOS diferentes: o de fora devagar (3s), o do meio rápido (1,5s), o de
 * dentro tracejado e ao contrário (2s).
 *
 * O contra-giro é o truque: dois anéis girando para o mesmo lado leem como um
 * disco só. Girando em sentidos opostos, o olho vê mecanismo, e mecanismo
 * comunica "está trabalhando" muito melhor que um spinner comum. Numa espera
 * de dois a cinco minutos, isso é a diferença entre parecer travado e parecer
 * processando.
 * ═══════════════════════════════════════════════════════════════════════════ */
@keyframes gira      { to { transform: rotate(360deg); } }
@keyframes gira-volta{ to { transform: rotate(-360deg); } }
@keyframes corre-barra {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.aneis { position: relative; width: 120px; height: 120px; margin: 0 auto 1.75rem; }
.aneis .a-fora   { position: absolute; inset: 0;     border: 4px solid var(--tom-primario-8); border-radius: 50%; animation: gira 3s linear infinite; }
.aneis .a-meio   { position: absolute; inset: 8px;   border: 2px solid transparent; border-top-color: var(--primary); border-radius: 50%; animation: gira 1.5s linear infinite; }
.aneis .a-dentro { position: absolute; inset: 22px;  border: 2px dashed var(--tom-ouro-35); border-radius: 50%; animation: gira-volta 2s linear infinite; }
.aneis .a-centro {
  position: absolute; inset: 30px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand); font-weight: 600; font-size: var(--f-leitura); color: var(--primary);
}
/* O ícone do motor no miolo. `stroke` e não `fill` porque o conjunto inteiro é
   traçado; um ícone cheio aqui viraria uma mancha dentro do anel. */
.aneis .a-centro svg { display: block; }

/* A barra indeterminada: um trecho que atravessa, para quando não se sabe
   quanto falta. Diferente da barra de percentual, que diz quanto falta. */

@media (prefers-reduced-motion: reduce) {
  .aneis .a-fora, .aneis .a-meio, .aneis .a-dentro { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TOASTS
 *
 * Do `render_raiox.php`. Canto inferior direito, entrando pela direita, com
 * um fio de 3px na cor do tipo. Existem porque um aviso injetado no meio da
 * página empurra o conteúdo e faz a pessoa perder a linha que estava lendo.
 * ═══════════════════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 99999;
  display: flex; flex-direction: column; gap: var(--e2);
  max-width: 360px; width: calc(100% - 3rem); pointer-events: none;
}
@keyframes toast-entra { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toast-sai   { to { opacity: 0; transform: translateX(20px); } }
.toast {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) 1.25rem; border-radius: var(--r);
  font-size: var(--f-corpo); font-weight: 500; line-height: 1.4;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-hover);
  pointer-events: all;
  animation: toast-entra var(--t-medio) var(--curva) both;
}
.toast.saindo { animation: toast-sai var(--t-medio) ease forwards; }
.toast.erro { border-left: 3px solid var(--danger); }
.toast.ok   { border-left: 3px solid var(--ok); }
.toast.info { border-left: 3px solid var(--primary); }
.toast button { background: none; border: 0; cursor: pointer; color: var(--faint-ink); font-size: var(--f-corpo); line-height: 1; padding: 0 0 0 var(--e2); margin-left: auto; }
html.modo-papel .toasts { display: none !important; }

@media (max-width: 640px) {
  .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* ── Selo do hero, com ponto pulsante ────────────────────────────────────
 * Do `render_raiox.php`. O ponto pulsando é o que separa "etiqueta" de "sinal
 * de vida": diz que o documento vem de um sistema que está rodando. */
@keyframes pulso-ponto {
  0%   { box-shadow: 0 0 0 0 var(--fam-soft); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.capa-selo {
  display: inline-flex; align-items: center; gap: var(--e2); align-self: flex-start;
  margin-top: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink);
}
.cs-ponto {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--fam); animation: pulso-ponto var(--t-pulso) ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .cs-ponto { animation: none; } }

/* ── Faixa de números ────────────────────────────────────────────────────
 * A `kpi-strip` do `render_raiox.php`. Responde, antes de qualquer leitura,
 * "o quanto de análise tem aqui dentro", que é a primeira pergunta silenciosa
 * de quem abre um relatório que pagou para receber. */
.faixa-num {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e3); margin-bottom: var(--e5);
}
.fn-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--e4) 1.25rem;
}
.fn-item span {
  display: block; font-family: var(--body); font-size: var(--f-micro); color: var(--faint-ink); font-weight: 600;
}
.fn-item b { font-family: var(--brand); font-size: var(--f-tela); font-weight: 600; line-height: 1.2; }

/* Tipografia do hero, alinhada ao render_raiox: meta em 14px (text-sm) e não
   em 17px. O valor grande é do ANEL; a meta é apoio, e competindo em tamanho
   os dois se anulam. */
.capa-meta > div b { font-size: var(--f-corpo); }
.capa-meta { gap: var(--e5); }

/* ── Seção numerada ──────────────────────────────────────────────────────
 * O "01. Resumo Executivo" do `render_raiox.php`. O número dá TAMANHO ao
 * relatório: quem vê "04." sabe que existe um 05; quem vê "09." sabe que
 * chegou ao fim. Num documento com abas, a rolagem de cada aba mente sobre o
 * todo, e sem numeração não há noção de quanto falta. */

/* ── Cartão de leitura (o LEIA-ME) ───────────────────────────────────────
 * Para o primeiro acesso: a pessoa abre nove mil pixels e não sabe por onde
 * começar. Some no papel, porque orientação de navegação não serve em PDF. */
html.modo-papel .leia-me { display: none !important; }

@container tela (max-width: 640px) {
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ESCALA TIPOGRÁFICA DO RENDER
 *
 * Os valores são os do Tailwind, que é o que o `render_raiox.php` usa em 826
 * ocorrências de classe utilitária. Portados como TOKENS e não como classes
 * utilitárias, por decisão: adotar utilitárias aqui traria um segundo
 * paradigma de estilo para dentro de um arquivo que é todo semântico, e o
 * resultado seria duas formas de fazer a mesma coisa convivendo.
 *
 * Assim a fidelidade é a mesma e a manutenção continua num lugar só.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* A escala `--t-*` que morava aqui SAIU. Ela era a terceira escala do
     arquivo, tinha 33 usos contra os 344 da `--f-*`, e dois degraus dela
     (`--t-2xl` e `--t-4xl`) nunca tinham sido usados uma única vez. Duas
     escalas para a mesma coisa não é redundância inofensiva: é a pergunta
     "qual eu uso aqui" sem resposta, toda vez que alguém escreve uma tela.
     As entrelinhas `--lh-*` foram junto: 1 uso entre as oito. */
  --tr-tight: -0.025em;
  --tr-widest: 0.1em;
  --lh-apertado: 1.25;
  --lh-solto: 1.625;
  /* O `textDim` do MVP é #4B5563, um pouco mais escuro que o `--dim-ink` da
     plataforma. Em prosa longa a diferença aparece: o texto do relatório fica
     mais firme, e é o que faz um dossiê de nove mil pixels não cansar.
     ⚠️ ESTE TOKEN ESTAVA QUEBRADO, e este é o pior dos dois: ele referenciava
     a si mesmo, o ciclo resolvia para inválido, e `color` inválido vira
     `unset`, que HERDA. Ou seja, as 38 declarações de `color: var(--prosa)`
     não pintavam nada: o corpo do relatório, que é o produto que o cliente
     paga de R$ 500 a R$ 2.997 para ler, saía na cor herdada do pai. O tom
     descrito neste comentário nunca foi aplicado uma vez sequer. */
  --prosa: #4b5563;
}

/* A escala aplicada ao render. Antes, cada bloco escolhia seu tamanho e o
   resultado eram treze tamanhos diferentes num documento só. */
.dossie .secao > h2 { font-size: var(--f-secao); line-height: var(--lh-apertado); letter-spacing: var(--tr-tight); }
.dossie .secao > .desc { font-size: var(--f-corpo); line-height: 1.45; }
:where(.dossie) p { color: var(--prosa); }
.dossie .item h3 { font-size: var(--f-leitura); line-height: var(--lh-apertado); }
.dossie .passos { font-size: var(--f-corpo); line-height: var(--lh-solto); color: var(--prosa); }
.dossie .campo-l { font-size: var(--f-micro); letter-spacing: var(--tr-widest); }
.dossie table { font-size: var(--f-corpo); }
.dossie .soco .t { font-size: var(--f-secao); line-height: 1.35; }

/* ── Ícones ──────────────────────────────────────────────────────────────
 * Inline, com `currentColor`: herdam a cor de quem os contém, então a família
 * do relatório se aplica sozinha. Sem CDN e sem runtime, que é o que o MVP
 * carrega do unpkg e redesenha a cada troca de aba. */
.ic { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.aba-btn .ic { opacity: 0.85; }
.aba-btn.on .ic { opacity: 1; }
.lm-ic .ic { display: block; }

/* O ícone da aba ativa ganha um traço que se desenha. `stroke-dasharray` num
   traçado fechado desenha o contorno em vez de acendê-lo de uma vez, e é o
   que faz a troca de aba parecer resposta em vez de troca de estado. */
@keyframes desenha-traco { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.aba-btn.on .ic { stroke-dasharray: 60; animation: desenha-traco 0.5s var(--curva) forwards; }
@media (prefers-reduced-motion: reduce) {
  .aba-btn.on .ic { animation: none; stroke-dasharray: none; }
}
html.modo-papel .aba-btn .ic { animation: none; stroke-dasharray: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * COMPONENTES DO RENDER — os que faltavam
 *
 * Do `includes/render-shared.css`, que é a folha que o `render_raiox.php` e o
 * `render_plan.php` compartilham. Sem estes três, todo bloco do relatório caía
 * no mesmo cartão genérico: título, parágrafo, lista. É a razão de a
 * plataforma parecer "sem amor nos detalhes" ao lado do MVP.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Havia aqui um brilho azul de 4% no topo da página, "que não se vê, se
   sente". O Salto 2 tirou: o chão já é `--bg`, um degrau abaixo do branco, e
   a grade de pontos do conteúdo faz o trabalho de não parecer papel de
   impressora. Um degradê que ninguém vê é um degradê a menos. */
html.modo-papel body { background-image: none; }

/* ── Cartão de métrica ───────────────────────────────────────────────────
 * Rótulo pequeno em cima, valor grande embaixo. É o átomo do relatório do
 * MVP: onde há um número ou um veredito curto, é isto. */
.metrica {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5) 1.5rem;
}
.metrica-l {
  font-size: var(--f-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dim-ink); margin-bottom: var(--e2);
}
.metrica-v {
  font-family: var(--brand); font-size: var(--f-tela); font-weight: 600;
  color: var(--ink); line-height: 1.1;
}
.metrica-t { font-size: var(--f-corpo); font-weight: 500; color: var(--ink); margin-top: var(--e1); line-height: 1.5; }
.metricas-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4); }

/* ── Selo semântico ──────────────────────────────────────────────────────
 * Pílula em caixa alta. A cor CARREGA significado: verde confirma, âmbar
 * atenção, vermelho risco. Um selo cinza para tudo faria a matriz de riscos
 * ter três linhas visualmente idênticas. */
.selo-sem {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  font-size: var(--f-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface-hi); color: var(--dim-ink);
}
.selo-sem.ok    { background: var(--tom-ok-8); }
.selo-sem.warn  { background: var(--tom-warn-12); color: var(--warn-ink); }
.selo-sem.risco { background: var(--tom-danger-8);   color: var(--danger); }
.selo-sem.fam   { background: var(--fam-soft); color: var(--ink); }

/* ── Quick Wins ──────────────────────────────────────────────────────────
 * Bloco verde inteiro, e não um cartão comum: o verde é o que diz "isto aqui
 * é diferente do resto, dá para fazer esta semana". Cada item é um cartão
 * BRANCO dentro do verde, com número em círculo, e a ação em verde com seta.
 * A hierarquia de três níveis (o quê, por quê, primeiro passo) é o que
 * transforma sugestão em tarefa. */
/* QUICK WINS (06.09.2026): o cabeçalho era um círculo verde, uma frase de 12px
   e um contador. Agora o número é o protagonista, o título tem apoio, e a
   prévia diz QUAIS são as ações antes de abrir. O verde fica no fio da
   esquerda e no número, não no fundo inteiro. */
.quickwins {
  border: 1px solid var(--tom-ok-18); border-left: 4px solid var(--ok);
  background: var(--surface);
  border-radius: var(--r-md); padding: var(--e4) var(--e5); margin-bottom: var(--e4);
}
.qw-num {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--tom-ok-8); color: var(--ok-ink);
  font-family: var(--brand); font-size: var(--f-secao); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.qw-l { display: flex; flex-direction: column; gap: var(--e0); min-width: 0; }
.qw-l b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.qw-l i { font-style: normal; font-size: var(--f-apoio); color: var(--dim-ink); }
.qw-abrir {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--tom-ok-18); background: var(--surface);
  font-family: var(--mono); font-size: var(--f-micro); color: var(--ok-ink);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.qw-abrir .ic { display: inline-flex; transform: rotate(90deg); transition: transform var(--t-medio) var(--curva); }
.qw-sanfona[open] > summary .qw-abrir .ic { transform: rotate(-90deg); }
.qw-lista { display: flex; flex-direction: column; }
.qw-item {
  display: flex; align-items: flex-start; gap: var(--e3);                  border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--tom-ok-12);
  transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.qw-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--tom-ok-8); }
.qw-n {
  width: 24px; min-width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--tom-ok-8); color: var(--ok-forte);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--f-micro); font-weight: 600;
}
.qw-t { font-weight: 600; font-size: var(--f-corpo); margin-bottom: var(--e1); }
.qw-p { font-size: var(--f-micro); color: var(--prosa); line-height: var(--lh-solto); margin-bottom: var(--e2); }
.qw-passo {
  display: flex; align-items: flex-start; gap: var(--e2);
  font-size: var(--f-micro); font-weight: 600; color: var(--ok-forte); line-height: 1.5;
}
.qw-passo .ic { margin-top: var(--e0); }

/* ── Cenários de correção ────────────────────────────────────────────────
 * Um cartão com um segmentado no canto. Os três cenários são ALTERNATIVAS
 * sobre o mesmo negócio, e empilhá-los faria parecer que são três coisas a
 * fazer. Lado a lado, num seletor, a pessoa entende que está comparando. */
.cen-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5);
}
.cen-topo h3 { font-size: var(--f-leitura); font-weight: 600; }
.cen-painel { display: none; }
.cen-painel.on { display: block; animation: entra-subindo 0.28s var(--curva) backwards; }
/* O `margin-top` daqui era letra morta: `.secao p` (0,1,1) vencia `.cen-nota`
   (0,1,0) e zerava a margem, então a nota encostava nos cartões de cima.
   O caminho tem de empatar para a regra valer (20.09.2026, achado do dono). */
.secao .cen-nota, .cen-nota { font-size: var(--f-corpo); color: var(--prosa); line-height: var(--lh-solto); margin-top: var(--e5); }
html.modo-papel .cen-painel { display: block !important; animation: none; }
html.modo-papel .cen-painel::before {
  content: attr(data-nome); display: block; margin: var(--e5) 0 var(--e2);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim-ink);
}
html.modo-papel .segmentado { display: none; }

/* ── Matriz de riscos ────────────────────────────────────────────────────
 * Duas colunas: o risco e a mitigação à esquerda, os dois selos à direita. A
 * separação importa porque impacto e probabilidade são a MEDIDA do risco, e
 * misturá-los ao texto faz a pessoa ler três parágrafos para descobrir qual
 * dos riscos é o grave. */
.risco-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5) 1.5rem; margin-bottom: var(--e3);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.risco-card:hover { border-color: var(--tom-danger-18); box-shadow: var(--shadow-hover); }
.risco-linha { display: grid; grid-template-columns: 1fr auto; gap: var(--e5); align-items: start; }
.risco-t {
  display: flex; align-items: flex-start; gap: var(--e2);
  font-size: var(--f-leitura); font-weight: 600; margin-bottom: var(--e3);
}
.risco-t .ic { color: var(--danger); margin-top: var(--e1); }
.risco-medidas { display: flex; flex-direction: column; gap: var(--e3); flex-shrink: 0; }
.risco-medidas .metrica-l { margin-bottom: var(--e1); }

/* ── Ação tática numerada ────────────────────────────────────────────────
 * O número em pílula na cor da família, o quê em negrito, e os campos de
 * apoio em rótulo pequeno. É o mesmo esqueleto do quick win, num tom que diz
 * "isto leva mais que uma semana". */
.acao-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5) 1.5rem; margin-bottom: var(--e3);
  transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.acao-card:hover {
  border-color: color-mix(in srgb, var(--fam) 25%, transparent);
  box-shadow: var(--shadow-hover); transform: translateY(-2px);
}
/* ═══ O CARTÃO DE AÇÃO VIROU SANFONA (20.09.2026, pedido do dono) ═════════
 * Medido: as três ações somavam 1.654px abertas. A primeira nasce aberta —
 * esconder todas faria a seção parecer vazia; abrir todas é o que estava
 * errado. `cursor: pointer` e a seta dizem que ali se clica; sem isso um
 * cartão que some ao clique parece defeito. */
.acao-topo {
  display: flex; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e3);
  cursor: pointer; list-style: none;
  /* 44px e a regra da casa para alvo de toque. Medido no telefone, o resumo
     de uma linha dava 43 — um pixel, e a regra e a regra. */
  min-height: 44px;
}
.acao-topo::-webkit-details-marker { display: none; }
.acao-topo:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--r-xs); }
/* Fechada, a margem do resumo separaria de nada. */
.acao-card:not([open]) > .acao-topo { margin-bottom: 0; }
.acao-seta {
  flex-shrink: 0; margin-left: auto; align-self: center; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; color: var(--faint-ink);
  border: 1px solid var(--border); background: var(--surface);
  transition: transform var(--t-medio) var(--curva), color var(--t-rapido) var(--curva);
}
.acao-card[open] > .acao-topo .acao-seta { transform: rotate(180deg); }
.acao-topo:hover .acao-seta { color: var(--ink); }
/* A sanfona aberta não levanta no hover: cartão alto subindo 2px sacode a
   página inteira embaixo dele. */
.acao-card[open]:hover { transform: none; }
.acao-corpo > p:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .acao-seta { transition: none; } }
html.modo-papel .acao-topo { cursor: default; }
html.modo-papel .acao-seta { display: none; }
.acao-n {
  width: 26px; min-width: 26px; height: 26px; border-radius: var(--r-xs); flex-shrink: 0;
  background: var(--fam-soft); color: var(--dim-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
}
.acao-t { font-size: var(--f-leitura); font-weight: 600; line-height: var(--lh-apertado); }
/* Flex e não grade: com a frase na linha inteira, a grade de colunas iguais
   deixava um terço vazio à direita dos dois fatos curtos. Aqui eles dividem a
   linha de baixo ao meio, e descem um embaixo do outro abaixo de 180px. */
.acao-campos { display: flex; flex-wrap: wrap; }
.acao-campos > * { flex: 1 1 180px; min-width: 0; }
/* O teto de leitura fica no TEXTO e não na caixa: na caixa, o flex usaria a
   largura já limitada para quebrar a linha, e o investimento subiria para o
   lado da frase em tela larga. */
.acao-campos > .acao-campo-frase { flex-basis: 100%; }
.acao-campo-frase .metrica-t { max-width: 68ch; }

@container tela (max-width: 640px) {
  .risco-linha { grid-template-columns: 1fr; gap: var(--e4); }
  .risco-medidas { flex-direction: row; gap: var(--e5); }
  .metricas-2 { grid-template-columns: 1fr; }
  .quickwins { padding: var(--e5) 1rem; }
  .cen-topo { align-items: flex-start; }
  .segmentado { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmentado::-webkit-scrollbar { display: none; }
  .segmentado button { white-space: nowrap; min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ESTRUTURA DO RAIO-X — hero aberto, rótulo fora do cartão
 *
 * Correção estrutural: o hero do `render_raiox.php` é ABERTO, sem moldura, e o
 * rótulo da seção ("01. RESUMO EXECUTIVO") vive FORA do cartão, em mono. Eu
 * tinha posto os dois dentro de cartões, e isso mudava a leitura: o rótulo fora
 * funciona como sumário, e correndo o olho pela página a pessoa lê a sequência
 * dos assuntos sem atravessar os cartões.
 *
 * TAMANHOS. Corrigidos para os do MVP: a prosa é 15px e não 16, o texto de
 * apoio é 14, e os rótulos são 11. Estava tudo um degrau acima, o que fazia o
 * documento inteiro parecer ampliado.
 * ═══════════════════════════════════════════════════════════════════════════ */

.hero { margin-bottom: var(--e5); }
.hero h1 {
  font-family: var(--brand); font-weight: 600;
  font-size: clamp(var(--f-heroi), 5vw, 48px); line-height: 1.05; letter-spacing: var(--tr-tight);
  margin: var(--e3) 0 0; overflow-wrap: anywhere;
}
.hero-site {
  font-family: var(--brand); font-weight: 600; font-size: clamp(18px, 2.4vw, 27px);
  color: var(--dim-ink); margin-top: var(--e0); overflow-wrap: anywhere;
}
/* `.dossie .hero-sub` e não `.hero-sub`: a regra de prosa (`.dossie p`) tem
   especificidade maior e achatava a linha de abertura para 15px. */
/* 78ch, e não 62: o subtítulo do Radar tem 75 caracteres e cabe numa linha só;
   com 62ch ele quebrava em duas, e a segunda linha ficava com quatro palavras
   perdidas num cartão de 1217px. A capa do Radar não tem a coluna do anel para
   ocupar a direita, então ali a sobra aparece inteira (print do dono). */
.dossie .hero-sub { font-size: var(--f-leitura); line-height: var(--lh-solto); color: var(--prosa); margin: var(--e3) 0 0; max-width: 78ch; }
.hero-meta { display: flex;            flex-wrap: wrap; }
.hero-m { display: inline-flex; align-items: flex-start; gap: var(--e2); font-size: var(--f-corpo); color: var(--prosa); }
.hero-m .ic { margin-top: var(--e0); color: var(--faint-ink); }
.hero-div {
  height: 1px;                   border-radius: 0;
  background: var(--border);
}

/* O rótulo de seção, fora do cartão. */
.dossie .secao { position: static; }

/* Tamanhos corrigidos: estava tudo um degrau acima do MVP. */
:where(.dossie) p { font-size: var(--f-corpo); line-height: var(--lh-solto); }
.dossie .secao > .desc,
.dossie .passos,
.dossie .metrica-t,
.conc-cols p,
.risco-card p { font-size: var(--f-corpo); }
.dossie .item h3, .acao-t, .pm-topo h3, .fc-topo h3 { font-size: var(--f-leitura); }
.metrica-l, .qw-l, .dc-l { font-size: var(--f-micro); }

/* ── Cartão de destaque (problema principal, ação imediata) ──────────────── */
.destaque-card {
  display: flex; align-items: flex-start; gap: var(--e4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--e5) var(--e5); margin-bottom: var(--e4);
  background: var(--surface);
}
.destaque-card.t-risco { background: var(--tom-danger-4); border-color: var(--tom-danger-18); }
.destaque-card.t-fam   { background: var(--fam-soft); border-color: color-mix(in srgb, var(--fam) 20%, transparent); }
.destaque-card.t-warn  { background: var(--tom-warn-4); border-color: var(--tom-warn-25); }
.dc-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--dim-ink);
  border: 1px solid var(--border);
}
.t-risco .dc-ic { color: var(--danger); }
.t-warn .dc-ic { color: var(--warn-ink); }
.dc-l {
  font-family: var(--body); font-weight: 600; color: var(--dim-ink); margin-bottom: var(--e2);
}
.t-risco .dc-l { color: var(--danger-ink); }
.t-warn .dc-l { color: var(--warn-ink); }
.dc-t { font-size: var(--f-leitura); font-weight: 600; line-height: 1.5; }


/* ─────────────────────────────────────────────────────────────────────────
 * NÃO EXISTE ITÁLICO NESTE PRODUTO, e não é escolha de gosto.
 *
 * A Onest não tem face itálica: no Google Fonts o eixo `ital` nem responde
 * para esta família, e as 45 faces que a plataforma carrega são todas
 * `normal`. A JetBrains Mono, aqui, também só vem em `normal` 400 e 700.
 *
 * Quando o CSS pede `font-style: italic` sem que exista a face, o navegador
 * NÃO desiste: ele fabrica um oblíquo inclinando mecanicamente a letra reta.
 * O resultado engorda as diagonais, quebra as junções das curvas e é
 * exatamente o "está estranho" que se vê na tela sem saber nomear.
 *
 * Havia oito lugares assim. Cada um trocou o itálico pelo recurso que uma
 * família só-romana tem de verdade: a régua à esquerda e o peso 500 nas
 * citações, e a cor apagada nos textos secundários, que já estava lá.
 *
 * A guarda em `verifica-estilo.mjs` derruba a entrega se `font-style: italic`
 * voltar.
 * ───────────────────────────────────────────────────────────────────────── */
/* ── A LARGURA DAS COLUNAS DA BIBLIOTECA ─────────────────────────────────
 * Sem isto o navegador reparte a tabela pelo conteúdo, e o nome, que é a
 * coluna que a pessoa lê para escolher, ficava mais estreito que a coluna
 * "Quando": "Reativação de Clientes" quebrava em duas linhas enquanto "há 13
 * min" tinha folga. A ordem aqui é a ordem da leitura: o nome fica com o que
 * sobra, e as três colunas de apoio pedem só o que precisam. */
.tabela-wrap table { table-layout: auto; width: 100%; }
/* `width: 100%` na PRIMEIRA coluna, e não `width: 1%` nas outras três.
   Tentei o contrário primeiro e medi o resultado: com `1%` nas colunas de
   apoio o navegador continuou repartindo a sobra entre todas, e o nome ficou
   com 138px enquanto o botão "Abrir" levava 212. Mandar a coluna do nome
   absorver tudo o que sobra é a instrução que o algoritmo automático de
   tabela realmente obedece; as outras então encolhem até o conteúdo. */
.tabela-wrap th:first-child, .tabela-wrap td:first-child { width: 100%; }
.tabela-wrap th:nth-child(2), .tabela-wrap td:nth-child(2),
.tabela-wrap th:nth-child(3), .tabela-wrap td:nth-child(3),
.tabela-wrap th:last-child,   .tabela-wrap td:last-child { white-space: nowrap; }

/* ── A BIBLIOTECA COMO ÁRVORE ─────────────────────────────────────────────
 * Uma linha por raiz; os derivados recolhidos dentro dela.
 *
 * ── UM CARTÃO SÓ, E UM FIO ────────────────────────────────────────────────
 *
 * A primeira versão dava a cada ramo o tratamento de cartão: borda, fundo e
 * raio. Com Raio-X → Plano → Toolbox isso vira caixa dentro de caixa dentro
 * de caixa, três bordas empilhadas e três fundos quase iguais, e a tela passa
 * a ser sobre as caixas em vez de sobre o acervo. O cartão agora é UM: o
 * painel da empresa. Dentro dele a profundidade é dita por um fio de 1px e
 * pelo recuo, que é o quanto uma árvore precisa.
 *
 * A cor de família aparece só no fundo do ícone, a 7%.
 * ─────────────────────────────────────────────────────────────────────── */
/* A ÁRVORE MEDE A SI MESMA. A regra que empilha a linha media o contêiner
   `tela`, que é a área de conteúdo inteira; só que na Biblioteca a coluna de
   empresas come 300px dessa área, e a linha fica com 470 enquanto a medida
   dizia 1050. Resultado: a linha nunca empilhava onde precisava, e o botão
   "Abrir" saía do cartão. Medir a própria árvore vale nos dois lugares onde
   ela aparece, a Biblioteca e a página da empresa. */
.arvore { display: flex; flex-direction: column; container-type: inline-size; container-name: arvore; }

.arv-linha {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-xs);
  transition: background var(--t-rapido) var(--curva);
}
.arv-linha:hover { background: var(--surface-hi); }

/* ── A LINHA VIRA CARTÃO NO CELULAR ───────────────────────────────────────
 *
 * Medido a 375 px: o nome "Raio-X" tinha largura ZERO e o botão "Abrir"
 * terminava em 396 px, fora da tela. A linha é uma faixa com ícone, nome,
 * atalhos e botão, e como atalhos e botão não encolhem, quem encolhe é sempre
 * o nome — até sumir. Quanto mais derivados o relatório tem, mais atalhos, e
 * mais o nome some: o relatório MAIS IMPORTANTE fica o mais anônimo, porque é
 * dele que os outros nascem.
 *
 * Forçar largura mínima no nome só empurraria o botão para fora de vez. Em
 * 375 px não cabem quatro coisas numa linha, e o problema é quantidade, não
 * distribuição. Empilhado, cada parte tem a largura inteira e nada compete.
 *
 * Salto 2, parada 4: a medida passou a ser do CONTÊINER, e o corte subiu para
 * 760px. Medido a 691px de conteúdo (janela de 800 com a barra lateral): a
 * linha tem ícone, nome, status, três atalhos, selo de derivados e botão, e o
 * nome "Empresa C — Crescimento" virava "Empresa C — Cres…". Abaixo de 760 ela
 * empilha: status e atalhos numa faixa, botão na outra.
 */
/* MEDIDO DE NOVO EM 15.09.2026, com a Empresa A: em modo faixa, "Plano Tático"
   cortava em "Plano Táti…" de 860px até 720px de árvore, porque é a linha com
   Mentor, Manual, Conselho e o selo de derivados. O corte estava em 700, e o
   comentário acima dizia 760: nenhum dos dois cobria. Passou para 880, com
   folga sobre o último corte medido. */
@container arvore (max-width: 880px) {
  .arv-linha {
    display: grid;
    grid-template-columns: 32px auto 1fr auto auto;
    /* SEIS COISAS NÃO CABEM NUMA FAIXA. Com o nome ao lado do desenho, três
       atalhos mais o selo, o organizar e o "Abrir" espremiam a área dos
       atalhos até ela quebrar em duas fileiras desalinhadas — medido no
       tablet, na linha do Plano Tático, que é a que tem os três.
       Duas faixas: o que o relatório É em cima, o que ele TEM embaixo. A
       ordem visual é a mesma do documento, então o foco do teclado segue o
       olho. */
    grid-template-areas: 'ic txt txt txt txt' 'st st st der der' 'ats ats ats ats abrir';
    row-gap: var(--e1); align-items: center;
  }
  .arv-ic { grid-area: ic; }
  .arv-txt { grid-area: txt; }
  .arv-status { grid-area: st; }
  /* Os atalhos começam na esquerda, como o "Organizar" da faixa de cima: as
     duas faixas passam a ter a mesma origem, e o "Abrir" fecha à direita. */
  .arv-ats { grid-area: ats; flex-wrap: wrap; justify-content: flex-start; }
  /* O selo "N derivados" tem faixa própria: dividia a área do botão e sumia
     embaixo dele. */
  .arv-linha .arv-abrir { grid-area: der; }
  /* O nome pode usar duas linhas antes de cortar: aqui há altura de sobra e
     falta largura, que é o contrário do desktop. */
  /* `.arv-linha` na frente é o que faz esta regra valer: `.arv-nome .art-nome`
     com `nowrap` vem 33 linhas DEPOIS, com a mesma especificidade, e ganhava
     pela ordem. Medido em 15.09.2026: empilhado, a 327px, "Proposta Comercial"
     ainda saía "Proposta Com…" num cartão com altura de sobra. */
  .arv-linha .arv-nome .art-nome { white-space: normal; overflow: visible; }
  /* O botão vai para a direita da última faixa; só no celular ele ocupa a
     largura toda, com os 44px de toque. */
  /* Sem `min-height`: o `.btn.pq` já mede 36. Era esta linha que fazia a
     Biblioteca ter um botão de 36 enquanto o resto do produto tinha 33. */
  .arv-linha > .btn { grid-area: abrir; justify-self: end; }
  @container arvore (max-width: 440px) {
    /* No telefone o botão "Abrir" desce para uma faixa só dele, com os 44px
       de toque, e os atalhos ficam com a largura inteira. */
    .arv-linha { grid-template-areas: 'ic txt txt txt txt' 'st st st der der' 'ats ats ats ats ats' 'abrir abrir abrir abrir abrir'; }
    .arv-linha > .btn { justify-self: stretch; width: 100%; justify-content: center; min-height: 44px; }
  }
  /* Sem atalho nenhum, a faixa vazia deixaria um buraco entre nome e botão. */
  .arv-ats:empty { display: none; }
}

.arv-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-xs);
  background: var(--fam-soft, var(--surface-hi)); color: var(--fam-icone, var(--dim-ink));
}
/* O NOME TEM CHÃO MÍNIMO, e quem cede é o atalho.
   Medido a 1280px de janela com a coluna de empresas aberta: a linha tem 515px
   de largura real, mas a medida do contêiner é a TELA, que tem 1050, então a
   regra que empilha não dispara. Com `min-width: 0` o nome era o único item
   que encolhia, e chegava a ZERO: "Raio-X" desaparecia enquanto três atalhos
   continuavam inteiros. Quem nomeia o relatório é o nome, não o atalho. */
.arv-txt { flex: 1; min-width: 132px; display: flex; flex-direction: column; gap: var(--e0); }
/* O NOME E O LÁPIS DIVIDEM UMA LINHA.
   Como itens da coluna, o lápis abria uma faixa de 48px entre o nome e a data
   mesmo estando invisível: ele só aparece no hover, mas ocupava espaço o tempo
   todo. Medido: vão declarado 2px, vão real 48px. */
.arv-nome { display: flex; align-items: center; gap: var(--e1); min-width: 0; }
.arv-nome .art-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Na árvore não existe `<tr>`, então a regra de hover original nunca casava e
   o lápis era invisível para sempre. */
.arv-linha:hover .art-renomear { opacity: 1; }
.arv-txt b { font-weight: 600; font-size: var(--f-corpo); }
.arv-txt i {
  font-style: normal; font-family: var(--mono); font-size: var(--f-micro);
  color: var(--faint-ink); letter-spacing: 0.02em;
}

/* ── OS ATALHOS DA LINHA ──────────────────────────────────────────────── */
/* Os atalhos quebram em duas fileiras antes de espremer o nome. É degradação
   por largura real, e não por ponto de corte, que aqui mede o contêiner errado.
   O ALINHAMENTO NÃO MORA AQUI: esta regra vem depois dos blocos `@container`
   no arquivo, então um `justify-content` neste ponto anulava o que eles dizem,
   e os atalhos ficavam à direita no celular enquanto todo o resto da linha
   estava à esquerda. Quem alinha são os blocos de contêiner. */
.arv-ats { display: inline-flex; gap: var(--e2); flex-wrap: wrap; }
/* O ATALHO CARREGA O NOME, e por isso não é mais um quadrado de 30px: ele
   cresce com a palavra. Ver a nota em `arvoreArtefatos`.

   O ESTADO SE LÊ NO TRAÇO, não na cor. Existe: contorno inteiro e tinta firme.
   Ainda não existe: contorno pontilhado e tinta fraca, que é como se desenha
   um lugar reservado em qualquer papel. Cor aqui viraria semáforo onde não há
   alerta nenhum, e os dois estados são igualmente normais. */
.arv-at {
  min-width: 30px; height: 28px; padding: 0 var(--e3); border-radius: var(--r-pill); flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: 1px dashed var(--border-strong, var(--border)); color: var(--faint-ink);
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.arv-at i { font-style: normal; font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.arv-at svg { opacity: 0.75; }
.arv-at:hover { background: var(--surface-hi); border-color: var(--faint-ink); color: var(--ink); }
.arv-at:hover svg { opacity: 1; }
.arv-at:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Feito e por fazer se distinguem pelo traço e pelo PESO da tinta, não por
   cor: são dois estados do mesmo atalho, e cor aqui viraria semáforo. */
.arv-at.feito { color: var(--ink); background: var(--surface); border-style: solid; border-color: var(--border); }
.arv-at.feito svg { opacity: 1; color: var(--dim-ink); }
.arv-at.feito:hover { border-color: var(--faint-ink); }

/* O CONVITE é o mesmo botão de 30px dos outros atalhos, CHEIO: fundo do acento
   e desenho branco. Ele é o único da linha que não abre nem gera um
   complemento — ele abre o PRÓXIMO PASSO da jornada, e essa diferença precisa
   ser vista antes de lida.
   A animação toca três vezes e para: chamar atenção é o trabalho dela, e
   pulsar para sempre seria o movimento ocioso que o sistema proíbe. */
.arv-at.convite {
  background: var(--impacto-fundo); border-style: solid; border-color: transparent; color: #fff;
  animation: convite-chama 1.6s var(--curva) 3;
}
.arv-at.convite svg { opacity: 1; }
.arv-at.convite:hover { filter: brightness(1.18); color: #fff; }
@keyframes convite-chama {
  0%, 100% { box-shadow: 0 0 0 0 var(--tom-primario-4); }
  50% { box-shadow: 0 0 0 4px var(--tom-primario-18); }
}
@media (prefers-reduced-motion: reduce) { .arv-at.convite { animation: none; } }

/* O CONTROLE DE ABRIR. Ele tem borda porque precisa parecer clicável: eram
   dois textos soltos no fim da linha, e nada dizia que ali se clicava. A seta
   aponta para BAIXO fechado (é para onde o conteúdo vai aparecer) e para cima
   aberto. */
.arv-abrir {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
summary:hover .arv-abrir { background: var(--surface-hi); border-color: var(--border-forte, var(--line-2, var(--border))); color: var(--ink); }
.arv-abrir .ic { display: inline-flex; transform: rotate(90deg); transition: transform var(--t-medio) var(--curva); }
details[open] > summary .arv-abrir .ic { transform: rotate(-90deg); }

/* O ramo não é cartão: é um `<details>` e nada mais. O `summary` É a linha,
   para o clique em qualquer ponto dela abrir e fechar. */
.arv-ramo > summary { list-style: none; cursor: pointer; }
.arv-ramo > summary::-webkit-details-marker { display: none; }
.arv-ramo > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-xs); }

/* As raízes se separam por um fio, como itens de uma lista. */
.arvore > * + * { border-top: 1px solid var(--border); }

/* O fio da linhagem: um só, na cor da borda, com o recuo alinhado ao centro
   do ícone do pai (16px de meio ícone + 12px do respiro da linha). */
/* O FIO ENTRE O PAI E O QUE NASCEU DELE.
   Aberto, o ramo põe o Plano logo abaixo do Raio-X e as duas linhas
   encostavam sem nada entre elas: liam-se como dois irmãos numa lista, e não
   como um pai e o filho dele. O fio fecha a linha do pai e vale a largura
   inteira do cartão; a barra vertical à esquerda dos filhos continua dizendo
   de quem eles são. Fechado, não há o que separar, e o fio não aparece. */
.arv-ramo[open] > summary { border-bottom: 1px solid var(--border); }

.arv-filhos {
  margin: var(--e2) 0 var(--e2) 28px;
  padding-left: var(--e4);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.arv-filhos > * + * { border-top: 1px solid var(--border); }
.arv-filhos .arv-ic { width: 28px; height: 28px; }
.arv-filhos .arv-filhos { margin-left: 24px; }

/* ── AS RODADAS DO TOOLBOX, EM ABAS ───────────────────────────────────── */
.arv-abas { display: flex; gap: var(--e1); padding: var(--e3) 0 var(--e2); flex-wrap: wrap; }
.arv-abas button {
  font: inherit; cursor: pointer;
  font-family: var(--mono); font-size: var(--f-micro);
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); border-radius: var(--r-pill);
  background: transparent; border: 1px solid transparent; color: var(--dim-ink);
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.arv-abas button:hover { background: var(--surface-hi); }
.arv-abas button.on { background: var(--surface-hi); border-color: var(--border); color: var(--ink); }
.arv-abas button span { color: var(--faint-ink); }
.arv-abas button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.arv-rodada { display: none; }
.arv-rodada.on { display: block; }

.arv-grupo { padding: var(--e2) 0 var(--e3); }
.arv-grupo + .arv-grupo { border-top: 1px solid var(--border); }
.arv-grupo-r {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: var(--tr-widest);
  text-transform: uppercase; color: var(--dim-ink); padding: var(--e2) var(--e3);
}
.arv-grupo-r span { color: var(--faint-ink); }
/* Dentro de um grupo as linhas não levam fio: o rótulo do grupo já as separa. */
.arv-grupo > .arv-linha + .arv-linha { border-top: 0; }

@container tela (max-width: 560px) {
  .arv-filhos { margin-left: var(--e3); padding-left: var(--e3); }
  .arv-filhos .arv-filhos { margin-left: var(--e2); }
  .arv-n { display: none; }
}

/* ── Termômetro com trilha ───────────────────────────────────────────────
 * A trilha é o que faltava: sem ela o termômetro é um parágrafo dizendo "você
 * está na correria" e a pessoa não tem régua. Com ela, vê onde está e, o que
 * importa mais, que existe para onde ir. */
.termometro-card {
  border: 1px solid var(--tom-warn-25); background: var(--tom-warn-4);
  border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e4);
}
.termometro-card.t-ok  { border-color: var(--tom-ok-25); background: var(--tom-ok-4); }
.termometro-card.t-fam { border-color: color-mix(in srgb, var(--fam) 20%, transparent); background: var(--fam-soft); }
.tc-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.tc-diag { font-size: var(--f-corpo); line-height: var(--lh-solto); margin-bottom: var(--e4); }
.trilha { margin: var(--e4) 0; }
.tr-barra { height: 6px; background: var(--surface-hi); border-radius: var(--r-pill); overflow: hidden; }
.tr-barra i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--warn); transition: width 0.6s var(--curva); }
.t-ok .tr-barra i { background: var(--ok); }
.t-fam .tr-barra i { background: var(--fam); }
.tr-paradas { display: flex; justify-content: space-between; margin-top: var(--e2); }
.tr-paradas span {
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.tr-paradas span.on { color: var(--warn-ink); font-weight: 600; }
.t-ok .tr-paradas span.on { color: var(--ok-ink); }
.term-c { font-size: var(--f-corpo); line-height: var(--lh-solto); margin-top: var(--e2); }
.term-c b { color: var(--warn-ink); }
.t-ok .term-c b { color: var(--ok-ink); }

/* ── Cartão do score ─────────────────────────────────────────────────────── */
.score-card {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--e5) var(--e5); margin-bottom: var(--e4);
  box-shadow: var(--shadow-card);
}
.score-veredito { font-family: var(--brand); font-size: var(--f-heroi); font-weight: 600; line-height: 1.1; }
.score-recado { font-size: var(--f-corpo); color: var(--prosa); line-height: var(--lh-solto); margin-top: var(--e2); max-width: 46ch; }
.score-card .rotulo-secao { margin: 0 0 var(--e2) !important; }

/* ── Números com sub-rótulo ──────────────────────────────────────────────── */
.fn-item .fn-s { font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e0); }
.metrica-s { font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e1); }
.metrica.t-risco { border-left: 3px solid var(--danger); }
.metrica.t-risco .metrica-v { color: var(--danger-ink); }
.metrica.t-warn { border-left: 3px solid var(--warn); }
.metrica.t-ok { border-left: 3px solid var(--ok); }

/* ── Concorrente ─────────────────────────────────────────────────────────── */
.conc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e3);
  transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.conc-card:hover { border-color: color-mix(in srgb, var(--fam) 22%, transparent); box-shadow: var(--shadow-hover); }
.conc-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.conc-nome { display: flex; align-items: center; gap: var(--e2); font-size: var(--f-leitura); font-weight: 600; flex: 1; min-width: 0; }
.conc-nome .ic { color: var(--ink); }
.conc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e5); }
.conc-cols p { margin: 0; }

/* ── Lista com marca circular ────────────────────────────────────────────── */
.lista-ic { list-style: none; padding: 0; margin: var(--e3) 0 0; display: flex; flex-direction: column; }
.lista-ic li { display: flex; align-items: flex-start; gap: var(--e3); font-size: var(--f-corpo); line-height: var(--lh-solto); color: var(--prosa); }
.li-ic {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: var(--e0);
  display: flex; align-items: center; justify-content: center;
  background: var(--fam-soft); color: var(--dim-ink);
}
.li-ic.ok   { background: var(--tom-ok-12); }
.li-ic.warn { background: var(--tom-warn-12); color: var(--warn-ink); }
.li-ic.fam  { background: var(--fam-soft); color: var(--ink); }

.pm-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e1); }
.pm-topo .ic { color: var(--ink); }
.pm-topo.warn .ic { color: var(--warn-ink); }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); }
.grade-2 > .secao { margin-bottom: 0; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }

/* ── Fase do roadmap ─────────────────────────────────────────────────────── */
.fase-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5) var(--e5); margin-bottom: var(--e3);
}
.fc-topo { display: flex; align-items: center; gap: var(--e3); }
.fc-topo h3 { flex: 1; min-width: 0; font-weight: 600; }
.fc-dias { font-weight: 600;
  text-transform: uppercase;
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: var(--fam-soft);
}
.fase-card.t-warn .fc-dias { background: var(--tom-warn-12); color: var(--warn-ink); }
.fase-card.t-warn .dc-ic { color: var(--warn-ink); }
.fase-card.t-ok .fc-dias { background: var(--tom-ok-12); color: var(--ok-ink); }
.fase-card.t-ok .dc-ic { color: var(--ok-ink); }

.vazio-nota { color: var(--faint-ink); font-size: var(--f-corpo); }

/* O cartão de leitura ganha o CTA no pé, como no MVP: o cartão termina dizendo
   qual é o próximo passo, e o botão É esse passo. */

@container tela (max-width: 640px) {
  .hero-meta { gap: var(--e3); }
  .score-card { gap: var(--e5); padding: var(--e5); }
  .conc-cols { gap: var(--e4); }
  .fc-topo { flex-wrap: wrap; }
  .tr-paradas span { font-size: var(--f-micro); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ESCALA DE ESPAÇAMENTO
 *
 * A AUDITORIA MEDIU O ESTRAGO. Os valores em uso no render eram, por
 * frequência: 11px (110×), 14px (110×), 10px (101×), 12px (80×), 7px (63×),
 * 8px (58×), 18px (40×), 16px (36×), 6px (36×), 22px (32×), 24px (30×), 13px
 * (26×), 20px (24×), 3px, 4px, 2px.
 *
 * Dezesseis valores distintos, com 7, 11 e 13 no meio. Nenhum deles é errado
 * sozinho; juntos, eles são a razão de a página parecer "quase alinhada" sem
 * nunca alinhar. O olho percebe ritmo, e ritmo exige que os intervalos sejam
 * múltiplos uns dos outros.
 *
 * A escala é de 4: 4, 8, 12, 16, 24, 32, 48. É a mesma do Tailwind, que é o
 * que o MVP usa, então a fidelidade vem de graça.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* UM PASSO SÓ. A escala inteira nasce de `--passo`: mudar o passo muda
     todos os espaços juntos, na mesma proporção — que é o que "escala" quer
     dizer. Os degraus são 0,5 · 1 · 2 · 3 · 4 · 6 · 8 · 12 passos. */
  --passo: 4px;
  /* Fio de cabelo. Nasceu porque havia 1px, 2px e 3px espalhados fazendo a
     mesma coisa: encostar duas coisas sem colar. Um degrau para os tres. */
  --e0: calc(var(--passo) * 0.5);
  --e1: var(--passo);
  --e2: calc(var(--passo) * 2);
  --e3: calc(var(--passo) * 3);
  --e4: calc(var(--passo) * 4);
  --e5: calc(var(--passo) * 6);
  --e6: calc(var(--passo) * 8);
  --e7: calc(var(--passo) * 12);
}

/* Blocos do render, todos no mesmo passo. */
.dossie .secao,
.dossie .destaque-card,
.dossie .termometro-card,
.dossie .score-card,
.dossie .quickwins { padding: var(--e5); margin-bottom: var(--e3); }

.dossie .conc-card,
.dossie .risco-card,
.dossie .acao-card,
.dossie .fase-card { padding: var(--e4) var(--e5); margin-bottom: var(--e3); }

.dossie .rotulo-secao { margin: var(--e6) 0 var(--e3); }
/* O primeiro rótulo do painel não precisa do respiro de cima: ele já vem
   depois da barra de abas. */
.aba-painel > .rotulo-secao:first-child { margin-top: var(--e2); }

.dossie .secao > .desc { margin: 0 0 var(--e4); }
:where(.dossie) p { margin: 0 0 var(--e3); }
:where(.dossie) p:last-child { margin-bottom: 0; }

.grade-2, .grade-3, .metricas-2, .faixa-num, .conc-cols { gap: var(--e3); }
.acao-campos { gap: var(--e4); }
.lista-ic { gap: var(--e3); margin-top: var(--e4); }
.qw-lista { gap: var(--e3); }
.qw-item { padding: var(--e4); }
.hero-meta { gap: var(--e5); margin-top: var(--e4); }
.hero-div { margin-top: var(--e5); }
/* A margem e do INVOLUCRO agora. Ela ficava na barra, e barra dentro de
   involucro sem padding deixa a margem escapar por colapso: funciona por
   acidente, e para de funcionar no dia em que o involucro ganhar uma borda. */
.abas-wrap { margin-bottom: var(--e5); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  AS FICHAS DO CABEÇALHO. Raio-X, Radar e Plano usam as mesmas.
 *
 *  Duas formas, e o motivo de cada uma está em `fichas.js`: `hf-v` para valor
 *  comprido escrito pelo cliente, `hf-n` para número curto medido pelo motor.
 *
 *  A COR fica só no ícone, com `--fam-soft` no fundo e `--fam-icone` no traço.
 *  Cada tela declara os próprios tokens de família, então a mesma regra pinta
 *  verde no Raio-X, azul no Plano e roxo no Radar sem saber onde está. Família
 *  em TEXTO é proibida pela regra de cor: ela derruba o contraste e faz o
 *  relatório parecer infográfico.
 * ═══════════════════════════════════════════════════════════════════════════ */
.hero-fichas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e2); margin-top: var(--e3);
}
/* QUATRO FICHAS SÃO QUATRO, DUAS E DUAS, OU UMA EMBAIXO DA OUTRA (02.10.2026,
   ronda de texto espremido). O `auto-fit` sozinho punha três numa linha e
   "Tempo de casa" sozinha na de baixo, com cada ficha em 230px e "Onde opera"
   cortada em reticências. Três e uma nunca é o desenho.

   A coluna mínima troca de valor pela largura da própria grade, sem consulta
   de container: com espaço para quatro de 210px, ela é um quarto da grade;
   sem, o multiplicador grande empurra o `clamp` para o teto, metade da grade,
   e ficam duas e duas. Abaixo de duas de 210px, o `max` segura em 210 e cai
   para uma coluna. O 1px a menos evita que o arredondamento perca a última. */
.hero-fichas:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(210px, clamp(
    (100% - 3 * var(--e2)) / 4 - 1px,
    (840px + 3 * var(--e2) - 100%) * 999,
    (100% - var(--e2)) / 2 - 1px
  ))), 1fr));
}
.hero-ficha {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.hf-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-xs);
  background: var(--fam-soft, var(--surface-hi)); color: var(--fam-icone, var(--dim-ink));
}
.hf-corpo { min-width: 0; }
.hf-r {
  display: block;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600;
  color: var(--dim-ink);
}
.hf-v {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: var(--e1);
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.5;
}
/* O número vem ANTES do rótulo, e por isso a margem é embaixo dele. */
.hf-n {
  display: block; margin-bottom: var(--e0);
  font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600;
  line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ── SANFONA ─────────────────────────────────────────────────────────────
 * `<details>` nativo. O cabeçalho continua com o peso de um convite mesmo
 * fechado; o que colapsa é o miolo. */
.sanfona {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: var(--e3); overflow: hidden;
  transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.sanfona.destaque { border-left: 3px solid var(--fam); }
.sanfona[open] { box-shadow: var(--shadow-card); }
.sanfona:hover { border-color: color-mix(in srgb, var(--fam) 25%, transparent); }

.sanfona > summary {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5); cursor: pointer;
  list-style: none; min-height: 44px;
}
.sanfona > summary::-webkit-details-marker { display: none; }
.sanfona > summary:focus-visible { outline: 2px solid var(--fam); outline-offset: -2px; }

.sf-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  background: var(--fam-soft); color: var(--ink);
}
.sf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e0); }
.sf-t { font-size: var(--f-leitura); font-weight: 600; display: flex; align-items: center; gap: var(--e2); }
.sf-r { font-size: var(--f-corpo); color: var(--prosa); line-height: 1.5; }
.sf-selo {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: var(--e1) var(--e2); border-radius: var(--r-pill);
  background: var(--fam-soft); color: var(--dim-ink);
}
/* A seta gira 90° ao abrir: é a única pista de que o bloco expande, e sem ela
   o cabeçalho parece um cartão comum que por acaso responde ao clique. */
.sf-seta { flex-shrink: 0; color: var(--faint-ink); transition: transform var(--t-medio) var(--curva); }
.sanfona[open] > summary .sf-seta { transform: rotate(90deg); }
.sf-corpo { padding: 0 var(--e5) var(--e5); }
.sf-corpo > .secao { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .sf-seta { transition: none; } }
/* No papel tudo abre: em PDF não existe clicar. */
html.modo-papel .sanfona > summary { cursor: default; }
html.modo-papel .sf-seta { display: none; }

/* ── "Como fazer" com passos numerados ───────────────────────────────────
 * Era uma `<ol>` com marcador do navegador, que é a coisa mais crua que uma
 * lista pode ser. Agora cada passo tem um número em pílula e o texto alinhado,
 * o que transforma "uma lista" numa sequência de execução. */
.passos-num { list-style: none; padding: 0; margin: var(--e3) 0 0; counter-reset: passo; }
.passos-num li {
  counter-increment: passo;
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) 0; border-top: 1px solid var(--border);
  font-size: var(--f-corpo); line-height: var(--lh-solto); color: var(--prosa);
}
.passos-num li:first-child { border-top: 0; padding-top: 0; }
.passos-num li::before {
  content: counter(passo, decimal-leading-zero);
  flex-shrink: 0; min-width: 26px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  color: var(--dim-ink); background: var(--fam-soft); border-radius: var(--r-xs);
}

@container tela (max-width: 640px) {
  .dossie .secao,
  .dossie .destaque-card,
  .dossie .termometro-card,
  .dossie .score-card,
  .dossie .quickwins,
  .dossie .conc-card, .dossie .risco-card, .dossie .acao-card, .dossie .fase-card { padding: var(--e4); }
  .sanfona > summary { padding: var(--e3) var(--e4); }
  .sf-corpo { padding: 0 var(--e4) var(--e4); }
}
/* A AÇÃO É CARTÃO DENTRO DE CARTÃO, e no celular as duas molduras somavam
   64px de margem (02.10.2026, ronda de texto espremido): a 375px o título da
   ação ficava com 182px, quatro linhas de 14 letras. Aqui a moldura de dentro
   aperta e o título desce um degrau, que é o tamanho do texto da interface. */
@container tela (max-width: 480px) {
  .dossie .acao-card { padding: var(--e3); }
  .acao-topo { gap: var(--e2); }
  .acao-topo .acao-t { font-size: var(--f-corpo); }
}

/* A sanfona dos quick wins reusa o cabeçalho verde que já existia. */
.qw-sanfona > summary {
  display: flex; align-items: center; gap: var(--e3);
  list-style: none; cursor: pointer; min-height: 44px; margin-bottom: 0;
}
.qw-sanfona[open] > summary { margin-bottom: var(--e4); }
.qw-sanfona > summary::-webkit-details-marker { display: none; }
.qw-sanfona > summary:focus-visible { outline: 2px solid var(--ok-forte); outline-offset: 4px; border-radius: var(--r-xs); }
.qw-sanfona .qw-l { flex: 0 1 auto; }
html.modo-papel .qw-sanfona > summary { cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
 * CHROME — as correções da auditoria
 *
 * A auditoria deu 6,5/10 e a frase que resume era: "um relatório impresso muito
 * bem desenhado, servido dentro de um painel administrativo que ainda não foi
 * desenhado". Este bloco desenha o painel.
 *
 * As cores vêm dos prints do MVP: lateral quase preta, item ativo em azul vivo,
 * selo de novidade em âmbar, créditos em verde. O que faz a diferença lá não é
 * a paleta em si, é o CONTRASTE entre a lateral escura e o conteúdo claro: ele
 * separa "onde estou" de "o que estou lendo" sem precisar de borda.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ESCALA TIPOGRÁFICA ÚNICA ─────────────────────────────────────────
 * A auditoria mediu DEZESSEIS tamanhos em uso. O critério é claro: mais de três
 * por hierarquia é problema. Aqui são seis papéis, e cada um tem UM tamanho.
 *
 * Não é economia por elegância. Dezesseis tamanhos significam que, ao escrever
 * uma tela nova, não existe resposta para "qual uso aqui" — e a resposta vira
 * o que estava por perto. É assim que 13.5px e 12.5px acabam lado a lado
 * querendo dizer a mesma coisa. */
:root {
  /* ── OS SETE DEGRAUS ──────────────────────────────────────────────────
   *
   * Antes desta passada a plataforma tinha VINTE E UM tamanhos: oito na escala
   * `--t-*`, cinco na `--f-*`, e vinte escritos direto no CSS. Entre 20px e
   * 24px existiam cinco valores diferentes.
   *
   * Vinte e um tamanhos não é riqueza de hierarquia, é ausência dela: um 21 ao
   * lado de um 22 não diz "este é mais importante", diz acidente. E, na hora de
   * escrever uma tela nova, não existe resposta para "qual eu uso aqui", então
   * a resposta vira o que estava por perto. Foi assim que 12,5 e 13,5
   * acabaram lado a lado querendo dizer a mesma coisa.
   *
   * ── ISTO JÁ FOI TENTADO UMA VEZ ──────────────────────────────────────
   *
   * O comentário logo acima registra uma passada anterior que reduziu
   * dezesseis tamanhos a seis. Ela não segurou: os px crus voltaram, um a um,
   * e chegaram a vinte e um. Por isso desta vez existe uma guarda em
   * `verifica-estilo.mjs` que derruba a entrega quando um `font-size` em px
   * aparece fora desta lista.
   *
   * ── E TUDO SUBIU ──────────────────────────────────────────────────────
   *
   * O corpo saiu de 14 para 15, a leitura de 16 para 17, o apoio de 12,5 para
   * 13. Um produto que a pessoa lê por trinta minutos pede texto maior que um
   * painel de ferramenta que ela consulta em dez segundos.
   * ─────────────────────────────────────────────────────────────────────── */
  --f-micro: 12px;    /* rótulo em mono, selo, contador */
  --f-apoio: 13px;    /* descrição, nota, legenda */
  --f-corpo: 15px;    /* texto de interface */
  --f-leitura: 17px;  /* parágrafo de relatório, título de cartão */
  --f-secao: 21px;    /* h2 de bloco */
  --f-tela: 27px;     /* h1 de tela */
  --f-heroi: 34px;    /* abertura de dossiê */

  /* ═════════════════════════════════════════════════════════════════════════
   *  A MEDIDA DE LEITURA (22.09.2026)
   *
   *  Quando o dono reclamou do texto espremido, eu tirei os tetos de largura
   *  da prosa dos relatórios. Resolveu o espremido e passou do ponto: medido
   *  depois, a linha ia a 153 caracteres no Raio-X e 169 no Radar, contra os
   *  45 a 75 que se lê sem esforço. Acima de 90 o olho perde a linha na volta.
   *
   *  ── POR QUE 100ch E NÃO OS 67ch DA TIPOGRAFIA ────────────────────────────
   *
   *  Porque 67ch (uns 74 caracteres) usa METADE de um cartão de 1311px, e o
   *  dono já recusou esse desenho três vezes. Tentei assim mesmo, e o print
   *  veio de volta em minutos: "texto espremido novamente". Medido, o bloco
   *  ocupava 51% do espaço — a conta que descreve exatamente o que ele vê.
   *
   *  100ch dá ~110 caracteres e usa uns 78% da largura. Não é a medida
   *  clássica e não finge ser: é o ponto em que a linha deixa de ser
   *  cansativa (153 caracteres) sem o texto virar uma coluna magra com o
   *  cartão vazio ao lado. A nota da decisão de 20.09 já apontava esta faixa.
   *
   *  É um TETO: `max-width` só limita, nunca estica. Por isso o SWOT, cujas
   *  colunas têm 319px, não sente nada.
   * ═════════════════════════════════════════════════════════════════════════ */
  --medida-leitura: 100ch;

  /* Os dois nomes antigos continuam apontando para o degrau certo, porque eles
     aparecem em `motores/` e em texto de e-mail, que não são CSS. */
  --f-nano: var(--f-micro);
  --f-titulo: var(--f-tela);
}


/* `:not(.hero h1)` porque o hero do relatório TEM escala própria: ele é a capa
   de um documento, não o título de uma tela de aplicação. Sem a exceção, a
   regra do chrome vence por ordem e achata os 48px para 23px. */
.conteudo h1 { font-size: var(--f-tela); line-height: 1.2; letter-spacing: var(--tr-tight); }
.conteudo .hero h1 { font-size: clamp(var(--f-heroi), 5vw, 48px); line-height: 1.05; }
.conteudo h2, .caixa h2, .sec-t { font-size: var(--f-leitura); }
.conteudo, .nav button, .btn, .row .t1 { font-size: var(--f-corpo); }
.sub-tela, .campo-nota, .desc, .nota-acao, .row .t2 { font-size: var(--f-apoio); }
.chip, .pt, .mc-pt, .nav-titulo { font-size: var(--f-micro); }

/* ── 2. LATERAL ──────────────────────────────────────────────────────────── */
.side { width: 260px; }

.marca { padding: var(--e5) var(--e5) var(--e5); }
.marca .n { font-size: var(--f-leitura); letter-spacing: -0.01em; }
.marca .s {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--f-micro); letter-spacing: 0.16em; text-transform: uppercase;                                     margin-top: var(--e0);
}

/* O ponto verde pulsa devagar. É o sinal de "o sistema está de pé", e num
   produto que gera relatório em segundo plano isso não é enfeite: a pessoa
   fecha a aba confiando que a geração continua. */
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ponto-on {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); box-shadow: 0 0 8px var(--tom-ok-70);
  animation: respira var(--t-pulso) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .ponto-on { animation: none; } }

.nav { padding: 0 var(--e3); gap: var(--e0); }
.nav-titulo {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;                                    padding: 0 var(--e3); margin: var(--e1) 0 var(--e2);
}
.nav-pe .nav-titulo { margin-top: var(--e5); }

.nav button {
  gap: var(--e3); padding: var(--e3) var(--e3); font-size: var(--f-corpo);
  border-radius: var(--r); min-height: 44px;
}
.nav button .ic { flex-shrink: 0; opacity: 0.75; }
.nav button.on .ic { opacity: 1; }
.nav button span { flex: 1; min-width: 0; text-align: left; }

/* O ATIVO É UM FIO. Antes eram três sinais: gradiente azul, borda azul e
   sombra azul, mais o fio. Sobrava. Agora: fundo neutro a 6% (é o que segura
   o contraste para quem enxerga pouca cor) e o fio na cor da FAMÍLIA do
   módulo, dois pixels, que é o único lugar em que a família aparece na
   navegação. Muito sutil, em detalhe: foi o pedido. */
.nav button.on {
  background: var(--tom-branco-4);
  border-color: transparent;
  box-shadow: none;
}
.nav button[data-r="dashboard"]  { --fam-nav: var(--primary); }
.nav button[data-r="estudio"]    { --fam-nav: var(--primary); }
.nav button[data-r="radar"]      { --fam-nav: #7C3AED; }
.nav button[data-r="toolbox"]    { --fam-nav: #EA580C; }
.nav button[data-r="pendencias"] { --fam-nav: var(--gold); }
.nav button[data-r="biblioteca"] { --fam-nav: var(--primary); }
.nav button[data-r="ajuda"]      { --fam-nav: var(--tom-branco-50); }
.nav button:focus-visible { outline: 2px solid var(--tom-branco-50); outline-offset: -2px; }

/* ── 2b. A LATERAL RETRÁTIL (10.09.2026) ─────────────────────────────────
 * No computador com mouse a barra fica recolhida num trilho de 64px, só com
 * os ícones, e abre POR CIMA do conteúdo ao passar o mouse ou ao receber o
 * foco do teclado. O conteúdo não é empurrado: a margem do .main segue o
 * trilho, e a barra aberta flutua com sombra.
 *
 * 64px não é número redondo, é onde os ícones já estavam: 12 de respiro do
 * .nav + 12 do botão + 8 de meio ícone = 32, o centro do trilho. Por isso
 * nada anda quando ela abre; só os rótulos aparecem.
 *
 * Fica de fora: toque (sem hover o trilho não teria como abrir), telas
 * abaixo de 900 (a barra some e entra o menu de tela cheia).
 *
 * A seta de fixar o menu aberto saiu em 19.09.2026 (pedido do dono), e a
 * classe `html.menu-fixo` não é mais posta. Os seletores continuam com
 * `html:not(.menu-fixo)` de propósito: tirar o prefixo baixaria a
 * especificidade de todas as regras daqui e deixaria outras vencerem. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  /* `clip`, e não `hidden`: `hidden` num eixo liga a rolagem no outro, e a
     barra ganhava uma barra de rolagem de 15px dentro de um trilho de 64
     quando o conteúdo passava da altura da tela. `clip` só corta os rótulos. */
  /* ABRIR É RÁPIDO, FECHAR É SUAVE (19.09.2026, pedido do dono).
     A barra abria e fechava com o mesmo 0,18s e a curva de desaceleração
     forte, que é boa para chegar e ruim para sair: fechando, ela parecia
     estalar. Agora cada sentido tem o seu tempo. A regra do estado de
     destino é a que vale para a transição, então o trilho (abaixo) diz como
     fechar e o `:hover` diz como abrir. */
  html:not(.menu-fixo) .side {
    width: 64px; overflow-x: clip; z-index: 45;
    transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.12s, box-shadow 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
  }
  html:not(.menu-fixo) .side:is(:hover, :focus-within) {
    width: 260px;
    transition: width 0.24s var(--curva) 0.08s, box-shadow 0.24s var(--curva) 0.08s;
    box-shadow: 18px 0 44px -18px color-mix(in srgb, var(--side) 70%, transparent);
  }
  html:not(.menu-fixo) .main { margin-left: 64px; }
  html:not(.menu-fixo) .side .marca { padding-left: var(--e4); padding-right: var(--e3); }
  /* Os textos escondidos não podem quebrar linha no trilho: invisíveis, eles
     ainda ocupam altura, e a barra recolhida media 984px contra 730 aberta.
     Os ícones desciam ao recolher e subiam ao abrir, e numa tela baixa o
     perfil e o "Sair" saíam por baixo. Numa linha só, a altura é a mesma. */
  html:not(.menu-fixo) .side :is(.marca .n, .nav-titulo, .perfil .t2) { white-space: nowrap; }

  /* O que é texto some no trilho sem sair do lugar, e volta com a barra. */
  html:not(.menu-fixo) .side :is(.marca .n, .nav-titulo, .perfil .t1, .perfil .t2, .perfil > .ic),
  html:not(.menu-fixo) .side .nav button > span:not(.pt):not(.so-leitor) {
    opacity: 0; transition: opacity 0.18s ease;
  }
  html:not(.menu-fixo) .side:is(:hover, :focus-within) :is(.marca .n, .nav-titulo, .perfil .t1, .perfil .t2, .perfil > .ic),
  html:not(.menu-fixo) .side:is(:hover, :focus-within) .nav button > span:not(.pt):not(.so-leitor) {
    opacity: 1; transition-delay: 0.16s;
  }

  /* No trilho: a contagem de pendências vira selo no canto do ícone, o
     perfil encolhe para o avatar e o "Sair" fica só com a seta. */
  html:not(.menu-fixo) .side .nav button { position: relative; }
  /* O selo e o "Sair" TROCAM DE FORMA, e troca de forma não anima. Elas
     esperam a barra terminar de fechar (0,12s + 0,34s) para acontecer, com
     `allow-discrete`; antes aconteciam no primeiro quadro, com a barra ainda
     larga, e a seta do "Sair" pulava para o meio de um botão de 260px. Ao
     abrir, voltam na hora. Navegador sem `allow-discrete` troca na hora, que
     é o comportamento de antes. */
  html:not(.menu-fixo) .side:not(:hover):not(:focus-within) .nav button .pt {
    position: absolute; top: 4px; left: 24px; min-width: 18px; height: 18px; padding: 0 var(--e1);
    transition-property: position, top, left, min-width, height, padding;
    transition-duration: 0s; transition-delay: 0.46s; transition-behavior: allow-discrete;
  }
  /* O perfil encolhe junto com a largura, e não num estalo. */
  html:not(.menu-fixo) .side .perfil {
    transition: padding 0.24s var(--curva) 0.08s, background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
  }
  html:not(.menu-fixo) .side:not(:hover):not(:focus-within) .perfil {
    padding: 3px; background: transparent; border-color: transparent;
    transition: padding 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.12s, background 0.2s ease, border-color 0.2s ease;
  }
  html:not(.menu-fixo) .side:not(:hover):not(:focus-within) .sair-linha span {
    display: none; opacity: 0;
    transition: opacity 0.15s ease, display 0s linear 0.46s;
    transition-behavior: allow-discrete;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.menu-fixo) .side,
  html:not(.menu-fixo) .side:is(:hover, :focus-within),
  html:not(.menu-fixo) .side :is(.marca .n, .nav-titulo, .perfil .t1, .perfil .t2, .perfil > .ic),
  html:not(.menu-fixo) .side .nav button > span,
  html:not(.menu-fixo) .side .perfil,
  html:not(.menu-fixo) .side:not(:hover):not(:focus-within) .perfil,
  html:not(.menu-fixo) .side:not(:hover):not(:focus-within) .nav button .pt,
  html:not(.menu-fixo) .side:not(:hover):not(:focus-within) .sair-linha span { transition: none; }
}

/* ── 3. RODAPÉ DA LATERAL ────────────────────────────────────────────────
 * O perfil virou um botão inteiro, de 44px+, levando às configurações. Antes
 * era um bloco de texto com um "Sair" de 28x26px colado — alvo abaixo do
 * mínimo, e uma ação de saída ao lado de um bloco que não era clicável. */
.side-foot { margin-top: auto; padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }

.perfil {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: var(--e3); border-radius: var(--r); min-height: 56px;
  background: var(--tom-branco-4); border: 1px solid var(--tom-branco-8);
  color: var(--tom-branco-60); font: inherit; cursor: pointer;
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.perfil:hover { background: var(--tom-branco-8); border-color: var(--tom-branco-12); }
.perfil:focus-visible { outline: 2px solid var(--tom-branco-50); outline-offset: 2px; }
/* O cartao de perfil e agora a UNICA porta para a tela de conta: o item "Meu
   perfil" no menu levava ao mesmo lugar e saiu. O estado ativo, que so o item
   de menu tinha, vem junto, senao a pessoa abre a tela e nada na lateral diz
   onde ela esta. */
.perfil.on {
  background: var(--tom-primario-25); border-color: var(--tom-primario-50);
  color: rgba(255, 255, 255, 0.92);
}
.perfil .av {
  width: 34px; height: 34px; border-radius: var(--r); flex-shrink: 0;
  background: var(--tom-primario-25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand); font-weight: 600; font-size: var(--f-corpo);
}
.perfil .t1 { color: #fff; font-size: var(--f-apoio); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil .t2 { font-size: var(--f-micro); }
.perfil .ic { opacity: 0.5; flex-shrink: 0; }

.pilula-cred {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e3); border-radius: var(--r); min-height: 40px;
  background: var(--tom-ok-8); border: 1px solid var(--tom-ok-18);
  font-size: var(--f-apoio);
}
.pilula-cred b { margin-left: auto; font-family: var(--brand); font-size: var(--f-leitura); color: #fff; }
/* Ela encostava no cartão do perfil, e duas caixas coladas leem como uma só. */
.pilula-cred + .perfil { margin-top: var(--e3); }

.sair-linha {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  width: 100%; min-height: 44px; padding: var(--e3);
  background: none; border: 0; border-radius: var(--r);
  font: inherit; font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.16em; text-transform: uppercase;                                    cursor: pointer;
  transition: color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.sair-linha:hover { color: var(--tom-branco-70); background: var(--tom-branco-4); }
.sair-linha:focus-visible { outline: 2px solid var(--tom-branco-50); outline-offset: -2px; }
.sair-linha .ic { transform: rotate(0deg); }

/* ── 4. ALVOS DE TOQUE ───────────────────────────────────────────────────
 * A auditoria mediu o lápis de renomear em 24x16px, e ele aparece em toda linha
 * da Biblioteca. A área clicável cresce sem inchar o desenho: o ícone continua
 * pequeno, o alvo passa de 44px. */
.art-renomear { position: relative; }
.art-renomear::after { content: ''; position: absolute; inset: -14px -12px; }

/* ── 5. CABEÇALHO ────────────────────────────────────────────────────────
 * O breadcrumb tinha o mesmo peso do título da tela. Agora a raiz é dim e só
 * a folha é forte: o cabeçalho diz ONDE se está, o h1 diz O QUE é. */
.main > header .crumb { font-size: var(--f-apoio); }
.main > header .crumb b { font-size: var(--f-corpo); }
.creditos { font-size: var(--f-apoio); }

/* ── 6. ESPAÇAMENTO DOS ÁTOMOS ───────────────────────────────────────────
 * A escala de blocos entrou na passada anterior e sobraram 2, 3, 5, 7, 11, 13
 * e 20px nos átomos: chip, selo, contador, rótulo. Aqui eles entram na régua. */
.chip { padding: var(--e1) var(--e2); }
.pt, .mc-pt { padding: 0 var(--e2); }
.row { padding: var(--e3) 0; gap: var(--e3); }
.acoes { gap: var(--e3); margin-top: var(--e4); }
/* ── A BARRA DO CABEÇALHO NÃO LEVA A MARGEM DOS BLOCOS ────────────────────
 * `.acoes` é usada em dois papéis: linha de ações no fim de um bloco, onde a
 * margem de cima é o respiro correto, e barra do cabeçalho, onde ela é um
 * defeito. Num flex com `align-items: center`, a margem de cima entra na
 * conta do centro: 16px de margem descem o item 8px, e o sino, o saldo e o
 * menu ficam 8px abaixo do título ao lado.
 *
 * Medido no cabeçalho de 64px: `.crumb` centrado em 31,5 e `.acoes` em 39,5.
 * Aparecia em celular, tablet e desktop, porque a regra dos átomos não tem
 * media query.
 * ---------------------------------------------------------------------- */
.main > header .acoes { margin-top: 0; }
.aviso { padding: var(--e3) var(--e4); margin-bottom: var(--e3); }
.campo { margin-bottom: var(--e4); }
.campo-nota { margin-top: var(--e2); }
.vazio { padding: var(--e5); }

/* O foco da fase, e a tática dentro dela. A fase é um cartão de CARTÕES: a
   tática precisa continuar tendo moldura própria dentro dele, senão as seis
   viram um bloco de texto só. */
.fc-foco { margin-top: var(--e3); }
.fase-card .tat { background: var(--surface-hi); }
.fase-card .tat:hover { background: var(--surface); }

/* ═══════════════════════════════════════════════════════════════════════════
 * CONTRASTE — as falhas medidas
 *
 * Medição feita compondo o alfa camada a camada até o branco, que é o que o
 * olho vê. A primeira tentativa parava no primeiro fundo opaco e dava falso
 * positivo; esta acumula cada rgba sobre a anterior.
 *
 * O padrão das falhas é um só: TEXTO PEQUENO EM COR SOBRE FUNDO TINGIDO DA
 * MESMA COR. Verde var(--ok-forte) sobre verde a 2% dá 3.49, e o mínimo para texto
 * normal é 4.5. A cor certa não é outra cor: é a MESMA mais escura, que é para
 * isso que existem as variantes `-ink` no sistema.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Lateral: rótulo de grupo em 9.5px dava 2.65, e o subtítulo do perfil, 3.83. */
.nav-titulo { color: var(--tom-branco-50); }
.perfil .t2 { color: var(--tom-branco-60); }
.pilula-cred { color: var(--tom-branco-70); }
.sair-linha { color: var(--tom-branco-50); }
.marca .s { color: var(--tom-branco-60); }

/* O separador do breadcrumb era #d1d5db no branco: 1.47. Ele é decorativo, mas
   decorativo não é desculpa para texto ilegível — é motivo para ele ser um
   caractere que não precisa ser lido, na cor de apoio do sistema. */
.main > header .crumb span[style] { color: var(--faint-ink) !important; }

/* Quick wins: o verde var(--ok-forte) sobre o tingido verde dava 3.49. `--ok-ink`
   (#047857) é a mesma cor um passo mais escura, e passa. */
.qw-sanfona > summary:focus-visible { outline-color: var(--ok-ink); }
.selo-sem.ok { color: var(--ok-ink); }
.li-ic.ok { color: var(--ok-ink); }
.pm-topo.ok .ic { color: var(--ok-ink); }

/* Os que passam por TOKEN valem nos dois temas: `--ok-ink` e `--danger-ink`
   são redefinidos dentro de `html[data-admin]`, então a correção acompanha o
   fundo em vez de brigar com ele. */
.qw-l, .qw-passo, .qw-conta, .qw-n, .qw-sanfona .sf-seta { color: var(--ok-ink); }
.sino-n { background: var(--danger-ink); }              /* branco sobre vermelho: 3.76 → passa */
.ico.urg { color: var(--danger-ink); }

/* ── ESTES SÓ VALEM NO TEMA CLARO, e o escopo é o conserto ──────────────────
 *
 * As três regras abaixo ESCURECEM uma cor. Escurecer é o movimento certo
 * contra fundo branco, e o exatamente errado contra fundo escuro: a mesma
 * correção que levava o âmbar de 4.40 para 4.6 sobre o branco o derruba para
 * 2.16 sobre o chão do admin. Medido na tela de Trava e conversão, no chip de
 * contagem de batidas.
 *
 * O bug não era a cor, era a FALTA DE ESCOPO. Elas nasceram numa auditoria
 * feita quando o produto tinha um tema só, e continuaram valendo quando o
 * segundo chegou. `html:not([data-admin])` devolve cada uma ao lugar onde ela
 * foi medida; no escuro, o `--warn-ink` do tema já passa em AA sozinho.
 *
 * A lição é a regra: correção de contraste que escreve um HEX ou mistura com
 * `#000` é específica de um fundo, e precisa dizer qual. Correção que passa
 * por token acompanha o tema e não precisa de escopo nenhum. */
/* `:not(.impacto *)` porque a medição que gerou esta linha foi feita sobre
   PAPEL, e o material de impacto é a exceção que ela não conhecia. Sem isto o
   âmbar escuro cai sobre o marinho e o chip fica ilegível — o que aconteceu no
   painel de saldo em 09.09.2026, onde `.saldo-impacto .chip.ap` já mandava a
   cor certa e perdia por especificidade para esta regra.

   É a própria lição do comentário acima levada um degrau adiante: correção de
   contraste com HEX precisa dizer sobre QUAL fundo ela vale, e "não-admin" era
   metade da resposta. A outra metade é "não sobre impacto". */
html:not([data-admin]) .chip.ap:not(.impacto *) { color: #92400e; }
html:not([data-admin]) .destaque-card.t-fam .dc-l,
html:not([data-admin]) .sf-selo { color: color-mix(in srgb, var(--fam-text) 88%, #000); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ESQUELETO DE CARREGAMENTO
 *
 * Substitui o "Carregando…" em texto. A diferença não é estética:
 *
 *  · O texto não diz QUANTO vem. "Carregando…" no lugar de uma lista de vinte
 *    itens e no lugar de um cartão são a mesma coisa na tela, e a pessoa não
 *    sabe se espera uma linha ou uma página.
 *  · O esqueleto reserva o espaço final. Sem ele, o conteúdo chega e EMPURRA a
 *    página, e quem já começou a ler perde a linha. É o mesmo defeito que faz
 *    aviso injetado no fluxo ser pior que toast.
 *  · Ele comunica que o sistema está vivo sem um spinner girando, que é a
 *    forma mais barata de dizer "não sei quanto falta".
 * ═══════════════════════════════════════════════════════════════════════════ */
@keyframes brilho { to { background-position-x: -200%; } }

.osso {
  background: linear-gradient(100deg, var(--surface-hi) 8%, var(--tom-branco-60) 18%, var(--surface-hi) 33%);
  background-size: 200% 100%;
  animation: brilho 1.4s linear infinite;
  border-radius: var(--r-xs);
}
.osso-linha { height: 12px; margin-bottom: var(--e2); }
.osso-linha.curta { width: 40%; }
.osso-linha.media { width: 70%; }
.osso-titulo { height: 20px; width: 45%; margin-bottom: var(--e3); border-radius: var(--r-xs); }
.osso-bloco { height: 96px; border-radius: var(--r-md); }

.esqueleto {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5); margin-bottom: var(--e3);
}

@media (prefers-reduced-motion: reduce) {
  /* Sem animação o esqueleto ainda serve: ele continua reservando o espaço e
     dizendo quanta coisa vem. O brilho é o que some, não a informação. */
  .osso { animation: none; background: var(--surface-hi); }
}
html.modo-papel .esqueleto { display: none !important; }

/* Só para leitor de tela: fora da vista, dentro da árvore de acessibilidade. */
/* O ATALHO DE PULAR. Invisivel ate receber foco: ele existe para quem navega
   por teclado e nao deve ocupar espaco para quem nao precisa dele. */
.pular {
  position: absolute; left: 12px; top: -100px; z-index: 60;
  padding: 10px 16px; border-radius: var(--r-xs);
  background: var(--primary); color: #fff; font-size: var(--f-apoio); font-weight: 600;
  text-decoration: none; transition: top var(--t-rapido);
}
.pular:focus { top: 12px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mais-empresas { display: flex; justify-content: center; padding: var(--e4) 0 var(--e5); }
.mais-empresas .btn { min-width: 260px; }
html.modo-papel .mais-empresas { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * ONBOARDING DO RELATÓRIO
 *
 * O desenho é o do MVP: fundo escuro com desfoque, caixa branca de cantos
 * grandes, e um cabeçalho em GRADIENTE (azul da marca para o verde do "ok").
 * O gradiente não é enfeite: ele é a única coisa colorida da tela naquele
 * instante, e é o que faz o modal parecer um convite e não um alerta de erro.
 *
 * A caixa rola por dentro (`max-height: 92vh`), e não a página: um modal que
 * empurra a rolagem para o corpo devolve a pessoa ao topo do relatório quando
 * fecha.
 * ═══════════════════════════════════════════════════════════════════════════ */

@keyframes ob-sobe {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }

/* Também é um `<dialog>`. Ver `modal.js`. A regra do estado fechado é
 * obrigatória: `display: flex` numa classe vence o `display: none` que o
 * navegador dá ao diálogo fechado. */
dialog.ob-fundo {
  border: 0; margin: 0; color: inherit;
  width: 100%; height: 100%; max-width: none; max-height: none;
}
dialog.ob-fundo:not([open]) { display: none; }
.ob-fundo::backdrop { background: transparent; }
.ob-fundo {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e4);
  background: var(--tom-sombra-70);
  animation: ob-fade var(--t-rapido) ease-out;
}
.ob-fundo.saindo { opacity: 0; transition: opacity var(--t-rapido) var(--curva); }

.ob-caixa {
  background: var(--surface); border-radius: var(--r-lg);
  max-width: 860px; width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: ob-sobe 0.35s var(--curva);
  overflow: hidden;
}

.ob-topo {
  /* O verde é o var(--ok-forte) do MVP, e não o `--ok` (#10b981): sobre azul, o tom
     mais claro lava a metade direita da faixa. */
  /* Era azul → verde, e o verde é a família do Raio-X: no Plano e no Radar o
     modal abria na cor de outro relatório. Agora é a família do módulo em
     que ele abre (herdada de `.dossie.<família>`), escurecendo para a direita
     em vez de mudar de matiz. */
  /* A SUPERFÍCIE DE IMPACTO (06.09.2026): o topo do modal é o mesmo material
     das capas, com a luz na cor da família do relatório. */
  --luz-azul: color-mix(in srgb, var(--fam, var(--primary)) 55%, transparent);
  padding: var(--e6) var(--e6) var(--e5); flex-shrink: 0;
}

.ob-selo {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tom-branco-60); margin-bottom: var(--e2);
}
.ob-topo h2 {
  color: #fff; font-size: var(--f-tela); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
  margin: 0 0 var(--e2);
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
/* A seta apontando para baixo diz, sem palavras, que a explicação continua
   abaixo do cabeçalho. É o mesmo gesto do MVP. */
.ob-seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-xs); flex-shrink: 0;
  background: var(--tom-branco-18); color: #fff;
  transform: rotate(90deg);
}
.ob-topo p { color: var(--tom-branco-70); font-size: var(--f-corpo); margin: 0; line-height: 1.6; }

.ob-corpo { padding: var(--e5) var(--e6) var(--e2); overflow-y: auto; flex: 1; }

.ob-grade { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.ob-card {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e4) var(--e4); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--fam, var(--primary)) 6%, transparent), transparent 45%);
  transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.ob-card:hover { border-color: var(--primary-line); background: var(--surface); }
.ob-ic {
  width: 38px; height: 38px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--fam, var(--primary)) 8%, transparent); color: var(--fam-icone, var(--primary));
}
.ob-txt { min-width: 0; }
.ob-r {
  font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--e1);
}
.ob-t { font-size: var(--f-corpo); color: #374151; line-height: 1.6; }
.ob-t b { color: var(--ink); font-weight: 600; }

/* O ÚLTIMO PASSO: era o cartão fixo no topo do dossiê, com um botão de gerar o
   Plano que se repetia lá embaixo. Aqui ele fecha a explicação e não compete
   com o bloco de ações, que é quem sabe se o Plano já existe. */
.ob-fim {
  display: flex; align-items: flex-start; gap: var(--e4);
  margin-top: var(--e5); padding: var(--e4) 20px;
  border: 1px solid var(--tom-primario-18); border-left: 3px solid var(--primary);
  border-radius: var(--r-md); background: var(--tom-primario-4);
}
.ob-fim-ic {
  width: 38px; height: 38px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tom-primario-12); color: var(--primary);
}
.ob-fim-t { font-size: var(--f-corpo); font-weight: 600; margin: 0 0 var(--e2); font-family: var(--brand); }
.ob-fim-p { font-size: var(--f-corpo); color: var(--prosa); line-height: 1.65; margin: 0; }
.ob-fim-p b { color: var(--ink); }

.ob-pe {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e5) var(--e6) var(--e5); flex-shrink: 0;
  border-top: 1px solid var(--border); margin-top: var(--e5);
}
.ob-nao {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--f-apoio); color: var(--faint-ink);
}
.ob-pe .btn { margin-left: auto; }

/* A página não pode rolar por baixo do modal. */
/* A trava da rolagem, com a compensação da barra que some.
 *
 * `overflow: hidden` remove a barra, e a barra ocupava espaço: sem devolver
 * esse espaço como padding, o documento fica 15px mais largo no mesmo quadro
 * em que o modal aparece, e a página inteira dá um pulo lateral. `rolagem.js`
 * mede a largura real e escreve em `--barra-sumida`; em macOS com barra
 * sobreposta ela é zero e o padding não existe. */
html.trava-rolagem, html.trava-rolagem body { overflow: hidden; }
html.trava-rolagem body { padding-right: var(--barra-sumida, 0px); }

@media (prefers-reduced-motion: reduce) {
  .ob-caixa, .ob-fundo { animation: none; }
}

@media (max-width: 640px) {
  .ob-fundo { padding: 0; align-items: flex-end; }
  .ob-caixa { border-radius: 20px 20px 0 0; max-height: 94vh; }
  .ob-topo { padding: var(--e5) var(--e5) var(--e5); }
  .ob-topo h2 { font-size: var(--f-leitura); }
  .ob-corpo { padding: var(--e5) var(--e5) var(--e1); }
  .ob-grade { grid-template-columns: 1fr; gap: var(--e3); }
  .ob-pe { flex-direction: column-reverse; align-items: stretch; gap: var(--e3); padding: var(--e4) var(--e5) var(--e5); }
  .ob-pe .btn { margin-left: 0; width: 100%; justify-content: center; }
  .ob-nao { justify-content: center; }
}

/* Em papel o modal não existe: ele é conversa de tela. */
html.modo-papel .ob-fundo { display: none !important; }

/* O botão de reabrir o guia mora no herói, abaixo da linha de meta. Fica junto
   do que ele explica, e não numa barra de ferramentas separada que ninguém
   olha depois da primeira visita. */
.hero-acoes { margin-top: var(--e4); display: flex; gap: var(--e2); flex-wrap: wrap; }
html.modo-papel .hero-acoes { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * VISÃO GERAL — cabeçalho, jornada e último relatório
 *
 * A barra da jornada é a peça que eu não tinha e o MVP tem. Ela é um cartão com
 * três sinais: o trilho preenchido (quanto falta), o marcador de cada etapa
 * (onde estou) e um CTA que muda de texto conforme a etapa. Nenhum dos três
 * sozinho responde "e agora?"; os três juntos respondem sem a pessoa perguntar.
 *
 * O fio azul na borda esquerda é o mesmo do MVP, e serve para o cartão não
 * parecer mais um painel branco entre painéis brancos.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* O CABEÇALHO DE PÁGINA — título à esquerda, ação à direita.
   O `display: flex` vinha de carona do OUTRO `.pc-cab`, o de dentro do cartão
   de pendências, que mora milhares de linhas abaixo neste arquivo e ganhava
   por ordem. Aquele agora é `.pcard .pc-cab`, e este declara o que sempre
   precisou: `.pc-cab > div` e `.emp-cab { align-items: flex-start }` só fazem
   sentido em flex. */
.pc-cab {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e5);
}

/* ── A GRADE BENTO DA VISÃO GERAL ────────────────────────────────────────
 * Jornada e "continue de onde parou" à esquerda, os quatro números à
 * direita. Antes era tudo empilhado na largura toda: a jornada ocupava uma
 * faixa inteira, os números vinham depois em `auto-fit` e o quarto sobrava
 * numa segunda linha, com metade da tela vazia ao lado dele.
 * ─────────────────────────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e4); align-items: start; margin-bottom: var(--e5); }
/* Sem o relatório recente embaixo (ele virou faixa), a Jornada estica até a
   altura do score, e as três colunas terminam juntas. */
.bento-a { grid-column: span 5; display: flex; flex-direction: column; gap: var(--e4); align-self: stretch; }
.bento-h { grid-column: span 4; display: flex; }
.bento-b { grid-column: span 3; display: flex; flex-direction: column; gap: var(--e3); }
.bento .jornada { margin-bottom: 0; flex: 1; }
.bento.sem-jornada .bento-a,
.bento.sem-jornada .bento-b { grid-column: 1 / -1; }
.bento.sem-jornada .cards-2x2 { grid-template-columns: repeat(4, 1fr); }
@container tela (max-width: 760px) {
  .bento.sem-jornada .cards-2x2 { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
   QUANDO O BENTO DESABA, A MARGEM DELE VIRA UM VÃO A MAIS NA PILHA.

   Em três colunas, `margin-bottom: --e5` separa uma LINHA de blocos do que vem
   depois, e 24px ali é um corte de seção legítimo. Empilhado, o bento deixa de
   ser linha: os filhos dele viram itens da mesma coluna vertical, e a margem
   passa a ser só mais um vão — o maior de todos, sem nada que o justifique.

   Medido a 1005px de conteúdo: jornada→relatório 16px, relatório→sinais 16px,
   sinais→ações 24px. O olho lê os dois primeiros como ritmo e o terceiro como
   erro, que foi exatamente o que o dono do produto fotografou.

   `.acao-rapida` entra junto porque as duas margens COLAPSAM e a maior vence:
   baixar só a do bento não mudaria um pixel. ══════════════════════════════ */
@media (max-width: 1040px) {
  .bento-a, .bento-b { grid-column: 1 / -1; }
}
.pc-cab > div { flex: 1; min-width: 220px; }
.pc-cab h1 { font-size: var(--f-tela); line-height: 1.2; }
.pc-cab .sub-tela { margin: var(--e1) 0 0; }
.pc-cab .btn { flex-shrink: 0; }

.jornada {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md); padding: var(--e5); margin-bottom: var(--e5);
  box-shadow: var(--shadow-card);
}
/* O halo no canto: é o mesmo gesto do MVP, e ele existe para o cartão ter uma
   fonte de luz. Sem ele o retângulo é chapado. */
.jornada::before {
  content: ''; position: absolute; top: -32px; right: -32px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--primary); opacity: 0.05; filter: blur(24px);
  pointer-events: none;
}

.jn-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); position: relative; }
.jn-tt {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink);
}
.jn-tt svg { color: var(--dim-ink); }
.jn-emp-bloco { display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; }
.jn-sep { font-style: normal; }
.jn-n { margin-left: auto; font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink); }

/* ── A JORNADA COMO TRILHO ───────────────────────────────────────────────
 * Era uma lista de quatro linhas empilhadas com uma barra de progresso
 * separada em cima. O trilho junta as duas coisas: a posição de cada ponto
 * JÁ É o progresso, e a linha que os liga diz que existe uma ordem. Dois
 * elementos a menos dizendo a mesma coisa.
 *
 * `--feito` é a fração entre o primeiro e o ÚLTIMO ponto, não sobre o total:
 * o trilho começa no centro do primeiro marcador e termina no centro do
 * último, então com 4 de 4 a linha chega exatamente no quarto ponto.
 * ─────────────────────────────────────────────────────────────────────── */
.jn-trilha {
  /* `--col` é a largura REAL de uma coluna, com o vão descontado. Medido com
     `100% / 8`, que ignora o vão: o trilho começava 3px à direita do centro
     do primeiro marcador. O anel branco do marcador escondia o erro, o que é
     pior que vê-lo. `--n` vem do JS, então uma quinta etapa não quebra a
     conta. */
  --n: 4;
  --col: calc((100% - (var(--n) - 1) * var(--e2)) / var(--n));
  position: relative; list-style: none; margin: var(--e5) 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e2);
}
.jn-trilha::before, .jn-trilha::after {
  content: ''; position: absolute; top: 13px; height: 2px; border-radius: var(--r-pill);
}
/* O trilho vazio vai de centro a centro do primeiro e do último marcador. */
.jn-trilha::before { left: calc(var(--col) / 2); right: calc(var(--col) / 2); background: var(--surface-hi); }
.jn-trilha::after {
  left: calc(var(--col) / 2); width: calc((100% - var(--col)) * var(--feito, 0));
  background: var(--navy); transition: width var(--t-lento) var(--curva);
}
.jn-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e3); text-align: center; min-width: 0; }
.jn-mk {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); color: var(--faint-ink);
  font-family: var(--mono); font-size: var(--f-micro);
  /* O anel da cor do cartão é o que abre o buraco no trilho por baixo. */
  box-shadow: 0 0 0 5px var(--surface);
}
.jn-p.feito .jn-mk { background: var(--impacto-fundo); border-color: transparent; color: #fff; }
.jn-p.ativa .jn-mk { border-color: var(--navy); color: var(--navy); }
.jn-txt { display: flex; flex-direction: column; gap: var(--e0); min-width: 0; }
/* "VOCE ESTA AQUI" e o unico rotulo da trilha que nao e nome de etapa, entao
   ele se distingue pela forma: versalete monoespacado, na cor da marca, sem
   caixa. Uma pastilha aqui competiria com o marcador que ja pulsa ao lado. */
.jn-aqui {
  display: block; margin-top: 2px;
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--primary);
}

/* A UNICA ACAO DA JORNADA CUMPRE O PISO DE TOQUE.
   Ela herda o `.pq`, que e o tamanho de botao secundario em lista, e media
   40 px. No celular ela e o comando principal da tela inteira, e o piso do
   projeto e 44. */
@container tela (max-width: 620px) {
  /* `.jornada .jn-cta button.btn` e nao `.jn-cta button`: a regra perdia para
     `.btn.pq`, que tem duas classes contra uma classe e um elemento. */
  .jornada .jn-cta button.btn { min-height: 44px; width: 100%; justify-content: center; }
}
.jn-txt b { font-size: var(--f-apoio); font-weight: 600; color: var(--faint-ink); }
.jn-p.feito .jn-txt b, .jn-p.ativa .jn-txt b { color: var(--ink); }
.jn-txt i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); }
/* A DURAÇÃO DA ETAPA (01.10.2026). Um degrau abaixo do estado: o estado diz
   onde a pessoa está, a duração diz o que custa seguir. Em mono porque é
   medida, e apagada porque não deve competir com o nome da etapa. */
.jn-dur {
  font-style: normal; font-family: var(--mono); font-size: var(--f-micro);
  color: var(--faint-ink); opacity: .75; line-height: 1.35;
}

.jn-agora { display: none; }

/* O CARTÃO DECIDE PELA PRÓPRIA LARGURA (01.10.2026). Com a quinta etapa,
   num cartão de 443px ao lado do score cada coluna ficava com 72px e 152px
   de altura: nomes em duas linhas, estado em três. A regra do telefone já
   resolvia isso, mas olhava a largura da TELA, e a tela ali tinha 819px.
   Agora o cartão é o contêiner: estreito, ele mostra só o nome e leva o
   estado para a linha "Você está aqui", como no telefone. */
.jornada { container: jornada / inline-size; }
@container jornada (max-width: 560px) {
  .jn-txt b { font-size: var(--f-micro); line-height: 1.3; }
  .jn-txt i, .jn-aqui, .jn-dur { display: none; }
  .jn-agora { display: block; margin: var(--e4) 0 0; text-align: center; font-size: var(--f-apoio); color: var(--dim-ink); }
  .jn-agora b { color: var(--ink); font-weight: 600; }
}

/* A DURAÇÃO SÓ CABE NA COLUNA LARGA (01.10.2026, achado do dono no tablet).
   A 768px cada etapa tem 157px, e "~20 min + 5 de análise" quebrava em duas
   linhas de mono logo abaixo do título: quatro colunas desencontradas e um
   amontoado de numerais onde devia haver o nome da etapa. Abaixo de 860 a
   linha sai do trilho inteira. Ela não se perde: na primeira visita a mesma
   informação está na pastilha do bloco "Como funciona", onde há largura. */
@container tela (max-width: 860px) {
  .jn-dur { display: none; }
}

@container tela (max-width: 620px) {
  /* O CABEÇALHO DA JORNADA EM DUAS FAIXAS ARRUMADAS (19.09.2026, pedido do
     dono). Antes o rótulo e a empresa quebravam juntos em duas linhas e o
     "Etapa 4 de 4" ficava solto à direita, entre as duas. Agora a primeira
     faixa é "JORNADA ATUAL" e a etapa; a segunda é a empresa, em letra de
     leitura e não em versalete, porque é o assunto do cartão. O `contents`
     põe o ícone, o rótulo e a empresa direto na grade do topo. */
  .jn-topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e2); }
  .jn-tt { display: contents; }
  .jn-emp-bloco { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  /* Na própria linha, o ponto não separa nada. */
  .jn-emp-bloco .jn-sep { display: none; }
  .jn-emp-bloco b, .jn-emp select {
    font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600;
    letter-spacing: -0.01em; text-transform: none; color: var(--ink);
  }
  /* Com a faixa inteira para si, o seletor não precisa mais do teto de 200px
     que o fazia cortar "Empresa de Exempl…" com espaço de sobra ao lado. */
  .jn-emp { flex: 1; min-width: 0; }
  .jn-emp select { max-width: 100%; width: 100%; }
  .jornada .jn-cta p { min-width: 0; }

  /* O TRILHO CONTINUA HORIZONTAL NO TELEFONE. Ele virava uma lista de quatro
     linhas que ocupava meia tela; em fila ele diz a mesma ordem em um terço
     da altura. Embaixo de cada ponto fica só o nome (o marcador já diz se
     está feito); o estado da etapa atual desce para a linha `.jn-agora`. */
  .jn-trilha { margin-top: var(--e4); }
  .jn-p { gap: var(--e2); }
  .jn-txt b { font-size: var(--f-micro); line-height: 1.3; }
  .jn-txt i, .jn-aqui { display: none; }
  .jn-agora {
    display: block; margin: var(--e4) 0 0; text-align: center;
    font-size: var(--f-apoio); color: var(--dim-ink);
  }
  .jn-agora b { color: var(--ink); font-weight: 600; }
}

.jn-cta {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e4); padding-top: var(--e4);
  border-top: 1px solid var(--border); position: relative;
}
/* A FRASE QUEBRA, NÃO CORTA (auditoria de 16.09.2026). Era uma linha com
   reticências e a frase inteira no `title`; no computador, ao lado do botão,
   sobrava "Sua estratégia está pronta. Agora é hora ..." e o que ela explica
   ficava só na dica do mouse, que no toque não existe. */
.jn-cta p { flex: 1; min-width: 240px; margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.jn-cta .btn { flex-shrink: 0; }
/* A próxima tática no cartão (lote 1, 18.09.2026): o olho em mono, como o
   selo do cartão do Plano; o título com o peso da tática; o prazo embaixo. */
.jn-cta-olho, .jn-cta-tit, .jn-cta-sub, .jn-atraso { display: block; }
.jn-cta-olho { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); letter-spacing: 0.04em; margin-bottom: var(--e1); }
.jn-cta-tit { font-size: var(--f-corpo); font-weight: 600; color: var(--ink); line-height: 1.35; }
.jn-atraso { color: var(--warn-ink); margin-top: var(--e1); }

/* ── PRIMEIRA VISITA ─────────────────────────────────────────────────────
 * A Visão Geral de quem ainda não tem relatório. Ver `primeira-visita.js`.
 *
 * Nenhum degradê novo: o painel escuro é a `.impacto` que já existe, com o
 * ruído dela, e o brilho que o documento de referência fazia com dois radiais
 * vem da própria esfera, que gira. Luz que se move dispensa luz pintada.
 *
 * O olho dos cartões (`.pv-etiqueta`) é mono em caixa alta porque é olho de
 * seção, e ocupa o lugar do `.papeis .olho` que ele substitui: a contagem do
 * verificador não muda. */
.pv-cab { margin-bottom: var(--e4); }

.pv-hero {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--e5);
  border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px);
}
.pv-kicker {
  display: inline-flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e4);
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tom-branco-60);
}
/* `.pv-hero` na frente por ESPECIFICIDADE, nao por enfeite: `.conteudo h2`
   vale (0,1,1) e derrubava `.pv-tit` (0,1,0) para 17px. A manchete da tela
   saia do tamanho de um subtitulo e ninguem via o erro no codigo. */
.pv-hero .pv-tit {
  margin: 0; font-size: var(--f-heroi); font-weight: 650; line-height: 1.08;
  letter-spacing: -0.035em; text-wrap: balance; max-width: 18ch;
}
.pv-lead {
  margin: var(--e4) 0 0; max-width: 54ch;
  font-size: var(--f-corpo); line-height: 1.65; color: var(--tom-branco-70);
}
.pv-tempo { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.pv-tempo span {
  padding: var(--e2) var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--tom-branco-18); background: var(--tom-branco-8);
  font-size: var(--f-micro); color: var(--tom-branco-70);
}
.pv-acao { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e5); }
.pv-acao p { margin: 0; flex: 1; min-width: 220px; font-size: var(--f-apoio); line-height: 1.6; color: var(--tom-branco-60); }

.pv-painel {
  padding: var(--e5); border-radius: var(--r-lg);
  border: 1px solid var(--tom-branco-12); background: var(--tom-branco-4);
}
/* A ESFERA FICA (condição do dono, 01.10.2026). Ela é o único elemento da
   tela que se move, e por isso é ela que diz "isto está vivo". */
.pv-esfera { position: relative; aspect-ratio: 1; max-width: 240px; margin: 0 auto var(--e4); }
.pv-esfera canvas { display: block; width: 100%; height: 100%; }
.pv-esfera span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.06em;
  color: var(--tom-branco-70); pointer-events: none;
}
.pv-painel h2 { margin: 0; font-size: var(--f-corpo); font-weight: 600; }
.pv-barra { height: 6px; margin: var(--e4) 0 var(--e2); border-radius: var(--r-pill); background: var(--tom-branco-12); overflow: hidden; }
.pv-barra i { display: block; height: 100%; border-radius: inherit; background: var(--tom-branco-70); transition: width var(--t-lento) var(--curva); }
.pv-prog {
  display: flex; justify-content: space-between; margin: 0;
  font-family: var(--mono); font-size: var(--f-micro); color: var(--tom-branco-50);
}
.pv-passos { list-style: none; padding: 0; margin: var(--e5) 0 0; display: grid; gap: var(--e4); }
.pv-passo { display: grid; grid-template-columns: 26px 1fr; gap: var(--e3); align-items: start; }
.pv-num {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tom-branco-12); color: var(--tom-branco-70);
  font-family: var(--mono); font-size: var(--f-micro);
}
.pv-passo.aqui .pv-num { background: #fff; color: var(--navy); }
.pv-passo-txt { font-size: var(--f-micro); line-height: 1.5; color: var(--tom-branco-50); }
.pv-passo-txt b { display: block; font-size: var(--f-apoio); color: var(--tom-branco-70); margin-bottom: 1px; }
.pv-passo.aqui .pv-passo-txt b, .pv-passo.feito .pv-passo-txt b { color: #fff; }

.pv-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e4); margin-top: var(--e4); align-items: start; }
.pv-col { display: grid; gap: var(--e4); }
.pv-card { padding: var(--e5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pv-etiqueta {
  display: inline-block; margin-bottom: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint-ink);
}
.pv-card h3 { margin: 0; font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pv-sub { margin: var(--e3) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }

.pv-jornada { list-style: none; counter-reset: pv; padding: 0; margin: var(--e5) 0 0; display: grid; gap: var(--e4); }
/* O NUMERO MORA NA MARGEM, e nao encostado no titulo. Com o contador a
   var(--e3) de um conteudo que comecava a var(--e5), os dois se tocavam e o
   "01" lia como expoente do nome da etapa. 38px de recuo dao a ele uma
   coluna propria, que e o que faz um indice funcionar como indice. */
.pv-jornada li {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding-left: 38px; position: relative;
  border-left: 2px solid var(--border);
}
.pv-jornada li::before {
  counter-increment: pv; content: counter(pv, decimal-leading-zero);
  position: absolute; left: 12px; top: 2px;
  font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink);
}
.pv-jornada b { display: block; font-size: var(--f-corpo); font-weight: 600; color: var(--ink); }
.pv-jornada p { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.pv-duracao {
  flex-shrink: 0; align-self: flex-start; max-width: 38%; padding: var(--e1) var(--e3);
  border-radius: var(--r-pill); background: var(--surface-hi);
  font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink);
}

.pv-checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-top: var(--e5); }
.pv-check { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e4); border-radius: var(--r); background: var(--surface-sutil); border: 1px solid var(--border); }
.pv-check i { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tom-ok-12); color: var(--ok-ink); }
.pv-check b { display: block; font-size: var(--f-apoio); font-weight: 600; color: var(--ink); }
.pv-check span { display: block; font-size: var(--f-micro); color: var(--faint-ink); margin-top: 1px; }

.pv-lado { display: grid; gap: var(--e4); }
.pv-papel { margin-top: var(--e4); padding: var(--e4); border-radius: var(--r); background: var(--surface-sutil); border: 1px solid var(--border); }
.pv-papel b { display: block; font-size: var(--f-apoio); font-weight: 600; color: var(--ink); margin-bottom: var(--e2); }
.pv-papel p { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
/* O cartão do piloto: o fio da família no alto, e não no texto (regra da casa). */
.pv-piloto { border-top: 3px solid var(--primary); }
.pv-piloto-inclui { margin: var(--e3) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.pv-piloto-inclui b, .pv-piloto-lista b { color: var(--ink); font-weight: 600; }
.pv-piloto-lista { margin: var(--e3) 0 0; padding-left: var(--e4); display: grid; gap: var(--e2); font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }

.pv-pe { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--border); }
.pv-pe span { flex: 1; min-width: 260px; font-size: var(--f-apoio); color: var(--faint-ink); line-height: 1.6; }
.pv-pe b { color: var(--dim-ink); font-weight: 600; }

@container tela (max-width: 860px) {
  .pv-hero { grid-template-columns: 1fr; }
  .pv-grade { grid-template-columns: 1fr; }
  /* O TRILHO VIRA FILA QUANDO O PAINEL GANHA A LARGURA INTEIRA (01.10.2026,
     pedido do dono olhando o tablet). Em coluna única o painel passa de
     340px para a largura da tela, e quatro etapas empilhadas viravam uma
     lista alta com um corredor de espaço vazio à direita de cada linha.
     Em fila elas dizem a mesma ordem em um quarto da altura, e é a mesma
     forma que o trilho da Jornada já usa no telefone. */
  .pv-passos { grid-template-columns: repeat(4, 1fr); gap: var(--e3); }
  .pv-passo { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--e2); }
  .pv-passo-txt b { margin-bottom: 2px; }
  /* No telefone a esfera come a dobra inteira antes de a pessoa ler o que a
     tela promete. Ela volta a ser o que é: um sinal, não um banner. */
  .pv-esfera { max-width: 260px; margin-inline: auto; }
}
@container tela (max-width: 620px) {
  .pv-checks { grid-template-columns: 1fr; }
  /* O estado de cada etapa sai no telefone, como no trilho da Jornada: numa
     coluna de 70px "Depois do Raio-X" quebra em três linhas. Fica o nome, e
     o marcador já diz o que está feito. */
  .pv-passo-txt { font-size: 0; }
  .pv-passo-txt b { font-size: var(--f-micro); }
  .pv-jornada li { flex-direction: column; gap: var(--e2); }
}

/* ── RESULTADOS ──────────────────────────────────────────────────────────
 * Ver `telas/resultados.js`. Um cartão por indicador, e dentro dele os quatro
 * marcos lado a lado: o olho compara partida e agora sem ler parágrafo.
 *
 * Os três estados de um marco pela FORMA, e não só pela cor (fundamento da
 * casa para telas que se operam): feito tem número em peso cheio; devido tem
 * borda tracejada, que é o desenho de "espaço esperando preenchimento"; futuro
 * é só o traço apagado. Quem não distingue âmbar continua vendo a diferença.
 *
 * Os rótulos dos marcos são mono em caixa NORMAL: são medida, não olho de
 * seção, e o teto de mono em caixa alta não cresce por eles. */
.res-aviso { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.res-aviso > div { flex: 1; min-width: 240px; line-height: 1.6; }
/* Empresa e ciclo lado a lado. O ciclo é mais largo porque o rótulo dele
   carrega data, início, status e contagem. */
.res-escolha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--e3); margin-bottom: var(--e4); }
.res-escolha .res-campo:only-child { grid-column: 1 / -1; max-width: 560px; }
@container tela (max-width: 620px) {
  .res-escolha { grid-template-columns: 1fr; }
}
.res-em-dia {
  display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e4);
  font-size: var(--f-apoio); color: var(--ok-ink);
}

.res-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--e4); }
.res-card {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  container: rescard / inline-size;
}
/* O CARTÃO DECIDE AS COLUNAS, NÃO A TELA (01.10.2026, teste da Ovelha Negra).
   Em duas colunas de cartão, cada um fica com ~380px, e as quatro células
   deixavam o rótulo "Partida" quebrado no meio ("Partid / a"). A regra da
   tela não via isso, porque a tela era larga; quem é estreito é o cartão. */
@container rescard (max-width: 460px) {
  /* `.res-card` na frente: a regra base de `.res-marcos` vem depois desta no
     arquivo, e com a mesma força ela venceria. */
  .res-card .res-marcos { grid-template-columns: repeat(2, 1fr); }
}
.res-cab h3 { margin: var(--e1) 0 0; font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
/* A tática que o indicador mede, clicável (02.10.2026): legível, e não mais
   uma linha cinza que parecia subtítulo. */
.res-tatica { margin: var(--e1) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.5; }
.res-tatica .res-link { font-size: inherit; text-align: left; }

/* ── O TOPO DE RESULTADOS: resumo e "Faça agora" (02.10.2026) ──────────── */
.res-resumo {
  display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.2fr); gap: 0; margin-bottom: var(--e4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.res-resumo > div { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3) var(--e4); border-right: 1px solid var(--border); min-width: 0; }
.res-resumo > div:last-child { border-right: 0; }
.res-resumo span { font-size: var(--f-micro); color: var(--faint-ink); }
.res-resumo b { font-size: var(--f-corpo); font-weight: 600; color: var(--ink); line-height: 1.4; }
.res-agora {
  display: flex; gap: var(--e4); align-items: flex-start; margin-bottom: var(--e6);
  padding: var(--e4) var(--e5); border-radius: var(--r-lg); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  background: var(--surface);
}
.res-agora.t-warn { border-left-color: var(--warn); background: var(--tom-warn-4); }
.res-agora.t-ok { border-left-color: var(--ok); }
.res-agora-ic { display: flex; flex: none; margin-top: 2px; color: var(--primary); }
.res-agora.t-warn .res-agora-ic { color: var(--warn-ink); }
.res-agora.t-ok .res-agora-ic { color: var(--ok-ink); }
.res-agora-txt { min-width: 0; }
.res-agora-olho { font-size: var(--f-micro); font-weight: 600; color: var(--primary); }
.res-agora.t-warn .res-agora-olho { color: var(--warn-ink); }
.res-agora.t-ok .res-agora-olho { color: var(--ok-ink); }
.res-agora h2 { margin: var(--e1) 0 0; font-size: var(--f-leitura); font-weight: 600; line-height: 1.35; color: var(--ink); }
.res-agora p { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; max-width: 68ch; }
.res-agora p b { color: var(--ink); font-weight: 600; }
.res-agora-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }

/* Os grupos de fase: o nome da fase é cabeçalho, e não um selo repetido em
   cada cartão. */
.res-fase-g + .res-fase-g { margin-top: var(--e6); }
.res-fase-t { display: flex; align-items: baseline; gap: var(--e2); margin: 0 0 var(--e3); font-size: var(--f-corpo); font-weight: 600; color: var(--ink); }
.res-fase-t span { font-size: var(--f-micro); font-weight: 400; color: var(--faint-ink); }

/* EM PREPARAÇÃO, os dias 30, 60 e 90 recuam: ainda não há cronograma, e a
   tela não deve parecer um acompanhamento que não começou. */
.res-grade.preparo .res-marco:not(:first-child) { opacity: 0.5; }

/* Chegando do Resultados para marcar o início: a data acende uma vez. */
.exec-data.foco-chegada { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--r); }

@container tela (max-width: 640px) {
  .res-resumo { grid-template-columns: minmax(0, 1fr); }
  .res-resumo > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .res-resumo > div:last-child { border-bottom: 0; }
  .res-agora { padding: var(--e4); gap: var(--e3); }
}

/* O CHAT RECOLHE COM UM FORMULÁRIO ABERTO NO CELULAR (02.10.2026): o botão
   flutuante cobria justamente o "Registrar". Fechado o formulário, ele volta. */
@media (max-width: 640px) {
  html.form-aberto .ajd[data-aberto="false"] {
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: opacity var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
  }
}

.res-marcos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.res-marco {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--e3); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-sutil);
}
.res-marco span { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.res-marco b {
  font-size: var(--f-corpo); font-weight: 600; color: var(--ink); line-height: 1.3;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.res-marco i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.35; }
.res-marco.devido { border-style: dashed; border-color: var(--warn); background: var(--surface); }
.res-marco.devido b { font-weight: 500; font-size: var(--f-apoio); color: var(--warn-ink); }
.res-marco.futuro b, .res-marco.vazio b { color: var(--faint-ink); font-weight: 400; }

.res-leitura { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.res-leitura b { color: var(--ink); font-weight: 600; }

.res-acoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: auto; }
.res-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--f-apoio); color: var(--primary);
}
.res-link:hover { text-decoration: underline; }
.res-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

.res-form {
  display: grid; gap: var(--e4); padding: var(--e4);
  border-radius: var(--r); background: var(--surface-sutil); border: 1px solid var(--border);
}
/* O valor ganha a linha inteira: o cartão tem 340px, e em três colunas o
   seletor do checkpoint cortava "Partida" em "Partid". */
.res-form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.res-form-grade .res-campo:first-child { grid-column: 1 / -1; }
.res-campo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.res-campo span { font-size: var(--f-micro); font-weight: 500; color: var(--dim-ink); }
.res-campo em { font-style: normal; color: var(--faint-ink); font-weight: 400; }
.res-campo input, .res-campo select {
  width: 100%; min-width: 0; padding: var(--e2) var(--e3);
  font: inherit; font-size: var(--f-apoio); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.res-campo input:focus-visible, .res-campo select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.res-campo input:disabled { background: var(--surface-hi); color: var(--faint-ink); }

.res-confianca { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
.res-confianca legend { margin-bottom: var(--e2); font-size: var(--f-micro); font-weight: 500; color: var(--dim-ink); }
.res-op {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e2); align-items: start;
  padding: var(--e3); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.res-op input { grid-row: span 2; margin: 3px 0 0; accent-color: var(--primary); }
.res-op b { font-size: var(--f-apoio); font-weight: 600; color: var(--ink); }
.res-op i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.45; }
.res-op:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.res-form-pe { display: flex; justify-content: flex-end; gap: var(--e2); }

.res-hist { padding-top: var(--e3); border-top: 1px solid var(--border); }
.res-hist ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.res-hist li { display: grid; gap: 2px; }
.res-hist li b { font-size: var(--f-apoio); color: var(--ink); font-variant-numeric: tabular-nums; }
.res-hist li span { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.res-hist li em { font-style: normal; font-size: var(--f-micro); color: var(--dim-ink); }
.res-hist-nota { margin: var(--e3) 0 0; font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.5; }

.res-orfas { margin-top: var(--e6); padding: var(--e5); border: 1px dashed var(--border); border-radius: var(--r-lg); }
.res-orfas h2 { margin: 0; font-size: var(--f-corpo); font-weight: 600; }
.res-orfas p { margin: var(--e2) 0 var(--e3); font-size: var(--f-apoio); color: var(--dim-ink); }
.res-orfas ul { margin: 0; padding-left: var(--e5); font-size: var(--f-apoio); color: var(--dim-ink); }

/* ── EM PLANILHA (06.10.2026) ─────────────────────────────────────────────
 * Os botões do topo andam juntos e quebram juntos; o painel de importar abre
 * logo abaixo. A conferência é uma LISTA, e não uma tabela: seis colunas não
 * cabem num celular, e a pessoa confere uma linha de cada vez. */
.pc-cab > .res-cab-acoes { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.res-imp { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
.res-imp[hidden] { display: none; }
.res-imp h2 { margin: 0; font-size: var(--f-corpo); font-weight: 600; }
.res-imp h2:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.res-imp h3 { margin: 0; font-size: var(--f-apoio); font-weight: 600; }
.res-imp-passos { margin: 0; padding-left: var(--e5); display: grid; gap: var(--e3); font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.res-imp-passos b { color: var(--ink); font-weight: 600; }
.res-imp-passos input[type="file"] { display: block; margin-top: var(--e2); max-width: 100%; font: inherit; font-size: var(--f-apoio); color: var(--ink); }
.res-imp-previa { display: grid; gap: var(--e3); }
.res-imp-previa:empty { display: none; }
.res-imp-resumo { margin: 0; font-size: var(--f-apoio); color: var(--ink); font-variant-numeric: tabular-nums; }
.res-imp-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.res-imp-linha {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e3); align-items: start;
  padding: var(--e3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.res-imp-linha > div { display: grid; gap: 2px; min-width: 0; }
.res-imp-linha b { font-size: var(--f-apoio); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.res-imp-linha span { font-size: var(--f-micro); color: var(--dim-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.res-imp-linha em { font-style: normal; font-size: var(--f-micro); color: var(--warn-ink); line-height: 1.45; }
.res-imp-linha i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); white-space: nowrap; }
.res-imp-linha .res-imp-sit {
  padding: 2px var(--e2); border-radius: var(--r); font-weight: 500; white-space: nowrap;
  background: var(--surface-hi); color: var(--dim-ink);
}
.res-imp-linha.s-nova .res-imp-sit { background: var(--tom-ok-8); color: var(--ok-ink); }
.res-imp-linha.s-recusada .res-imp-sit { background: var(--tom-warn-12); color: var(--warn-ink); }
.res-imp-linha.s-ja_registrada em { color: var(--faint-ink); }
.res-imp-acoes { display: flex; justify-content: flex-end; }
.res-imp-nada, .res-imp-erro { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); }
.res-imp-erro { color: var(--warn-ink); }

@container tela (max-width: 620px) {
  .res-imp-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .res-imp-linha .res-imp-sit { grid-column: 1 / -1; justify-self: start; }
  .res-grade { grid-template-columns: 1fr; }
  .res-card { padding: var(--e4); }
  /* Quatro colunas de número cabem até 360px; abaixo, duas por linha. */
  .res-marcos { grid-template-columns: repeat(2, 1fr); }
  .res-form-grade { grid-template-columns: 1fr; }
  .res-confianca { grid-template-columns: 1fr; }
}


/* ── ÚLTIMO RELATÓRIO ────────────────────────────────────────────────────
 * Uma linha, não um cartão grande: ela é um atalho, e um atalho que ocupa meia
 * dobra deixa de ser atalho. */
.ult {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--e5); margin-bottom: var(--e5);
  box-shadow: var(--shadow-card);
}
/* Faixa inteira desde 19.09.2026 (tela do Codex aprovada pelo dono): o selo e
   o "Ver todos" dividem a linha de cima; o relatório vem grande embaixo. */
.ult-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.ult-todos {
  display: inline-flex; align-items: center; gap: var(--e1); padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--f-apoio); font-weight: 600; color: var(--primary); cursor: pointer;
  /* Duas palavras e uma seta: no telefone o selo quebra, o link não. */
  white-space: nowrap; flex-shrink: 0;
}
.ult-todos:hover { text-decoration: underline; text-underline-offset: 3px; }
.ult-todos:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }
.ult-selo {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink);
}
.ult-linha { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
/* O ícone veste a família do relatório (`.fam-*`, as mesmas classes da
   Biblioteca): laranja no Toolbox, verde no Raio-X, azul no Plano. */
.ult-ic {
  width: 56px; height: 56px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--fam-soft, var(--primary-soft)); color: var(--fam-icone, var(--primary));
}
.ult-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e0); }
/* O NOME DA EMPRESA E O ASSUNTO DA LINHA, e estava do mesmo tamanho do resto.
   "Seu relatorio mais recente" e um cartao de uma linha so: o que a pessoa
   procura ali e de QUE empresa, e o tipo e a data vem depois, ja em 13px. Um
   degrau de escala entre os dois resolve sem mudar mais nada. */
.ult-txt b { font-family: var(--brand); font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.01em; }
.ult-txt i { font-style: normal; font-size: var(--f-corpo); color: var(--dim-ink); }
.ult-linha .btn { flex-shrink: 0; margin-left: auto; }

@container tela (max-width: 720px) {
  .pc-cab .btn { width: 100%; justify-content: center; }
  /* Empilhado, a caixa das ações volta a ocupar a faixa inteira, senão o
     botão de largura total mede só o próprio conteúdo. */
  .pc-cab > .emp-acoes { flex: 1 0 100%; align-self: stretch; }
  .jn-etapas { grid-template-columns: 1fr; gap: var(--e2); }
  .jn-cta .btn { width: 100%; justify-content: center; }
  .ult-linha .btn { width: 100%; justify-content: center; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARTÃO DA DECISÃO REGISTRADA
 *
 * É o "DECISÃO ESTRATÉGICA REGISTRADA" do `render_plan.php`, e ele substitui
 * duas sanfonas: a de escrever a decisão e a de chamar o Conselho.
 *
 * A frase é o assunto do cartão, então ela recebe o tratamento de citação:
 * fio de ouro à esquerda, itálico, corpo maior que o do texto de interface.
 * Tudo o mais no cartão é serviço para ela — o selo diz o que é, a meta diz de
 * quando é, e os botões são o que dá para fazer com ela.
 *
 * O ouro é o `--fam` da família Conselho. Ele aparece aqui, no meio de um
 * relatório laranja (Raio-X) ou roxo (Plano), justamente porque este bloco NÃO
 * é do relatório: é a sua resposta a ele.
 * ═══════════════════════════════════════════════════════════════════════════ */

.dec-card {
  --fam: var(--gold);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--e5);
  margin-bottom: var(--e3);
  box-shadow: var(--shadow-card);
}

.dec-selo {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink);
}

.dec-frase {
  margin: 0; padding: 0 0 0 var(--e4);
  border-left: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-family: var(--brand); font-size: var(--f-leitura); font-weight: 500;
  line-height: 1.55; color: var(--ink);
}

.dec-meta {
  margin-top: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink);
}

.dec-acoes {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--border);
}
.dec-acoes .nota-acao { flex: 1; min-width: 200px; }

/* O histórico fica dobrado: é o passado da decisão, e o passado não compete com
   o presente pela primeira leitura. */
.dec-hist { margin-top: var(--e4); }
.dec-hist > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center;
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink);
}
.dec-hist > summary::-webkit-details-marker { display: none; }
.dec-hist > summary::before { content: '+ '; margin-right: var(--e2); }
.dec-hist[open] > summary::before { content: '− '; }
.dec-hist > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dec-hist p {
  margin: var(--e2) 0 0; font-size: var(--f-apoio);
  color: var(--prosa); line-height: 1.6;
}
.dec-hist p span { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }

/* Reescrevendo: o cartão dá lugar ao formulário, com o mesmo selo em cima para
   a pessoa saber que continua no mesmo bloco e não numa tela nova. */
.dec-editando {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: var(--r-md);
  padding: var(--e5); margin-bottom: var(--e3); box-shadow: var(--shadow-card);
}

@container tela (max-width: 640px) {
  .dec-card, .dec-editando { padding: var(--e4); }
  .dec-frase { font-size: var(--f-corpo); padding-left: var(--e3); }
  .dec-acoes .btn { width: 100%; justify-content: center; }
}

/* No papel a decisão é conteúdo, e os botões não. */
html.modo-papel .dec-acoes { display: none; }
html.modo-papel .dec-hist { display: block; }
html.modo-papel .dec-hist > summary { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * RADAR DO FOCO TÁTICO
 *
 * O cartão do MVP: fundo em degradê azul-para-ouro quase transparente, borda
 * azul de 2px, cantos de 24px, e um halo radial que acende no hover. O gráfico
 * é grande de propósito — no MVP ele ocupa a largura inteira do painel, porque
 * uma teia pequena vira enfeite ilegível.
 * ═══════════════════════════════════════════════════════════════════════════ */

.foco-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: var(--e4);
  padding: var(--e5) var(--e5) var(--e6);
  margin-bottom: var(--e5);
  border-radius: var(--r-lg);
  background: var(--tom-primario-4);
  border: 2px solid var(--tom-primario-12);
  transition: box-shadow 0.5s var(--curva), border-color 0.5s var(--curva), transform 0.5s var(--curva);
}
.foco-card:hover {
  box-shadow: 0 20px 50px var(--tom-primario-12);
  border-color: var(--tom-primario-25);
  transform: translateY(-1px);
}

.foco-halo {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5; transition: opacity 0.7s var(--curva);
  background: var(--tom-primario-4);
}
.foco-card:hover .foco-halo { opacity: 1; }

.foco-tela { width: 100%; max-width: 720px; position: relative; z-index: 1; }
.foco-tela canvas { width: 100%; height: auto; display: block; }

.foco-txt { width: 100%; position: relative; z-index: 1; }

.foco-selo {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4); margin-bottom: var(--e4);
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--tom-primario-8); color: var(--primary);
  border: 1px solid var(--tom-primario-12);
  transition: background var(--t-medio) var(--curva), color var(--t-medio) var(--curva);
}
.foco-selo:hover { background: var(--impacto-fundo); color: #fff; }

@keyframes foco-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.foco-ponto {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px currentColor; animation: foco-pulsa var(--t-pulso-urgente) infinite;
}
@media (prefers-reduced-motion: reduce) { .foco-ponto { animation: none; } }

.foco-txt h3 {
  font-size: var(--f-heroi); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 var(--e3); text-wrap: balance;
}
.foco-txt h3 span { color: var(--primary); }
.foco-txt p { font-size: var(--f-corpo); color: var(--prosa); line-height: 1.7; margin: 0; }
.foco-txt p b { color: var(--ink); font-weight: 600; }

@container tela (max-width: 720px) {
  .foco-card { padding: var(--e4); gap: var(--e4); border-radius: var(--r-lg); }
  .foco-txt h3 { font-size: var(--f-secao); }
  .foco-txt p { font-size: var(--f-corpo); }
}

/* No papel a teia entra, mas sem o halo nem o hover: PDF não tem cursor. */
html.modo-papel .foco-card { border-width: 1px; box-shadow: none; transform: none; }
html.modo-papel .foco-halo { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * AÇÃO RÁPIDA E A GAVETA DO ARSENAL
 *
 * Dois cartões no rodapé da Visão Geral, lado a lado, como no MVP: um gera, o
 * outro explica. O segundo abre uma gaveta que desliza da direita.
 *
 * A gaveta é ouro no topo (fio em degradê e o ícone da bússola), e o ouro aqui
 * não é decoração: é a cor do "acervo" no sistema, a mesma do Conselho e da
 * decisão registrada. O azul é ação, o ouro é o que se consulta.
 * ═══════════════════════════════════════════════════════════════════════════ */

.acao-rapida {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e3); margin-top: var(--e5);
}
/* E AQUI, DEPOIS DA BASE, e não junto do bento lá em cima.
   A regra estava escrita ao lado de `.bento-a { grid-column: 1/-1 }`, que é
   onde ela se explica — e não valia um pixel: `.acao-rapida { margin-top }`
   mora mil linhas abaixo, com o mesmo peso, e vencia por ordem. Medido a
   1000px: os vãos saíam 16, 16, 16 e 24. Base primeiro, exceção depois. */
@media (max-width: 1040px) {
  .bento { margin-bottom: var(--e4); }
  .acao-rapida { margin-top: var(--e4); }
}

.ar-cartao {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: var(--e5); min-height: 76px;
  /* A borda em azul muito claro acompanha a luz de família (ver A LUZ DE
     FAMÍLIA NOS CARTÕES, no fim do arquivo). */
  background: var(--surface); border: 1px solid var(--tom-primario-12); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: box-shadow var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}
.ar-cartao:hover { box-shadow: var(--shadow-hover); border-color: var(--primary-line); transform: translateY(-1px); }
.ar-cartao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ar-ic {
  width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ar-ic.p { background: var(--primary-soft); color: var(--primary); }
.ar-ic.g { background: var(--tom-ouro-12); color: var(--gold-ink); }

.ar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.ar-txt b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; }
.ar-txt i { font-style: normal; font-size: var(--f-apoio); color: var(--dim-ink); }
.ar-seta { color: var(--faint-ink); flex-shrink: 0; transition: transform var(--t-rapido) var(--curva); }
.ar-cartao:hover .ar-seta { transform: translateX(3px); }

/* ── a gaveta ────────────────────────────────────────────────────────────── */

/* Também é um `<dialog>`. Mesmos resets, mesma razão. A gaveta desliza pela
 * classe `.aberto`, então aqui o `display` não é `flex`; ainda assim a regra
 * do estado fechado fica explícita. */
/* ⚠️ `width` e `height` explícitos, e não só `max-*`.
 *
 * O navegador dá `width: fit-content` a todo `<dialog>`, e o painel da gaveta é
 * `position: absolute`, ou seja, não conta como conteúdo. Resultado medido: a
 * gaveta abria com largura ZERO e nada aparecia na tela. `inset: 0` sozinho não
 * resolve porque o `fit-content` vence na hora de calcular a largura. */
dialog.ars-fundo {
  border: 0; margin: 0; padding: 0; color: inherit;
  width: 100%; height: 100%; max-width: none; max-height: none;
}
dialog.ars-fundo:not([open]) { display: none; }
.ars-fundo::backdrop { background: transparent; }
.ars-fundo {
  position: fixed; inset: 0; z-index: 9998;
  /* O painel comeca em translateX(100%), ou seja, FORA da tela pela direita.
     Sem este clip ele conta como conteudo do documento durante o deslize e
     pode esticar a largura rolavel, que e exatamente o pulo lateral que a
     trava de rolagem existe para evitar. Recortar no fundo fixo custa nada. */
  overflow: hidden;
  background: var(--tom-sombra-4);
  transition: background var(--t-medio) var(--curva);
}
.ars-fundo.aberto { background: var(--tom-sombra-50); }

.ars-painel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg); box-shadow: -24px 0 60px -12px var(--tom-sombra-25);
  transform: translateX(100%);
  transition: transform var(--t-medio) var(--curva);
}
.ars-fundo.aberto .ars-painel { transform: none; }

.ars-topo {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e5) var(--e5); background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* O fio de ouro no topo. É o único adorno da gaveta, e ele diz "acervo". */
.ars-fio {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
}
.ars-marca {
  width: 46px; height: 46px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tom-ouro-8); border: 1px solid var(--tom-ouro-25);
  color: var(--gold-ink);
}
.ars-tit { flex: 1; min-width: 0; }
.ars-tit h2 { font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.ars-tit p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e0) 0 0; }
.ars-x {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-hi); border: 1px solid var(--border);
  color: var(--dim-ink); cursor: pointer;
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.ars-x:hover { background: var(--border); color: var(--ink); }
.ars-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ars-corpo { flex: 1; overflow-y: auto; padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); }

.ars-item {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.ars-item:hover { border-color: var(--primary-line); box-shadow: var(--shadow-card); }
/* O previsto é visivelmente mais fraco e não tem botão: prometer botão que não
   clica é pior que não mostrar o motor. */
.ars-item.previsto { background: transparent; border-style: dashed; opacity: 0.72; }
.ars-item.previsto:hover { border-color: var(--border); box-shadow: none; }

.ars-ic {
  width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.ars-item.previsto .ars-ic { background: var(--surface-hi); color: var(--faint-ink); }

.ars-txt { flex: 1; min-width: 0; }
.ars-cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e2); }
.ars-cab b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; }
.ars-txt p { font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6; margin: 0; }
.ars-quando { margin-top: var(--e2) !important; color: var(--faint-ink) !important; }
.ars-txt .btn { margin-top: var(--e3); }

.ars-div {
  margin-top: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint-ink);
}

@media (prefers-reduced-motion: reduce) {
  .ars-painel, .ars-fundo { transition: none; }
}

@container tela (max-width: 560px) {
  .ars-painel { width: 100%; }
  .ars-corpo { padding: var(--e4); }
  .ars-topo { padding: var(--e5); gap: var(--e3); }
}

/* Os nomes das ferramentas do Toolbox, como pastilhas dentro do cartão. Três
   cartões idênticos com a mesma frase viravam volume sem informação. */
.ars-nomes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.ars-nomes span {
  padding: var(--e1) var(--e2); border-radius: var(--r-pill);
  background: var(--surface-hi); border: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.04em; color: var(--dim-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PLANO TÁTICO — a réplica do `render_plan.php`
 *
 * Tudo aqui saiu dos prints, e o que muda em relação ao que eu tinha está
 * comentado no ponto onde muda. As três decisões que atravessam o arquivo:
 *
 *  1. CABEÇALHO DE SEÇÃO EM TRÊS ANDARES: olho em mono azul com o número fixo,
 *     título de display grande, linha de apoio em cinza. Eu tinha só olho e
 *     apoio, e sem o título o bloco começava sem nome.
 *  2. COR SEMÂNTICA, NÃO DECORATIVA: vermelho é dor, verde é ganho, ouro é o
 *     que a empresa afirma, azul é o que o sistema analisou.
 *  3. NÚMERO À DIREITA: todo par rótulo-valor alinha o valor à direita, em
 *     negrito. É o que permite varrer a coluna sem ler os rótulos.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERÓI ────────────────────────────────────────────────────────────── */

.plano .h1-frase {
  font-size: clamp(var(--f-heroi), 5vw, 48px);
  line-height: 1.08; letter-spacing: -0.035em; font-weight: 600;
  margin: 0 0 var(--e4); text-wrap: balance;
}
.plano .h1-frase span { color: inherit; }
.gira-180 { transform: rotate(180deg); }

/* ── 2. CARTÃO DE LEITURA ────────────────────────────────────────────────── */

.lm-pe .btn { flex-shrink: 0; }

/* ── 3. FAIXA DE QUATRO MÉTRICAS ─────────────────────────────────────────── */

/* ── A FAIXA DE NÚMEROS DO RELATÓRIO ─────────────────────────────────────
 * UMA faixa contínua, e não N cartões soltos.
 *
 * Era uma grade `auto-fit` de cartões com sombra. O comentário antigo já
 * registrava a briga: baixaram o mínimo de 215 para 178px porque "a quarta
 * célula caía sozinha para a linha de baixo". Isso resolve numa largura e
 * volta na seguinte — é a grade que está errada, não o número.
 *
 * Numa faixa contínua com divisórias, três, quatro ou dois números cabem
 * sempre, sem órfão em largura nenhuma. E ela lê como um painel de
 * instrumentos, que é o que é: os números de UM documento, não N cartões
 * independentes.
 * ─────────────────────────────────────────────────────────────────────── */
.faixa-kpi {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin-bottom: var(--e5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden;
}
.faixa-kpi .kpi-c { padding: var(--e4) var(--e5); border-right: 1px solid var(--border); }
.faixa-kpi .kpi-c:last-child { border-right: 0; }
.faixa-kpi .kpi-r {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 500; color: var(--dim-ink);
  margin-bottom: var(--e2);
}
.faixa-kpi .kpi-n {
  font-family: var(--brand); font-size: var(--f-tela); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.faixa-kpi .kpi-a { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e2); }

@container tela (max-width: 760px) {
  /* No tablet os quatro viram um QUADRANTE, dois a dois: quatro cartões
     empilhados comiam a dobra inteira. No celular, um por linha. */
  .faixa-kpi { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .faixa-kpi .kpi-c { border-bottom: 1px solid var(--border); }
  .faixa-kpi .kpi-c:nth-child(2n) { border-right: 0; }
  .faixa-kpi .kpi-c:nth-last-child(-n + 2) { border-bottom: 0; }
}
/* `minmax(0, 1fr)` e não `1fr` (02.10.2026, ronda de texto espremido): `1fr`
   não deixa a coluna ficar menor que o item mais largo, e a linha da lista do
   KPI não quebra, por desenho (reticências). A 375px o cartão media 358px
   dentro de uma faixa de 327px, e a borda cortava o texto no meio da letra. */
@container tela (max-width: 420px) {
  .faixa-kpi { grid-template-columns: minmax(0, 1fr); }
  .faixa-kpi .kpi-c { border-right: 0; border-bottom: 1px solid var(--border); padding: var(--e3) var(--e4); }
  .faixa-kpi .kpi-c:last-child { border-bottom: 0; }
}

/* O QUADRANTE DO PLANO VEM MAIS CEDO (01.10.2026, pedido do dono olhando o
   tablet deitado). A faixa do Plano tem instrumento em cada célula (régua,
   barras por fase, pontos, lista de oportunidades), e com quatro lado a lado
   numa área de uns 1.000px a célula de Oportunidades, que tem frase comprida,
   tomava a largura das outras: "Saudável com um gargalo" quebrava e a régua
   apertava. O quadrante entra aqui a 1.100px; o admin e o Manual, de células
   simples, continuam na regra de 760. `minmax(0, 1fr)` deixa as quatro iguais
   em vez de a mais falante ganhar.
   O bloco de 420 repete o `.plano` de propósito: sem ele, este seletor, mais
   específico, venceria a regra de uma coluna e o celular ficaria em dois. */
@container tela (max-width: 1100px) {
  .plano .faixa-kpi { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .plano .faixa-kpi .kpi-c { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .plano .faixa-kpi .kpi-c:nth-child(2n) { border-right: 0; }
  .plano .faixa-kpi .kpi-c:nth-last-child(-n + 2) { border-bottom: 0; }
}
@container tela (max-width: 420px) {
  .plano .faixa-kpi { grid-template-columns: minmax(0, 1fr); }
  .plano .faixa-kpi .kpi-c { border-right: 0; border-bottom: 1px solid var(--border); }
  .plano .faixa-kpi .kpi-c:last-child { border-bottom: 0; }
}

.kpi-fases { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.kf { display: flex; align-items: center; gap: var(--e2); }
.kf-r {
  font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink);
  white-space: nowrap; min-width: 44px;
}
.kf-t { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--surface-hi); overflow: hidden; }
.kf-t > span { display: block; height: 100%; background: var(--ok); border-radius: var(--r-pill); transition: width 0.6s var(--curva); }
.kf b { font-family: var(--mono); font-size: var(--f-micro); color: var(--ok-ink); min-width: 32px; text-align: right; }

/* ── A FAIXA DO PLANO COM INSTRUMENTO (18.09.2026) ─────────────────────────
 * Ver `faixaKpi` em plano.js. Escopo `.plano`: a mesma `.faixa-kpi` serve o
 * admin e o Manual, e lá ela continua sóbria. Cada célula define o seu tom
 * em três variáveis, e o resto (ícone, rótulo, régua, pontos, lavagem) só lê
 * delas, então uma célula nova é uma linha de tom e nada mais. */
.plano .faixa-kpi .kpi-c {
  --tom: var(--dim-ink); --tom-ink: var(--dim-ink); --tom-lav: transparent;
  display: flex; flex-direction: column;
  background-image: linear-gradient(180deg, var(--tom-lav), transparent 75%);
}
.plano .faixa-kpi .t-ok    { --tom: var(--ok);     --tom-ink: var(--ok-ink);     --tom-lav: var(--tom-ok-4); }
.plano .faixa-kpi .t-warn  { --tom: var(--warn);   --tom-ink: var(--warn-ink);   --tom-lav: var(--tom-warn-4); }
.plano .faixa-kpi .t-risco { --tom: var(--danger); --tom-ink: var(--danger-ink); --tom-lav: var(--tom-danger-4); }
.plano .faixa-kpi .t-fam   { --tom: var(--fam);    --tom-ink: var(--primary);    --tom-lav: var(--fam-soft); }
.plano .faixa-kpi .t-gold  { --tom: var(--gold);   --tom-ink: var(--gold-ink);   --tom-lav: var(--tom-ouro-4); }

.kpi-topo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); min-width: 0; }
.kpi-ic {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  color: var(--tom-ink); background: color-mix(in srgb, var(--tom) 13%, transparent);
}
.plano .faixa-kpi .kpi-r {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600;
  color: var(--tom-ink);
  margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plano .faixa-kpi .kpi-n b { font-weight: inherit; }
.kpi-suf {
  font-family: var(--body); font-size: var(--f-corpo); font-weight: 500;
  letter-spacing: 0; color: var(--faint-ink); margin-left: var(--e0);
}

/* A régua do score: as dez marcas do anel da capa, deitadas. */
.kpi-regua { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin-top: var(--e3); }
.kpi-regua i { height: 6px; border-radius: 2px; background: var(--surface-hi); }
.kpi-regua i.on { background: var(--tom); }

/* Um ponto por tática, agrupado por fase. */
.kpi-pontos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e3); }
.kp-fase { display: flex; flex-wrap: wrap; gap: var(--e1); }
.kp-fase + .kp-fase { padding-left: var(--e3); border-left: 1px solid var(--border); }
.kpi-pontos i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tom) 40%, transparent);
}
.kpi-pontos i.and { border-color: var(--tom); background: linear-gradient(90deg, var(--tom) 50%, transparent 50%); }
.kpi-pontos i.ok { border-color: var(--tom); background: var(--tom); }

/* As barras de fase na célula de execução ficam mais encorpadas aqui. */
.plano .faixa-kpi .kf-t { height: 6px; background: var(--tom-ok-12); }
.plano .faixa-kpi .kf-t > span { background: var(--ok); }

/* As primeiras oportunidades, uma linha cada. */
.kpi-lista { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.kpi-lista li {
  position: relative; padding-left: var(--e3);
  font-size: var(--f-micro); line-height: 1.45; color: var(--dim-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-lista li::before {
  content: ''; position: absolute; left: 1px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--tom);
  transform: translateY(-50%) rotate(45deg);
}
.kpi-lista li.mais { color: var(--faint-ink); }
.kpi-lista li.mais::before { display: none; }

/* ── 4. CABEÇALHO DE SEÇÃO ───────────────────────────────────────────────── */

/* 48px entre seções, não 32. Com abas, cada painel tem duas ou três seções, e
   32px as deixava lidas como um bloco só de subtítulos. */
.plano .sec { margin-bottom: var(--e7); }
.plano .sec:last-child { margin-bottom: 0; }

.sec-cab { margin-bottom: var(--e4); }
.sec-olho {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--e2);
}
.sec-cab h2 {
  font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.15; margin: 0; text-wrap: balance;
}
.sec-cab p { font-size: var(--f-corpo); color: var(--dim-ink); margin: var(--e2) 0 0; line-height: 1.6; }

/* ── 5. LINHA RÓTULO/VALOR ───────────────────────────────────────────────── */

.linhas { margin-top: var(--e4); border-top: 1px solid var(--border); }
.linha {
  display: flex; align-items: baseline; gap: var(--e4);
  padding: var(--e3) 0; border-bottom: 1px solid var(--border);
}
.linha:last-child { border-bottom: 0; }
.linha-r {
  display: inline-flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.linha-v { flex: 1; text-align: right; font-size: var(--f-apoio); font-weight: 600; color: var(--ink); line-height: 1.55; }

/* ── 6. ANÁLISE COGNITIVA ────────────────────────────────────────────────── */

.cog { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); margin-bottom: var(--e4); }
.cog-col { min-width: 0; display: flex; flex-direction: column; gap: var(--e3); }
.cog-t {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600;
}
.cog-t.tom-risco { color: var(--danger-ink); }
.cog-t.tom-ok { color: var(--ok-ink); }

/* Cada frase num cartão com barra lateral. Como lista com marcador, elas
   pesavam o mesmo que uma enumeração qualquer; são o diagnóstico condensado. */
.cog-item {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65;
}
.cog-item > span:first-child { flex-shrink: 0; font-weight: 600; font-size: var(--f-corpo); line-height: 1.35; }
.cog-item.tom-risco { border-left: 3px solid var(--danger); }
.cog-item.tom-risco > span:first-child { color: var(--danger); }
.cog-item.tom-ok { border-left: 3px solid var(--ok); }
.cog-item.tom-ok > span:first-child { color: var(--ok-ink); }

.restricao {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e4) 20px; margin-top: var(--e3); border-radius: var(--r);
  background: var(--tom-danger-4); border: 1px solid var(--tom-danger-18);
}
.rest-ic {
  width: 32px; height: 32px; border-radius: var(--r-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tom-danger-12); color: var(--danger-ink);
}
.rest-r {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--danger-ink);
  margin-bottom: var(--e1);
}
.restricao p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }

/* ── 7. PROPOSTA DE VALOR ────────────────────────────────────────────────── */

/* O OURO é o que a empresa afirma sobre si. É a única coisa dourada da aba, e
   por isso ela é lida como declaração e não como mais uma análise. */
.decl {
  padding: var(--e5); border-radius: var(--r-md); margin-bottom: var(--e4);
  background: var(--tom-ouro-4);
  border: 1px solid var(--tom-ouro-25); border-left: 3px solid var(--gold);
}
.decl-cab {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; color: var(--gold-ink);
}
.decl p { margin: 0; font-size: var(--f-corpo); line-height: 1.75; color: var(--ink); }

.narrativa {
  padding: var(--e5); border-radius: var(--r-md); margin-bottom: var(--e4);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.narrativa p { font-size: var(--f-corpo); color: var(--prosa); line-height: 1.8; }

.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e3); }
.pilar {
  padding: var(--e4) 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.pilar-cab {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2);
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600;
}
.pilar-cab svg { color: var(--primary); }
.pilar p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }

/* ── 8. CANVAS DE VALOR ──────────────────────────────────────────────────── */

.canvas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); align-items: start; }
.cv-col { min-width: 0; display: flex; flex-direction: column; gap: var(--e3); }
.cv-titulo {
  display: flex; align-items: center; gap: var(--e2); padding-bottom: var(--e2);
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; color: var(--dim-ink);
}

.cv-caixa { padding: var(--e4); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
.cv-cab {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  font-family: var(--brand); font-size: var(--f-apoio); font-weight: 600;
}
.cv-caixa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.cv-caixa li {
  display: flex; align-items: flex-start; gap: var(--e2);
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6;
}
.cv-caixa li > span { flex-shrink: 0; font-weight: 600; line-height: 1.45; }

/* As cinco cores do Canvas. Sem elas não dá para ver, de relance, qual dor tem
   um aliviador na frente, que é a única leitura que o Canvas permite. */
.cv-neutro { border-color: rgba(100, 116, 139, 0.28); background: rgba(100, 116, 139, 0.03); }
.cv-neutro .cv-cab, .cv-neutro li > span { color: #475569; }
.cv-dor { border-color: var(--tom-danger-25); background: var(--tom-danger-4); }
.cv-dor .cv-cab, .cv-dor li > span { color: var(--danger-ink); }
.cv-ganho { border-color: var(--tom-ok-25); background: var(--tom-ok-4); }
.cv-ganho .cv-cab, .cv-ganho li > span { color: var(--ok-ink); }
.cv-alivio { border-color: var(--tom-warn-35); background: var(--tom-warn-4); }
.cv-alivio .cv-cab, .cv-alivio li > span { color: var(--warn-ink); }
.cv-cria { border-color: var(--tom-primario-25); background: var(--tom-primario-4); }
.cv-cria .cv-cab, .cv-cria li > span { color: var(--primary); }

/* ── 9. OPORTUNIDADES ────────────────────────────────────────────────────── */

.opo {
  border-radius: var(--r); margin-bottom: var(--e3); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ok);
  transition: box-shadow var(--t-rapido) var(--curva);
}
.opo[open] { box-shadow: var(--shadow-card); }
.opo > summary {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) 20px; cursor: pointer; list-style: none; min-height: 44px;
}
.opo > summary::-webkit-details-marker { display: none; }
.opo > summary:focus-visible { outline: 2px solid var(--ok); outline-offset: -2px; }
.opo-txt { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--e1); }
.opo-txt b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; }
/* A descrição fica em UMA linha cortada enquanto fechado: o cartão é um índice
   ali, e um índice de três linhas deixa de ser índice. */
.opo-txt i {
  font-style: normal; font-size: var(--f-apoio); color: var(--dim-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opo[open] .opo-txt i { white-space: normal; }
.opo-seta { flex-shrink: 0; color: var(--faint-ink); transition: transform var(--t-medio) var(--curva); }
.opo[open] .opo-seta { transform: rotate(90deg); }
.opo-corpo { padding: 0 20px var(--e4); }

/* A nota em estrelas: cinco cartões com a palavra "Alto" se parecem; cinco com
   quatro e cinco estrelas se ordenam sozinhos. */
/* `flex-shrink: 1` e `max-width`, não `flex-shrink: 0`. O selo é um selo, mas
   um selo que não encolhe empurra o título para fora da linha quando o texto
   dentro dele é maior do que se esperava. */
.roi {
  display: inline-flex; align-items: center; gap: var(--e2);
  flex-shrink: 1; max-width: 45%; overflow: hidden;
  padding: var(--e2) var(--e3); border-radius: var(--r-pill);
  background: var(--tom-ok-8); border: 1px solid var(--tom-ok-18);
  color: var(--ok-ink); font-size: var(--f-micro); letter-spacing: 0.06em;
}
.roi > span { color: var(--gold); letter-spacing: 0.08em; }
.roi b { font-family: var(--mono); font-weight: 600; }

/* ── 10. RECURSOS ────────────────────────────────────────────────────────── */

.rec-t {
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600;
  margin: var(--e5) 0 var(--e3);
}
.rec-t:first-child { margin-top: 0; }

.rec-linha {
  border-radius: var(--r); margin-bottom: var(--e2); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
}
.rec-linha > summary,
.rec-linha.estatica {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); min-height: 52px;
  list-style: none; cursor: pointer;
}
.rec-linha.estatica { cursor: default; align-items: flex-start; }
.rec-linha > summary::-webkit-details-marker { display: none; }
.rec-linha > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rec-linha b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; }
.rec-linha.estatica > div { flex: 1; min-width: 0; }
.rec-linha.estatica p { margin: var(--e1) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); }
.rec-linha > p { margin: 0; padding: 0 var(--e4) var(--e4); font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }

.rec-ded {
  padding: var(--e1) var(--e2); border-radius: var(--r-xs);
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro);
}
/* O custo em mono e verde, à direita: a coluna de dinheiro é lida em varredura
   vertical, e monoespaçada ela soma no olho. */
.rec-custo {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-size: var(--f-apoio); color: var(--ok-ink);
  text-align: right;
}
.rec-seta { flex-shrink: 0; color: var(--faint-ink); transition: transform var(--t-medio) var(--curva); }
.rec-linha[open] .rec-seta { transform: rotate(90deg); }
/* NO ESTREITO, A LINHA VIRA TRÊS (02.10.2026, ronda de texto espremido). A
   375px de tela, nome, dedicação, custo e seta numa linha só davam 91px para
   a dedicação, sete linhas de 11 letras, e o custo, que não encolhe, saía
   cortado pela direita ("Pró-"). Aqui o nome fica com a seta, a dedicação
   desce para a largura toda e o custo vem embaixo dela. */
@container tela (max-width: 560px) {
  .rec-linha > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--e2); }
  .rec-linha > summary > b { grid-column: 1; grid-row: 1; }
  .rec-linha > summary > .rec-seta { grid-column: 2; grid-row: 1; }
  .rec-linha > summary > .rec-ded { grid-column: 1 / -1; justify-self: start; }
  .rec-linha > summary > .rec-custo { grid-column: 1 / -1; margin-left: 0; text-align: left; }
  .rec-linha.estatica { flex-wrap: wrap; }
  .rec-linha.estatica > div { flex: 1 1 200px; }
  .rec-linha.estatica > .rec-custo { margin-left: 0; flex-shrink: 1; text-align: left; }
}

.orc {
  margin-top: var(--e5); padding: var(--e5); border-radius: var(--r-md);
  background: var(--tom-ok-4);
  border: 1px solid var(--tom-ok-18); border-left: 3px solid var(--ok);
}
.orc-cab {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e4);
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; color: var(--ok-ink);
}
.orc-r {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
}
.orc-v {
  font-family: var(--brand); font-size: var(--f-tela); font-weight: 600;
  letter-spacing: -0.03em; margin: 6px 0 var(--e4);
}
.orc-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e3); }
.orc-meses > div {
  padding: var(--e3) var(--e4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.orc-meses span {
  display: block; margin-bottom: var(--e1);
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.orc-meses b { font-size: var(--f-apoio); font-weight: 600; line-height: 1.5; }
.orc-nota {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: var(--e4) 0 0; padding: var(--e3) var(--e4);
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--border);
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6;
}
.orc-nota svg { flex-shrink: 0; margin-top: var(--e0); color: var(--faint-ink); }

/* ── 11. EXECUÇÃO (barra e âncora) ───────────────────────────────────────── */

.exec-barra, .exec-ancora {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.exec-barra { margin-bottom: var(--e2); }
.exec-r, .exec-ancora label {
  display: inline-flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
}
.exec .barra-exec {
  flex: 1; min-width: 120px; height: 6px; border-radius: var(--r-pill);
  background: var(--surface-hi); overflow: hidden; display: block;
}
.exec .barra-preenche { display: block; height: 100%; background: var(--fam); border-radius: var(--r-pill); transition: width 0.6s var(--curva); }
.exec-barra b { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; color: var(--ink); }
.exec-frac { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.exec-barra .btn { margin-left: auto; }
/* Largura fixa: sem ela o `<input type=date>` estica com `flex: auto` e empurra
   a nota para a linha de baixo, virando três linhas onde o MVP tem uma. */
.exec-nota { flex: 1; min-width: 180px; }
.exec-nota { font-size: var(--f-apoio); color: var(--dim-ink); }
.exec-vazio { padding: var(--e4); border-radius: var(--r); background: var(--surface-hi); font-size: var(--f-apoio); color: var(--dim-ink); }

/* ── 12. FASES NA LINHA DO TEMPO ─────────────────────────────────────────── */

.fases { position: relative; padding-left: var(--e5); margin-top: var(--e5); }
/* A espinha: sem ela, três cartões empilhados não dizem que há uma ordem. */
.fases::before {
  content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px;
  background: var(--border);
  border-radius: var(--r-pill);
}
.fase { position: relative; margin-bottom: var(--e4); }
.fase-ponto {
  position: absolute; left: -26px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fam); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--fam);
}
.fase.t-fam { --fam: var(--primary); --fam-text: var(--primary); }
.fase.t-warn { --fam: var(--warn); --fam-text: var(--warn-ink); }
.fase.t-ok { --fam: var(--ok); --fam-text: var(--ok-ink); }

.fase .fase-card {
  padding: var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--fam); box-shadow: var(--shadow-card);
}
.fc-olho { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.fc-selo {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fam) 12%, transparent); color: var(--dim-ink);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.fc-dias { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); letter-spacing: 0.08em; }
.fc-budget { margin-left: auto; text-align: right; }
.fc-budget span {
  display: block; font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.fc-budget b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; }
.fase .fase-card h3 { font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--e2); }
.fc-foco { font-size: var(--f-apoio); color: var(--prosa); line-height: 1.7; margin: 0 0 var(--e4); }
.fc-meta {
  padding: var(--e3) var(--e4); border-radius: var(--r); margin-bottom: var(--e4);
  background: var(--surface-hi);
}
.fc-meta span {
  display: block; margin-bottom: var(--e1);
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.fc-meta p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6; }

/* A PORTA DA FASE. Sem caixa preenchida, para não competir com a meta logo
   abaixo: o que a separa do texto corrido é o fio à esquerda e o ícone. Ela é
   condição de entrada, então lê-se antes e pesa menos. */
.fc-porta {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding-left: var(--e3); margin-bottom: var(--e4);
  border-left: 2px solid var(--border);
}
.fc-porta svg { flex: none; margin-top: 2px; color: var(--faint-ink); }
.fc-porta span {
  display: block; margin-bottom: var(--e1);
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.fc-porta p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6; }

/* ── 12b. POR ONDE COMEÇAR, E A TRILHA DAS FASES ─────────────────────────
 *
 * Os dois blocos nasceram do mesmo achado: o plano estava completo e ilegível.
 * Ver o cabeçalho de `blocoComeco`, em `plano.js`, para o caso.
 *
 * A REGRA DE COR: o cartão de começo usa a cor da FASE a que a tática
 * pertence, e não uma cor própria. Quem está na fase 2 vê o mesmo âmbar no
 * cartão do topo e no cartão da fase lá embaixo, e isso é o que diz, sem
 * texto, que são a mesma coisa vista de dois jeitos.
 * ───────────────────────────────────────────────────────────────────────── */

.comeco { --fam: var(--primary); }
.comeco.t-warn { --fam: var(--warn); }
.comeco.t-ok { --fam: var(--ok); }

.comeco {
  padding: var(--e5); margin-bottom: var(--e3);
  border: 1px solid var(--border); border-left: 3px solid var(--fam);
  border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card);
}
/* O selo, a linha do olho e a faixa de dias sao os MESMOS da fase: o cartao de
   comeco e a mesma tatica vista de outro lugar, e reusar a peca e o que diz
   isso sem texto. `.fc-selo`, `.fc-olho` e `.fc-dias` ficam na secao 12. */
/* A posição na fila é um número, não uma frase: "3/16" cabe no canto e diz o
   tamanho do caminho sem ocupar uma linha para isso. */
.cm-pos { margin-left: auto; font-family: var(--mono); font-size: var(--f-corpo); font-weight: 600; color: var(--ink); }
.cm-pos span { color: var(--faint-ink); font-weight: 400; }

.comeco .cm-titulo {
  font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.25; margin: 0 0 var(--e2);
}
.cm-obj { font-size: var(--f-apoio); color: var(--prosa); line-height: 1.7; margin: 0 0 var(--e4); }
/* O atraso da tática (lote 1, 18.09.2026): o mesmo âmbar do `.aviso.ap`,
   porque é o mesmo tipo de coisa, um aviso que pede atenção sem ser erro. */
.cm-atraso {
  font-size: var(--f-apoio); line-height: 1.6; color: var(--warn-ink);
  background: var(--tom-warn-8); border: 1px solid var(--tom-warn-25);
  border-radius: var(--r-xs); padding: var(--e2) var(--e3); margin: 0 0 var(--e3);
}
.cm-quem { margin: var(--e4) 0 0; font-size: var(--f-apoio); color: var(--prosa); }
.cm-quem span {
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
  margin-right: var(--e2);
}
.cm-pe {
  display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
  margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--border);
}
.cm-pe .cm-ir { margin-left: auto; }
/* Concluído não se aplica ao cartão de começo (a tática sai dele ao ser
   concluída), mas "em andamento" sim: o contorno diz que o relógio corre. */
.comeco.est-em_andamento { border-color: var(--warn); border-left-color: var(--fam); }
.comeco.feito { border-left-color: var(--ok); }

/* ── A trilha ───────────────────────────────────────────────────────────── */

.trilha { margin-top: var(--e5); }
.tr-nav { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: stretch; margin-bottom: var(--e4); }
.tr-btn {
  flex: 1 1 160px; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: var(--e0);
  padding: var(--e3) var(--e4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--border);
  cursor: pointer; transition: border-color var(--t-medio) var(--curva), background var(--t-medio) var(--curva);
}
.tr-btn:hover { background: var(--surface-hi); }
.tr-btn.t-fam { --fam: var(--primary); }
.tr-btn.t-warn { --fam: var(--warn); }
.tr-btn.t-ok { --fam: var(--ok); }
.tr-btn.on { border-top-color: var(--fam); background: var(--surface-hi); }
.tr-n {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--body); font-size: var(--f-corpo); font-weight: 600; color: var(--ink);
}
.tr-d { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); letter-spacing: 0.08em; }
.tr-c { font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink); }
.tr-c:empty { display: none; }
.tr-todas {
  flex: 0 0 auto; align-self: center;
  padding: var(--e2) var(--e3); border-radius: var(--r);
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--body); font-size: var(--f-apoio); color: var(--dim-ink);
}
.tr-todas:hover { border-color: var(--border); color: var(--ink); }

/* No celular as tres fases empilham e o "ver as tres" ficava dividindo a
   ultima linha com a Fase 3, que saia menor que as outras duas. Linha
   propria: a fila de fases fica com tres degraus do mesmo tamanho. */
@media (max-width: 560px) {
  .tr-todas { flex: 1 0 100%; align-self: stretch; text-align: left; }
}

/* Com uma fase à vista, a espinha vertical liga um ponto só: ela volta quando
   as três aparecem juntas, que é quando ela tem o que ligar. */
.trilha:not(.todas) .fases::before { display: none; }
.trilha:not(.todas) .fases { padding-left: 0; }
.trilha:not(.todas) .fase-ponto { display: none; }
.trilha .fases { margin-top: 0; }

/* ── O guia de três caminhos ────────────────────────────────────────────── */

.guia-caminhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4); }
.gc { display: flex; gap: var(--e3); align-items: flex-start; }
.gc-ic { flex: none; color: var(--faint-ink); margin-top: var(--e0); }
.gc-txt b { display: block; font-size: var(--f-corpo); font-weight: 600; margin-bottom: var(--e1); }
.gc-txt p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }
.gc-nota {
  margin: var(--e4) 0 0; padding-top: var(--e3); border-top: 1px solid var(--border);
  font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.65;
}

/* ── 13. CHECKLIST ───────────────────────────────────────────────────────── */

.hip {
  padding: var(--e5); border-radius: var(--r-md); margin-bottom: var(--e3);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.hip-cab { display: flex; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e4); }
/* "H1" transforma uma lista de frases num conjunto de EXPERIMENTOS: quem
   executa passa a dizer "a H2 falhou", e isso a lista sem número não permite. */
.hip-n {
  flex-shrink: 0; min-width: 34px; height: 30px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--mono); font-size: var(--f-apoio); font-weight: 600;
}
.hip-cab b { font-size: var(--f-corpo); font-weight: 600; line-height: 1.5; }
/* O PRAZO É UM SELO E NÃO UMA COLUNA (02.10.2026, ronda de texto espremido).
   Em três colunas iguais, "30 dias" ocupava um terço da largura e as duas
   frases ficavam com 225px a 834px de tela, quatro e cinco linhas de 26
   letras. Em flex, o prazo leva só a largura do selo e as frases dividem o
   resto; abaixo de duas de 220px, cada uma desce para a linha de baixo. */
.hip-grade { display: flex; flex-wrap: wrap; gap: var(--e4); }
.hip-grade > * { flex: 1 1 220px; min-width: 0; }
.hip-grade > .hip-quando { flex: 0 0 auto; }
.hip-r {
  display: block; margin-bottom: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
}
.hip-grade p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }
.hip-ok { color: var(--ok-ink) !important; font-weight: 600; }
.hip-prazo {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro);
}

/* ── 14. MOVIMENTOS ESTRATÉGICOS ─────────────────────────────────────────── */

.mov {
  display: grid; grid-template-columns: 1fr 250px; gap: 0;
  border-radius: var(--r-md); margin-bottom: var(--e3); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.mov-corpo { padding: var(--e5); min-width: 0; }
.mov-cab { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.mov-n {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--impacto-fundo); color: #fff;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
}
.mov h4 { font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.mov-obj { font-size: var(--f-apoio); color: var(--prosa); line-height: 1.7; margin: 0 0 var(--e4); }
.mov-tats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e2); }
.mov-tat {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e3) var(--e4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.55;
}
.mov-tat > span { flex-shrink: 0; color: var(--primary); font-weight: 600; }

/* O painel à direita: budget e meta são o que decide se o movimento é real, e
   enfileirados abaixo das táticas eles somem no meio do texto. */
.mov-painel {
  padding: var(--e5) var(--e4); background: var(--surface-hi);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--e4);
}
.mp-b > span {
  display: block; margin-bottom: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
}
.mp-b > b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; line-height: 1.45; }
.mp-meta {
  display: flex; align-items: flex-start; gap: var(--e2); margin: 0;
  font-size: var(--f-apoio); font-weight: 600; color: var(--ok-ink); line-height: 1.55;
}
.mp-meta svg { flex-shrink: 0; margin-top: var(--e0); }

/* ── 15. ALAVANCAS ───────────────────────────────────────────────────────── */

.alavancas { position: relative; padding-left: var(--e6); }
.alavancas::before {
  content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px;
  background: var(--border); border-radius: var(--r-pill);
}
.alv { position: relative; margin-bottom: var(--e3); }
/* O medalhão fica SOBRE a espinha, não ao lado: é ele que amarra o cartão à
   linha e diz "há uma primeira alavanca". */
.alv-n {
  position: absolute; left: -30px; top: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--impacto-fundo); color: #fff; border: 3px solid var(--bg);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
}
.alv-card {
  position: relative; overflow: hidden;
  padding: var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); box-shadow: var(--shadow-card);
}
/* O número gigante em marca-d'água. É o gesto mais decorativo do render, e ele
   se paga: as alavancas não têm prazo nem fase, então sem numeração viram uma
   pilha de cartões sem ordem aparente. */
.alv-fantasma {
  position: absolute; right: 14px; top: -18px; pointer-events: none;
  font-family: var(--brand); font-size: 96px; font-weight: 600;
  color: var(--surface-hi); line-height: 1; letter-spacing: -0.05em;
}
.alv-olho {
  position: relative; display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink);
}
.alv-card h4 { position: relative; font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--e2); }
.alv-card > p { position: relative; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.7; margin: 0; }
.alv-card .linhas { position: relative; }

/* ── 16. RESPONSIVO ──────────────────────────────────────────────────────── */

@container tela (max-width: 820px) {
  .cog, .canvas { grid-template-columns: 1fr; gap: var(--e4); }
  .mov { grid-template-columns: 1fr; }
  .mov-painel { border-left: 0; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; }
  .mov-painel .mp-b { flex: 1; min-width: 180px; }
}

@container tela (max-width: 640px) {
  .plano .h1-frase { font-size: var(--f-heroi); }
  .sec-cab h2 { font-size: var(--f-secao); }
  .leia-me, .plano .fase-card, .hip, .mov-corpo, .alv-card, .orc, .decl, .narrativa { padding: var(--e4); }
  .lm-pe .btn, .exec-barra .btn { width: 100%; justify-content: center; margin-left: 0; }
  /* A regra de duas colunas saiu daqui (06.09.2026): a de 760px já põe duas,
     e esta, por vir depois no arquivo, anulava a de 420px — a faixa nunca
     virava uma coluna no celular, nem no cliente nem no admin. */
  .faixa-kpi .kpi-n { font-size: var(--f-tela); }
  .fases { padding-left: var(--e5); }
  .fase-ponto { left: -20px; }
  .alavancas { padding-left: var(--e5); }
  .alv-n { left: -22px; width: 26px; height: 26px; }
  .alv-fantasma { font-size: 64px; }
  .opo > summary { gap: var(--e2); flex-wrap: wrap; }
  .roi b { display: none; }
}

/* ── 17. PAPEL ───────────────────────────────────────────────────────────── */

html.modo-papel .opo, html.modo-papel .rec-linha { break-inside: avoid; }
html.modo-papel .opo-seta, html.modo-papel .rec-seta,
html.modo-papel .exec-barra .btn, html.modo-papel .lm-pe .btn { display: none; }
html.modo-papel .opo > summary, html.modo-papel .rec-linha > summary { cursor: default; }
html.modo-papel .alv-fantasma { display: none; }
html.modo-papel .mov { break-inside: avoid; }

/* As duas notas da Análise Cognitiva: rótulo em cima, texto embaixo, brancas.
   O `.destaque-card` do Raio-X põe o ícone à esquerda, o que aqui espremia a
   prosa numa coluna de 60% e deixava os cartões altos e estreitos. */
.cog-notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e3); margin-top: var(--e4); }
.cog-nota {
  padding: var(--e4) 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.cn-r {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600;
}
.cog-nota.t-warn .cn-r { color: var(--warn-ink); }
.cog-nota.t-fam .cn-r { color: var(--primary); }
.cog-nota p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════════
 * REFINO DO PLANO — ícones que se desenham, e o resto do acabamento
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── ÍCONES QUE SE DESENHAM ──────────────────────────────────────────────
 *
 * O cabeçalho do `icones.js` promete há muito tempo que traçado inline é
 * animável. Isto cumpre a promessa: o ícone que encabeça um bloco é desenhado
 * como se alguém o traçasse, quando o bloco entra na tela.
 *
 * `stroke-dasharray: 100` com `dashoffset` indo a zero. Não meço o
 * `getTotalLength()` de cada traçado porque isso exigiria JS por elemento; com
 * um valor generoso, o traçado curto termina antes do longo, e a diferença de
 * ritmo entre os ícones lê como orgânica em vez de mecânica.
 *
 * A ANIMAÇÃO É UMA SÓ POR BLOCO, e ela acontece uma vez. Ícone que redesenha a
 * cada rolagem vira pisca-pisca, e a terceira vez que a pessoa passa por ele já
 * é irritação. `movimento.js` desobserva o bloco depois de revelar. */

@keyframes ic-desenha {
  from { stroke-dashoffset: 100; opacity: 0.35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

.revela .ic-traca { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.35; }
.revela.visivel .ic-traca {
  animation: ic-desenha 0.9s var(--curva) 0.12s forwards;
}

/* Fora de um bloco observado (papel, movimento reduzido, navegador sem
   IntersectionObserver), o ícone já nasce desenhado. Nunca some. */
@media (prefers-reduced-motion: reduce) {
  .revela .ic-traca, .revela.visivel .ic-traca {
    stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; animation: none;
 }
}
html.modo-papel .ic-traca {
  stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  opacity: 1 !important; animation: none !important;
}

/* ── A FAIXA DE EXECUÇÃO FUNDIDA ─────────────────────────────────────────
 * Eram duas caixas brancas empilhadas falando do mesmo assunto, e o campo de
 * data ocupava a largura inteira de uma delas para receber dez caracteres. */
.exec {
  margin-bottom: var(--e5); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  overflow: hidden;
}
.exec-barra {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e4) var(--e5); border: 0; border-radius: 0; margin: 0;
}
.exec-pe {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e5); background: var(--surface-sutil); border-top: 1px solid var(--border);
}
.exec-data {
  display: inline-flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  cursor: pointer;
}
.exec-data svg { color: var(--faint-ink); }
/* 138px cabe "dd/mm/aaaa" com folga e não um centímetro a mais. */
.exec-pe input {
  width: 138px; flex-shrink: 0;
  padding: var(--e2) var(--e2); border-radius: var(--r-xs);
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: var(--f-apoio); color: var(--ink);
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.exec-pe input:hover { border-color: var(--primary-line); }
.exec-pe input:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--foco); }
.exec-pe .exec-nota { flex: 1; min-width: 180px; font-size: var(--f-apoio); color: var(--dim-ink); }
.exec-pe .btn { flex-shrink: 0; margin-left: auto; }

/* ── A NARRATIVA GANHOU RÓTULO ───────────────────────────────────────────
 * Sem ele, o cartão branco logo abaixo da Declaração de Valor lia como a
 * continuação dela: o cliente achou que o texto tinha sido cortado em dois. */
.nar-cab {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint-ink);
}
.narrativa p:last-child { margin-bottom: 0; }

/* ── ACABAMENTO DOS CARTÕES ──────────────────────────────────────────────
 * Elevação no hover, sempre para CIMA e sempre 1px. É o gesto que diz "isto é
 * um objeto", e ele só aparece em bloco que a pessoa vai mesmo apontar. */
.faixa-kpi .kpi-c, .hip, .mov, .alv-card, .plano .fase-card, .decl, .narrativa {
  transition: box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.faixa-kpi .kpi-c:hover, .hip:hover, .mov:hover, .alv-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.plano .fase-card:hover { box-shadow: var(--shadow-hover); }

/* O ponto da fase cresce quando o cartão dela é apontado: liga visualmente o
   cartão à linha do tempo sem precisar de linha de conexão. */
.fase .fase-ponto { transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva); }
.fase:hover .fase-ponto { transform: scale(1.35); box-shadow: 0 0 0 1px var(--fam), 0 0 12px color-mix(in srgb, var(--fam) 55%, transparent); }

/* O medalhão da alavanca acompanha o mesmo gesto. */
.alv .alv-n { transition: transform var(--t-medio) var(--curva); }
.alv:hover .alv-n { transform: scale(1.1); }

/* A seta do item de oportunidade anda para a direita antes de girar: diz
   "tem mais aqui dentro" no momento em que o cursor chega. */
.opo:not([open]):hover .opo-seta { transform: translateX(3px); }

/* ── ABAS: A TROCA GANHA UM MOVIMENTO ────────────────────────────────────
 * Trocar de aba era um corte seco. Uma entrada de 18px em 0,28s é curta o
 * bastante para não atrasar ninguém e longa o bastante para o olho entender
 * que o conteúdo mudou por inteiro, e não em pedaços. */
@keyframes aba-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.aba-painel.on { animation: aba-entra 0.28s var(--curva); }
@media (prefers-reduced-motion: reduce) { .aba-painel.on { animation: none; } }
html.modo-papel .aba-painel { animation: none !important; }

/* ── O OLHO DA SEÇÃO GANHA UM FIO ────────────────────────────────────────
 * Um traço curto antes do número. Ele custa 24px e faz o rótulo parecer um
 * marcador de capítulo em vez de um texto pequeno solto acima do título. */
.sec-olho { display: flex; align-items: center; gap: var(--e3); }
.sec-olho::before {
  content: ''; width: 22px; height: 2px; border-radius: var(--r-pill);
  background: var(--primary); opacity: 0.5; flex-shrink: 0;
}

/* ── FOCO VISÍVEL, EM TODO LUGAR ─────────────────────────────────────────
 * Os blocos novos do Plano são clicáveis e nenhum deles tinha estado de foco.
 * Quem navega por teclado ficava sem saber onde estava. */
.opo > summary:focus-visible, .rec-linha > summary:focus-visible,
.dec-hist > summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CORREÇÕES DA AUDITORIA — o que não cabia numa substituição em massa
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. OS QUATRO BOTÕES SEM TRANSIÇÃO ───────────────────────────────────
 * Medido no DOM: `.tat-cab`, `.est-btn`, `.abrir-menu` e `.mc-fechar` tinham
 * `transition-duration: 0s`. Todos mudam de cor no hover, e sem transição a
 * mudança é um corte: o olho registra como falha de renderização, não como
 * resposta ao cursor. Estes quatro são os mais tocados do produto — o
 * cabeçalho da tática abre e fecha o tempo todo. */
.tat-cab { transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
/* O menu de tela cheia do celular: SEIS botões, nenhum com transição. É a
   navegação inteira do mobile, e cada toque acendia sem nenhuma passagem. */
.mc-nav button, #sair-mobile { transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
.est-btn { transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
.abrir-menu, .mc-fechar { transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
@media (prefers-reduced-motion: reduce) {
  .tat-cab, .est-btn, .abrir-menu, .mc-fechar,
  .mc-nav button, #sair-mobile { transition: none; }
}

/* ── 2. TAMANHO DE ÍCONE: TRÊS, NÃO SETE ─────────────────────────────────
 * O DOM tinha 11, 12, 13, 14, 15, 16 e 18px. O `stroke-width: 2` num viewBox
 * de 24 vira 1,08px a 13px e 1,25px a 15px: meio pixel por linha, e é por
 * isso que alguns ícones pareciam mais moles que os vizinhos.
 *
 * O tamanho continua vindo do atributo (é o que o SVG exige), mas os valores
 * que não pousam em pixel inteiro são corrigidos aqui, no ponto único. */
svg.ic[width='11'], svg.ic[width='13'] { width: var(--ic-sm); height: var(--ic-sm); }
svg.ic[width='15'], svg.ic[width='17'] { width: var(--ic); height: var(--ic); }
svg.ic[width='18'], svg.ic[width='19'] { width: var(--ic-lg); height: var(--ic-lg); }

/* ── 3. ALVO DE TOQUE MÍNIMO NOS DOBRÁVEIS NOVOS ─────────────────────────
 * `.opo`, `.rec-linha` e `.dec-hist` são `<summary>`, e summary não tem
 * altura mínima por padrão. Com padding pequeno, o alvo do `.dec-hist` ficava
 * em 32px, abaixo dos 44 que a mão exige. */
.dec-hist > summary { min-height: 44px; }

/* ── 4. O PISO DE 13px NO CELULAR ────────────────────────────────────────
 * A tabela em modo cartão descia a 12px, e o `.fc-dias` antigo a 8,5px. Texto
 * de conteúdo abaixo de 13px no celular é ilegível a um braço de distância. */
@container tela (max-width: 640px) {
  .tabela-cartoes tr { font-size: var(--f-corpo); }
  .tabela-cartoes td, .tabela-cartoes .art-nome { font-size: var(--f-corpo); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MANUAL DE EXECUÇÃO PARA O TIME
 *
 * Nasceu depois das duas auditorias, então nada aqui tem valor solto: todo
 * espaçamento vem de `--eN`, todo raio de `--r-*`, toda sombra de `--shadow-*`
 * e toda transição de `--t-*`.
 *
 * A família é AZUL, e não uma cor nova. O manual não é um quarto relatório: é o
 * Plano na voz do time, e usar a cor do Plano diria "outro documento".
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Manual, o MESMO azul do Plano, e de propósito: o Manual não é um documento
   independente, é o Plano recortado em cartão de execução para o time. Cor
   própria sugeriria uma terceira coisa a entender. */
.manual { --fam: #2563EB; --fam-text: #1D4ED8; --fam-soft: rgba(37, 99, 235, 0.07); --fam-icone:#1D4ED8; }

/* ── 1. CAPA ─────────────────────────────────────────────────────────────── */

.hero-linha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.hero-quando {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}

/* ── 2. TRILHA DAS TRÊS FASES ────────────────────────────────────────────
 * O manual é o único relatório sem abas, de propósito: ele é lido em pé, numa
 * reunião, ou impresso e colado na parede. A trilha é o que sobra dizendo, de
 * relance, que existem três blocos e onde eles ficam. */
.mt-trilha {
  list-style: none; margin: 0 0 var(--e6); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3);
  position: relative;
}
.mt-e {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  border-top: 2px solid var(--tom);
  transition: box-shadow var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.mt-e:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.mt-e.t-fam { --tom: var(--fam); }
.mt-e.t-warn { --tom: var(--fam); }
.mt-e.t-ok { --tom: var(--fam); }
.mt-ic {
  width: 32px; height: 32px; border-radius: var(--r-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tom) 12%, transparent); color: var(--tom);
}
.mt-txt { display: flex; flex-direction: column; gap: var(--e0); min-width: 0; }
.mt-txt b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; }
.mt-txt i { font-style: normal; font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }

/* ── 3. CONTEXTO ─────────────────────────────────────────────────────────── */

.mt-contexto {
  padding: var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.mt-prosa { font-size: var(--f-corpo); line-height: 1.75; color: var(--prosa); margin: 0 0 var(--e5); }

.mt-provar {
  padding: var(--e4); border-radius: var(--r); margin-bottom: var(--e4);
  background: var(--primary-soft); border: 1px solid var(--tom-primario-18);
}
.mt-provar-r, .mt-riscos-r {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600;
}
.mt-provar-r { color: var(--primary); }
.mt-provar p { margin: 0; font-size: var(--f-corpo); font-weight: 600; line-height: 1.6; color: var(--ink); }

.mt-riscos-r { color: var(--danger-ink); margin-bottom: var(--e3); }
.mt-risco {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r-xs); margin-bottom: var(--e2);
  background: var(--tom-danger-4); border: 1px solid var(--tom-danger-12);
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6;
}
.mt-risco > span { flex-shrink: 0; color: var(--danger); display: flex; margin-top: var(--e0); }

/* ── 4. FASE ─────────────────────────────────────────────────────────────── */

.mt-fase { --tom: var(--primary); }
.mt-fase.t-warn { --tom: var(--fam); }
.mt-fase.t-ok { --tom: var(--fam); }

/* O marcador que separa uma fase da outra. Centralizado, com um fio de cada
   lado: é a única coisa que interrompe a coluna de cartões, e ele existe para
   quem está rolando saber que mudou de fase sem ler. */


/* ── 5. O CARD OPERACIONAL ───────────────────────────────────────────────
 * A ordem dos campos é a de quem executa: o que fazer primeiro e sozinho;
 * quem e quando (o combinado); KPI e sinal de falha LADO A LADO, porque um é
 * o alvo e o outro é o aviso, e lê-los juntos é o que torna a tática
 * conferível sem reunião. */
.mc {
  border-radius: var(--r-md); margin-bottom: var(--e3); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--tom);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.mc:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }

.mc-cab { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--border); }
.mc-id {
  flex-shrink: 0; padding: var(--e1) var(--e2); border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--tom) 12%, transparent); color: var(--tom);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.04em;
}
.mc-cab h4 { font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.4; }

.mc-fazer { padding: var(--e4) var(--e5); }
.mc-r {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
}
.mc-fazer .mc-r { color: var(--tom); }
.mc-fazer p { margin: 0; font-size: var(--f-corpo); line-height: 1.65; color: var(--ink); }

.mc-grade {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.mc-campo { padding: var(--e3) var(--e5); border-bottom: 1px solid var(--border); }
.mc-campo:nth-child(odd) { border-right: 1px solid var(--border); }
.mc-campo:nth-last-child(-n + 2) { border-bottom: 0; }
.mc-campo p { margin: 0; font-size: var(--f-apoio); line-height: 1.55; color: var(--prosa); }
.mc-campo.t-ok { background: var(--tom-ok-4); }
.mc-campo.t-ok .mc-r { color: var(--ok-ink); }
.mc-campo.t-ok p { color: var(--ok-ink); font-weight: 600; }
.mc-campo.t-risco { background: var(--tom-danger-4); }
.mc-campo.t-risco .mc-r { color: var(--danger-ink); }
.mc-campo.t-warn .mc-r { color: var(--warn-ink); }

/* O "por que" fica dobrado. Não é menos importante: ele responde uma pergunta
   que só aparece DEPOIS, quando alguém discorda da tática. */
.mc-porque { border-top: 1px solid var(--border); background: var(--surface-sutil); }
.mc-porque > summary {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e5); min-height: 44px; cursor: pointer; list-style: none;
}
.mc-porque > summary::-webkit-details-marker { display: none; }
.mc-porque > summary:focus-visible { outline: 2px solid var(--tom); outline-offset: -2px; }
.mc-porque-r {
  font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink);
}
.mc-porque-seta { color: var(--faint-ink); display: flex; transition: transform var(--t-medio) var(--curva); }
.mc-porque[open] .mc-porque-seta { transform: rotate(90deg); }
.mc-porque > p { margin: 0; padding: 0 var(--e5) var(--e4); font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }

/* ── 6. ENCERRAMENTO DA FASE ─────────────────────────────────────────────
 * O único cartão escuro do documento, e ele marca troca de modo: acima é
 * trabalho individual, aqui é a hora em que o time senta junto. Sem esse
 * corte, as três fases viram uma lista de noventa dias. */
.mt-reuniao {
  padding: var(--e5); border-radius: var(--r-md); margin-top: var(--e4);
  background: var(--side); color: var(--tom-branco-70);
}
.mt-reu-cab { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.mt-reu-ic {
  width: 36px; height: 36px; border-radius: var(--r-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tom-branco-8); color: #fff;
}
.mt-reu-olho {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tom-branco-50);
  margin-bottom: var(--e0);
}
.mt-reu-cab b { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.mt-reu-p { margin: 0 0 var(--e4); font-size: var(--f-apoio); color: var(--tom-branco-50); line-height: 1.6; }
.mt-reu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.mt-reu-lista li {
  display: flex; align-items: flex-start; gap: var(--e3);
  font-size: var(--f-corpo); line-height: 1.6; color: var(--tom-branco-70);
}
.mt-reu-lista li::before {
  content: ''; flex-shrink: 0; margin-top: var(--e2);
  width: 5px; height: 5px; border-radius: 50%; background: var(--ok);
}

/* ── 7. ALERTAS ──────────────────────────────────────────────────────────── */

.mt-alerta {
  padding: var(--e5); border-radius: var(--r-md); margin-bottom: var(--e3);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--warn); box-shadow: var(--shadow-card);
}
.mt-al-cab {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2);
  font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; color: var(--warn-ink);
}
.mt-al-d { margin: 0 0 var(--e4); font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }
.mt-al-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.mt-al-grade .mc-campo {
  padding: var(--e3) var(--e4); border: 1px solid var(--border); border-radius: var(--r-xs);
}
.mt-al-grade .mc-campo:nth-child(odd) { border-right: 1px solid var(--border); }

.mt-rodape { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.mt-rodape-q { margin-left: auto; font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }

/* ── 8. ENTREGÁVEIS, no Plano ────────────────────────────────────────────── */

.entregaveis { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e5); }
.entrega-card {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--tom); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
.entrega-card.t-fam { --tom: var(--primary); }
.entrega-card.t-gold { --tom: var(--gold); }
.entrega-card:hover { box-shadow: var(--shadow-hover); }
/* O previsto é dashed e sem botão: mostra o que vem por aí sem prometer
   clique que não existe. */
.entrega-card.previsto { background: transparent; border-style: dashed; border-left-style: solid; opacity: 0.76; box-shadow: none; }
.ent-ic {
  width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tom) 12%, transparent); color: var(--tom);
}
.ent-txt { flex: 1; min-width: 0; }
.ent-cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e2); }
.ent-cab b { font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.01em; }
.ent-txt p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }
.ent-pe { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }
/* `flex: 0 0 auto` no botão: sem isso, quando a nota quebra para a linha de
   baixo o botão fica sozinho na dele e estica de ponta a ponta, virando uma
   barra azul do tamanho do cartão. */
.ent-pe .btn { flex: 0 0 auto; }
.ent-pe .nota-acao { flex: 1; min-width: 180px; }

/* ── 9. RESPONSIVO ───────────────────────────────────────────────────────── */

@container tela (max-width: 640px) {
  .mc-cab, .mc-fazer, .mc-campo, .mc-porque > summary, .mc-porque > p { padding-left: var(--e4); padding-right: var(--e4); }
  /* Uma coluna: dois campos de 150px lado a lado quebram cada valor em quatro
     linhas, e o card fica mais alto do que empilhado. */
  .mc-grade, .mt-al-grade { grid-template-columns: 1fr; }
  .mc-campo:nth-child(odd) { border-right: 0; }
  .mc-campo:nth-last-child(2) { border-bottom: 1px solid var(--border); }
  .hero-quando { margin-left: 0; }
  .ent-pe .btn { width: 100%; justify-content: center; }
}

/* ── 10. PAPEL ───────────────────────────────────────────────────────────
 * Este é o relatório que MAIS vai para o papel: ele existe para ser impresso e
 * distribuído. Tudo abre, nada quebra no meio de um card. */
html.modo-papel .mc, html.modo-papel .mt-alerta, html.modo-papel .mt-reuniao,
html.modo-papel .mc-porque { display: block; }
html.modo-papel .mc-porque > summary { display: none; }
html.modo-papel .mc-porque > p { padding-top: var(--e3); }
html.modo-papel .mt-reuniao { background: var(--surface); color: var(--ink); border: 1px solid var(--papel-linha); }
html.modo-papel .mt-reu-olho { color: var(--papel-tinta); }
html.modo-papel .mt-reu-cab b { color: var(--ink); }
html.modo-papel .mt-reu-p { color: var(--papel-tinta); }
html.modo-papel .mt-reu-lista li { color: var(--ink); }
html.modo-papel .mt-reu-ic { background: var(--surface-hi); color: var(--ink); }
html.modo-papel .hero-acoes, html.modo-papel .entregaveis { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * ESTÚDIO DE CRIAÇÃO — o desenho do `modules/studio.php`
 *
 * A peça é UM cartão grande com o par Raio-X → Plano dentro, e tudo o mais em
 * peso menor abaixo dele. Eu tinha três blocos de igual peso, e o caminho
 * principal do produto sumia no meio.
 *
 * Escrito depois das duas auditorias: espaçamento só por `--eN`, raio só por
 * `--r-*`, sombra só por `--shadow-*`, transição só por `--t-*`, ícone em
 * 12/16/20.
 * ═══════════════════════════════════════════════════════════════════════════ */

.est-cab { margin-bottom: var(--e5); }
/* O CABEÇALHO NÃO TRAZ MARGEM ONDE O CONTÊINER JÁ ESPAÇA.
   A tela do Toolbox é `flex column` com `gap: 24px`, então a margem de baixo
   do cabeçalho SOMAVA com o gap e o vão até o cartão dava 48px, contra 24px do
   Estúdio, que não é flex. Medido nos dois. Quem espaça aqui é o layout. */
.toolbox > .est-cab { margin-bottom: 0; }
.est-cab h1 {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--f-tela); line-height: 1.2; letter-spacing: var(--tr-tight);
}
/* O ícone do título é onde a cor da família se apresenta antes de tudo na tela.
   Usa `--fam-icone` e não `--fam`: o verificador recusa o tom vivo em `color`,
   e recusa com razão — `color` pinta texto por herança, e o tom vivo não foi
   medido para isso. O `--fam-icone` foi, contra as duas superfícies. */
.est-cab h1 svg { color: var(--fam-icone, var(--primary)); }
.est-cab .sub-tela { margin: var(--e1) 0 0; }

/* ── 1. O CARTÃO PRINCIPAL ───────────────────────────────────────────────── */

.est-core {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  margin-bottom: var(--e6);
}
/* O FIO NO TOPO, NA COR DA FAMÍLIA.
   Ele estava fixo no azul do sistema, e o azul é a família do ESTÚDIO. O Radar
   e o Toolbox reusam este cartão, então abriam com o fio do vizinho: as duas
   únicas telas com cor própria eram as duas que não a mostravam.
   O filete é um dos três lugares onde a cor de motor pode entrar (os outros
   são o fundo do ícone e o ponto), e nenhum deles é texto.
   O fallback mantém o Estúdio exatamente como está: ele não declara `--fam`. */
.est-fio {
  height: 3px;
  background: var(--fam, var(--primary));
}
.est-core-corpo { padding: var(--e6); }

.est-core-topo { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e5); }
/* A faixa some quando nao tem chip nenhum. Ela nasceu sempre cheia, entao a
   margem morava nela; tirados os rotulos decorativos ela pode chegar vazia,
   e uma faixa vazia com margem e so um buraco no topo do cartao. `:empty`
   nao serve porque o HTML gerado deixa espacos dentro da div. */
.est-core-topo:not(:has(> *)) { display: none; }
.est-modulo {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink);
}
.est-online {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 500; color: var(--dim-ink);
}
@keyframes est-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.est-pulso {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
  animation: est-pulsa var(--t-pulso) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .est-pulso { animation: none; } }
.est-cred {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--ink);
}
.est-cred svg { color: var(--warn); }
/* O `margin-left: auto` existia para jogar o saldo para o canto oposto dos
   rotulos da faixa. Sem os rotulos ele empurra o unico chip para a direita e
   deixa a largura toda do cartao em branco a esquerda dele. Sozinho, ele
   volta para o comeco da linha. */
.est-core-topo > .est-cred:only-child { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   O TÍTULO DAS TRÊS PORTAS — Estúdio, Toolbox e Radar.

   ── ELE NUNCA TEVE O TAMANHO QUE DECLARAVA ────────────────────────────────

   A regra pedia `--f-secao`, 21px, e a tela entregava 17. `.conteudo h2` pesa
   (0,1,1) e `.est-core-t` pesava (0,1,0): o seletor genérico de h2 vencia, e o
   título saía em `--f-leitura` — o mesmo corpo do parágrafo logo abaixo. Por
   isso o `.est-core` no começo, que devolve o peso.

   O Radar escapava por acidente: ele tinha um `.rd-porta .est-core-t` próprio,
   com (0,2,0), e por isso era a única das três portas com título de porta. As
   outras duas anunciavam o produto em corpo de legenda.

   ── E AGORA AS TRÊS SÃO IGUAIS ────────────────────────────────────────────

   O override do Radar virou a regra de todas, com um ajuste: ele pedia
   `--f-heroi`, e o tamanho certo e o do H1 DA TELA. Estes cartoes sao a
   primeira coisa da pagina e o que eles dizem e a oferta, entao o titulo
   deles conversa de igual para igual com o nome da tela, e nao por cima dele.
   O radar.js ja dizia, em comentario, que as tres portas usam as MESMAS
   classes para que uma mudanca chegue as outras sozinha, e entao mantinha uma
   copia local do titulo, que e exatamente o contrario disso.

   SEM TETO DE LARGURA, E SEM QUEBRA FORCADA. O `max-width: 22ch` do Radar
   cabia no titulo dele e partia o do Estudio no meio da segunda frase. A
   tentativa seguinte foi dar linha propria ao `<span>`, e essa errou para o
   outro lado: "Dois motores. O segundo nasce do primeiro." e UMA frase de duas
   partes, e cortar no ponto final e ler o ponto como paragrafo. Ela cabe numa
   linha na largura do cartao, e e assim que tem que sair. Quem decide a quebra,
   quando a largura nao der, e o `text-wrap: balance`, que reparte por igual em
   vez de deixar uma orfa.
   ═══════════════════════════════════════════════════════════════════════════ */
.est-core .est-core-t {
  font-size: var(--f-tela); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 var(--e2); text-wrap: balance;
}
.est-core-t span { color: var(--dim-ink); font-weight: 400; }
.est-core-p { font-size: var(--f-corpo); color: var(--dim-ink); line-height: 1.65; margin: 0 0 var(--e6); max-width: 56ch; }

/* ── 2. O PAR, COM A SETA ────────────────────────────────────────────────
 * A seta é a informação: os dois não são opções, são uma sequência. Duas
 * colunas soltas fariam a pessoa escolher, e escolher o Plano primeiro é um
 * erro que o produto não deveria deixar cometer. */
.est-par { display: flex; align-items: stretch; gap: 0; margin-bottom: var(--e6); }
.est-passo {
  position: relative; overflow: hidden; flex: 1; min-width: 0;
  display: flex; flex-direction: row; align-items: center; gap: var(--e5);
  padding: var(--e6); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--tom) 30%, transparent); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
/* NA SUPERFÍCIE DE IMPACTO (06.09.2026, a pedido do dono): o cartão é escuro
   como o herói da Visão Geral e o funil do Toolbox; a família entra só na
   segunda palavra do nome, no ponto do selo e no fio da borda. */
.est-passo.impacto { border-color: color-mix(in srgb, var(--tom) 35%, transparent); }
.est-passo.impacto:hover { border-color: color-mix(in srgb, var(--tom) 60%, transparent); }
.est-passo.impacto b { color: #fff; }
.est-passo.impacto.t-a b em { color: #86efac; }
.est-passo.impacto.t-b b em { color: #93c5fd; }
.est-passo.impacto p { color: var(--tom-branco-70); }
.est-passo.impacto .est-selo { color: var(--tom-branco-60); }
/* O texto do motor, ao lado do ícone (19.09.2026). */
.est-passo-txt { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
/* No escuro, a caixinha do ícone acende na família e o traço vem claro, o
   mesmo verde e o mesmo azul da segunda palavra do nome. */
.est-passo.impacto .est-ic {
  width: 56px; height: 56px; flex: none; margin: 0; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tom) 24%, transparent); border-color: color-mix(in srgb, var(--tom) 45%, transparent);
}
.est-passo.impacto.t-a .est-ic { color: #86efac; }
.est-passo.impacto.t-b .est-ic { color: #93c5fd; }
/* No telefone o ícone sobe para cima do texto: ao lado, ele espremia a coluna
   e "Estratégico" quebrava no meio da palavra. */
@container tela (max-width: 560px) {
  .est-passo { flex-direction: column; align-items: flex-start; gap: var(--e4); }
  .est-passo.impacto .est-ic { width: 48px; height: 48px; }
}
.est-passo:hover { box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--tom) 30%, transparent); }
.est-passo.t-a { --tom: #16A34A; } /* Raio-X: verde, a família dele */
.est-passo.t-b { --tom: #2563EB; } /* Plano: azul, a família dele */
/* O Radar entrou no cartão de motor em 22.09.2026, a pedido do dono: ele
   apontou o cartão do Raio-X e pediu o mesmo para a porta do Radar. Roxo, que
   é a família dele em toda a plataforma. */
.est-passo.t-r { --tom: #7C3AED; }
.est-passo.impacto.t-r b em { color: #c4b5fd; }
.est-passo.impacto.t-r .est-ic { color: #c4b5fd; }
/* O halo desfocado no canto. É o gesto do MVP e ele dá profundidade a um
   cartão branco sem precisar de sombra maior. */
.est-halo {
  position: absolute; top: -32px; right: -32px; width: 96px; height: 96px;
  border-radius: 50%; background: var(--tom); opacity: 0.08; filter: blur(24px);
  pointer-events: none;
}
.est-selo {
  /* Era uma pílula tingida no tom do passo (azul no 1º, roxo no 2º). Vira o
     mesmo selo quieto de todo o produto: mono, micro, tinta apagada. A ordem
     dos passos já está no número e na seta entre os cartões. */
  position: relative; display: inline-flex; align-items: center; gap: var(--e2); margin-bottom: 0;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink);
}
.est-ic {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r); margin-bottom: var(--e3);
  background: color-mix(in srgb, var(--tom) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--tom) 18%, transparent); color: var(--tom);
}
.est-passo b { position: relative; display: block; font-family: var(--brand); font-size: var(--f-heroi); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: var(--e2) 0 0; }
.est-passo p { position: relative; margin: 0; font-size: var(--f-corpo); color: var(--dim-ink); line-height: 1.6; max-width: 40ch; }

/* A SETA DEITADA (19.09.2026): o fio verde-azul com a ponta, e "gera o plano"
   embaixo. Era "nasce deste" escrito de lado, que se lia virando a cabeça. */
.est-seta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e2); flex-shrink: 0; width: 128px; padding: 0 var(--e2); color: var(--faint-ink); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.est-seta-fio { display: flex; align-items: center; }
.est-seta-fio .ic { color: #2563EB; margin-left: -9px; transform: rotate(-90deg); }

/* ── 3. RODAPÉ DO CARTÃO ─────────────────────────────────────────────────── */

/* O PILAR no cartão do par. Fundo quieto e fio à esquerda: é orientação antes
   da escolha, não mais um argumento de venda. */
.est-pilar {
  margin: var(--e5) 0 0; padding: var(--e3) var(--e4);
  border-left: 2px solid var(--border); background: var(--surface-hi);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6;
}
.est-pilar b { color: var(--ink); font-weight: 600; }
.est-pilar p { margin: 0; }
.est-pilar p + p { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--border); color: var(--dim-ink); }

.est-core-pe {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  flex-wrap: wrap; padding-top: var(--e5); border-top: 1px solid var(--border);
}
.est-fatos { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.est-fatos span {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 32px; padding: 0 var(--e3); border-radius: var(--r-pill);
  background: var(--surface-hi); font-size: var(--f-apoio); font-weight: 500; color: var(--dim-ink);
}
.est-fatos span .ic { color: var(--faint-ink); }
.est-acoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.est-comecar { padding: var(--e3) var(--e5); font-size: var(--f-corpo); }
/* A NOTA AO LADO DA AÇÃO quando o saldo acabou: ela diz POR QUE o botão mudou,
   senão a troca de "Começar" para "Comprar" parece mudança de produto.

   Era um fio de 2px e texto solto, que sobre o branco do cartão não é aviso, é
   uma linha vertical perdida ao lado de uma frase. Agora é um bloco: âmbar a
   8%, borda a 25%, o mesmo raio dos outros cartões e o ícone que já significa
   "repare nisto" no resto do produto. Continua leve de propósito — ele explica
   um botão, não interrompe ninguém. */
.est-nota {
  display: flex; align-items: center; gap: var(--e2); text-align: left;
  padding: var(--e2) var(--e3); border-radius: var(--r);
  background: var(--tom-warn-8); border: 1px solid var(--tom-warn-25);
  font-size: var(--f-apoio); color: var(--warn-ink);
}
.est-nota .ic { flex-shrink: 0; color: var(--warn); }

/* ── 4. BLOCOS SECUNDÁRIOS ───────────────────────────────────────────────── */

.est-bloco { margin-bottom: var(--e6); }
.est-titulo { margin-bottom: var(--e4); }
.est-titulo h2 { font-size: var(--f-leitura); font-weight: 600; margin: 0; }
/* `:where(span)` e não `span`: a regra é o SUBTÍTULO do bloco, mas o seletor
   pega qualquer `<span>` que caia dentro dele. O Toolbox reusa `.est-titulo`
   no cabeçalho de grupo, e o ícone de lá é um `<span>`: ele herdava
   `display: block` e a cor do subtítulo, então o desenho encostava no canto
   da caixinha em vez de centralizar, e saía cinza em vez da cor da família.
   Com `:where()` a regra cai para (0,1,0) e qualquer classe própria a corrige,
   que é o que uma regra de base deve fazer. Mesma correção do `.dossie p`. */
.est-titulo :where(span) { display: block; margin-top: var(--e1); font-size: var(--f-apoio); color: var(--dim-ink); }

.est-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e3); }
.est-card {
  padding: var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
.est-card:hover { box-shadow: var(--shadow-hover); border-color: var(--primary-line); }
/* Previsto: tracejado, sem sombra e sem hover. Mostra o que vem por aí sem
   parecer clicável. */
.est-card.previsto { background: transparent; border-style: dashed; box-shadow: none; opacity: 0.76; }
.est-card.previsto:hover { border-color: var(--border); box-shadow: none; }
.est-card.travado { opacity: 0.82; }

.est-card-cab { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.est-card-ic {
  width: 34px; height: 34px; border-radius: var(--r-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.est-card.previsto .est-card-ic { background: var(--surface-hi); color: var(--faint-ink); }
.est-card-cab b { flex: 1; min-width: 0; font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; }
.est-card > p { margin: 0; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }

.est-rot {
  display: block; margin: var(--e4) 0 6px;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
}
.est-acao { display: flex; align-items: center; gap: var(--e2); }
/* `min-width: 0` no select: item de grid/flex tem largura mínima igual ao
   conteúdo, e um nome de empresa longo estoura a coluna inteira. */
.est-acao select {
  flex: 1; min-width: 0; height: 36px; padding: 0 var(--e3);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface); font: inherit; font-size: var(--f-apoio); color: var(--ink);
}
.est-acao select:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--foco); }
.est-acao .btn { flex-shrink: 0; }
.est-falta { margin: var(--e4) 0 0 !important; font-size: var(--f-apoio); color: var(--faint-ink); }

.est-nomes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.est-nomes span {
  padding: var(--e0) var(--e2); border-radius: var(--r-pill);
  background: var(--surface-hi); border: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink);
}

/* ── 5. RESPONSIVO ───────────────────────────────────────────────────────── */

@container tela (max-width: 760px) {
  .est-core-corpo { padding: var(--e5) var(--e4); }
  /* O par empilha e a seta gira: em coluna, uma seta apontando para a direita
     entre dois cartões empilhados aponta para o nada. */
  .est-par { flex-direction: column; }
  .est-core-pe { flex-direction: column; align-items: stretch; }
  /* `align-items: stretch`, E ELE NÃO É DETALHE.
     A regra base é uma LINHA com `align-items: center`, que ali centra na
     vertical. Virando coluna, a mesma palavra passa a centrar na HORIZONTAL:
     o botão não denunciava porque tem `width: 100%`, mas a nota do saldo
     nascia centralizada no meio da coluna, sozinha, longe da margem em que
     todo o resto do cartão se alinha. */
  .est-acoes { flex-direction: column-reverse; align-items: stretch; }
  .est-acoes .btn { width: 100%; justify-content: center; }
  /* O BOTÃO QUEBRA A LINHA (02.10.2026, ronda de texto espremido). Ele leva o
     nome do rascunho ("Continuar: <empresa>"), que é texto do cliente e pode
     ser comprido. Sem quebrar, a 375px ele media 456px; e em coluna com
     `flex-wrap`, todo item estica até o mais largo da linha: os três botões e
     as pastilhas ficavam com 456px dentro de um cartão de 293, cortados pela
     borda, inclusive o "Iniciar diagnóstico". Sem `wrap` a coluna estica até
     a largura do cartão, e não do maior filho. */
  .est-core-pe { flex-wrap: nowrap; }
  .est-acoes .btn { white-space: normal; text-align: center; overflow-wrap: anywhere; height: auto; min-height: 44px; padding-block: var(--e2); }
  .est-cred { margin-left: 0; }
}

/* ── 6. PAPEL ───────────────────────────────────────────────────────────── */
html.modo-papel .est-halo, html.modo-papel .est-acoes { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * "A PARTIR DO QUE VOCÊ JÁ TEM" — uma linha por relatório
 *
 * O desenho anterior eram três cartões, cada um com um `<select>` perguntando
 * "de qual relatório?". A pessoa respondia a mesma pergunta três vezes, em
 * listas quase idênticas, e a seção não tinha como mostrar o que já existia.
 *
 * Aqui a fonte lidera e os motores são pastilhas dela. O `<select>` some, a
 * repetição some, e o estado aparece.
 * ═══════════════════════════════════════════════════════════════════════════ */

.deriva { display: flex; flex-direction: column; gap: var(--e2); }

.dv-linha {
  padding: var(--e4) var(--e5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
.dv-linha:hover { box-shadow: var(--shadow-hover); border-color: var(--primary-line); }

.dv-fonte { display: flex; align-items: center; gap: var(--e3); }
.dv-ic {
  width: 34px; height: 34px; border-radius: var(--r-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tom) 10%, transparent); color: var(--tom);
}
/* As duas cores de família do produto: laranja é Raio-X, roxo é Plano. A
   pessoa reconhece o tipo antes de ler o rótulo, e é o mesmo código que os
   relatórios já usam. */
.dv-ic.t-raiox { --tom: #16A34A; }
.dv-ic.t-plano { --tom: #2563EB; }

.dv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e0); }
.dv-txt b {
  font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-txt i { font-style: normal; font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.dv-abrir { flex-shrink: 0; }

.dv-vira {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--border);
}
.dv-rot {
  flex-shrink: 0; margin-right: var(--e1);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
}

/* A pastilha. O rótulo do custo NUNCA some, porque é ele que diz o que o
   clique vai fazer: "grátis" age na hora, "1 crédito" leva para confirmar, e o
   tique abre o que já existe. */
.dv-chip {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); min-height: 32px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font: inherit; font-size: var(--f-apoio); font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.dv-chip span {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 400;
  letter-spacing: 0.06em; color: var(--faint-ink);
}
.dv-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.dv-chip:hover span { color: var(--primary); }
.dv-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dv-chip:disabled { opacity: 0.6; cursor: default; }

.dv-chip.gratis svg { color: var(--ok-ink); }
.dv-chip.gratis span { color: var(--ok-ink); }
.dv-chip.gratis:hover { border-color: var(--ok); color: var(--ok-ink); background: var(--tom-ok-4); }
.dv-chip.gratis:hover span { color: var(--ok-ink); }

/* O que já existe fica preenchido, não vazado: ele não é uma oferta, é um
   destino. Cinza de propósito — a atenção pertence ao que ainda não foi feito. */
.dv-chip.pronto { background: var(--surface-hi); border-color: transparent; color: var(--dim-ink); }
.dv-chip.pronto svg { color: var(--ok-ink); }
.dv-chip.pronto:hover { background: var(--border); border-color: transparent; color: var(--ink); }
.dv-chip.pronto:hover span { color: var(--dim-ink); }

.deriva-mais { margin-top: var(--e3); }

@container tela (max-width: 640px) {
  .dv-linha { padding: var(--e4); }
  .dv-abrir { display: none; }
  /* Sem o botão "Abrir" na linha da fonte, o cartão inteiro precisa levar a
     algum lugar: o nome vira o alvo, com os 44px que a mão exige. */
  .dv-txt { cursor: pointer; min-height: 44px; justify-content: center; }
  .dv-vira { gap: var(--e2); }
  .dv-rot { width: 100%; margin-bottom: var(--e0); }
}

html.modo-papel .dv-vira, html.modo-papel .dv-abrir { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * AJUSTE CIRÚRGICO DE SEÇÃO
 *
 * O botão é DELIBERADAMENTE discreto. Quem abre o Plano vem ler, e um "Ajustar"
 * com peso de ação primária ao lado de cada título convida a mexer antes de
 * entender. Ele só ganha cor no hover, quando a mão já foi até lá.
 * ═════════════════════════════════════════════════════════════════════════ */

.bt-ajustar {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--dim-ink); cursor: pointer;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.06em;
  transition: color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva),
              background var(--t-rapido) var(--curva);
}
.bt-ajustar:hover { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.bt-ajustar:active { transform: translateY(1px); }
.bt-ajustar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* No cabecalho de secao o botao sobe para a linha do olho, alinhado a direita.
   Grade e nao `float`: o titulo precisa poder quebrar sem passar por baixo. */
.sec-cab.com-ajuste {
  display: grid; grid-template-columns: 1fr max-content; align-items: start;
  column-gap: var(--e4);
}
.sec-cab.com-ajuste .sec-olho { grid-column: 1; }
.sec-cab.com-ajuste h2 { grid-column: 1; }
.sec-cab.com-ajuste p { grid-column: 1; }
.sec-cab.com-ajuste .bt-ajustar { grid-column: 2; grid-row: 1 / span 2; }

/* Na fase, ele fecha a linha do selo. */
.fc-olho .bt-ajustar { margin-left: auto; }

/* ── o modal ─────────────────────────────────────────────────────────────── */

.aj-modal { width: min(600px, 100%); }
.aj-marca {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--primary-soft); color: var(--primary);
}
.aj-rot { display: block; font-weight: 600; font-size: var(--f-corpo); margin-bottom: var(--e1); }
.aj-ajuda { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; margin: 0 0 var(--e3); }
.aj-ajuda b { font-weight: 600; color: var(--ink); }

.aj-txt {
  width: 100%; padding: var(--e3) var(--e4); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--body); font-size: var(--f-corpo); line-height: 1.65;
  color: var(--ink); resize: vertical; min-height: 118px;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.aj-txt::placeholder { color: var(--faint-ink); }
.aj-txt:focus { outline: 0; border-color: var(--primary-line); box-shadow: var(--foco); }

.aj-linha { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); flex-wrap: wrap; }
.aj-gratis {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--f-apoio); color: var(--ok-ink);
}
.aj-conta {
  margin-left: auto; font-family: var(--mono); font-size: var(--f-micro);
  letter-spacing: 0.08em; color: var(--faint-ink);
}
.aj-conta.perto { color: var(--warn-ink); }

/* ── trabalhando ─────────────────────────────────────────────────────────── */

.aj-trab { text-align: center; padding: var(--e5) 0 var(--e3); }
.aj-trab .t { font-size: var(--f-leitura); font-weight: 600; margin-top: var(--e4); }
.aj-trab p { font-size: var(--f-apoio); color: var(--dim-ink); margin: 6px auto var(--e4); max-width: 40ch; }
.aj-etapa {
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.06em;
  color: var(--faint-ink); margin-top: var(--e3); min-height: 16px;
}

/* ── a confirmacao de custo ──────────────────────────────────────────────── */

.ajc-topo { margin-bottom: var(--e4); }
.ajc-selo {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok-ink);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ajc-topo h3 { font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.02em; margin: var(--e3) 0 0; }
.ajc-topo p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e2) 0 0; }

.ajc-pedido {
  border-left: 3px solid var(--primary-line); padding: 2px 0 2px var(--e3);
  margin-bottom: var(--e4);
}
.ajc-pedido span {
  display: block; font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink); margin-bottom: var(--e1);
}
.ajc-pedido p { font-size: var(--f-apoio); color: var(--dim-ink); margin: 0; line-height: 1.6; }

.ajc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.ajc-n {
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-sutil); padding: var(--e3); text-align: center;
}
.ajc-n b {
  display: block; font-family: var(--brand); font-size: var(--f-tela); font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.ajc-n span { display: block; font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e2); }
.ajc-n.t-ok b { color: var(--ok-ink); }
.ajc-n.t-novo b { color: var(--primary); }
.ajc-n.t-fora b { color: var(--faint-ink); }

.ajc-nota { font-size: var(--f-apoio); color: var(--faint-ink); margin: var(--e3) 0 0; }

/* A perda usa AMBAR e nao vermelho: nada quebrou, e a acao continua sendo uma
   escolha legitima. Vermelho aqui leria como erro do sistema. */
.ajc-perda {
  margin-top: var(--e4); padding: var(--e4);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--r); background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.ajp-cab { display: flex; align-items: center; gap: var(--e2); color: var(--warn-ink); }
.ajp-cab b { font-size: var(--f-corpo); font-weight: 600; }
.ajc-perda p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e2) 0 var(--e2); }
.ajc-perda ul { margin: 0; padding-left: var(--e5); }
.ajc-perda li { font-size: var(--f-apoio); color: var(--ink); line-height: 1.7; }

@container tela (max-width: 560px) {
  /* TRES COLUNAS TAMBEM NO CELULAR, desde 05.09.2026.
     Empilhar fazia sentido quando a contagem era a unica informacao do painel.
     Agora os NOMES do que entra e sai vem logo abaixo, e tres cartoes de
     largura cheia viram um muro de 250px entre o leitor e o conteudo que ele
     abriu o modal para conferir. Os cartoes sao curtos: cabem. */
  .ajc-nums { grid-template-columns: repeat(3, 1fr); }
  .ajc-n { padding: var(--e2); }
  .sec-cab.com-ajuste { grid-template-columns: 1fr; }
  .sec-cab.com-ajuste .bt-ajustar { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--e3); }
}

/* A nota de derivado envelhecido. Ambar, nao vermelho: o Manual antigo nao esta
   quebrado, ele so descreve a versao anterior do plano. */
.nota-acao.nota-av { color: var(--warn-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
 * FAIXA DE INTRODUÇÃO DA ABA
 *
 * Ela precisa ser lida sem competir com o conteudo que explica. Por isso: filete
 * de cor a esquerda em vez de contorno inteiro, fundo quase branco, e nenhuma
 * sombra. Um cartao com elevacao disputaria a atencao com os cartoes de dados
 * que vem logo abaixo, e a explicacao passaria a parecer o assunto da aba.
 *
 * A COR VEM DO RELATORIO (`--fam`), nao do sistema: em azul fixo ela parecia
 * chrome da plataforma colado dentro do documento, brigando com o selo e com o
 * sublinhado da aba logo acima. Ambar no Raio-X, roxo no Plano.
 * ═════════════════════════════════════════════════════════════════════════ */

.intro {
  position: relative;
  /* `center` e nao `flex-start`: o quadrado de 46px e mais alto que a primeira
     linha de texto, e alinhado ao topo ele deixava o bloco pendurado. */
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4) var(--e3) calc(var(--e4) + 3px);
  margin-bottom: var(--e5);
  border-radius: var(--r);
  background: var(--fam-soft, var(--primary-soft));
  /* Para o colapso da saida: sem isto o conteudo escapa da altura zerada. */
  overflow: hidden;
  transition:
    height var(--t-medio) var(--curva),
    opacity var(--t-rapido) var(--curva),
    transform var(--t-medio) var(--curva),
    margin-bottom var(--t-medio) var(--curva),
    padding var(--t-medio) var(--curva);
}

/* O FILETE E UM PSEUDO-ELEMENTO, e nao `border-left`.
 *
 * Borda nao anima escala, entao com `border-left` ele so podia aparecer junto
 * com o resto. Como elemento, ele CRESCE de cima para baixo na entrada, e o
 * olho segue o tracado ate o texto: e o mesmo gesto de sublinhar uma frase
 * antes de le-la. */
.intro::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--fam, var(--primary));
  transform-origin: top;
}

/* Havia um brilho que atravessava a faixa uma vez na entrada. O Salto 2
   tirou: o filete crescendo e o texto entrando em escada já dizem "apareceu
   algo", e o brilho era o único degradê animado da plataforma. */

/* A ENTRADA roda toda vez que o painel volta a ser exibido, porque `display:
   none` reinicia animacao. E o comportamento certo: a faixa se reapresenta na
   aba que a pessoa acabou de abrir, que e o instante em que ela importa. */
.aba-painel.on .intro { animation: intro-entra 0.22s var(--curva) both; }
.aba-painel.on .intro::before { animation: intro-filete 0.18s var(--curva) 0.04s both; }
.aba-painel.on .intro-ic { animation: intro-ic 0.2s var(--curva) 0.06s both; }
.aba-painel.on .intro-o { animation: intro-texto 0.18s var(--curva) 0.08s both; }
.aba-painel.on .intro-como { animation: intro-texto 0.18s var(--curva) 0.1s both; }
.aba-painel.on .intro-x { animation: intro-texto 0.18s var(--curva) 0.12s both; }

@keyframes intro-entra {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-filete {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes intro-ic {
  0%   { opacity: 0; transform: scale(0.55) rotate(-14deg); }
  62%  { opacity: 1; transform: scale(1.07) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes intro-texto {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* A SAIDA é uma varrida para a direita antes de encolher: o gesto acompanha o
   botao que a dispensou, que fica na direita. Só encolher parecia a faixa
   desabando; varrer parece a pessoa ter empurrado ela para fora. */
.intro.saindo {
  height: 0; opacity: 0; transform: translateX(26px);
  margin-bottom: 0; padding-top: 0; padding-bottom: 0;
}
.intro.saindo::after { display: none; }

/* O ICONE COM CONTENTOR, e nao solto.
 *
 * Em 16px, sozinho ao lado de duas linhas de texto, ele sumia: virava um risco
 * cinza que ninguem registra. O problema nao era so o tamanho, era a AUSENCIA
 * DE PESO: um tracado fino de 2px nao segura o canto de um bloco. Dentro de um
 * quadrado tingido ele passa a ser o objeto que a pessoa ve antes de ler, e o
 * bloco ganha um ponto de entrada. */
.intro-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: var(--r);
  background: color-mix(in srgb, var(--fam, var(--primary)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam, var(--primary)) 22%, transparent);
  color: var(--dim-ink);
  line-height: 0;
}
.intro-ic .ic { width: var(--ic-xl); height: var(--ic-xl); }
.intro-txt { min-width: 0; flex: 1; }

.intro-o { font-size: var(--f-corpo); line-height: 1.6; color: var(--ink); margin: 0; }
/* O "como usar" em mono e menor: ele e uma instrucao, nao continuacao da frase
   anterior, e a troca de familia diz isso antes de a pessoa ler. */
.intro-como {
  /* PROSA, e prosa se lê na fonte de leitura.
     Isto já esteve em `var(--mono)`: uma frase inteira, com maiúscula e ponto
     final, desenhada na fonte de código. Mono aqui serve para rótulo curto em
     caixa alta, onde a largura fixa alinha coluna; numa frase ela só afasta o
     texto do resto da interface. A hierarquia vem do tamanho e da cor. */
  font-family: var(--brand); font-size: var(--f-apoio); line-height: 1.6;
  color: var(--dim-ink); margin: var(--e2) 0 0;
}

.intro-x {
  flex-shrink: 0; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-xs);
  border: 0; background: none; cursor: pointer; color: var(--faint-ink);
  opacity: 0.55;
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva),
              opacity var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}
/* Ele so fica evidente quando a mao chega perto: um "x" em destaque permanente
   convida a fechar antes de ler, que e o contrario do que a faixa quer. */
.intro:hover .intro-x { opacity: 1; }
.intro-x:hover {
  background: color-mix(in srgb, var(--fam, var(--primary)) 14%, transparent);
  color: var(--ink);
  transform: rotate(90deg);
}
.intro-x:focus-visible { outline: 2px solid var(--fam, var(--primary)); outline-offset: 2px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aba-painel.on .intro,
  .aba-painel.on .intro::before,
  .aba-painel.on .intro-ic,
  .aba-painel.on .intro-o,
  .aba-painel.on .intro-como,
  .aba-painel.on .intro-x { animation: none; }
  .intro-x:hover { transform: none; }
}

@container tela (max-width: 560px) {
  .intro { padding: var(--e3) var(--e3) var(--e3) calc(var(--e3) + 3px); gap: var(--e2); }
  .intro-como { font-size: var(--f-micro); }
  /* No toque nao existe hover, e o "x" invisivel viraria um botao secreto. */
  .intro-x { opacity: 1; }
  /* A FRASE CONTORNA O ÍCONE (02.10.2026, ronda de texto espremido). Em
     linha, o quadrado de 46px e o "x" de 28px tiravam 90px da frase: a 375px
     de tela ela ficava com 194px, seis linhas de 20 letras. Agora o ícone
     flutua à esquerda, o "x" vai para o canto e a frase usa a largura toda
     depois das duas primeiras linhas. O `::before` guarda o lugar do "x". */
  .intro { display: block; }
  .intro-ic { float: left; width: 36px; height: 36px; margin: 0 var(--e3) var(--e1) 0; }
  /* `.intro >` para vencer a regra da área de toque (`.intro-x { position:
     relative }`, mais abaixo): o absoluto também segura o `::after` dela. */
  .intro > .intro-x { position: absolute; top: var(--e2); right: var(--e2); }
  .intro-txt::before { content: ''; float: right; width: 24px; height: 20px; }
}

/* Em papel a faixa nao existe: ela explica como NAVEGAR uma tela, e o PDF nao
   tem abas para navegar. E a mesma regra que ja vale para a barra de abas. */
@media print {
  .intro { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * O PALCO — esperar e receber ocupam a tela inteira
 *
 * Antes o cartao de geracao era um bloco encostado no cabecalho, com a pagina
 * vazia embaixo. Numa espera de dois minutos a pessoa fica olhando uma caixinha
 * no topo e um oceano de branco. Esperar e o assunto da tela, entao a tela e o
 * palco: centrado nos DOIS eixos, em qualquer aparelho.
 *
 * `min-height` calculado e nao `100vh`: o cabecalho de 64px ja consumiu altura,
 * e `100vh` empurraria o conteudo para baixo criando rolagem numa tela que nao
 * deveria rolar. `100dvh` no lugar de `vh` porque no celular a barra do
 * navegador entra e sai, e `vh` congela o valor da barra ESCONDIDA: o cartao
 * ficava cortado por baixo enquanto a barra estivesse visivel.
 * ═════════════════════════════════════════════════════════════════════════ */

.palco {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: calc(100dvh - 64px - 76px);
  padding: var(--e5) 0;
}
@supports not (height: 100dvh) {
  .palco { min-height: calc(100vh - 64px - 76px); }
}

/* ── a espera ────────────────────────────────────────────────────────────── */

/* A ESPERA FICA NO CLARO, por decisão do dono depois de ver as duas. O palco
   escuro deixava a nébula mais bonita e a tela toda mais pesada; no claro ela
   vira uma nuvem de cor no papel, que combina com a entrega que vem logo
   depois. O que compensa a perda de contraste é a presença, subida no
   `criarNebula` da espera, e não uma troca de fundo. */
.gerando {
  width: 100%; max-width: 460px; text-align: center;
}
.ger-olho {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--e2);
}
.gerando h1 {
  font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.2; margin: 0; text-wrap: balance;
}
.ger-sub {
  font-size: var(--f-apoio); color: var(--dim-ink);
  margin: var(--e3) auto 0; max-width: 40ch; line-height: 1.6;
}

/* AS ETAPAS CENTRAM COMO BLOCO, e o texto dentro delas continua alinhado a
   esquerda. Centrar cada linha deixaria a coluna de simbolos serrilhada, e o
   olho perde a lista de vista: e o bullet alinhado que faz uma lista parecer
   uma lista. `inline-block` da a ela a largura do proprio conteudo. */
.gerando .etapas {
  display: inline-block; text-align: left; margin-top: var(--e2);
}
.gerando .barra { margin: var(--e5) 0 var(--e3); }
/* O aviso da demora (01.10.2026) mora logo abaixo da barra que parou, e lê
   como parágrafo: centrado ele viraria slogan, e é uma explicação. */
.ger-demora .aviso { margin: var(--e4) 0 0; text-align: left; line-height: 1.55; }
/* A falha veste o cartão inteiro, não só a nébula: o olho e a barra dizem
   "parou" no mesmo tom do ✕ da etapa. */
.ger-olho.parou { color: var(--danger-ink); }
.ger-barra.parou .barra i { background: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
 * O MOMENTO DA ENTREGA
 * ═════════════════════════════════════════════════════════════════════════ */

.entrega {
  position: relative;
  width: 100%; max-width: 500px;
  padding: var(--e6) var(--e5) var(--e5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  /* Duas sombras: a de baixo e elevacao, a de cima e um halo verde muito fraco
     que faz o cartao parecer aceso em vez de apoiado. */
  box-shadow: var(--shadow-pop), 0 0 0 6px var(--tom-ok-4);
  overflow: hidden;
  text-align: center;
}

/* A AURORA: um brilho radial atras do selo, na cor do sucesso, mais a trama de
   pontos que ja e o motivo da tela de entrada. Sem ela o cartao era um retangulo
   branco com texto centralizado, que e o desenho que qualquer sistema entrega. */
.entrega-aurora {
  position: absolute; inset: 0; pointer-events: none;
  background: transparent;
}
.entrega-corpo { position: relative; z-index: 1; }

/* ── o selo, com duas ondas que saem dele ────────────────────────────────── */

.entrega-selo {
  position: relative;
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto var(--e4);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--tom-ok-25);
  box-shadow: 0 6px 20px -6px var(--tom-ok-50);
  color: var(--ok-ink);
  animation: entrega-pop 0.55s var(--curva) both;
}
.entrega-selo .ic { position: relative; z-index: 1; }

/* As ondas nao ficam pulsando para sempre: duas, uma vez, e param. Pulso
   infinito num "pronto" diz que ainda esta acontecendo alguma coisa. */
.es-onda {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--tom-ok-50);
  animation: entrega-onda 1.5s var(--curva) 0.25s both;
}
.es-onda2 { animation-delay: 0.62s; }
@keyframes entrega-onda {
  from { transform: scale(1); opacity: 0.75; }
  to   { transform: scale(2.1); opacity: 0; }
}
@keyframes entrega-pop {
  0%   { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  62%  { transform: scale(1.09) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.entrega-olho {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ok-ink);
  margin-bottom: var(--e2);
}
.entrega h1 {
  font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.18; margin: 0; text-wrap: balance;
}
.entrega-emp {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--f-corpo); color: var(--dim-ink);
  margin: var(--e3) 0 0;
}
.entrega-emp .ic { color: var(--faint-ink); }

/* O filete some nas pontas: uma regua de ponta a ponta cortaria o cartao em
   dois; degradada, ela separa sem dividir. */
.entrega-linha {
  height: 1px; width: 72%; margin: var(--e4) auto 0;
  background: linear-gradient(90deg, transparent, var(--border) 22%, var(--border) 78%, transparent);
}
.entrega-sub {
  font-size: var(--f-apoio); color: var(--faint-ink);
  margin: var(--e4) auto var(--e5); max-width: 38ch; line-height: 1.6;
}
.entrega .btn { padding: var(--e3) var(--e5); }

/* A entrada escalonada, para o olho ler na ordem: aconteceu algo, o que
   aconteceu, de quem e, e so entao o botao. */
.entrega-corpo > *:not(.entrega-selo) { animation: entrega-sobe 0.55s var(--curva) both; }
.entrega-olho { animation-delay: 0.14s; }
.entrega h1 { animation-delay: 0.2s; }
.entrega-emp { animation-delay: 0.28s; }
.entrega-linha { animation-delay: 0.34s; }
.entrega-sub { animation-delay: 0.38s; }
.entrega .btn { animation-delay: 0.44s; }
@keyframes entrega-sobe {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* FIXO NA VIEWPORT, e nao dentro do cartao: o cartao precisa de
   `overflow: hidden` e recortava a explosao na propria borda. */
.entrega-fogos {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  pointer-events: none; z-index: 9998;
}

@media (prefers-reduced-motion: reduce) {
  .entrega-selo, .es-onda, .entrega-corpo > * { animation: none; }
  .es-onda { display: none; }
}

@media (max-width: 560px) {
  .palco { min-height: calc(100dvh - 56px - 40px); padding: var(--e4) 0; }
  .entrega { padding: var(--e5) var(--e4) var(--e4); }
  .entrega h1 { font-size: var(--f-secao); }
  .gerando h1 { font-size: var(--f-secao); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PENDÊNCIAS
 *
 * A tela usava a `.row` generica, a mesma da Biblioteca e do menu de
 * notificacoes. Numa lista de acervo isso e certo; numa FILA DE TRABALHO, nao:
 * a urgencia aparecia so como um tom de fundo no icone, e "para hoje" ficava
 * visualmente igual a "quando puder".
 *
 * O trilho colorido a esquerda e o que faz a fila ser lida de relance. O rotulo
 * escrito continua, para quem nao distingue as cores: cor sozinha nunca carrega
 * a informacao.
 * ═════════════════════════════════════════════════════════════════════════ */

.pend-cab {
  display: flex; align-items: flex-end; gap: var(--e5);
  flex-wrap: wrap; margin-bottom: var(--e5);
}
.pend-cab h1 { font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.pend-cab p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e2) 0 0; }

/* O TERMOMETRO: quantas coisas em cada faixa de urgencia. Ele responde
   "consigo fechar isso hoje?" antes de a pessoa ler um item sequer. */
.pend-termo { display: flex; gap: var(--e2); margin-left: auto; }
.pt-n {
  display: flex; flex-direction: column; align-items: center; gap: var(--e0);
  min-width: 74px; padding: var(--e2) var(--e3);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.pt-n b {
  font-family: var(--brand); font-size: var(--f-secao); font-weight: 600; line-height: 1;
  /* SEM `tabular-nums` AQUI. Ele dá a todo dígito a mesma largura, o que serve
     para números que se empilham numa coluna e precisam alinhar. Estes três
     ficam lado a lado, em cartões separados, e nunca alinham entre si: a
     largura fixa só abria um vão dentro do "17", porque o "1" passava a ocupar
     o espaço de um "7". */
}
.pt-n i {
  font-style: normal; font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--faint-ink);
}
.pt-n.t-ag { border-color: var(--tom-danger-25); background: var(--tom-danger-4); }
.pt-n.t-ag b { color: var(--danger-ink); }
.pt-n.t-pr { border-color: var(--tom-warn-35); background: var(--tom-warn-4); }
.pt-n.t-pr b { color: var(--warn-ink); }
.pt-n.t-qp b { color: var(--dim-ink); }

/* ── o grupo por empresa ─────────────────────────────────────────────────── */

.pend-grupo { margin-bottom: var(--e6); }
.pg-cab { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.pg-nome {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--ink);
}
.pg-n {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--e2);
  border-radius: var(--r-pill); background: var(--surface-hi);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
}
/* O filete come o resto da linha: e o que amarra o rotulo aos cartoes abaixo
   em vez de deixar um texto solto pairando sobre eles. */
.pg-linha { flex: 1; height: 1px; background: var(--border); }

.pend-lista { display: flex; flex-direction: column; gap: var(--e2); }

/* ── o cartao ────────────────────────────────────────────────────────────── */

.pcard {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4) var(--e3) calc(var(--e4) + 4px);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); cursor: pointer; overflow: hidden;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva),
              transform var(--t-rapido) var(--curva);
}
.pcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.pcard:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.pc-trilho { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.pcard.t-ag .pc-trilho { background: var(--danger); }
.pcard.t-pr .pc-trilho { background: var(--warn); }
.pcard.t-qp .pc-trilho { background: var(--border); }

.pc-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--r);
}
.pcard.t-ag .pc-ic { background: var(--tom-danger-8); color: var(--danger-ink); }
.pcard.t-pr .pc-ic { background: var(--tom-warn-12); color: var(--warn-ink); }
.pcard.t-qp .pc-ic { background: var(--primary-soft); color: var(--primary); }
.pcard[class*="fam-"] .pc-ic { background: var(--fam-soft); color: var(--fam-icone); }
/* O QUE É PARA AGORA PULSA TRÊS VEZES e para: chama o olho e não vira ruído. */
.pcard.t-ag .pc-trilho { animation: pend-pulso 1.4s var(--curva) 3; }
.pcard.t-ag .pc-ic { animation: pend-pulso-ic 1.4s var(--curva) 3; }
@keyframes pend-pulso { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 14px 2px var(--danger); } }
@keyframes pend-pulso-ic { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--tom-danger-8); } }
@media (prefers-reduced-motion: reduce) { .pcard.t-ag .pc-trilho, .pcard.t-ag .pc-ic { animation: none; } }

.pc-txt { flex: 1; min-width: 0; }
/* DENTRO DO CARTÃO, e o escopo não é enfeite: sem ele o `b` daqui alcançava o
   `<b>` do cabeçalho de página, que é onde mora o nome de quem está logado.
   "Bom dia, Cliente" saía com "Bom dia," em 27px e "Cliente" em 15px, e o
   Radar saía com "Mapeamento" grande e "Competitivo" pequeno. Duas telas
   estragadas por um seletor de cartão solto no espaço. */
.pcard .pc-cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pcard .pc-cab b { font-size: var(--f-corpo); font-weight: 600; }
.pc-urg {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--e0) var(--e2); border-radius: var(--r-xs);
}
.pcard.t-ag .pc-urg { background: var(--tom-danger-8); color: var(--danger-ink); }
.pcard.t-pr .pc-urg { background: var(--tom-warn-12); color: var(--warn-ink); }
/* `--dim-ink` e nao `--faint-ink`. Medido em 4.33 contra os 4.5 exigidos: o
   `--faint-ink` e calibrado contra a superficie BRANCA, e aqui ele fica sobre
   o `--surface-hi`, que ja e um degrau mais escuro. E maiuscula em 11px, que e
   o tamanho onde meio ponto de contraste decide se le ou nao. Os dois tokens
   acompanham o tema, entao a troca vale nos dois. */
.pcard.t-qp .pc-urg { background: var(--surface-hi); color: var(--dim-ink); }
.pc-dias {
  font-family: var(--mono); font-size: var(--f-micro);
  color: var(--faint-ink); font-variant-numeric: tabular-nums;
}
.pc-txt p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e0) 0 0; line-height: 1.55; }

.pc-acao {
  display: inline-flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.04em; color: var(--primary);
}
.pc-acao .ic { transition: transform var(--t-rapido) var(--curva); }
.pcard:hover .pc-acao .ic { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .pcard:hover { transform: none; }
  .pcard:hover .pc-acao .ic { transform: none; }
}

@container tela (max-width: 720px) {
  .pend-termo { margin-left: 0; width: 100%; }
  .pt-n { flex: 1; min-width: 0; }
  /* A acao vai para baixo do texto: espremida na lateral, ela partia o rotulo
     em duas linhas de uma palavra. */
  .pcard { flex-wrap: wrap; }
  .pc-txt { flex-basis: calc(100% - 38px - var(--e3)); }
  .pc-acao { margin-left: calc(38px + var(--e3)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RADAR 360° — a abertura e o formulário
 *
 * Tudo aqui sai dos tokens: espacamento na escala --e*, tipografia nos --f*,
 * raio nos --r*, e nenhuma fonte abaixo do piso de 12px. Os dois relatorios de
 * auditoria existem para que uma tela nova nao recomece a divergencia que eles
 * fecharam.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── A abertura ──────────────────────────────────────────────────────────
 *
 * ESTA TELA ERA UMA LANDING PAGE DENTRO DE UM APLICATIVO.
 *
 * Ela nasceu centralizada, dentro de `.palco`, que estica para a altura da
 * janela inteira: um medalhão redondo no topo, título em duas cores no meio da
 * tela, três promessas e um botão grande, tudo empilhado numa coluna de 560px
 * flutuando num vazio de 1440. Toda outra tela do produto é encostada à
 * esquerda e usa a largura que tem.
 *
 * A comparação que resolve não é com os relatórios, é com o ESTÚDIO: ele
 * também é porta de entrada de um gerador, e a forma dele é a da casa —
 * cabeçalho de tela fora, cartão dentro, e dentro do cartão as pastilhas no
 * alto, o título, a prosa, o que se recebe, e um rodapé com os fatos à
 * esquerda e a ação à direita.
 *
 * O Radar passa a ter essa mesma forma, e desde o segundo passo do salto ele
 * usa as MESMAS classes do Estúdio (`est-cab`, `est-core`, `est-core-pe`), e
 * não um `rd-cartao-*` paralelo: assim uma mudança no cartão do Estúdio chega
 * aqui sozinha, em vez de depender de alguém lembrar de copiá-la. Só as
 * `rd-entrega*` são daqui, porque só o Radar tem essas três linhas.
 *
 * A cor também entrou na regra: os checks eram verdes, que é a família do
 * Raio-X, dentro de uma tela roxa. Agora tudo puxa de `--fam`, que o `.radar`
 * já declara.
 * ─────────────────────────────────────────────────────────────────────── */


/* O `.chip` traz `margin-left: 8px` de quando ele só aparecia colado a um
   título; dentro de um flex com gap isso vira espaço dobrado de um lado só. */




/* LINHAS EMPILHADAS, E NÃO UMA GRADE DE TRÊS.
 *
 * A grade foi tentada e medida: com `minmax(220px, 1fr)` num painel de 592px o
 * navegador cabe DUAS colunas, e a terceira fica sozinha embaixo, órfã. Baixar
 * o mínimo até caberem três dá colunas de 190px, e aí cada frase quebra em
 * cinco linhas.
 *
 * É a mesma conclusão a que a versão anterior desta tela já tinha chegado, e
 * está registrada aqui para não se tentar a grade uma terceira vez: são três
 * FRASES, não três números. Frase se lê em linha. */
/* A COLUNA DO RÓTULO SE MEDE SOZINHA, e ninguém escreve a largura dela.
   Ver a nota em `.rd-entrega-r`: toda largura digitada aqui já quebrou uma
   vez. A lista é uma grade de três colunas, e cada linha é uma `subgrid` que
   reusa as trilhas da mãe: a coluna do meio nasce da palavra mais larga dos
   três rótulos, e continua nascendo dela quando o texto mudar. */
/* A ORDEM DA VARREDURA. Tres passos, e aqui a numeracao e informacao de
   verdade: o Radar abre os sites ANTES de cruzar com busca, e cruza ANTES de
   confrontar com o que o cliente informou. Trocar a ordem mudaria o resultado.
   E por isso que estes levam numero e as tres entregas abaixo nao levam:
   aquelas saem juntas, e numerar o que nao tem ordem inventa informacao. */
.rd-passos {
  list-style: none; counter-reset: passo;
  display: flex; flex-direction: column; gap: var(--e3);
  margin: 0 0 var(--e5); padding: 0;
}
.rd-passos li {
  counter-increment: passo;
  display: grid; grid-template-columns: 22px 1fr; gap: var(--e3);
  align-items: baseline;
}
.rd-passos li::before {
  content: counter(passo);
  /* --dim-ink, e nao --fam: a familia do motor nunca vai em texto, so no fundo
     de um icone, num fio ou num ponto. O verificador pegou este exato numero. */
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  color: var(--dim-ink); text-align: right;
}
/* AS DUAS LINHAS FICAM NA COLUNA 2. Sem isto o `span` desce para a coluna do
   numero, que tem 22px, e a frase inteira sai uma letra por linha. Medido no
   navegador antes de existir esta regra. */
.rd-passos b, .rd-passos span { grid-column: 2; }
.rd-passos b { display: block; font-size: var(--f-corpo); color: var(--ink); font-weight: 600; }
.rd-passos span { display: block; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6; }

/* A MESMA RECEITA SERVE AS DUAS TELAS. O Radar aberto e o módulo travado
   listam entregas do mesmo jeito — ícone, rótulo e frase alinhados em três
   colunas de subgrade — e escrever duas vezes seria abrir espaço para elas
   discordarem no próximo ajuste. */
.rd-entregas, .tv-entregas {
  display: grid; grid-template-columns: max-content max-content 1fr;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e5);
}
.rd-entrega, .tv-entrega {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: start;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
/* O fundo já era `--fam-soft`, a 7%; só o traço tinha ficado cinza, e com isso
   a caixinha tingida de roxo carregava um ícone que não combinava com ela.
   `--fam-icone` é a variante medida contra o fundo tingido, e não a viva. */
.rd-entrega-ic, .tv-entrega-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: var(--fam-soft); color: var(--fam-icone, var(--dim-ink));
}
/* A tela travada só recebe `--fam` (uma cor); os dois tons de apoio saem dela,
   em vez de a tela ter de conhecer os três valores de cada família. */
.tv {
  --fam-soft: color-mix(in srgb, var(--fam, var(--primary)) 8%, transparent);
  --fam-icone: color-mix(in srgb, var(--fam, var(--primary)) 78%, #000);
}
.tv-entregas { margin-bottom: var(--e4); }
/* O lugar do número, quando não há número: uma frase na largura do cartão em
   vez de um algarismo de 40px dizendo que a conta está vazia. */
.ps-vazio { max-width: 34ch; line-height: 1.5; }
/* O rótulo e a frase dividem a linha: o rótulo com largura fixa faz os três
   textos começarem na mesma coluna, que é o que dá o alinhamento de lista. */
.rd-entrega-r, .tv-entrega-r {
  /* SEM LARGURA ESCRITA. Ela já foi 11ch, e o navegador partia a palavra no
     meio: "CONCORREN / TE". Virou 14ch, e aí a quebra passou para o espaço:
     "POR / CONCORRENTE", duas linhas contra uma dos outros dois rótulos, em
     TODA resolução e não só no tablet. Medido: 41px de altura contra 22px, com
     966px de janela.
     A causa das duas tentativas é a mesma: `ch` não conta o `letter-spacing`,
     e este rótulo tem `--tr-widest`. A conta em pixels dava 126 onde as 14ch
     entregavam 101. Qualquer terceiro número seria o mesmo chute com outra
     folga, então a largura saiu daqui e virou trilha de grade. O `nowrap`
     fica como trava: se um dia a coluna encolher, a palavra some pela borda em
     vez de rachar calada. */
  padding-top: 3px; white-space: nowrap;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink);
}
.rd-entrega p, .tv-entrega p {
  margin: 0; flex: 1; font-size: var(--f-apoio); color: var(--prosa); line-height: 1.6;
  padding-top: 2px;
}

@container tela (max-width: 620px) {
  /* Sem largura para as três colunas na mesma linha, o rótulo sobe e vira
     cabeçalho do item. Aqui a grade some de vez: duas colunas, com a frase
     ocupando a linha de baixo inteira. */
  .rd-entregas, .tv-entregas { grid-template-columns: 1fr; }
  .rd-entrega, .tv-entrega { grid-template-columns: max-content 1fr; align-items: center; }
  .rd-entrega-r, .tv-entrega-r { padding-top: 0; }
  .rd-entrega p, .tv-entrega p { grid-column: 1 / -1; padding-top: var(--e2); }
}



/* ── O formulário ────────────────────────────────────────────────────────── */

.rd-azul { color: var(--primary); font-weight: 600; }

.rd-bloco { margin-bottom: var(--e5); }
.rd-bloco-cab {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e5); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--border);
}
.rd-bloco-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--r);
  background: var(--primary-soft); color: var(--primary);
}
.rd-bloco-cab h2 { font-size: var(--f-leitura); font-weight: 600; margin: 0; }
.rd-bloco-cab .chip { margin-left: auto; }
.rd-nota { font-size: var(--f-apoio); color: var(--dim-ink); margin: 0 0 var(--e4); }

/* Duas colunas que viram uma sozinhas. O `min-width: 0` nos filhos e o que
   impede um textarea longo de empurrar a coluna e estourar a grade. */
.rd-linhas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e4); margin-bottom: var(--e4);
}
.rd-linhas > * { min-width: 0; }

.rd-campo { display: block; margin-bottom: var(--e4); }
.rd-linhas .rd-campo { margin-bottom: 0; }
.rd-largo { grid-column: 1 / -1; }

.rd-rot {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--f-apoio); font-weight: 600; color: var(--ink);
  margin-bottom: var(--e2);
}
.rd-rot b { color: var(--danger-ink); font-weight: 600; }
.rd-rot i {
  font-style: normal; font-weight: 400; font-size: var(--f-micro);
  color: var(--faint-ink); margin-left: auto;
}
.rd-rot.t-ok { color: var(--ok-ink); }
.rd-rot.t-risco { color: var(--danger-ink); }

.rd-campo input,
.rd-campo textarea,
.rd-campo select {
  width: 100%; padding: var(--e3) var(--e3); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--body); font-size: var(--f-corpo); color: var(--ink);
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.rd-campo textarea { resize: vertical; line-height: 1.6; }
.rd-campo input::placeholder, .rd-campo textarea::placeholder { color: var(--faint-ink); }
.rd-campo input:focus, .rd-campo textarea:focus, .rd-campo select:focus {
  outline: 0; border-color: var(--primary-line); box-shadow: var(--foco);
}
.rd-dica { display: block; font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e2); line-height: 1.5; }

/* A LEITURA DO PRECO, em mono e verde: ela e a confirmacao de que o sistema
   entendeu, e a cor separa o eco do sistema do texto que a pessoa escreveu. */
.rd-leitura {
  display: block; font-family: var(--mono); font-size: var(--f-micro);
  color: var(--ok-ink); margin-top: var(--e2); min-height: 16px;
}
.rd-leitura.t-vago { color: var(--faint-ink); }

/* ── A caixa de exemplo dos reviews ──────────────────────────────────────── */

.rd-exemplo {
  padding: var(--e4); margin-bottom: var(--e4);
  border: 1px solid var(--primary-line); border-radius: var(--r);
  background: var(--primary-soft);
}
.rd-ex-cab { display: flex; align-items: center; gap: var(--e2); color: var(--primary); }
.rd-ex-cab b { font-size: var(--f-corpo); font-weight: 600; }
.rd-exemplo p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e2) 0 var(--e3); line-height: 1.6; }
.rd-ex-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e2); }
.rd-ex {
  padding: var(--e3); border-radius: var(--r-xs); background: var(--surface);
  border: 1px solid var(--border);
}
.rd-ex span {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; margin-bottom: var(--e2);
}
.rd-ex i { font-size: var(--f-apoio); color: var(--dim-ink); }
.rd-ex.t-ruim { border-color: var(--tom-danger-25); }
.rd-ex.t-ruim span { color: var(--danger-ink); }
.rd-ex.t-bom { border-color: var(--tom-ok-35); }
.rd-ex.t-bom span { color: var(--ok-ink); }

/* ── O cartão de concorrente ─────────────────────────────────────────────── */

.rd-conc {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-sutil); margin-bottom: var(--e3);
  overflow: hidden;
}
.rd-conc-cab {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.rd-conc-n {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--r-xs);
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
}
/* O nome fica no CABECALHO e nao no corpo: e o unico campo obrigatorio do
   cartao, e no cabecalho ele identifica o bloco enquanto a pessoa rola. */
.rd-conc-nome {
  flex: 1; min-width: 0; border: 0; background: none;
  font-family: var(--body); font-size: var(--f-corpo); font-weight: 600; color: var(--ink);
  padding: var(--e1) 0;
}
.rd-conc-nome:focus { outline: 0; box-shadow: 0 1px 0 var(--primary); }
.rd-conc-nome::placeholder { color: var(--faint-ink); font-weight: 400; }
.rd-conc-x {
  flex-shrink: 0; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  border: 0; background: none; cursor: pointer; color: var(--faint-ink);
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.rd-conc-x:hover { background: var(--tom-danger-8); color: var(--danger-ink); }
.rd-conc-x:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

.rd-conc-corpo { padding: var(--e4); }
.rd-conc-corpo .rd-linhas:last-child, .rd-conc-corpo .rd-campo:last-child { margin-bottom: 0; }

.rd-urls { display: flex; flex-direction: column; gap: var(--e2); }
.rd-mais-url {
  display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e2);
  border: 0; background: none; cursor: pointer; padding: var(--e1) 0;
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; color: var(--primary);
}
.rd-mais-url:hover { text-decoration: underline; }
.rd-mais-url:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── As pastilhas ────────────────────────────────────────────────────────── */

.rd-pastilhas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.rd-past {
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-family: var(--mono); font-size: var(--f-micro);
  color: var(--dim-ink);
  transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva),
              color var(--t-rapido) var(--curva);
}
.rd-past.t-ok:hover {
  border-color: var(--tom-ok-35); background: var(--tom-ok-8); color: var(--ok-ink);
}
.rd-past.t-risco:hover {
  border-color: var(--tom-danger-35); background: var(--tom-danger-8); color: var(--danger-ink);
}
.rd-past:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── O fecho ─────────────────────────────────────────────────────────────── */

.rd-fechar {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e4) var(--e5);
  border: 1px solid var(--primary-line); border-radius: var(--r-md);
  background: var(--primary-soft);
}
.rd-fechar-txt { flex: 1; min-width: 220px; }
.rd-fechar-txt b { display: block; font-size: var(--f-corpo); font-weight: 600; }
/* O QUE FALTA, dito enquanto se digita. Botao desabilitado sem explicacao e uma
   parede sem porta: a pessoa preenche, clica, nada acontece, e nao sabe por que. */
.rd-fechar-txt span { font-size: var(--f-apoio); color: var(--dim-ink); }
.rd-fechar-txt span.rd-ok { color: var(--ok-ink); font-family: var(--mono); font-size: var(--f-micro); }
.rd-fechar .btn { flex-shrink: 0; }

@container tela (max-width: 560px) {
  .rd-capa h1 { font-size: var(--f-tela); }
  .rd-fechar { padding: var(--e4); }
  .rd-fechar .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RADAR 360° — o relatório
 *
 * A familia dele e o TEAL: os quatro tons ja usados estavam tomados (ambar no
 * Raio-X, roxo no Plano, dourado no Conselho, verde no Mentor), e o teal e o
 * unico que nao colide com nenhum deles nem com a semantica de estado.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Toolbox, laranja. A única família que não existia: as quinze ferramentas
   usavam todas o azul da interface, então o módulo inteiro não tinha
   identidade nenhuma. */
.toolbox { --fam: #EA580C; --fam-text: #9A3412; --fam-soft: rgba(234, 88, 12, 0.07); --fam-icone:#9A3412; }

/* ── O DETALHE DE COR NA BIBLIOTECA ───────────────────────────────────────
 *
 * A identidade vivia só DENTRO de cada relatório. Na Biblioteca, que é onde a
 * pessoa escolhe qual abrir, tudo era cinza: ela só via a cor depois de entrar,
 * quando já não precisava dela para escolher.
 *
 * O selo é leve de propósito. Uma lista com sete cores fortes vira arco-íris e
 * deixa de ser lista; o filete à esquerda basta para o olho agrupar por tipo,
 * e o texto continua no tom escuro medido de cada família. */
.chip.fam {
  background: var(--fam-soft); color: var(--ink);
  border: 1px solid transparent; border-left: 2px solid var(--fam);
  padding-left: var(--e2);
}

/* Radar 360°, roxo. */
.radar { --fam: #7C3AED; --fam-text: #6D28D9; --fam-soft: rgba(124, 58, 237, 0.07); --fam-icone:#6D28D9; }

.rr-olho {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim-ink);
  margin-bottom: var(--e2);
}

/* ── A COBERTURA, que substitui o score inventado do MVP ─────────────────── */

.rr-cob {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  padding: var(--e5); margin-bottom: var(--e5);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}

/* O arco e `conic-gradient` e nao SVG: um gradiente conico JA e um arco
   proporcional, e o SVG seria tres elementos e uma conta de circunferencia
   para chegar no mesmo lugar. */
/* Um valor inicial seguro para o percentual do anel do Radar. Ver a nota
   dentro de `.rr-anel`. */
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }

.rr-anel {
  position: relative; flex-shrink: 0;
  width: 116px; height: 116px; border-radius: 50%;
  /* ⚠️ `--pct` vem INLINE de `radar-render.js`, e é o único token do arquivo que
     não é declarado aqui. Sem o `@property` acima, um anel renderizado sem esse
     inline invalidaria o `background` inteiro e o anel simplesmente sumiria da
     tela, sem erro nenhum. Com ele, o pior caso vira um anel em zero por cento,
     que é feio mas é honesto. E de quebra o valor passa a ser animável. */
  background: conic-gradient(var(--rr-cor) calc(var(--pct) * 1%), var(--surface-hi) 0);
  display: grid; place-items: center;
}
.rr-anel-miolo {
  width: 88px; height: 88px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rr-anel-miolo b {
  font-family: var(--brand); font-size: var(--f-heroi); font-weight: 600; line-height: 1;
  color: var(--rr-cor); font-variant-numeric: tabular-nums;
}
.rr-anel-miolo i {
  font-style: normal; font-family: var(--mono); font-size: var(--f-micro);
  color: var(--faint-ink); margin-top: var(--e0);
}

.rr-cob { --rr-cor: var(--faint-ink); }
.rr-cob.t-ok { --rr-cor: var(--ok-forte); }
.rr-cob.t-meio { --rr-cor: var(--warn); }
.rr-cob.t-ruim { --rr-cor: var(--danger); }
.rr-cob.t-vago { --rr-cor: var(--faint); }

.rr-cob-txt { flex: 1; min-width: 240px; }
.rr-cob-txt h3 { font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.rr-cob-txt p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e2) 0 0; line-height: 1.6; }

.rr-dominios { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.rr-dom {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-xs);
  font-family: var(--mono); font-size: var(--f-micro);
  border: 1px solid var(--border); background: var(--surface-sutil);
}
.rr-dom.t-ok { color: var(--ok-ink); border-color: var(--tom-ok-25); }
/* Pagina que NAO abriu continua na lista, riscada: silencio viraria a impressao
   de que o concorrente foi visto. */
.rr-dom.t-off { color: var(--faint-ink); text-decoration: line-through; }

.rr-kpis { margin-bottom: var(--e5); }
.rr-kpis .v.t-fam { color: var(--ink); font-size: var(--f-secao); }

/* ── A lacuna ────────────────────────────────────────────────────────────── */

.rr-lacuna {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e4) var(--e5); margin-bottom: var(--e5);
  border-radius: var(--r-md);
  background: var(--fam-soft);
  border: 1px solid color-mix(in srgb, var(--fam) 22%, transparent);
}
.rr-lacuna-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: var(--r);
  background: var(--surface); color: var(--dim-ink);
  border: 1px solid color-mix(in srgb, var(--fam) 25%, transparent);
}
.rr-lacuna p { font-size: var(--f-corpo); line-height: 1.65; margin: 0; font-weight: 500; }

/* ── O que fazer agora ───────────────────────────────────────────────────── */

.rr-agora {
  border: 1px solid var(--tom-ok-25); border-radius: var(--r-md);
  background: var(--tom-ok-4); overflow: hidden;
}
.rr-agora > header {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5);
  background: var(--tom-ok-8);
  border-bottom: 1px solid var(--tom-ok-18);
}
.rr-agora > header .rr-olho { color: var(--ok-ink); margin-bottom: var(--e0); }
.rr-agora > header b { font-size: var(--f-corpo); font-weight: 600; }
.rr-agora-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ok-forte); color: #fff;
}
.rr-agora .btn { margin: 0 var(--e5) var(--e5); width: calc(100% - var(--e5) * 2); justify-content: center; }

.rr-passos { list-style: none; padding: var(--e4) var(--e5); margin: 0; display: flex; flex-direction: column; gap: var(--e2); }
.rr-passos li {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.rr-passo-n {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--fam-soft); color: var(--dim-ink);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
}
.rr-passos i {
  display: block; font-style: normal;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
  margin-bottom: var(--e0);
}
.rr-passos p { font-size: var(--f-corpo); line-height: 1.6; margin: 0; }

/* ── Prosa, cartões e pares ──────────────────────────────────────────────── */

.rr-prosa { margin-bottom: var(--e5); }
.rr-prosa p { font-size: var(--f-corpo); line-height: 1.75; color: var(--ink); margin: 0 0 var(--e3); }

.rr-par {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e3); margin-bottom: var(--e5);
}
.rr-par > * { min-width: 0; }

.rr-cartao {
  padding: var(--e4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  border-left: 3px solid var(--border);
}
.rr-cartao p { font-size: var(--f-corpo); line-height: 1.65; margin: 0; }
.rr-cartao.t-gold { border-left-color: var(--gold); background: var(--tom-ouro-4); }
.rr-cartao.t-gold .rr-olho { color: var(--gold-ink); }
.rr-cartao.t-risco { border-left-color: var(--danger); background: var(--tom-danger-4); }
.rr-cartao.t-risco .rr-olho { color: var(--danger-ink); }
.rr-cartao.t-ok { border-left-color: var(--ok); background: var(--tom-ok-4); }
.rr-cartao.t-ok .rr-olho { color: var(--ok-ink); }

.rr-roi { display: flex; align-items: flex-start; gap: var(--e4); margin-bottom: var(--e5); }
.rr-roi-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tom-ouro-18); color: var(--gold-ink);
}

/* ── Caixas de lista ─────────────────────────────────────────────────────── */

.rr-cx {
  padding: var(--e4); margin-bottom: var(--e3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.rr-cx ul, .rr-cx ol { margin: 0; padding-left: var(--e4); }
.rr-cx li { font-size: var(--f-corpo); line-height: 1.65; margin-bottom: var(--e2); }
.rr-cx li:last-child { margin-bottom: 0; }
.rr-cx > p { font-size: var(--f-corpo); line-height: 1.65; margin: 0; }
.rr-cx.t-ok { background: var(--tom-ok-4); border-color: var(--tom-ok-25); }
.rr-cx.t-ok .rr-olho { color: var(--ok-ink); }
.rr-cx.t-ok li::marker { color: var(--ok); }
.rr-cx.t-risco { background: var(--tom-danger-4); border-color: var(--tom-danger-25); }
.rr-cx.t-risco .rr-olho { color: var(--danger-ink); }
.rr-cx.t-risco li::marker { color: var(--danger); }
.rr-cx.t-gold { background: var(--tom-ouro-8); border-color: var(--tom-ouro-25); }
.rr-cx.t-gold .rr-olho { color: var(--gold-ink); }
.rr-cx.t-gold li::marker { color: var(--gold); }
.rr-cx.t-din { background: var(--tom-ok-4); border-color: var(--tom-ok-25); }
.rr-cx.t-din .rr-olho { color: var(--ok-ink); }

.rr-quick { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e2); }
.rr-quick li {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e3); border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--tom-ok-25);
  font-size: var(--f-corpo); line-height: 1.6;
}
.rr-quick .ic { color: var(--ok-ink); flex-shrink: 0; margin-top: var(--e0); }

/* ── A etiqueta de procedência ───────────────────────────────────────────── */

/* Ela e a razao de o Radar ser inteligencia e nao opiniao. Vem DEPOIS do texto
   e em corpo menor: a informacao lidera, a origem confirma. */
.rr-org {
  display: inline-block; margin-left: var(--e2); padding: var(--e0) var(--e2);
  border-radius: var(--r-xs); vertical-align: middle;
  font-family: var(--mono); font-size: var(--f-micro);
  background: var(--surface-hi); color: var(--faint-ink);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   E ELA SAI DO MEIO DA FRASE (22.09.2026)

   Inline, a etiqueta interrompe: "…volume de clientes de uma só vez. [Dedução
   nossa] Economia de Escala: ao atender turmas inteiras…". O olho tropeça no
   selo e precisa procurar onde a frase seguinte começa — e isso acontece em
   metade dos itens de uma lista do Radar.

   Na margem, ela vira coluna: o texto corre com a medida de leitura à
   esquerda, os selos ficam alinhados à direita, e a procedência se lê de
   relance sem entrar no caminho.

   `max-content` na segunda coluna para o selo não roubar largura do texto, e
   `baseline` para ele nascer na linha da primeira frase e não no meio do
   parágrafo.

   ⚠️ SÓ ONDE O BLOCO TEM LARGURA, E QUEM MEDE É O BLOCO.

   Primeira tentativa usou `@media (min-width: 900px)`, que pergunta o tamanho
   da JANELA. As mesmas listas aparecem em dois lugares de larguras opostas:
   na aba do concorrente, num bloco de mil pixels, e no SWOT, numa coluna de
   319. Num desktop largo a media query dizia sim para os dois, o selo tomava
   145px da coluna do SWOT e sobravam 180 para o texto — que saiu quebrando de
   duas em duas palavras. O print do dono mostrou as quatro colunas assim.

   `@container` pergunta ao PRÓPRIO bloco, que é a pergunta certa: a lista do
   concorrente responde mil e ganha as duas colunas; a do SWOT responde 319 e
   fica em uma, com o selo depois do texto. O mesmo vale no telefone sem
   precisar de outra regra. */
.rr-lista-org { container-type: inline-size; container-name: listaorg; }
@container listaorg (min-width: 620px) {
  .rr-lista-org li {
    /* `1fr` e não a medida de leitura: aqui a margem é OCUPADA pelo selo, e o
       texto pode tomar todo o resto. Com um teto, sobraria vazio entre o fim
       da frase e o selo — o buraco que esta mudança existe para não ter. */
    display: grid; grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--e2) var(--e5); align-items: baseline;
  }
  .rr-lista-org li .rr-org { margin-left: 0; justify-self: start; }
}
.rr-org.t-site { background: var(--tom-ok-12); color: var(--ok-ink); }
.rr-org.t-review { background: var(--fam-soft); color: var(--ink); }
.rr-org.t-dono { background: var(--tom-ouro-12); color: var(--gold-ink); }
/* O estilo do selo de inferência JÁ EXISTIA na linha abaixo: ele era desenhado
   no CSS e nunca chegava à tela, porque `itemComOrigem` o suprimia. Agora
   chega. Ver a nota lá. */
.rr-org.t-inferencia { background: var(--surface-hi); color: var(--faint-ink); }

/* ── Concorrentes ────────────────────────────────────────────────────────── */

.rr-cnav-barra {
  display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--border);
}
.rr-cnav {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-family: var(--body); font-size: var(--f-apoio); font-weight: 500;
  color: var(--dim-ink);
  transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva),
              background var(--t-rapido) var(--curva);
}
.rr-cnav:hover { border-color: color-mix(in srgb, var(--fam) 35%, transparent); }
.rr-cnav.on {
  border-color: var(--fam); background: var(--fam-soft);
  color: var(--ink); font-weight: 600;
}
.rr-cnav:focus-visible { outline: 2px solid var(--fam); outline-offset: 2px; }

/* O ponto NAO carrega a informacao sozinho: o nivel de ameaca aparece escrito
   no painel. Ele so ajuda a varrer a barra. */
.rr-ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rr-ponto.t-critico { background: var(--danger); }
.rr-ponto.t-alto { background: #ea580c; }
.rr-ponto.t-medio { background: var(--warn); }
.rr-ponto.t-baixo { background: var(--ok); }

.rr-cpainel { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
 *  O PDF DO RADAR ENTREGAVA UM CONCORRENTE DE QUATRO.
 *
 *  A navegação entre concorrentes é uma aba DENTRO da aba. A regra de
 *  impressão que abre os painéis (`html.modo-papel .aba-painel`) cuida do
 *  nível de fora e ninguém tinha cuidado deste: das oito abas, todas saíam, e
 *  dentro de "Concorrentes (4)" só o primeiro.
 *
 *  Medido numa auditoria com quatro concorrentes reais: o primeiro saía, e os
 *  outros três sumiam, e sempre o primeiro, independente de
 *  qual estivesse aberto na tela.
 *
 *  É pior que uma falha visível: o documento parece completo, com capa, data
 *  e as oito abas, e quem recebe não tem como saber que faltam três quartos
 *  da análise individual. Cada painel já traz o nome do concorrente no
 *  próprio cabeçalho, então empilhados eles se leem: o que faltava era
 *  deixá-los aparecer, e separar um do outro na folha.
 * ═══════════════════════════════════════════════════════════════════════════ */
html.modo-papel .rr-cpainel {
  display: block !important;
  break-inside: avoid;
  padding-top: var(--e5);
  border-top: 1px solid var(--border);
}
html.modo-papel .rr-cpainel:first-of-type { border-top: 0; padding-top: 0; }
/* A barra de navegação sai: no papel não se clica em concorrente. */
html.modo-papel .rr-cnav-barra { display: none !important; }
.rr-cpainel.on { display: block; animation: entra-subindo var(--t-medio) var(--curva) backwards; }

.rr-ccab {
  display: flex; align-items: flex-start; gap: var(--e4);
  margin-bottom: var(--e4); flex-wrap: wrap;
}
.rr-ccab > div { flex: 1; min-width: 220px; }
.rr-ccab h3 { font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.rr-ccab p { font-size: var(--f-apoio); color: var(--dim-ink); margin: var(--e2) 0 0; line-height: 1.6; }

.rr-ameaca {
  display: inline-flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  padding: var(--e2) var(--e3); border-radius: var(--r-pill);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600;
}
.rr-ameaca.t-critico { background: var(--tom-danger-12); color: var(--danger-ink); }
.rr-ameaca.t-alto { background: rgba(234, 88, 12, 0.12); color: #9a3412; }
.rr-ameaca.t-medio { background: var(--tom-warn-12); color: var(--warn-ink); }
.rr-ameaca.t-baixo { background: var(--tom-ok-12); color: var(--ok-ink); }

/* ── SWOT ────────────────────────────────────────────────────────────────── */

/* ⚠️ O SWOT SÃO QUATRO QUADRANTES, E QUATRO NÃO CABEM EM TRÊS.
   `auto-fit` com mínimo de 300px dava quatro colunas numa tela de 1440 e
   TRÊS numa de 1280 — com "Ameaças" sozinha na linha de baixo, do lado de
   dois buracos. É o mesmo órfão que eu tinha apontado na proposta do Codex,
   morando na nossa tela.
   E não é só feio: a SWOT se lê em par (forças contra fraquezas, oportunidades
   contra ameaças), e três colunas quebram os dois pares.
   Agora são quatro enquanto couber, DOIS assim que não couber (o par
   preservado), e um só no telefone. */
.rr-swot-grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
}
/* 1200 e não 1340: numa janela de 1440 o conteúdo tem ~1230px com a barra
   lateral aberta, e ali as quatro colunas ficam com ~295px cada — que é o que
   a tela tinha antes desta mexida, e ninguém reclamou. Cortar em 1340 jogava
   a resolução mais comum para duas colunas sem necessidade. */
@container tela (max-width: 1200px) {
  .rr-swot-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container tela (max-width: 640px) {
  .rr-swot-grade { grid-template-columns: minmax(0, 1fr); }
}
.rr-swot-grade > * { min-width: 0; }
.rr-swot {
  padding: var(--e4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  border-top: 3px solid var(--border);
}
.rr-swot > header {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--border);
}
.rr-swot > header b {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600;
}
.rr-swot > header i {
  font-style: normal; font-size: var(--f-micro);                          margin-left: auto;
}
.rr-swot ul { margin: 0; padding-left: var(--e4); }
.rr-swot li { font-size: var(--f-corpo); line-height: 1.65; margin-bottom: var(--e2); }
.rr-swot li:last-child { margin-bottom: 0; }
.rr-swot.t-ok { border-top-color: var(--ok); }
.rr-swot.t-ok > header, .rr-swot.t-ok li::marker { color: var(--ok-ink); }
.rr-swot.t-risco { border-top-color: var(--danger); }
.rr-swot.t-risco > header, .rr-swot.t-risco li::marker { color: var(--danger-ink); }
.rr-swot.t-fam { border-top-color: var(--fam); }
.rr-swot.t-fam > header, .rr-swot.t-fam li::marker { color: var(--ink); }
.rr-swot.t-gold { border-top-color: var(--gold); }
.rr-swot.t-gold > header, .rr-swot.t-gold li::marker { color: var(--gold-ink); }
.rr-swot > header i { color: var(--faint-ink); }

/* ── Ajuda ───────────────────────────────────────────────────────────────── */

.rr-ajuda {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  border-radius: var(--r); background: var(--fam-soft);
  border: 1px solid color-mix(in srgb, var(--fam) 18%, transparent);
}
.rr-ajuda > span { color: var(--ink); flex-shrink: 0; line-height: 0; margin-top: var(--e0); }
.rr-ajuda p { font-size: var(--f-apoio); color: var(--dim-ink); margin: 0; line-height: 1.6; }
.rr-ajuda.t-ok { background: var(--tom-ok-4); border-color: var(--tom-ok-25); }
.rr-ajuda.t-ok > span { color: var(--ok-ink); }

/* ── Brechas ─────────────────────────────────────────────────────────────── */

.rr-brecha {
  padding: var(--e4) var(--e5); margin-bottom: var(--e3);
  border: 1px solid var(--border); border-left: 3px solid var(--fam);
  border-radius: var(--r-md); background: var(--surface);
}
.rr-brecha > header {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3);
}
.rr-brecha-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-xs);
  background: var(--fam-soft); color: var(--dim-ink);
}
.rr-brecha h3 { font-size: var(--f-leitura); font-weight: 600; color: var(--ink); margin: 0; }
.rr-alvo {
  display: inline-flex; align-items: center; gap: var(--e2); margin-left: auto;
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: var(--tom-danger-8); color: var(--danger-ink);
  font-family: var(--mono); font-size: var(--f-micro);
}
.rr-brecha-txt { font-size: var(--f-corpo); line-height: 1.7; margin: 0 0 var(--e3); }

.rr-pills { display: flex; flex-wrap: wrap; gap: var(--e2); }
.rr-pill {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: var(--r-xs);
  background: var(--surface-hi); color: var(--dim-ink);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
}
.rr-pill.t-ok { background: var(--tom-ok-8); color: var(--ok-ink); }
.rr-pill.t-risco { background: var(--tom-danger-8); color: var(--danger-ink); }
.rr-pill.t-gold { background: var(--tom-ouro-12); color: var(--gold-ink); }
.rr-pill.t-fam { background: var(--fam-soft); color: var(--ink); }

/* A EVIDENCIA fica no pe, separada por um filete pontilhado: ela nao e o
   conteudo, e a fonte dele. */
.rr-ev {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: var(--e3) 0 0; padding-top: var(--e3);
  border-top: 1px dashed var(--border);
  font-size: var(--f-apoio); color: var(--faint-ink); line-height: 1.6;
}
.rr-ev .ic { flex-shrink: 0; margin-top: var(--e0); }
.rr-ev b { font-weight: 600; }

/* ── Plano de ataque ─────────────────────────────────────────────────────── */

.rr-fases { display: flex; flex-direction: column; gap: var(--e5); }
.rr-fase { display: flex; gap: var(--e4); }
.rr-fase-no {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--rr-f);
  color: var(--rr-f);
}
.rr-fase.t-fam { --rr-f: var(--fam); }
.rr-fase.t-ok { --rr-f: var(--ok-forte); }

/* O TRILHO liga as duas fases e mostra que uma vem depois da outra. Ele nasce
   do circulo e desce: sem ele as fases leem como dois blocos irmaos, e a ordem,
   que e o conteudo do plano, se perde. */
.rr-fase-cx {
  flex: 1; min-width: 0;                            padding-bottom: var(--e3);
  border-left: 2px solid var(--rr-f);
  margin-left: -20px; padding-left: var(--e7); margin-top: var(--e5);
}
.rr-fase-cx > header {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3);
}
.rr-fase-cx h3 { font-size: var(--f-leitura); font-weight: 600; color: var(--rr-f); margin: 0; }
.rr-janela {
  margin-left: auto; padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: var(--surface-hi); color: var(--faint-ink);
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.06em;
}

.rr-acao {
  padding: var(--e4); margin-bottom: var(--e3);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.rr-acao > b { display: block; font-size: var(--f-corpo); font-weight: 600; line-height: 1.6; }
.rr-acao > p { font-size: var(--f-apoio); color: var(--dim-ink); margin: 5px 0 var(--e3); line-height: 1.6; }

/* ── Veredito ────────────────────────────────────────────────────────────── */

.rr-veredito {
  padding: var(--e5); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
}
.rr-veredito > header {
  display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--border);
}
.rr-veredito > header b { font-size: var(--f-corpo); font-weight: 600; }
.rr-ver-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fam); color: #fff;
}

@container tela (max-width: 640px) {
  .rr-cob { gap: var(--e4); }
  .rr-anel { width: 92px; height: 92px; }
  .rr-anel-miolo { width: 70px; height: 70px; }
  .rr-anel-miolo b { font-size: var(--f-tela); }
  .rr-fase { gap: var(--e3); }
  .rr-fase-cx { padding-left: var(--e6); margin-left: -20px; }
  .rr-brecha { padding: var(--e4); }
  .rr-alvo { margin-left: 0; }
}

/* Em papel todos os paineis viram secoes, e a navegacao interna de concorrentes
   tambem: um PDF com um concorrente de quatro seria um documento pela metade. */
@media print {
  .rr-cpainel { display: block !important; page-break-inside: avoid; }
  .rr-cnav-barra, .rr-agora .btn { display: none !important; }
  .rr-brecha, .rr-acao, .rr-swot { page-break-inside: avoid; }
}

/* A LEGENDA das etiquetas de procedencia.
 *
 * Ela existe porque a etiqueta agora marca so o que foi VERIFICADO, e sem esta
 * linha o silencio poderia ser lido como fato. Item sem etiqueta e deducao, e
 * isso precisa estar escrito em algum lugar. */
.rr-legenda {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px dashed var(--border);
  font-size: var(--f-micro);
}
.rr-legenda b { color: var(--dim-ink); font-weight: 600; }
.rr-legenda i { font-style: normal; color: var(--faint-ink); flex-basis: 100%; line-height: 1.5; }

/* O cartao do Radar no Estudio */
.est-radar {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e5); margin-bottom: var(--e5);
  border: 1px solid rgba(14, 116, 145, 0.28); border-radius: var(--r-md);
  background: rgba(14, 116, 145, 0.05);
}
.est-radar-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: var(--r);
  background: var(--surface); color: #0B5E75;
  border: 1px solid rgba(14, 116, 145, 0.3);
}
.est-radar-txt { flex: 1; min-width: 240px; }
.est-radar-cab { display: flex; align-items: center; gap: var(--e2); }
.est-radar-cab h2 { font-size: var(--f-leitura); font-weight: 600; margin: 0; color: #0B5E75; }
.est-radar-txt > p { font-size: var(--f-apoio); color: var(--dim-ink); margin: 5px 0 var(--e3); line-height: 1.6; }
.est-radar .est-fatos { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * TOOLBOX
 *
 * Duas telas: o catálogo das 15 e o entregável.
 *
 * As duas auditorias mandam em tudo aqui. As regras que mais pesaram: piso de
 * 12px em qualquer texto; quatro degraus de sombra e nenhum a mais; conteúdo
 * largo rola dentro do próprio invólucro e nunca no corpo da página; e cor
 * nunca sozinha para dizer estado, sempre com rótulo escrito junto.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── CATÁLOGO ─────────────────────────────────────────────────────────────
 * Salto de Design, parada 2. A tela herda a forma do cartão do Estúdio
 * (`est-*`), que é o padrão nomeado. O que é só daqui: a faixa da rodada, o
 * cabeçalho de grupo, o cartão de duas camadas e o painel de detalhes.
 * ─────────────────────────────────────────────────────────────────────── */

.toolbox-cat { display: flex; flex-direction: column; gap: var(--e5); }

/* A ABERTURA EM DUAS COLUNAS: leitura à esquerda, controle à direita.
   A rodada era uma faixa atravessando a largura toda no meio da prosa. */
/* `flex-wrap` com uma largura mínima na coluna de texto, e NÃO uma
   média-query: a média-query olha a janela, e o que decide aqui é o espaço do
   container. Medido a 966px de janela, o conteúdo tem 530px e a query de
   900px não disparava: as duas colunas continuavam lado a lado e o título
   quebrava em três linhas. Com `flex-wrap`, elas se empilham quando não
   cabem, seja qual for a janela. */
.tb-abertura { display: flex; gap: var(--e5) var(--e6); align-items: flex-start; flex-wrap: wrap; }
.tb-abertura-txt { flex: 1 1 330px; min-width: 0; }
/* ABERTO, O "COMO FUNCIONA" PEGA A LARGURA TODA (01.10.2026, achado do dono:
   "o texto tá totalmente espremido"). Fechado, a coluna divide a linha com o
   cartão da rodada, e está certo; aberto, são três parágrafos e uma lista numa
   coluna de 300px. O cartão desce para baixo enquanto a pessoa lê, e volta
   ao lado quando ela fecha. */
.tb-abertura-txt:has(> .tb-como[open]) { flex-basis: 100%; }
.tb-abertura .est-core-p { margin-bottom: var(--e4); }

/* O PAINEL DA RODADA. A barra é o que o cartão antigo não tinha: "0 de 15" é
   dado, uma barra vazia é sensação. */
.tb-ciclo {
  flex-shrink: 0; width: 320px; max-width: 100%;
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface-sutil);
}
.tb-ciclo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.tb-ciclo-n { font-size: var(--f-apoio); color: var(--dim-ink); white-space: nowrap; }
/* O NÚMERO GRANDE CARREGA A LATERAL DELE PARA DENTRO DO ESPAÇO.
   Medido: o espaço entre "14" e "de" é 3,50px, exatamente um espaço normal do
   texto de 13px. Não há espaço a mais na marcação. O que se vê é a lateral do
   algarismo a 27px, que faz parte do avanço do glifo e não encolhe junto com o
   texto ao lado: soma cerca de 2px e o par lê como separado.

   O ajuste é ótico e proporcional ao número, e não um valor fixo: se o degrau
   da escala mudar, a compensação acompanha.

   -0.03em e não -0.07em: a primeira tentativa levou o vão de 3,50px para
   1,63px e as duas palavras encostaram. O alvo não é fechar o vão, é fazer
   ele PARECER um espaço, e a medida disso é ~2,6px. */
.tb-ciclo-n b { font-family: var(--brand); font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.02em; margin-right: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* A SAÍDA no card: mono e miúda, como todo rótulo do produto. Fica abaixo do
   resumo e acima do rodapé, que é onde o olho passa antes de decidir.
   Numa pastilha suave desde 19.09.2026 (tela do Codex aprovada pelo dono): o
   "o que vem" se separa da descrição sem pesar. */
.tbc-saida {
  display: inline-block; max-width: 100%; margin-top: var(--e3);
  padding: var(--e1) var(--e2); border-radius: var(--r-xs);
  background: var(--surface-hi); border: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--f-micro);
  color: var(--dim-ink); font-style: normal; letter-spacing: 0.04em;
}
/* A frase de expectativa da abertura: mesmo corpo do texto ao lado, tom
   quieto. Ela informa, não vende. */
.tb-entrega { color: var(--dim-ink); margin-top: var(--e3); }
/* As rodadas no "Como funciona" (01.10.2026): três linhas com rótulo, no
   mesmo tom da prosa de cima, para ler como continuação e não como aviso. */
.tb-como-l { margin: 0 0 var(--e6); padding-left: var(--e5); display: grid; gap: var(--e2); color: var(--dim-ink); font-size: var(--f-corpo); line-height: 1.65; max-width: 56ch; }
.tb-como-l b { color: var(--ink); font-weight: 600; }

.tb-ciclo-barra { height: 6px; border-radius: var(--r-pill); background: var(--surface-hi); overflow: hidden; }
/* A barra é preenchimento, não texto, e é o elemento mais visível do cartão de
   rodada. Ficava azul dentro de uma tela laranja. O `.barra-preenche` do Plano
   já usa `--fam` pelo mesmo motivo. */
.tb-ciclo-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #8a9bff); border-radius: var(--r-pill); transition: width var(--t-lento) var(--curva); }
.tb-ciclo-m { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); white-space: nowrap; }
.tb-ciclo-pe { display: flex; align-items: center; gap: var(--e2); }
/* O que a rodada é, em uma linha, e o caminho quando não sobra nenhuma
   (02.10.2026): "rodada 3" sozinho não dizia nada. */
.tb-ciclo-nota { margin: var(--e2) 0 0; font-size: var(--f-micro); color: var(--dim-ink); line-height: 1.5; }
.tb-ciclo-link { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tb-ciclo-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.tb-renovar { flex: 1; justify-content: center; }
.tb-ciclo .btn em { font-style: normal; font-weight: 400; opacity: 0.8; }

/* `0 1 320px`: o painel não CRESCE. Medido a 1440px com `1 1 300px`, ele
   esticava para 495px e ficava do mesmo tamanho da coluna de leitura, como se
   fosse conteúdo. Ele é controle: ocupa o que precisa e devolve o resto. */
.tb-ciclo { flex: 0 1 320px; }
@container tela (max-width: 560px) { .tb-ciclo { width: auto; } }

/* O PONTO DE PARTIDA é a decisão que muda as quinze, então ele é um controle
   e não uma nota de rodapé: rótulo em cima, campo com a cara de campo. */
/* `tb-partida`, e não `tb-base`: `.tb-base` já é o painel "material de
   partida" DENTRO do relatório gerado do Toolbox, com fundo, borda e 24px de
   respiro. As duas regras conviviam e a de lá, por vir depois no arquivo,
   desenhava uma caixa em volta do seletor desta tela. */

.tb-partida { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
.tb-partida em {
  font-style: normal; display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint-ink);
}
.tb-partida > svg { display: none; }
.tb-partida .campo {
  width: auto; max-width: min(100%, 46ch); min-height: 44px; padding: 0 44px 0 var(--e4);
  font-size: var(--f-apoio); font-weight: 500; color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e737c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e3) center;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.tb-partida .campo:hover { border-color: var(--tom-tinta-50); }
.tb-partida .campo:focus-visible { outline: none; border-color: var(--primary-line); box-shadow: var(--foco); }

.tb-sem-base {
  display: flex; gap: var(--e4); align-items: flex-start;
  padding: var(--e5); border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--dim-ink);
}
.tb-sem-base b { display: block; color: var(--ink); margin-bottom: var(--e2); }
.tb-sem-base p { margin: 0 0 var(--e4); font-size: var(--f-apoio); line-height: 1.6; }

/* O CABEÇALHO DE GRUPO, no bloco de título do Estúdio, mais o ícone e a conta. */
/* OS GRUPOS SÃO A SANFONA DA CASA (19.09.2026): o desenho mora em `.sanfona`;
   aqui só o que é do Toolbox. O ícone do grupo vem na cor da família, como era
   no título antigo, e a grade de ferramentas respira dentro do cartão. */
.tb-grupo { scroll-margin-top: var(--e7); }
.tb-grupo .sf-ic { color: var(--fam-icone); }
.tb-grupo .sf-corpo { padding-top: var(--e2); }

/* `min(330px, 100%)`: dentro da sanfona, no telefone, sobram ~305px, e uma
   coluna de 330 fixos vazava e era cortada pela borda do cartão. */
.tb-grade { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }

/* O CARTÃO: ícone, duas camadas de texto, e um rodapé separado por um fio.
   O fio é o que faltava: sem ele o estado e os botões flutuavam colados na
   prosa, e o cartão não tinha onde terminar. */
.tbc {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
  animation: sobe-tela var(--t-lento) var(--curva) backwards;
}
.tb-grade .tbc:nth-child(2) { animation-delay: calc(var(--escalonar) * 1); }
.tb-grade .tbc:nth-child(3) { animation-delay: calc(var(--escalonar) * 2); }
.tb-grade .tbc:nth-child(4) { animation-delay: calc(var(--escalonar) * 3); }
.tb-grade .tbc:nth-child(5) { animation-delay: calc(var(--escalonar) * 4); }
.tb-grade .tbc:nth-child(6) { animation-delay: calc(var(--escalonar) * 5); }
.tbc:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tbc.bloq { opacity: 0.6; }
.tbc.bloq:hover, .tbc.usada:hover { transform: none; box-shadow: var(--shadow-card); }

.tbc-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.tbc-txt { flex: 1; }
.tbc-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r);
  background: var(--fam-soft); border: 1px solid color-mix(in srgb, var(--fam) 14%, transparent);
  color: var(--fam-icone, var(--dim-ink));
}
.tbc-ic svg { transition: transform var(--t-medio) var(--curva); }
.tbc:hover .tbc-ic svg { transform: scale(1.1) rotate(-4deg); }

.tbc-txt { min-width: 0; }
.tbc-txt b { display: block; font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.015em; }
.tbc-txt p { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.tbc-falta { display: inline-flex; align-items: center; gap: var(--e1); margin-top: var(--e2); font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); }

/* O rodapé em duas faixas (19.09.2026, tela do Codex aprovada pelo dono): o
   uso em cima e os dois botões embaixo, lado a lado e do mesmo tamanho. Eram
   dois botões pequenos no canto; assim o alvo cresce e o cartão fecha numa
   linha de ação clara. Com um botão só (gerada ou não incluída), ele ocupa a
   faixa. */
.tbc-pe {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--e3);
  padding-top: var(--e4); border-top: 1px solid var(--border);
}
.tbc-meta { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.tbc-meta:empty { display: none; }
.tbc-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e2); }
.tbc-btns .btn { justify-content: center; }
.tbc-pill {
  display: inline-flex; align-items: center; gap: var(--e1); flex-shrink: 0;
  font-family: var(--mono); font-size: var(--f-micro); white-space: nowrap;
  padding: var(--e1) var(--e2); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-hi); color: var(--dim-ink);
}
.tbc-pill.t-livre { background: var(--tom-ok-8); border-color: var(--tom-ok-25); color: var(--ok-ink); }
.tbc-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.tbc-pill.t-feita { color: var(--dim-ink); }
.tbc-pill.t-off { color: var(--faint-ink); }

/* O PAINEL DE DETALHES.
 *
 * A primeira versão era um texto corrido com quatro títulos em mono: quieto
 * demais para um painel cuja função é convencer. Aqui cada bloco tem um ícone
 * em pastilha com cor SEMÂNTICA (verde para o que vem, vermelho apagado para
 * o que não vem, a família para o que ela lê e para a rodada), e o cabeçalho
 * tem a marca da ferramenta em 44px com o traço na cor da família. É o único
 * lugar em que a família toca um ícone em vez de só o fundo dele; o token é
 * `--fam-icone` e a guarda o conhece. */
dialog.tbd-fundo:not([open]) { display: none; }
.tbd-fundo::backdrop { background: transparent; }
.tbd-fundo {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  position: fixed; inset: 0; z-index: 9998; overflow: hidden;
  background: var(--tom-sombra-4);
  transition: background var(--t-medio) var(--curva);
}
.tbd-fundo.aberto { background: var(--tom-tinta-50); }
.tbd-painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg); box-shadow: -24px 0 60px -12px var(--tom-sombra-25);
  transform: translateX(100%); transition: transform var(--t-medio) var(--curva);
}
.tbd-fundo.aberto .tbd-painel { transform: none; }
.tbd-fio { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fam, var(--primary)); z-index: 1; }

.tbd-topo {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e6) var(--e5) var(--e5); background: var(--surface); border-bottom: 1px solid var(--border);
}
.tbd-marca {
  width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--fam-soft); border: 1px solid color-mix(in srgb, var(--fam) 22%, transparent);
  color: var(--fam-icone, var(--dim-ink));
}
.tbd-tit { flex: 1; min-width: 0; }
.tbd-olho { display: block; font-family: var(--mono); font-size: var(--f-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink); margin-bottom: var(--e1); }
.tbd-tit h2 { font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.tbd-tit p { font-size: var(--f-corpo); color: var(--dim-ink); margin: var(--e2) 0 0; line-height: 1.55; }
.tbd-x {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-hi); border: 1px solid var(--border); color: var(--dim-ink);
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.tbd-x:hover { background: var(--border); color: var(--ink); }
.tbd-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.tbd-corpo { flex: 1; overflow-y: auto; padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); }

/* Cada bloco é um cartão: ícone em pastilha à esquerda, título e conteúdo à
   direita. Entram em cascata quando o painel abre. */
.tbd-sec {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--e3);
  padding: var(--e4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  animation: sobe-tela var(--t-lento) var(--curva) backwards;
}
.tbd-sec:nth-child(2) { animation-delay: calc(var(--escalonar) * 1); }
.tbd-sec:nth-child(3) { animation-delay: calc(var(--escalonar) * 2); }
.tbd-sec:nth-child(4) { animation-delay: calc(var(--escalonar) * 3); }
.tbd-sec-ic { width: 32px; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center; --sec: var(--dim-ink); --sec-fundo: var(--surface-hi); background: var(--sec-fundo); color: var(--sec); }
.tbd-sec.t-vem .tbd-sec-ic    { --sec: var(--ok-ink);     --sec-fundo: var(--tom-ok-8); }
.tbd-sec.t-naovem .tbd-sec-ic { --sec: var(--danger-ink); --sec-fundo: var(--tom-danger-8); }
.tbd-sec.t-le .tbd-sec-ic,
.tbd-sec.t-rodada .tbd-sec-ic { --sec: var(--fam-icone, var(--dim-ink)); --sec-fundo: var(--fam-soft); }
.tbd-sec h3 { font-size: var(--f-corpo); font-weight: 600; margin: 0 0 var(--e1); letter-spacing: -0.01em; }
.tbd-sec p { margin: 0; font-size: var(--f-apoio); line-height: 1.6; color: var(--prosa); }
.tbd-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e1); font-size: var(--f-apoio); line-height: 1.55; color: var(--prosa); }
.tbd-sec ul li { display: flex; gap: var(--e2); align-items: baseline; }
.tbd-sec ul li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--tom-danger-50); transform: translateY(-2px); }
.tbd-chips { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); margin-top: var(--e1); }
.tbd-chip {
  display: inline-flex; align-items: center; padding: var(--e1) var(--e2);
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-hi);
  font-size: var(--f-apoio); color: var(--ink);
}
.tbd-chip.falta { color: var(--faint-ink); border-style: dashed; background: transparent; }
.tbd-nota { display: flex; gap: var(--e2); align-items: flex-start; margin-top: var(--e3) !important; font-size: var(--f-micro) !important; color: var(--dim-ink) !important; }
.tbd-estado { margin-bottom: var(--e2); }
.tbd-pe { display: flex; justify-content: flex-end; gap: var(--e2); padding: var(--e4) var(--e5); border-top: 1px solid var(--border); background: var(--surface); }
.tbd-pe .btn.p { flex: 1; justify-content: center; min-height: 44px; }

@container tela (max-width: 560px) {
  .tb-ciclo { flex-direction: column; align-items: stretch; }
  .tb-ciclo-barra { width: 100%; }
  .tbc-btns .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tbc, .tbc-ic svg, .tbd-painel, .tbd-fundo, .tbd-sec { transition: none; animation: none; }
  .tbc:hover { transform: none; }
  .tbc:hover .tbc-ic svg { transform: none; }
}

/* ── MODAL ────────────────────────────────────────────────────────────────── */

.tb-modal { max-width: 560px; }
.tbm-h { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e5) var(--e5) var(--e4); border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface); }
.tbm-ic {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r); background: var(--primary-soft); color: var(--primary);
}
.tbm-h h2 { font-family: var(--brand); font-size: var(--f-leitura); line-height: 1.25; }
.tbm-h p { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e1); line-height: 1.55; }
/* O CORPO É QUEM ROLA. O cabeçalho e o rodapé ficam presos.
   `.modal` é `flex-direction: column`, `max-height: 88vh` e `overflow: hidden`.
   Sem `flex: 1` + `overflow-y: auto` aqui, o conteúdo empurra o rodapé para
   fora do recorte: medido numa janela de 419px, o rodapé foi parar em 691 e o
   botão "Gerar" simplesmente não existia na tela. O modal continuava bonito, e
   a ferramenta era impossível de acionar. É o mesmo padrão de `.modal-corpo`,
   que já resolvia isso na plataforma inteira. */
.tbm-corpo {
  padding: var(--e4) var(--e5); display: flex; flex-direction: column; gap: var(--e2);
  flex: 1; overflow-y: auto; min-height: 0;
}
.tbm-base { display: flex; align-items: center; gap: var(--e1); font-size: var(--f-apoio); color: var(--dim-ink); }
.tbm-l { font-size: var(--f-apoio); font-weight: 600; margin-top: var(--e1); }
.tbm-l i { font-weight: 400; color: var(--faint-ink); font-style: normal; }
.tbm-dica { font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.55; }

/* ── O CONTRATO DE EXPECTATIVA DO MODAL ────────────────────────────────────
   Duas colunas com peso VISUAL igual. Foi decisão: pôr o "não vem" menor ou
   mais claro que o "você recebe" seria escrever a ressalva em letra miúda, que
   é exatamente a prática que este bloco existe para não repetir. */
.tbm-entrega {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e3);
  padding: var(--e4); margin-bottom: var(--e4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.tbm-entrega b {
  display: flex; align-items: center; gap: var(--e1);
  margin-bottom: var(--e2);
  font-size: var(--f-apoio); font-weight: 600;
}
/* --ok-ink e nao --ok-forte: o verde de preenchimento (#059669) da 3.77 sobre
   branco, abaixo do minimo de 4.5 para texto. O --ok-ink e a mesma cor um passo
   mais escura e da 5.48. Verde de fundo e verde de texto nao sao a mesma cor. */
.tbm-vem b { color: var(--ok-ink); }
.tbm-naovem b { color: var(--dim-ink); }
.tbm-entrega p { margin: 0; font-size: var(--f-apoio); line-height: 1.55; color: var(--dim-ink); }
.tbm-naovem ul { margin: 0; padding-left: var(--e4); }
.tbm-naovem li { font-size: var(--f-apoio); line-height: 1.55; color: var(--dim-ink); }
.tbm-custo, .tbm-falta {
  display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e3) var(--e3);
  border-radius: var(--r-xs); font-size: var(--f-apoio); line-height: 1.55;
}
.tbm-custo { background: var(--surface-hi); color: var(--dim-ink); }
.tbm-falta { background: var(--tom-warn-8); color: var(--warn-ink); }
.tbm-falta i { display: block; margin-top: var(--e1); font-style: normal; opacity: 0.9; }
.tbm-f { display: flex; gap: var(--e2); justify-content: flex-end; padding: var(--e4) var(--e5); border-top: 1px solid var(--border); flex-shrink: 0; background: var(--surface); }

/* ── O ENTREGÁVEL ─────────────────────────────────────────────────────────── */

.tb-resumo {
  font-size: var(--f-corpo); line-height: 1.7; color: var(--dim-ink);
  max-width: 70ch; margin: 0 0 var(--e4);
}

/* O aviso das lacunas vem ANTES do documento. Depois de dez mil pixels de
   conteúdo, um aviso é decoração. */
.tb-lac {
  border: 1px solid var(--tom-warn-35); border-radius: var(--r);
  background: var(--tom-warn-4); padding: var(--e4) var(--e4); margin-bottom: var(--e5);
}
.tb-lac header { display: flex; gap: var(--e3); align-items: flex-start; }
.tb-lac h3 { font-family: var(--brand); font-size: var(--f-corpo); color: var(--warn-ink); }
.tb-lac header p { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; margin-top: var(--e1); max-width: 66ch; }
/* O painel das MARCAS usa a mesma forma do de lacunas, e nao um alarme novo:
   sao a mesma familia de pendencia, "isto ainda nao esta pronto para sair
   daqui". Distinguir com cor diferente faria a pessoa achar que ha dois tipos
   de risco, quando o que muda e a natureza do que falta conferir. */
.tb-lac-marca header b { font-family: var(--brand); font-size: var(--f-corpo); color: var(--warn-ink); display: block; }
.tb-lac-marca code { font-size: var(--f-micro); }
.tb-lac ul { list-style: none; margin: var(--e3) 0 0; display: flex; flex-direction: column; gap: var(--e2); }
.tb-lac li { display: flex; gap: var(--e3); align-items: flex-start; }
.tb-lac code {
  flex-shrink: 0; font-family: var(--mono); font-size: var(--f-micro); padding: var(--e1) var(--e2);
  border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--border); color: var(--warn-ink);
}
.tb-lac li b { font-size: var(--f-apoio); font-weight: 600; }
.tb-lac li i { display: block; font-size: var(--f-micro); font-style: normal; color: var(--faint-ink); margin-top: var(--e1); }

/* AS LACUNAS EMPILHAM NO CELULAR.
   O marcador e a explicacao ficavam lado a lado, e a 375 px sobravam cerca de
   84 px para o texto: uma frase virava muitas linhas de duas palavras. E sao
   justamente estes avisos que impedem publicar preco, prazo ou garantia
   inventados — a pessoa pula por cansaco visual justo onde nao deveria.
   Empilhado, o marcador fica na primeira linha e a orientacao embaixo, cada um
   com a largura inteira. */
@container tela (max-width: 480px) {
  .tb-lac li { flex-direction: column; gap: var(--e1); }
  .tb-lac code { align-self: flex-start; }
}

.tb-pronto {
  display: flex; gap: var(--e2); align-items: center; padding: var(--e3) var(--e4); margin-bottom: var(--e5);
  border: 1px solid var(--tom-ok-25); border-radius: var(--r-xs);
  background: var(--tom-ok-4); color: var(--ok-ink); font-size: var(--f-apoio); line-height: 1.55;
}

/* O sumário substitui as abas: em documento para copiar, o problema não é
   escolher a lente, é voltar ao bloco depois de rolar. */
/* ── O ÍNDICE DO TOOLBOX ──────────────────────────────────────────────────
 *
 * Era uma fila horizontal de pastilhas. Medidos os 94 títulos das 15
 * ferramentas: mediana de 38 caracteres, 85% passando dos 22 do corte e 61%
 * passando de 34 mesmo na pastilha ativa. Contra isso não há largura que
 * resolva, e encurtar o rótulo seria mentir sobre o nome da seção.
 *
 * Vertical não tem esse problema: o título cabe inteiro. Fechado é uma linha
 * que diz onde você está; aberto, a lista completa.
 */
.tb-ind { position: sticky; top: 64px; z-index: 5; margin-bottom: var(--e3); }

.tb-ind-cab {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  min-height: 44px; padding: var(--e2) var(--e3); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit;
  font-size: var(--f-apoio); text-align: left; box-shadow: var(--shadow-card);
  transition: border-color var(--t-rapido);
}
.tb-ind-cab:hover { border-color: var(--primary-line); }
.tb-ind-cab .ic { flex-shrink: 0; color: var(--faint-ink); }

/* O nome da seção atual ocupa o espaço livre e, se faltar, corta AQUI e não na
   lista: aqui ele é indicação de lugar, lá é o rótulo que se escolhe. */
.tb-ind-onde { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; font-weight: 600; }
.tb-ind-conta { flex-shrink: 0; font-family: var(--mono); font-size: var(--f-micro);
                color: var(--faint-ink); }
.tb-ind-seta { transition: transform var(--t-rapido); }
.tb-ind.aberto .tb-ind-seta { transform: rotate(90deg); }

.tb-ind-lista {
  list-style: none; margin: var(--e1) 0 0; padding: var(--e1);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-pop);
  max-height: 58vh; overflow-y: auto;
}
.tb-ind-lista button {
  display: flex; align-items: baseline; gap: var(--e2); width: 100%;
  min-height: 40px; padding: var(--e2) var(--e2); cursor: pointer;
  border: 0; border-radius: var(--r-xs); background: none; color: var(--dim-ink);
  font: inherit; font-size: var(--f-apoio); text-align: left; line-height: 1.4;
}
.tb-ind-lista button:hover { background: var(--surface-hi); color: var(--ink); }
.tb-ind-lista button.on { color: var(--primary); font-weight: 600; }
.tb-ind-n { flex-shrink: 0; font-family: var(--mono); font-size: var(--f-micro);
            color: var(--faint-ink); }
.tb-ind-lista button.on .tb-ind-n { color: var(--primary); }

/* ═══ O RELATÓRIO DO TOOLBOX ABRAÇA A MEDIDA DE LEITURA (20.09.2026) ══════
 * Medido: o cartão tinha 1180px e os valores dos campos paravam em 549 (55ch)
 * — 630px de branco emoldurado. Pior: a prosa do MESMO cartão ia a 778,
 * porque `.dossie p` (78ch) vence `.tb-prosa` (55ch) por especificidade. Duas
 * medidas de leitura diferentes dentro do mesmo bloco.
 *
 * Os relatórios com aba já tinham sido resolvidos estreitando a coluna; o do
 * Toolbox não usa abas, então a correção mora aqui. O índice dele já existe e
 * é horizontal (`.tb-ind`), então não há segunda coluna a preencher: o cartão
 * simplesmente para onde o texto para. */
/* O PARECER DO CONSELHO PELO MESMO MOTIVO (20.09.2026). Ele também não tem
   abas, então a grade das outras telas não o alcançava: cartão de 1132 de
   miolo com prosa de 778. É o último relatório que faltava. */
.tb-blocos { display: flex; flex-direction: column; gap: var(--e4); }

.tb-bloco {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  padding: var(--e5) var(--e5); box-shadow: var(--shadow-card); scroll-margin-top: var(--e7);
}
.tb-bh { display: flex; gap: var(--e4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--e3); }
.tb-num {
  font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink);
  display: block; margin-bottom: var(--e1);
}
.tb-bh h2 { font-family: var(--brand); font-size: var(--f-leitura); line-height: 1.3; }
.tb-nota { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e1); line-height: 1.55; max-width: 62ch; }

.tb-copiar {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--e1);
  padding: var(--e2) var(--e3); border-radius: var(--r-xs); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--dim-ink);
  font-size: var(--f-apoio); font-weight: 600;
  transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido);
}
.tb-copiar:hover { border-color: var(--primary-line); color: var(--primary); background: var(--primary-soft); }
.tb-copiar.ok { border-color: var(--ok); color: var(--ok-ink); background: var(--tom-ok-8); }

/* 55ch e não 72ch: ver a medição do `ch` logo abaixo, em `.tb-lista li span`. */
.tb-prosa { font-size: var(--f-corpo); line-height: 1.75; color: var(--ink); }
.tb-prosa p + p { margin-top: var(--e3); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  QUARENTA PIXELS DE ESPAÇO PARA UMA BOLINHA QUE NÃO EXISTE.
 *
 *  A regra tirava a bala da lista (`list-style: none`) e esquecia o recuo que
 *  o navegador reserva PARA a bala. Medida a cadeia inteira num aparelho de
 *  375px, do documento até o texto do item:
 *
 *      .conteudo    375 → 327   (24 + 24 de respiro da página)
 *      .tb-bloco    327 → 277   (24 + 24 + 1 de borda)
 *      ul.tb-lista  277 → 277   (40 de recuo, tudo à esquerda)  ← este
 *      li           277 → 237   (16 + 2 de borda)
 *      texto              219
 *
 *  Sobravam 219px de coluna, 29 caracteres por linha. Nenhum texto se lê bem
 *  assim, e o conteúdo do bloco `lista` é o mais comum do produto.
 * ═══════════════════════════════════════════════════════════════════════════ */
.tb-lista { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--e3); }
.tb-lista li { padding-left: var(--e4); border-left: 2px solid var(--border); }
.tb-lista li b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e1); }
/* ═══════════════════════════════════════════════════════════════════════════
 *  O QUE SE ENVIA É ESCURO; O QUE ENSINA A ENVIAR É CLARO.
 *
 *  Medidos os cinco registros de texto do Toolbox, quatro seguiam essa regra e
 *  um a contrariava:
 *
 *    .tb-prosa      conteúdo    --ink       #111827
 *    .tb-fala       conteúdo    --ink       #111827
 *    .tb-campos dd  conteúdo    --ink       #111827
 *    .tb-lista span conteúdo    --dim-ink   #5b616b   ← fora da regra
 *    .tb-nota       instrução   --dim-ink   #5b616b
 *    .tb-instr      instrução   --faint-ink #6e737c
 *
 *  Não é problema de contraste: `--dim-ink` passa em AA. É de hierarquia. O
 *  texto do item da lista É a entrega, é o anúncio e o roteiro que a pessoa vai
 *  publicar, e saía na mesma cor da instrução que explica o que fazer com ele.
 *
 *  E `lista` é o tipo de bloco mais comum: 33 blocos, em 14 das 15 ferramentas.
 *  O conteúdo mais frequente do produto era o que aparecia como se fosse nota
 *  de rodapé.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
 *  `72ch` NÃO SÃO 72 CARACTERES. SÃO 92.
 *
 *  Devolver os 40px do recuo fantasma consertou o celular (29 → 37 caracteres
 *  por linha) e estourou o desktop, que foi a 85. Fui pôr o mesmo teto que a
 *  prosa já tinha, `72ch`, e ele não limitou nada. Medido nesta fonte, a 15px:
 *
 *      1ch (largura do "0")           9,97px
 *      letra minúscula média          7,77px
 *      72ch                          718,2px  ← mais largo que o container
 *
 *  O `ch` do CSS é a largura do algarismo zero, e numa fonte proporcional ele
 *  é 28% mais largo que a letra média. Quem escreve `72ch` querendo 72
 *  caracteres está autorizando 92, e o teto nunca chega a valer.
 *
 *  Para ~70 caracteres de verdade, 55ch. O mesmo vale para os outros tetos em
 *  `ch` desta folha, e eles são muitos: aqui corrigi os dois que eu medi.
 * ═══════════════════════════════════════════════════════════════════════════ */
.tb-lista li span { display: block; font-size: var(--f-corpo); line-height: 1.7; color: var(--ink); }

/* Tabela larga rola DENTRO do próprio invólucro. O corpo da página nunca rola
   de lado: é regra das duas auditorias, e a mais violada por tabela. */
.tb-tab-env { overflow-x: auto; margin: 0 -var(--e1); padding: 0 var(--e1); }
.tb-tab { width: 100%; border-collapse: collapse; font-size: var(--f-corpo); min-width: 440px; }
.tb-tab th, .tb-tab td { padding: var(--e2) var(--e3); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.tb-tab th {
  font-size: var(--f-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint-ink); font-weight: 600; background: var(--surface-hi);
}
.tb-tab td { line-height: 1.6; color: var(--dim-ink); }
.tb-tab tr:last-child td { border-bottom: 0; }

.tb-rot { list-style: none; display: flex; flex-direction: column; }
.tb-rot li { display: grid; grid-template-columns: 116px 1fr; gap: var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--border); }
.tb-rot li:first-child { border-top: 0; padding-top: 0; }
.tb-rot-m {
  font-family: var(--mono); font-size: var(--f-micro); color: var(--primary);
  font-weight: 600; padding-top: var(--e1);
}
/* `min-width: 0` porque coluna de grade nasce com `min-width: auto`: uma fala
   longa sem espaço (uma URL que o modelo colou) empurra a coluna além do
   contêiner e faz o documento inteiro rolar de lado. */
.tb-rot-c { min-width: 0; }
.tb-fala { font-size: var(--f-corpo); line-height: 1.7; }
.tb-fala p + p { margin-top: var(--e2); }
.tb-instr {
  display: flex; gap: var(--e1); align-items: flex-start; margin-top: var(--e2);
  font-size: var(--f-apoio); line-height: 1.55; color: var(--faint-ink);
}

.tb-campos { display: flex; flex-direction: column; gap: var(--e3); }
.tb-campos dt {
  font-size: var(--f-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint-ink); font-weight: 600; margin-bottom: var(--e1);
}
/* UMA medida de leitura em todo relatório: 78ch, a mesma de `.dossie p`
   (20.09.2026). Os campos estavam em 55ch enquanto a prosa do MESMO cartão ia
   a 78ch — e o 55ch do `.tb-prosa` era letra morta, porque `.dossie p` vence
   por especificidade. Três medidas declaradas, duas valendo, uma só correta. */
.tb-campos dd { font-size: var(--f-corpo); line-height: 1.7; }
.tb-campos dd p + p { margin-top: var(--e2); }

.tb-press { margin-top: var(--e5); padding: var(--e4) var(--e4); border: 1px dashed var(--border); border-radius: var(--r); }
.tb-press ul { list-style: none; margin-top: var(--e2); display: flex; flex-direction: column; gap: var(--e2); }
.tb-press li { font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink); padding-left: var(--e4); position: relative; }
.tb-press li::before { content: '·'; position: absolute; left: 4px; color: var(--faint-ink); font-weight: 600; }

/* O rodapé da procedência. Mostra que o material não nasceu de uma caixa em
   branco, e separa fato de leitura de IA para quem lê, também. */
.tb-base {
  margin-top: var(--e5); padding: var(--e4) var(--e5);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-hi);
}
.tb-base-p { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.65; margin: var(--e2) 0 var(--e4); max-width: 68ch; }
.tb-base-gs { display: flex; flex-direction: column; gap: var(--e3); }
.tb-base-g { display: grid; grid-template-columns: 150px 1fr; gap: var(--e3); align-items: baseline; }
.tb-base-t { font-size: var(--f-micro); font-weight: 600; }
.tb-base-g.t-ok .tb-base-t { color: var(--ok-ink); }
.tb-base-g.t-dec .tb-base-t { color: var(--primary); }
.tb-base-g.t-inf .tb-base-t { color: var(--warn-ink); }
.tb-base-cs { display: flex; flex-wrap: wrap; gap: var(--e1); }
.tb-base-cs span {
  font-size: var(--f-micro); padding: var(--e1) var(--e2); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--dim-ink);
}
/* A PASTILHA QUE ABRE. O painel manda conferir as leituras da IA e mostrava
   so o NOME do campo — dizia "Ponto cego estrategico" e nunca dizia qual era.
   Quem tem valor abre; quem nao tem continua pastilha, e a diferenca de forma
   e honesta: so se confere o que se ve.
   Fechada ela e igual a `span` de proposito, para a fila nao ficar irregular. */
.tb-base-c { display: inline-block; }
.tb-base-c > summary {
  font-size: var(--f-micro); padding: var(--e1) var(--e2); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--dim-ink);
  cursor: pointer; list-style: none; min-height: 26px; display: inline-flex; align-items: center;
}
.tb-base-c > summary::-webkit-details-marker { display: none; }
.tb-base-c > summary::after { content: '+'; margin-left: 6px; color: var(--faint-ink); }
.tb-base-c[open] > summary::after { content: '−'; }
.tb-base-c > summary:hover { border-color: var(--primary-line); color: var(--ink); }
.tb-base-c[open] > summary { border-color: var(--primary-line); color: var(--ink); }
/* Aberta, a pastilha ocupa a linha: o texto e uma conclusao, nao um rotulo. */
.tb-base-c[open] { display: block; width: 100%; }
.tb-base-c > p {
  margin: var(--e2) 0 0; padding: var(--e2) var(--e3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs);
  font-size: var(--f-apoio); line-height: 1.55; color: var(--ink); max-width: 68ch;
}
.tb-base-n { font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.6; margin-top: var(--e4); max-width: 68ch; }
.tb-base-a { display: flex; gap: var(--e2); align-items: flex-start; font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e2); }

.hero-m.t-aviso { color: var(--warn-ink); }

@container tela (max-width: 720px) {
  .tb-base-sel { grid-template-columns: 1fr; }
  .tb-base-sel select { min-width: 0; width: 100%; }
  .tb-rot li { grid-template-columns: 1fr; gap: var(--e1); }
  .tb-base-g { grid-template-columns: 1fr; gap: var(--e1); }
  .tb-bh { flex-direction: column; gap: var(--e2); }
  .tb-copiar { align-self: flex-start; }
}

/* Em papel não existe clicar nem copiar: o sumário e os botões saem, e o
   documento vira o que ele é, um documento. */
@media print {
  .tb-ind, .tb-copiar { display: none !important; }
  .tb-bloco { break-inside: avoid; box-shadow: none; }
}

/* A faixa de aproveitamento do Radar. Some quando não há Raio-X na conta. */
/* Duas linhas SEMPRE: o texto explica o que vai acontecer com os campos, e
   espremê-lo numa coluna ao lado de um select largo o deixa com seis palavras
   por linha. Controle embaixo, explicação em cima, em qualquer largura. */
.rd-aproveitar {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e3);
  align-items: start; padding: var(--e4); margin-bottom: var(--e4);
  border: 1px solid var(--primary-line); background: var(--primary-soft);
}
.rd-apr-controles {
  grid-column: 2; display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
  margin-top: var(--e1);
}
.rd-apr-ic {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-xs); background: var(--surface); color: var(--primary);
  border: 1px solid var(--primary-line);
}
.rd-apr-txt b { display: block; font-size: var(--f-corpo); }
.rd-apr-txt p { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.55; margin-top: var(--e1); max-width: 62ch; }
.rd-aproveitar select { min-width: 240px; flex: 1 1 240px; max-width: 420px; }
@container tela (max-width: 640px) {
  .rd-aproveitar { grid-template-columns: 1fr; }
  .rd-apr-controles { grid-column: 1; }
  .rd-aproveitar select, .rd-aproveitar button { width: 100%; max-width: none; }
}

/* Renovar: fica no cartão de saldo, e só aparece com crédito E com ferramenta
   gasta. Oferecer renovação a quem não usou nada convida a queimar um crédito
   por engano, e renovar não empilha. */

/* O desfazer dentro do aviso. Fica como link, e não como botão cheio: a ação
   principal do toast é ser lido e sumir. */
.toast-acao {
  background: none; border: 0; cursor: pointer; padding: 0 var(--e2);
  font: inherit; font-weight: 600; text-decoration: underline;
  color: inherit; opacity: 0.9;
}
.toast-acao:hover { opacity: 1; }

/* Dispensar uma pendência. Discreto: agir é a ação principal, dispensar é a
   saída para quem já decidiu o contrário. */
.pc-x {
  position: absolute; top: var(--e2); right: var(--e2);
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: none; color: var(--faint-ink); cursor: pointer;
  opacity: 0; transition: opacity var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido);
}
.pcard { position: relative; }
.pcard:hover .pc-x, .pc-x:focus-visible { opacity: 1; }
.pc-x:hover { color: var(--danger); border-color: var(--border); }
/* No toque não existe hover: lá ele fica sempre visível, senão é inalcançável. */
@media (hover: none) { .pc-x { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
 * O ADMIN É ESCURO, e isso é uma TROCA DE VALOR DE TOKEN, não uma segunda
 * linguagem visual.
 *
 * Toda a plataforma lê `var(--bg)`, `var(--surface)`, `var(--ink)`,
 * `var(--border)`. Redefinir esses nomes dentro de um escopo dá um admin
 * escuro inteiro sem tocar em componente nenhum — e, mais importante, sem
 * abrir espaço para as duas auditorias serem violadas de novo: não entra
 * tamanho de fonte novo, nem raio novo, nem sombra nova, nem espaçamento fora
 * da escala. Entram outros VALORES para os mesmos tokens.
 *
 * ── POR QUE ESCURO SÓ AQUI ─────────────────────────────────────────────────
 *
 * O app do cliente é lido em sessões curtas, muitas vezes no meio do dia, e
 * imprime. O admin é um posto de observação: fica aberto, olha log correndo,
 * número mudando e job em voo. São trabalhos diferentes, e é a única razão
 * legítima para dois temas no mesmo produto.
 *
 * ── A COR NÃO É NOVA ───────────────────────────────────────────────────────
 *
 * O chão é `#0d0f14`, que já era o `--side` da barra lateral. O admin não
 * inventa um tom: ele promove a cor que a plataforma já usava à tela inteira.
 *
 * ── SOMBRA EM FUNDO ESCURO ─────────────────────────────────────────────────
 *
 * A auditoria fixou QUATRO degraus de sombra, contra os 37 que existiam. Os
 * quatro continuam sendo quatro: o que muda é que, no escuro, sombra preta
 * sobre preto não separa nada. Cada degrau ganha um valor próprio — mais
 * profundo embaixo e um fio de luz em cima, que é como superfície empilhada se
 * lê no escuro. Mesma escala, outro material.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   O TEMA ESCURO É UMA PREFERÊNCIA DA PESSOA (Salto 2 · parada 5)

   A paleta abaixo nasceu para o admin. Agora ela é o tema escuro de quem
   ESCOLHER, e só de quem escolher: o dono do produto viu a plataforma abrir
   escura porque o sistema dele é escuro, e não gostou. O padrão é claro,
   sempre. Duas portas:
     1. `html[data-tema="escuro"]` — a pessoa escolheu, no perfil;
     2. `html[data-admin]`          — o admin continua escuro sempre.
   Não há `prefers-color-scheme` de propósito.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-admin],
html[data-tema="escuro"] {
  /* superfícies */
  --bg: #0d0f14;
  --surface: #14171d;
  --surface-hi: #1a1e26;
  --border: #232831;

  /* texto: os `-ink` existem para passar em AA, e aqui eles sobem em vez de
     descer. Medido contra `--surface`: ink 14.8:1, dim-ink 6.4:1,
     faint-ink 4.8:1. */
  --ink: #e9ebef;
  --dim: #a7aeb9;
  --dim-ink: #b3bac4;
  --faint: #79808b;
  --faint-ink: #949ba6;

  /* marca: o azul de origem tem 2.1:1 contra este chão e some. O tom claro
     mantém a identidade e passa em AA. */
  --primary: #8496ff;
  --primary-soft: color-mix(in srgb, var(--primary) 11%, transparent);
  --primary-line: color-mix(in srgb, var(--primary) 30%, transparent);
  --gold: #d4b370;
  --gold-ink: #d9bd82;

  /* estado: o par cor+`-ink` continua existindo, e o `-ink` continua sendo o
     que passa em texto. No claro ele escurece; aqui ele clareia. */
  --ok: #34d399;
  --ok-ink: #5ee9b5;
  --warn: #f59e0b;
  --warn-ink: #fbbf24;
  --danger: #f87171;
  --danger-ink: #fca5a5;

  /* a barra lateral fica um degrau ABAIXO do chão: no claro ela é a peça
     escura, e no escuro ela precisa continuar sendo a mais escura, senão some
     dentro da página. */
  --side: #090b0f;
  --side-foot: #06080b;

  /* Quatro degraus, os mesmos quatro. Ver a nota acima. */
  /* No escuro o vidro é o mesmo material com o sinal invertido: a superfície
     clareia um pouco em relação ao chão, em vez de escurecer. */
  --vidro: rgba(28, 32, 40, 0.85);
  --warn-fundo: var(--tom-warn-12);

  --shadow-card: none;
  --shadow-hover: 0 1px 0 0 var(--tom-branco-4), 0 8px 24px var(--tom-sombra-50);
  --shadow-pop: 0 1px 0 0 var(--tom-branco-8), 0 14px 32px var(--tom-sombra-60);
  --shadow-modal: 0 1px 0 0 var(--tom-branco-8), 0 36px 70px var(--tom-sombra-70);
}

/* `color-scheme` faz a barra de rolagem, o autofill e os controles nativos
   (select, checkbox, campo de data) nascerem escuros. Sem isto sobra uma
   faixa branca gritante na lateral e um `<select>` claro no meio do painel —
   os dois lugares onde o navegador desenha por conta própria. */
html[data-admin] { color-scheme: dark; }

/* ── O BOTÃO PRIMÁRIO NO ESCURO ────────────────────────────────────────────
 *
 * MEDIDO em 2.7:1, contra os 4.5 exigidos. Vale para TODO botão primário do
 * admin, e não para uma tela só.
 *
 * A causa é a troca de papel do mesmo token. O `--primary` do tema escuro foi
 * clareado para `#8496ff` porque ele precisa ser TEXTO legível sobre o chão
 * preto, e nisso ele está certo. Mas `.btn.p` usa `--primary` como FUNDO com
 * texto branco, e branco sobre azul claro não contrasta: a mesma cor que
 * resolveu um caso quebrou o outro.
 *
 * O conserto é inverter a tinta, e não escurecer o fundo. Escurecer devolveria
 * o botão à cor do tema claro e ele sumiria contra a página; tinta escura sobre
 * o azul claro dá 7.11:1 e mantém o botão sendo a coisa mais visível da tela,
 * que é o trabalho dele.
 *
 * A lição é a mesma da regra de contraste do `.chip.ap`: um token de COR DE
 * TEXTO não pode ser reaproveitado como cor de FUNDO sem refazer a conta. */
/* ATUALIZADO em 06.09.2026: o primário passou a ser o material de impacto
   (marinho + luzes), que some sobre o chão escuro. No escuro ele vira BRANCO
   com tinta marinho, como já era sobre qualquer superfície de impacto. */
:is(html[data-admin], html[data-tema="escuro"]) .btn.p,
:is(html[data-admin], html[data-tema="escuro"]) .btn.p:hover:not(:disabled),
:is(html[data-admin], html[data-tema="escuro"]) .arv-at.convite {
  background: #fff; color: var(--navy); border-color: #fff; filter: none;
}
:is(html[data-admin], html[data-tema="escuro"]) .btn.p .ic { color: var(--navy); }
:is(html[data-admin], html[data-tema="escuro"]) .jn-p.feito .jn-mk,
:is(html[data-admin], html[data-tema="escuro"]) .ej.feito .ej-mk { background: var(--primary); border-color: var(--primary); color: #0d0f14; }

/* A imagem que o navegador desenha por trás do documento. Sem isto, rolar
   além do fim mostra branco. */
:is(html[data-admin], html[data-tema="escuro"]) body { background: var(--bg); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ADMIN — os componentes que nunca tiveram classe.
 *
 * As duas telas do admin somavam 81 `style=` inline. Não era desleixo isolado:
 * era a única área do produto que nasceu antes das duas auditorias e nunca
 * voltou. A auditoria medida agora, no navegador, encontrou:
 *
 *   · OITO tamanhos de fonte onde a escala tem cinco. O `13.5px` aparecia nas
 *     SEIS abas — exatamente o caso que a auditoria original descreve, "é assim
 *     que 13.5px e 12.5px acabam lado a lado querendo dizer a mesma coisa".
 *   · NOVE valores de espaçamento fora da escala `--e*` (2, 6, 6.5, 10, 11, 14,
 *     18, 20, 22). O `6`, o `18` e o `20` estavam em todas as abas.
 *   · Dois raios fora da escala: `9px` no Painel e `50px` na Operação.
 *
 * O conserto não é uma camada de utilitários — isso só troca o lugar do
 * problema. É dar CLASSE DE COMPONENTE ao que já era componente e estava sendo
 * desenhado por atributo.
 * ═════════════════════════════════════════════════════════════════════════ */


.adm-abas { display: flex; gap: var(--e2); margin-bottom: var(--e4); flex-wrap: wrap; }

/* Bloco de conteúdo dentro de uma aba: cartão, título e nota. */
.adm-bloco { margin-top: var(--e4); }
.adm-nota { font-size: var(--f-apoio); color: var(--faint-ink); margin: 0 0 var(--e3); line-height: 1.6; }
.adm-nota:last-child { margin-bottom: 0; }

/* Uma fileira de controles. Substitui `display:flex;gap:6px` escrito à mão. */
.adm-linha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.adm-linha.topo { margin-top: var(--e4); }
.adm-fim { margin-left: auto; }

.adm-dir { text-align: right; }
.adm-cen { text-align: center; }
.adm-nowrap { white-space: nowrap; }
.adm-micro { font-size: var(--f-micro); }
.adm-apoio { font-size: var(--f-apoio); }
.adm-dim { color: var(--dim-ink); }
.adm-faint { color: var(--faint-ink); }
/* Piloto e Impacto (01.10.2026): o subtítulo e a lista de comentários. */
.adm-sub { margin: var(--e5) 0 var(--e3); font-size: var(--f-corpo); font-weight: 600; color: var(--ink); }
.adm-coments { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.adm-coments li { padding-bottom: var(--e3); border-bottom: 1px solid var(--border); font-size: var(--f-apoio); }
.adm-coments li:last-child { border-bottom: 0; }
.adm-coments p { margin: var(--e2) 0 0; color: var(--ink); line-height: 1.6; }

/* Divisor que fecha um bloco. Era `margin-top: var(--e5);padding-top: var(--e4);border-top`. */
.adm-rodape { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--border); }

/**
 * O CAMPO DE TEXTO DO ADMIN.
 *
 * Era desenhado inline com `height:33px`, `border-radius:9px` e `font:400 13px`
 * — três valores fora de escala numa declaração só, e o `9px` era o único raio
 * de 9 do produto inteiro.
 *
 * A altura vai a 36px de propósito: 33 é menor que qualquer alvo do sistema, e
 * o campo fica ao lado de um botão que suspende a geração para todos os
 * clientes. Alvo pequeno ao lado de ação grave foi o achado nº 1 da auditoria.
 */
.adm-campo {
  flex: 1; min-width: 280px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 0 var(--e3);
  font: 400 var(--f-corpo) var(--body);
  background: var(--surface); color: var(--ink);
}
.adm-campo::placeholder { color: var(--faint-ink); }
.adm-campo:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Coluna estreita de tabela, para número. Era `width:110px` / `min-width:120px`. */
.adm-col-n { width: 112px; }
.adm-col-m { min-width: 120px; }

/**
 * O ALVO MÍNIMO DO ADMIN.
 *
 * A auditoria fixou 44px para toque e reprovou um alvo de 24x16 ao lado de uma
 * ação destrutiva. O admin é usado no teclado e no mouse, e 44px em toda
 * pastilha de filtro deixaria a Operação com uma barra de ferramentas do
 * tamanho de um cabeçalho — então o piso aqui é 36px, com área de clique
 * confortável, e 44px continua valendo em qualquer coisa que apague ou suspenda.
 */
/* O piso de 36 do admin virou o padrão do `.btn.pq`; esta linha não faz mais
   nada. Fica só a exceção de 44 para o que apaga ou suspende. */
:is(html[data-admin], html[data-tema="escuro"]) .btn.pq[data-manutencao],
:is(html[data-admin], html[data-tema="escuro"]) .btn[data-apagar],
:is(html[data-admin], html[data-tema="escuro"]) .btn.d { min-height: 44px; }

/* As classes que fecham a passagem dos 81 inline. Nomes de componente, e não
   de utilidade: `adm-nota` diz o que a coisa é; `.mt-14` diria onde ela está. */
.adm-m0 { margin: 0; }
.adm-medida { max-width: 52ch; }
.adm-afastado { margin-left: var(--e3); }
.adm-abaixo { margin-top: var(--e2); }
.adm-erro { color: var(--danger-ink); max-width: 280px; }
.adm-aviso { color: var(--warn-ink); }
.adm-titulo-grupo { margin: var(--e5) 0 var(--e2); }
.adm-flex-240 { flex: 0 1 240px; }
.adm-flex-160 { flex: 1; min-width: 160px; }
.adm-item { padding: var(--e3) 0; border-bottom: 1px solid var(--border); }
.adm-item:last-child { border-bottom: 0; }
.adm-linha.base { align-items: flex-end; }

/* ESTADO É CLASSE, nunca cor inline. Duas razões, e a segunda só apareceu com
   o tema escuro: a auditoria proíbe estado dito só por cor, e cor literal
   escolhida para fundo claro simplesmente some no escuro. */
.faixa-kpi .kpi-c.t-ruim .kpi-n { color: var(--danger-ink); }
.faixa-kpi .kpi-c.t-aviso .kpi-n { color: var(--warn-ink); }
.faixa-kpi .kpi-c.t-vivo .kpi-n { color: var(--primary); }
.faixa-kpi .kpi-c.t-atencao .kpi-n { color: var(--warn-ink); }
.faixa-kpi.adm-m0 { margin-bottom: 0; }
.adm-alerta { border-color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════════════════
 * PORTÃO DE CONFIDENCIALIDADE
 *
 * Texto aberto, largura de leitura, e o botão de aceitar desligado até a caixa
 * ser marcada. A regra visual é a mesma do resto: token para tudo, e o estado
 * do botão dito por palavra e por opacidade, nunca só por cor.
 * ═════════════════════════════════════════════════════════════════════════ */

.nda { max-width: 68ch; margin: 0 auto; }
.nda-cab { display: flex; gap: var(--e4); align-items: flex-start; margin-bottom: var(--e5); }
.nda-ic {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r); background: var(--primary-soft);
  border: 1px solid var(--primary-line); color: var(--primary);
}
.nda-olho {
  font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--e1);
}
.nda-cab h1 { font-size: var(--f-tela); line-height: 1.2; letter-spacing: var(--tr-tight); }
.nda-sub { font-size: var(--f-corpo); color: var(--dim-ink); line-height: 1.65; margin-top: var(--e2); }

.nda-lista {
  list-style: none; counter-reset: nda; padding: 0; margin: 0 0 var(--e5);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.nda-lista li {
  counter-increment: nda;
  display: grid; grid-template-columns: 28px 1fr; gap: var(--e3);
  padding: var(--e4); border-top: 1px solid var(--border);
}
.nda-lista li:first-child { border-top: 0; }
.nda-lista li::before {
  content: counter(nda);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  color: var(--primary); padding-top: var(--e0);
}
.nda-corpo { min-width: 0; }
.nda-lista b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e1); }
.nda-lista p { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.7; margin: 0; }

/* ── O termo integral ─────────────────────────────────────────────────────
   Fechado, ele e uma linha de link. Aberto, um documento que rola dentro de
   si mesmo: onze clausulas empurrando o botao de aceitar para 3000px abaixo
   fariam desaparecer da tela a acao que a pagina existe para oferecer, que e
   o mesmo erro do rodape do modal do Toolbox. */
/* O rodape do dossie. Era `style="display:flex;gap:14px"` mais um `<span>`
   com `font-size: var(--f-micro)` e `margin-left:auto` escritos a mao — quatro valores
   fora da escala numa peca que aparece no fim de TODO relatorio. */
.dossie-pe { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: var(--e4) 0 0; margin-top: var(--e5); }
.dossie-quando {
  margin-left: auto; font-family: var(--mono);
  font-size: var(--f-micro); color: var(--faint-ink);
}

/* ── A faixa da Trava do Raio-X ───────────────────────────────────────────
   Ambar e nao vermelho: nada esta errado, e o vermelho diria que esta. E o
   mesmo tom da pastilha "ativacao a parte", que ja e a cor de "existe e se
   compra a parte" no produto. */
.est-trava {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4); margin-bottom: var(--e5);
  border: 1px solid var(--warn-line, var(--tom-warn-25));
  border-radius: var(--r-md);
  background: var(--warn-fundo);
}
.est-trava-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--r);
  background: var(--tom-warn-12); color: var(--warn-ink);
}
.est-trava-txt { flex: 1; min-width: 0; }
.est-trava-txt b { display: block; font-size: var(--f-leitura); margin-bottom: var(--e1); }
.est-trava-txt p { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.est-trava .btn { flex-shrink: 0; }

@container tela (max-width: 720px) {
  .est-trava { flex-direction: column; align-items: flex-start; }
  .est-trava .btn { width: 100%; justify-content: center; }
}

/* ── O editor de e-mail ───────────────────────────────────────────────────
   Formulario e previa lado a lado. A previa e o unico lugar do admin onde o
   fundo precisa ser BRANCO mesmo no tema escuro: a mensagem vai chegar numa
   caixa de entrada branca, e avalia-la sobre preto e avaliar outra coisa. */
/* ── O atalho do CNPJ ─────────────────────────────────────────────────────
   Fechado ele e uma linha; aberto, tres elementos. Nasce fechado porque nem
   todo negocio tem CNPJ, e o produto atende quem ainda nao abriu empresa. Um
   atalho que parece obrigatorio e um obstaculo com outro nome. */
.cnpj-bloco { margin-bottom: var(--e4); }

.cnpj-abrir {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: var(--e2) var(--e3);
  border: 1px dashed var(--border); border-radius: var(--r);
  background: transparent; color: var(--dim-ink);
  font: 400 var(--f-apoio) var(--body); cursor: pointer;
  transition: border-color var(--t-rapido), color var(--t-rapido);
}
.cnpj-abrir:hover { border-color: var(--primary-line); color: var(--primary); }
.cnpj-abrir.aberto { border-style: solid; border-color: var(--primary-line); color: var(--primary); }
.cnpj-abrir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.cnpj-corpo {
  margin-top: var(--e3); padding: var(--e4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.cnpj-corpo label {
  display: block; margin-bottom: var(--e2);
  font-size: var(--f-apoio); font-weight: 600; color: var(--ink);
}
.cnpj-linha { display: flex; gap: var(--e2); flex-wrap: wrap; }
.cnpj-linha input {
  flex: 1; min-width: 200px; height: 44px;
  padding: 0 var(--e3);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg); color: var(--ink);
  /* Mono porque sao catorze digitos com pontuacao, e o unico jeito de conferir
     isso a olho e ter cada numero na mesma largura. */
  font: 400 var(--f-corpo) var(--mono);
  letter-spacing: 0.03em;
}
.cnpj-linha input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cnpj-nota { margin: var(--e2) 0 0; font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.55; }

.cnpj-msg:not(:empty) { margin-top: var(--e3); }
.cnpj-ok {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e3); border-radius: var(--r);
  background: var(--tom-ok-8);
}
.cnpj-ok .ic { color: var(--ok-ink); flex-shrink: 0; margin-top: var(--e0); }
.cnpj-ok b { display: block; font-size: var(--f-corpo); }
.cnpj-ok span { display: block; font-size: var(--f-apoio); color: var(--dim-ink); }

/* Aviso, nunca erro: nada quebrou, e a analise nao muda se a pessoa digitar. */
.cnpj-aviso {
  margin-top: var(--e2); padding: var(--e3);
  border-radius: var(--r); background: var(--warn-fundo);
  font-size: var(--f-apoio); color: var(--warn-ink); line-height: 1.55;
}

.eml-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e5); margin-top: var(--e4);
}
.eml-form .campo:last-of-type { margin-bottom: var(--e3); }

.eml-previa {
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); min-height: 420px;
  display: flex; flex-direction: column;
}
.eml-previa-cab {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--border);
  font-size: var(--f-apoio); font-weight: 600; color: var(--ink);
}
.eml-previa-cab span {
  font-family: var(--mono); font-size: var(--f-micro);
  color: var(--faint-ink); font-weight: 400;
}
.eml-previa iframe {
  flex: 1; width: 100%; border: 0; background: #ffffff;
  /* A altura vem do flex, e nao de um numero: a mensagem cresce com o texto
     que o admin escreve, e um `height` fixo cortaria justamente a edicao que
     ele acabou de fazer. */
  min-height: 360px;
}

@media (max-width: 900px) {
  .eml-grade { grid-template-columns: 1fr; }
}

.ars-falta {
  display: flex; align-items: center; gap: var(--e2);
  margin: var(--e3) 0 0; font-size: var(--f-apoio); color: var(--faint-ink);
}
.ars-falta .ic { flex-shrink: 0; }

.nda-integral {
  margin: var(--e4) 0 0;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.nda-integral > summary {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4); min-height: 44px;
  cursor: pointer; list-style: none;
  font-size: var(--f-apoio); color: var(--primary);
  border-radius: var(--r);
}
.nda-integral > summary::-webkit-details-marker { display: none; }
.nda-integral > summary:hover { background: var(--primary-soft); }
.nda-integral > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nda-integral > summary .ic { flex-shrink: 0; }
.nda-integral > summary span { text-decoration: underline; text-underline-offset: 2px; }
.nda-integral[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
}

.nda-integral-corpo {
  max-height: 46vh; overflow-y: auto;
  padding: var(--e4);
  font-size: var(--f-apoio); line-height: 1.65; color: var(--dim-ink);
}
.nda-integral-corpo h3 {
  font-size: var(--f-corpo); color: var(--ink); margin: 0 0 var(--e3);
  text-wrap: balance;
}
.nda-integral-corpo h4 {
  font-size: var(--f-apoio); color: var(--ink); font-weight: 600;
  margin: var(--e4) 0 var(--e2); letter-spacing: var(--tr-tight);
}
.nda-integral-corpo h4:first-of-type { margin-top: var(--e3); }
.nda-integral-corpo p { margin: 0 0 var(--e2); }
.nda-integral-corpo ul { margin: 0 0 var(--e2); padding-left: var(--e5); }
.nda-integral-corpo li { margin-bottom: var(--e1); }

.nda-versao {
  font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.6;
  padding: var(--e3) var(--e4); border-radius: var(--r-xs);
  background: var(--surface-hi); margin-bottom: var(--e4);
}
.nda-versao code { font-family: var(--mono); }

.nda-marca {
  display: flex; gap: var(--e3); align-items: flex-start; cursor: pointer;
  padding: var(--e4); border: 1px solid var(--primary-line); border-radius: var(--r);
  background: var(--primary-soft); font-size: var(--f-corpo); font-weight: 600;
}
.nda-marca input { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--e0); accent-color: var(--primary); }

.nda-erro { font-size: var(--f-apoio); color: var(--danger-ink); margin: var(--e3) 0 0; min-height: 1.2em; }

.nda-pe { display: flex; gap: var(--e3); justify-content: flex-end; margin-top: var(--e4); flex-wrap: wrap; }
/* Botão desligado diz por que, e não só por cor: o cursor muda e a opacidade
   cai, e o texto continua nomeando a ação. */
.nda-pe .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

@container tela (max-width: 640px) {
  .nda-cab { flex-direction: column; gap: var(--e3); }
  .nda-pe .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BOAS-VINDAS — a tela de quem ainda não comprou.
 *
 * Coluna única e larga de leitura. Não é painel e não deve parecer painel: a
 * pessoa está LENDO para decidir, não operando. Por isso nada de grade de
 * cartões, nada de números grandes, nada de barra de progresso.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 *  A MARGEM ESQUERDA É A MESMA DE TODAS AS OUTRAS TELAS.
 *
 *  As duas telas da conta nova — o primeiro acesso e o módulo travado — eram
 *  as únicas com `margin: 0 auto`. Medido a 1280px: o miolo começa em 284, e a
 *  tela travada começava em 552. Duzentos e setenta pixels de deslocamento em
 *  relação ao título de qualquer outra tela, e o bloco lia como um cartão solto
 *  no meio da página em vez de conteúdo do produto.
 *
 *  O teto continua existindo, porque prosa a 1000px passa dos 120 caracteres
 *  por linha. O que sai é a centralização: alinhado à esquerda, o olho encontra
 *  a mesma coluna que encontra na Biblioteca, nas Pendências e no dossiê.
 * ═══════════════════════════════════════════════════════════════════════════ */
.bv { max-width: 1240px; margin: 0; padding-bottom: var(--e7); }
/* A explicação à esquerda, a oferta à direita e acompanhando a rolagem. */
.bv-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--e6); align-items: start; }
.bv-fluxo { min-width: 0; }
.bv-lado { position: sticky; top: var(--e5); min-width: 0; }
.bv-lado .bv-preco { margin-top: var(--e6); }
@container tela (max-width: 1040px) {
  .bv-grade { grid-template-columns: minmax(0, 1fr); }
  .bv-lado { position: static; }
}

/* O herói do primeiro acesso. `.impacto` põe o marinho, as duas luzes e o
   grão; aqui fica só a caixa e o que o texto precisa para ler sobre ele. */
.bv-topo { padding: var(--e6); border-radius: var(--r-lg); margin-top: var(--e5); }
.bv-olho {
  display: inline-block; margin-bottom: var(--e3);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary);
}
/* Dois seletores e não um: `.bv-olho` sozinho também veste o "A entrada" do
   bloco de preço e o "Pedido recebido", que continuam sobre papel claro. */
.bv-topo .bv-olho { color: var(--tom-branco-60); }
.bv-topo h1 {
  font-size: var(--f-heroi); font-weight: 600; line-height: 1.15;
  letter-spacing: var(--tr-tight); margin: 0; text-wrap: balance; color: #fff;
}
.bv-sub {
  margin: var(--e4) 0 0; max-width: 58ch;
  font-size: var(--f-leitura); line-height: 1.6; color: var(--tom-branco-70);
}
/* O quadro do vídeo dentro do herói: painel translúcido, e não um segundo
   retângulo escuro sobre o escuro. */
.bv-topo .video-facha { margin: var(--e5) 0 0; }
.bv-topo .vf-play { background: var(--tom-branco-8); border-color: var(--tom-branco-18); }
.bv-topo .vf-play:hover { background: var(--tom-branco-12); border-color: var(--tom-branco-25); }

.bv-bloco { margin-top: var(--e6); }
.bv-bloco h2 {
  font-size: var(--f-leitura); margin: 0 0 var(--e3);
  letter-spacing: var(--tr-tight);
}
.bv-p { margin: 0 0 var(--e3); max-width: 62ch; line-height: 1.65; color: var(--dim-ink); }
.bv-p b { color: var(--ink); }

/* As tres entregas. Grade que vira coluna cedo: sao FRASES, e em tres colunas
   estreitas cada uma quebra em cinco linhas. */
.bv-entregas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e3); margin-top: var(--e4);
}
.bv-entrega {
  padding: var(--e4); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
}
/* Herda `--fam-soft` e `--fam-icone` de `.fam-diagnostico`, com o azul do
   produto como rede se a família sair do bloco. */
.bv-ic {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r); margin-bottom: var(--e3);
  background: var(--fam-soft, var(--primary-soft)); color: var(--fam-icone, var(--primary));
}
.bv-entrega b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e2); }
.bv-entrega p { margin: 0; font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink); }

/* ── O preco ──────────────────────────────────────────────────────────────
   Duas partes: a oferta, em destaque, e o degrau seguinte, declarado sem ser
   perguntado. Declarar a escada inteira e a unica defesa que funciona contra
   "R$ 500 e a isca e o caro vem depois". */
.bv-preco {
  margin-top: var(--e6);
  border: 1px solid var(--primary-line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.bv-preco-oferta { padding: var(--e5); background: var(--primary-soft); }

/* O CARTAO DO PEDIDO ocupa o lugar da oferta que a pessoa acabou de aceitar.
   Verde, e nao azul de marca: aqui a cor diz "deu certo", que e a unica coisa
   que ela quer saber neste momento. */
.bv-pedido { padding: var(--e5); background: var(--tom-ok-8); }
.bv-pedido .bv-olho { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-ink); }
.bv-pedido h3 { margin: var(--e2) 0 var(--e2); font-size: var(--f-secao); }
.bv-pedido-n {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3);
  margin-top: var(--e4); padding: var(--e3); border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--border); font-size: var(--f-apoio);
}
.bv-pedido-n b { font-family: var(--mono); font-size: var(--f-corpo); }
.bv-valor {
  font-size: 40px; font-weight: 600; line-height: 1;
  letter-spacing: -0.03em; margin-bottom: var(--e3);
}
.bv-apoio { margin: 0 0 var(--e4); max-width: 52ch; font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink); }
/* `--dim-ink` e nao `--faint-ink`: medido em 4.26 contra os 4.5 exigidos. O
   `--faint-ink` e calibrado contra a superficie branca, e aqui ele fica sobre
   o `--primary-soft`, que e um fundo tingido. Mesmo caso do `.pc-urg`. */
.bv-nota { margin: var(--e3) 0 0; font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink); }

.bv-preco-depois { padding: var(--e5); border-top: 1px solid var(--border); }
.bv-preco-depois b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e2); }
.bv-preco-depois p { margin: 0 0 var(--e3); font-size: var(--f-apoio); line-height: 1.65; color: var(--dim-ink); max-width: 60ch; }
.bv-preco-depois p:last-child { margin-bottom: 0; }

/* ── A superfície das seções de baixo ───────────────────────────────────────
 *
 * Da metade da página para baixo era texto solto no fundo cinza: título,
 * parágrafo, título, parágrafo. Numa tela de venda que é a primeira do produto
 * isso lê como rascunho, e o contraste com a conta que já tem relatório — onde
 * tudo mora em cartão — era exatamente o que o Hans apontou.
 *
 * Não é `.caixa` por herança de classe porque estas seções já têm `h2` e ritmo
 * próprios; é a mesma receita de superfície, aplicada onde ela faltava. */
.bv-caixa {
  padding: var(--e5); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card);
}
.bv-caixa > h2 { margin-bottom: var(--e4); }
/* A FAQ herdada da Ajuda encosta nas bordas do cartão: o cartão já dá o
   respiro, e o primeiro item não pode ter linha em cima. */
.bv-caixa .faq { margin-top: calc(var(--e3) * -1); }
.bv-dentro .bv-p:last-child { margin-bottom: 0; }

/* ── A Leitura do Momento no primeiro acesso (03.10.2026) ─────────────────
   A leitura completa de quem respondeu as seis perguntas antes de ter conta.
   As três partes ficam EMPILHADAS, e não em colunas: são parágrafos, e em três
   colunas cada um quebraria em seis linhas estreitas. O "De onde veio" é a
   mesma caixa da página pública (`.lm-porque`). */
.bv-leitura > h2 { font-size: var(--f-secao); margin-bottom: var(--e2); }
.bv-leitura-sinal { margin: 0 0 var(--e4); font-size: var(--f-leitura); line-height: 1.5; color: var(--ink); max-width: 56ch; }
/* As três partes e a ponte são as mesmas da página pública com a conta aberta
   (`leitura.js`): uma regra só para os dois lugares. */
.lm-partes { margin: var(--e4) 0; display: flex; flex-direction: column; }
.lm-partes > div { padding: var(--e4) 0; border-top: 1px solid var(--border); }
.lm-partes dt { font-size: var(--f-apoio); font-weight: 600; color: var(--ink); margin-bottom: var(--e1); }
.lm-partes dd { margin: 0; max-width: 64ch; font-size: var(--f-corpo); line-height: 1.65; color: var(--dim-ink); }
.lm-ponte { margin: 0 0 var(--e4); padding: var(--e4); border-radius: var(--r); background: var(--tom-primario-8);
            font-size: var(--f-corpo); line-height: 1.6; color: var(--prosa); }
.lm-ponte b { color: var(--ink); }
.bv-leitura .lm-ponte { margin-bottom: 0; }
.bv-leitura-refazer { display: inline-block; margin-top: var(--e3); font-size: var(--f-apoio); color: var(--dim-ink); }
.bv-leitura-refazer:hover { color: var(--ink); }

/* ── Os passos ──────────────────────────────────────────────────────────── */
.bv-passos { margin: 0; padding: 0; counter-reset: passo; list-style: none; }
.bv-passos li {
  counter-increment: passo; position: relative;
  display: grid; grid-template-columns: 32px 1fr; gap: var(--e3);
  padding-bottom: var(--e5);
}
.bv-passos li:last-child { padding-bottom: 0; }
/* O MARCADOR É O MESMO DA JORNADA da conta com relatório: círculo de material
   de impacto com o número em branco. Era um círculo cinza com número cinza,
   que some ao lado do próprio texto que ele numera. */
.bv-passos li::before {
  content: counter(passo);
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--impacto-fundo);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  color: #fff;
}
/* O trilho que liga um passo ao seguinte. É o que transforma três itens numa
   sequência: sem ele são três blocos que por acaso estão numerados. */
.bv-passos li:not(:last-child)::after {
  content: ''; position: absolute; left: 13.5px; top: 32px; bottom: var(--e3);
  width: 1px; background: var(--border);
}
/**
 * OS DOIS FILHOS FICAM NA COLUNA 2, e sem isto o paragrafo sai com uma letra
 * de largura.
 *
 * O `li` e uma grade de `32px 1fr`. O `::before` ocupa a celula 1, o `<b>` cai
 * na celula 2, e o `<p>`, sendo o terceiro item, vai para a LINHA seguinte na
 * coluna de 32px. O texto esta todo la, inteiro e correto, empilhado
 * verticalmente uma letra por linha.
 *
 * E o mesmo defeito das clausulas do acordo de confidencialidade, e nenhum
 * teste de conteudo pega: so aparece olhando. Duas linhas de CSS resolvem, e
 * a alternativa (um `<div>` embrulhando os dois) troca CSS por markup sem
 * ganhar nada.
 */
.bv-passos li > b,
.bv-passos li > p { grid-column: 2; }
.bv-passos b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e1); }
.bv-passos p { margin: 0; font-size: var(--f-apoio); line-height: 1.65; color: var(--dim-ink); max-width: 58ch; }

/* ── Quem esta do outro lado ────────────────────────────────────────────── */
.bv-quem {
  padding: var(--e5); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
}
.bv-registro {
  margin: var(--e3) 0 0; padding-top: var(--e3);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink);
}

@container tela (max-width: 640px) {
  .bv-topo h1 { font-size: var(--f-tela); }
  .bv-valor { font-size: var(--f-heroi); }
  .bv-preco-oferta, .bv-preco-depois, .bv-quem { padding: var(--e4); }
  .bv-preco-oferta .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MÓDULO TRAVADO — a página que substituiu um 403.
 * ═════════════════════════════════════════════════════════════════════════ */

.tv { max-width: 1240px; margin: 0; padding: var(--e5) 0 var(--e7); }
/* O texto à esquerda, a oferta à direita e acompanhando a rolagem. */
.tv-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--e6); align-items: start; }
.tv-fluxo { min-width: 0; }
.tv-lado { position: sticky; top: var(--e5); min-width: 0; }
@container tela (max-width: 1040px) {
  .tv-grade { grid-template-columns: minmax(0, 1fr); }
  .tv-lado { position: static; }
}

/* O herói. `.impacto` põe o material; aqui fica a caixa e a luz da família. */
.tv-cab {
  display: block; margin-bottom: var(--e4);
  padding: var(--e5); border-radius: var(--r-lg);
  --luz-azul: color-mix(in srgb, var(--fam, var(--primary)) 50%, transparent);
}
.tv-topo { display: flex; align-items: center; gap: var(--e4); }
/* ═══════════════════════════════════════════════════════════════════════════
 *  O FILETE DA FAMÍLIA, que é como o resto do produto assina cada módulo.
 *
 *  A conta com relatório reconhece os módulos pela cor: verde do Raio-X, azul
 *  do Plano, roxo do Radar, laranja do Toolbox. A conta nova, que é justamente
 *  quem ainda não sabe distinguir um do outro, via quatro telas idênticas.
 *
 *  Mesmo dispositivo do cartão de motor da Ajuda: três pixels no topo. Aqui ele
 *  é o único lugar onde a cor aparece em cheio — a luz do herói e o ladrilho do
 *  ícone são tingidos, e o texto continua branco, porque cor de família nunca
 *  vai em texto.
 * ═══════════════════════════════════════════════════════════════════════════ */
.tv-cab::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: var(--fam, var(--primary));
}
.tv-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fam, var(--primary)) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam, var(--primary)) 45%, transparent);
  color: #fff;
}
.tv-olho {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tom-branco-60);
  margin-bottom: var(--e2);
}
.tv-cab h1 { font-size: var(--f-tela); line-height: 1.2; letter-spacing: var(--tr-tight); margin: 0; color: #fff; }

.tv-porque { font-size: var(--f-leitura); line-height: 1.6; color: var(--tom-branco-70); margin: var(--e4) 0 0; max-width: 66ch; }
.tv-quando { font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink); margin: 0 0 var(--e5); max-width: 58ch; }

/* A NOTA DE ESCOPO TEM O DESENHO DA PONTE, e de proposito: as duas dizem algo
   que a pessoa precisa saber antes de decidir, e nenhuma das duas e argumento
   de venda. Uma caixa so, com dois usos, em vez de dois avisos parecidos. */
.tv-nota,
.tv-ponte {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: 0 0 var(--e4); padding: var(--e3);
  border-radius: var(--r); background: var(--surface-hi);
  font-size: var(--f-apoio); line-height: 1.6; color: var(--dim-ink);
}
.tv-nota .ic,
.tv-ponte .ic { flex-shrink: 0; margin-top: var(--e0); color: var(--faint-ink); }

.tv-oferta {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e4); border: 1px solid var(--primary-line);
  border-radius: var(--r-md); background: var(--primary-soft);
}
.tv-oferta > div:first-child { flex: 1; min-width: 220px; }
/* Na coluna estreita da direita, a oferta empilha. */
.tv-lado .tv-oferta { flex-direction: column; align-items: stretch; }
.tv-lado .tv-oferta > div:first-child { min-width: 0; }
.tv-oferta b { display: block; font-size: var(--f-corpo); margin-bottom: var(--e1); }
.tv-oferta p { margin: 0; font-size: var(--f-apoio); line-height: 1.55; color: var(--dim-ink); }
.tv-preco { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.tv-preco span { font-size: var(--f-tela); font-weight: 600; letter-spacing: var(--tr-tight); white-space: nowrap; }

.tv-volta { margin: var(--e5) 0 0; }

/* O rotulo do menu nao quebra linha. O cadeado entrou como terceiro filho do
   botao e espremeu o texto: "Estudio de IA" virou duas linhas e a altura do
   item saiu da grade do resto da barra. `nowrap` no rotulo e `flex-shrink: 0`
   no cadeado resolvem, e o texto que nao couber e problema de rotulo comprido,
   nao de layout. */
#nav button > span:not(.nav-cadeado):not(.pt) { white-space: nowrap; }
.nav-cadeado { flex-shrink: 0; }

/* O cadeado do menu. Discreto de proposito: bloqueio e informacao, nunca
   erro, e badge vermelho aqui leria como problema na conta. */
/* A folga à esquerda é o conserto do aperto: com `margin-left: auto` sozinho,
   o cadeado encostava no rótulo quando o texto era longo, e o item inteiro
   lia como amassado. */
.nav-cadeado { display: inline-flex; align-items: center; margin-left: auto; padding-left: 10px;
               color: var(--faint); opacity: 0.75; }
/**
 * O RÓTULO TRAVADO NÃO É APAGADO.
 *
 * Eu tinha escrito `color: var(--dim)` para sinalizar o bloqueio, e medi 3.96
 * contra os 4.5 exigidos. É o mesmo erro que já está documentado neste arquivo:
 * os tokens `-ink` existem porque são os que passam em AA, e o `--dim` é a
 * versão decorativa.
 *
 * Mas o conserto certo não é trocar por `--dim-ink`, é NÃO APAGAR. O cadeado
 * já diz que está bloqueado, e apagar o texto por cima é redundância que custa
 * legibilidade: paga-se contraste para repetir o que um ícone já disse.
 */
#nav button.travado:hover .nav-cadeado { color: var(--warn-ink); opacity: 1; }

@container tela (max-width: 620px) {
  .tv-cab h1 { font-size: var(--f-secao); }
.tv-oferta { flex-direction: column; align-items: stretch; }
  .tv-preco { justify-content: space-between; }
}

/* ── O CAMPO DO DOCUMENTO NA COMPRA ──────────────────────────────────────
 * Ele aparece dentro do cartão escolhido, no lugar do botão, depois que a
 * pessoa já decidiu. Ver `comprar.js`, `abrirDocumento`.
 * ---------------------------------------------------------------------- */
.compra-doc { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e1); }
.compra-doc label {
  font-family: var(--body); font-size: var(--f-micro); font-weight: 700; color: var(--ink);
}
.cd-nota { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); }
/* Empilha em telas estreitas: lado a lado, o campo fica pequeno demais para
   um CNPJ mascarado caber sem cortar. */
.cd-linha { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2); }
.cd-linha input {
  flex: 1 1 11rem; min-height: 44px; padding: 0 var(--e3);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink);
  /* O degrau da escala. O zoom do Safari do iPhone já está resolvido para
     TODO input pela regra de `max-width: 900px` lá em cima, que sobe a
     família inteira para --f-leitura no celular: escrever 16px aqui seria uma
     segunda solução para um problema que já tem uma. */
  font-size: var(--f-corpo); font-family: var(--mono); letter-spacing: 0.04em;
}
.cd-linha input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.cd-linha .btn { flex: 1 1 12rem; min-height: 44px; }
.cd-erro:empty { display: none; }
.cd-erro {
  font-size: var(--f-apoio); color: var(--danger-ink);
  margin-top: var(--e1);
}

/* As duas ações do "Próximo passo" no fim do Plano. Empilham no celular, e a
   secundária não some: quem quer comprar mais um relatório não perde o
   caminho. Ver `comprar.js`, `blocoContinuar`. */
.cont-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.cont-acoes .btn { min-height: 44px; }

/* ── A DOBRA DAS LACUNAS ─────────────────────────────────────────────────
 * O aviso continua inteiro e o número fica sempre à vista; a lista abre a
 * pedido. Medido em 375px numa Proposta com 7 lacunas: a lista aberta tinha
 * 1216px, e o primeiro `Copiar` do documento começava em 2158px, duas telas e
 * meia abaixo do topo. Ver `painelLacunas` em `toolbox-render.js`.
 * ---------------------------------------------------------------------- */
.tb-lac-cab {
  display: flex; align-items: flex-start; gap: var(--e3); width: 100%;
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; min-height: 44px;
}
.tb-lac-cab:focus-visible { outline: 2px solid var(--warn-ink); outline-offset: 4px; border-radius: var(--r-xs); }
.tb-lac-t { flex: 1; min-width: 0; }
.tb-lac-t b { font-family: var(--brand); font-size: var(--f-corpo); color: var(--warn-ink); display: block; }
.tb-lac-t i { display: block; font-style: normal; font-size: var(--f-apoio);
              color: var(--dim-ink); line-height: 1.6; margin-top: var(--e1); max-width: 66ch; }
.tb-lac-abrir {
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; color: var(--warn-ink); text-transform: uppercase; letter-spacing: 0.08em;
  flex-shrink: 0; align-self: center;
}
.tb-lac-seta { flex-shrink: 0; align-self: center; color: var(--warn-ink); transition: transform 250ms ease; }
.tb-lac-dobra.aberto .tb-lac-seta { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .tb-lac-seta { transition: none; } }

/* ── "COMO USAR": duas linhas à vista, o resto a pedido ──────────────────
 * Medido em 375px: o resumo tinha 281px e vinha antes de todo o conteúdo.
 * Ver a nota em `renderToolbox`. O texto continua inteiro no DOM, então o
 * Ctrl+F do navegador e a impressão continuam achando tudo.
 * ---------------------------------------------------------------------- */
.tb-como { margin: var(--e4) 0; }
.tb-como .tb-resumo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin: 0;
}
.tb-como.aberto .tb-resumo { display: block; overflow: visible; }
.tb-como-btn {
  background: none; border: 0; padding: var(--e2) 0; margin: 0; cursor: pointer;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--primary);
  min-height: 44px;
}
.tb-como-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }
/* Na impressão o texto sai inteiro: papel não tem botão para clicar. */
html.modo-papel .tb-como .tb-resumo { display: block !important; overflow: visible !important; }
html.modo-papel .tb-como-btn { display: none !important; }
/* ── A LISTA DE LACUNAS ABRE NO PAPEL ────────────────────────────────────
 * Regressão minha, do mesmo dia em que a dobra nasceu: fiz o "Como usar"
 * abrir na impressão e esqueci a lista de lacunas, que estava logo ao lado.
 *
 * É o pior lugar possível para esse esquecimento. A lista diz quais dados
 * ainda faltam, e entre eles estão preço, prazo de entrega e política de
 * garantia. Um PDF que esconde justamente isso é um PDF que parece pronto e
 * não está, e ele vai para a mão de um cliente. */
html.modo-papel .tb-lac-corpo { display: block !important; }
html.modo-papel .tb-lac-abrir,
html.modo-papel .tb-lac-seta { display: none !important; }
html.modo-papel .tb-lac-cab { cursor: default; }
/* O "Copiar" de cada seção sai; o cabeçalho que o contém FICA. Era a
   distinção que o seletor `header` não sabia fazer. */
html.modo-papel .tb-copiar { display: none !important; }

/* ── O CABEÇALHO DA FERRAMENTA NO CELULAR ────────────────────────────────
 * Medido em 375px: 331px de cabeçalho antes de qualquer conteúdo, com o
 * título ocupando quatro linhas. O título continua sendo a coisa mais
 * importante da tela e não encolhe até virar rótulo: cede um degrau da
 * escala, o suficiente para caber em três linhas. */
@container tela (max-width: 480px) {
  .toolbox .hero h1 { font-size: var(--f-tela); }
  .toolbox .hero { padding-bottom: var(--e3); }
}

/* ── A PILHA DE VALOR ────────────────────────────────────────────────────
 * O centro comercial da Oferta Irresistível. Cada entrega empilha, o valor
 * dela vira selo à direita, e a última linha, que é o preço, ganha o peso que
 * a peça inteira construiu. Ver `pilha` em `toolbox-render.js`.
 * ---------------------------------------------------------------------- */
.tb-pilha { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tb-pilha-itens { list-style: none; margin: 0; padding: 0; }
.tb-pilha-itens li {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--border);
}
.tb-pilha-o { flex: 1; min-width: 0; line-height: 1.5; }
.tb-pilha-v {
  /* `flex-shrink: 0` sem teto de largura foi o que esmagou o rótulo a uma
     letra por linha quando um valor veio comprido. A detecção agora exige
     valores curtos, e este teto é a segunda linha de defesa: se um dia entrar
     um valor grande, ele quebra em duas linhas em vez de comer a coluna. */
  flex-shrink: 0; max-width: 45%;
  font-family: var(--mono); font-size: var(--f-apoio);
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  text-align: right;
}
/* "Incluso", "Presente": qualificação, não preço. Selo quieto, para não
   competir com os números da coluna. */
.tb-pilha-v.selo {
  font-size: var(--f-micro); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ok-ink); background: var(--tom-ok-8);
  padding: var(--e0) var(--e2); border-radius: var(--r-xs); font-weight: 700;
}
.tb-pilha-fecho {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e4); background: var(--surface-hi);
}
.tb-pilha-fr { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.tb-pilha-pr {
  font-family: var(--brand); font-size: var(--f-secao); color: var(--primary);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* ── TABELA DE 3+ COLUNAS VIRA CARTÃO NO CELULAR ─────────────────────────
 * Medido nas 15 ferramentas: das 8 tabelas, 6 têm três ou quatro colunas. Com
 * `min-width: 440px`, todas rolavam de lado num aparelho de 375px, e ler uma
 * linha exigia arrastar e voltar. O `data-col` de cada célula carrega o nome
 * da coluna, que o `thead` não pode mais dar quando ele some.
 * ---------------------------------------------------------------------- */
@container tela (max-width: 560px) {
  .tb-tab-cartao { min-width: 0; display: block; }
  .tb-tab-cartao thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tb-tab-cartao tbody, .tb-tab-cartao tr, .tb-tab-cartao td { display: block; }
  .tb-tab-cartao tr {
    border: 1px solid var(--border); border-radius: var(--r);
    padding: var(--e3); margin-bottom: var(--e3);
  }
  .tb-tab-cartao td { border: 0; padding: var(--e1) 0; }
  .tb-tab-cartao td::before {
    content: attr(data-col); display: block;
    font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink);
    margin-bottom: var(--e0);
  }
  .tb-tab-cartao td:empty { display: none; }
}

/* ── AS AÇÕES GLOBAIS DA FERRAMENTA ──────────────────────────────────────
 * "Copiar tudo" e "Imprimir / PDF" no alto, onde a decisão de levar o
 * material embora é tomada. Ver a nota em `renderToolbox`. Somem do papel
 * junto com o resto dos botões. */
.tb-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e4); }
.tb-acoes .btn { min-height: 44px; }
.tb-acoes .btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
html.modo-papel .tb-acoes { display: none !important; }

/* ── COPIAR UM ITEM DA LISTA ─────────────────────────────────────────────
 * Aparece só em item que é uma entrega inteira (rótulo + 120 caracteres ou
 * mais). Medido: 19 dos 33 blocos de lista das 15 ferramentas. Ver a nota em
 * `lista`, em `toolbox-render.js`. */
.tb-item-cab { display: flex; align-items: baseline; gap: var(--e3); justify-content: space-between; }
.tb-item-cab b { min-width: 0; }
.tb-copiar-item { flex-shrink: 0; min-height: 32px; padding: var(--e1) var(--e2); }

/* ── WHATSAPP E AGENDA (01.10.2026) ──────────────────────────────────────
 * Vestem o mesmo `.tb-copiar`, de propósito: são saídas do mesmo documento,
 * e o papel e a impressão já os escondem pela mesma regra. O que muda é o
 * agrupamento, porque agora um cabeçalho pode ter dois ou três botões. */
.tb-bh-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; flex-shrink: 0; }
.tb-item-acoes { display: inline-flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; flex-shrink: 0; }
/* `.tb-lista li span` é a regra do TEXTO do item (bloco, corpo, tinta) e
   pegava também o rótulo dos botões, que saía maior e mais escuro que o
   "Copiar" do cabeçalho. Aqui o rótulo volta a ser do botão. */
.tb-lista li .tb-copiar span { display: inline; font-size: inherit; line-height: inherit; color: inherit; }
.tb-rot-acoes { margin-top: var(--e2); }
a.tb-wpp { text-decoration: none; }
/* Os campos entre colchetes que faltam trocar: em mono, como os marcadores
   do próprio texto, para a pessoa reconhecer o que procurar. */
.tb-wpp-n {
  font-style: normal; font-family: var(--mono); font-size: var(--f-micro); font-weight: 500;
  color: var(--warn-ink); background: var(--tom-warn-8); border-radius: var(--r-xs); padding: 0 var(--e1);
}
html.modo-papel .tb-wpp, html.modo-papel .tb-bh-acoes .tb-copiar { display: none !important; }
html.modo-papel .tb-copiar-item { display: none !important; }
@container tela (max-width: 480px) {
  /* No celular o rótulo já usa a largura toda: o botão desce em vez de espremer. */
  .tb-item-cab { flex-direction: column; align-items: flex-start; gap: var(--e1); }
  .tb-copiar-item { min-height: 44px; }
}

/* ── AS MARCAS COMO LUGARES, NÃO COMO BUSCA ──────────────────────────────
 * O painel antigo mandava "procure [VALIDAR ANTES DE PUBLICAR] no documento":
 * a plataforma sabia onde estavam e pedia à pessoa que varresse a tela. Agora
 * cada uma aparece com a frase e um botão que leva à seção.
 * ---------------------------------------------------------------------- */
.tb-marcas { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.tb-marcas li {
  border-left: 2px solid var(--warn); padding-left: var(--e3);
  display: flex; flex-direction: column; gap: var(--e1); align-items: flex-start;
}
.tb-marca-tr { margin: 0; font-size: var(--f-apoio); line-height: 1.6; color: var(--ink); }
.tb-marca-ir {
  background: none; border: 0; padding: var(--e1) 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px;
  font-family: var(--body); font-size: var(--f-micro); font-weight: 600; color: var(--warn-ink-forte);
}
.tb-marca-ir:focus-visible { outline: 2px solid var(--warn-ink); outline-offset: 2px; border-radius: var(--r-xs); }
/* No papel o botão sai e a frase fica: a lista continua sendo a conferência. */
html.modo-papel .tb-marca-ir { display: none !important; }

/* O piscar da seção que recebeu o salto de uma marca. Curto e uma vez só:
   piscar demais vira alarme numa tela que já tem um aviso amarelo. */
.tb-bloco.tb-alvo { animation: tbAlvo 1600ms ease-out 1; }
@keyframes tbAlvo {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15%, 55% { box-shadow: 0 0 0 3px var(--tom-warn-35); }
}
@media (prefers-reduced-motion: reduce) { .tb-bloco.tb-alvo { animation: none; } }

/* No celular o respiro do bloco não precisa repetir o respiro da página: são
   dois recuos de 24px um dentro do outro, e quem paga é a coluna de texto.
   Ver a medição da cadeia em `.tb-lista`. */
@container tela (max-width: 480px) {
  .tb-bloco { padding-left: var(--e3); padding-right: var(--e3); }
  .tb-lista li { padding-left: var(--e3); }
}

/* ── ANDAR PELO DOCUMENTO SEM ABRIR O ÍNDICE ─────────────────────────────
 * O índice fechado passou a dizer a POSIÇÃO ("3 de 8") e não só o total, e
 * ganhou anterior/próxima ao lado. Quem percorre um material de oito seções
 * não quer abrir uma lista oito vezes. */
/* A barra é uma linha só: o cab cresce, os passos ficam do tamanho deles. O
   `gap` mostra o fundo da página entre as duas peças, e é isso que se quer:
   são dois controles, não um. */
.tb-ind { display: flex; align-items: center; gap: var(--e2); }
.tb-ind-cab { flex: 1; min-width: 0; }
.tb-ind-passo { display: flex; gap: var(--e1); flex-shrink: 0; }
.tb-ind-ir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  /* OPACO, e não `background: none`. O fundo da barra grudada nunca esteve em
     `.tb-ind`: está em `.tb-ind-cab`, que antes ocupava a barra inteira. Ao
     pôr estes dois botões ao lado do cab, a parte deles ficou transparente, e
     o documento passava a rolar VISÍVEL por baixo do índice: o "Copiar" da
     seção de baixo aparecia atravessado na barra. */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs);
  box-shadow: var(--shadow-card); color: var(--dim-ink);
}
.tb-ind-ir:hover { border-color: var(--primary-line); color: var(--primary); }
.tb-ind-ir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* A seta da esquerda é a mesma da direita, virada. Um ícone a menos para manter. */
.tb-ind-ir[data-passo="-1"] svg { transform: rotate(180deg); }
.tb-ind-i { font-variant-numeric: tabular-nums; }
@container tela (max-width: 480px) { .tb-ind-ir { width: 44px; height: 44px; } }
html.modo-papel .tb-ind-passo { display: none !important; }

/* A linha que tira o medo de clicar. Fica embaixo do "começar do zero", em
   voz baixa: ela existe para ser lida por quem hesitou, não para disputar
   atenção com os botões. Ver a nota em `formulario.js`. */
.retomar-tranquilo {
  margin: var(--e1) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); text-align: center;
}

/* A fonte agora é clicável: o URL sempre esteve no dado e a tela o descartava.
   Ver `blocoFontes` em `dossie.js`. */
.fonte .d a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary-line); }
.fonte .d a:hover { border-bottom-color: var(--primary); }
.fonte .d a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
/* O veículo sem endereço que abra. Herda o peso do link e não a cor: ele é o
   mesmo dado, e não um item de segunda classe — o que falta é o clique, não a
   procedência. Ver a nota em `blocoFontes`. */
.fonte .d .fonte-nome { color: var(--ink); }
.fonte .ft { font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e0); }
/* A ausência de pesquisa é informação sobre o que se está lendo, então ela tem
   o corpo de um parágrafo e não o de uma nota de rodapé. */
/* ═══════════════════════════════════════════════════════════════════════════
   COMO CHEGAMOS AQUI (23.09.2026)

   A aba se chamava "Método e Fontes" e terminava numa lista de endereços. O
   cliente não comprou bibliografia: o que comunica profundidade é o TAMANHO do
   que foi cruzado, não quantos links foram anexados.

   A amplitude abre a aba, e a lista de endereços vai para uma sanfona fechada.
   ═════════════════════════════════════════════════════════════════════════ */
.amp-lide { margin: 0 0 var(--e4); color: var(--dim-ink); }
.amp-pe { margin: var(--e4) 0 0; padding-top: var(--e3); border-top: 1px solid var(--border);
          color: var(--dim-ink); font-size: var(--f-apoio); }

/* ── O PAINEL DE NÚMEROS ───────────────────────────────────────────────────
   Primeira versão foi uma lista em linha, com número e rótulo lado a lado. Em
   tela cheia deu seis colunas, e rótulo de duas palavras quebrou no meio:
   "brechas de mercado / identificadas". Sete itens espremidos numa faixa é o
   contrário do que este bloco existe para dizer.

   Agora é célula: o número em cima, sozinho e grande, o rótulo embaixo com
   espaço para respirar. `auto-fill` com mínimo largo trava em quatro colunas
   na largura de leitura do dossiê, e desce para duas e uma sem ficar apertado. */
.amplitude { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1);
             grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.amplitude li { display: flex; flex-direction: column; gap: var(--e1);
                padding: var(--e3) var(--e4) var(--e4);
                background: var(--tom-tinta-4); border-radius: var(--r);
                border: 1px solid transparent; }
/* O número em mono e grande, na tinta normal. A cor de família fica fora daqui:
   ela vive em ícone e em fio, nunca em texto. */
.amp-n { font-family: var(--mono); font-variant-numeric: tabular-nums;
         font-size: var(--f-tela); line-height: 1.1; color: var(--ink); letter-spacing: -.02em; }
.amp-r { font-size: var(--f-apoio); line-height: 1.4; color: var(--dim-ink); text-wrap: pretty; }

/* A sanfona: fechada, discreta, e sem virar cartão dentro de cartão quando
   abre — o que está dentro dela já é uma seção com moldura própria. */
.dobra-fontes { margin-top: var(--e5); }
.dobra-fontes > summary { cursor: pointer; font-size: var(--f-apoio); color: var(--dim-ink);
                          padding: var(--e2) 0; list-style-position: inside; min-height: 44px;
                          display: flex; align-items: center; }
.dobra-fontes > summary:hover { color: var(--ink); }
.dobra-fontes[open] > summary { color: var(--ink); }
.dobra-corpo { padding-top: var(--e2); }

.fontes-legenda { margin: 0 0 var(--e2); color: var(--dim-ink); font-size: var(--f-apoio); }
/* No papel o endereço entra por extenso: link não se clica em folha impressa. */
html.modo-papel .fonte .d a::after { content: ' (' attr(href) ')'; font-size: var(--f-micro); color: var(--faint-ink); word-break: break-all; }

/* A linha do Mentor dentro do dossiê. Discreta de propósito: é uma segunda
   leitura do mesmo material, não um produto novo para vender. Ver a nota em
   `blocoMentor`, em `dossie.js`. */
.mentor-linha { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.mentor-txt { flex: 1; min-width: 12rem; }
.mentor-txt b { display: block; font-size: var(--f-corpo); }
.mentor-txt span { display: block; font-size: var(--f-apoio); color: var(--dim-ink); margin-top: var(--e0); max-width: 55ch; }
.mentor-linha .btn { min-height: 44px; flex-shrink: 0; }
html.modo-papel .mentor-linha { display: none !important; }

/* ── PÁGINAS CONSULTADAS, por concorrente ────────────────────────────────
 * O corpus lido, e não a prova de cada frase: o título diz isso e o rodapé
 * repete. Ver a nota em `paginasDoConcorrente`, em `radar-render.js`. */
.rr-lidas { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.rr-lidas li { font-size: var(--f-apoio); }
.rr-lidas a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary-line); word-break: break-all; }
.rr-lidas a:hover { border-bottom-color: var(--primary); }
.rr-lidas a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
/* SEM TETO (22.09.2026, print do dono). Os 55ch que estavam aqui quebravam
   uma nota de 117 caracteres em duas linhas curtas dentro de um cartão largo:
   a frase cabe numa linha só, e a segunda linha só existia por causa do teto.
   Teto de medida é para prosa de muitas linhas; nota de rodapé de uma frase
   não tem volta de linha para cansar ninguém. */
.rr-lidas-nota { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); }
/* No papel o endereço já é o próprio texto do link, então nada muda. */

/* As ações do Radar, no mesmo lugar e com a mesma forma das do Toolbox. */
.radar .hero-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.radar .hero-acoes .btn { min-height: 44px; }
.radar .hero-acoes .btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
html.modo-papel .radar .hero-acoes { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   HISTÓRICO DO PLANO (versoes.js)

   A auditoria de 04.09.2026 achou o backend de versões inteiro e nenhuma tela.
   Este é o painel que faltava.

   O botão de restaurar fica à direita e discreto de propósito: quem abre o
   histórico quase sempre quer LER o que mudou, não voltar atrás. Restaurar é a
   saída de emergência, não a ação principal da lista.
   ═══════════════════════════════════════════════════════════════════════════ */
.v-atual { padding: var(--e4) var(--e5); font-size: var(--f-apoio); color: var(--dim-ink); border-bottom: 1px solid var(--border); }
.v-atual b { color: var(--ink); }

.v-linha { display: flex; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--border); }
.v-linha:last-of-type { border-bottom: 0; }

.v-n { font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink); background: var(--surface-hi); border-radius: var(--r-xs); padding: var(--e1) var(--e2); flex: none; }

.v-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* O pedido do cliente pode ser uma frase longa. Uma linha só, com reticências:
   a lista precisa continuar escaneável, e o texto inteiro não muda a decisão. */
.v-txt b { font-size: var(--f-apoio); color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-txt span { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }

.v-linha .btn { flex: none; }

.v-nota { margin: 0; padding: var(--e4) var(--e5); font-size: var(--f-micro); color: var(--faint-ink); background: var(--surface-sutil); border-top: 1px solid var(--border); }

/* No celular o botão desce para baixo do texto: três colunas em 375px espremem
   o rótulo da versão até ele quebrar no meio. */
@container tela (max-width: 560px) {
  .v-linha { flex-wrap: wrap; }
  .v-txt { flex-basis: 100%; order: 2; }
  .v-linha .btn { margin-left: auto; order: 3; }
  /* Na largura cheia cabem duas linhas, e o pedido do cliente e justamente o
     que a pessoa veio ler. Cortar em "renomear para Validacao de Mensa..."
     esconde a informacao que faz o painel existir. */
  .v-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* O histórico não vai para o papel: é navegação, não conteúdo do relatório. */
@media print { [data-versoes] { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   "O PLANO MUDOU DEPOIS QUE ISTO FOI GERADO" (desatualizado.js)

   Cor de ATENÇÃO, não de erro: o material não está errado, ele está velho, e
   a diferença importa. Vermelho aqui faria a pessoa achar que o documento tem
   um defeito e descartar um trabalho que talvez ainda sirva.

   Fica ANTES do título do relatório, e é o único bloco da tela que faz isso.
   Quem abre um FAQ para revisar precisa ler o aviso antes da primeira resposta.
   ═══════════════════════════════════════════════════════════════════════════ */
.desatualizado {
  display: flex; align-items: flex-start; gap: var(--e3);
  margin: 0 0 var(--e5); padding: var(--e4) var(--e5);
  background: var(--tom-warn-8);
  border: 1px solid var(--tom-warn-25);
  border-radius: var(--r-md);
}
.desatualizado .d-ic { color: var(--warn-ink); flex: none; line-height: 0; margin-top: 2px; }
.desatualizado .d-txt { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; flex: 1; }
.desatualizado .d-txt b { font-size: var(--f-apoio); color: var(--warn-ink); }
.desatualizado .d-txt span { font-size: var(--f-micro); color: var(--dim-ink); line-height: 1.5; }
.desatualizado .d-acoes { flex: none; }

@container tela (max-width: 560px) {
  .desatualizado { flex-wrap: wrap; }
  .desatualizado .d-acoes { flex-basis: 100%; }
  .desatualizado .d-acoes .btn { width: 100%; }
}

/* NO PAPEL O AVISO FICA. É o oposto do histórico de versões: aquilo é
   navegação, isto é uma ressalva sobre o conteúdo impresso — e é justamente o
   PDF que circula pelo time sem ninguém para explicar de onde ele veio. */
@media print {
  .desatualizado { background: transparent; border: 1.5px solid #b45309; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OS NOMES NA PROPOSTA DE AJUSTE (ajuste.js · listaNomes)

   O painel mostrava três números e se chamava "confira o que muda antes de
   aplicar". Estas são as listas que faltavam.

   A cor entra no FIO à esquerda, nunca no texto do nome da tática: o nome
   precisa ser lido como texto normal, e verde/vermelho ali faria a pessoa achar
   que a tática é boa ou ruim, quando a cor só diz se ela entra ou sai.
   ═══════════════════════════════════════════════════════════════════════════ */
.ajc-nomes { margin-top: var(--e4); padding-left: var(--e4); border-left: 2px solid var(--border); }
.ajc-nomes.t-novo { border-left-color: var(--primary); }
.ajc-nomes.t-fora { border-left-color: var(--tom-warn-50); }
.ajc-nomes.t-ok { border-left-color: var(--tom-ok-50); }

.ajc-nomes .ajn-t { font-family: var(--body); font-weight: 500; font-size: var(--f-micro); color: var(--dim-ink); }
.ajc-nomes ul { margin: var(--e2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e1); }
.ajc-nomes li { font-size: var(--f-apoio); color: var(--ink); line-height: 1.45; }

/* O estado em que a tática estava, na lista de perda. Fica ao lado do nome
   porque "Otimização da Porta de Entrada B2B — em andamento" é uma frase, e a
   segunda metade é o motivo de a linha existir. */
.ajp-st { font-family: var(--mono); font-size: var(--f-micro); color: var(--warn-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   A REFAÇÃO DO PLANO (plano.js · blocoPedirPlano com quantos === 1)

   Discreto de propósito. O caminho principal de quem já tem um Plano é ABRIR
   o que existe, e ele está logo abaixo. Este bloco é a saída para quem não
   gostou do que recebeu, e um botão primário aqui competiria com o certo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Um Plano por Raio-X (19.09.2026): no lugar do "Gerar outro", a linha que aponta o Ajustar. */
.plano-ajustar-dica { margin: var(--e5) 0 0; padding: var(--e3) var(--e4); border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--surface-sutil); font-size: var(--f-apoio); color: var(--dim-ink); }
.plano-ajustar-dica b { color: var(--ink); }
.refazer-plano .acoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

@media print { .refazer-plano { display: none !important; } }


/* ═══════════════════════════════════════════════════════════════════════════
   ATIVIDADE NO CONSOLE (admin-operacao.js · atividadeHtml)

   A matriz usuário × motor. A cor vai no FUNDO da célula e nunca no nome do
   usuário: o e-mail precisa ser lido como texto; a cor só diz se aquele par
   está rodando, falhou ou concluiu.
   ═══════════════════════════════════════════════════════════════════════════ */
/* `ativ-c` e não `c`: o admin já tem uma classe global `.c` de caixa, e os
   cabeçalhos da matriz viraram cartões empilhados na primeira renderização. */
.ativ-tab td.ativ-c, .ativ-tab th.ativ-c { text-align: center; }
.ativ-tab th.ativ-c { white-space: nowrap; }
.ativ-cel {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-width: 36px; padding: 2px var(--e2); border: 0; border-radius: var(--r-xs);
  font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; cursor: pointer;
  background: var(--surface-hi); color: var(--dim-ink);
}
.ativ-cel.ok   { background: var(--tom-ok-12); color: var(--ok-ink); }
.ativ-cel.vivo { background: var(--tom-primario-12); color: var(--primary); }
.ativ-cel.ruim { background: var(--tom-danger-12); color: var(--danger-ink); }
.ativ-cel.vazio { background: transparent; color: var(--faint-ink); cursor: default; }
.ativ-cel:not(.vazio):hover { outline: 1px solid currentColor; }
.ativ-cel .pulso-ponto { width: 6px; height: 6px; }
.ativ-sub { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); margin-top: 2px; }
.ativ-h3 { margin-top: var(--e5); }
.ativ-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ativ-chip { margin-left: 0; cursor: pointer; border: 1px solid transparent; padding: var(--e1) var(--e2); min-height: 32px; }
.ativ-chip b { margin-left: var(--e1); font-weight: 600; }
.ativ-chip.on { border-color: currentColor; }

/* ALVO DE TOQUE. A célula media 20px em 375px. Elemento novo não nasce abaixo
   da regra da casa (44px no celular); no desktop fica compacta, que é o que
   uma matriz precisa para caber. */
.ativ-cel { min-height: 32px; }
/* O "dados" de cada linha do log era um `summary` de 19px de altura, o menor
   alvo clicável do painel, na tela que fica aberta o dia inteiro (auditoria
   do painel, 08.09.2026: 72 alvos abaixo de 32px em Operação). */
.log-detalhe details > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; padding: 0 var(--e2); margin-left: calc(var(--e2) * -1); border-radius: var(--r-xs); color: var(--primary); font-size: var(--f-micro); font-family: var(--mono); }
.log-detalhe details > summary:hover { background: var(--surface-hi); }
@media (max-width: 560px) {
  .ativ-cel { min-height: 40px; min-width: 44px; }
  .ativ-chip { min-height: 40px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PENDÊNCIA CONSOLIDADA (app.js · cartaoPendencia com itens)

   Vários iguais viram um cartão que abre em lista: cada relatório nomeado e
   datado, cada um clicável e dispensável sozinho. O cartão agrupado não
   navega — quem navega é a linha.
   ═══════════════════════════════════════════════════════════════════════════ */
.pcard.agrupado { cursor: default; }
.pc-alvo { font-size: var(--f-apoio); color: var(--ink); font-weight: 500; margin: 2px 0 4px; }
.pc-itens { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; }
.pc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); background: var(--surface); cursor: pointer; min-height: 40px; }
.pc-item:hover, .pc-item:focus-visible { background: var(--surface-sutil); outline: none; }
.pc-item b { font-size: var(--f-apoio); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-item i { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); font-style: normal; white-space: nowrap; }
.pc-item-acao { font-size: var(--f-micro); color: var(--dim-ink); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.pc-item .pc-x { position: static; }
@container tela (max-width: 560px) {
  /* TRÊS COLUNAS, e não duas: os filhos são o nome, a data e o "×" de
     dispensar. Com duas, o "×" caía numa segunda fileira, sozinho e alinhado à
     esquerda, longe do item que ele dispensa. */
  .pc-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pc-item-acao { display: none; }
  /* O ÍCONE SOBE PARA A LINHA DO TÍTULO. Centrado, num cartão que no telefone
     passa de 300px de altura, ele flutuava no meio de uma coluna vazia, longe
     de tudo que nomeia. Ele qualifica a pendência, então acompanha o título. */
  .pcard { align-items: flex-start; }
  .pcard .pc-ic { margin-top: 2px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   O SELETOR DE EMPRESA DA JORNADA (app.js · telaDashboard)

   Discreto: é um <select> vestido como texto, no lugar onde o nome da empresa
   já estaria. Quem tem uma empresa só vê o nome; quem tem várias vê o mesmo
   nome com uma seta, e troca ali.
   ═══════════════════════════════════════════════════════════════════════════ */
.jn-emp select {
  font: inherit; font-weight: 600; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px dashed var(--faint-ink); padding: 0 2px; cursor: pointer;
  max-width: 200px; min-height: 28px; text-overflow: ellipsis;
}
.jn-emp select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   BIBLIOTECA: o que a pessoa decidiu × o que o sistema sabe (app.js)

   O status ESCOLHIDO é um chip clicável na linha ("Organizar ▾" enquanto é
   novo). O fato CALCULADO ("existe versão mais recente", "atual") é texto
   mono apagado, colado à data — informa, não decora. Cor só onde a decisão
   é semântica: em uso e adotado ganham o acento; descartado e arquivado
   ficam apagados.
   ═══════════════════════════════════════════════════════════════════════════ */
.arv-fato { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint-ink); margin-left: var(--e2); }
.arv-fato.atual { color: var(--dim-ink); }

.arv-status { position: relative; flex: none; }
.arv-status .st {
  font: inherit; font-size: var(--f-micro); font-weight: 500; min-height: 28px;
  padding: 2px var(--e2); border-radius: var(--r-xs); border: 1px solid transparent;
  background: transparent; color: var(--faint-ink); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.arv-status .st:hover, .arv-status .st[aria-expanded="true"] { border-color: var(--border); color: var(--ink); background: var(--surface-sutil); }
.arv-status .st .ic { font-size: var(--f-micro); }
.arv-status .st-em_revisao { color: var(--dim-ink); border-color: var(--border); }
.arv-status .st-adotado, .arv-status .st-em_uso { color: var(--primary); background: var(--tom-primario-8); border-color: var(--tom-primario-18); }
.arv-status .st-concluido { color: var(--ok-ink); background: var(--tom-ok-8); border-color: var(--tom-ok-18); }
.arv-status .st-descartado, .arv-status .st-arquivado { color: var(--faint-ink); border-color: var(--border); text-decoration: line-through; }

.org-menu {
  position: fixed; z-index: 60; width: 240px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop);
  padding: var(--e2); display: flex; flex-direction: column; gap: 1px;
}
.org-t { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); padding: var(--e1) var(--e2) var(--e2); }
.org-op { font: inherit; font-size: var(--f-apoio); text-align: left; padding: var(--e2) var(--e3); min-height: 36px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink); cursor: pointer; }
.org-op:hover, .org-op:focus-visible { background: var(--surface-sutil); outline: none; }
.org-op.on { font-weight: 600; }
/* A dica embaixo do nome do estado: o que ele quer dizer, na hora da escolha. */
.org-op b { display: block; font-weight: inherit; }
.org-op i { display: block; font-style: normal; font-weight: 400; font-size: var(--f-micro); color: var(--dim-ink); line-height: 1.4; }
.org-op.on::before { content: '● '; color: var(--primary); }
.org-nota { margin-top: var(--e2); padding: var(--e2) var(--e3); font-size: var(--f-micro); color: var(--dim-ink); border-top: 1px solid var(--border); }
.org-nota span { display: block; font-family: var(--body); font-weight: 500; color: var(--faint-ink); margin-bottom: 2px; }

.bib-vistas { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e4); }
.bib-vista { margin-left: 0; cursor: pointer; border: 1px solid transparent; padding: var(--e1) var(--e3); min-height: 32px; font-family: var(--body, inherit); font-size: var(--f-apoio); text-transform: none; letter-spacing: 0; }
.bib-vista.on { border-color: var(--ink); color: var(--ink); background: var(--surface); }

@container tela (max-width: 560px) {
  .arv-status .st { min-height: 40px; }
}


html[data-tema="escuro"] { color-scheme: dark; }
html[data-tema="escuro"] body { background: var(--bg); }
/* A badge da barra lateral (contador de Pendências) tem o mesmo problema do
   botão primário: branco sobre o azul claro do escuro dá 2.7:1. Tinta escura. */
:is(html[data-admin], html[data-tema="escuro"]) .side .pt { color: #0d0f14; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRESSIONAR TEM RESPOSTA (auditoria de 05.09.2026)

   Botão, chip e linha clicável não tinham `:active`. Um deslocamento de 1px
   em 80ms no clique é o que separa "tela" de "instrumento". Quem pediu
   movimento reduzido não vê o deslocamento; vê só a cor.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── E OITO CLICÁVEIS FICARAM DE FORA DESTA LINHA (09.09.2026) ──────────
   Medido no DOM, tela por tela: `.perfil button` (presente em TODAS, é o botão
   de Configurações na barra lateral), o cartão-herói inteiro da Visão Geral, os
   segmentos do funil do Toolbox, a nébula do Delfos, a referência ao relatório
   dentro da resposta dele, o link de empresa, e o paginador da jornada. Todos
   mudavam de cor num quadro só, o que o olho lê como falha de renderização e
   não como resposta.

   `filter` entrou na lista porque dois deles respondem por brilho, não por
   cor — é como o `.btn.p` já responde. */
.btn, .chip, .aba-btn, .segmentado button, .bib-vista, .st, .org-op,
.perfil button, .jn-pagina, .emp-link, .dl-ref, .dl-esfera-btn, .tbf, .heroi.c-link { transition-property: transform, background, border-color, color, box-shadow, filter; transition-duration: 80ms, var(--t-rapido), var(--t-rapido), var(--t-rapido), var(--t-rapido), var(--t-rapido); transition-timing-function: var(--curva); }
.btn:active:not(:disabled), .chip:active, .aba-btn:active, .segmentado button:active, .bib-vista:active, .st:active { transform: translateY(1px); }
.arv-linha:active, .pcard:active, .pc-item:active, .tbc:active, .ars-item:active, .rev-linha:active { background: var(--surface-hi); }
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .chip:active, .aba-btn:active, .segmentado button:active, .bib-vista:active, .st:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UM NÚMERO POR TELA (auditoria de 05.09.2026)

   O cartão-herói é o único número em --f-heroi da Visão Geral: o score do
   Raio-X da empresa ativa. Os outros três descem um degrau. Cartão com
   destino é clicável inteiro.
   ═══════════════════════════════════════════════════════════════════════════ */
.numero-heroi { font-size: var(--f-heroi); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.numero-heroi small { font-size: var(--f-corpo); font-weight: 500; letter-spacing: 0; margin-left: 2px; opacity: 0.7; }
.c-link { cursor: pointer; }
.c-link:hover { border-color: var(--tom-tinta-50); }
.c-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   A CERIMÔNIA DE ENTREGA DO RAIO-X (cerimonia.js)

   A única tela escura do caminho do cliente: "claro no corpo, escuro só no
   impacto". Cobre a página inteira, uma vez por Raio-X. A escada de entrada
   é longa de propósito (é a única que pode ser): nome, anel, veredito,
   problema, botão. Com movimento reduzido, tudo de uma vez.
   ═══════════════════════════════════════════════════════════════════════════ */
html.com-cerimonia { overflow: hidden; }
.cerimonia {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--side); color: #fff; padding: var(--e6); cursor: pointer;
  animation: cer-fundo 0.4s var(--curva) both;
}
.cerimonia.saindo { animation: cer-sai 0.3s var(--curva) both; }
.cer-corpo { max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e4); }
.cer-olho { font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tom-branco-60); display: inline-flex; align-items: center; gap: var(--e2); }
.cerimonia h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; color: #fff; text-wrap: balance; }
.cer-anel .capa-anel { margin: var(--e3) auto 0; }
.cer-anel .capa-anel .ca-trilho { stroke: var(--tom-branco-12); }
.cer-anel .capa-anel .ca-marca { stroke: var(--tom-branco-18); }
.cer-anel .capa-anel .ca-marca.acesa { stroke: var(--anel); }
.cer-anel .ca-num b, .cer-anel .ca-num span { color: #fff; }
.cer-veredito { font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.01em; }
.cer-veredito.t-ok { color: var(--ok); }
.cer-veredito.t-ap { color: var(--warn); }
.cer-veredito.t-tr { color: var(--danger); }
.cer-gargalo { margin: 0; max-width: 52ch; font-size: var(--f-leitura); line-height: 1.5; color: var(--tom-branco-70); }
/* O olho do gargalo e o da lacuna fazem o MESMO papel, em cerimônias
   diferentes: uma regra só para os dois. Separadas, eram dois blocos em
   mono maiúsculo, e a casa tem teto disso — ver `verifica-estilo.mjs`. */
.cer-gargalo span, .cer-lacuna span { display: block; font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tom-branco-50); margin-bottom: var(--e2); }
.cer-lacuna span { color: var(--gold); }
.cerimonia .btn.p { margin-top: var(--e3); min-height: 48px; padding-inline: var(--e6); }
.cer-pular { font-size: var(--f-micro); color: var(--tom-branco-35); }
.cer-e1, .cer-e2, .cer-e3, .cer-e4, .cer-e5, .cer-e6 { animation: cer-sobe 0.6s var(--curva) both; }
.cer-e1 { animation-delay: 0.2s; }
.cer-e2 { animation-delay: 0.4s; }
.cer-e3 { animation-delay: 0.9s; }
.cer-e4 { animation-delay: 2.1s; }
.cer-e5 { animation-delay: 2.5s; }
.cer-e6 { animation-delay: 3s; }
.cerimonia.parada *, .cerimonia.parada { animation: none !important; }

/* ── a apresentação do RADAR: o vazio é o protagonista ────────────────────
   A do Raio-X desenha um anel, porque lá existe um número. Aqui o achado é
   uma LACUNA, e lacuna é espaço que sobra: os concorrentes entram primeiro,
   um a um, e depois se afastam para o vão aparecer entre eles. Nenhum número
   grande — quem tem de ficar na memória é a frase. */
.cer-rivais { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2) var(--e3); }
.cer-rival {
  padding: var(--e2) var(--e4); border-radius: var(--r-pill);
  border: 1px solid var(--tom-branco-18); background: var(--tom-branco-4);
  font-size: var(--f-apoio); color: var(--tom-branco-70); white-space: nowrap;
  animation: cer-carta 0.5s var(--curva) both;
  /* cada um entra depois do anterior: são cartas sendo postas na mesa */
  /* `--i` vem do HTML (`style="--i:0"`), que o guarda de estilo nao le: o
     fallback e o que impede a declaracao inteira de ser descartada em silencio
     se um dia o indice deixar de ser escrito. */
  animation-delay: calc(0.9s + var(--i, 0) * 0.22s);
}
/* Caixa normal: mono maiúsculo é para olho de seção e selo, e isto é
   legenda de um grupo. A regra é da casa, não minha. */
.cer-rivais-leg { margin: 0; font-family: var(--mono); font-size: var(--f-micro); color: var(--tom-branco-35); }
/* O VÃO. Um fio que se abre no meio, entre os concorrentes e o achado: é o
   desenho do que a frase vai dizer. */
/* Fio chapado, e não degradê: o guarda de estilo tem teto de degradês e este
   não é textura nem medida, é um fio. O esmaecer das pontas que eu queria já
   vem da animação, que abre o fio a partir do centro. */
.cer-vao { width: min(420px, 80%); height: 1px; background: var(--gold); opacity: 0.55; transform-origin: center; animation: cer-abre 0.8s var(--curva) both; animation-delay: 2s; }
.cer-lacuna { margin: 0; max-width: 54ch; font-size: var(--f-leitura); line-height: 1.55; color: #fff; }
/* A cobertura chega junto com o botão: o achado já nasce com a régua do
   quanto de fora ele veio. */
.cer-cobertura { font-family: var(--mono); font-size: var(--f-micro); color: var(--tom-branco-50); }
.cer-radar .cer-e4 { animation-delay: 2s; }
.cer-radar .cer-e5 { animation-delay: 2.6s; }
.cer-radar .cer-e6 { animation-delay: 3.2s; }
@keyframes cer-carta { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cer-abre { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes cer-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes cer-sai { to { opacity: 0; } }
@keyframes cer-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   O QUE MUDOU DESDE O RAIO-X ANTERIOR (mudou.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.mudou { margin: 0 0 var(--e5); padding: var(--e4) var(--e5); border: 1px solid var(--border); border-left: 3px solid var(--fam, var(--primary)); border-radius: var(--r-md); background: var(--surface); }
.mudou-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.mudou-lista { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--f-apoio); color: var(--dim-ink); }
.mudou-lista li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mudou-lista li.ok b { color: var(--ok-ink); }
.mudou-lista li.tr b { color: var(--danger-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   A PÁGINA DA EMPRESA (empresa.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.emp-cab { align-items: flex-start; }
.emp-cab h1 { margin-top: var(--e1); }
.emp-cab .sub-tela a { color: var(--dim-ink); text-decoration: underline; text-underline-offset: 3px; }
/* ═══════════════════════════════════════════════════════════════════════
   O BOTÃO FICAVA VOANDO NO MEIO DO CABEÇALHO.

   `.emp-acoes { flex: none }` nunca valeu: `.pc-cab > div` tem
   especificidade maior (0,1,1 contra 0,1,0) e vence por mais que venha
   antes no arquivo. Medido a 1440px: a caixa das ações ficava com 562px,
   metade exata do cabeçalho, e o botão de 143px encostava na borda ESQUERDA
   dessa metade — ou seja, no meio da tela, longe do título e longe da borda.

   Subir a especificidade honestamente resolve. E `align-self: center` alinha
   o botão ao bloco do título em vez de deixá-lo na altura do olho, três
   linhas acima do resto. */
.pc-cab > .emp-acoes { flex: none; min-width: 0; align-self: center; }
.emp-topo { padding: var(--e5); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e6); align-items: start; margin-bottom: var(--e4); }
.emp-score { display: flex; gap: var(--e5); align-items: center; border-radius: var(--r-md); padding: var(--e2); margin: calc(-1 * var(--e2)); }
.emp-score[role="link"] { cursor: pointer; }
.emp-score[role="link"]:hover { background: var(--surface-hi); }
.emp-score .capa-anel { flex: none; }
.emp-score-txt b { display: block; font-size: var(--f-secao); letter-spacing: -0.02em; line-height: 1.2; }
.emp-score-txt span { display: block; font-size: var(--f-micro); color: var(--faint-ink); margin-top: var(--e1); }
.emp-score-txt p { margin: var(--e3) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.5; max-width: 48ch; }
.vazio-score .emp-score-txt b { color: var(--dim-ink); }
.emp-jornada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.ej { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); border-radius: var(--r-xs); min-height: 44px; }
.ej[role="link"] { cursor: pointer; }
.ej[role="link"]:hover { background: var(--surface-hi); }
.ej-mk { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: var(--f-micro); border: 1px solid var(--border); color: var(--faint-ink); background: var(--surface); }
.ej.feito .ej-mk { background: var(--impacto-fundo); border-color: transparent; color: #fff; }
.ej.ativa .ej-mk { border-color: var(--navy); color: var(--navy); }
.ej.lateral { border-top: 1px dashed var(--border); border-radius: 0; margin-top: var(--e2); padding-top: var(--e3); }
.ej-txt { display: flex; flex-direction: column; min-width: 0; }
.ej-txt b { font-size: var(--f-corpo); font-weight: 600; }
.ej-txt i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); }
.ej.ativa .ej-txt i { color: var(--primary); }
.painel-h-sub { font-size: var(--f-micro); color: var(--faint-ink); margin-left: auto; }
.emp-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; gap: var(--e1); }
.emp-link:hover { color: var(--primary); }
.emp-link .ic { opacity: 0.5; }
.jn-pagina { font: inherit; background: none; border: 1px solid transparent; border-radius: var(--r-xs); width: 28px; height: 28px; display: inline-grid; place-items: center; color: var(--faint-ink); cursor: pointer; vertical-align: middle; }
.jn-pagina:hover { color: var(--primary); border-color: var(--border); }
@container tela (max-width: 720px) {
  .emp-topo { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   O FUNIL DO TOOLBOX (toolbox.js · funil) — de verdade, afunilando (06.09.2026)

   Três etapas em segmentos que se encaixam (clip-path), na superfície de
   impacto com três tons de marinho de uma etapa para a outra. "Posicionar"
   é a base do funil, não uma etapa dele: fica ao lado, clara, tracejada.
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-funil { display: flex; align-items: stretch; margin: 0 0 var(--e5); min-height: 96px; }
.tbf { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--e0); padding: var(--e3) var(--e5) var(--e3) 40px; margin-right: -14px; text-align: left; font: inherit; color: #fff; border: 0; cursor: pointer; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
.tbf:first-child { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); padding-left: var(--e5); border-radius: var(--r) 0 0 var(--r); }
.tbf:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%); margin-right: 0; border-radius: 0 var(--r) var(--r) 0; }
/* Ele é botão e não tinha hover NENHUM: o cursor virava mãozinha e a peça não
   se mexia. Brilho, como o resto do que é feito de material de impacto. */
.tbf:hover { filter: brightness(1.12); }
.tbf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tbf-n { display: none; }
.tbf-txt { display: flex; flex-direction: column; min-width: 0; }
.tbf-txt b { font-size: var(--f-leitura); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbf-txt i { font-style: normal; font-size: var(--f-micro); color: var(--tom-branco-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbf-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tom-branco-12); z-index: 2; }
.tbf-barra i { display: block; height: 100%; width: calc(var(--pct, 0) * 1%); background: linear-gradient(90deg, #8a9bff, #fff); transition: width var(--t-lento) var(--curva); }
/* A MARGEM DA DOBRA, e ela precisa do `.como-funciona` junto.
   `.tb-como` é DUAS coisas neste produto: esta dobra, e o resumo dobrável do
   relatório do Toolbox (`tb-resumo` + `tb-como-btn`, lá em cima). Sem o segundo
   seletor esta linha alcançava o resumo também e trocava a margem dele, que é
   `var(--e4)`, pela desta. O resto do desenho mora em `.como-funciona`. */
.tb-como.como-funciona { margin-top: var(--e3); }
.como-funciona > p { margin-top: var(--e3); }
/* ═══════════════════════════════════════════════════════════════════════════
 *  O FUNIL FORA DA LARGURA DE COMPUTADOR: DOIS EM CIMA, DOIS EMBAIXO.
 *
 *  Os quatro segmentos em fileira só cabem enquanto cada um tiver largura para
 *  o rótulo E para a contagem. Medido: com o miolo em 819px cada segmento fica
 *  com 207px, dos quais 62 são o recuo e a ponta da seta; sobram 145 para
 *  "6 ferramentas · 6 disponíveis", que precisa de uns 175. O resultado é o
 *  que apareceu no tablet: quatro etapas com o texto cortado em "6 dispo…".
 *
 *  Empilhar os quatro, que era o que acontecia abaixo de 760, troca um defeito
 *  por outro: quatro barras de largura inteira e 96px de altura para dizer
 *  duas linhas curtas, e o funil deixa de parecer um funil e vira uma lista.
 *
 *  Dois por linha resolve as duas coisas. Cada cartão fica com o dobro da
 *  largura que tinha na fileira, o texto cabe inteiro, e o bloco continua se
 *  lendo como um conjunto de quatro etapas em vez de uma pilha. A seta some
 *  porque seta só quer dizer alguma coisa em fileira; a ordem passa a ser a
 *  leitura natural, esquerda para a direita e de cima para baixo.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* Dentro do cartão do Toolbox o funil é o rodapé: sem margem, sem raio, com
   o fio de cima separando do corpo branco. Só os cantos de baixo arredondam,
   para fechar o canto do cartão.

   ESTAS TRÊS LINHAS MORAVAM DEPOIS DAS CONSULTAS DE CONTÊINER, e é por isso
   que o funil saía com canto errado no tablet. Em fileira, `:first-child` é o
   canto de baixo à esquerda do cartão; em grade de dois por dois ele é o de
   CIMA à esquerda, e ali não pode arredondar nada — mas a regra vinha depois,
   com especificidade maior que o `.tbf` que zerava tudo lá dentro, e vencia
   por ordem. O resultado era uma quina arredondada no meio da grade, entre o
   "Atrair" e o que vem embaixo dele. Base primeiro, exceções depois. */
.est-core > .tb-funil { margin: 0; border-top: 1px solid var(--border); }
.est-core > .tb-funil .tbf:first-child { border-radius: 0 0 0 var(--r-lg); }
.est-core > .tb-funil .tbf:last-child { border-radius: 0 0 var(--r-lg) 0; }

@container tela (max-width: 900px) {
  .tb-funil { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); min-height: 0; }
  .tbf, .tbf:first-child { clip-path: none; margin: 0; border-radius: var(--r); padding: var(--e4); min-height: 68px; }
  .est-core > .tb-funil { gap: 1px; }
  /* O `:first-child` REPETIDO, e não por descuido: a regra base tem esse
     pseudo e por isso pesa mais que `.tbf` sozinho. Zerar o canto exige falar
     com a mesma voz. */
  .est-core > .tb-funil .tbf,
  .est-core > .tb-funil .tbf:first-child { border-radius: 0; }
  .est-core > .tb-funil .tbf:nth-child(3) { border-radius: 0 0 0 var(--r-lg); }
  .est-core > .tb-funil .tbf:last-child { border-radius: 0 0 var(--r-lg) 0; }
}
/* No celular nem dois cabem: "6 ferramentas · 6 disponíveis" com 168px de
   cartão volta a ser reticência. Uma coluna, e o rótulo respira. */
@container tela (max-width: 520px) {
  .bv-topo { padding: var(--e5) var(--e4); margin-top: var(--e3); border-radius: var(--r); }
  .bv-caixa { padding: var(--e4); }
  .tv-cab { padding: var(--e4); gap: var(--e3); border-radius: var(--r); }
  .tv-ic { width: 40px; height: 40px; }
  .bv-topo .video-facha { margin-top: var(--e4); }
  .tb-funil { grid-template-columns: 1fr; }
  .est-core > .tb-funil .tbf:nth-child(3) { border-radius: 0; }
  .est-core > .tb-funil .tbf:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}




/* ═══════════════════════════════════════════════════════════════════════════
   SUPERFÍCIE DE IMPACTO (06.09.2026)

   Quatro receitas de degradê, e mais nenhuma, todas com nome:
     impacto   — marinho + luz azul + ouro + grão (capa, herói, cerimônia)
     luz       — 6% de azul do topo para o nada (cartão em foco)
     progresso — azul denso para azul claro (barras)
     medidor   — vermelho · âmbar · verde (termômetro)
   ═══════════════════════════════════════════════════════════════════════════ */
/* A RECEITA NUMA VARIÁVEL (06.09.2026): a superfície de impacto e o botão
   primário são o mesmo material. O botão deixou de ser "azul chapado" e
   passou a ser o marinho com as duas luzes, como as capas e a barra lateral;
   sobre uma superfície que já é de impacto, ele vira branco (regra abaixo). */
:root { --impacto-fundo: radial-gradient(120% 90% at 0% 0%, var(--luz-azul), transparent 55%), radial-gradient(90% 70% at 100% 100%, var(--luz-ouro), transparent 60%), var(--navy); }
/* O PAPEL MESCLADO (18.09.2026): as mesmas duas luzes do impacto, azul no alto
   à esquerda e ouro embaixo à direita, só que sobre papel. É a versão para
   tela de lista, onde o marinho não entra (Biblioteca, Pendências). Primeiro
   uso: o índice de empresas da Biblioteca, pedido do dono. */
/* O papel mesclado saiu em 19.09.2026: o dono não gostou do fundo no índice
   das empresas, e ele era o único uso. O índice voltou ao branco. */
.impacto {
  position: relative; overflow: hidden; color: #fff;
  background: var(--impacto-fundo);
}
.impacto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.impacto > * { position: relative; z-index: 1; }
.impacto .olho, .impacto .capa-selo, .impacto .sec-olho { color: var(--tom-branco-60); }
.impacto .btn { background: var(--tom-branco-12); border-color: var(--tom-branco-18); color: #fff; box-shadow: none; }
.impacto .btn:hover:not(:disabled) { background: var(--tom-branco-18); }
.impacto .btn.p { background: #fff; color: var(--navy); border-color: #fff; }
.impacto .btn.p:hover:not(:disabled) { background: #fff; color: var(--navy); filter: none; }
.luz { background-image: linear-gradient(180deg, var(--tom-primario-8), transparent 40%); }
/* Sem o `.tbc` desde 19.09.2026: o dono pediu os cartões do Toolbox sem a luz
   azul no hover. Eles continuam subindo 2px com a sombra, que já diz "clique". */
.c-link:hover, .arv-linha:hover, .ej[role="link"]:hover, .emp-score[role="link"]:hover { background-image: linear-gradient(180deg, var(--tom-primario-8), transparent 45%); }


/* ── A MARCA RESPIRA. O raio do logotipo faz um gesto curto a cada nove
   segundos: levanta, brilha, volta. Nunca em movimento reduzido. ── */
.marca .ic { transition: box-shadow var(--t-medio) var(--curva); }
.marca .ic svg { animation: marca-vive 9s var(--curva) infinite; transform-origin: 50% 50%; }
.marca:hover .ic { box-shadow: 0 0 22px var(--tom-primario-35); }
@keyframes marca-vive {
  0%, 88% { transform: none; filter: none; }
  91% { transform: translateY(-2px) rotate(-8deg) scale(1.08); filter: drop-shadow(0 0 6px var(--tom-primario-60)); }
  94% { transform: translateY(0) rotate(6deg) scale(1.04); }
  97%, 100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .marca .ic svg { animation: none; } }

/* ── REVELAR: a troca de rota cruza, não pisca ── */
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }

/* ── OS NÚMEROS CONTAM E SÃO TABULARES ── */
.c .v, .kpi-v, .hf-n, .ficha b, .numero-heroi, .anel .n b, .ca-num b { font-variant-numeric: tabular-nums; }


/* ═══════════════════════════════════════════════════════════════════════════
   VISÃO GERAL EM TRÊS COLUNAS (06.09.2026): jornada · herói · sinais
   ═══════════════════════════════════════════════════════════════════════════ */
.vg-saud { font-weight: 400; letter-spacing: -0.02em; }
.vg-saud b { font-weight: 600; }
/* Sem corte de linhas: a linha voltou a ser um fato curto da conta, e fato
   curto não precisa de reticências. Ver `vg-sub` em app.js. */
.vg-sub { max-width: 72ch; }
/* O SINAL É UMA LINHA, E ELE ESTAVA SAINDO COLUNA.
 *
 * Estas três regras pedem um cartão horizontal — ícone à esquerda, número e
 * rótulo à direita — e é o que o `gap`, o `align-items: center` e o `min-width`
 * do número existem para fazer. Faltava a linha que diz isso: `.c` é
 * `flex-direction: column` com `justify-content: space-between` e um piso de
 * 132px, feito para a grade 2x2 da conta vazia, e nada aqui sobrescrevia
 * nenhum dos três. O resultado era o oposto do desenho: o ícone sozinho no
 * topo, centrado, o número lá embaixo, e oitenta pixels de vazio entre os dois,
 * três vezes.
 *
 * Que era engano e não escolha está escrito no próprio arquivo: a regra de
 * tablet (720px) já dizia "nunca empilhados em cartões altos com o número no
 * meio" e consertava só o telefone. O computador ficou anos com o defeito que
 * o telefone não tinha.
 */
/* UMA PEÇA COM TRÊS LINHAS, E NÃO TRÊS CAIXAS.
 *
 * Ao lado de um herói de 477px, três cartões pequenos não têm bom destino:
 * agrupados no alto deixam um buraco embaixo, distribuídos ficam soltos com
 * sessenta pixels de nada entre eles. O que resolve não é o espaçamento, é
 * parar de serem três objetos. Como painel único, a altura do herói passa a
 * ser a altura de uma superfície só, e aí ela é natural em vez de sobra.
 *
 * Os cartões continuam sendo `.c` no HTML, e continuam clicáveis um a um:
 * o que muda é que a moldura sai deles e vai para o grupo. */
.bento-b { align-self: stretch; }
.bento-b .sinais {
  flex: 1; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.sinais .c {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: var(--e4); padding: var(--e4) var(--e5);
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.sinais .c + .c { border-top: 1px solid var(--border); }
.sinais .c:hover, .sinais .c-link:hover { box-shadow: none; border-color: transparent; background-color: var(--surface-hi); }
.sinais .c-link:focus-visible { outline-offset: -2px; }
.sinais .c .v { font-size: var(--f-tela); min-width: 44px; }
.sinais .c .c-n { display: flex; flex-direction: column; }
/* O ÍCONE NA CAIXINHA DA COR DO ASSUNTO (19.09.2026, tela do Codex aprovada
   pelo dono): verde para o Raio-X, âmbar para pendência, azul para os
   relatórios. A cor fica no ícone, nunca no número. A seta diz que o número
   abre alguma coisa: os três já eram links e nada mostrava isso. */
.sinais .c-ic {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--fam-soft, var(--surface-hi)); color: var(--fam-icone, var(--dim-ink));
}
.sinais .c.t-pend { --fam-soft: color-mix(in srgb, var(--warn) 12%, transparent); --fam-icone: var(--warn-ink); }
.sinais .c.t-rel { --fam-soft: var(--primary-soft); --fam-icone: var(--primary); }
.c-seta { display: none; }
.sinais .c-seta { display: inline-flex; margin-left: auto; color: var(--faint-ink); transition: transform var(--t-rapido) var(--curva); }
.sinais .c-seta .ic { transform: rotate(-90deg); }
.sinais .c-link:hover .c-seta { transform: translateX(2px); color: var(--dim-ink); }
.heroi { flex: 1; border-radius: var(--r-md); padding: var(--e5) var(--e5) var(--e5); display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 320px; }
.heroi .olho { display: inline-flex; align-items: center; gap: var(--e2); }
.heroi-n { font-size: clamp(72px, 9cqw, 128px); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; margin-top: var(--e5); font-variant-numeric: tabular-nums; }
.heroi-n small { display: block; font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: var(--e2) 0 0; color: var(--tom-branco-60); }
.heroi h3 { margin: var(--e4) 0 0; font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
/* SEIS LINHAS, E O NÚMERO VEIO DO TEXTO REAL. O teto era 4, escolhido sem
   olhar o dado: `principal_problema` sai do motor com 200 a 230 caracteres, e
   a 40ch isso são cinco linhas e meia — TODO cartão terminava em "…a riscos.."
   no meio da última oração. O teto continua existindo, porque o cartão vive
   numa grade e não pode crescer sem limite; só passou a caber o que o motor
   de fato escreve. */
.heroi p { margin: var(--e3) auto 0; color: var(--tom-branco-70); font-size: var(--f-corpo); line-height: 1.55; max-width: 40ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.heroi-pe { margin-top: auto; padding-top: var(--e4); }
/* O anel da capa do Raio-X no herói (19.09.2026). As cores de trilho, marcas
   e número sobre o marinho são as da capa (`.capa-rx-score`, logo abaixo). */
.heroi-anel { margin-top: var(--e4); }
.heroi-anel .capa-anel, .heroi-anel .capa-anel svg { width: 168px; height: 168px; }
.heroi-anel .ca-num b { font-size: clamp(var(--f-heroi), 7cqw, 60px); }
.heroi.c-link { cursor: pointer; }
/* BRILHO E LEVANTE, e não troca de degradê. O hover trocava o `background-image`
   por outro com número diferente de camadas, e degradê com camadas diferentes
   não interpola: por mais transição que se declare, ele SALTA. Brilho e 2px de
   levante são o mesmo gesto do `.btn.p` e do cartão de seção, e esses animam. */
.heroi.c-link:hover { filter: brightness(1.08); transform: translateY(-2px); }
.heroi.c-link:active { transform: translateY(0); }
@container tela (max-width: 1040px) {
  .bento-a { grid-column: span 7; } .bento-h { grid-column: span 5; } .bento-b { grid-column: 1 / -1; }
  .bento-b .sinais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container tela (max-width: 720px) {
  .bento-a, .bento-h { grid-column: 1 / -1; }
}
/* CONTA SEM EMPRESA AINDA (19.09.2026, o dono viu na conta nova). Os três
   contadores não renderizam, e a terceira coluna ficava de pé vazia: um vão
   de um quarto da tela à direita. Sem eles, Jornada e convite dividem a
   largura toda, na mesma proporção de 7 para 5 da tela média. */
.bento.sem-sinais .bento-b { display: none; }
@container tela (min-width: 721px) {
  .bento.sem-sinais .bento-a { grid-column: span 7; }
  .bento.sem-sinais .bento-h { grid-column: span 5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTÚDIO: OS DOIS MOTORES COMO CAPAS (06.09.2026)
   ═══════════════════════════════════════════════════════════════════════════ */
.est-passo b em { font-style: normal; font-weight: 400; color: var(--tom); }
.est-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--tom); }
.est-halo { display: none; }
.est-seta i { width: 64px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #16A34A, #2563EB); }
/* ═══════════════════════════════════════════════════════════════════════════
   "COMO FUNCIONA" — a dobra que explica a tela.

   UMA PEÇA SÓ. Eram duas: `.est-como summary` e `.tb-como summary`, blocos
   idênticos declaração por declaração, a três mil linhas de distância um do
   outro. Duas cópias do mesmo controle que precisariam concordar para sempre,
   e o jeito de garantir isso é não ter duas.

   ── A SETA ────────────────────────────────────────────────────────────────

   Era um quadrado de 8px com duas bordas, girado 45°. Girado, ele não fica
   onde nasceu — daí as duas linhas de `margin-top` negativo, uma para fechado
   e outra para aberto, calçando à mão o que a rotação tinha desalinhado. Ícone
   de verdade não precisa de calço, e é o MESMO `baixo` do botão da memória do
   Delfos: o produto passa a ter um gesto único de revelar, em vez de um
   desenho por tela.

   ── E ELA É A ÚNICA COISA COLORIDA ────────────────────────────────────────

   O caminho óbvio para dar presença a esta pílula seria um fundo mesclado.
   Ela ficaria bonita e ficaria ERRADA: ela mora a poucos centímetros dos
   cartões de ferramenta e dos botões de gerar, que são a ação da tela, e um
   fundo com cor a poria no mesmo nível deles. Isto aqui é convite para ler,
   não ação.

   Então a presença vai toda num elemento pequeno: a seta em `--primary`, com
   o rótulo em cinza. É o bastante para o olho achar que ali se clica, e pouco
   o bastante para não disputar com o que importa na tela. No hover a pílula
   inteira acende — a cor sobe para o rótulo e para a borda —, o que dá o
   retorno sem precisar de peso permanente.

   44px de altura, como todo alvo de dedo desta casa. Eram 36.
   ═══════════════════════════════════════════════════════════════════════════ */
.est-como { margin: 0 0 var(--e5); }
.como-funciona > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4);
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--f-apoio); font-weight: 500; color: var(--dim-ink);
  transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.como-funciona > summary::-webkit-details-marker { display: none; }
.cf-ch { display: inline-flex; color: var(--primary); transition: transform var(--t-rapido) var(--curva); }
.como-funciona[open] > summary .cf-ch { transform: rotate(180deg); }
.como-funciona > summary:hover { color: var(--ink); background: var(--surface-hi); border-color: var(--tom-primario-60); }
/* Aberta, ela deixa de ser convite e vira o título do que está aberto. */
.como-funciona[open] > summary { color: var(--ink); }
.como-funciona > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .como-funciona > summary, .cf-ch { transition: none; } }
.est-como .est-pilar { margin-top: var(--e3); }
/* EMPILHADO (tablet e celular): o conector deita — o fio vira horizontal e o
   texto "nasce deste" fica entre dois fios, sem girar nada. */
@container tela (max-width: 900px) {
  .est-par { flex-direction: column; }
  /* Empilhado, a seta aponta para baixo, e "gera o plano" fica ao lado dela. */
  .est-seta { flex-direction: row; width: auto; height: 64px; padding: 0; gap: var(--e3); }
  .est-seta-fio { flex-direction: column; }
  .est-seta i { width: 2px; height: 28px; background: linear-gradient(180deg, #16A34A, #2563EB); }
  .est-seta-fio .ic { margin: -9px 0 0; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AS CAPAS DOS RELATÓRIOS NA SUPERFÍCIE DE IMPACTO (06.09.2026)
   Raio-X, Radar e Plano compartilham `.capa-rx`: texto à esquerda, o número
   ou o gráfico à direita. O corpo continua claro.
   ═══════════════════════════════════════════════════════════════════════════ */
.dossie .hero.capa-rx { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e6); align-items: center; border-radius: var(--r-lg); padding: var(--e6) var(--e6) var(--e5); margin-bottom: var(--e5); }
.capa-rx .capa-selo, .capa-rx .cs-ponto { color: var(--tom-branco-60); }
.capa-rx .cs-ponto { background: var(--fam, var(--primary)); box-shadow: 0 0 10px var(--fam, var(--primary)); }
.dossie .capa-rx h1, .dossie .capa-rx .h1-frase { color: #fff; font-weight: 800; letter-spacing: -0.04em; }
.dossie .capa-rx .h1-frase span { color: #93c5fd; font-weight: 400; }
.dossie .capa-rx .hero-sub { color: var(--tom-branco-70); }
.capa-rx .hero-m, .capa-rx .hero-m .ic { color: var(--tom-branco-60); }
.capa-rx .hero-ficha { background: transparent; border-color: var(--tom-branco-18); }
.capa-rx .hf-ic { background: var(--tom-branco-12); color: #fff; }
.capa-rx .hf-r { color: var(--tom-branco-60); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--f-micro); }
.capa-rx .hf-v, .capa-rx .hf-n { color: #fff; }
.capa-rx .hero-div { display: none; }
/* `max-width`: a coluna é `auto`, e sem teto ela crescia até a largura da
   frase do veredito, deixando 218px para o nome da empresa, que quebrava em
   "Formatur / as" a 1024px (auditoria de 16.09.2026). */
.capa-rx-score { text-align: center; min-width: 200px; max-width: 360px; }
.capa-rx-score .capa-anel { margin: 0 auto; width: 152px; height: 152px; }
.capa-rx-score .capa-anel svg { width: 152px; height: 152px; }
:is(.capa-rx-score, .heroi-anel) .ca-trilho { stroke: var(--tom-branco-12); }
:is(.capa-rx-score, .heroi-anel) .ca-marca { stroke: var(--tom-branco-18); }
:is(.capa-rx-score, .heroi-anel) .ca-num b, :is(.capa-rx-score, .heroi-anel) .ca-num span { color: #fff; }
.capa-rx-score .ca-num b { font-size: clamp(var(--f-heroi), 5cqw, 52px); }
.capa-rx-faixa { display: block; margin-top: var(--e3); font-size: var(--f-leitura); font-weight: 600; }
.capa-rx-faixa.t-ok { color: #6ee7b7; } .capa-rx-faixa.t-ap { color: #fcd34d; } .capa-rx-faixa.t-tr { color: #fca5a5; }
.capa-rx-leg { display: block; font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tom-branco-50); margin-top: var(--e0); }
.capa-rx-recado { margin: var(--e3) auto 0; max-width: 30ch; font-size: var(--f-apoio); color: var(--tom-branco-70); line-height: 1.5; }
.capa-dia { text-align: right; min-width: 220px; }
.capa-dia b { display: block; font-size: clamp(64px, 8cqw, 116px); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.capa-dia span { display: block; font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tom-branco-60); margin-top: var(--e3); }
.capa-dia-barra { height: 6px; border-radius: 3px; background: var(--tom-branco-18); margin: var(--e3) 0 0 auto; width: 220px; overflow: hidden; }
.capa-dia-barra i { display: block; height: 100%; background: linear-gradient(90deg, #60a5fa, #fff); transition: width var(--t-lento) var(--curva); }
@container tela (max-width: 860px) {
  .dossie .hero.capa-rx { grid-template-columns: 1fr; }
  .capa-rx-score, .capa-dia { text-align: left; }
  .capa-rx-score .capa-anel { margin: 0; }
  .capa-dia-barra { margin-left: 0; }
}
/* AS FICHAS SAEM DA CAPA DO TELEFONE.
   Na largura do computador elas são quatro cartões lado a lado, uma faixa de
   contexto sob o título. Abaixo de 560px a grade vira uma coluna e os mesmos
   quatro viram uma pilha de cartões altos: a capa deixa de ser capa e vira
   formulário respondido, com o score empurrado para baixo de tudo.

   O que elas mostram é o que o próprio cliente escreveu no formulário —
   faturamento, praça, orçamento, tempo de casa. Ele sabe. Não é achado do
   relatório, é o que ele entregou para o relatório existir, e é a primeira
   coisa a ceder quando a capa tem uma coluna só. O que fica é o que ele veio
   ver: o nome, o selo, o score. */
@container tela (max-width: 560px) {
  .capa-rx .hero-fichas { display: none; }
}

/* ── O MEDIDOR do termômetro ── */
.medidor { margin: var(--e4) 0; }
.med-barra { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--danger), var(--warn) 50%, var(--ok)); }
.med-barra i { position: absolute; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); transform: translateX(-50%); box-shadow: 0 2px 6px var(--tom-sombra-25); transition: left var(--t-lento) var(--curva); }
.medidor .tr-paradas { margin-top: var(--e3); }

/* ── A MATRIZ DE RISCOS ── */
/* A MATRIZ EM CIMA, OS CARDS EM LINHA EMBAIXO (06.09.2026): em duas colunas
   os cards ficavam espremidos ao lado do gráfico. */
.riscos-grade { display: grid; grid-template-columns: 1fr; gap: var(--e5); align-items: start; }
/* 560px num cartão de 1256 deixava a matriz do tamanho de um selo, com meia
   tela de branco dos dois lados (20.09.2026, achado do dono). 880 dá célula
   legível sem esticar uma grade 3x3 pela largura inteira, que é o outro
   extremo — aí as células viram faixas e a matriz deixa de parecer matriz. */
.riscos-grade .mr-caixa { max-width: 880px; margin: 0 auto; width: 100%; }
.mr-caixa { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e3) var(--e2) 0; background: var(--surface); }
.mr { display: block; width: 100%; height: auto; }
.mr text { font-family: var(--body); }
.riscos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.riscos-lista .risco-card { margin: 0; padding: var(--e4); }
.riscos-lista .risco-linha { grid-template-columns: 1fr; gap: var(--e3); }
.riscos-lista .risco-medidas { flex-direction: row; gap: var(--e4); }
.riscos-lista .risco-t { font-size: var(--f-corpo); }
.risco-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--f-micro); font-weight: 700; flex: none; }


/* ── O ROADMAP EM LINHA DO TEMPO ── */
.rm { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e5); background: var(--surface); }
.rm-marcos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); }
.rm-linha { position: relative; height: 6px; border-radius: 3px; background: var(--surface-hi); margin: var(--e3) 0 var(--e5); }
.rm-linha i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--feito, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--fam, var(--primary)), #86efac); }
.rm-fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.rm-fases .fase-card { margin: 0; }
@container tela (max-width: 760px) { .rm-fases, .rm-marcos { grid-template-columns: 1fr; } }

/* ── O ANEL EM MINIATURA ── */
.anel-mini { position: relative; display: inline-grid; place-items: center; flex: none; --anel: var(--ok); }
.anel-mini.faixa-ap { --anel: var(--warn); } .anel-mini.faixa-tr { --anel: var(--danger); }
.anel-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anel-mini .ca-trilho { stroke: var(--surface-hi); } .anel-mini .ca-arco { stroke: var(--anel); }
.anel-mini b { position: relative; font-size: var(--f-apoio); font-weight: 700; font-variant-numeric: tabular-nums; }
.anel-mini.vazio { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--border); }

/* ── A BIBLIOTECA EM DUAS COLUNAS ── */
/* A árvore fica com o que sobra; o índice tem largura fixa e pequena. Ver a
   nota em `telaBiblioteca`. */
.bib-grade { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--e5); align-items: start; }
/* Sem a coluna do índice, a lista ocupa a largura inteira em vez de deixar
   240px de vão à direita. */
.bib-grade.so-lista { grid-template-columns: minmax(0, 1fr); }
/* O índice é um painel em papel mesclado: a cor diz "isto é navegação", e a
   lista ao lado continua sendo a única coisa branca e chapada da tela. */
.bib-lado {
  display: flex; flex-direction: column; gap: 0; position: sticky; top: var(--e4);
  padding: var(--e4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.bib-lado .olho { margin: 0 0 var(--e3); display: inline-flex; align-items: center; gap: var(--e2); }
/* Uma linha de índice: sem cartão, sem anel. O fio entre as linhas é o que
   separa; o fundo só aparece no hover, para dizer que se clica. */
.emp-mini { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); text-align: left; font: inherit; color: var(--ink); cursor: pointer; width: 100%; background: transparent; border: 0; border-radius: var(--r-xs); transition: background var(--t-rapido) var(--curva); }
.emp-mini + .emp-mini { border-top: 1px solid var(--border); border-radius: 0; }
.emp-mini:hover { background: var(--surface-hi); }
.emp-mini:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.emp-mini-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.emp-mini-txt b { font-size: var(--f-apoio); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-mini-txt span { font-size: var(--f-micro); color: var(--faint-ink); }
.emp-mini .ic { color: var(--faint-ink); }
/* A barra de composição: uma fatia por família, 2px de papel entre elas. A
   cor é a da família (a mesma da luz dos ícones), e quem não distingue cor lê
   a legenda, o `title` de cada fatia e o rótulo da barra inteira. */
.emp-comp { display: flex; gap: 2px; height: 6px; }
.emp-comp i { min-width: 4px; border-radius: 2px; }
.comp-rx { background: #16a34a; }
.comp-plano { background: #2563eb; }
.comp-toolbox { background: #ea580c; }
.comp-radar { background: #7c3aed; }
.comp-outros { background: var(--faint); }
.bib-leg { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--border); }
.bib-leg span { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--f-micro); color: var(--dim-ink); }
.bib-leg i { width: 8px; height: 8px; border-radius: 2px; }
.emp-rica { gap: var(--e3); padding: var(--e3) var(--e5); }
.emp-rica .emp-txt { display: flex; flex-direction: column; min-width: 0; }
.emp-rica .nm { font-size: var(--f-leitura); font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.emp-et { font-size: var(--f-micro); color: var(--faint-ink); }
/* NO CELULAR O ÍNDICE VEM ANTES, como uma fileira de chips que rola de lado.
   Um índice no fim da página não indexa nada. */
@container tela (max-width: 900px) {
  /* `align-items: stretch`, porque a regra base diz `start`: sem esticar, a
     fileira de chips media a soma dos chips e passava da tela, em vez de rolar
     por dentro. Medido a 375px: a página inteira ganhava rolagem lateral. */
  .bib-grade { display: flex; flex-direction: column; gap: var(--e3); align-items: stretch; }
  /* A FILEIRA QUEBRA, NÃO ROLA. Rolando, ela parecia cortada no tablet: as
     empresas seguintes ficavam fora da tela sem nada dizendo que havia mais, e
     um índice que esconde metade do que indexa não é índice. Quebrando, todas
     aparecem, e com nove empresas isso custa uma segunda fileira. */
  /* No celular o índice volta a ser uma fileira de chips: o painel, a barra
     e a legenda ficam para quem tem largura para lê-los. */
  .bib-lado { order: -1; flex-direction: row; flex-wrap: wrap; gap: var(--e2); position: static; padding: 0; border: 0; background: none; box-shadow: none; }
  .bib-lado .olho, .emp-comp, .bib-leg { display: none; }
  .emp-mini { width: auto; flex: 0 0 auto; padding: var(--e2) var(--e3); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); white-space: nowrap; }
  .emp-mini + .emp-mini { border-top: 1px solid var(--border); border-radius: var(--r-pill); }
  .emp-mini-txt b { font-size: var(--f-micro); }
  .emp-mini-txt span, .emp-mini .ic { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN DIVIDIDO (06.09.2026): painel de impacto à esquerda, formulário à direita
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding: 0; background: var(--bg); }
  .auth > .au-painel { display: flex; }
  .au-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--e6); min-height: 100vh; }
  .auth .cartao { box-shadow: var(--shadow-modal); }
}
@media (max-width: 959px) { .au-lado { display: contents; } }
.au-painel { display: none; flex-direction: column; justify-content: center; gap: var(--e5); padding: clamp(32px, 6vw, 96px); min-height: 100vh; }
.au-marca { display: inline-flex; align-items: center; gap: var(--e3); font-weight: 700; font-size: var(--f-leitura); }
.au-marca .ic { width: 36px; height: 36px; border-radius: var(--r-xs); background: var(--primary); display: grid; place-items: center; box-shadow: 0 0 22px var(--tom-primario-50); }
.au-painel h2 { margin: var(--e6) 0 0; font-size: clamp(32px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: #fff; text-wrap: balance; max-width: 16ch; }
.au-painel h2 span { font-weight: 400; color: #93c5fd; }
.au-painel p { margin: 0; font-size: var(--f-leitura); color: var(--tom-branco-70); max-width: 44ch; line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   O CONVITE (20.09.2026) — a tela de quem foi indicado.

   Ela reusa a composição inteira do login (`.auth`, `.au-painel`, `.cartao`,
   `.au-cabeca`, `.au-campo`), porque é a mesma porta: alguém chegando de fora
   precisa saber onde entrou antes de escrever qualquer coisa. Aqui embaixo
   fica só o que é dela — e o desconto é um OBJETO, não uma frase no meio do
   parágrafo: ele é a razão de a pessoa preencher.
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-desconto { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e5);
               padding: var(--e3) var(--e4); border-radius: var(--r-xs);
               background: var(--tom-primario-8); border: 1px solid var(--tom-primario-12); }
.cv-desconto b { flex: none; font-family: var(--mono); font-size: var(--f-secao); font-weight: 600;
                 letter-spacing: -0.02em; color: var(--primary); }
.cv-desconto span { font-size: var(--f-apoio); line-height: 1.5; color: var(--dim-ink); }
.auth .au-ladrilho.morno { background: var(--surface-hi); color: var(--dim-ink); box-shadow: none; }
.cv-op { font-style: normal; font-weight: 400; color: var(--faint-ink); }
.cv-pe { margin: var(--e4) 0 0; text-align: center; font-size: var(--f-micro);
         line-height: 1.5; color: var(--faint-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   A LEITURA DO MOMENTO (03.10.2026) — a porta gratuita antes do Raio-X.

   Mesma composição do login e do convite: uma coisa por vez, num cartão só.
   As opções são as do formulário do Raio-X (`.opcoes`, `.opcao`), de propósito:
   quem responde aqui reconhece o formulário quando chegar nele. Só o que é
   daqui leva `lm-`.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth.lm .cartao { max-width: 480px; }
.lm-fatos { list-style: none; margin: 0 0 var(--e5); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
.lm-fatos li { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e3);
               border-radius: var(--r-pill); background: var(--surface-hi);
               font-size: var(--f-micro); font-weight: 500; color: var(--dim-ink); }
.lm-fatos .ic { color: var(--faint-ink); }
.lm-pe { margin: var(--e4) 0 0; text-align: center; font-size: var(--f-micro); line-height: 1.5; color: var(--faint-ink); }
.lm-topo { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e5); }
/* Rótulo comum, na fonte do corpo: mono em caixa alta é só para selo e olho de seção. */
.lm-conta, .lm-rot { font-size: var(--f-micro); font-weight: 600; color: var(--dim-ink); }
/* Seis traços, e não uma porcentagem: a pessoa vê quantas faltam. */
.lm-barra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e1); }
.lm-barra i { height: 4px; border-radius: var(--r-pill); background: var(--border); }
.lm-barra i.feita { background: var(--primary); }
.lm-barra i.agora { background: var(--tom-primario-50); }
/* `.auth` na frente: a regra do título do login zerava esta margem. */
.auth .lm-pergunta { margin: 0 0 var(--e5); font-size: var(--f-secao); font-weight: 700; line-height: 1.25;
               letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.lm-pergunta:focus, .lm .au-cabeca h1:focus { outline: none; }
.lm-voltar { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e4); padding: var(--e2) 0;
             border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--f-apoio); color: var(--dim-ink); }
.lm-voltar:hover { color: var(--ink); }
.lm-voltar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }
.lm-voltar .ic { transform: rotate(180deg); }
.lm-voltar.centro { display: flex; margin-inline: auto; }
/* "De onde veio": cada linha é uma pergunta e o que a pessoa marcou nela. */
.lm-porque { margin-bottom: var(--e4); padding: var(--e4); border-radius: var(--r);
             background: var(--surface-hi); border: 1px solid var(--border); }
.lm-porque ul { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.lm-porque li { display: flex; flex-direction: column; gap: var(--e0); }
.lm-porque li span { font-size: var(--f-micro); color: var(--dim-ink); line-height: 1.4; }
.lm-porque li b { font-size: var(--f-apoio); font-weight: 600; color: var(--ink); line-height: 1.4; }
.lm-porque p { margin: var(--e2) 0 0; font-size: var(--f-apoio); color: var(--prosa); }
.lm-completa { margin: 0 0 var(--e4); font-size: var(--f-apoio); line-height: 1.55; color: var(--prosa); }
/* No celular o botão do resultado tem uma frase comprida: desce um degrau para não encostar na borda. */
@media (max-width: 480px) { .auth.lm .au-acao { font-size: var(--f-apoio); } }

/* ═══════════════════════════════════════════════════════════════════════════
   PENDÊNCIAS: um número-herói e a luz da urgência no cartão (06.09.2026)
   ═══════════════════════════════════════════════════════════════════════════ */
.pend-termo .pt-n:first-child b { font-size: var(--f-tela); }
.pcard.t-ag { background-image: linear-gradient(180deg, var(--tom-danger-4), transparent 45%); }
.pcard.t-pr { background-image: linear-gradient(180deg, var(--tom-warn-4), transparent 45%); }

.jn-topo .jn-tt { flex: 1; min-width: 0; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   A TELA DO RADAR 360° (radar.js · rd-porta) acompanha o Estúdio (06.09.2026)

   As três entregas viram três cartões lado a lado, com o ícone na família do
   Radar; os três passos viram uma régua numerada em três colunas.
   ═══════════════════════════════════════════════════════════════════════════ */
.rd-porta .rd-entregas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.rd-porta .rd-entrega { grid-column: auto; display: flex; flex-direction: row; align-items: flex-start; gap: var(--e4); padding: var(--e5); border-radius: var(--r-md); background: var(--surface); border-color: var(--tom-primario-12); }
.rd-porta .rd-entrega-ic { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--fam) 9%, transparent); color: var(--fam-icone); }
.rd-entrega-miolo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.rd-porta .rd-entrega-r { font-family: var(--body); font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.rd-porta .rd-entrega p { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.55; }
/* OS TRÊS PASSOS COMO UMA VARREDURA (06.09.2026): três estações ligadas por
   um fio na cor da família, cada uma com o número num disco e a luz de topo.
   O fio diz que há ordem; o disco diz que é a máquina, não a pessoa. */
.rd-porta .rd-passos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin: 0; padding: 0; counter-reset: passo; }
/* O desenho do passo mora numa segunda coluna, ao lado do texto (19.09.2026). */
.rd-porta .rd-passos li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px; align-content: start; gap: var(--e2) var(--e4); padding: var(--e5); border: 1px solid color-mix(in srgb, var(--fam) 35%, transparent); border-radius: var(--r-md); counter-increment: passo; }
.rd-porta .rd-passos li b { color: #fff; }
.rd-porta .rd-passos li span { color: var(--tom-branco-70); }
.rd-porta .rd-passos li::before { content: counter(passo); position: static; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--e2); background: var(--fam); color: #fff; font-family: var(--body); font-size: var(--f-leitura); font-weight: 700; letter-spacing: 0; line-height: 1; box-shadow: 0 0 0 6px color-mix(in srgb, var(--fam) 12%, transparent); }
.rd-porta .rd-passos li::before, .rd-porta .rd-passos b, .rd-porta .rd-passos span { grid-column: 1; }
.rd-passo-vis {
  grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 84px; height: auto;
  fill: none; stroke: color-mix(in srgb, var(--fam) 55%, #fff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rd-passo-vis .cheio { fill: color-mix(in srgb, var(--fam) 45%, transparent); }
.rd-porta .rd-passos b { font-size: var(--f-leitura); }
/* UMA COLUNA ATÉ 1000px, e não até 760 (02.10.2026, ronda de texto espremido).
   Em três colunas, cada passo reserva 84px para o desenho e cada entrega 56px
   para o ícone: no tablet (771px de área) o texto ficava com 97px, uma ou duas
   palavras por linha. Três colunas só quando sobra uns 170px de texto. */
@container tela (max-width: 999px) { .rd-porta .rd-entregas, .rd-porta .rd-passos { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   A PORTA COM VITRINE (19.09.2026, tela do Codex que o dono aprovou)

   Só no Radar, por decisão do dono: o Estúdio e o Toolbox, que dividiam o
   `.est-core` com ele, seguem como estão, sem desenho próprio. As classes são
   `porta-*` porque a forma não é do Radar em si.

   O chamado vem logo abaixo do título, e não no fim do cartão. O mapa é
   feito de anéis e sombras: o teto de degradês já está cheio, e nenhum deles
   aqui seria textura ou medida.

   FUNDO BRANCO E O FIO DA FAMÍLIA NO TOPO (19.09.2026, pedido do dono): o
   mesmo cartão do Estúdio (fio azul) e do Toolbox (fio laranja), aqui em
   roxo. O fundo tingido de roxo saiu; a cor fica no fio e no desenho.
   ═══════════════════════════════════════════════════════════════════════════ */
.porta-heroi {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e6);
  padding: var(--e6); margin-bottom: var(--e7); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
/* ═══════════════════════════════════════════════════════════════════════════
   O HERÓI DO RADAR VIROU ESCURO E ABSORVEU O CARTÃO DE MOTOR (22.09.2026)

   Por um instante foram dois: o herói branco e, logo abaixo, o cartão escuro
   com "3 · Olhe para fora · Radar 360°". O dono pediu a fusão no mesmo minuto
   em que viu, e estava certo — um embaixo do outro, os dois se apresentavam, e
   o nome do produto aparecia duas vezes antes do botão.

   Escuro porque é o que carrega o cabeçalho de motor: ele nasceu na superfície
   de impacto do Estúdio, e é lá que o nome em duas cores funciona. A regra da
   casa continua valendo — a cor da família mora no ícone e no nome, nunca no
   texto corrido.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── O MELHOR DOS DOIS, que foi como o dono pediu ─────────────────────────
   Primeiro tentei o cartão inteiro escuro, como os do Estúdio. Ele viu e
   recusou: queria o FUNDO BRANCO da porta, com elementos que lembrem os dois
   cartões azuis. E ele está certo — esta tela é uma porta, não uma capa de
   relatório; o escuro aqui roubava o peso do botão, que é o que ela existe
   para ter.
   Então o que veio do cartão de motor foi a FORMA, não a cor: o ladrilho do
   ícone, o olho da ordem em mono, e o nome partido em duas cores. Na chave
   clara a segunda metade é o roxo cheio da família, e não o lilás, que só
   existe para ter contraste no escuro.

   (De quebra, isto apaga um erro meu: no escuro, `.porta-p` e as pastilhas
   ficaram com branco a 70% sobre fundo claro — `.porta-heroi` declara
   `background: var(--surface)` e mora depois de `.impacto` no arquivo, então
   o escuro nunca chegou. Medido: razão 1,1. Com o fundo branco de volta, as
   cores originais voltam a valer.) */
.porta-motor { --fam: #7C3AED; }
.porta-motor-cab { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e5); }
.porta-motor-cab > div { min-width: 0; }
.porta-motor-cab .est-cred, .porta-motor-cab .est-online { margin-left: auto; }
/* O ladrilho: o mesmo desenho do `.est-ic` dos motores, na versão clara. A
   família entra no fundo e no fio, e `--fam-icone` é o token que existe para
   o traço do ícone — a regra da casa permite os três. */
.porta-motor-cab .est-ic {
  color: var(--fam-icone); background: color-mix(in srgb, var(--fam) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam) 20%, transparent);
}
.porta-motor-n {
  display: block; font-size: var(--f-secao); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
}
/* ⚠️ A SEGUNDA METADE DO NOME É MAIS CLARA, E NÃO ROXA.
   Nos cartões escuros do Estúdio ela é verde ou azul — mas lá a cor é um
   literal claro escolhido para ter contraste no escuro, e não o token da
   família. Aqui, em fundo branco, `color: var(--fam)` é justamente o que o
   guarda de estilo proíbe: família vai em fundo de ícone ou em fio, nunca em
   texto. Tentei e ele me pegou, com razão.
   A distinção fica por PESO e TOM, que é o par que a casa usa: 700 no `--ink`
   contra 400 no `--dim-ink`. O reconhecimento vem do conjunto — ladrilho,
   olho em mono e nome partido —, não da cor de uma palavra. */
.porta-motor-n em { font-style: normal; font-weight: 400; color: var(--dim-ink); }

/* O fio é o `.est-fio` dos outros dois: 3px na cor da família, cortado pela
   curva do canto (o `overflow: hidden` do cartão faz o corte). */
.porta-heroi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--fam, var(--primary));
}
/* A MESMA ESCALA DAS OUTRAS PORTAS (19.09.2026, pedido do dono). O título
   nasceu a 44px e o parágrafo a 17, contra 27 e 15 no Estúdio e no Toolbox:
   medido nas três, e igualado ao `.est-core-t` / `.est-core-p`. */
.conteudo .porta-t {
  font-size: var(--f-tela); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.2; margin: 0 0 var(--e2); text-wrap: balance;
}
.porta-p { font-size: var(--f-corpo); color: var(--dim-ink); line-height: 1.65; margin: 0 0 var(--e5); max-width: 52ch; }
.porta-heroi .est-fatos { gap: var(--e2); margin-bottom: var(--e5); }
.porta-heroi .est-fatos span { background: var(--surface); border: 1px solid var(--border); }
.porta-secao { margin-bottom: var(--e7); }

/* O mapa do Radar: o centro que varre, três anéis e as quatro fontes reais. */
/* A promessa do Radar em duas linhas, no lugar do desenho de órbitas. */
.rd-frase { display: flex; flex-direction: column; gap: var(--e4); align-self: center; padding-left: var(--e5); border-left: 2px solid color-mix(in srgb, var(--fam) 40%, transparent); }
.rd-frase-t { margin: 0; font-size: var(--f-secao); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }
.rd-frase-t b { color: var(--ink); font-weight: 600; box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--fam) 18%, transparent); }
.rd-frase-p { margin: 0; display: flex; align-items: center; gap: var(--e2); font-size: var(--f-apoio); color: var(--dim-ink); }
.rd-fonte-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--fam) 10%, transparent); color: var(--fam-icone); }
/* O mapa é vitrine: sem largura para ele, sai inteiro, e o texto ocupa a faixa. */
@container tela (max-width: 1000px) {
  .porta-heroi { grid-template-columns: 1fr; }
  .porta-heroi-vis { display: none; }
}
@container tela (max-width: 520px) {
  .porta-heroi { padding: var(--e5); }
  .porta-heroi .est-comecar { width: 100%; justify-content: center; }
}
/* As três colunas do bento têm a mesma altura: o herói estica junto. */
.bento-h { align-self: stretch; }


/* ═══════════════════════════════════════════════════════════════════════════
   UM CARTÃO DE IMPACTO POR TELA (06.09.2026): Configurações (saldos), Ajuda
   (suporte) e a conta nova (primeiro Raio-X). Nunca em Pendências, Biblioteca,
   formulários e listas — ali o olho precisa varrer.
   ═══════════════════════════════════════════════════════════════════════════ */
.saldo-impacto .sec-t, .suporte-impacto h2 { color: #fff; }
.saldo-impacto .ps-n { color: #fff; font-size: clamp(var(--f-heroi), 6cqw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.saldo-impacto .ps-l { color: var(--tom-branco-60); }
.saldo-impacto .row .t1 { color: #fff; }
.saldo-impacto .row .t2 { color: var(--tom-branco-60); }
.saldo-impacto .row { border-color: var(--tom-branco-12); }
.saldo-impacto .campo-nota { color: var(--tom-branco-70); }
.saldo-impacto .chip.ok { background: var(--tom-ok-25); color: #6ee7b7; border-color: transparent; }
.saldo-impacto .chip.ap { background: var(--tom-warn-25); color: #fcd34d; border-color: transparent; }
.suporte-impacto .ajuda-p { color: var(--tom-branco-70); }
.suporte-impacto .sup-nota { color: var(--tom-branco-60); }
.suporte-impacto .sup-diag { background: var(--tom-branco-8); border: 1px solid var(--tom-branco-18); }
.suporte-impacto .sup-diag-t { color: #fff; }
.suporte-impacto .sup-diag p { color: var(--tom-branco-70); }
.suporte-impacto .sup-resumo { background: var(--tom-branco-8); color: var(--tom-branco-70); }
.suporte-impacto .sup-resumo b { color: #fff; }
.suporte-impacto .ajuda-diag { background: var(--tom-branco-8); border-color: var(--tom-branco-18); color: var(--tom-branco-70); }
.suporte-impacto .ajuda-copiado { color: #6ee7b7; }
.heroi-convite h3 { margin-top: var(--e5); font-size: var(--f-tela); font-weight: 700; letter-spacing: -0.03em; }
/* A esfera da Jornada no alto do cartão, com "Sua empresa" no meio dela. */
.heroi-esfera { position: relative; width: min(240px, 100%); aspect-ratio: 1; margin: 0 auto var(--e2); }
.heroi-esfera canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.heroi-esfera span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--f-apoio); font-weight: 600; color: #fff;
}
.heroi-convite p { -webkit-line-clamp: 5; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET (06.09.2026): o que quebrava entre 700 e 1040px de conteúdo
   ═══════════════════════════════════════════════════════════════════════════ */
/* Os sinais da Visão Geral ficam lado a lado, compactos, até 480px; nunca
   empilhados em cartões altos com o número no meio. */
@container tela (max-width: 720px) {
  .bento-b .sinais {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2);
    background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .sinais .c {
    flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e3) var(--e4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  }
  .sinais .c .v { font-size: var(--f-secao); min-width: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   ALVOS DE TOQUE NO CELULAR (07.09.2026)
   ───────────────────────────────────────────────────────────────────────────
   Varredura de todas as telas do cliente a 375px: nenhuma rolagem lateral,
   nenhuma fonte abaixo do piso de 12px, nenhum texto cortado. O que sobrou foi
   uma coisa só, e ela se repete: BOTÃO PEQUENO DEMAIS PARA O POLEGAR.

   Medido, por tela: `.pc-x` 26px (22 deles nas Pendências), `.arv-at` 28px na
   Biblioteca e na página da empresa, `.mc-check` 28px no Manual, `.intro-x`
   28px, `.abas-seta` 30px e `.jn-pagina` 28px nos relatórios, e o seletor de
   empresa da Visão Geral com 28px de altura.

   A régua do projeto é 44px, e ela já vale para `.btn`. Estes escaparam porque
   não são `.btn`: são ícones e pastilhas com classe própria.

   DUAS FERRAMENTAS, e a escolha não é de gosto:
    · onde o DESENHO pode crescer sem estranhar, ele cresce (pastilha, seletor);
    · onde crescer engordaria o ícone, o alvo cresce POR BAIXO, com um
      `::after` invisível, que é o mesmo truque já usado em `.art-renomear`.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Alvo por baixo: o desenho fica igual, a área de toque vai a 44px. */
  /* Sem `.abas-seta` (02.10.2026): ela já é absoluta, o que basta para segurar
     o `::after`, e o `relative` daqui a tirava do lugar no celular: a seta
     de rolar as abas caía embaixo da barra, encostada na margem esquerda. */
  .pc-x, .mc-check, .intro-x, .jn-pagina, .art-nome + .art-renomear { position: relative; }
  .pc-x::after, .mc-check::after, .intro-x::after, .abas-seta::after, .jn-pagina::after {
    content: ''; position: absolute; inset: -9px;
  }
  /* Aqui o desenho cresce: são pastilhas com texto, e 34px não estranha. */
  .arv-at { height: 34px; padding: 0 var(--e3); }
  .emp-link { min-height: 34px; }
  /* Seletor é controle de formulário: vale a régua cheia. */
  .jn-empresa select, .main select { min-height: 44px; }
}

@container tela (max-width: 480px) {
  .bento-b .sinais { grid-template-columns: 1fr; }
  /* O `justify-content: space-between` da carta é de COLUNA: ali ele separa o
     ícone em cima do número embaixo, que é o desenho do computador. Virando
     linha sem trocá-lo, ele passa a separar na horizontal: o ícone ia para uma
     ponta, o número para a outra, e sobrava um vão no meio da carta. E a
     altura mínima de 132px, feita para a carta em pé, deixava a carta deitada
     alta e vazia. */
  .sinais .c { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--e4); min-height: 0; }
}
/* O último segmento perde o recorte na mesma faixa em que os outros perdem:
   fora da fileira, a ponta de seta não aponta para nada. */
@container tela (max-width: 900px) {
  .tbf:last-child { clip-path: none; margin: 0; border-radius: var(--r); }
}
/* A capa do relatório em coluna única: o anel à esquerda, o veredito e o
   recado ao lado, na mesma linha. */
@container tela (max-width: 860px) {
  .capa-rx-score { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e5); align-items: center; text-align: left; padding-top: var(--e4); border-top: 1px solid var(--tom-branco-12); }
  .capa-rx-score .capa-anel { grid-row: 1 / span 3; width: 120px; height: 120px; }
  .capa-rx-score .capa-anel svg { width: 120px; height: 120px; }
  .capa-rx-score .ca-num b { font-size: var(--f-heroi); }
  .capa-rx-faixa { margin-top: 0; }
  .capa-rx-recado { margin: var(--e2) 0 0; max-width: 46ch; }
}
/* NO CELULAR, O RECADO DESCE (02.10.2026, ronda de texto espremido). Ao lado
   do anel, a 375px de tela, ele ficava com 119px: seis linhas de 15 letras.
   O anel fica ao lado só do veredito e do rótulo, que são curtos, e o recado,
   que é frase, ganha a largura da capa embaixo dos dois. */
@container tela (max-width: 480px) {
  .capa-rx-score { column-gap: var(--e4); }
  .capa-rx-score .capa-anel { grid-row: 1 / span 2; width: 104px; height: 104px; }
  .capa-rx-score .capa-anel svg { width: 104px; height: 104px; }
  .capa-rx-recado { grid-column: 1 / -1; margin-top: var(--e3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   O FIM DO RELATÓRIO (06.09.2026): derivados, continuar, rodapé
   ═══════════════════════════════════════════════════════════════════════════ */
.derivados { display: flex; flex-direction: column; gap: var(--e2); }
.derivado { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.derivado b { font-size: var(--f-corpo); font-weight: 600; min-width: 0; }
.derivado-q { font-family: var(--mono); font-size: var(--f-micro); color: var(--faint-ink); }
.derivado .btn { margin-left: auto; }
.derivado-ic { width: 32px; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center; flex: none; background: var(--fam-soft, var(--surface-hi)); color: var(--fam-icone, var(--dim-ink)); }
.fam-plano { --fam-soft: color-mix(in srgb, #2563EB 7%, transparent); --fam-icone: #1D4ED8; }
.fam-radar { --fam-soft: color-mix(in srgb, #7C3AED 7%, transparent); --fam-icone: #6D28D9; }
.fam-toolbox { --fam-soft: color-mix(in srgb, #EA580C 7%, transparent); --fam-icone: #9A3412; }
.fam-conselho { --fam-soft: var(--tom-ouro-8); --fam-icone: #75591F; }
.fam-manual { --fam-soft: var(--tom-ouro-8); --fam-icone: #75591F; }
.fam-mentor { --fam-soft: color-mix(in srgb, #A97155 7%, transparent); --fam-icone: #7C4A2D; }
.fam-diagnostico { --fam-soft: color-mix(in srgb, #16A34A 7%, transparent); --fam-icone: #166534; }
@container tela (max-width: 480px) { .derivado { flex-wrap: wrap; } .derivado .btn { margin-left: 0; width: 100%; justify-content: center; } }

/* A LUZ DA CAPA É DA FAMÍLIA: verde no Raio-X, azul no Plano, roxo no Radar,
   ouro no Parecer. O marinho e o grão são os mesmos; só a luz muda de cor.
   É onde a cor de família entra na superfície de impacto — e só aqui. */
.dossie .hero.capa-rx, .capa.impacto { --luz-azul: color-mix(in srgb, var(--fam, var(--primary)) 50%, transparent); }

/* As capas do Manual, do Parecer e do Mentor (capa.js) no mesmo material. */
.capa.impacto { border-color: transparent; }
.capa.impacto .capa-marca, .capa.impacto .capa-selo, .capa.impacto .capa-pe { color: var(--tom-branco-60); }
.capa.impacto h1, .capa.impacto .kicker { color: #fff; }
.capa.impacto .capa-sub { color: var(--tom-branco-70); }
.capa.impacto .capa-div { background: var(--tom-branco-18); }
.capa.impacto .capa-meta > div span { color: var(--tom-branco-60); }
.capa.impacto .capa-meta > div b, .capa.impacto .capa-meta > div { color: #fff; }
.capa.impacto .capa-faixa.ok { color: #6ee7b7; } .capa.impacto .capa-faixa.ap { color: #fcd34d; } .capa.impacto .capa-faixa.tr { color: #fca5a5; }
.capa.impacto .ca-trilho { stroke: var(--tom-branco-12); } .capa.impacto .ca-marca { stroke: var(--tom-branco-18); }
.capa.impacto .ca-num b, .capa.impacto .ca-num span { color: #fff; }

/* ── A BARRA DO LOADER faz parte do cartão: fio e percentual, abaixo das etapas ── */
.ger-barra { display: flex; align-items: center; gap: var(--e3); width: 100%; max-width: 420px; margin: var(--e5) auto 0; }
.ger-barra .barra { flex: 1; margin: 0; }
.ger-pct { font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; color: var(--faint-ink); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }

/* ── A MIGALHA com partes clicáveis ── */
.crumb-sep { color: var(--faint-ink); opacity: 0.6; }
.crumb-link { font: inherit; background: none; border: 0; padding: 0; color: var(--dim-ink); cursor: pointer; border-radius: 4px; }
.crumb-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   O MANUAL PELO TEMPO DE QUEM EXECUTA (06.09.2026): semana, time, próximas,
   feitas. Os cards são os mesmos dentro do app e no quadro público do time.
   ═══════════════════════════════════════════════════════════════════════════ */
.manual, .equipe { --tom: var(--primary); }
.manual .secao-bloco { margin-bottom: var(--e6); }
.manual .rotulo-secao .chip { align-self: center; }
.mt-faixa .kpi-c { min-width: 0; }

/* O card: cabeçalho com o check, o id, o título e o prazo; o que fazer
   aberto; pastilhas do combinado; e duas dobras. */
.mc-cab { flex-wrap: wrap; }
.mc-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border); background: var(--surface); color: transparent;
  cursor: pointer; padding: 0; transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.mc-check:hover { border-color: var(--ok); color: var(--ok); }
.mc-check:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mc-check[aria-pressed="true"], .mc-check.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.mc-check.estatico { cursor: default; }
.mc-check:disabled { opacity: 0.6; cursor: wait; }
.mc-cab h4 { flex: 1 1 200px; min-width: 0; }
.mc-prazo {
  margin-left: auto; font-family: var(--mono); font-size: var(--f-micro); font-weight: 500; color: var(--dim-ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mc-prazo.tr { color: var(--danger-ink); font-weight: 600; }
.mc.atrasada { border-left-color: var(--danger); }
.mc.feita { border-left-color: var(--ok); }
.mc.feita .mc-cab h4 { color: var(--dim-ink); text-decoration: line-through; text-decoration-color: var(--border); }
p.mc-fazer { margin: 0; padding: var(--e4) var(--e5) var(--e3); font-size: var(--f-corpo); line-height: 1.65; color: var(--ink); }
.mc-meta { display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0 var(--e5) var(--e4); }
.mc-chip {
  display: inline-flex; align-items: center; gap: var(--e1); padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  background: var(--surface-hi); color: var(--dim-ink); font-size: var(--f-apoio); font-weight: 500; line-height: 1.4;
}
.mc-chip.ok { background: var(--tom-ok-8); color: var(--ok-ink); }
.mc-dobra { border-top: 1px solid var(--border); background: var(--surface-sutil); }
.mc-dobra > summary {
  display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e5); min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--body); font-weight: 500; font-size: var(--f-apoio); color: var(--dim-ink);
}
.mc-dobra > summary::-webkit-details-marker { display: none; }
.mc-dobra > summary:focus-visible { outline: 2px solid var(--tom); outline-offset: -2px; }
.mc-seta { margin-left: auto; color: var(--faint-ink); display: flex; transition: transform var(--t-medio) var(--curva); }
details[open] > summary .mc-seta { transform: rotate(90deg); }
.mc-dobra .mc-grade { border-top: 0; }
.mc-dobra.mc-porque > p { margin: 0; padding: 0 var(--e5) var(--e4); font-size: var(--f-apoio); color: var(--prosa); line-height: 1.65; }
.mc-acoes { padding: var(--e3) var(--e5); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

/* A DOBRA DE SEÇÃO: próximas por fase, feitas, alertas. */
.mt-dobra {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--e3);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.mt-dobra > summary {
  display: flex; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); min-height: 44px; cursor: pointer; list-style: none;
}
.mt-dobra > summary::-webkit-details-marker { display: none; }
.mt-dobra > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mt-dobra-txt { display: flex; flex-direction: column; gap: var(--e0); min-width: 0; }
.mt-dobra-txt b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; }
.mt-dobra-txt i { font-style: normal; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.5; }
.mt-dobra-corpo { padding: var(--e3) var(--e5) var(--e5); border-top: 1px solid var(--border); background: var(--surface-sutil); }
.mt-dobra-corpo .mc:last-child { margin-bottom: 0; }
.mt-dobra-corpo .mt-reuniao { margin-top: var(--e4); }

/* O contexto em três linhas, com "ler mais". */
.mt-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--e2); }
.mt-lermais {
  font: inherit; font-size: var(--f-apoio); font-weight: 600; color: var(--primary); background: none; border: 0; padding: 0;
  cursor: pointer; margin-bottom: var(--e5); min-height: 44px;
}
.mt-lermais:hover { text-decoration: underline; text-underline-offset: 3px; }

/* O BLOCO DO TIME: link, passe e WhatsApp. Cartão comum, com a luz do Continuar. */
.mt-time {
  display: flex; flex-direction: column; gap: var(--e4); padding: var(--e5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.mt-time-txt b { display: block; font-family: var(--brand); font-size: var(--f-leitura); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--e1); }
.mt-time-txt p { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.mt-time > .btn { align-self: flex-start; }
.mt-time-link { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.mt-time-link input {
  flex: 1 1 240px; min-width: 0; height: 40px; padding: 0 var(--e3); border: 1px solid var(--border); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--f-apoio); color: var(--dim-ink); background: var(--surface-sutil);
}
.mt-time-passe { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.mt-time-passe span { font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); }
.mt-time-passe b { font-family: var(--mono); font-size: var(--f-secao); font-weight: 600; letter-spacing: 0.18em; color: var(--ink); }
.mt-time-passe i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); margin-left: auto; }

/* A SEMANA É UMA COLUNA, EM QUALQUER LARGURA (auditoria do Manual, 01.10.2026).
   No celular ela era um carrossel com encaixe: o primeiro cartão ficava
   estreito e o segundo aparecia cortado à direita, justamente no aparelho em
   que o time trabalha. Agora é uma coluna, com o "Faça agora" em destaque e o
   resto em "Depois desta". Vale para o Manual e para o quadro do time. */
.mt-semana { display: flex; flex-direction: column; gap: var(--e3); }
.mt-semana .mc { margin-bottom: 0; }
/* Na fonte do corpo, e não mono em caixa alta: é rótulo de grupo dentro da
   seção, e mono + caixa alta é reservado a olho de seção e selo. */
.mt-agora-r, .mt-depois-r { display: flex; align-items: center; gap: var(--e1); font-size: var(--f-apoio); font-weight: 600; }
.mt-agora-r { color: var(--primary); }
.mt-agora-r span { color: var(--faint-ink); font-weight: 500; }
.mt-depois-r { color: var(--faint-ink); margin-top: var(--e3); }
.mc.agora { border-left-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-line); }
.mc.agora .mc-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
/* Sem hifenização dentro do cartão: "respos-tas" no meio de uma instrução
   atrapalha a leitura de quem executa. O documento continua com a dele. */
.mc, .mc * { hyphens: manual; -webkit-hyphens: manual; }

/* O FECHAMENTO DO MANUAL: a próxima tática, o time e o Plano. */
.mt-fim { display: flex; flex-direction: column; gap: var(--e3); }
.mt-fim-t { margin: 0; font-size: var(--f-corpo); color: var(--dim-ink); }
.mt-fim-t b { color: var(--ink); font-weight: 600; }
.mt-fim-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* No papel não há clique: sem setas de sanfona (o "Como conferir" vira
   subtítulo, aberto pela impressão) e sem os botões de agir. O círculo de
   concluir fica, porque no papel ele é a caixinha do checklist. */
@media print {
  .manual .mc-seta, .equipe .mc-seta, .manual .mt-fim, .manual .mc-acoes { display: none !important; }
  .manual details > summary, .equipe details > summary { cursor: default; list-style: none; }
}
html.modo-papel .manual .mc-seta, html.modo-papel .manual .mt-fim, html.modo-papel .manual .mc-acoes { display: none !important; }

@container tela (max-width: 640px) {
  .mc-prazo { margin-left: 0; flex-basis: 100%; }
  /* A CAPA DO MANUAL NO CELULAR: o "90" vira selo e as duas ações ficam lado
     a lado, para a primeira tática aparecer ainda na primeira tela. */
  .dossie.manual .capa-dia { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e1) var(--e2); min-width: 0; }
  .dossie.manual .capa-dia b { font-size: 40px; line-height: 1; }
  .dossie.manual .capa-dia span { margin-top: 0; }
  .dossie.manual .capa-dia-barra { flex-basis: 100%; width: 100%; margin-top: var(--e1); }
  .dossie.manual .hero-acoes { flex-direction: row; flex-wrap: wrap; }
  .dossie.manual .hero-acoes .btn { flex: 1 1 140px; }
  /* A empresa já está no título e a data não é o que se procura aqui: a linha
     sai do celular, e o título encolhe para a semana subir. */
  .dossie.manual .hero-meta { display: none; }
  .dossie.manual .h1-frase { font-size: var(--f-tela); }
  /* Os três números do resumo numa linha só: empilhados, eles empurravam a
     primeira tática para a segunda tela. */
  .dossie.manual .mt-faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dossie.manual .mt-faixa .kpi-c { padding: var(--e3); border-right: 1px solid var(--border); border-bottom: 0; }
  .dossie.manual .mt-faixa .kpi-c:last-child { border-right: 0; }
  .dossie.manual .mt-faixa .kpi-n { font-size: var(--f-secao); }
  .dossie.manual .mt-faixa .kpi-a { font-size: var(--f-micro); margin-top: var(--e1); }
  .mt-time-passe i { margin-left: 0; flex-basis: 100%; }
}

/* O QUADRO PÚBLICO DO TIME (/equipe/:id). */
.publico.equipe { max-width: 760px; }
/* O aviso de que o plano mudou: primeira coisa depois da barra, porque muda o
   sentido de tudo que vem abaixo dela. */
.eq-mudou { margin-top: var(--e4); padding: var(--e3) var(--e4); text-align: left; }

/* Tática repetida na proposta de ajuste: mesmo peso do bloco de perda de
   progresso, porque as duas coisas pedem a mesma decisão, descartar e refazer. */
.ajc-repetida { display: flex; gap: var(--e3); margin: var(--e4) 0; padding: var(--e4); border: 1px solid var(--tom-warn-25); background: var(--tom-warn-8); border-radius: var(--r); }
.ajc-repetida svg { flex: none; color: var(--warn-ink); margin-top: 2px; }
.ajc-repetida b { display: block; font-size: var(--f-corpo); color: var(--warn-ink); }
.ajc-repetida p { margin: var(--e1) 0 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.55; }
.ajc-repetida ul { margin: var(--e2) 0 0; padding-left: var(--e4); font-size: var(--f-apoio); color: var(--prosa); }
.eq-cab h1 { margin-bottom: var(--e2); }
.eq-cab p b { color: var(--ink); }
.eq-barra { height: 6px; border-radius: 3px; background: var(--surface-hi); overflow: hidden; margin: var(--e3) 0 var(--e4); }
.eq-barra i { display: block; height: 100%; background: var(--ok); transition: width var(--t-lento) var(--curva); }
.eq-nome { margin-top: var(--e3); }
.eq-sec { margin-top: var(--e5); }
.equipe .rotulo-secao { margin: var(--e5) 0 var(--e3); }
.eq-pe { margin: var(--e6) 0 0; text-align: center; }

/* ── COMO FAZER AS CONTAS: ficha com lacunas (06.09.2026) ── */
.contas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.contas-col { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--e4) var(--e5); display: flex; flex-direction: column; gap: var(--e3); }
.contas-h { display: flex; align-items: center; gap: var(--e2); font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.contas-h .ic, .contas-h svg { color: var(--primary); }
.contas-lead { margin: 0; font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.6; }
.contas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.contas-lista li { position: relative; padding-left: var(--e4); font-size: var(--f-apoio); line-height: 1.65; color: var(--prosa); }
.contas-lista li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong, var(--faint-ink)); }
.contas-lista li.contas-sub { padding-left: 0; margin-top: var(--e2); font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); }
.contas-lista li.contas-sub::before { display: none; }
.contas-lista li.contas-sub:first-child { margin-top: 0; }
.lacuna { display: inline-block; vertical-align: baseline; width: 4.5ch; height: 1em; margin: 0 var(--e1); border-bottom: 1.5px solid var(--ink); border-radius: 1px; }
.contas-nota { margin: 0; padding-top: var(--e3); border-top: 1px dashed var(--border); font-size: var(--f-micro); color: var(--faint-ink); line-height: 1.55; }

/* A ÂNCORA: o bloco da decisão pisca duas vezes quando a pessoa chega por
   um atalho do Conselho, para saber onde caiu. */
[data-decisao] { scroll-margin-top: 96px; border-radius: var(--r-md); }
.ancora-destaque { animation: ancora-pisca 1.2s var(--curva) 2; }
@keyframes ancora-pisca { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--tom-primario-25); } }
@media (prefers-reduced-motion: reduce) { .ancora-destaque { animation: none; } }

/* ── UTILITÁRIOS QUE ESTAVAM INLINE (06.09.2026) ── */
.espaco-cima { margin-top: var(--e4); }
.bib-corpo { padding: var(--e4); }

/* ═══════════════════════════════════════════════════════════════════════════
   A COLUNA DE APOIO SAI NO CELULAR (06.09.2026)

   Sete colunas num telefone de 375px viram uma tabela de 760px rolando de
   lado: ela cabe na tela porque `.tabela-wrap` rola, e é ilegível assim
   mesmo. `col-op` marca a coluna que responde a uma pergunta de apoio — a
   data do último acesso, o número de tentativas, o tempo médio — e some
   abaixo de 640px. O que identifica a linha, o que diz o estado dela e o
   que age nela nunca é marcado, então nenhuma tabela perde a resposta que
   levou a pessoa até ela.
   ═══════════════════════════════════════════════════════════════════════════ */
@container tela (max-width: 640px) {
  .col-op { display: none; }
  .tabela-wrap table { font-size: var(--f-apoio); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A ESPINHA DO ADMIN (06.09.2026): busca global, hub da conta, ação em massa,
   catálogo, editor de motores e o modo "ver como o cliente".
   ═══════════════════════════════════════════════════════════════════════════ */
.adm-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.adm-topo .sub-tela { margin-bottom: 0; }
.adm-busca { position: relative; flex: 0 1 380px; min-width: 240px; }
.adm-busca .adm-campo { width: 100%; min-width: 0; }
.adm-busca-res {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + var(--e1));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-hover);
  max-height: 60vh; overflow: auto; padding: var(--e2);
}
.adm-busca-grupo + .adm-busca-grupo { border-top: 1px solid var(--border); margin-top: var(--e2); padding-top: var(--e2); }
.adm-busca-t { display: block; font-family: var(--mono); font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-ink); padding: var(--e1) var(--e2); }
.adm-busca-item { display: flex; align-items: center; gap: var(--e2); width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--r-xs); padding: var(--e2); cursor: pointer; min-height: 36px; }
.adm-busca-item:hover, .adm-busca-item:focus-visible { background: var(--surface-hi); outline: none; }
.adm-busca-item span { display: flex; flex-direction: column; min-width: 0; }
.adm-busca-item b { font-size: var(--f-apoio); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-busca-item i { font-style: normal; font-size: var(--f-micro); color: var(--faint-ink); }
.adm-busca-item:disabled { opacity: 0.5; cursor: default; }

.adm-ferramentas { margin-bottom: var(--e4); }
.adm-ferramentas .adm-campo { flex: 1 1 220px; min-width: 160px; }
.adm-select { flex: 0 1 200px; min-width: 150px; }
.adm-textarea { height: auto; min-height: 96px; padding: var(--e2) var(--e3); font-family: var(--mono); font-size: var(--f-micro); line-height: 1.5; width: 100%; }
.adm-dobra { position: relative; }
.adm-dobra > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--e2); cursor: pointer; }
.adm-dobra > summary::-webkit-details-marker { display: none; }
.adm-dobra-corpo { margin-top: var(--e3); padding: var(--e4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-sutil); display: flex; flex-direction: column; gap: var(--e3); flex-basis: 100%; }
.adm-paginas { display: flex; align-items: center; justify-content: center; gap: var(--e4); margin-top: var(--e4); }
.adm-col-x { width: 44px; }
/* 22px de caixa dentro de 44px de célula: a marca fica legível e o alvo, na
   régua do celular, sem engordar a coluna inteira. */
.adm-col-x input { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); cursor: pointer; }
/* ── "PRECISA DA SUA ATENÇÃO" (01.10.2026) ──────────────────────────────────
   Primeira coisa do Painel. Risco à frente de aviso, cada linha com a ação
   escrita no botão. Vazia, é uma linha só, verde, dizendo que está tudo em dia. */
.adm-atencao.vazia { display: flex; align-items: center; gap: var(--e3); color: var(--ok-ink); }
.adm-atencao.vazia b { color: var(--ink); }
.adm-atencao-l { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e2); }
.adm-atencao-l li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e3);
  padding: var(--e3); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: var(--r);
}
.adm-atencao-l li.t-risco { border-left-color: var(--danger); }
.adm-at-ic { display: flex; color: var(--warn-ink); }
.adm-atencao-l li.t-risco .adm-at-ic { color: var(--danger-ink); }
.adm-at-txt { display: flex; flex-direction: column; gap: var(--e0); min-width: 0; }
.adm-at-txt b { font-weight: 600; color: var(--ink); }
.adm-at-txt span { font-size: var(--f-apoio); color: var(--dim-ink); line-height: 1.5; }
@container tela (max-width: 560px) {
  .adm-atencao-l li { grid-template-columns: auto minmax(0, 1fr); }
  .adm-atencao-l li .btn { grid-column: 2; justify-self: start; }
}

/* ── GERAÇÕES: o erro com espaço, e cartão no celular (01.10.2026) ──────── */
.adm-ger-erro { min-width: 28ch; max-width: 42ch; }
.adm-ger-erro span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-ger-quando { white-space: nowrap; }
@container tela (max-width: 640px) {
  /* Cada geração vira um cartão: empresa e estado em cima, motor e quando no
     meio, o erro inteiro, e as ações embaixo. A tabela de sete colunas era
     ilegível justamente numa falha. */
  .adm-ger, .adm-ger tbody { display: block; width: 100%; }
  .adm-ger tr:first-child { display: none; }
  .adm-ger tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e1) var(--e3);
    padding: var(--e3) var(--e5); border-bottom: 1px solid var(--border);
  }
  .adm-ger td { display: block; padding: 0; border: 0; }
  .adm-ger td.col-op { display: none; }
  .adm-ger td:nth-child(1) { grid-column: 1; }
  .adm-ger td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .adm-ger td:nth-child(2), .adm-ger td:nth-child(5) { grid-column: 1 / -1; }
  .adm-ger td.adm-ger-erro { grid-column: 1 / -1; max-width: none; min-width: 0; }
  .adm-ger td.adm-ger-erro span { -webkit-line-clamp: 4; }
  .adm-ger td:last-child { grid-column: 1 / -1; text-align: left; }
}

/* ── CUSTOS: número não quebra entre o símbolo e o valor (01.10.2026) ────── */
.adm-numeros td.mono, .adm-numeros th { white-space: nowrap; }
.adm-numeros td.mono { text-align: right; font-variant-numeric: tabular-nums; }

/* ── A LICENÇA NO CELULAR (01.10.2026) ──────────────────────────────────────
   O texto da licença dividia a linha com cinco botões e ficava com largura
   quase zero: a chave saía uma letra por linha. No celular, o texto ocupa a
   largura toda e as ações viram uma grade de dois. */
@container tela (max-width: 560px) {
  .adm-lic { flex-direction: column; align-items: stretch; gap: var(--e3); }
  .adm-lic .t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adm-lic-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .adm-lic-acoes .btn { width: 100%; }
  #nova-lic { flex-direction: column; align-items: stretch; }
  #nova-lic .campo, #nova-lic .adm-flex-160 { width: 100%; }
}

.adm-copiar { margin-left: var(--e2); min-height: 28px; padding: 0 var(--e2); font-size: var(--f-micro); vertical-align: middle; }
.adm-lista { margin: var(--e2) 0 var(--e3); padding-left: 20px; }
.adm-lista li { margin-bottom: var(--e1); }
.tabela-wrap tr.sel td { background: var(--tom-primario-8); }

/* A BARRA DA AÇÃO EM MASSA: aparece ao marcar, some ao limpar. */
.adm-lote { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); margin-bottom: var(--e4); border: 1px solid var(--primary-line); border-radius: var(--r); background: var(--primary-soft); }
.adm-lote b { font-size: var(--f-apoio); }
.adm-lote-cred { display: inline-flex; align-items: center; gap: var(--e2); }
.adm-lote .adm-campo.adm-col-n { flex: 0 0 auto; min-width: 0; width: 80px; }
.btn.d { color: var(--danger-ink); border-color: var(--tom-danger-25); }
.btn.p.d { background: var(--danger); border-color: var(--danger); color: #fff; }

/* O HUB DA CONTA */
.adm-hub-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4); }
.adm-hub-nome { font-size: var(--f-secao); font-weight: 600; letter-spacing: -0.02em; margin: var(--e3) 0 0; }
.adm-hub-cab .sub-tela { margin: var(--e1) 0 0; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.adm-abas .chip { margin-left: var(--e2); }

/* CATÁLOGO */
.adm-preco { width: 140px; min-width: 0; flex: 0 0 auto; font-family: var(--mono); text-align: right; }

/* EDITOR DE MOTORES */
.mot-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--e3); }
.mot-cartao { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e4); background: var(--surface); display: flex; flex-direction: column; gap: var(--e3); }
.mot-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; }
.mot-cab b { font-family: var(--brand); font-size: var(--f-corpo); font-weight: 600; }
.mot-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e3); }
.mot-campos .campo:first-child { grid-column: 1 / -1; }
.mot-campos label { font-size: var(--f-micro); }
.mot-campos input { width: 100%; }
.mot-avisos { list-style: none; margin: 0; padding: var(--e3); border-radius: var(--r-xs); background: var(--tom-warn-12); color: var(--warn-ink); font-size: var(--f-micro); line-height: 1.5; display: flex; flex-direction: column; gap: var(--e1); }
.mot-pe { margin-top: auto; }

/* O MODO LEITURA: a faixa que diz "isto não é a sua conta". */
/* A FAIXA NÃO ROLA PARA FORA. Era `static`: numa Biblioteca longa, o lembrete
   de só-leitura e o botão de sair iam embora com a página. Fica presa no topo
   e o cabeçalho, que também é preso, desce a altura dela (`:has` abaixo). */
.como-cliente { position: sticky; top: 0; z-index: 41; min-height: 40px; display: flex; align-items: center; gap: var(--e2); flex-wrap: nowrap; padding: var(--e2) var(--e4); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--warn-ink); font-size: var(--f-apoio); border-bottom: 1px solid var(--warn); }
/* O FUNDO É OPACO (02.10.2026, achado do dono). O âmbar a 12% era só a
   tinta: grudada no topo, a faixa deixava o conteúdo passar por baixo dela
   à vista. O mesmo tom agora vai por cima da superfície. */
.como-cliente b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.como-cliente .btn { margin-left: auto; flex-shrink: 0; }
.main:has(> .como-cliente) > header { top: 40px; }
/* SÓ LEITURA À VISTA (01.10.2026). Os controles que gravam aparecem apagados
   no "ver como"; o clique é barrado e explicado em `app.js`. A lista de
   seletores é a mesma de lá, e precisa andar junto. */
html.ver-como :is([data-renomear], [data-organizar], [data-mentor], [data-derivar], [data-marcar], [data-inicio],
  [data-ajustar], [data-manual], [data-renovar], [data-tbd-renovar], [data-tbd-gerar], [data-avalia-enviar]) {
  opacity: 0.45; cursor: not-allowed;
}
/* A FAIXA DA MANUTENÇÃO (01.10.2026). Larga, acima do cabeçalho, como a do
   "ver como", e sem cantos: é estado da plataforma, não aviso de uma tela. */
.faixa-manutencao {
  display: flex; align-items: flex-start; gap: var(--e2); margin: 0; border-radius: 0;
  border-width: 0 0 1px; padding: var(--e2) var(--e4); line-height: 1.55;
}
.faixa-manutencao .ic { flex-shrink: 0; margin-top: 3px; }

.adm-modal { max-width: 520px; }
.adm-modal .acoes { display: flex; justify-content: flex-end; gap: var(--e2); margin-top: var(--e4); }

@container tela (max-width: 640px) {
  .adm-topo { flex-direction: column; }
  .adm-busca { flex-basis: auto; width: 100%; }
  .mot-campos { grid-template-columns: 1fr; }
  .adm-hub-cab .adm-linha { width: 100%; }
}

/* ── O QUE ESTAVA COLADO NA VERTICAL (06.09.2026), medido em 375 e 768 ── */
/* O vídeo do modal de compra encostava na oferta: a fachada só tinha margem embaixo. */
.modal-corpo .video-facha, .compra-itens + .video-facha { margin-top: var(--e5); }
/* Os rascunhos do formulário eram cartões grudados um no outro. */
.rasc + .rasc { margin-top: var(--e2); }
/* No Painel do admin, a faixa de números vinha rente ao cartão de cima. */
.caixa + .faixa-kpi { margin-top: var(--e4); }
/* A lista de perguntas frequentes: os itens são divididos por fio, mas o fio
   sem respiro lia como um bloco só. */
.faq-item[open] { padding-bottom: var(--e2); }

/* O topo do admin respira antes do conteúdo em qualquer largura: quando a
   busca quebra para baixo do título, era ela que encostava no primeiro cartão. */
.adm-topo { margin-bottom: var(--e5); }

/* Selo de pendências: neutro por padrão, vermelho quando há item para agora. */
.nav button .pt.urg, .mc-pt.urg { background: var(--danger); color: #fff; }
/* No escuro, a opção escolhida segue o primário: branca, com tinta marinho. */
:is(html[data-admin], html[data-tema="escuro"]) .opcao.sel,
:is(html[data-admin], html[data-tema="escuro"]) .modo.sel,
:is(html[data-admin], html[data-tema="escuro"]) .modelo.sel { background: #fff; color: var(--navy); }

/* ── A FICHA DA EMPRESA POR LINK (07.09.2026) ─────────────────────────────
   A página pública usa as classes do formulário: são os mesmos campos. Aqui
   só o que a ficha tem a mais: o cabeçalho com o nome de quem preenche, a
   linha discreta na etapa 1 do formulário e as fichas na tela de retomar. */
.publico.ficha { max-width: 760px; }
.ficha-cab { margin-bottom: var(--e5); }
.ficha-titulo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.ficha-titulo h1 { font-size: var(--f-tela); line-height: 1.2; margin: 0; }
.ficha-titulo .chip { margin-left: 0; }
.ficha-nome { max-width: 360px; }
.form-ficha-linha { font-size: var(--f-apoio); color: var(--faint-ink); margin: 0 0 var(--e5); }
.form-ficha-linha .link-info { margin: 0; font-size: inherit; }
.retomar-fichas { margin-top: var(--e5); text-align: left; display: flex; flex-direction: column; gap: var(--e2); }
.retomar-fichas .ra-titulo { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e3); }
.retomar-fichas .ra-titulo:first-child { margin-top: 0; }
.ficha-linha { flex-wrap: wrap; }
.ficha-linha .rasc-info { min-width: 180px; }
.ficha-rotulo { font-weight: 400; color: var(--dim-ink); }
.ficha-modal .mt-time-link { margin: var(--e4) 0 var(--e3); }
.ficha-modal .mt-time-passe { margin-bottom: var(--e4); }
.ficha-modal .campo + .campo { margin-top: var(--e3); }
.ficha-modal .campo .op { font-weight: 400; color: var(--faint-ink); }

/* A porta das páginas públicas: passe, link vencido, ficha enviada. Mesma
   composição do login (ladrilho, selo, título, texto curto), centrada na
   tela, porque quem chega por link precisa saber onde entrou antes de agir. */
.publico.centro { max-width: none; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: var(--e5); }
.cartao-publico.porta { position: relative; width: 100%; max-width: 440px; padding: var(--e6) var(--e6) var(--e5); text-align: center; border: 0; overflow: hidden; box-shadow: 0 30px 70px -20px var(--tom-sombra-60); }
.cartao-publico.porta::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--impacto-fundo); }
.cartao-publico.porta .marca { justify-content: center; margin-bottom: var(--e2); }
.cartao-publico.porta h1 { font-size: var(--f-secao); letter-spacing: -0.02em; margin-bottom: var(--e2); text-wrap: balance; }
.cartao-publico.porta p { font-size: var(--f-apoio); line-height: 1.55; max-width: 38ch; margin: 0 auto var(--e2); }
.cartao-publico.porta .campo { text-align: left; margin-top: var(--e5); }
.cartao-publico.porta .aviso { margin-top: var(--e4); padding: var(--e3) var(--e4); text-align: left; }
.cartao-publico.porta .acoes { margin-top: var(--e4); }
.cartao-publico.porta .acoes .btn { width: 100%; justify-content: center; }
.cartao-publico.porta .ajuda { margin-top: var(--e3); }
.porta-ladrilho { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; margin-bottom: var(--e3); color: #fff; background: var(--impacto-fundo); box-shadow: 0 10px 22px -8px var(--tom-primario-50); }
.porta-ladrilho.morno { background: var(--surface-hi); color: var(--dim-ink); box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  DELFOS — a memória do portfólio, que é uma conversa (ver `telas/delfos.js`).
 *
 *  A mesa vive sobre o material de impacto, com a luz tingida de ouro: é do
 *  grupo do Conselho no registro, e é o "cérebro" da plataforma na palavra do
 *  dono. O fio da conversa fica sobre papel, porque é lugar de leitura longa e
 *  de voltar depois — o marinho é para o momento da pergunta, não para o
 *  arquivo.
 *
 *  As cores de família aqui são as versões CLARAS, feitas para ler em fundo
 *  escuro; sobre papel (o fio, o modal) elas voltam a ser a tinta da família.
 *
 *  Movimento: nenhum em repouso. A carta que vira e o LED que acende só
 *  existem enquanto o motor lê — e a resposta entra uma vez, de 400ms.
 * ═══════════════════════════════════════════════════════════════════════════ */
.delfos { --fam: var(--gold); --fam-icone: #75591F; }

/* ── as empresas, como abas ─────────────────────────────────────────────── */
.dl-tiras { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.dl-tira {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 40px; padding: 0 var(--e4);
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--f-apoio); cursor: pointer;
  transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.dl-tira b, .dl-tira { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-tira i {
  font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gold) 20%, transparent); color: #75591F;
  font-family: var(--mono); font-size: var(--f-micro);
}
.dl-tira:hover { border-color: var(--gold); }
.dl-tira.on { background: var(--impacto-fundo); border-color: transparent; color: #fff; }
.dl-tira.on i { background: var(--tom-branco-18); color: #fff; }
.dl-tira:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── a mesa: onde o Delfos fala e onde se pergunta ──────────────────────── */
.dl-mesa {
  padding: var(--e5); border-radius: var(--r-lg); margin-bottom: var(--e5);
  --luz-azul: color-mix(in srgb, var(--gold) 45%, transparent);
}
.dl-mesa-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding-bottom: var(--e4); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--tom-branco-12);
}
.dl-mesa-quem { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
/* Sem o limite, "Consultoria XYZ de Marketing e Estratégia Empresarial Ltda"
   quebrava em três linhas de 27px e desalinhava o cabeçalho contra a esfera,
   que não encolhe. Duas linhas e reticências. */
.dl-mesa-quem h2 {
  margin: 0; font-size: var(--f-heroi); color: #fff; letter-spacing: var(--tr-tight);
  max-width: 22ch; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dl-et {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tom-branco-60);
}
.dl-et svg { flex-shrink: 0; }
.dl-conf-lista li { display: inline-flex; align-items: center; gap: 6px; }
.dl-selo { margin: 0; display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--f-micro); color: var(--tom-branco-70); }
.dl-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--tom-branco-25); flex-shrink: 0; }
.dl-selo.ok .dl-ponto { background: #e2c281; box-shadow: 0 0 6px #e2c281; }
.dl-selo.zero .dl-ponto, .dl-selo.fora .dl-ponto { background: #fde68a; }
.dl-selo.ok { color: #e2c281; }
.dl-selo.zero, .dl-selo.fora { color: #fde68a; }

/* ── o rosto: a esfera que reage ao que está sendo dito ─────────────────── */
.dl-rosto { display: flex; flex-direction: column; align-items: center; gap: var(--e2); flex-shrink: 0; }
/* O TAMANHO DA ESFERA. Encolheu de 168 para 130px para o olho pousar no nome
   antes dela; em 19.09.2026, vendo a galáxia da tela do Codex, o dono pediu a
   nossa nébula maior (260px no computador). O nome cresceu junto (--f-heroi)
   para continuar sendo a primeira coisa lida. */
/* A MOLDURA DA ESFERA É UM BOTÃO, e ela só parece um quando faz alguma
   coisa. Desabilitada não muda de aparência: opacidade de botão morto num
   objeto que continua desenhando seria confundida com falha. */
.dl-esfera-btn {
  padding: 0; border: 0; background: none; border-radius: 50%; display: block;
  cursor: default; line-height: 0;
}
.dl-esfera-btn:not(:disabled) { cursor: pointer; }
.dl-esfera-btn:not(:disabled):hover { filter: brightness(1.12); }
/* O anel de foco é redondo por hábito, e aqui não há redondo nenhum: a nébula
   não tem borda. O foco vira um retângulo de cantos macios em volta da área. */
.dl-esfera-btn:focus-visible { outline: 2px solid #e2c281; outline-offset: 2px; border-radius: var(--r-md); }
.dl-esfera { width: 260px; height: 260px; display: block; }
.dl-rosto-est {
  margin: 0; min-height: 1.2em; text-align: center;
  font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tom-branco-70);
}
.dl-rosto-est:empty { min-height: 0; }

/* ── a lembrança: o que ele diz antes de você perguntar ─────────────────── */
.dl-corpo { display: flex; flex-direction: column; gap: var(--e5); }
.dl-lembranca { display: flex; flex-direction: column; gap: var(--e3); }
.dl-mem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); max-width: 78ch; }
.dl-mem li { display: flex; align-items: flex-start; gap: var(--e3); color: #fff; font-size: var(--f-leitura); line-height: 1.55; }
/* A linha mais urgente é a única que abre à vista, e ela puxa o olho: é o
   fato que a esfera guarda, e é ele que faz a pessoa saber o que perguntar. */
.dl-lembranca > .dl-mem:first-of-type li { font-size: var(--f-secao); line-height: 1.45; }
.dl-lembranca > .dl-mem:first-of-type li .dl-lg { margin-top: 11px; }
.dl-mem li .dl-lg { margin-top: 8px; }
.dl-mem li b { font-weight: 600; }
.dl-mem li.fraca { color: var(--tom-branco-60); }
.dl-mem li.atencao { color: #fde68a; }
.dl-mem li.ok { color: #bbf7d0; }
.dl-mem li.vazia span { display: block; width: 100%; height: 1em; border-radius: var(--r); background: var(--tom-branco-8); }
.dl-mem li.vazia:nth-child(2) span { width: 76%; }
.dl-mem li.vazia:nth-child(3) span { width: 88%; }
.dl-mem li.vazia:nth-child(4) span { width: 62%; }
/* ═══════════════════════════════════════════════════════════════════════
   O BOTÃO QUE ABRE O RESTO DA MEMÓRIA.

   Ele guarda a maior parte do que o Delfos sabe, e estava com o peso de um
   rodapé: pílula vazada sem fundo, tinta a 70%, e uma seta que era o caractere
   `⌄` — glifo que nenhuma fonte da casa tem, resolvido pelo navegador numa
   fonte de sistema, fino e fora da linha de base. Trocado por ícone de verdade
   (`baixo`, em `icones.js`), que herda o traço dos outros.

   O NÚMERO GANHA PESO. "Eu lembro de mais 2 coisas" é uma frase onde só uma
   palavra informa, e ela estava com a mesma tinta do resto. Em branco e 600 o
   olho lê o quanto antes de ler a frase.

   O fundo a 4% é o mínimo para a pílula existir sobre o marinho sem competir
   com os cartões de pergunta logo abaixo, que são a ação principal do bloco e
   ficam a 8%. Um degrau de fundo é a diferença entre convite e oferta.
   ═══════════════════════════════════════════════════════════════════════ */
.dl-mais {
  /* 44px: é o controle que abre o resto da memória, e no telefone ele precisa
     ser alvo de dedo como os outros. */
  align-self: flex-start; min-height: 44px; padding: 0 var(--e3) 0 var(--e4);
  border: 1px solid var(--tom-branco-18); border-radius: var(--r-pill);
  background: var(--tom-branco-4);
  color: var(--tom-branco-70); font: inherit; font-size: var(--f-apoio); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e2);
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.dl-mais b { color: #fff; font-weight: 600; }
.dl-mais-ch { display: inline-flex; color: var(--tom-branco-50); transition: transform var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
.dl-mais[aria-expanded="true"] .dl-mais-ch { transform: rotate(180deg); }
.dl-mais:hover { background: var(--tom-branco-8); color: #fff; border-color: var(--tom-branco-25); }
.dl-mais:hover .dl-mais-ch { color: #fff; }
.dl-mais:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dl-mais, .dl-mais-ch { transition: none; } }

.dl-fonte-nota { margin: 0; font-size: var(--f-micro); color: var(--tom-branco-50); }
.dl-carregando { margin: 0; font-size: var(--f-apoio); color: var(--tom-branco-60); }

/* O "abrir" que leva ao relatório citado: um link, não um botão de ação. */
.dl-ref {
  border: 0; padding: 0 2px; background: none; font: inherit; font-size: inherit; cursor: pointer;
  color: #e2c281; text-decoration: underline; text-underline-offset: 3px;
}
.dl-ref:hover { color: #fff; }

/* ── a caixa de perguntar ───────────────────────────────────────────────── */
.dl-perguntar { display: flex; flex-direction: column; gap: var(--e2); }
.dl-sugs { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.dl-sug {
  flex: 1 1 260px; min-height: 44px; padding: var(--e3) var(--e3) var(--e3) var(--e4); text-align: left;
  display: flex; align-items: center; gap: var(--e3);
  border: 1px solid var(--tom-branco-18); border-radius: var(--r); background: var(--tom-branco-8);
  color: #fff; font: inherit; font-size: var(--f-corpo); line-height: 1.45; cursor: pointer;
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.dl-sug:hover { background: var(--tom-branco-12); border-color: #e2c281; }
/* O ícone do assunto numa caixinha dourada, e a setinha que diz "leva ao campo". */
.dl-sug-ic {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r);
  background: color-mix(in srgb, #e2c281 16%, transparent); color: #e2c281;
}
.dl-sug-t { flex: 1; min-width: 0; }
.dl-sug-ch { flex: none; display: inline-flex; color: var(--tom-branco-50); transform: rotate(-90deg); transition: color var(--t-rapido) var(--curva); }
.dl-sug:hover .dl-sug-ch { color: #e2c281; }
/* O botão de feito dentro da lembrança: numa linha própria embaixo da frase. */
.dl-mem-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e3); }
.dl-mem-acao .aviso { flex: 1 1 100%; margin: 0; font-size: var(--f-apoio); }
.dl-sug:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* A prévia: as mesmas três perguntas, quando ainda não dá para fazê-las. */
.dl-sugs.previa { list-style: none; margin: 0 0 var(--e3); padding: 0; flex-direction: column; }
.dl-sugs.previa li {
  width: 100%; padding: var(--e3) var(--e4);
  border: 1px dashed var(--tom-branco-18); border-radius: var(--r);
  color: var(--tom-branco-70); font-size: var(--f-apoio); line-height: 1.45;
}
.dl-q {
  width: 100%; resize: vertical; min-height: 84px; padding: var(--e3);
  border-radius: var(--r); border: 1px solid var(--tom-branco-18); background: var(--tom-branco-8);
  color: #fff; font: inherit; font-size: var(--f-corpo); line-height: 1.5;
}
.dl-q::placeholder { color: var(--tom-branco-50); }
.dl-q:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: #fff; box-shadow: none; }
.dl-pe { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e2); }
/* A escolha de levar o andamento junto. Fica ANTES do botão, porque muda o que
   a consulta considera, e não o que ela custa. */
.dl-andamento { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e3) 0 0;
                font-size: var(--f-apoio); color: var(--tom-branco-70); cursor: pointer; }
/* `width: auto`, porque a regra geral de `input` dá 100% de largura: a caixa
   de marcar ocupava a linha inteira e o texto do rótulo sobrava numa coluna
   de 64px, fora da mesa (auditoria de 16.09.2026). */
.dl-andamento input { margin-top: 3px; flex: none; width: auto; }
.dl-andamento i { display: block; font-style: normal; font-size: var(--f-micro); color: var(--tom-branco-50); margin-top: var(--e0); }
.dl-pe .btn { margin-left: auto; }
.dl-contador { font-family: var(--mono); font-size: var(--f-micro); color: var(--tom-branco-50); }
/* O que sobrou do mês, dito onde a pessoa está olhando: no pé da resposta.
   O selo do cabeçalho ja pode ter saido da tela quando ela termina de ler. */
.dl-resta { font-size: var(--f-micro); color: var(--tom-branco-60); }
.dl-contador.perto { color: #fde68a; }

/* O microfone e o "ouvir": mesma pílula, um para falar e outro para escutar.
   Quando estão ligados eles ficam em ouro cheio — a cor de quem está no ar. */
.dl-mic, .dl-ouvir {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--e3);
  border: 1px solid var(--tom-branco-25); border-radius: var(--r-pill); background: var(--tom-branco-12);
  color: #fff; font: inherit; font-size: var(--f-micro); font-weight: 600; cursor: pointer;
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.dl-mic:hover:not(:disabled), .dl-ouvir:hover:not(:disabled) { background: var(--tom-branco-18); border-color: #e2c281; }
.dl-mic[aria-pressed="true"], .dl-ouvir[aria-pressed="true"] { background: #e2c281; border-color: #e2c281; color: var(--navy); }
.dl-mic:disabled { opacity: 0.6; cursor: progress; }
.dl-mic-txt { margin: var(--e2) 0 0; min-height: 1.2em; font-size: var(--f-micro); color: var(--tom-branco-60); }
.dl-mic-txt:empty { display: none; }
/* No fio, sobre papel, a pílula é de papel. */
.dl-turno-pe { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.dl-turno-pe .dl-ouvir { background: var(--surface); border-color: var(--border); color: var(--ink); }
.dl-turno-pe .dl-ouvir:hover:not(:disabled) { background: var(--surface-hi); border-color: var(--gold); }
.dl-turno-pe .dl-ouvir[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }
#dl-msg:empty { display: none; }
#dl-msg .aviso { margin-top: var(--e3); }

/* Falta o Raio-X ou o Plano: a caixa inteira vira a explicação e o caminho. */
.dl-trava { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e4); border: 1px dashed var(--tom-branco-25); border-radius: var(--r-md); }
.dl-trava-t { margin: 0; display: flex; align-items: center; gap: var(--e2); color: #fde68a; font-size: var(--f-corpo); font-weight: 600; }
.dl-trava p { margin: 0; color: var(--tom-branco-70); font-size: var(--f-apoio); line-height: 1.55; max-width: 60ch; }
.dl-trava .btn { margin-top: var(--e2); }

/* ── o teatro da leitura: as cartas viradas ─────────────────────────────── */
.dl-lendo, .dl-lendo-cab, .dl-lendo-corpo { display: flex; flex-direction: column; gap: var(--e3); }
/* A PERGUNTA É ECO; A RESPOSTA É FALA.
   Isto aqui tinha o mesmo tamanho e a mesma cor do parágrafo da resposta, e o
   resultado era um bloco só onde ninguém achava a emenda (print do dono,
   21.09.2026). Fio, recuo e um tom abaixo: três sinais, nenhum deles texto
   colorido — a cor da família mora no fio, como em toda a casa. */
.dl-lendo-q {
  margin: 0; padding: var(--e1) 0 var(--e1) var(--e4);
  border-left: 2px solid var(--gold);
  font-size: var(--f-corpo); line-height: 1.55;
  color: var(--tom-branco-70);
}
/* NO FIO DA CONVERSA A SUPERFICIE E CLARA (21.09.2026).

   As duas classes acima nasceram no cartao do Delfos, que e escuro, e ali sao
   branco. Levei as duas para dentro do turno sem lembrar disso, e a pergunta
   ficou BRANCO SOBRE BRANCO: o dono viu um bloco alto e vazio com um fio
   dourado do lado, e leu aquilo como texto espremido. Era texto invisivel.

   O rotulo do fio ja resolvia isto por conta propria; agora vale para tudo o
   que o turno mostra. E o teto de medida saiu junto: no cartao ele segurava a
   citacao numa coluna estreita ao lado de uma resposta larga, que e o degrau
   que o dono ja tinha mandado tirar dos relatorios. */
.dl-turno .dl-et { color: var(--dim-ink); }
.dl-turno .dl-lendo-q { color: var(--prosa); }
/* O rótulo da resposta respira depois da citação: sem isto as duas vozes
   continuam coladas, agora por falta de espaço em vez de falta de contraste. */
.dl-et-resposta { margin-top: var(--e2); }
.dl-pista { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-led { width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--tom-branco-18); }
.dl-led.lido { opacity: 0.75; }
.dl-led.raiox.lido { background: #4ade80; }
.dl-led.plano.lido { background: #60a5fa; }
.dl-led.radar.lido { background: #a78bfa; }
.dl-led.toolbox.lido { background: #fb923c; }
.dl-led.conselho.lido { background: #e2c281; }
.dl-led.agora { opacity: 1; background: #fff; box-shadow: 0 0 8px var(--tom-branco-50); }
.dl-carta { min-height: 132px; }
.dl-carta-in {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e4); border: 1px solid var(--tom-branco-18); border-radius: var(--r-md); background: var(--tom-branco-8);
  animation: dl-vira 420ms var(--curva) both;
}
.dl-carta-et { margin: 0; display: flex; align-items: center; gap: var(--e2); font-family: var(--mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tom-branco-70); }
.dl-carta-tx { margin: 0; color: #fff; font-size: var(--f-leitura); line-height: 1.55; max-width: 62ch; }
.dl-carta-pe { margin: 0; font-family: var(--mono); font-size: var(--f-micro); color: var(--tom-branco-50); }
.dl-carta-sem { color: var(--tom-branco-60); }
.dl-carta-resto { align-items: flex-start; }
@keyframes dl-vira {
  from { opacity: 0; transform: perspective(600px) rotateX(-24deg) translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── a resposta ─────────────────────────────────────────────────────────── */
.dl-resposta { display: flex; flex-direction: column; gap: var(--e3); animation: dl-entra 400ms var(--curva) both; }
.dl-resposta-cab, .dl-resposta-corpo { display: flex; flex-direction: column; gap: var(--e3); }
/* O texto ocupa o cartão inteiro, numa coluna só (19.09.2026, pedido do dono):
   com a medida de leitura, a metade direita ficava vazia e parecia outra coluna. */
.dl-resposta-txt p { margin: 0 0 var(--e3); color: #fff; font-size: var(--f-leitura); line-height: 1.7; }
.dl-resposta-txt p:last-child { margin-bottom: 0; }
@keyframes dl-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── o próximo passo, e o "fiz isso" que realimenta a memória ───────────── */
/* Uma coluna: o passo em cima, a ação logo abaixo dele (não ao lado). */
.dl-passo {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-hi); color: var(--ink);
}
.dl-passo p { margin: 0; font-size: var(--f-corpo); line-height: 1.55; }
.dl-passo-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.dl-passo-porque { font-size: var(--f-micro); color: var(--dim-ink); line-height: 1.4; }
.dl-mesa .dl-passo-porque { color: var(--tom-branco-60); }
.dl-passo .aviso { flex: 1 1 100%; margin: 0; }
.dl-passo.feito { opacity: 0.72; }
.dl-feito {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--e3);
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--f-micro); font-weight: 600; cursor: pointer;
}
.dl-feito:hover:not(:disabled) { border-color: var(--gold); }
.dl-feito[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }
.dl-feito:disabled { opacity: 0.6; cursor: progress; }
.dl-mesa .dl-passo { background: var(--tom-branco-8); border-left-color: #e2c281; color: #fff; }
.dl-mesa .dl-feito { background: var(--tom-branco-12); border-color: var(--tom-branco-25); color: #fff; }
.dl-mesa .dl-feito[aria-pressed="true"] { background: #e2c281; border-color: #e2c281; color: var(--navy); }

.dl-fontes { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; font-size: var(--f-micro); }
.dl-fontes > span { color: var(--tom-branco-60); }

/* ── o fio: a conversa desta empresa, sobre papel ───────────────────────── */
.dl-conversa { display: block; }
.dl-fio-et { color: var(--dim-ink); margin-bottom: var(--e3); }
.dl-fio-vazio { padding: var(--e4); border: 1px dashed var(--border); border-radius: var(--r-md); }
.dl-fio-vazio p { margin: 0; display: flex; align-items: center; gap: var(--e2); color: var(--dim-ink); font-size: var(--f-apoio); }
.dl-fio { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.dl-turno { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.dl-turno.aberto { border-color: var(--gold); }
.dl-turno-cab {
  width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3);
  min-height: 52px; padding: var(--e3) var(--e4); border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.dl-turno-cab:hover { background: var(--surface-hi); }
.dl-turno-cab time { font-family: var(--mono); font-size: var(--f-micro); color: var(--dim-ink); flex-shrink: 0; }
.dl-turno-cab b { flex: 1 1 240px; font-size: var(--f-corpo); font-weight: 600; line-height: 1.4; }
/* O CABEÇALHO É UM CONTROLE, E NÃO UM RESUMO (21.09.2026).
   Ele carregava a pergunta cortada em 130 caracteres — que, com a pergunta
   ditada, gastava três linhas sem dizer do que era a consulta. Agora diz o que
   o clique faz. A seta é uma só e gira, como nos outros acordeões da casa. */
.dl-revelar { display: inline-flex; align-items: center; gap: var(--e2); color: var(--dim-ink); font-weight: 500; }
.dl-revelar svg { flex-shrink: 0; transition: transform var(--t-rapido) var(--curva); }
.dl-turno.aberto .dl-revelar svg { transform: rotate(180deg); }
.dl-turno-cab:hover .dl-revelar { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dl-revelar svg { transition: none; } }
.dl-pendente, .dl-ok {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 3px var(--e2); border-radius: var(--r-pill); font-size: var(--f-micro); font-weight: 600;
}
.dl-pendente { background: color-mix(in srgb, var(--gold) 18%, transparent); color: #75591F; }
.dl-ok { background: var(--surface-hi); color: var(--dim-ink); }
.dl-turno-corpo { padding: 0 var(--e4) var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.dl-turno-corpo p { margin: 0; font-size: var(--f-corpo); line-height: 1.7; }
.dl-turno-corpo .dl-fontes > span, .dl-turno-pe { color: var(--dim-ink); font-size: var(--f-micro); }
.dl-turno-corpo .dl-ref { color: var(--gold); }
.dl-turno-corpo .dl-ref:hover { color: var(--ink); }
.dl-turno-corpo .dl-carregando { color: var(--dim-ink); }

/* ── a legenda de família ───────────────────────────────────────────────── */
.dl-lg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tom-branco-25); }
.dl-lg.raiox { background: #4ade80; }
.dl-lg.plano { background: #60a5fa; }
.dl-lg.radar { background: #a78bfa; }
.dl-lg.toolbox { background: #fb923c; }
.dl-lg.conselho { background: #e2c281; }
.dl-lg.delfos { background: #fff; box-shadow: 0 0 0 2px #e2c281; }
/* Sobre papel (modal de confirmação), a legenda é a tinta da família e não a
   versão clara feita para o marinho. */
.dl-modal .dl-lg.raiox { background: #16a34a; }
.dl-modal .dl-lg.plano { background: #2563eb; }
.dl-modal .dl-lg.radar { background: #7c3aed; }
.dl-modal .dl-lg.toolbox { background: #ea580c; }
.dl-modal .dl-lg.conselho { background: var(--gold); }

.dl-conf-q { margin: var(--e3) 0; font-size: var(--f-leitura); line-height: 1.45; color: var(--ink); }
.dl-conf-lista { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.dl-conf-lista li { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-hi); font-size: var(--f-micro); }

@container tela (max-width: 720px) {
  .dl-esfera { width: 180px; height: 180px; }
  .dl-sug { flex-basis: 100%; }
}
/* EMPILHADO ATÉ 640px, e não até 480 (02.10.2026). Entre 481 e 640 a mesa
   insistia nas duas colunas, e a coluna do texto ficava com pouco mais de
   200px ao lado da esfera de 180: o nome da empresa quebrava em dois e a carta
   da leitura dava 24 letras por linha. */
@container tela (max-width: 640px) {
  .dl-mesa-cab { flex-direction: column; align-items: flex-start; }
  .dl-rosto { flex-direction: row; align-self: center; gap: var(--e3); }
}
@container tela (max-width: 480px) {
  .dl-esfera { width: 140px; height: 140px; }
}
/* A NÉBULA NA COLUNA DA DIREITA (19.09.2026). Com a esfera a 260px dentro do
   cabeçalho, ela ditava a altura dele e deixava um vão ao lado do nome, e a
   lembrança (74ch) deixava outro à direita. O dono viu no tablet e pediu sem
   espaço sobrando. O cabeçalho e o corpo viram `contents`, e a mesa é uma
   grade: nome e lembrança (ou a leitura, ou a resposta) na coluna da
   esquerda, o rosto à direita ao lado dos dois, e as perguntas na largura
   toda embaixo. Abaixo de 640px vale o empilhado (ver acima).

   NA LEITURA E NA RESPOSTA, SÓ A CABEÇA FICA AO LADO DA ESFERA (02.10.2026,
   achado do dono). O rótulo e a pergunta cabem na coluna; as cartas e a
   resposta, que são o texto longo, descem para a largura do cartão inteiro.
   Antes moravam na coluna inteira: a 834px a carta tinha 413px, com um vão
   embaixo da esfera; a 540px, 231px. A lembrança continua como estava, e de
   1000px para cima também a leitura e a resposta (ver o bloco seguinte). */
@container tela (min-width: 641px) {
  /* `auto 1fr`: a esfera é mais alta que o nome, e a sobra de altura vai para a
     linha de baixo (a lembrança, ou a pergunta), e não para baixo do nome, onde
     abria um vão entre "3 de 4 consultas" e o fio. */
  .dl-mesa { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: var(--e6); row-gap: var(--e5); }
  .dl-mesa-cab, .dl-mesa .dl-corpo { display: contents; }
  .dl-mesa-quem { grid-column: 1; padding-bottom: var(--e4); border-bottom: 1px solid var(--tom-branco-12); }
  .dl-rosto { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .dl-corpo > * { grid-column: 1; min-width: 0; }
  .dl-corpo > .dl-perguntar { grid-column: 1 / -1; }
}
/* Só na faixa do meio: de 1000px para cima a coluna ao lado da esfera passa de
   650px, e a leitura e a resposta cabem nela. Na largura toda do cartão, a
   resposta daria mais de 130 letras por linha. */
@container tela (min-width: 641px) and (max-width: 999px) {
  .dl-mesa .dl-lendo, .dl-mesa .dl-resposta { display: contents; }
  .dl-mesa .dl-lendo-cab, .dl-mesa .dl-resposta-cab { grid-column: 1; min-width: 0; }
  .dl-mesa .dl-lendo-corpo, .dl-mesa .dl-resposta-corpo { grid-column: 1 / -1; min-width: 0; }
  /* Sem caixa, a resposta não anima: quem entra são as duas metades. */
  .dl-mesa .dl-resposta > * { animation: dl-entra 400ms var(--curva) both; }
}
@container tela (max-width: 520px) {
  .dl-mesa { padding: var(--e4); border-radius: var(--r); }
  .dl-pe .btn { margin-left: 0; width: 100%; justify-content: center; }
  /* Nove empresas empilhadas comiam a primeira tela inteira no telefone: a
     pessoa rolava por nove botões antes de chegar na memória. Uma fita que
     corre de lado cabe em uma linha e continua alcançável com o polegar. */
  .dl-tiras { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--e2); }
  .dl-tira { flex-shrink: 0; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-carta-in, .dl-resposta, .dl-mesa .dl-resposta > * { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A ZONA DE PERIGO DA FICHA DA CONTA (09.09.2026, auditoria do admin)

   Desativar e apagar moravam na mesma faixa do "Ver como o cliente", logo
   abaixo do nome da pessoa. A confirmação forte já existia — o apagar sempre
   pediu o e-mail digitado —, mas confirmação é o segundo freio. O primeiro é
   distância, e não havia nenhuma.

   Vermelho no fio e no resumo, e nada mais: o miolo continua com a tinta da
   casa. Uma seção inteira em vermelho vira decoração e o olho para de vê-la,
   que é o oposto do que ela existe para fazer.
   ═══════════════════════════════════════════════════════════════════════════ */
.adm-perigo { border-left: 3px solid var(--danger); }
.adm-perigo > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--e2); min-height: 44px;
  font-size: var(--f-corpo); font-weight: 600; color: var(--danger-ink);
}
.adm-perigo > summary::-webkit-details-marker { display: none; }
.adm-perigo > summary .ic { color: var(--danger); }
.adm-perigo > summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.adm-perigo[open] > summary { margin-bottom: var(--e2); }

/* ── INDIQUE E GANHE, no perfil ────────────────────────────────────────────
   O link é o objeto principal do bloco, então ele é uma LINHA inteira com o
   botão colado: campo estreito com "copiar" ao lado vira dois controles
   disputando a mesma atenção, e o que a pessoa quer ali é uma coisa só. */
.ind-bloco { margin-bottom: var(--e4); }
/* `wrap` com base de 220px, e NÃO uma consulta de contêiner. Este bloco mora
   na coluna estreita do perfil, que não é um contêiner declarado: a consulta
   mediria a tela inteira e nunca dispararia. Com `flex-basis`, o campo desce
   sozinho para a linha de baixo quando não sobram 220px — que é a largura
   abaixo da qual o link vira "http://localho…", ou seja, deixa de ser um link. */
.ind-link { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; margin: var(--e3) 0; }
.ind-link .campo { flex: 1 1 220px; min-width: 0; font-size: var(--f-apoio); }
.ind-link .btn { flex-shrink: 0; }

/* ── SOBRE O MARINHO A TINTA VIRA BRANCA ──────────────────────────────────
   O bloco nasceu no painel de saldo do perfil, que é material de impacto, e
   herdou as tintas de superfície clara: o texto de apoio saiu cinza-escuro
   sobre marinho e os nomes da lista quase sumiram. É a mesma correção que a
   barra do celular já documenta — o material muda, a tinta muda junto. */
.impacto .ind-bloco { background: transparent; border-color: var(--tom-branco-18); }
.impacto .ind-bloco .sec-t { color: #fff; }
.impacto .ind-bloco .adm-nota { color: var(--tom-branco-70); }
.impacto .ind-bloco .adm-nota b { color: #fff; }
.impacto .ind-nome { color: #fff; }
.impacto .ind-lista li { border-top-color: var(--tom-branco-12); }
.ind-conta { margin-top: var(--e3); }
.ind-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.ind-lista li { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) 0; border-top: 1px solid var(--border); }
.ind-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--f-apoio); }
/* No telefone o link não divide linha com o botão: 375px menos um botão de
   90px deixa o campo mostrando "http://localho…", que não é um link. */
@container tela (max-width: 560px) {
  .ind-link { flex-direction: column; align-items: stretch; }
  .ind-link .btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   O EDITOR DE MOTORES, RECOLHIDO (09.09.2026, auditoria do admin)

   Eram 23 formulários abertos com sete campos cada, e 23 botões idênticos
   escritos "Salvar". Fechado, o cartão continua respondendo a pergunta mais
   comum — qual modelo está no ar — e abrir vira um ato, e não um acidente.
   ═══════════════════════════════════════════════════════════════════════════ */
.mot-barra {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin: var(--e4) 0 var(--e3);
}
.mot-busca { flex: 1 1 240px; margin: 0; }
.mot-busca input { width: 100%; }
.mot-so { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--f-apoio); cursor: pointer; white-space: nowrap; }

.mot-dobra { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.mot-dobra .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A MARCA DE NÃO SALVO fica na DOBRA e não no corpo: ela precisa sobreviver ao
   cartão ser fechado, senão o aviso some justamente quando a pessoa rola para
   longe — que é quando ele passa a servir para alguma coisa. */
.mot-sujo {
  font-size: var(--f-micro); font-weight: 600; color: var(--warn-ink);
  background: var(--tom-warn-12); padding: var(--e0) var(--e2); border-radius: var(--r-xs);
}
.mot-cartao.sujo { border-color: var(--tom-warn-35); }

/* O DESVIO EM RELAÇÃO AO PADRÃO. Fio âmbar à esquerda, como todo aviso da
   casa; o conteúdo é a lista de setas "de → para". */
.mot-desvio {
  list-style: none; margin: 0; padding: var(--e2) var(--e3);
  border-left: 2px solid var(--warn); background: var(--tom-warn-4);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--f-micro); line-height: 1.6;
  display: flex; flex-direction: column; gap: var(--e0);
}
.mot-corpo { display: flex; flex-direction: column; gap: var(--e3); }


/* ═══════════════════════════════════════════════════════════════════════════
   O CHAT DE AJUDA FLUTUANTE (19.09.2026) · telas/ajuda-chat.js

   Desenho aprovado pelo dono no protótipo: o botão no canto inferior direito,
   o cabeçalho no material de impacto, a conversa em papel. Vive fora do
   `#app`, então as regras de `@container tela` não o alcançam: o que muda no
   celular é por `@media`. Prefixo `ajd-` porque `aj-` já é do Ajuste.
   ═══════════════════════════════════════════════════════════════════════════ */
.ajd {
  position: fixed; right: var(--e5); bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--e3);
}
/* Os toasts moram no mesmo canto: com o chat na tela, eles sobem. */
body.com-ajuda .toasts { bottom: calc(1.5rem + 72px); }

.ajd-linha { display: flex; align-items: center; gap: var(--e3); }
.ajd-convite {
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: var(--e2) var(--e4); font-size: var(--f-apoio); box-shadow: var(--shadow-pop); white-space: nowrap;
  transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}
.ajd-convite b { color: var(--primary); font-weight: 600; }
.ajd.visto .ajd-convite, .ajd[data-aberto="true"] .ajd-convite { opacity: 0; transform: translateX(8px); pointer-events: none; }

.ajd-botao {
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--tom-branco-12);
  transition: transform var(--t-rapido) var(--curva);
}
.ajd-botao:hover { transform: translateY(-2px); }
.ajd-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ajd-botao > span { position: absolute; display: grid; place-items: center; transition: opacity var(--t-rapido) var(--curva), transform var(--t-medio) var(--curva); }
.ajd-botao .ajd-ic-fechar { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.ajd[data-aberto="true"] .ajd-ic-abrir { opacity: 0; transform: rotate(60deg) scale(0.6); }
.ajd[data-aberto="true"] .ajd-ic-fechar { opacity: 1; transform: none; }
.ajd-botao .ajd-luz { top: 9px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--navy); }
.ajd.visto .ajd-luz, .ajd[data-aberto="true"] .ajd-luz { display: none; }

.ajd-painel {
  width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 120px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal); display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; animation: ajd-abre 0.28s var(--curva);
}
@keyframes ajd-abre { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

.ajd-cab { padding: var(--e4) var(--e5) var(--e4); }
.ajd-olho { font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--gold); display: flex; align-items: center; gap: var(--e2); }
.ajd-olho::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--tom-ok-25); }
.ajd-cab h2 { margin: var(--e2) 0 var(--e0); font-size: var(--f-secao); letter-spacing: -0.01em; color: #fff; }
.ajd-cab p { margin: 0; font-size: var(--f-apoio); color: var(--tom-branco-70); max-width: 30ch; }
.ajd-cab .ajd-fechar {
  position: absolute; top: var(--e3); right: var(--e3); width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--tom-branco-12); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.ajd-cab .ajd-fechar:hover { background: var(--tom-branco-18); }

.ajd-contexto {
  display: flex; align-items: center; gap: var(--e2); margin: var(--e3) var(--e4) 0; padding: var(--e2) var(--e3);
  border-radius: var(--r-xs); background: var(--primary-soft); color: var(--primary); font-size: var(--f-apoio);
}
.ajd-contexto b { font-weight: 600; }

.ajd-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.ajd-msg { max-width: 88%; font-size: var(--f-corpo); line-height: 1.55; overflow-wrap: anywhere; }
.ajd-msg p { margin: 0; }
.ajd-msg p + p { margin-top: var(--e2); }
.ajd-msg.bot { align-self: flex-start; background: var(--surface-hi); color: var(--ink); border-radius: 4px var(--r) var(--r) var(--r); padding: var(--e3) var(--e4); }
/* A bolha de quem pergunta é o marinho da marca nos dois temas: o azul do
   tema escuro é claro demais para texto branco. */
.ajd-msg.eu { align-self: flex-end; background: var(--navy); color: #fff; border: 1px solid var(--tom-branco-12); border-radius: var(--r) 4px var(--r) var(--r); padding: var(--e3) var(--e4); }
.ajd-fonte { display: block; margin-top: var(--e2); font-size: var(--f-micro); color: var(--faint-ink); }
.ajd-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.ajd-humano {
  display: inline-flex; align-items: center; gap: var(--e2); border: 0; border-radius: var(--r-pill);
  padding: var(--e2) var(--e4); background: #0f7a4f; color: #fff; font: inherit; font-weight: 600; font-size: var(--f-apoio); cursor: pointer;
}
.ajd-humano:hover { background: #0c6641; }
.ajd-nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e3); font-size: var(--f-micro); color: var(--faint-ink); }
.ajd-nota button {
  border: 1px solid var(--border); background: var(--surface); color: var(--dim-ink); border-radius: var(--r-pill);
  padding: var(--e1) var(--e3); font: inherit; font-size: var(--f-micro); cursor: pointer;
}
.ajd-nota button:hover { border-color: var(--primary); color: var(--primary); }

.ajd-sugestoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); }
.ajd-sugestoes small { font-size: var(--f-micro); color: var(--faint-ink); }
.ajd-sugestoes button {
  text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: var(--r-pill); padding: var(--e2) var(--e4); font: inherit; font-size: var(--f-apoio); cursor: pointer;
  transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.ajd-sugestoes button:hover { border-color: var(--primary); color: var(--primary); }

.ajd-digitando { align-self: flex-start; background: var(--surface-hi); border-radius: 4px var(--r) var(--r) var(--r); padding: var(--e3) var(--e4); display: flex; gap: var(--e1); }
.ajd-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint-ink); animation: ajd-ponto 1s infinite ease-in-out; }
.ajd-digitando i:nth-child(2) { animation-delay: 0.15s; }
.ajd-digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ajd-ponto { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ajd-form {
  display: flex; align-items: flex-end; gap: var(--e2); margin: 0 var(--e3); padding: var(--e2);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.ajd-form:focus-within { border-color: var(--primary); }
/* O campo global da plataforma tem borda, fundo e 84px de altura mínima. */
.ajd-form textarea {
  flex: 1; width: auto; min-height: 0; max-height: 96px; resize: none; border: 0; padding: var(--e1);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--f-corpo); line-height: 1.45;
}
.ajd-form textarea:focus { outline: 0; border: 0; }
.ajd-form button {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-xs); border: 0; padding: 0;
  background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.ajd-form button:disabled { opacity: 0.4; cursor: default; }
.ajd-pe { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4) var(--e4); font-size: var(--f-micro); color: var(--faint-ink); }
.ajd-pe a { color: var(--dim-ink); text-decoration: underline; text-underline-offset: 3px; }
.ajd-pe a:hover { color: var(--primary); }

@media (max-width: 600px) {
  .ajd { right: var(--e4); bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px)); }
  .ajd-convite { display: none; }
  /* No celular a conversa ocupa a tela toda, como um app de mensagens. */
  .ajd[data-aberto="true"] .ajd-painel {
    position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ajd[data-aberto="true"] .ajd-linha { display: none; }
}
@media print { .ajd { display: none !important; } }

/* O chat visto pelo admin (telas/admin-ajuda.js). */
.ajd-adm-controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e5); }
.ajd-adm-controles > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); }
.ajd-adm-estado { margin: 0; }
.ajd-adm-linha { display: flex; gap: var(--e2); align-items: center; }
.ajd-adm-linha .adm-campo { width: 110px; }
.ajd-adm-filtros { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.ajd-adm-filtros .chip { border: 0; cursor: pointer; }
.ajd-adm-filtros .chip.on { background: var(--primary-soft); color: var(--primary); }
.ajd-adm-conversa .adm-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.ajd-adm-par { padding: var(--e3) 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--e1); }
.ajd-adm-par p { margin: 0; }
td.adm-acoes { white-space: nowrap; }
td.adm-acoes .btn + .btn { margin-left: var(--e1); }
html.modo-papel .ajd { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ajd-painel, .ajd-digitando i { animation: none; }
  .ajd-convite, .ajd-botao, .ajd-botao > span, .ajd-sugestoes button { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A LUZ DE FAMÍLIA NOS CARTÕES (19.09.2026, pedido do dono)

   Nasceu nas três entregas do Radar: uma luz muito sutil na cor da família,
   que desce do topo e some antes da metade. A cor vem de `--fam-soft` (o
   Radar e as classes `.fam-*` já declaram); onde não há família, é o azul.

   A REGRA DO DONO: SÓ CARTÃO PEQUENO. O cartão grande de uma tela (o do
   Radar com o mapa, o do Estúdio, a Jornada, as caixas de Configurações)
   fica branco, sem acabamento. A luz é dos pequenos: as entregas do Radar,
   as linhas "A partir do que você já tem" do Estúdio e os dois atalhos da
   Visão Geral. Ele também não quis a luz nas perguntas frequentes e nos
   sete motores da Ajuda, nem o fundo mesclado no índice da Biblioteca.
   No Toolbox, a luz é dos cartões do acordeão (os grupos), e não das
   ferramentas de dentro, que ficam brancas (pedido do dono, 19.09.2026).

   UMA regra para todos, de propósito: o teto de degradês está cheio, e esta
   luz é a do Radar movida para cá, não uma nova. Cartão novo entra na lista.
   Lista simples, e não `:is()`: o `:is()` dá a todos a especificidade do mais
   forte, e a borda de `.ar-cartao:hover` perdia para esta regra.

   FICA DE FORA: o material de impacto (já tem luz própria), listas e linhas
   de tabela (ali o olho varre), formulários, relatórios e o Delfos.
   ═══════════════════════════════════════════════════════════════════════════ */
.rd-porta .rd-entrega,
.dv-linha,
.ar-cartao,
.tb-grupo .sanfona {
  /* `--luz-fam` deixa um cartão pedir uma luz mais fraca sem mexer no
     `--fam-soft`, que também pinta o ícone e o selo. */
  background-image: linear-gradient(180deg, var(--luz-fam, var(--fam-soft, var(--tom-primario-8))), transparent 40%);
}
/* O laranja do Toolbox pesava mais que o roxo e o azul na mesma dose: 30% a
   menos nos cartões do acordeão (pedido do dono, 19.09.2026). 7% vira 5%. */
.tb-grupo .sanfona { --luz-fam: color-mix(in srgb, var(--fam) 5%, transparent); }

/* ── ALVOS DE TOQUE QUE FALTAVAM (conferência de 19.09.2026) ─────────────────
   No fim do arquivo de propósito: dentro do bloco de toque lá de cima (≤900px)
   eles perdiam para a regra base de cada um, que vem depois no arquivo. O
   "Ver todos" e a seta da página da empresa crescem só no alvo, com a margem
   negativa devolvendo o espaço (o desenho não muda, o dedo acerta); as
   pastilhas "Pode virar" do Estúdio sobem de 39 para 44. */
@media (max-width: 900px) {
  .ult-todos { padding-block: 12px; margin-block: -12px; }
  .jn-pagina { width: 44px; height: 44px; margin: -8px; }
  .dv-chip { min-height: 44px; }
  .ajuda-populares button { min-height: 44px; }
  .dl-feito, .dl-mic, .dl-ouvir { min-height: 44px; }
  .intro-x { width: 44px; height: 44px; }
}