/* ─────────────────────────────────────────────────────────────────────────
   SIGA — folha de estilo compartilhada
   ─────────────────────────────────────────────────────────────────────────
   Servida pelo validador (express.static de public/) em /siga.css, caminho
   ABSOLUTO de propósito: as telas são servidas por containers diferentes
   (validador, monitoração, tarefas, OCR, relatório) e em produção vivem sob
   o prefixo /siga do gateway, que tem um catch-all justamente para assets
   absolutos. Caminho relativo quebraria em pelo menos um desses casos.

   O que mora AQUI: os tokens da identidade e os componentes comprovadamente
   idênticos entre as telas (o reset e a topbar do SIGA). O que continua no
   <style> de cada tela: o CSS próprio do módulo — a maior parte, que diverge
   de verdade entre telas (.topbar, body e .btn* têm variantes por módulo).

   Cada página carrega este arquivo ANTES do próprio <style>, então uma tela
   que precise divergir sobrescreve localmente, sem !important. Ao mudar um
   token aqui, lembre que ele vale para TODAS as telas.

   ATENÇÃO ao escrever tela nova: use apenas o bloco CANÔNICO abaixo. Os
   outros dois blocos existem porque as telas atuais já referenciam aqueles
   nomes centenas de vezes — renomear tudo seria um diff enorme e arriscado.
   São dívida, não padrão: nada novo deve usá-los.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── A RAMPA — cinza NEUTRO (r = g = b), do preto ao branco, medida no
     ACTO Administrativo: faixa de módulo #000000, texto #222529, texto
     secundário #676767, painel #f9f9f9, conteúdo #ffffff.

     Era um cinza quente (b = r-1, tirado do logo) até 20/08/2026. O print de
     referência é neutro e mais escuro — daí preto puro no lugar de #3c3c3b.

     Use ESTES nomes em código novo. ─────────────────────────────────────── */
  --n900: #000000;   /* faixa de módulo, título forte */
  --n800: #222529;   /* texto de conteúdo */
  --n700: #676767;   /* texto secundário (a ação primária é --acento) */
  --n600: #7b7b7b;
  --n500: #949494;   /* texto terciário */
  --n400: #b3b3b3;   /* ícone e link sobre a faixa preta */
  --n300: #cfcfcf;   /* borda de campo */
  --n200: #e3e3e3;   /* borda */
  --n100: #f1f1f1;   /* realce claro neutro */
  --n50:  #f9f9f9;   /* fundo da página */
  --n0:   #ffffff;   /* superfície */

  /* ── ACENTO — a única cor cromática da identidade, o azul do logo
     acto.ai (#0097b2). Vale para AÇÃO: fundo de botão primário, link, item
     ativo e anel de foco. Não é cor de superfície, não é cor de texto corrido.

     Dois tons, e o motivo importa: o azul puro do logo tem 3,46:1 contra
     branco — passa para componente de interface (borda, anel de foco, ícone
     grande: mínimo 3:1), mas NÃO para texto (mínimo 4,5:1 da WCAG AA). Então
     `--acento` é o azul da marca, para realce e borda, e `--acento-acao` é o
     mesmo azul escurecido (5,3:1) para o que carrega texto: fundo de botão com
     rótulo branco e link sobre fundo claro. ─────────────────────────────── */
  --acento: #0097b2;
  --acento-acao: #00768b;
  --acento-hover: #005e6e;
  --acento-light: #e6f5f7;
  --acento-mid: #cceaf0;

  /* ── CANÔNICO — a identidade visual do SIGA. É isto que se usa. ──────
     `--blue*` é nome legado e voltou a ser azul de fato; `--navy` é a faixa
     escura, hoje preta. Mantidos porque as telas os referenciam centenas de
     vezes. ──────────────────────────────────────────────────────────────── */

  --brand: var(--acento);
  --brand-hover: var(--acento-hover);
  --brand-light: var(--acento-light);
  --brand-mid: var(--acento-mid);

  /* `--blue` é o token que as telas realmente usam (591 referências), e usam
     tanto para texto e borda quanto para fundo de botão com rótulo branco. Por
     isso ele recebe o tom de AÇÃO, não o azul puro da marca: é o único valor
     que atende os dois papéis sem falhar contraste em nenhum deles. Quem quer
     o azul do logo cru — borda, anel de foco, realce sem texto — usa
     `--acento`. */
  --blue: #00768b;
  --blue-light: #e6f5f7;
  --blue-mid: #cceaf0;
  --blue-hover: #005e6e;
  --navy: #000000;
  --text: #222529;
  --text-2: #676767;
  --text-3: #949494;
  --border: #e3e3e3;
  --border-2: #cfcfcf;
  --bg: #f9f9f9;
  --surface: #fff;
  --surface-2: #fbfbfb;
  --danger: #c0392b;
  --danger-bg: #fff0f0;
  --danger-bd: #f5c6c6;
  --success: #2d7a2d;
  --success-bg: #f0f7f0;
  --success-bd: #b7ddb7;
  --warn: #b7791f;
  --warn-bg: #fff8e6;
  --warn-bd: #f0d96a;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --sans: 'Inter', system-ui, sans-serif;
  --display: 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── ROTAÇÃO DE CARDS (hub) — únicos tons cromáticos fora do acento,
     reservados a ESTE componente (grade de cards tipo "escolha uma opção",
     o mesmo padrão da landing/hub em `.app-card`). Não usar como cor de
     texto corrido, link ou estado — isso continua sendo papel do acento
     azul e das cores de estado logo abaixo. Valores herdados de
     `acto-hub-modern.css` (--hub-green/orange/purple/teal). ─────────── */
  --card-green: #16a34a;
  --card-orange: #f79009;
  --card-purple: #7f56d9;
  --card-teal: #0e9384;

  /* ── DOMÍNIO — semânticas de telas específicas (diff de auditoria,
     realce de JSON, mídia). Não são cor de marca; use só no contexto. ── */
  --add: #155724;
  --add-bg: #d4edda;
  --rem: #721c24;
  --rem-bg: #f8d7da;
  --chg: #856404;
  --chg-bg: #fff3cd;
  --media: #2f6fb0;
  --media-bg: #eef4fb;
  --jk: #1a5276;
  --js: #196f3d;
  --jn: #6e2fa0;
  --jb: #922b21;
  --jx: #7f8c8d;

  /* ── APELIDOS LEGADOS — NÃO USAR EM CÓDIGO NOVO. Mantidos apenas
     para as telas que já os referenciam; prefira o canônico ao lado. ── */
  --bg-alt: #fbfbfb;   /* = --surface-2 */
  --bg2: #ffffff;   /* = --surface */
  --bg3: #f1f1f1;   /* variante própria de uma tela */
  --glass: rgba(255, 255, 255, 0.85);   /* variante própria de uma tela */
  --border2: #cfcfcf;   /* = --border-2 */
  --accent: #00768b;   /* = --blue */
  --accent2: #005e6e;   /* = --blue-hover */
  --accent-bg: #e6f5f7;   /* = --blue-light */
  --text-mid: #676767;   /* = --text-2 */
  --text-dim: #949494;   /* = --text-3 */
  --r: 8px;   /* = --radius */
  --r2: 12px;   /* = --radius-lg */
  --sh: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 .5px rgba(0, 0, 0, 0.06);   /* = --shadow */
  --blue-h: #005e6e;   /* variante própria de uma tela */
  --blue-l: #e6f5f7;   /* variante própria de uma tela */
  --blue-m: #cceaf0;   /* variante própria de uma tela */
  --t2: #676767;   /* = --text-2 */
  --t3: #949494;   /* = --text-3 */
  --bd: #e3e3e3;   /* = --border */
  --bd2: #cfcfcf;   /* = --border-2 */
  --sf: #fff;   /* = --surface */
  --sf2: #fbfbfb;   /* = --surface-2 */
  --dbg: #fff0f0;   /* = --danger-bg */
  --dbd: #f5c6c6;   /* = --danger-bd */
  --ok: #2d7a2d;   /* = --success */
  --obg: #f0f7f0;   /* = --success-bg */
  --obd: #b2d9b2;   /* variante própria de uma tela */
  --rl: 12px;   /* = --radius-lg */
  --shm: 0 4px 16px rgba(0, 0, 0, .12);   /* = --shadow-md */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.siga-topbar .brand {
  font-weight:700;letter-spacing:.3px;font-size:1rem;color:#fff;
}

.siga-topbar .btn-ghost {
  background:none;border:1px solid #ffffff40;color:#e3e3e3;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:.8rem;text-decoration:none;display:inline-flex;align-items:center;line-height:1;font-family:inherit;
}

.siga-topbar .btn-ghost:hover {
  background:#ffffff14;color:#fff;
}

/* Sem isto, um btn-ghost com `disabled` fica idêntico a um ativo — mesma cor,
   mesma borda e ainda com cursor:pointer, convidando o clique que não faz nada.
   O estado precisa ser visível sem depender do title no hover. */
.siga-topbar .btn-ghost:disabled {
  opacity:.45;cursor:not-allowed;
}

.siga-topbar .btn-ghost:disabled:hover {
  background:none;color:#e3e3e3;
}

.siga-topbar .spacer {
  flex:1;
}

.siga-topbar .user-pill {
  display:none;align-items:center;gap:8px;background:#ffffff14;border:0;padding:4px 12px 4px 8px;border-radius:20px;font-size:.8rem;color:#fff;
}

.siga-topbar .user-pill.on {
  display:flex;
}

.siga-topbar a.home {
  color:#b3b3b3;text-decoration:none;font-size:.82rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   .card-nav — visual do hub (public/landing.html, .app-card): sombra,
   elevação no hover e barra colorida no topo que roda entre --acento e as
   4 cores --card-*. Componente OPT-IN (classe extra, não afeta `.panel`/
   `.card` sozinhos): revisão de UX (28/09/2026) reprovou aplicar isso a
   TODO `.panel`/`.card`, porque nos módulos internos essas classes embrulham
   conteúdo funcional (tabela, formulário, gráfico) — não uma grade de
   opções equivalentes e clicáveis como no hub. Sombra/hover-lift ali vira
   falsa affordance ("isto parece clicável" quando não é), e a rotação de
   cor vira decoração sem significado.

   Use `.card-nav` apenas onde existir de fato uma grade de cards que levam
   a lugares diferentes (ex.: escolher um cliente, um relatório, um tipo de
   auditoria) — o mesmo papel do `.app-card` da landing. Painel de conteúdo
   continua no card neutro já documentado: `--surface`, borda `--border`,
   raio `--radius-lg`, `--shadow`, sem barra nem hover-lift.
   ───────────────────────────────────────────────────────────────────────── */
.card-nav {
  --card-accent: var(--acento);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-nav::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  left: 50%; width: 50%; transform: translateX(-50%);
  background: var(--card-accent);
}
.card-nav:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}
@media (prefers-reduced-motion: reduce) {
  .card-nav { transition: none; }
  .card-nav:hover { transform: none; }
}
/* `:nth-child(An+B of S)` conta só os irmãos que casam com S — ao contrário
   de `:nth-of-type`, que conta por TAG e erraria a rotação sempre que um
   .card-nav divide o pai com outras <div> que não são card-nav. */
.card-nav:nth-child(5n+2 of .card-nav) { --card-accent: var(--card-green); }
.card-nav:nth-child(5n+3 of .card-nav) { --card-accent: var(--card-orange); }
.card-nav:nth-child(5n+4 of .card-nav) { --card-accent: var(--card-purple); }
.card-nav:nth-child(5n+5 of .card-nav) { --card-accent: var(--card-teal); }

.siga-topbar a.home:hover {
  color:#fff;
}