/* ═══════════════════════════════════════════════════════════
   Actaria — Design tokens e paleta de 3 temas
═══════════════════════════════════════════════════════════ */
:root {
  /* Paleta fixa (não muda com tema) */
  --cor-primaria:   #0f3460;   /* navy profundo */
  --cor-primaria2:  #16213e;   /* navy hover */
  --cor-acento:     #0ea5e9;   /* sky-500 — transparência, modernidade */
  --cor-acento2:    #0284c7;   /* sky-600 hover */
  --cor-sucesso:    #198754;
  --cor-aviso:      #f59e0b;   /* amber — mais quente que ffc107 */
  --cor-perigo:     #ef4444;   /* red-500 — mais vívido (FUNDO/borda: com texto branco por cima) */
  /* A3 — vermelho para TEXTO. O red-500 acima é ótimo como fundo, mas como texto
     dá 3,76:1 sobre fundo claro: reprova no WCAG AA (4,5:1). Este token dá o tom
     certo em cada tema — escuro no claro, claro no escuro. */
  --cor-perigo-texto: light-dark(#b91c1c, #fca5a5);
  --cor-info:       #0891b2;   /* cyan-700 — distinto do acento sky-500 */
  /* P5 — os irmãos do --cor-perigo-texto acima, pela MESMA razão e a partir da
     mesma medição (axe-core no browser, não no olho): como TEXTO sobre fundo
     claro, o âmbar dá 2,14:1 e o cyan 3,68:1 — os dois reprovam no AA (4,5:1).
     Como FUNDO (com branco por cima) eles continuam válidos; é só o papel de
     texto que precisa do tom fechado. Regra prática desta base de código:
     `--cor-x` pinta superfície; `--cor-x-texto` pinta letra. */
  /* ⚠️ REMEDIDOS EM 2026-07-25 CONTRA AS 10 PALETAS, e os dois REPROVAVAM.
     A medição original ("sobre fundo claro") usou UM fundo; o app tem ~15 —
     10 paletas × claro/escuro, e o fundo é ESCOLHIDO PELA CÂMARA. Sobre a paleta
     `sereno`, a mais fechada das claras, o âmbar dava 3,96:1 e o cyan 4,22:1.
     Os valores abaixo são o pior caso de TODAS as paletas claras, não de uma:
     #92400e → 5,59:1 · #155e75 → 5,73:1. Os lados escuros foram remedidos e
     passam com folga (8,92 e 8,24 no pior caso, a paleta `cafe`).
     ⭐ Token de contraste medido contra um fundo só é token medido contra o
     fundo do desenvolvedor — e o fundo é configuração do cliente. */
  --cor-aviso-texto:  light-dark(#92400e, #fbbf24);   /* amber-800 / amber-400 */
  --cor-info-texto:   light-dark(#155e75, #22d3ee);   /* cyan-800  / cyan-400  */
  /* O irmão que faltava. `.text-success` e `.btn-outline-success` continuavam com
     o verde de SUPERFÍCIE (#198754 — 3,57:1 no pior caso), porque este token não
     existia para eles herdarem: 8 nós do lote 5 saíram só daqui. */
  --cor-sucesso-texto: light-dark(#146c43, #6ee7b7);  /* green-700 / green-300 */
  /* O ACENTO como letra. Em várias paletas (a padrão inclusive) o acento é um ouro:
     2,5:1 sobre fundo claro. A regra já existia espalhada como `light-dark(primária,
     acento)` em cada lugar que alguém lembrou de corrigir — e o P5.2 mostrou o preço
     de não ter nome: bastou um `style="color:var(--cor-acento)"` cravado num cartão de
     prévia para o defeito voltar. Agora tem nome, e quem escrever `--cor-acento` num
     texto está visivelmente escrevendo a coisa errada. */
  /* ⚠️ O lado ESCURO não é o acento puro, e a diferença é medida: reusando
     `--cor-acento` tal e qual, a paleta `ambar` dá 4,48:1 sobre `--bg-card` —
     erra o AA por 0,02. Clarear 10% resolve em TODAS as paletas (pior caso 5,10)
     e mantém o matiz de cada uma, que cravar uma cor destruiria: 30 paletas
     redefinem `--cor-acento`, e o acento é parte da identidade que a câmara
     escolheu. */
  --cor-acento-texto: light-dark(var(--cor-primaria),
                                 color-mix(in oklab, var(--cor-acento), white 10%));
  --sidebar-w:      240px;
  --sidebar-w-col:  52px;

  /* Escala de raio */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-full: 999px;

  /* ── Escala tipográfica canônica (B16-c) ──────────────────────
     Vocabulário oficial de tamanhos. Preferir estas classes/tokens a
     font-size inline ad-hoc. Degraus mapeados na distribuição real da UI. */
  --text-2xs:  9px;    /* micro: timestamps, rótulos de eixo, contadores */
  --text-xs:   11px;   /* apoio: legendas, chips, kbd, badges */
  --text-sm:   12px;   /* secundário compacto */
  --text-md:   13px;   /* corpo secundário / tabelas densas */
  --text-base: 14px;   /* corpo padrão */
  --text-lg:   16px;   /* subtítulo */
  --text-xl:   20px;   /* título de seção */
  --text-2xl:  26px;   /* título de página */

  /* Fonte CERIMONIAL da marca Actaria — Marcellus (BRAND-3a), caixa alta,
     letter-spacing largo. Usada nas superfícies cerimoniais (carimbo/hanko,
     login, portal, "Sobre", termos, wordmark). Cormorant fica de fallback. */
  --fonte-cerimonial: 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ── Tokens de MARCA Actaria (BRAND-3a) — INVIOLÁVEIS ────────────────────
     A marca é fixa; os temas B18 tematizam superfícies, JAMAIS estes tokens.
     Nunca redefinir em blocos [data-tema]/[data-bs-theme]. O flip claro/escuro
     do ouro/minuta é via light-dark() (Bootstrap põe color-scheme:dark no tema
     escuro), então acompanha o toggle manual e o prefers-color-scheme.
     Fonte normativa: docs/design_handoff_actaria_brand/README.md §1. */
  --marca-ink:    #101214;                        /* preto da marca (hastes, texto, fundos escuros) */
  --marca-ouro:   light-dark(#B0934E, #C7AC74);   /* ouro gráfico: barra, filetes, elementos ≥18px/600 */
  /* Ouro para TEXTO pequeno (<18px). O valor claro era #9A8242 — que, MEDIDO, dá
     3,25:1 sobre o fundo da paleta padrão e 3,78:1 até sobre branco puro: reprova
     o AA nos dois. O token existe justamente para ser o ouro que se lê; ele só
     nunca tinha sido medido. P5 levou a #7A6634 (4,96:1 no fundo padrão), sem
     tocar em `--marca-ouro`, que segue sendo o ouro GRÁFICO (barras, filetes,
     texto ≥18px/600), onde o limite é 3:1 e o tom original passa.

     ⭐ #6b5a2e desde 2026-07-27, POR DECISÃO DO CADIM. O portão de paletas mediu
     as 17 combinações e mostrou que #7A6634 fecha 4,96 só no fundo padrão: no
     PIOR par da faixa ele cai para 4,38, contra o mínimo de 4,5. Contraste não é
     propriedade de uma cor, é de um PAR — e quem escolhe a paleta é a câmara, não
     quem programou. Trocar o token de marca era decisão dele porque tem fonte
     normativa própria (docs/design_handoff_actaria_brand/README.md §1, A11Y-3);
     ele escolheu fechar a conta. O ouro da marca segue intacto onde é gráfico. */
  --marca-ouro-texto: light-dark(#6b5a2e, #C7AC74);
  --marca-prata:  #9B9E97;                         /* estado "em tramitação" (igual nos dois modos) */
  --marca-minuta: light-dark(#C9C7BF, #4E524D);    /* estado "minuta" / linhas de apoio */
  --marca-oxido:  light-dark(#A6392B, #D89A8E);    /* funcional de ERRO (só texto e linha 2px); nunca preenchimento nem no símbolo */

  /* Tema claro (padrão) */
  --bg:             #f1f5f9;
  --bg-card:        #ffffff;
  --bg-sidebar:     #0f3460;
  --sidebar-texto:  rgba(255,255,255,0.80);
  --sidebar-hover:  rgba(255,255,255,0.10);
  --sidebar-ativo:  rgba(14,165,233,0.22);
  --row-hover:      rgba(14,165,233,0.06);
  --texto:          #1e293b;
  --texto-muted:    #5b6675;
  --borda:          #e2e8f0;
  --input-bg: var(--bg-card);
  --input-borda:    #cbd5e1;
  --sombra:         0 2px 12px rgba(0,0,0,0.06);
  --thead-bg:       #f8fafc;
}

[data-tema="sepia"] {
  --bg:             #f2ede2;
  --bg-card:        #faf6ee;
  --bg-sidebar:     #2c1a10;
  --sidebar-texto:  rgba(255,255,255,0.82);
  --sidebar-hover:  rgba(255,255,255,0.11);
  --sidebar-ativo:  rgba(14,165,233,0.28);
  --row-hover:      rgba(14,165,233,0.07);
  --texto:          #3a2a1a;
  --texto-muted:    #7a6248;
  --borda:          #d4c8a8;
  --input-bg:       #faf6ee;
  --input-borda:    #c8b89a;
  --sombra:         0 2px 12px rgba(80,55,30,0.10);
  --thead-bg:       #ede8d8;
  /* Bootstrap */
}

[data-bs-theme="dark"] {
  --bg:             #0d1117;   /* neutro quase-preto, padrão GitHub/Linear */
  --bg-card:        #1a2233;   /* superfície com contraste perceptível vs bg */
  --bg-sidebar:     #080c13;
  --sidebar-texto:  rgba(255,255,255,0.80);
  --sidebar-hover:  rgba(255,255,255,0.09);
  --sidebar-ativo:  rgba(14,165,233,0.25);
  --row-hover:      rgba(14,165,233,0.12);
  --texto:          #dde6f2;
  --texto-muted:    #7c90a8;
  --borda:          #2e3d52;   /* borda visível e delimitadora */
  --input-bg: var(--bg-card);
  --input-borda:    #364a62;   /* borda de input claramente distinta */
  --sombra:         0 0 0 1px var(--borda); /* ring, não sombra — padrão modo escuro */
  --thead-bg:       #111827;   /* thead distinto do card */
  /* Bootstrap */
}

/* ═══════════════════════════════════════════════════════════
   BOOTSTRAP — override de variáveis (herdam a paleta Actaria)
═══════════════════════════════════════════════════════════ */
:root {
  --bs-primary:          #0f3460;
  --bs-primary-rgb:      15,52,96;
  /* P5 — o link herdava o ACENTO, e em várias paletas (meridiano, a padrão) o
     acento é um ouro/terracota: 2,57:1 sobre fundo claro. Mesmo remédio já
     firmado na A3 para `.th-sort-ativo`: primária no claro, acento no escuro. */
  --bs-link-color:       var(--cor-acento-texto);
  --bs-link-hover-color: var(--cor-acento2);
  --bs-focus-ring-color: rgba(14,165,233,0.25);
  --bs-border-color:     var(--borda);
  --bs-body-color:       var(--texto);
  --bs-body-bg:          var(--bg);
  --bs-body-font-family: 'Libre Franklin','Segoe UI',Arial,sans-serif;
  --bs-secondary-color:  var(--texto-muted);
  /* `<code>` era o maior bolo de contraste do sistema — 33 nós, todos numa tela
     só — e ninguém tinha escrito uma linha a respeito: é o rosa de fábrica do
     Bootstrap (#d63384), que nunca foi sobrescrito porque nunca foi notado.
     Ele dá 4,51:1 sobre BRANCO PURO — passa no site do Bootstrap — e 3,55:1
     sobre a paleta mais fechada daqui. O app não tem branco puro em lugar
     nenhum: a superfície é `--bg`. Medido: #b02a6a → 4,89:1 no pior caso claro,
     #f4a6c9 → 7,90:1 no pior caso escuro. */
  --bs-code-color:       light-dark(#b02a6a, #f4a6c9);
}

/* ═══════════════════════════════════════════════════════════
   P5 — CONTRASTE (WCAG 1.4.3 / e-MAG) — utilitários do Bootstrap
   ───────────────────────────────────────────────────────────
   As classes utilitárias do Bootstrap trazem os tons ORIGINAIS dele, calibrados
   para o tema de fábrica — não para as 10 paletas da Actaria. Medido no browser
   (scripts/auditar-acessibilidade.js), sobre fundo claro:
       .text-warning  → 2,14:1     .text-info      → 3,68:1
       .btn-outline-secondary → 4,10:1   .btn-outline-primary → 3,94:1
   Todos reprovam o AA (4,5:1 para texto normal, 3:1 para borda/ícone). Aqui eles
   passam a herdar os tokens de TEXTO da casa, que já nascem com o tom certo em
   cada modo. Corrigir no utilitário (e não em cada tela) é o que impede o defeito
   de voltar na próxima tela que usar `text-warning`.
═══════════════════════════════════════════════════════════ */
.text-warning { color: var(--cor-aviso-texto)   !important; }
.text-info    { color: var(--cor-info-texto)    !important; }
.text-danger  { color: var(--cor-perigo-texto)  !important; }
/* P5 lote 5 — o que faltava neste bloco, e o motivo de ele ter faltado: o bloco
   foi escrito olhando a lista de violações do dia, e a lista só continha as
   telas que o portão media naquele momento. `.text-success` não estava na lista
   porque a aba que o usa não era medida. ⭐ Bloco de conserto escrito a partir
   da lista de violações fica do tamanho da lista, não do tamanho da regra. */
.text-success { color: var(--cor-sucesso-texto) !important; }

/* Os botões de contorno herdam a cor SEMÂNTICA do Bootstrap como letra, e ela é
   tom de superfície: #dc3545 dá 3,57:1 e #198754 dá 3,57:1 sobre a paleta mais
   fechada. O hover não muda — lá a letra é branca sobre o preenchimento cheio,
   que continua sendo a cor de superfície, como deve ser. */
.btn-outline-danger  { --bs-btn-color: var(--cor-perigo-texto);  --bs-btn-border-color: var(--cor-perigo-texto); }
.btn-outline-success { --bs-btn-color: var(--cor-sucesso-texto); --bs-btn-border-color: var(--cor-sucesso-texto); }
.btn-outline-warning { --bs-btn-color: var(--cor-aviso-texto);   --bs-btn-border-color: var(--cor-aviso-texto); }
.btn-outline-info    { --bs-btn-color: var(--cor-info-texto);    --bs-btn-border-color: var(--cor-info-texto); }

/* Selo de fundo claro com letra branca: 1,63:1 no âmbar e 1,95:1 no cyan — os
   dois piores nós do sistema inteiro. Amarelo e cyan são cores CLARAS; letra
   branca em cima é ilegível para qualquer pessoa, não só para quem tem baixa
   visão. A tinta escura da marca resolve nos dois modos, porque o fundo do selo
   é o mesmo nos dois. */
.badge.bg-warning, .badge.bg-info { color: var(--marca-ink) !important; }

.btn-outline-secondary {
  --bs-btn-color:        var(--texto);
  --bs-btn-border-color: var(--input-borda);
  --bs-btn-hover-bg:     var(--borda);
  --bs-btn-hover-color:  var(--texto);
  --bs-btn-hover-border-color: var(--texto-muted);
}
.btn-outline-primary {
  --bs-btn-color:        var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg:     var(--cor-primaria);
  --bs-btn-hover-color:  #fff;
}

/* ═══════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--texto);
  /* Corpo/UI da marca Actaria: Libre Franklin (BRAND-3a). Inter fica como
     fallback para eventuais referências explícitas legadas. */
  font-family: 'Libre Franklin', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  transition: background .25s, color .25s;
}

/* P5 — TODO link do sistema nascia com o acento, e em várias paletas (a padrão
   inclusive) o acento é um ouro: 2,57:1 sobre fundo claro. Era a regra mais barata
   de achar e a mais cara de deixar passar — link é o elemento mais clicado da UI.
   Primária no claro, acento no escuro (o mesmo remédio da A3 em `.th-sort-ativo`). */
a { color: var(--cor-acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ⭐ LINK DE PROSA SUBLINHADO POR PADRÃO — decisão do Cadim, 2026-07-27.
   ═══════════════════════════════════════════════════════════════════════════
   Todo link do sistema se distinguia SÓ PELA COR: quem não distingue cores não
   via que era link (WCAG 1.4.1 / regra `link-in-text-block` do axe). Os casos
   medidos vinham sendo sublinhados um a um — o último em 27/07, no painel de
   Auditoria —, e conserto caso a caso não é regra: o próximo link nasce torto
   de novo.

   O recorte é o mesmo da regra: link DENTRO DE TEXTO CORRIDO, onde a cor é a
   única pista. O que é navegação ou comando — botão, aba, menu lateral, item de
   lista clicável, paginação, número de entidade em tabela — não muda: ali a
   forma já diz que é clicável, e sublinhar tudo transformaria a interface num
   emaranhado de riscos.

   `:where()` mantém a especificidade em zero, então qualquer regra de componente
   continua vencendo esta sem precisar de `!important`. */
:where(p, li, dd, blockquote, .alert, .form-text, .texto-apoio, .prosa)
  a:not(.btn):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.badge):not(.num-entidade):not(.text-decoration-none) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ── Classes utilitárias de escala tipográfica (B16-c) ──────────
   Vocabulário canônico. Novas telas devem usar estas classes em vez de
   font-size inline. .texto-apoio/.texto-micro já embutem a cor de apoio. */
.texto-micro      { font-size: var(--text-2xs); line-height: 1.35; }
.texto-apoio      { font-size: var(--text-xs);  color: var(--texto-muted); }
.texto-secundario { font-size: var(--text-md);  color: var(--texto-muted); }
.texto-cerimonial { font-family: var(--fonte-cerimonial); }

/* ── Scroll suave (fallback p/ âncoras fora dos scrollIntoView explícitos) ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Scrollbar fina (webkit) ── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--borda); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--texto-muted); }

/* ── Foco elegante global (A11Y-4, BRAND-3b) ──
   Tinta da marca sobre superfície clara (contraste alto) e ouro sobre superfície
   escura (onde a tinta some) — foco sempre visível, alinhado à travessa. */
/* ── O ANEL DE FOCO TEM NOME (2026-07-25) ────────────────────────────────────
   Por que virou token: esta regra global estava CERTA — medida contra `--bg`,
   `--bg-card` e `--thead-bg` nas 17 combinações de paleta × modo, ela passa o
   3:1 da WCAG 1.4.11 em **51/51 pares**, com folga (pior caso 11,27 no claro e
   5,73 no escuro). O problema é que **doze regras a sobrescreviam** com
   `var(--cor-acento)`, que reprova em **51/51** no modo claro (pior 1,77). Uma
   delas usava `--cor-primaria`, invisível no escuro (1,10). Trocar um anel
   perfeito por um invisível não era decisão de ninguém: era o token à mão.
   Com nome, a regra deixa de depender de quem lembra dela — e ganha portão
   (`tests/detector_anel_de_foco.test.js`). */
:root {
  --foco-anel: light-dark(var(--marca-ink), var(--marca-ouro));
  /* ⚠️ A SIDEBAR PRECISA DO PRÓPRIO ANEL, e isto é um defeito que existia antes
     de o token existir: o fundo da sidebar **não segue o modo claro/escuro** —
     há paleta com sidebar ESCURA no modo claro (`anil`, `fábrica`) e clara no
     escuro. O anel global se guia pelo MODO, então no claro ele é tinta
     quase-preta: medido, some dentro da sidebar em **4 das 17 paletas**
     (1,06:1 na `anil`). E é lá que mora a navegação por teclado mais usada do
     sistema. `--sidebar-texto` resolve por construção — cada paleta o define
     junto com o próprio fundo — e mede 0 reprovações em 17/17, nos dois modos. */
  --foco-anel-sidebar: var(--sidebar-texto);
}

:focus-visible {
  outline: 2px solid var(--foco-anel);
  outline-offset: 2px;
  border-radius: 4px;
}
.sigma-sidebar :focus-visible {
  outline-color: var(--foco-anel-sidebar);
}

/* ── Botões — transições e disabled ── */
.btn {
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out,
              box-shadow .15s ease-in-out, transform .1s ease-in-out;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, button:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Formulários — tema-aware ── */
.form-control, .form-select, .input-group-text {
  background-color: var(--input-bg);
  border-color: var(--input-borda);
  color: var(--texto);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control::placeholder { color: var(--texto-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--cor-acento);
  color: var(--texto);
  box-shadow: none;
  outline: 2px solid var(--foco-anel);
  outline-offset: 2px;
}
.input-group-text {
  background-color: var(--thead-bg);
  color: var(--texto-muted);
}

/* ── Modais — entrada suave ── */
.modal.fade .modal-dialog {
  transition: transform .2s ease-out, opacity .15s ease-out;
  transform: translateY(-10px) scale(.99);
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}
.modal-content {
  background: var(--bg-card);
  color: var(--texto);
  border-color: var(--borda);
}
.modal-header, .modal-footer { border: 0; }

/* ── Tabelas ── */
.table {
  --bs-table-bg:          transparent;
  --bs-table-color:       var(--texto);
  --bs-table-border-color: var(--borda);
  --bs-table-striped-bg:  var(--thead-bg);
  --bs-table-hover-bg:    var(--thead-bg);
}
.table thead th {
  background: var(--thead-bg);
  color: var(--texto-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--borda);
  white-space: nowrap;
}

/* ── Cards — hover sombra calibrada ── */
.sigma-card {
  transition: box-shadow .2s ease, border-color .2s ease, background .25s;
}
.sigma-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); }

/* De-ênfase que NÃO custa legibilidade (P5 lote 5).
   O idioma anterior era `opacity:.6` no cartão inteiro — escrito à mão, inline.
   Opacidade dilui o TEXTO junto: o cinza de apoio caía para 2,67:1 e o botão
   para 2,81:1. E o cartão de-enfatizado aqui não é conteúdo desativado, é a
   ABA NÃO ESCOLHIDA — quem está decidindo precisa justamente LER os dois para
   escolher. A de-ênfase passa a ser da SUPERFÍCIE (o cartão recua na direção do
   fundo da página), e o texto fica com o contraste inteiro. Seguro por
   construção: as cores de texto desta base foram medidas contra `--bg`, que é o
   fundo mais fechado dos dois. */
.sigma-card--secundaria {
  background: color-mix(in srgb, var(--bg) 70%, var(--bg-card));
}
.sigma-card--secundaria:not(:hover) { box-shadow: none; }
[data-bs-theme="dark"] .sigma-card:hover { box-shadow: 0 0 0 1px var(--cor-acento); border-color: var(--cor-acento); }

/* ═══════════════════════════════════════════════════════════
   LOGIN — BRAND-3b (identidade viva Actaria)
   Fundo contínuo (gradiente noturno padrão), formulário à esquerda e
   painel cerimonial à direita, separados por um filete de creme a 14%.
   Inputs sem caixa: só a linha de base (a travessa). O login é a exceção
   onde o handoff manda inteiro (PLANO-BRAND-3 decisão 2) — cores fixas,
   sem tema B18. Sem slogan (decisão 8); saudação sem vocativo (decisão 7).
═══════════════════════════════════════════════════════════ */
.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Gradiente noturno padrão — só login e hero do site podem ter gradiente. */
  background: linear-gradient(160deg, #101214 0%, #121D36 55%, #17294C 100%);
}
/* Fundos alternativos (appearance.login_background) */
#tela-login[data-login-bg="preto"] .login-bg { background: #101214; }
#tela-login[data-login-bg="azul"]  .login-bg { background: #17294C; }

.login-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  position: relative;
  color: #F4F1EA;
}

/* ── Painel do formulário ── */
.login-form-panel { display: flex; flex-direction: column; }

.login-field { margin-bottom: 22px; }
.login-label {
  display: block;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(244,241,234,.55); margin-bottom: 6px; transition: color .18s;
}
.login-input-wrap { position: relative; }
.login-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1.5px solid rgba(244,241,234,.22);
  color: #F4F1EA; font-size: 15px; padding: 7px 2px; outline: none;
  transition: border-color .18s, border-width .05s;
}
/* Autofill do navegador (Chrome/Brave/Edge pintam retângulo branco por estilo
   interno que background normal não vence). Duas defesas somadas:
   1) background-clip:text recorta o fundo do autofill para DENTRO das letras —
      a caixa branca deixa de existir, inclusive quando a tela de login REAPARECE
      no logoff (SPA) e o navegador re-preenche na hora (o truque da transição
      só protege o carregamento inicial);
   2) -webkit-text-fill-color trava a tinta creme sobre o azul-noite. */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #F4F1EA;
  caret-color: #F4F1EA;
  transition: background-color 9999999s step-end, color 9999999s step-end,
              border-color .18s, border-width .05s;
}
/* Firefox usa o pseudo padrão */
.login-input:autofill { -webkit-text-fill-color: #F4F1EA; caret-color: #F4F1EA; }
.login-input::placeholder { color: rgba(244,241,234,.30); }
/* Foco = a travessa de ouro (2px) + rótulo mono aceso (A11Y-4) */
.login-input:focus { border-bottom-color: #C7AC74; border-bottom-width: 2px; }
.login-field:focus-within .login-label { color: #C7AC74; }
.login-input--totp { text-align: center; font-size: 24px; letter-spacing: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.btn-ver-senha {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(244,241,234,.5);
  cursor: pointer; padding: 4px 6px;
}
.btn-ver-senha:hover { color: #C7AC74; }

/* Erro em ÓXIDO — só texto + linha 2px; nunca preenchimento; o ouro jamais
   sinaliza erro. Mensagem em fade 200ms + aria-live=assertive (no HTML). */
.login-erro {
  border-left: 2px solid #D89A8E; color: #D89A8E; font-size: 13px;
  padding: 6px 0 6px 12px; margin-bottom: 14px; animation: login-erro-in .2s ease;
}
.login-erro-sub { display: block; color: rgba(244,241,234,.5); font-size: 11.5px; margin-top: 3px; }
@keyframes login-erro-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .login-erro { animation: none } }

/* Aviso de sistema (manutenção etc.) — âmbar discreto, não é erro */
.login-aviso {
  border-left: 2px solid #C7AC74; color: rgba(244,241,234,.82);
  font-size: 13px; padding: 6px 0 6px 12px; margin-bottom: 16px;
}

/* Botão ouro principal */
.btn-login-ouro {
  width: 100%; background: #B0934E; color: #101214; border: none;
  border-radius: 8px; padding: 11px 20px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 4px; transition: background .18s, transform .1s;
}
.btn-login-ouro:hover:not(:disabled)  { background: #C7AC74; }
.btn-login-ouro:active:not(:disabled) { transform: scale(.99); }
.btn-login-ouro:disabled { opacity: .85; cursor: default; }
/* Enquanto carrega, o rótulo cede lugar ao glifo (a barra NÃO sobe: é loading) */
.btn-login-ouro:has(.login-loading:not(.d-none)) .btn-login-label { display: none; }

/* Botão gov.br secundário — oculto até login.govbr habilitar (fast-follow) */
.btn-login-govbr {
  width: 100%; margin-top: 12px; background: transparent;
  border: 1px solid rgba(244,241,234,.25); color: #F4F1EA; border-radius: 8px;
  padding: 9px 20px; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .18s;
}
.btn-login-govbr:hover { border-color: #C7AC74; }
.govbr-marca { font-weight: 800; background: #1351B4; color: #fff; border-radius: 3px;
  padding: 1px 5px; font-size: 12px; letter-spacing: -.5px; }

.btn-login-voltar { width: 100%; margin-top: 10px; background: transparent; border: none;
  color: rgba(244,241,234,.55); font-size: 13px; cursor: pointer; }
.btn-login-voltar:hover { color: #F4F1EA; }

.login-recuperar { text-align: center; margin-top: 20px; }
.login-link { color: rgba(244,241,234,.55); font-size: 13px; text-decoration: none; }
.login-link:hover { color: #C7AC74; text-decoration: none; }

/* TOTP */
.login-totp-cabecalho { text-align: center; margin-bottom: 18px; }
.login-totp-icone { font-size: 26px; color: #C7AC74; margin-bottom: 6px; }
.login-totp-titulo { font-weight: 600; }
.login-totp-sub { color: rgba(244,241,234,.55); font-size: 13px; margin-top: 3px; }
.login-totp-dica { color: rgba(244,241,234,.45); font-size: 12px; text-align: center; margin: 8px 0 14px; }

/* ── Painel cerimonial ── */
.login-brand-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: 12px 4px 4px;
}
.login-saudacao { font-family: var(--fonte-cerimonial); font-size: 22px;
  color: rgba(244,241,234,.9); letter-spacing: .5px; min-height: 1em; }
.login-simbolo { width: 88px; height: 88px; display: block; }
/* Falha de login: o símbolo cai para minuta (cinza, barra tracejada no chão).
   A marca NÃO anima — troca seca, sem transição. */
.login-simbolo--minuta path { stroke: #9B9E97; }
.login-simbolo--minuta line { stroke: #9B9E97; stroke-dasharray: 6 7; transform: translateY(26px); }
.login-erro-recuperar { color: #D89A8E; text-decoration: underline; }
.login-erro-recuperar:hover { color: #F4F1EA; }
.login-wordmark { font-family: var(--fonte-cerimonial); font-size: 30px;
  letter-spacing: .28em; text-transform: uppercase; color: #F4F1EA; padding-left: .28em; }
.login-wordmark .lw-ponto { color: #C7AC74; }
.login-instituicao {
  font-family: 'Libre Franklin', sans-serif; font-size: 11.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: #C7AC74; opacity: .9;
  line-height: 1.7; min-height: 1em;
}
.login-sigla, .login-nome-sistema { display: none; }
.login-estados {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px;
  letter-spacing: 2px; color: rgba(244,241,234,.4); margin-top: 8px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.login-estados .le-sep { color: rgba(199,172,116,.5); }

.login-filete { display: none; }

/* ── Loading universal — hastes fantasma + barra de ouro varrendo (1.6s loop).
   Nenhum spinner genérico no produto; começa a substituição aqui, no login. ── */
.login-loading { display: inline-flex; }
.glifo-loading { width: 20px; height: 20px; }
.glifo-loading .gl-haste { stroke: rgba(16,18,20,.35); stroke-width: 11; fill: none; }
.glifo-loading .gl-barra { stroke: #101214; stroke-width: 11; animation: gl-varre 1.6s ease-in-out infinite; }
@keyframes gl-varre {
  0%   { transform: translateY(24px); opacity: .35; }
  50%  { transform: translateY(-14px); opacity: 1; }
  100% { transform: translateY(24px); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .glifo-loading .gl-barra { animation: none; } }

/* ── Rito da travessa no símbolo grande (BRAND-3c, rito de entrada) ──
   Autenticando: o ouro recolhe e uma travessa-fantasma (creme, como as
   hastes do loading) varre subindo da base do A. Login válido (.assinada):
   o fantasma se dissolve e a travessa de OURO sobe da base e assenta na
   posição final — só então o símbolo voa para a sidebar (FLIP).
   Erro/2FA: classes removidas = corte seco (o ouro jamais sinaliza erro). */
.login-simbolo.autenticando .ls-travessa { opacity: 0; transform: translateY(26px); }
.login-simbolo.autenticando .ls-travessa-fantasma { animation: ls-varre 1.5s ease-in-out infinite; }
@keyframes ls-varre {
  0%   { opacity: 0;  transform: translateY(26px); }
  45%  { opacity: .5; transform: translateY(-10px); }
  100% { opacity: 0;  transform: translateY(26px); }
}
.login-simbolo.assinada .ls-travessa {
  opacity: 1; transform: translateY(0);
  transition: transform .7s cubic-bezier(.25,.6,.2,1), opacity .4s ease;
}
.login-simbolo.assinada .ls-travessa-fantasma { animation: none; opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .login-simbolo.autenticando .ls-travessa { opacity: 1; transform: none; }
  .login-simbolo.autenticando .ls-travessa-fantasma { animation: none; }
  .login-simbolo.assinada .ls-travessa { transition: none; }
}

/* ── Loader universal da marca (BRAND-3e): substitui o spinner genérico do
   Bootstrap em todo o produto. Uma barra de ouro que varre na vertical —
   o mesmo gesto do rito do glifo. Theme-aware (usa o ouro da marca) e
   respeita prefers-reduced-motion. Troca só de classe: onde havia
   .spinner-border agora há .loading-marca (mesma estrutura). ── */
.loading-marca {
  display: inline-block;
  width: 26px; height: 26px;
  position: relative;
  vertical-align: middle;
}
.loading-marca::after {
  content: '';
  position: absolute; left: 22%; right: 22%; top: 50%;
  height: 3px; border-radius: 2px;
  background: var(--marca-ouro);
  animation: loading-marca-varre 1.6s ease-in-out infinite;
}
.loading-marca-sm { width: 18px; height: 18px; }
.loading-marca-sm::after { height: 2.5px; }
@keyframes loading-marca-varre {
  0%   { transform: translateY(8px);  opacity: .35; }
  50%  { transform: translateY(-8px); opacity: 1; }
  100% { transform: translateY(8px);  opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .loading-marca::after { animation: none; } }

/* Transição suave login ↔ 2FA (fade only) */
@keyframes login-form-in { from { opacity: 0 } to { opacity: 1 } }
.login-form-entrando { animation: login-form-in .2s ease forwards; }
@media (prefers-reduced-motion: reduce) { .login-form-entrando { animation: none } }

/* ── Desktop: form | filete | cerimonial, sobre um fundo contínuo ── */
@media (min-width: 720px) {
  .login-card { max-width: 880px; flex-direction: row; align-items: center; }
  .login-form-panel { width: 46%; padding: 8px 40px 8px 8px; }
  .login-filete {
    display: block; align-self: stretch; width: 1px; margin: 28px 0;
    background: linear-gradient(to bottom, transparent, rgba(244,241,234,.14) 15%, rgba(244,241,234,.14) 85%, transparent);
  }
  .login-brand-panel { width: 54%; padding: 8px 8px 8px 48px; }
}
@media (max-width: 719px) {
  /* Mobile: painel cerimonial vai para o TOPO */
  .login-card { flex-direction: column-reverse; }
  .login-brand-panel { margin-bottom: 30px; }
  .login-simbolo { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════════
   RITOS (BRAND-3c) — cerimônias curtas (≤1,8s), um só elemento
   de marca. Só transform/opacity (CSP: sem CDN, sem JS de anim.).
   prefers-reduced-motion = corte seco em TODOS os ritos: a lógica
   de negócio nunca depende da animação (dispara depois do 2xx).
   ═══════════════════════════════════════════════════════════ */

/* ── Rito 1 — transição login → mesa (FLIP vanilla) ──
   Um clone do símbolo Actaria voa da tela de login até a marca da
   sidebar; o véu de fundo do login desvanece por baixo. Posições e
   duração vêm do JS (App._ritoLoginMesa); aqui só o palco. */
.rito-flip {
  position: fixed; top: 0; left: 0; z-index: 4000;
  pointer-events: none; transform-origin: top left; will-change: transform, opacity;
}
.rito-flip svg { width: 100%; height: 100%; display: block; }
.rito-veu {
  position: fixed; inset: 0; z-index: 3990; pointer-events: none;
  background: #101214;    /* mesmo azul-noite do login; some por cima da mesa */
  transition: opacity .8s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rito-flip, .rito-veu { display: none !important; }
}

/* ── Rito 2 — entrada: o carimbo desce, uma onda de ouro se abre e o número
   nasce em mono. Celebra protocolo / autuação / registro de correspondência. ── */
.rito-entrada-veu {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(16,18,20,.42); cursor: pointer;
  animation: rito-veu-in .25s ease forwards;
}
.rito-entrada-veu.saindo { animation: rito-veu-out .3s ease forwards; }
@keyframes rito-veu-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes rito-veu-out { to { opacity: 0 } }
.rito-carimbo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 28px 46px; border-radius: 4px; cursor: default;
  background: light-dark(#FBF9F4, #16181C);
  border: 1px solid var(--marca-ouro);
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  animation: rito-carimbo-desce .42s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes rito-carimbo-desce {
  from { opacity: 0; transform: translateY(-34px) scale(.9); }
  60%  { transform: translateY(2px) scale(1.01); }   /* o impacto do carimbo */
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rito-carimbo .glifo { width: 46px; height: 46px; }
.rito-carimbo-termo {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  letter-spacing: 4px; text-transform: uppercase;
  color: light-dark(#9A8242, #C7AC74);   /* A11Y-3: ouro legível em fundo claro */
}
.rito-carimbo-num {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px;
  letter-spacing: 1px; font-weight: 600; color: var(--texto);
}
.rito-onda {
  position: absolute; inset: 0; border-radius: 4px; border: 2px solid var(--marca-ouro);
  pointer-events: none; animation: rito-onda-exp .7s ease-out .32s both;
}
@keyframes rito-onda-exp {
  from { opacity: .7; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.32); }
}
@media (prefers-reduced-motion: reduce) { .rito-entrada-veu { display: none !important; } }

/* ── Rito 3 — assinatura: o traço da marca se desenha, a barra de ouro percorre
   até a posição de "assinado" (y=72) e um anel se abre. Só após o 2xx. ── */
.rito-ass-veu {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(16,18,20,.5); cursor: pointer;
  animation: rito-veu-in .25s ease forwards;
}
.rito-ass-veu.saindo { animation: rito-veu-out .3s ease forwards; }
.rito-ass-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 52px; border-radius: 4px; cursor: default;
  background: light-dark(#FBF9F4, #16181C);
  border: 1px solid var(--marca-ouro); box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.rito-ass-svg { width: 84px; height: 84px; display: block; }
.rito-ass-svg .ra-haste {
  stroke: light-dark(#101214, #C9CCC7); stroke-width: 8; fill: none; stroke-linecap: butt;
  stroke-dasharray: 82; stroke-dashoffset: 82; animation: ra-desenha .5s ease .1s forwards;
}
.rito-ass-svg .ra-haste-b { animation-delay: .24s; }
.rito-ass-svg .ra-barra {
  stroke: var(--marca-ouro); stroke-width: 8; stroke-linecap: butt;
  stroke-dasharray: 30; stroke-dashoffset: 30; animation: ra-percorre .4s ease .6s forwards;
}
.rito-ass-svg .ra-anel {
  fill: none; stroke: var(--marca-ouro); stroke-width: 3;
  transform-origin: 60px 72px; opacity: 0; animation: ra-anel .75s ease-out .78s forwards;
}
@keyframes ra-desenha  { to { stroke-dashoffset: 0; } }
@keyframes ra-percorre { to { stroke-dashoffset: 0; } }
@keyframes ra-anel { 0% { opacity: .8; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.6); } }
.rito-ass-termo {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  letter-spacing: 5px; text-transform: uppercase; color: light-dark(#9A8242, #C7AC74);
}
.rito-ass-sub { font-size: 12px; color: var(--texto-muted); }
@media (prefers-reduced-motion: reduce) { .rito-ass-veu { display: none !important; } }

/* ── hold-to-sign: barra de ouro que enche enquanto o botão é segurado ── */
.rito-hold { position: relative; overflow: hidden; }
.rito-hold-barra {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--marca-ouro); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.rito-hold.rito-segurando { cursor: progress; }

/* ── Rito 5 — filete de ouro que varre o topo a cada troca de rota (~400ms) ── */
#rito-rota-filete {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--marca-ouro); transform: scaleX(0); transform-origin: left center;
  z-index: 5000; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #rito-rota-filete { display: none; } }

/* ── Rito 4a — desapego (eliminação/LED): a barra desce e se dissolve. Grave,
   sem ouro. O traço permanece; o que se vai é o conteúdo. ── */
.rito-desapego-veu {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(16,18,20,.55); cursor: pointer;
  animation: rito-veu-in .3s ease forwards;
}
.rito-desapego-veu.saindo { animation: rito-veu-out .35s ease forwards; }
.rito-desapego-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 54px; border-radius: 4px; cursor: default;
  background: light-dark(#F4F2EC, #131518);
  border: 1px solid light-dark(#C9C6BD, #2A2D31); box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.rito-desapego-svg { width: 78px; height: 78px; display: block; }
.rito-desapego-svg .rd-haste { stroke: light-dark(#8A8D86, #6D716B); stroke-width: 8; fill: none; stroke-linecap: butt; }
.rito-desapego-svg .rd-barra {
  stroke: light-dark(#8A8D86, #9B9E97); stroke-width: 8; stroke-linecap: butt;
  animation: rd-cai 1.1s cubic-bezier(.5,0,.75,0) .25s forwards;
}
@keyframes rd-cai {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(34px); }   /* desce, cruza o chão do A e some */
}
.rito-desapego-rotulo {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; text-align: center;
  color: light-dark(#5D6059, #9B9E97);
}
@media (prefers-reduced-motion: reduce) { .rito-desapego-veu { display: none !important; } }

/* ── Rito 4b — coroação (recolhimento à guarda permanente): a barra sobe e vira
   losango de ouro no ápice. Cerimônia máxima. ── */
.rito-coroacao-veu {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(16,18,20,.55); cursor: pointer;
  animation: rito-veu-in .3s ease forwards;
}
.rito-coroacao-veu.saindo { animation: rito-veu-out .35s ease forwards; }
.rito-coroacao-card {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 32px 56px; border-radius: 4px; cursor: default;
  background: light-dark(#FBF9F4, #16181C);
  border: 1px solid var(--marca-ouro); box-shadow: 0 20px 66px rgba(0,0,0,.5);
}
.rito-coroacao-svg { width: 88px; height: 88px; display: block; }
.rito-coroacao-svg .rc-haste {
  stroke: light-dark(#101214, #C9CCC7); stroke-width: 8; fill: none; stroke-linecap: butt;
  stroke-dasharray: 76; stroke-dashoffset: 76; animation: ra-desenha .5s ease .1s forwards;
}
.rito-coroacao-svg .rc-losango {
  fill: var(--marca-ouro); stroke: none; transform-origin: 60px 22px;
  opacity: 0; animation: rc-coroa .6s cubic-bezier(.2,.9,.25,1) .55s forwards;
}
@keyframes rc-coroa {
  0%   { opacity: 0; transform: translateY(46px) scale(.5); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.rito-coroacao-termo {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  letter-spacing: 5px; text-transform: uppercase; color: light-dark(#9A8242, #C7AC74);
}
.rito-coroacao-num {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px;
  letter-spacing: 1px; font-weight: 600; color: var(--texto);
}
@media (prefers-reduced-motion: reduce) { .rito-coroacao-veu { display: none !important; } }

/* ═══════════════════════════════════════════════════════════
   BOTÃO PRINCIPAL ACTARIA
═══════════════════════════════════════════════════════════ */
.btn-sigma {
  background: var(--cor-primaria);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: background .2s, transform .1s, box-shadow .2s;
}
.btn-sigma:hover  { background: var(--cor-primaria2); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.btn-sigma:active { transform: scale(.98); }

.btn-sigma-outline {
  background: transparent;
  color: var(--cor-primaria);
  border: 1.5px solid var(--cor-primaria);
  padding: 7px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  transition: all .2s;
}
.btn-sigma-outline:hover { background: var(--cor-primaria); color: #fff; }

[data-bs-theme="dark"] .btn-sigma-outline { color: var(--cor-acento-texto); border-color: var(--cor-acento); }
[data-bs-theme="dark"] .btn-sigma-outline:hover { background: var(--cor-acento); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT APP
═══════════════════════════════════════════════════════════ */
#app { display: flex; min-height: 100vh; }

/* ─── Sidebar ─── */
.sigma-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform .25s ease, width .25s ease, background .25s;
  overflow-y: auto;
}

/* Banner "Ambiente de Testes" (sticky, z-index alto) cobriria o cabeçalho da
   sidebar e da topbar, que são fixos no topo. Quando ativo, começam abaixo dele. */
body.tem-banner-teste .sigma-sidebar {
  top: var(--banner-teste-h, 0px);
  min-height: calc(100vh - var(--banner-teste-h, 0px));
}
body.tem-banner-teste .sigma-topbar { top: var(--banner-teste-h, 0px); }
/* Idem para os demais elementos fixos que nascem colados no topo da viewport
   (o aviso do modo teste deve permanecer sempre visível): */
body.tem-banner-teste .notif-panel {
  top: var(--banner-teste-h, 0px);
  height: calc(100dvh - var(--banner-teste-h, 0px));
}
body.tem-banner-teste .modal { top: var(--banner-teste-h, 0px); }

.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header-brand { flex: 1; min-width: 0; text-align: var(--sidebar-brand-align, left); }

.btn-sidebar-collapse {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--sidebar-texto) 45%, transparent);
  padding: 2px 4px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color .15s, background .15s;
}
.btn-sidebar-collapse:hover { color: var(--sidebar-texto); background: var(--sidebar-hover); }
.sidebar-logo-wrap { margin-bottom: 8px; }
.sidebar-logo-img  {
  max-height: 52px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.sidebar-sigla {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--sidebar-texto);
}
.sidebar-subtitulo {
  display: block;
  font-size: var(--sidebar-subtitulo-size, 11px);
  font-weight: var(--sidebar-subtitulo-weight, 400);
  color: color-mix(in srgb, var(--sidebar-texto) 70%, transparent);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 1px 8px;
  color: var(--sidebar-texto);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 7px;
  transition: background .15s, color .15s, box-shadow .15s;   /* indicador em fade 150ms */
  position: relative;
  text-decoration: none;
}
.nav-item i { font-size: 15px; width: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-texto); text-decoration: none; }
/* Indicador de item ativo = a travessa da marca (BRAND-3b). Configurável por
   câmara via data-sidebar-indicator no <html>: travessa (padrão, filete de ouro
   embaixo) ou vertical (filete à esquerda). Ambos 3px ouro, caps butt, sem
   sombra, troca por fade — nunca deslizando. Sem layout shift (box-shadow inset). */
.nav-item.ativo  {
  background: var(--sidebar-ativo);
  color: var(--sidebar-texto);
  box-shadow: inset 0 -3px 0 0 var(--marca-ouro);
}
[data-sidebar-indicator="vertical"] .nav-item.ativo {
  box-shadow: inset 3px 0 0 0 var(--marca-ouro);
}

/* ═══════════════════════════════════════════════════════════
   BRAND-3e — miniaturas do painel "Aparência & Identidade".
   Preview vivo das escolhas por câmara. Reusa os mesmos atributos
   (data-login-bg / data-sidebar-indicator) da UI real, para que a
   miniatura seja fiel ao que o usuário vai ver.
═══════════════════════════════════════════════════════════ */
.ap-preview-login {
  border-radius: 10px; height: 150px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); overflow: hidden;
  background: linear-gradient(160deg, #101214 0%, #121D36 55%, #17294C 100%);
}
.ap-preview-login[data-login-bg="preto"] { background: #101214; }
.ap-preview-login[data-login-bg="azul"]  { background: #17294C; }
.ap-prev-login-card { text-align: center; color: #F4F1EA; max-width: 220px; }
.ap-prev-login-rule { height: 3px; width: 54px; margin: 0 auto 12px; background: var(--marca-ouro); border-radius: 2px; }
.ap-prev-login-mono {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 1.2px; color: rgba(244,241,234,.62);
}

.ap-preview-sidebar {
  border-radius: 10px; padding: 10px; border: 1px solid var(--borda);
  background: var(--bg-sidebar); display: flex; flex-direction: column; gap: 4px;
  height: 150px; justify-content: center;
}
.ap-prev-nav-item {
  color: var(--sidebar-texto); font-size: 12px; font-weight: 500;
  padding: 7px 12px; border-radius: 6px;
}
/* ⚠️ `color:#fff` cravado aqui era branco sobre `--bg-sidebar`, e há SEIS paletas
   com sidebar CLARA (`sereno` chega a oklch(1.0) — branco puro): 1,26:1, o pior
   contraste do sistema. A sidebar de verdade (`.nav-item.ativo`, acima) sempre
   usou `var(--sidebar-texto)`, que cada paleta define junto com o próprio fundo —
   era só a PRÉVIA que cravava a cor. Prévia que mente sobre a tela que ela
   representa é duas vezes errada: reprova o contraste e mostra o que não vai
   acontecer. */
.ap-preview-sidebar[data-sidebar-indicator="travessa"] .ap-prev-nav-item.ativo {
  box-shadow: inset 0 -3px 0 0 var(--marca-ouro); color: var(--sidebar-texto);
}
.ap-preview-sidebar[data-sidebar-indicator="vertical"] .ap-prev-nav-item.ativo {
  box-shadow: inset 3px 0 0 0 var(--marca-ouro); color: var(--sidebar-texto);
}

/* A miniatura representa o PDF impresso — papel SEMPRE branco, mesmo no modo
   escuro (senão a prévia mente sobre o que sai na folha). Só a faixa segue a
   cor configurada (via JS). */
.ap-prev-capa {
  border: 1px solid #d9d4c8; border-radius: 8px; overflow: hidden;
  background: #ffffff; max-width: 240px; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.ap-prev-capa-faixa {
  background: #17294C; color: #F4F1EA; font-size: 10px; letter-spacing: 1px;
  padding: 12px 14px; font-weight: 600;
}
.ap-prev-capa-corpo { padding: 14px; }
.ap-prev-capa-num { font-family: var(--fonte-cerimonial, Georgia, serif); font-size: 16px; color: #1e293b; }
.ap-prev-capa-ementa { font-style: italic; font-size: 11px; color: #6b7280; margin-top: 4px; }

/* ─── Fixar atalhos na barra (B11-nav) ─── */
.nav-pin {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  opacity: 0;
  color: var(--texto-muted);
  cursor: pointer;
  transition: opacity .12s, color .12s, background .12s;
}
.nav-pin i { font-size: 12px; width: auto; }
.nav-item:hover .nav-pin { opacity: .55; }
.nav-pin:hover { opacity: 1; background: var(--sidebar-hover); color: var(--sidebar-texto); }
.nav-pin.fixado { opacity: 1; color: var(--cor-acento-texto); }
.sidebar.colapsada .nav-pin { display: none; }   /* fixar é ação do modo expandido */
#nav-fixados { margin-bottom: 2px; }
.nav-fixado-item .nav-pin { opacity: 1; }

/* ─── Dashboard customizável (gridstack) ─── */

/* Remove o placeholder cinza do gridstack — usamos sigma-card como fundo */
.grid-stack-item-content {
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
}

/* Widget: cabeçalho com cursor de arrastar em modo edição */
.sigma-dash-widget-hdr {
  user-select: none;
}
.grid-stack:not(.grid-stack-static) .sigma-dash-widget-hdr {
  cursor: grab;
}
.grid-stack:not(.grid-stack-static) .sigma-dash-widget-hdr:active {
  cursor: grabbing;
}

/* Botão × de ocultar widget */
.btn-dash-ocultar {
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--texto-muted);
  cursor: pointer;
  line-height: 1;
  transition: background .15s, color .15s;
}
.btn-dash-ocultar:hover {
  background: var(--hover-bg, rgba(0,0,0,.06));
  color: var(--cor-perigo-texto, #ef4444);
}

/* Placeholder ao arrastar */
.grid-stack-placeholder > .placeholder-content {
  background: var(--cor-acento, #0ea5e9);
  opacity: .12;
  border: 2px dashed var(--cor-acento, #0ea5e9);
  border-radius: var(--border-radius, 8px);
}

/* Destaque do widget sendo arrastado */
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: .92;
}

.nav-separador {
  height: 1px;
  background: var(--sidebar-hover);
  margin: 8px 16px;
}

/* ─── Sidebar colapsada (desktop) ─── */
/* O conteúdo mantém a margem estreita SEMPRE que colapsada — inclusive no peek,
   para que o peek sobreponha em vez de empurrar. */
#app.sidebar-colapsada .sigma-conteudo { margin-left: var(--sidebar-w-col); }

.sigma-sidebar.colapsada:not(.peek) {
  width: var(--sidebar-w-col);
  overflow: visible;
}

/* Peek-on-hover (B17): passar ~300ms com o mouse no trilho expande a barra
   como sobreposição temporária, sem reflow do conteúdo. JS adiciona/remove .peek */
.sigma-sidebar.colapsada.peek {
  width: var(--sidebar-w);
  box-shadow: 6px 0 28px rgba(0,0,0,.40);
  z-index: 260;
}

.sigma-sidebar.colapsada:not(.peek) .sidebar-header {
  justify-content: center;
  padding: 16px 0;
}
.sigma-sidebar.colapsada:not(.peek) .sidebar-header-brand,
.sigma-sidebar.colapsada:not(.peek) .sidebar-subtitulo,
.sigma-sidebar.colapsada:not(.peek) .sidebar-logo-wrap,
.sigma-sidebar.colapsada:not(.peek) .nav-separador,
.sigma-sidebar.colapsada:not(.peek) .nav-item span:not(.badge-hoje):not(.badge-pendencias):not(.badge-notif):not(.badge-aviso),
.sigma-sidebar.colapsada:not(.peek) .sidebar-usuario { display: none; }

/* Monograma clicável no topo colapsado (B17-3): grande alvo p/ reexpandir.
   Escondido no estado expandido e no peek. */
.sidebar-monograma { display: none; }
.sigma-sidebar.colapsada:not(.peek) .sidebar-monograma {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--sidebar-texto) 12%, transparent);
  color: var(--sidebar-texto);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.sigma-sidebar.colapsada:not(.peek) .sidebar-monograma:hover {
  background: color-mix(in srgb, var(--sidebar-texto) 22%, transparent);
}
/* No colapso o chevron dá lugar ao monograma */
.sigma-sidebar.colapsada:not(.peek) .btn-sidebar-collapse { display: none; }

/* Hairline no lugar do rótulo de grupo quando colapsada (B17-4): mantém a
   noção de seções sem os textos correndo juntos. */
.sigma-sidebar.colapsada:not(.peek) .nav-grupo-label {
  height: 1px;
  padding: 0;
  margin: 8px 14px;
  font-size: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--sidebar-texto) 14%, transparent);
}
.sigma-sidebar.colapsada:not(.peek) .sidebar-nav > .nav-grupo-label:first-child {
  margin-top: 0; height: 0; margin-bottom: 4px;
}

.sigma-sidebar.colapsada:not(.peek) .sidebar-footer { padding: 12px 0; }
.sigma-sidebar.colapsada:not(.peek) .sidebar-nav    { padding: 8px 0; }

.sigma-sidebar.colapsada:not(.peek) .nav-item {
  justify-content: center;
  margin: 2px 4px;
  padding: 9px 0;
  gap: 0;
}
.sigma-sidebar.colapsada:not(.peek) .nav-item.ativo {
  padding-left: 0;
}
.sigma-sidebar.colapsada:not(.peek) .nav-item i { width: auto; }

/* Badge como bolinha no canto do ícone quando colapsada (B17-1): quem trabalha
   recolhido continua enxergando pendências. */
.sigma-sidebar.colapsada:not(.peek) .nav-item .badge-hoje,
.sigma-sidebar.colapsada:not(.peek) .nav-item .badge-pendencias,
.sigma-sidebar.colapsada:not(.peek) .nav-item .badge-notif,
.sigma-sidebar.colapsada:not(.peek) .nav-item .badge-aviso {
  position: absolute;
  top: 5px;
  right: 8px;
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-sidebar);
}

/* Tooltip CSS-only quando colapsada (não no peek, que já mostra os rótulos) */
.sigma-sidebar.colapsada:not(.peek) .nav-item[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 400;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .15s;
}
/* :focus-visible além de :hover (B17-5) — navegação por teclado revela o rótulo */
.sigma-sidebar.colapsada:not(.peek) .nav-item[data-label]:hover::after,
.sigma-sidebar.colapsada:not(.peek) .nav-item[data-label]:focus-visible::after { opacity: 1; }

.badge-pendencias, .badge-notif {
  background: var(--cor-perigo);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 1px 6px;
  margin-left: auto;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  /* Sempre visível no pé da sidebar, mesmo com a navegação longa rolando:
     é a porta do Meu Perfil. margin-top:auto encosta no fundo quando o
     conteúdo é curto; sticky segura quando é longo. */
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: var(--bg-sidebar);
}
.sidebar-usuario {
  font-size: 12px;
  color: color-mix(in srgb, var(--sidebar-texto) 65%, transparent);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sidebar-usuario strong,
.sidebar-usuario span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-usuario strong { color: var(--sidebar-texto); font-size: 13px; }

.btn-icone {
  background: transparent;
  border: none;
  color: var(--sidebar-texto);
  font-size: 16px;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.btn-icone:hover { background: var(--sidebar-hover); color: var(--sidebar-texto); }
.btn-icone.text-danger:hover { color: #ff6b6b !important; }

/* ─── Bolinha de paleta (T5) ─── */
.sidebar-paleta-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid color-mix(in srgb, var(--sidebar-texto) 30%, transparent);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.btn-icone:hover .sidebar-paleta-dot { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
.btn-icone.paleta-aberta .sidebar-paleta-dot { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); transform: scale(1.15); }


/* ─── Painel seletor de temas (T6) ─── */
.tema-selector-panel {
  position: fixed;
  background: var(--bg-card, #fff);
  color: var(--texto, #1e293b);
  border: 1px solid var(--borda, #e2e8f0);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  padding: 12px;
  z-index: 600;
  display: none;
  width: 216px;
  animation: tsp-in .14s ease;
}
.tema-selector-panel.aberto { display: block; }

@keyframes tsp-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tema-selector-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-muted, #64748b);
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--borda, #e2e8f0);
}

.tema-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.tema-mini-card {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--borda, #e2e8f0);
  color: var(--texto, #1e293b);
  font-size: 11px;
  font-weight: 500;
  transition: border-color .1s, background .1s, transform .1s;
  width: 100%;
  text-align: left;
  line-height: 1.2;
}
.tema-mini-card:hover {
  border-color: var(--cor-acento, #2563eb);
  transform: translateY(-1px);
}
.tema-mini-card.ativo {
  border-color: var(--cor-acento, #2563eb);
  background: color-mix(in srgb, var(--cor-acento, #2563eb) 12%, transparent);
  font-weight: 600;
}
.tema-mini-cor {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.12);
}

/* ─── Toggle mobile ─── */
.btn-toggle-sidebar {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  background: var(--cor-primaria);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  width: 40px; height: 40px;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ─── Nav grupos (labels de seção na sidebar) ─── */
.nav-grupo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* P5 — era 45%. Esses 45% foram calibrados quando TODA sidebar era navy escura
     (texto branco esmaecido sobre azul funciona). As paletas B18 trouxeram
     sidebars CLARAS — a padrão (meridiano) é quase branca —, e o mesmo 45% virou
     cinza sobre cinza: 2,74:1, medido. O rótulo de grupo é o que orienta a pessoa
     dentro do menu; ele não é decoração. 78% mantém a hierarquia visual (o item
     de menu segue mais forte) e passa nos dois fundos. */
  color: color-mix(in srgb, var(--sidebar-texto) 78%, transparent);
  padding: 12px 20px 3px;
  user-select: none;
  pointer-events: none;
}
.sidebar-nav > .nav-grupo-label:first-child { padding-top: 6px; }

/* ─── Avatar + linha do usuário (botão do menu Meu Perfil) ─── */
.sidebar-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.sidebar-user-row:hover { background: var(--sidebar-hover); }
/* Anel da SIDEBAR, não o global: esta linha mora sobre `--bg-sidebar`, cujo tom
   não acompanha o modo claro/escuro. Ver a nota no bloco `:root` do anel. */
.sidebar-user-row:focus-visible {
  outline: 2px solid var(--foco-anel-sidebar);
  outline-offset: 2px;
}
.sidebar-user-chev {
  color: color-mix(in srgb, var(--sidebar-texto) 55%, transparent);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform .15s;
}
.sidebar-user-row[aria-expanded="true"] .sidebar-user-chev { transform: rotate(180deg); }
.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cor-acento) 20%, transparent);
  color: var(--sidebar-texto);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--cor-acento) 40%, transparent);
  letter-spacing: .02em;
  overflow: hidden;
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Rodapé colapsado: só o avatar, centralizado; o menu abre ao lado do trilho */
.sigma-sidebar.colapsada:not(.peek) .sidebar-footer { display: flex; justify-content: center; }
.sigma-sidebar.colapsada:not(.peek) .sidebar-user-row {
  width: auto;
  margin: 0;
  padding: 4px;
  justify-content: center;
}
.sigma-sidebar.colapsada:not(.peek) .sidebar-user-chev { display: none; }
.sidebar-user-row:hover .sidebar-avatar {
  border-color: color-mix(in srgb, var(--cor-acento) 75%, transparent);
}

/* ─── Menu Meu Perfil (flutuante; posição definida via JS) ─── */
.perfil-menu {
  position: fixed;
  z-index: 590; /* abaixo do seletor de paleta (600), que abre a partir dele */
  min-width: 236px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.24);
  animation: tsp-in .14s ease;
}
.perfil-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--texto);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.perfil-item > i { font-size: 15px; color: var(--cor-acento-texto); flex-shrink: 0; }
.perfil-item:hover, .perfil-item:focus-visible { background: var(--row-hover); outline: none; }
.perfil-item:focus-visible { box-shadow: inset 0 0 0 2px var(--foco-anel); }
.perfil-item-sair, .perfil-item-sair > i { color: var(--cor-perigo-texto, #ef4444); }
.perfil-sep { height: 1px; background: var(--borda); margin: 5px 6px; }
.perfil-aparencia {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 2px 4px;
}
.perfil-aparencia .btn-icone { color: var(--texto); }
.perfil-aparencia .btn-icone:hover {
  background: var(--row-hover);
  color: var(--texto);
}

/* ─── Modal Meu Perfil ─── */
.perfil-avatar-grande {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cor-acento) 20%, transparent);
  color: var(--texto);
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--cor-acento) 40%, transparent);
  overflow: hidden;
}
.perfil-avatar-grande img { width: 100%; height: 100%; object-fit: cover; }
.perfil-dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13.5px;
}
.perfil-dados dt { font-weight: 600; color: var(--texto-suave, #6b7280); }
.perfil-dados dd { margin: 0; overflow-wrap: anywhere; }

/* ─── Cap de largura em telas ultrawide (B17 harmonia) ─── */
.view-container { max-width: 1600px; margin-inline: auto; }

/* ─── Topbar (breadcrumb persistente) ─── */
.sigma-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--borda);
  padding: 8px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background .25s, border-color .25s;
}
.topbar-breadcrumb { flex: 1; min-width: 0; }
.topbar-breadcrumb .breadcrumb {
  margin: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.topbar-breadcrumb .breadcrumb-item {
  font-size: 12px;
  color: var(--texto-muted);
  white-space: nowrap;
}
.topbar-breadcrumb .breadcrumb-item.active {
  color: var(--texto);
  font-weight: 600;
}
.topbar-breadcrumb .breadcrumb-item a {
  color: var(--texto-muted);
  text-decoration: none;
  transition: color .15s;
}
.topbar-breadcrumb .breadcrumb-item a:hover { color: var(--cor-acento-texto); }
.topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--texto-muted);
  opacity: .5;
}

/* ─── Container das views ─── */
.view-container {
  padding: 24px 32px 28px;
}

/* ─── Animação de entrada das views ─── */
@keyframes sigma-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page-header,
.sigma-card,
.contadores-rail,
.filtros-bar {
  animation: sigma-fade-in .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  .page-header, .sigma-card, .contadores-rail, .filtros-bar { animation: none; }
}

/* ─── Conteúdo ─── */
.sigma-conteudo {
  margin-left: var(--sidebar-w);
  flex: 1;
  /* P5.2 — a causa REAL do refluxo quebrado em 320px (WCAG 1.4.10), e ela não estava
     em tela nenhuma: estava aqui. Item de flex nasce com `min-width: auto`, o que o
     proíbe de encolher abaixo da largura mínima do próprio conteúdo. Uma tabela larga
     lá dentro inflava este <main>; a topbar, que é 100% dele, saía junto para fora da
     tela — e o auditor apontava o SINO como culpado, que é só o último passageiro do
     ônibus. Com `min-width: 0` o <main> volta a poder encolher, e a rolagem lateral
     fica onde a norma permite que ela fique: DENTRO da tabela (.table-responsive),
     não na página. Um número, oito telas. */
  min-width: 0;
  padding: 0;
  min-height: 100vh;
  transition: margin-left .25s ease;
}

/* ═══════════════════════════════════════════════════════════
   COMPONENTES COMUNS
═══════════════════════════════════════════════════════════ */

/* Card */
.sigma-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra);
  border: 1px solid var(--borda);
  overflow: hidden;
  transition: background .25s, border-color .25s;
}
.sigma-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sigma-card-header h5, .sigma-card-header h6 {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--texto);
}
.sigma-card-body { padding: 20px; }

/* Stat cards */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--sombra);
  border: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .25s;
  /* Todos os irmãos com a MESMA altura, mesmo que um deles cresça. */
  height: 100%;
  /* P5.2 (WCAG 1.4.4) — com o texto no maior tamanho, o rótulo do cartão deixava de
     caber ao lado do ícone e VAZAVA da caixa: o retângulo do cartão continuava dentro
     da tela, mas a frase saía por baixo dele e empurrava a página. Quem amplia a letra
     é justamente quem não pode rolar a página de lado para ler cada linha. O cartão
     agora quebra em duas linhas em vez de esticar. */
  flex-wrap: wrap;
}
.stat-icone {
  width: 42px; height: 42px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.stat-icone.azul    { background: #dbeafe; color: #1d4ed8; }
.stat-icone.verde   { background: #dcfce7; color: #15803d; }
.stat-icone.amarelo { background: #fef9c3; color: #a16207; }
.stat-icone.vermelho{ background: #fee2e2; color: #b91c1c; }
.stat-icone.roxo    { background: #f3e8ff; color: #7e22ce; }
.stat-icone.cinza   { background: #f1f5f9; color: #475569; }

[data-bs-theme="dark"] .stat-icone.azul    { background: #1e3a5f; color: #60a5fa; }
[data-bs-theme="dark"] .stat-icone.verde   { background: #14532d; color: #4ade80; }
[data-bs-theme="dark"] .stat-icone.amarelo { background: #422006; color: #fbbf24; }
[data-bs-theme="dark"] .stat-icone.vermelho{ background: #4c0519; color: #f87171; }
[data-bs-theme="dark"] .stat-icone.roxo    { background: #3b0764; color: #c084fc; }
[data-bs-theme="dark"] .stat-icone.cinza   { background: #1e293b; color: #94a3b8; }

.stat-numero { font-size: 24px; font-weight: 800; color: var(--texto); line-height: 1; overflow-wrap: anywhere; }
.stat-label  { font-size: 11.5px; color: var(--texto-muted); margin-top: 3px; overflow-wrap: anywhere; }
/* B10-P2 — o texto do card precisa poder encolher p/ o número não estourar
   a lateral em telas estreitas (tablet); o ícone tem flex-shrink:0.
 *
 * P6 (2026-08-03) — `flex: 1 1 0` acrescentado, e é ele que resolve o cartão
 * DESALINHADO. O `flex-wrap` acima decide quebrar comparando a largura NATURAL
 * do texto com o espaço livre; como cada cartão tem uma legenda de comprimento
 * diferente, a quebra caía em uns e não em outros — "Usuários ativos"
 * (5 admins · 0 inativos) e "Eventos hoje" (registros de auditoria) são as duas
 * mais longas e viravam sozinhas, ficando mais altas que as vizinhas. Medido:
 * entre 1270px e 1320px de faixa, exatamente 2 dos 6 quebravam (alturas 104 e
 * 168) — 150px de larguras de janela com o painel irregular.
 * Com a base zerada, a largura natural do texto sai da conta e os seis passam a
 * decidir igual, em qualquer largura. O texto continua encolhendo (min-width:0)
 * e quebrando dentro do cartão (overflow-wrap), que é o que impede o vazamento
 * que o P5.2 foi corrigir. */
.stat-card > *:not(.stat-icone) { min-width: 0; flex: 1 1 0; }
/* P5 — sem o `opacity:.8`, que levava o muted de 4,9:1 para 3,94:1. */
.stat-sub    { font-size: 11px; color: var(--texto-muted); margin-top: 3px; overflow-wrap: anywhere; }

/* Stat card com alerta pulsante */
.stat-alerta {
  border-left: 3px solid var(--cor-perigo) !important;
  animation: statPulse 2s ease-in-out infinite;
}
@keyframes statPulse {
  0%, 100% { box-shadow: var(--sombra); }
  50%       { box-shadow: 0 0 0 3px rgba(220,53,69,.18), var(--sombra); }
}

/* Caixa de gráfico (P5-1, 2026-07-24) — o que faz o canvas ENCOLHER junto com a janela.
 *
 * O Chart.js com `responsive: true` observa o elemento-pai e redesenha no tamanho dele.
 * Isso funciona no CARREGAMENTO e falhava ao ARRASTAR A BORDA da janela, por um impasse:
 * a coluna que segura o gráfico é item de flex e nasce com `min-width: auto`, o que a
 * proíbe de encolher abaixo da largura do próprio conteúdo — e o conteúdo era um canvas
 * já desenhado com a largura de antes. A coluna esperava o canvas encolher; o canvas
 * esperava a coluna encolher. Quem abria a tela estreita não via nada (o canvas nascia
 * pequeno); quem trabalha com duas janelas lado a lado — o processo de um lado, o outro
 * sistema do outro, que numa câmara é o normal — via o painel vazar para fora da tela.
 *
 * `min-width: 0` desfaz o impasse (é o mesmo conserto que o `<main>` recebeu no P5.2) e
 * `overflow: hidden` garante que, no quadro entre a janela mudar e o Chart.js redesenhar,
 * o canvas ainda grande não empurre a página.
 *
 * ⚠️ `min-width: 0` sozinho NÃO resolve, e a conta diz por quê: o painel travava em
 * 444px, que é exatamente a largura do canvas (402) mais o respiro do cartão (42) — e,
 * depois de redesenhado, em 342, que é 300 + 42. Enquanto o canvas estiver NO FLUXO, ele
 * é o piso do tamanho intrínseco de tudo o que está acima dele, e nenhum `min-width` no
 * caminho desfaz isso. Tirar o canvas do fluxo (`position: absolute`) é o que corta a
 * dependência: a caixa passa a ter a altura que se declarou e a largura que sobrar, e o
 * Chart.js — que observa o PAI — enfim vê o pai encolher e redesenha no tamanho novo. */
.grafico-caixa {
  position: relative;
  width: 100%;
  min-width: 0;
}
.grafico-caixa > canvas {
  position: absolute;
  inset: 0;
}
/* A coluna também precisa poder encolher: sem isto o impasse volta um nível acima. */
.grafico-coluna { min-width: 0; }

/* Feed de atividades */
.atividade-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--borda);
  transition: background .1s;
}
.atividade-item:last-child { border-bottom: none; }
.atividade-item:hover { background: var(--sidebar-hover); }

.ativ-icone {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ativ-icone.azul    { background: #dbeafe; color: #1d4ed8; }
.ativ-icone.verde   { background: #dcfce7; color: #15803d; }
.ativ-icone.vermelho{ background: #fee2e2; color: #b91c1c; }
.ativ-icone.cinza   { background: #f1f5f9; color: #475569; }

[data-bs-theme="dark"] .ativ-icone.azul    { background: #1e3a5f; color: #60a5fa; }
[data-bs-theme="dark"] .ativ-icone.verde   { background: #14532d; color: #4ade80; }
[data-bs-theme="dark"] .ativ-icone.vermelho{ background: #4c0519; color: #f87171; }
[data-bs-theme="dark"] .ativ-icone.cinza   { background: #1e293b; color: #94a3b8; }

.ativ-corpo { flex: 1; min-width: 0; }
.ativ-desc  { font-size: 13px; color: var(--texto); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ativ-tempo { font-size: 11px; margin-top: 2px; }

/* Tabela */
.sigma-table { width: 100%; border-collapse: collapse; }
.sigma-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--thead-bg);
  color: var(--texto-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
}
.sigma-table tbody tr { border-bottom: 1px solid var(--borda); transition: background .1s; }
.sigma-table tbody tr:last-child { border-bottom: none; }
.sigma-table tbody tr:hover { background: var(--row-hover); }
.sigma-table td { padding: 11px 14px; vertical-align: middle; color: var(--texto); }

/* B23 — hover dos itens de autocomplete (antes feito por onmouseover inline,
   bloqueado pela CSP script-src-attr 'none'). */
.ac-item:hover, .tram-ac-item:hover { background: var(--row-hover); }
.hover-bg:hover { background: var(--bs-primary-bg-subtle); }

/* Densidade de linha */
body.density-compact  .sigma-table td { padding: 5px 14px; }
body.density-spacious .sigma-table td { padding: 18px 14px; }

/* Cards que contêm tabelas com scroll horizontal: sem border (a borda 1px aparece
   à esquerda mas não à direita quando a tabela ultrapassa o viewport, criando
   assimetria visual). O shadow já provê elevação suficiente. */
.sigma-card.split-pane-wrap { border: none; }

/* Edição inline — mini-select que aparece sobre a célula */
.inline-edit-wrap { position: relative; display: inline-block; }
.inline-edit-sel {
  font-size: .82rem; padding: 2px 6px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--cor-acento); background: var(--card); color: var(--texto);
  min-width: 100px;
}

/* Dropdown customizado de flag/status (substitui <select> nativo) */
.inline-picker {
  position: fixed;
  z-index: 9100;
  /* Era `var(--card)` — token que NÃO EXISTE nesta base (o da casa é
     `--bg-card`). A lista saía com fundo transparente, sobrepondo a linha da
     tabela. Passou despercebido porque a função `inlinePicker` também não
     existia: componente órfão nos DOIS lados, e nenhum dos dois defeitos podia
     revelar o outro. */
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 4px 0;
  min-width: 170px;
  outline: none;
}
.inline-picker-item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  font-size: .83rem;
  color: var(--texto);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.inline-picker-item:hover { background: rgba(0,0,0,.06); }
.inline-picker-item.selecionado { font-weight: 600; color: var(--cor-acento-texto); }
@media (prefers-color-scheme: dark) {
  .inline-picker-item:hover { background: rgba(255,255,255,.08); }
}

/* Visões salvas — botão ao lado de filtros salvos */
.btn-visoes { color: var(--cor-acento-texto); }
.vs-item-btn { font-size: 13px; color: var(--texto); }

/* Prazo de atendimento — borda esquerda por estado */
.tr-prazo-vencido { border-left: 3px solid var(--cor-perigo) !important; }
.tr-prazo-alerta  { border-left: 3px solid var(--cor-aviso)  !important; }
.tr-prazo-ok      { border-left: 3px solid var(--cor-sucesso) !important; }
/* aliases legados (processos ainda usa) */
.tr-sla-vencido { border-left: 3px solid var(--cor-perigo) !important; }
.tr-sla-alerta  { border-left: 3px solid var(--cor-aviso)  !important; }
.tr-sla-ok      { border-left: 3px solid var(--cor-sucesso) !important; }
.tr-urgente     { border-left: 3px solid var(--cor-perigo) !important; }

/* Sinalizadores pessoais de processo (flags) — borda lateral colorida */
.flag-urgente      { border-left: 3px solid var(--cor-perigo)  !important; }
.flag-acompanhando { border-left: 3px solid var(--cor-aviso)   !important; }
.flag-aguardando   { border-left: 3px solid #94a3b8            !important; }
.flag-pronto       { border-left: 3px solid var(--cor-sucesso) !important; }

/* Skeleton cell — célula de tabela em carregamento */
.sk-cell {
  display: block;
  height: 13px;
  border-radius: 4px;
  /* BRAND-3e: brilho dourado 8% no ápice do shimmer (a marca respira até no carregar). */
  background: linear-gradient(90deg, var(--borda) 25%, color-mix(in srgb, var(--marca-ouro) 8%, var(--bg)) 50%, var(--borda) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s infinite;
}

/* Badges de status */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-status.aberto        { background: #e0e7ff; color: #4338ca; border-color: rgba(67,56,202,.2); }
.badge-status.em_tramitacao { background: #dbeafe; color: #1d4ed8; border-color: rgba(29,78,216,.2); }
.badge-status.concluido     { background: #dcfce7; color: #15803d; border-color: rgba(21,128,61,.2); }
.badge-status.arquivado     { background: #f1f5f9; color: #475569; border-color: rgba(71,85,105,.15); }
.badge-status.cancelado     { background: #fee2e2; color: #b91c1c; border-color: rgba(185,28,28,.2); }
.badge-status.pendente      { background: #fef9c3; color: #a16207; border-color: rgba(161,98,7,.2); }
.badge-status.confirmado    { background: #dcfce7; color: #15803d; border-color: rgba(21,128,61,.2); }
.badge-status.recusado      { background: #fee2e2; color: #b91c1c; border-color: rgba(185,28,28,.2); }
.badge-status.alta          { background: #fee2e2; color: #b91c1c; border-color: rgba(185,28,28,.2); }
.badge-status.normal        { background: #f1f5f9; color: #475569; border-color: rgba(71,85,105,.15); }

[data-bs-theme="dark"] .badge-status.aberto        { background: #312e81; color: #a5b4fc; border-color: rgba(165,180,252,.2); }
[data-bs-theme="dark"] .badge-status.em_tramitacao { background: #1e3a5f; color: #60a5fa; border-color: rgba(96,165,250,.2); }
[data-bs-theme="dark"] .badge-status.concluido     { background: #14532d; color: #4ade80; border-color: rgba(74,222,128,.2); }
[data-bs-theme="dark"] .badge-status.arquivado     { background: #1e293b; color: #94a3b8; border-color: rgba(148,163,184,.15); }
[data-bs-theme="dark"] .badge-status.cancelado     { background: #4c0519; color: #f87171; border-color: rgba(248,113,113,.2); }
[data-bs-theme="dark"] .badge-status.pendente      { background: #422006; color: #fbbf24; border-color: rgba(251,191,36,.2); }
[data-bs-theme="dark"] .badge-status.confirmado    { background: #14532d; color: #4ade80; border-color: rgba(74,222,128,.2); }
[data-bs-theme="dark"] .badge-status.recusado      { background: #4c0519; color: #f87171; border-color: rgba(248,113,113,.2); }
[data-bs-theme="dark"] .badge-status.alta          { background: #4c0519; color: #f87171; border-color: rgba(248,113,113,.2); }
[data-bs-theme="dark"] .badge-status.normal        { background: #1e293b; color: #94a3b8; border-color: rgba(148,163,184,.15); }
.badge-status.em_analise   { background: #e0f2fe; color: #0369a1; border-color: rgba(3,105,161,.2); }
.badge-status.autuado      { background: #dcfce7; color: #15803d; border-color: rgba(21,128,61,.2); }
.badge-status.juntado      { background: #d1fae5; color: #065f46; border-color: rgba(6,95,70,.2); }
.badge-status.devolvido    { background: #fef3c7; color: #92400e; border-color: rgba(146,64,14,.2); }
.badge-status.recebido     { background: #eff6ff; color: #1e40af; border-color: rgba(30,64,175,.2); }
.badge-status.expedido     { background: #f0fdf4; color: #166534; border-color: rgba(22,101,52,.2); }
.badge-status.entrada      { background: #eff6ff; color: #1e40af; border-color: rgba(30,64,175,.2); }
.badge-status.saida        { background: #f0fdf4; color: #166534; border-color: rgba(22,101,52,.2); }
.badge-status.interna      { background: #ecfeff; color: #0e7490; border-color: rgba(14,116,144,.2); }
.badge-status.lai          { background: #fffbeb; color: #92400e; border-color: rgba(146,64,14,.2); }
.badge-status.negado       { background: #fee2e2; color: #b91c1c; border-color: rgba(185,28,28,.2); }
.badge-status.recurso      { background: #fef9c3; color: #a16207; border-color: rgba(161,98,7,.2); }
[data-bs-theme="dark"] .badge-status.em_analise   { background: #0c4a6e; color: #38bdf8; border-color: rgba(56,189,248,.2); }
[data-bs-theme="dark"] .badge-status.autuado      { background: #14532d; color: #4ade80; border-color: rgba(74,222,128,.2); }
[data-bs-theme="dark"] .badge-status.juntado      { background: #064e3b; color: #34d399; border-color: rgba(52,211,153,.2); }
[data-bs-theme="dark"] .badge-status.devolvido    { background: #451a03; color: #fb923c; border-color: rgba(251,146,60,.2); }
[data-bs-theme="dark"] .badge-status.recebido     { background: #1e3a5f; color: #60a5fa; border-color: rgba(96,165,250,.2); }
[data-bs-theme="dark"] .badge-status.expedido     { background: #14532d; color: #86efac; border-color: rgba(134,239,172,.2); }
[data-bs-theme="dark"] .badge-status.entrada      { background: #1e3a5f; color: #60a5fa; border-color: rgba(96,165,250,.2); }
[data-bs-theme="dark"] .badge-status.saida        { background: #14532d; color: #86efac; border-color: rgba(134,239,172,.2); }
[data-bs-theme="dark"] .badge-status.interna      { background: #083344; color: #22d3ee; border-color: rgba(34,211,238,.2); }
[data-bs-theme="dark"] .badge-status.lai          { background: #451a03; color: #fbbf24; border-color: rgba(251,191,36,.2); }
[data-bs-theme="dark"] .badge-status.negado       { background: #4c0519; color: #f87171; border-color: rgba(248,113,113,.2); }
[data-bs-theme="dark"] .badge-status.recurso      { background: #422006; color: #fbbf24; border-color: rgba(251,191,36,.2); }

/* HARMONIA-sobras: vocabulário canônico de status/prazo compartilhado entre módulos.
   Antes cada módulo (contratos, requerimentos, ouvidoria) pintava seu status com
   Bootstrap solto (bg-success, bg-warning…). Agora todos falam a MESMA língua visual
   (mesma forma/tom do .badge-status), agrupados por hue semântica. */
.badge-status.em_vigor,
.badge-status.respondido,
.badge-status.respondida,
.badge-status.sla-verde      { background: #dcfce7; color: #15803d; border-color: rgba(21,128,61,.2); }
.badge-status.vencendo,
.badge-status.escalada,
.badge-status.sindicancia,
.badge-status.sla-amarelo    { background: #fef9c3; color: #a16207; border-color: rgba(161,98,7,.2); }
.badge-status.vencido,
.badge-status.pad,
.badge-status.sla-vermelho   { background: #fee2e2; color: #b91c1c; border-color: rgba(185,28,28,.2); }
.badge-status.rescindido,
.badge-status.encerrado,
.badge-status.recebida       { background: #f1f5f9; color: #475569; border-color: rgba(71,85,105,.15); }

[data-bs-theme="dark"] .badge-status.em_vigor,
[data-bs-theme="dark"] .badge-status.respondido,
[data-bs-theme="dark"] .badge-status.respondida,
[data-bs-theme="dark"] .badge-status.sla-verde      { background: #14532d; color: #4ade80; border-color: rgba(74,222,128,.2); }
[data-bs-theme="dark"] .badge-status.vencendo,
[data-bs-theme="dark"] .badge-status.escalada,
[data-bs-theme="dark"] .badge-status.sindicancia,
[data-bs-theme="dark"] .badge-status.sla-amarelo    { background: #422006; color: #fbbf24; border-color: rgba(251,191,36,.2); }
[data-bs-theme="dark"] .badge-status.vencido,
[data-bs-theme="dark"] .badge-status.pad,
[data-bs-theme="dark"] .badge-status.sla-vermelho   { background: #4c0519; color: #f87171; border-color: rgba(248,113,113,.2); }
[data-bs-theme="dark"] .badge-status.rescindido,
[data-bs-theme="dark"] .badge-status.encerrado,
[data-bs-theme="dark"] .badge-status.recebida       { background: #1e293b; color: #94a3b8; border-color: rgba(148,163,184,.15); }

/* Capa de dossiê (ELEGÂNCIA 1 — capaDossie): título/objeto em 1 linha discreta.
   .capa-dossie-meta zera o min-width para o truncamento funcionar no flex. */
.capa-dossie-meta   { min-width: 0; }
.capa-dossie-titulo { max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inputs / forms */
.form-control, .form-select {
  background: var(--input-bg);
  border-color: var(--input-borda);
  color: var(--texto);
  font-size: 14px;
  transition: background .25s, border-color .25s, color .25s;
}
.form-control:focus, .form-select:focus {
  background: var(--input-bg);
  color: var(--texto);
  border-color: var(--cor-acento);
}
.form-control::placeholder { color: var(--texto-muted); }
.form-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--texto); }

/* ─── Validação inline de campos ─── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--cor-perigo);
  background-image: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--cor-perigo);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}
.invalid-feedback {
  font-size: 12px;
  color: var(--cor-perigo-texto);
  margin-top: 4px;
}

/* Modal escuro */
[data-bs-theme="dark"] .modal-content {
  background: var(--bg-card);
  border-color: var(--borda);
  color: var(--texto);
}
[data-bs-theme="dark"] .btn-close { filter: invert(1); }

/* Input groups */
[data-bs-theme="dark"] .input-group-text {
  background: var(--thead-bg);
  border-color: var(--input-borda);
  color: var(--texto-muted);
}

/* Page header */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-header h4,
.page-header h5 {
  font-weight: 800;
  font-size: 20px;
  margin: 0;
  color: var(--texto);
}
.page-header h5 { font-size: 17px; }
.page-header .breadcrumb { margin: 0; font-size: 12px; }
.page-header .breadcrumb-item { color: var(--texto-muted); }
.page-header .breadcrumb-item.active { color: var(--texto); }

/* ─── Linha do tempo ─── */
.timeline { position: relative; padding: 0; list-style: none; }
.timeline::before {
  content: '';
  position: absolute;
  left: 23px; top: 0; bottom: 0;
  width: 2px;
  background: var(--borda);
}
.timeline-item { position: relative; padding: 0 0 28px 56px; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-icone {
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  border: 3px solid var(--bg);
  z-index: 1;
}
.timeline-icone.envio       { background: #dbeafe; color: #1d4ed8; }
.timeline-icone.confirmado  { background: #dcfce7; color: #15803d; }
.timeline-icone.recusado    { background: #fee2e2; color: #b91c1c; }
.timeline-icone.pendente    { background: #fef9c3; color: #a16207; }

[data-bs-theme="dark"] .timeline-icone.envio      { background: #1e3a5f; color: #60a5fa; }
[data-bs-theme="dark"] .timeline-icone.confirmado { background: #14532d; color: #4ade80; }
[data-bs-theme="dark"] .timeline-icone.recusado   { background: #4c0519; color: #f87171; }
[data-bs-theme="dark"] .timeline-icone.pendente   { background: #422006; color: #fbbf24; }

.timeline-card {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: background .25s;
}
.timeline-meta { font-size: 11px; color: var(--texto-muted); margin-bottom: 6px; }
.timeline-despacho {
  font-size: 13px;
  color: var(--texto);
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 6px;
  border-left: 3px solid var(--cor-acento);
  margin: 8px 0;
  line-height: 1.5;
}

/* ─── Filtros ─── */
.filtros-bar {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
  padding: 10px 0 14px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
/* min-width 165px: espaço p/ rótulos como "Todos os status"/"Em tramitação" sem
   truncar ("Todos os statu…"); com flex-wrap acima, quebra a linha antes de cortar (B10 P2). */
.filtros-bar .form-group { flex: 1; min-width: 165px; }

/* ─── Número copiável (B12): botão discreto de copiar ao lado do número ─── */
.num-copia-wrap { display: inline-flex; align-items: center; gap: 4px; }
.btn-copia-num {
  border: none;
  background: transparent;
  color: var(--texto-muted);
  padding: 1px 4px;
  border-radius: 5px;
  line-height: 1;
  font-size: .82em;
  cursor: pointer;
  opacity: 0;                 /* só aparece no hover do grupo — sem poluir */
  transition: opacity .12s, background .12s, color .12s;
}
.num-copia-wrap:hover .btn-copia-num,
.btn-copia-num:focus-visible { opacity: 1; }
.btn-copia-num:hover { background: var(--bg-hover); color: var(--cor-acento-texto); }
.btn-copia-num:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 1px; }
/* Em telas de toque não há hover — mantém sempre visível, mais discreto */
@media (hover: none) {
  .btn-copia-num { opacity: .55; }
}

/* ══════════════════════════════════════════════════════════════════
   GRAMÁTICA DE LISTAS (HARMONIA-1) — número, sinais, foco, assunto.
   Compartilhada por todas as listas via helpers de api.js.
══════════════════════════════════════════════════════════════════ */

/* Nº de entidade: mono + cor primária no claro / dourado no escuro
   (dourado falha contraste em fundo claro — lição B18/A11Y-3). */
.num-entidade-wrap { display: inline-flex; align-items: center; gap: 4px; }
.num-entidade {
  font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: -.2px;
  color: var(--cor-acento-texto);
  text-decoration: none;
  white-space: nowrap;
}
a.num-entidade:hover { text-decoration: underline; }
button.num-entidade { border: none; background: transparent; padding: 0; cursor: pointer; }
button.num-entidade:hover { text-decoration: underline; }
button.num-entidade:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 1px; border-radius: 3px; }

/* Coluna de sinais de triagem — 📎 anexos · 🔒 sigilo · ⛨ dados pessoais.
   Ícone nunca canal único: cada .sinal tem title/aria-label (A11Y-1). */
.sinais-triagem { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; }
.sinais-triagem .sinal {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--texto-muted); line-height: 1;
}
.sinais-triagem .sinal-n { font-size: .72rem; font-weight: 600; }
.sinais-triagem .sinal-aguardando { color: var(--cor-aviso-texto); }
.sinais-triagem .sinal-sigilo    { color: var(--cor-perigo-texto); }
.sinais-triagem .sinal-dp--firme { color: light-dark(#b45309, #f59e0b); }  /* âmbar decidido */
.sinais-triagem .sinal-dp--tenue { color: var(--texto-muted); opacity: .7; } /* detectado, a conferir */
.sinais-vazio { color: var(--borda); user-select: none; }

/* ── Glifo de estado da marca Actaria (BRAND-3a) ──────────────────────
   O "A" de três traços; a barra de ouro é a linguagem de status. Geometria
   fixa (helper glifoEstado em api.js); aqui só as cores, que acompanham
   tema claro/escuro. Tokens de marca invioláveis (não seguem B18). */
.glifo { display: inline-block; vertical-align: middle; flex: none; }
.glifo .g-haste, .glifo .g-barra { fill: none; stroke-width: 11; stroke-linecap: butt; }
/* Hastes: tinta da marca sobre superfície clara; creme sobre superfície escura. */
.glifo .g-haste { stroke: light-dark(var(--marca-ink), #F6F5F0); }
.glifo .g-barra { stroke: var(--marca-prata); }              /* tramitação = prata */
.glifo--minuta .g-haste { stroke: var(--marca-minuta); }     /* minuta = tudo cinza */
.glifo--minuta .g-barra { stroke: var(--marca-minuta); stroke-dasharray: 7 8; }
.glifo--assinado .g-barra,
.glifo--intermediario .g-barra { stroke: var(--marca-ouro); } /* assinado / 3½ = ouro */
.glifo--permanente .g-losango { fill: var(--marca-ouro); }    /* permanente = losango de ouro */
.glifo--sembarra .g-haste { stroke: var(--marca-minuta); }    /* 404 = "A" sem barra, cinza */

/* Glifo grande e discreto nos estados de borda (vazio/404): centralizado,
   substitui o <i> genérico do .empty-state. */
.empty-state-glifo {
  display: block;
  margin: 0 auto 16px;
  opacity: .85;
}
.empty-state--sm .empty-state-glifo { margin-bottom: 10px; }

/* Glifo + rótulo textual no mesmo grupo (satisfaz A11Y-1 sozinho). */
.glifo-rotulo { display: inline-flex; align-items: center; gap: 6px; }
.glifo-rotulo-txt { font-size: var(--text-sm); color: var(--texto-muted); }

/* Glifo como sinal de linha, antes do nº da entidade: respiro à direita. */
.glifo-lista { margin-right: 6px; }

/* ── Arquivo Vivo (BRAND-3e): o ciclo do arquivo lido pelos glifos ── */
.arquivo-vivo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;
  align-items: flex-end;
}
.arqvivo-cel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 68px;
  text-align: center;
}
.arqvivo-num {
  font-family: var(--fonte-cerimonial);
  font-size: 26px;
  line-height: 1;
  color: var(--texto);
  margin-top: 4px;
}
.arqvivo-rot { font-size: 11px; color: var(--texto-muted); }
/* Versão ampliada para o monitor da sala (Modo TV): via classe explícita
   (--tv) ou pelo ancestral body.painel-tv (o Painel entra em TV só trocando
   a classe do body, sem re-render — o CSS ancestral cobre esse caso). */
.arquivo-vivo--tv,
body.painel-tv .arquivo-vivo { gap: 28px; }
.arquivo-vivo--tv .arqvivo-cel,
body.painel-tv .arqvivo-cel { min-width: 120px; gap: 4px; }
.arquivo-vivo--tv .arqvivo-num,
body.painel-tv .arqvivo-num { font-size: 52px; }
.arquivo-vivo--tv .arqvivo-rot,
body.painel-tv .arqvivo-rot { font-size: 15px; }
/* SVG: a largura/altura por CSS vence os atributos inline do glifo. */
.arquivo-vivo--tv .arqvivo-cel .glifo,
body.painel-tv .arqvivo-cel .glifo { width: 60px; height: 60px; }

/* Foco de teclado na linha (↑/↓+Enter na fila): filete 3px à esquerda —
   vira a travessa da marca no BRAND-3. Sem outline retangular. */
.sigma-table tbody tr:focus-visible,
.sigma-table tbody tr.tr-foco {
  outline: none;
  box-shadow: inset 3px 0 0 0 var(--foco-anel);
  background: var(--row-hover);
}

/* Assunto: até 2 linhas por padrão (fim do "…" cru); chevron expande inline. */
.cel-assunto { max-width: 340px; }
.cel-assunto .cel-assunto-txt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.cel-assunto.expandido .cel-assunto-txt { -webkit-line-clamp: unset; }
.cel-assunto-expandir {
  /* P5 — o acento como TEXTO em fundo claro reprova (2,94:1). Mesma correção da A3. */
  border: none; background: transparent; color: var(--cor-acento-texto);
  font-size: .72rem; padding: 1px 3px; cursor: pointer; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 2px;
}
.cel-assunto-expandir:hover { background: var(--row-hover); }
.cel-assunto-expandir:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 1px; }

/* ══════════════════════════════════════════════════════════════════
   FÍSICA DE MODAL (HARMONIA-2, A9) — presença uniforme para todos os
   modais: entrada leve (scale .98→1 + fade 150ms; gesto, não cerimônia),
   e borda superior semântica opt-in para atos.
══════════════════════════════════════════════════════════════════ */
.modal.fade .modal-dialog {
  transform: scale(.98);
  transition: transform .15s ease-out, opacity .15s ease-out;
}
.modal.show .modal-dialog { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none; transform: none; }
}
/* Borda superior do ato — opt-in via classe no .modal:
   .modal-ato (primária, atos comuns) · .modal-ato-solene (atos jurídicos). */
.modal-ato .modal-content        { border-top: 3px solid var(--cor-primaria); }
/* Filete do ato solene: é BORDA (limite 3:1), não letra — fica com o acento cheio.
   A troca em massa do P5.2 passou por aqui e foi desfeita de propósito: `--cor-x`
   pinta superfície, `--cor-x-texto` pinta letra, e confundir os dois nas duas direções
   custa igual (aqui teria apagado o ouro de um filete que podia ostentá-lo). */
.modal-ato-solene .modal-content { border-top: 3px solid var(--cor-acento); }
/* Linha de contexto no header do modal — nº da entidade em mono. */
.modal-ctx { font-size: .8rem; color: var(--texto-muted); font-weight: 500; }
.modal-ctx .num-entidade { font-size: .8rem; }

/* ══════════════════════════════════════════════════════════════════
   GAVETA LATERAL (HARMONIA-3) — o modal da Correspondência vira uma
   gaveta de ~600px que desliza da direita: triagem em série (↑/↓) sem
   perder a lista. Especificidade .modal.modal-drawer para vencer a
   física global de modal (scale) definida acima.
══════════════════════════════════════════════════════════════════ */
.modal.modal-drawer .modal-dialog {
  margin: 0 0 0 auto;
  max-width: 620px;
  width: 100%;
  height: 100%;
  transform: translateX(24px);
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.modal.modal-drawer.show .modal-dialog { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .modal.modal-drawer .modal-dialog { transform: none; transition: none; }
}
.modal-drawer .modal-content {
  height: 100%;
  border-radius: 0;
  border-top: none;
  border-left: 3px solid var(--cor-primaria);
}
.modal-drawer .modal-body { overflow-y: auto; }
.modal-drawer .drawer-nav { display: inline-flex; gap: 2px; }
.modal-drawer .drawer-nav button {
  border: 1px solid var(--borda); background: var(--bg-card); color: var(--texto);
  border-radius: 5px; width: 30px; height: 30px; cursor: pointer; line-height: 1;
}
.modal-drawer .drawer-nav button:hover:not(:disabled) { background: var(--row-hover); }
.modal-drawer .drawer-nav button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 660px) {
  .modal.modal-drawer .modal-dialog { max-width: 100%; }
}

/* ─── Chips de filtros ativos ─── */
.filtros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
  margin-bottom: 14px;
  min-height: 0;
}
.filtros-chips:empty { margin-bottom: 18px; }
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 12px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.3);
  border-radius: 20px;
  font-size: 12px;
  color: var(--cor-acento-texto);
  white-space: nowrap;
}
.chip-rem {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cor-acento-texto);
  font-size: 15px;
  line-height: 1;
  opacity: .7;
}
.chip-rem:hover { color: var(--cor-perigo-texto); opacity: 1; }

/* ─── Contadores de status clicáveis (rail compacto) ─── */
.contadores-rail {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.contador-item {
  background: none;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--texto-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.contador-item:hover { background: var(--row-hover); color: var(--texto); }
.contador-item.ativo  { background: rgba(14,165,233,.1); color: var(--cor-acento-texto); font-weight: 600; }
.contador-item .cnt-n { font-weight: 700; font-size: 14px; color: var(--texto); margin-right: 4px; }
.contador-item.ativo .cnt-n { color: var(--cor-acento-texto); }
.cnt-sep { color: var(--borda); font-size: 14px; user-select: none; padding: 0 2px; }

/* Tabs de tipo no rail de correspondência (visual idêntico ao contador-item,
   classe separada para não disparar o listener de data-status) */
.prot-tipo-tab {
  background: none;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--texto-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.prot-tipo-tab:hover { background: var(--row-hover); color: var(--texto); }
.prot-tipo-tab.ativo { background: rgba(14,165,233,.1); color: var(--cor-acento-texto); font-weight: 600; }  /* A3: idem .sigma-tab.ativo */
.prot-tipo-sep {
  width: 1px; height: 16px;
  background: var(--borda);
  align-self: center;
  margin: 0 6px;
  flex-shrink: 0;
}

/* ─── Barra de ação contextual (seleção em lote) ─── */
.barra-lote {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(14,165,233,.08);
  border: 1px solid rgba(14,165,233,.25);
  border-radius: 8px;
  margin-bottom: 12px;
  min-height: 50px;
}
.barra-lote .lote-count { font-weight: 700; color: var(--cor-acento-texto); font-size: 14px; white-space: nowrap; }
.tr-selecionada { background: rgba(14,165,233,.07) !important; }
.col-check { width: 38px !important; padding: 6px 8px !important; text-align: center !important; }

/* ─── Tabs admin ─── */
/* ─── Admin layout: nav lateral + conteúdo ─── */
.admin-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.admin-nav {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--borda);
  padding-right: 6px;
  margin-right: 22px;
}

/* P5.2 — o conteúdo do Admin é o outro item do flex, e nasce com `min-width: auto`:
   não encolhe abaixo do próprio conteúdo. Mesma armadilha do <main> (ver
   .sigma-conteudo). Sem isto, a aba do Admin empurrava a página para fora. */
#admin-aba { min-width: 0; flex: 1; }

/* P5.2 (WCAG 1.4.10) — em 320px a sub-sidebar do Admin comia 202px dos 320
   disponíveis e sobravam 118px para a tela inteira de administração. Numa largura
   dessas ela deixa de ser coluna e vira uma faixa horizontal de rolagem própria:
   o menu continua ali, inteiro, e o conteúdo recupera a largura da tela. */
@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .admin-nav {
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--borda);
    margin-bottom: 14px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 6px;
  }
  /* Rótulo de grupo e separador não fazem sentido numa faixa horizontal. */
  .admin-nav .admin-nav-group-label,
  .admin-nav .admin-nav-sep { display: none; }
  .admin-nav .sigma-tab { flex-shrink: 0; white-space: nowrap; }
}

.admin-nav-group-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-muted);
  /* P5 — o `opacity:.65` derrubava o muted (4,9:1) para 2,72:1. Opacidade é o jeito
     mais silencioso de reprovar em contraste: ninguém a enxerga no CSS como "cor". */
  padding: 14px 10px 3px;
  user-select: none;
}
.admin-nav > .admin-nav-group-label:first-child { padding-top: 2px; }

.admin-nav-sep {
  height: 1px;
  background: var(--borda);
  margin: 6px 10px;
}

/* Cabeçalhos de grupo na aba Sistema de Configurações */
.cfg-grupo-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-muted);
  padding: 20px 0 6px;
  border-bottom: 1px solid var(--borda-card);
  margin-bottom: 12px;
}
.cfg-grupo-label:first-child { padding-top: 0; }

.cfg-subsec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  /* Era `--cor-acento` (o acento de SUPERFÍCIE). Em várias paletas o acento é um
     ouro — 2,94:1 aqui — e o próprio comentário do token, lá no topo, avisa que
     escrever `--cor-acento` numa letra é "visivelmente escrever a coisa errada".
     O aviso estava certo e não era portão: outros 15 lugares fazem o mesmo, e o
     axe só alcançou este. Anotado no BACKLOG. */
  color: var(--cor-acento-texto);
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px dashed var(--borda-card);
  margin-top: 4px;
}

.admin-busca-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--texto-normal);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--borda-card);
  transition: background .12s;
}
.admin-busca-item:last-child { border-bottom: none; }
.admin-busca-item:hover,
.admin-busca-item.ativo { background: var(--hover-bg); }

.sigma-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--texto-muted);
  font-weight: 500;
  font-size: 13px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.sigma-tab:hover { background: var(--bg); color: var(--texto); }
.sigma-tab.ativo  { background: var(--bg); color: var(--cor-acento-texto); font-weight: 600; border-left-color: var(--cor-acento); }  /* A3: texto do acento reprova em fundo claro; a borda pode seguir no acento */

/* ─── Abas horizontais (Minha Mesa ⇄ Pendências, Painel do Setor ⇄ Minha fila) — B11-nav ─── */
.mesa-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 16px;
}
.mesa-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: var(--texto-muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.mesa-tab:hover { color: var(--texto); }
.mesa-tab.active {
  color: var(--cor-acento-texto);
  border-bottom-color: var(--cor-acento-texto);
}
.mesa-tab:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; border-radius: 4px; }
.mesa-tab-badge {
  background: var(--cor-perigo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 999px;
  padding: 0 7px;
  min-width: 18px;
  text-align: center;
}

#admin-aba { flex: 1; min-width: 0; }

/* ─── Filtros de categoria (aba Cargos) ─── */
/* ⚠️ Havia aqui `opacity:.7` no filtro NÃO selecionado, e ela reprovava o AA em três
   botões — sem que houvesse nada de errado com as cores. Opacidade COMPÕE a letra com
   o fundo: os tokens que a casa mediu justamente para serem acessíveis chegavam ao
   olho diluídos (#92400e, 5,59:1, virava #ae7553, 3,36:1; o mesmo com info e sucesso,
   3,34 e 3,12). ⭐ É a irmã da lição do lote 5 — contraste é propriedade de um PAR, e
   um efeito decorativo entra no par sem pedir licença.
   A distinção entre selecionado e não selecionado passou a ser PESO + contorno, que
   não mexem no contraste; `currentColor` mantém o realce na cor semântica do botão e
   funciona nos dois temas. */
.cargo-filtro.ativo { font-weight: 600; box-shadow: inset 0 0 0 2px currentColor; }

/* ─── Paginação ─── */
.sigma-pag {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  flex-wrap: wrap;
}
.sigma-pag--so-resumo { justify-content: flex-end; }
.sigma-pag-resumo { color: var(--texto-muted); font-size: 12.5px; }
.sigma-pag-nums { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sigma-pag-gap { color: var(--texto-muted); padding: 0 2px; }
.sigma-pag button {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
}
.sigma-pag button:hover  { background: var(--cor-acento); color: #fff; border-color: var(--cor-acento); }
.sigma-pag button.ativo  { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.sigma-pag button:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Empty state ─── */
.empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--texto-muted);
}
.empty-state > i {
  font-size: 3rem;
  display: block;
  margin-bottom: 16px;
  opacity: .4;
}
.empty-state-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}
.empty-state-sub {
  font-size: 13px;
  margin-bottom: 16px;
}

/* Variante compacta — painéis, abas, listas secundárias */
.empty-state--sm {
  padding: 24px 16px;
}
.empty-state--sm > i {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.empty-state--sm .empty-state-titulo {
  font-size: 13px;
}
.empty-state--sm .empty-state-sub {
  font-size: 12px;
  margin-bottom: 10px;
}

/* ─── Semáforo de prazo — pill adaptativo a todos os temas/modos ─── */
.sigma-sem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.6;
}
.sigma-sem-verde    { background: rgba(25,135,84,.12);  color: #146c43; }
.sigma-sem-amarelo  { background: rgba(245,158,11,.12); color: #92400e; }
.sigma-sem-vermelho { background: rgba(220,53,69,.12);  color: #842029; }
.sigma-sem-cinza    { background: var(--thead-bg);       color: var(--texto-muted); }
[data-bs-theme="dark"] .sigma-sem-verde    { background: rgba(25,135,84,.22);  color: #4ade80; }
[data-bs-theme="dark"] .sigma-sem-amarelo  { background: rgba(245,158,11,.22); color: #fbbf24; }
[data-bs-theme="dark"] .sigma-sem-vermelho { background: rgba(220,53,69,.22);  color: #f87171; }

/* Pill de prazo específico para LED/edital — mesma semântica, herdado do .sigma-sem */
.led-prazo-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: 4px;
}
.led-prazo-ok     { background: rgba(25,135,84,.12);  color: #146c43; }
.led-prazo-alerta { background: rgba(245,158,11,.12); color: #92400e; }
.led-prazo-vencido { background: rgba(220,53,69,.12); color: #842029; }
[data-bs-theme="dark"] .led-prazo-ok     { background: rgba(25,135,84,.22);  color: #4ade80; }
[data-bs-theme="dark"] .led-prazo-alerta { background: rgba(245,158,11,.22); color: #fbbf24; }
[data-bs-theme="dark"] .led-prazo-vencido { background: rgba(220,53,69,.22); color: #f87171; }

/* ─── Badge fase arquivística (tema-aware) ─── */
.badge-fase {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge-fase.corrente      { background: rgba(14,165,233,.12); color: #0369a1; border-color: rgba(14,165,233,.25); }
.badge-fase.intermediaria { background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.25); }
.badge-fase.permanente    { background: rgba(22,163,74,.12);  color: #15803d; border-color: rgba(22,163,74,.25); }
[data-bs-theme="dark"] .badge-fase.corrente      { background: rgba(14,165,233,.18); color: #38bdf8; border-color: rgba(14,165,233,.2); }
[data-bs-theme="dark"] .badge-fase.intermediaria { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.2); }
[data-bs-theme="dark"] .badge-fase.permanente    { background: rgba(34,197,94,.15);  color: #4ade80; border-color: rgba(34,197,94,.2); }
[data-tema="sepia"]  .badge-fase.corrente      { color: #075985; border-color: rgba(14,165,233,.3); }

/* ─── Colunas ordenáveis ─── */
.th-sortavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .12s;
}
/* P5 — o cabeçalho ordenável é um CONTROLE (clica e reordena a lista), não um rótulo
   passivo: herdava o `--texto-muted` do thead e caía para 3,99:1 sobre a faixa cinza.
   Precisa desta especificidade (2 classes) para vencer `.sigma-table thead th`, que
   é quem pinta o cabeçalho — um `.th-sortavel { color }` solto perdia calado. */
.sigma-table thead th.th-sortavel,
.table thead th.th-sortavel { color: var(--texto); }
.th-sortavel:hover { background: var(--borda) !important; }
.th-sortavel i     { font-size: 10px; opacity: .4; transition: opacity .12s; vertical-align: middle; }
.th-sortavel:hover i,
.th-sort-ativo i   { opacity: 1; }
.th-sort-ativo     { color: var(--cor-acento-texto) !important; }  /* A3: o acento (dourado da marca) reprova em fundo claro */

/* ─── Upload drop zone ─── */
.drop-zone {
  border: 2px dashed var(--borda);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  color: var(--texto-muted);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop-zone:hover, .drop-zone.over {
  border-color: var(--cor-acento);
  background: rgba(46,134,222,.05);
  color: var(--cor-acento-texto);
}
.drop-zone i { font-size: 32px; display: block; margin-bottom: 8px; }

/* Drag-and-drop na aba Peças inteira + Ctrl+V de print (B12) */
.pecas-dropzone-host { position: relative; }
.pecas-drop-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  border: 3px dashed var(--cor-acento);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cor-acento) 10%, var(--bg-card));
  color: var(--cor-acento-texto);
  font-weight: 600; font-size: 1.15rem;
  text-align: center;
  pointer-events: none;
}
.pecas-dropzone-host.arrastando .pecas-drop-overlay { display: flex; }
.pecas-drop-overlay i { font-size: 2.6rem; }
.pecas-drop-overlay small { font-weight: 400; font-size: .85rem; opacity: .8; }

/* Cartões de escolha de política de prazo do calendário (B20-2) */
.cfg-politica-card {
  display: block; height: 100%; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
.cfg-politica-card:hover { border-color: var(--cor-acento); }
.cfg-politica-card.ativa {
  border-color: var(--cor-acento);
  background: color-mix(in srgb, var(--cor-acento) 8%, var(--bg-card));
}

/* ─── Command palette (Ctrl+K) ─── */
#cmd-backdrop {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
#cmd-backdrop.d-none { display: none !important; }
#cmd-box {
  width: min(640px, 95vw);
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  animation: cmd-in .12s ease;
}
@keyframes cmd-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
#cmd-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
}
#cmd-input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 15px; color: var(--texto); font-family: inherit;
}
#cmd-input::placeholder { color: var(--texto-muted); }
#cmd-results { max-height: 400px; overflow-y: auto; }
.cmd-section { padding: 6px 0; }
.cmd-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--texto-muted);
  padding: 6px 16px 2px;
}
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer; transition: background .1s;
}
.cmd-item:hover, .cmd-item.ativo { background: rgba(14,165,233,.08); }
.cmd-item > i { font-size: 14px; color: var(--cor-acento-texto); flex-shrink: 0; }
.cmd-item-main { flex: 1; min-width: 0; }
.cmd-item-titulo { font-size: 13px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-sub { font-size: 11px; color: var(--texto-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-trecho { font-size: 11px; color: var(--texto-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-trecho mark { background: rgba(14,165,233,.22); color: var(--texto); border-radius: 2px; padding: 0 2px; }
.cmd-item-badge { font-size: 10px; flex-shrink: 0; padding: 2px 7px; border-radius: 10px; }
.cmd-empty { padding: 24px; text-align: center; color: var(--texto-muted); font-size: 13px; }

/* Dica dos operadores de busca (e-ARQ 4.2.10–12): aparece no vazio, que é
   quando a pessoa quer outra forma de procurar. Discreta por desenho — quem já
   achou o que queria não precisa lê-la. */
.cmd-dica-busca {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--borda-card);
  font-size: 11.5px; line-height: 1.9; color: var(--texto-muted);
}
.cmd-dica-busca code {
  font-size: 11px; padding: 1px 5px; border-radius: 4px;
  background: light-dark(rgba(15, 23, 42, .06), rgba(255, 255, 255, .09));
  color: var(--texto); border: 1px solid var(--borda-card);
}

/* ─── Prazo vencido — pulso discreto ─── */
.prazo-vencido {
  animation: prazo-pulse 2s ease-in-out infinite;
}
@keyframes prazo-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.01); }
}

/* ─── Barra de progresso de prazo ─── */
.prazo-bar-wrap { margin: 10px 0 4px; }
.prazo-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--borda);
  overflow: hidden;
}
.prazo-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s;
}
.prazo-bar-fill.prazo-ok      { background: var(--cor-sucesso); }
.prazo-bar-fill.prazo-alerta  { background: var(--cor-aviso); }
.prazo-bar-fill.prazo-critico { background: var(--cor-perigo); }
.prazo-contador {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
}
.prazo-banner {
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.prazo-banner.ok      { background: color-mix(in srgb, var(--cor-sucesso) 15%, transparent); color: var(--cor-sucesso-texto); border: 1px solid color-mix(in srgb, var(--cor-sucesso) 30%, transparent); }
.prazo-banner.aviso   { background: color-mix(in srgb, var(--cor-aviso) 15%, transparent); color: #8a6400; border: 1px solid color-mix(in srgb, var(--cor-aviso) 40%, transparent); }
.prazo-banner.critico { background: color-mix(in srgb, var(--cor-perigo) 15%, transparent); color: var(--cor-perigo-texto); border: 1px solid color-mix(in srgb, var(--cor-perigo) 30%, transparent); }

/* ─── Alert-toast personalizado ─── */
.sigma-toast {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  min-width: 260px;
  max-width: 360px;
}

/* Botão "Desfazer" no toast de ação reversível (HOSPITALIDADE 3): ouro sobre o
   grafite, foco visível para teclado (linha de base de a11y). */
.sigma-toast-desfazer .sigma-toast-undo {
  color: var(--marca-ouro-texto, #E7C77A);
  white-space: nowrap;
}
.sigma-toast-desfazer .sigma-toast-undo:hover {
  color: #fff;
}
.sigma-toast-desfazer .sigma-toast-undo:focus-visible {
  outline: 2px solid var(--marca-ouro-texto, #E7C77A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Skeleton loader ─── */
.skeleton {
  /* BRAND-3e: brilho dourado 8% no ápice do shimmer (a marca respira até no carregar). */
  background: linear-gradient(90deg, var(--borda) 25%, color-mix(in srgb, var(--marca-ouro) 8%, var(--bg)) 50%, var(--borda) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s infinite;
  border-radius: 6px;
  height: 16px;
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Busca com ícone ─── */
.input-busca {
  position: relative;
}
.input-busca i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-muted);
  pointer-events: none;
}
.input-busca input { padding-left: 32px; }

/* ─── Busca em destaque (Processos / Protocolo) ─── */
.busca-destaque {
  position: relative;
  max-width: 640px;
  margin: 0 auto 12px;
}
.busca-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--texto-muted);
  pointer-events: none;
  z-index: 1;
}
.busca-input {
  width: 100%;
  height: 44px;
  padding-left: 44px;
  font-size: 15px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
.busca-input::placeholder { color: var(--texto-muted); }
.busca-input:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}

/* ─── Utilitários ─── */
.text-muted { color: var(--texto-muted) !important; }
.border-sigma { border-color: var(--borda) !important; }
.bg-sigma { background: var(--bg-card) !important; }

/* ═══════════════════════════════════════════════════════════
   ACESSIBILIDADE (B11)
═══════════════════════════════════════════════════════════ */
/* Skip-link: invisível até receber foco por teclado (primeiro Tab). */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 3000;
  background: var(--cor-primaria);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  color: #fff;
  outline: 2px solid var(--foco-anel);
  outline-offset: 2px;
}
/* O alvo do skip-link não deve mostrar contorno ao receber foco programático. */
.view-container:focus { outline: none; }

/* Cabeçalho ordenável navegável por teclado (aria-sort + tabindex, B11). */
.th-sortavel { cursor: pointer; }
.th-sortavel:focus-visible {
  outline: 2px solid var(--foco-anel);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* No mobile, o menu off-canvas e o hambúrguer precisam ficar ACIMA do banner
     "Ambiente de Testes" (z-index 2000) — senão o banner cobria o botão e o menu
     ficava inacessível no ambiente de testes pelo celular (B10). */
  .sigma-sidebar {
    transform: translateX(-100%);
    z-index: 2100;
  }
  .sigma-sidebar.aberta {
    transform: translateX(0);
  }
  .sidebar-overlay {
    z-index: 2098;
  }
  .sigma-conteudo {
    margin-left: 0;
  }
  .sigma-topbar {
    padding: 8px 16px 8px 60px; /* 60px p/ não cobrir o botão toggle */
  }
  .view-container {
    padding: 16px;
  }
  .btn-toggle-sidebar {
    display: flex;
    z-index: 2100;
  }
  .page-header { flex-direction: column; }
  /* P5.2 (WCAG 1.4.10) — o cabeçalho já empilhava, mas o GRUPO DE AÇÕES dentro dele
     seguia numa linha rígida: 343px de botões dentro de uma coluna de 288px. Sobrava
     a rolagem lateral da página inteira por causa de dois botões. Aqui eles quebram
     em duas linhas, que é o que se espera de uma tela estreita. */
  .page-header .d-flex { flex-wrap: wrap; }
  .filtros-bar .form-group { min-width: 100%; }
  .stat-card { padding: 14px; gap: 12px; }
  /* B10-P2 — número um pouco menor no tablet, para caber com folga no card */
  .stat-numero { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — drawer de filtros + tabela vira cards (B11)
═══════════════════════════════════════════════════════════ */
/* Botão "Filtros" só existe no mobile (drawer); no desktop fica oculto. */
.filtros-toggle { display: none; }
.filtros-toggle .filtros-toggle-caret { transition: transform .18s ease; }
.filtros-toggle.aberta .filtros-toggle-caret { transform: rotate(180deg); }

@media (max-width: 768px) {
  /* Drawer: a barra recolhe atrás do botão; os chips de filtro ativo seguem visíveis. */
  .filtros-toggle { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .filtros-bar { display: none; }
  .filtros-bar.filtros-aberta { display: flex; }

  /* Tabela → cards: cada linha vira um cartão, com rótulo (data-label) por célula. */
  .sigma-table--cards,
  .sigma-table--cards tbody { display: block; width: 100%; }
  .sigma-table--cards thead { display: none; }
  .sigma-table--cards tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  .sigma-table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border: none !important;
    max-width: none !important;
    white-space: normal !important;
    text-align: right;
  }
  .sigma-table--cards td + td { border-top: 1px solid var(--borda) !important; }
  .sigma-table--cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--texto-muted);
    text-align: left;
  }
  /* Células sem rótulo (checkbox de seleção, coluna de ações) — sem prefixo. */
  .sigma-table--cards td:not([data-label])::before { content: none; }
  .sigma-table--cards td.col-check { display: none; }
  .sigma-table--cards td:not([data-label]) { justify-content: flex-end; }
  /* No card há largura total: desliga o truncamento das colunas. */
  .sigma-table--cards td .text-truncate {
    overflow: visible; white-space: normal; text-overflow: clip;
  }
  /* Linhas de largura total (agrupamento, estado vazio). */
  .sigma-table--cards td[colspan] { display: block; text-align: left; }
  .sigma-table--cards td[colspan]::before { content: none; }
}

/* Overlay mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}
.sidebar-overlay.ativo { display: block; }

/* ═══════════════════════════════════════════════════════════
   ONBOARDING WIZARD
═══════════════════════════════════════════════════════════ */
/* ⚠️ z-index ABAIXO do modal do Bootstrap (1055) e do seu backdrop (1050), de
   propósito. Com 9999 — o valor original — o overlay ficava acima de QUALQUER
   modal: a caixa de `confirmar()` era criada, era exibida, e o overlay a cobria
   e ainda capturava o clique. Medido em bancada com o CSS real: no centro dos
   botões "Pular" e "Cancelar", `document.elementFromPoint` devolvia
   `#onboarding-overlay`, nunca o botão. Efeito: assistente de primeira
   instalação com botão VIVO na aparência e MORTO no clique — e sem saída, porque
   o modal usa `data-bs-backdrop="static"` (clicar fora também não fecha).
   ⚠️ Só apareceu quando o piloto foi zerado (2026-08-04): a tela de implantação
   nunca tinha sido exercitada numa base realmente vazia. */
#onboarding-overlay {
  position: fixed; inset: 0; z-index: 1040;
  background: linear-gradient(135deg, var(--cor-primaria) 0%, #0d1f30 100%);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 20px;
}
.ob-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  width: 100%; max-width: 660px;
  overflow: hidden;
}
.ob-header {
  background: var(--cor-primaria); color: #fff;
  padding: 28px 36px 20px; position: relative;
}
.ob-header h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.ob-header p  { font-size: 13px; opacity: .75; margin: 0; }
.ob-body   { padding: 28px 36px; }
.ob-footer { padding: 16px 36px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e9ecef; }

/* Steps indicator */
.ob-steps {
  display: flex; gap: 0; align-items: center;
  margin-bottom: 20px;
}
.ob-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.5);
}
.ob-step.ativo { color: #fff; font-weight: 600; }
.ob-step.ok    { color: rgba(255,255,255,0.7); }
.ob-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ob-step.ativo .ob-step-num { background: #fff; color: var(--cor-primaria); }
.ob-step.ok    .ob-step-num { background: #22c55e; color: #fff; }
.ob-sep { flex: 1; height: 1px; background: rgba(255,255,255,0.2); margin: 0 6px; min-width: 16px; }

.ob-logo-preview {
  border: 2px dashed #dee2e6; border-radius: 12px;
  min-height: 90px; display: flex; align-items: center; justify-content: center;
  background: #f8f9fa; overflow: hidden;
}
.ob-color-swatch {
  width: 36px; height: 36px; border-radius: 8px; border: 2px solid #dee2e6;
  cursor: pointer; flex-shrink: 0;
}

/* ─── LED — Timeline de fluxo CONARQ ─── */
/* Stepper de rito único (ELEGÂNCIA 2 — sigmaStepper). Tema-aware por tokens
   (a antiga .led-timeline era hardcoded #fff/#6c757d → quebrava no escuro).
   Reusado por eliminação, rito PAD, rodada, recolhimento. */
.sigma-stepper { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:4px; }
.sigma-step { display:flex; flex-direction:column; align-items:center; min-width:90px; position:relative; }
.sigma-step-circle {
  width:36px; height:36px; border-radius:50%; border:2px solid var(--borda);
  background: var(--bg-card); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color: var(--texto-muted); flex-shrink:0; transition:all .2s;
  z-index:1; position:relative;
}
.sigma-step.done    .sigma-step-circle { background:#15803d; border-color:#15803d; color:#fff; }
.sigma-step.atual   .sigma-step-circle { background:var(--cor-primaria); border-color:var(--cor-primaria); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--cor-primaria) 22%, transparent); }
.sigma-step.blocked .sigma-step-circle { background:#b91c1c; border-color:#b91c1c; color:#fff; }
.sigma-step-label { font-size:10px; text-align:center; margin-top:5px; line-height:1.3; color:var(--texto-muted); max-width:104px; }
.sigma-step.done    .sigma-step-label { color:#15803d; font-weight:600; }
.sigma-step.atual   .sigma-step-label { color:var(--cor-primaria); font-weight:700; }
.sigma-step-data { font-size:9px; color:var(--texto-muted); opacity:.85; text-align:center; margin-top:2px; }
.sigma-step-conn { flex:1; height:2px; background:var(--borda); margin-top:17px; min-width:20px; transition:background .2s; }
.sigma-step-conn.done { background:#15803d; }
[data-bs-theme="dark"] .sigma-step.done .sigma-step-label { color:#4ade80; }
[data-bs-theme="dark"] .sigma-step.done .sigma-step-circle,
[data-bs-theme="dark"] .sigma-step-conn.done { background:#16a34a; border-color:#16a34a; }

/* ── Ficha catalográfica do dossiê (ELEGÂNCIA 8) ──
   Rodapé arquivístico discreto: hairline no topo, tipografia pequena e sóbria,
   ícone e rótulos em ouro-texto (A11Y-3: ouro só para texto pequeno via token). */
.ficha-catalografica {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin-top:12px; padding-top:8px; border-top:1px solid var(--borda);
  font-size:var(--text-xs, 12px); line-height:1.5; color:var(--texto-muted);
}
.ficha-catalografica .ficha-ico { color:var(--marca-ouro-texto); font-size:13px; margin-right:1px; }
.ficha-catalografica .ficha-seg { white-space:nowrap; }
.ficha-catalografica .ficha-rotulo {
  text-transform:uppercase; letter-spacing:.4px; font-size:.82em; font-weight:600;
  color:var(--marca-ouro-texto);
}
.ficha-catalografica .ficha-sep { color:var(--borda); user-select:none; }

/* contagem regressiva do edital */
/* seções do formulário LED */
.led-section { border-left:3px solid var(--cor-primaria); padding-left:10px; margin-bottom:12px; }
.led-section-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
                     color:var(--cor-primaria); margin-bottom:6px; }

/* ── Timeline corpo (processo-cêntrico) ── */
.timeline-corpo {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 16px;
}
.timeline-corpo[style*="border-left"] {
  border-radius: 0 10px 10px 0;
}

/* ─── Calendário ─── */
.cal-grade {
  width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed;
  animation: sigma-fade-in .25s ease;
}
.cal-grade th {
  text-align: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  padding: 10px 2px 8px; color: var(--texto-muted);
}
.cal-grade th.cal-fds { color: var(--cor-perigo-texto); }
.cal-grade td { padding: 0; vertical-align: top; }
.cal-vazio { background: transparent !important; }
.cal-dia {
  border-radius: 10px;
  background: var(--bg-card);
  cursor: default;
  transition: background .15s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .15s;
  padding: 8px 7px 6px;
  position: relative;
  border: 1px solid var(--borda);
  min-height: 88px;
}
.cal-dia:hover {
  background: var(--row-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  z-index: 1;
  border-color: var(--cor-acento) !important;
}
.cal-fds { background: var(--thead-bg) !important; }
.cal-fds .cal-num-inner { color: var(--cor-perigo-texto); }
.cal-hoje {
  border-color: var(--cor-primaria) !important;
  border-width: 2px !important;
  background: rgba(14,165,233,.06) !important;
}
.cal-hoje .cal-num-inner {
  background: var(--cor-primaria);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15,52,96,.30);
}
.cal-tem-feriado { background: rgba(59,130,246,.05) !important; }
[data-bs-theme="dark"] .cal-tem-feriado { background: rgba(59,130,246,.10) !important; }
[data-bs-theme="dark"] .cal-fds { background: rgba(255,255,255,.03) !important; }
.cal-num {
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.cal-num-inner {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 600; color: var(--texto);
  transition: background .15s, color .15s, box-shadow .15s;
}
.cal-dia .cal-tag { display: block; margin-top: 2px; }
.cal-tag {
  display: inline-block; font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 20px; line-height: 1.5;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.cal-tag-recesso   { background: #ffedd5; color: #c2410c; }
.cal-tag-nacional  { background: #dbeafe; color: #1d4ed8; }
.cal-tag-estadual  { background: #dcfce7; color: #15803d; }
.cal-tag-municipal { background: #fef9c3; color: #854d0e; }
.cal-tag-ponto     { background: #f3f4f6; color: #4b5563; }
[data-bs-theme="dark"] .cal-tag-recesso   { background: #431407; color: #fdba74; }
[data-bs-theme="dark"] .cal-tag-nacional  { background: #1e3a5f; color: #93c5fd; }
[data-bs-theme="dark"] .cal-tag-estadual  { background: #14532d; color: #86efac; }
[data-bs-theme="dark"] .cal-tag-municipal { background: #3d2c00; color: #fde047; }
[data-bs-theme="dark"] .cal-tag-ponto     { background: #374151; color: #d1d5db; }

/* C2 — camada prazos de processos */
.cal-tag-prazo         { background: #d1fae5; color: #065f46; }
.cal-tag-prazo-alerta  { background: #fef3c7; color: #92400e; }
.cal-tag-prazo-vencido { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .cal-tag-prazo         { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .cal-tag-prazo-alerta  { background: #3d2c00; color: #fcd34d; }
[data-bs-theme="dark"] .cal-tag-prazo-vencido { background: #450a0a; color: #fca5a5; }

/* C3 — camada prazos de correspondência (índigo) */
.cal-tag-prazo-corr         { background: #dbeafe; color: #1e3a8a; }
.cal-tag-prazo-corr-alerta  { background: #fef3c7; color: #92400e; }
.cal-tag-prazo-corr-vencido { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .cal-tag-prazo-corr         { background: #1e3a8a; color: #93c5fd; }
[data-bs-theme="dark"] .cal-tag-prazo-corr-alerta  { background: #3d2c00; color: #fcd34d; }
[data-bs-theme="dark"] .cal-tag-prazo-corr-vencido { background: #450a0a; color: #fca5a5; }

/* Cal2 — camada LAI (âmbar distinto de correspondência) */
.cal-tag-prazo-lai         { background: #fef3c7; color: #78350f; }
.cal-tag-prazo-lai-alerta  { background: #fde68a; color: #78350f; }
.cal-tag-prazo-lai-vencido { background: #fed7aa; color: #7c2d12; }
[data-bs-theme="dark"] .cal-tag-prazo-lai         { background: #3d2c00; color: #fde68a; }
[data-bs-theme="dark"] .cal-tag-prazo-lai-alerta  { background: #5c3c00; color: #fde68a; }
[data-bs-theme="dark"] .cal-tag-prazo-lai-vencido { background: #431407; color: #fdba74; }
.cal-grade.cal-hide-prazo_lai [data-tipo="prazo_lai"] { display: none !important; }

/* C4 — camada lembretes pessoais (violeta) */
.cal-tag-lembrete { background: #ede9fe; color: #5b21b6; }
[data-bs-theme="dark"] .cal-tag-lembrete { background: #2e1065; color: #c4b5fd; }
.cal-grade.cal-hide-lembrete [data-tipo="lembrete"] { display: none !important; }
.cal-tag-aviso         { background: #fce7f3; color: #9d174d; }
.cal-tag-aviso-urgente { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .cal-tag-aviso         { background: #500724; color: #fbcfe8; }
[data-bs-theme="dark"] .cal-tag-aviso-urgente { background: #450a0a; color: #fca5a5; }
.cal-grade.cal-hide-aviso [data-tipo="aviso"] { display: none !important; }
/* C8 — Gestão arquivística TTD */
.cal-tag-avaliacao    { background: #fef9c3; color: #854d0e; }
.cal-tag-eliminacao   { background: #fee2e2; color: #991b1b; }
.cal-tag-recolhimento { background: #ccfbf1; color: #0f766e; }
[data-bs-theme="dark"] .cal-tag-avaliacao    { background: #3d2c00; color: #fcd34d; }
[data-bs-theme="dark"] .cal-tag-eliminacao   { background: #450a0a; color: #fca5a5; }
[data-bs-theme="dark"] .cal-tag-recolhimento { background: #042f2e; color: #5eead4; }
.cal-grade.cal-hide-alerta_cada   [data-tipo="alerta_cada"]   { display: none !important; }
.cal-grade.cal-hide-led_edital    [data-tipo="led_edital"]    { display: none !important; }
.cal-grade.cal-hide-led_execucao  [data-tipo="led_execucao"]  { display: none !important; }
.cal-grade.cal-hide-recolhimento  [data-tipo="recolhimento"]  { display: none !important; }

/* C9(contratos) — camada de contratos no calendário */
.cal-tag-contrato         { background: #ccfbf1; color: #0f766e; }
.cal-tag-contrato-alerta  { background: #fef3c7; color: #92400e; }
.cal-tag-contrato-vencido { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .cal-tag-contrato         { background: #042f2e; color: #5eead4; }
[data-bs-theme="dark"] .cal-tag-contrato-alerta  { background: #3d2c00; color: #fcd34d; }
[data-bs-theme="dark"] .cal-tag-contrato-vencido { background: #450a0a; color: #fca5a5; }
.cal-grade.cal-hide-vencimento_contrato [data-tipo="vencimento_contrato"] { display: none !important; }
.cal-mini-pip-contrato { background: #0f766e; }
[data-bs-theme="dark"] .cal-mini-pip-contrato { background: #5eead4; }

/* PAD-V2-5 — camada de prazos por fase de Sindicância/PAD (índigo) */
.cal-tag-pad         { background: #e0e7ff; color: #3730a3; }
.cal-tag-pad-alerta   { background: #fef3c7; color: #92400e; }
.cal-tag-pad-vencido  { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .cal-tag-pad         { background: #1e1b4b; color: #c7d2fe; }
[data-bs-theme="dark"] .cal-tag-pad-alerta  { background: #3d2c00; color: #fcd34d; }
[data-bs-theme="dark"] .cal-tag-pad-vencido { background: #450a0a; color: #fca5a5; }
.cal-grade.cal-hide-prazo_pad [data-tipo="prazo_pad"] { display: none !important; }
.cal-mini-pip-pad { background: #3730a3; }
[data-bs-theme="dark"] .cal-mini-pip-pad { background: #c7d2fe; }

/* E3 — camada de prazos legais / obrigações ao Tribunal de Contas (aço institucional) */
.cal-tag-legal         { background: #e0f2fe; color: #075985; }
.cal-tag-legal-alerta  { background: #fef3c7; color: #92400e; }
.cal-tag-legal-vencido { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .cal-tag-legal         { background: #082f49; color: #7dd3fc; }
[data-bs-theme="dark"] .cal-tag-legal-alerta  { background: #3d2c00; color: #fcd34d; }
[data-bs-theme="dark"] .cal-tag-legal-vencido { background: #450a0a; color: #fca5a5; }
.cal-grade.cal-hide-prazo_legal [data-tipo="prazo_legal"] { display: none !important; }
.cal-mini-pip-legal { background: #075985; }
[data-bs-theme="dark"] .cal-mini-pip-legal { background: #7dd3fc; }

/* C9 — Calculadora de prazo */
#cal-calculadora { transition: none; }
.cal-calc-resultado { display: none; }
.cal-calc-resultado.cal-calc-show { display: flex; flex-wrap: wrap; gap: 12px; }
.cal-calc-card {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 10px 20px;
  text-align: center;
  min-width: 90px;
}
.cal-calc-num {
  font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--bs-primary);
}
.cal-calc-lbl {
  font-size: 10.5px; color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 3px;
}

/* Visão Executiva — heatmap de intensidade */
.cal-exec-dia { cursor: pointer; vertical-align: top; min-height: 72px; }
.cal-exec-dia.cal-selecionada { outline: 2px solid var(--cor-acento); outline-offset: -2px; }
.cal-exec-count {
  font-size: 22px; font-weight: 800; line-height: 1;
  text-align: center; margin-top: 4px; color: currentColor;
}
.cal-carga-baixa   { background: #d1fae5 !important; color: #065f46; }
.cal-carga-media   { background: #fef9c3 !important; color: #854d0e; }
.cal-carga-alta    { background: #ffedd5 !important; color: #9a3412; }
.cal-carga-critica { background: #fee2e2 !important; color: #991b1b; }
[data-bs-theme="dark"] .cal-carga-baixa   { background: #064e3b !important; color: #6ee7b7; }
[data-bs-theme="dark"] .cal-carga-media   { background: #3d2c00 !important; color: #fcd34d; }
[data-bs-theme="dark"] .cal-carga-alta    { background: #431407 !important; color: #fdba74; }
[data-bs-theme="dark"] .cal-carga-critica { background: #450a0a !important; color: #fca5a5; }
.cal-exec-pip {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; vertical-align: middle; margin-right: 3px;
}

/* Toggle do painel de filtros */
.cal-filtro-toggle { color: var(--bs-secondary-color) !important; }
.cal-filtro-toggle:hover { color: var(--bs-body-color) !important; }
.cal-filtro-chevron { transition: transform .2s ease; display: inline-block; }
.cal-filtro-toggle.cal-filtro-aberto .cal-filtro-chevron { transform: rotate(90deg); }
.cal-filtro-painel { animation: sigma-fade-in .15s ease; }

/* Filtros interativos da legenda */
.cal-filtro-btn {
  border: none; cursor: pointer;
  transition: opacity .15s, transform .12s, filter .15s;
}
.cal-filtro-btn:hover:not(.cal-filtro-sem-evento) { transform: translateY(-1px); }
.cal-filtro-inativo { opacity: .28; filter: grayscale(80%); }
.cal-filtro-sem-evento { opacity: .35; cursor: default; pointer-events: none; }
.cal-filtro-count {
  display: inline-block; font-size: 8px; font-weight: 700;
  background: rgba(0,0,0,.15); border-radius: 8px;
  padding: 0 4px; margin-left: 3px; vertical-align: middle; line-height: 1.7;
}
.cal-grade.cal-hide-recesso          [data-tipo="recesso"]           { display: none !important; }
.cal-grade.cal-hide-nacional         [data-tipo="nacional"]          { display: none !important; }
.cal-grade.cal-hide-estadual         [data-tipo="estadual"]          { display: none !important; }
.cal-grade.cal-hide-municipal        [data-tipo="municipal"]         { display: none !important; }
.cal-grade.cal-hide-ponto_facultativo [data-tipo="ponto_facultativo"] { display: none !important; }
.cal-grade.cal-hide-prazo_processo        [data-tipo="prazo_processo"]        { display: none !important; }
.cal-grade.cal-hide-prazo_correspondencia [data-tipo="prazo_correspondencia"] { display: none !important; }

/* ─────────────────────────────────────────────
   C1 — Painel lateral do dia (agenda em camadas)
───────────────────────────────────────────── */
.cal-split-wrap {
  display: grid;
  grid-template-columns: 1fr 0px;
  overflow: hidden;
  transition: grid-template-columns 0.22s ease;
}
.cal-split-wrap.cal-split-ativo { grid-template-columns: 1fr 360px; }
.cal-split-cal { min-width: 0; }
.cal-split-painel {
  border-left: 1px solid var(--borda);
  background: var(--bg-card);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.16s ease 0.08s;
}
.cal-split-wrap.cal-split-ativo .cal-split-painel {
  overflow-y: auto;
  max-height: 70vh;
  opacity: 1;
}
.cal-dia { cursor: pointer; }
.cal-dia.cal-selecionada {
  background: rgba(14,165,233,.12) !important;
  border-color: var(--cor-acento) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.cal-mais-btn {
  display: block; width: 100%; margin-top: 3px;
  padding: 1px 4px; font-size: 9px; font-weight: 600;
  background: var(--thead-bg); color: var(--texto-muted);
  border: none; border-radius: 8px; cursor: pointer;
  text-align: center;
  transition: background .12s, color .12s;
}
.cal-mais-btn:hover { background: var(--cor-acento); color: #fff; }
.cal-painel-secao { margin-bottom: 16px; }
.cal-painel-secao-titulo {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-muted); margin-bottom: 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--borda);
}
.cal-painel-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--borda);
  font-size: 12.5px; line-height: 1.4;
}
.cal-painel-item:last-child { border-bottom: none; }
.cal-painel-vazio {
  color: var(--texto-muted); font-size: 12px;
  font-style: italic; padding: 6px 0;
}
@media (max-width: 991px) {
  .cal-split-wrap.cal-split-ativo { grid-template-columns: 1fr; }
  .cal-split-painel { display: none; }
}

/* badge laranja para recesso no admin */
.badge.bg-orange { background-color: #ea580c !important; color: #fff; }

/* Quadro de processos (Kanban-arquivístico) */
.card-proc-quadro {
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  border-left: 3px solid var(--sigma-primary, #2563eb);
}
.card-proc-quadro:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12) !important; transform: translateY(-1px); }

/* Dossiê / Viewer de Íntegra */
.dossie-split {
  display: flex;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  min-height: 76vh;
  box-shadow: var(--sombra);
}
.dossie-arvore {
  width: 296px;
  flex-shrink: 0;
  border-right: 1px solid var(--borda);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dossie-arvore-header {
  padding: 10px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg-card);
}
.dossie-arvore-count {
  padding: 6px 12px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: var(--texto-muted);
}
.dossie-grupo {
  padding: 8px 12px 2px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: var(--texto-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dossie-grupo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borda);
}
#dossie-lista { overflow-y: auto; flex: 1; padding: 4px 6px; }
.dossie-item {
  padding: 8px 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: background .12s, border-left-color .12s;
  background: var(--bg-card);
}
.dossie-item:hover { background: var(--bg); border-left-color: var(--borda); }
.dossie-item.ativo {
  background: rgba(46,134,222,.10);
  border-left-color: var(--cor-acento);
}
[data-bs-theme="dark"] .dossie-item.ativo { background: rgba(46,134,222,.18); }
.dossie-num {
  flex-shrink: 0;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--texto-muted);
  border: 1px solid var(--borda);
  transition: background .12s, color .12s, border-color .12s;
  margin-top: 1px;
}
.dossie-item.ativo .dossie-num {
  background: var(--cor-acento);
  color: #fff;
  border-color: var(--cor-acento);
}
.dossie-item-nome {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dossie-item-sub {
  font-size: 10.5px;
  color: var(--texto-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.dossie-viewer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}
.dossie-viewer-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg);
}
.dossie-nav-info {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--texto-muted);
  font-weight: 500;
}
.dossie-content { flex: 1; overflow: auto; background: var(--bg-card); }
.dossie-iframe {
  width: 100%; height: 70vh; border: none; display: block;
  color-scheme: light;   /* força fundo claro no renderizador nativo do browser */
  background: #fff;
}
.dossie-meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg);
  flex-wrap: wrap;
}
.dossie-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--texto-muted);
  gap: 10px;
}
/* ── Folha Líder — layout profissional ── */
.fl-wrapper {
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #1a1a2e;
  background: #fff;
  max-width: 740px;
  margin: 0 auto;
  padding: 1.5rem;
  font-size: 13px;
  line-height: 1.4;
}
/* Cabeçalho institucional */
.fl-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cor-primaria, #0f3460);
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px 8px 0 0;
}
.fl-logo { height: 50px; width: auto; object-fit: contain; flex-shrink: 0; }
.fl-inst-nome {
  font-size: 14px; font-weight: 700; letter-spacing: .2px; line-height: 1.2;
}
.fl-inst-sub { font-size: 11px; opacity: .8; margin-top: 3px; }
/* Banda de título */
.fl-banda {
  background: var(--cor-acento, #0ea5e9);
  color: #fff;
  text-align: center;
  padding: 7px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fl-banda-titulo {
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
}
.fl-banda-sub { font-size: 9.5px; opacity: .85; letter-spacing: .6px; }
/* Número do processo em destaque */
.fl-num-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #f4f7fb;
  border: 1px solid rgba(26,58,92,.18);
  border-top: none;
  border-radius: 0 0 6px 6px;
  margin-bottom: 14px;
}
.fl-num-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: #6c757d; flex-shrink: 0;
}
.fl-num-valor {
  font-size: 20px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--cor-primaria, #0f3460);
}
/* Assunto */
.fl-assunto {
  background: #fafbfd;
  border: 1px solid #dde4ef;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
/* Labels e valores dos campos */
.fl-field-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: #8a96a3; margin-bottom: 3px;
}
.fl-field-value { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.fl-assunto .fl-field-value { font-size: 13.5px; line-height: 1.4; }
/* Tabela de campos */
.fl-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid #dde4ef; border-radius: 6px; overflow: hidden;
  margin-bottom: 14px;
}
.fl-table td {
  padding: 9px 14px; border: 1px solid #dde4ef;
  vertical-align: top; width: 50%;
}
.fl-table tr:last-child td { border-bottom: none; }
/* Linha de status (encerrado / anulado) */
.fl-status-ok  { background:#f0fdf4; border:1px solid #86efac; border-radius:5px; padding:8px 12px; margin-bottom:10px; }
.fl-status-err { background:#fff5f5; border:1px solid #fca5a5; border-radius:5px; padding:8px 12px; margin-bottom:10px; }
.fl-status-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#6b7280; margin-bottom:2px; }
.fl-status-value { font-size:13px; font-weight:600; color:#374151; }
/* Observações */
.fl-obs {
  background: #fffdf0; border: 1px solid #fde68a; border-radius: 5px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px;
}
/* Rodapé */
.fl-footer {
  border-top: 1px solid #dde4ef;
  padding-top: 10px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.fl-footer-sistema {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--cor-primaria, #0f3460);
}
.fl-footer-info { font-size: 9px; color: #8a96a3; text-align: right; }
/* Botão de engrenagem no toolbar */
.dossie-gear-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (max-width: 767px) {
  .dossie-split { flex-direction: column; min-height: auto; }
  .dossie-arvore { width: 100%; max-height: 220px; }
  .dossie-iframe { height: 55vh; }
  .folha-lider-grade { grid-template-columns: 1fr; }
  .folha-lider-campo:nth-child(odd) { border-right: none; }

  /* (as guias em faixa de uma fileira não são regra de celular — valem em
     qualquer largura. Ficam logo abaixo do fecho deste @media, com o porquê.) */
}


/* -----------------------------------------------------------
   GUIAS EM FAIXA DE UMA FILEIRA — qualquer largura (fila do backlog nº 10)

   MEDIDO ANTES DE MEXER, e a medição corrigiu o diagnóstico DUAS vezes.

   1) No celular, as guias não estouravam a largura — elas EMBRULHAVAM. As 7 da
      capa do processo ocupavam ~400px de altura num bloco irregular ("Linha do
      Tempo" sozinha numa linha, "Situação/Dossiê" na seguinte…), empurrando o
      conteúdo para baixo da dobra: mais de meia tela de aparelho gasta em menu
      antes de qualquer informação. A ficha chamava isso de "guias que
      estouram" — o instinto estava certo, o mecanismo era outro.

   2) 🔴 Ao medir o DESKTOP só para conferir que nada mudara, apareceu uma
      regressão do MESMO DIA: a 7ª guia ("Situação", criada na fila nº 15)
      levou a barra de 1 fileira (59px) para 2 (116px) a 1440px. Provar que a
      aba nova FUNCIONA não é provar o que ela fez com a barra inteira — é a
      lição dos "dois opcionais que passam isolados e não cabem juntos",
      aplicada ao layout em vez de ao conteúdo.

   Por isso a regra não é de celular: barra de guias é UMA fileira, sempre. Ela
   rola dentro da própria caixa quando não couber (o mesmo `overflow-x` que já
   absolve tabelas largas na casa) e a borda cortada à direita é a pista de que
   há mais — daí o respiro no fim, para a última guia nunca encostar na margem
   e fingir que a faixa acabou.

   Vale para a capa do processo e para o detalhe da correspondência: mesmo
   desenho, mesmo problema. ------------------------------------------------ */
#proc-tabs,
#prot-det-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
}
#proc-tabs::-webkit-scrollbar,
#prot-det-tabs::-webkit-scrollbar { display: none; }
#proc-tabs .nav-item,
#prot-det-tabs .nav-item { flex: 0 0 auto; }
#proc-tabs .nav-link,
#prot-det-tabs .nav-link { white-space: nowrap; }
#proc-tabs::after,
#prot-det-tabs::after { content: ''; flex: 0 0 12px; }


/* -----------------------------------------------------------
   ENQUANTO HÁ MODAL, O MENU NÃO DISPUTA A TELA (fila do backlog nº 10)

   Medido: `#btn-toggle-sidebar` tem z-index 2100 e o modal, 1055. Com um modal
   aberto no celular, o botão do menu ficava POR CIMA dele e recebia o toque
   (`elementFromPoint` no centro do botão devolvia o ícone do próprio botão,
   fora do modal) — tocar ali abria a barra lateral sobre um formulário pendente,
   com dois painéis disputando a tela estreita.

   O que torna isso pior que um detalhe visual: o Bootstrap PRENDE O FOCO dentro
   do modal, então o botão já era inalcançável pelo teclado. Ou seja, o mesmo
   controle tinha duas regras — proibido para quem navega por teclado, tocável
   para quem usa o dedo. Ocultar enquanto o modal está de pé alinha as duas e
   respeita o que "modal" significa: até resolver isto, não há outro caminho.

   `.modal-open` é posto no <body> pelo próprio Bootstrap, e `_limparOverlays()`
   já o remove ao trocar de rota — não há estado a manter aqui. -------------- */
body.modal-open #btn-toggle-sidebar,
body.modal-open #btn-colapsar-sidebar { visibility: hidden; }



/* -----------------------------------------------------------
   SELETOR DE COLUNAS � offcanvas configur�vel
----------------------------------------------------------- */
.oc-lista { padding: 4px 0; }

.oc-col-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--borda, #dee2e6);
  transition: background .1s;
  user-select: none;
}
.oc-col-item:not(.oc-col-fixo) { cursor: grab; }
.oc-col-item:not(.oc-col-fixo):hover { background: var(--sigma-card-bg, #f8f9fa); }
.oc-col-item.dragging { opacity: .35; cursor: grabbing; }
.oc-col-item.drag-over {
  background: rgba(14, 165, 233, .1);
  box-shadow: inset 0 2px 0 var(--cor-acento, #0ea5e9);
}
.oc-col-fixo { opacity: .6; }
.oc-col-drag {
  font-size: 15px;
  color: var(--text-muted, #6c757d);
  line-height: 1;
  min-width: 14px;
}
.oc-col-fixo .oc-col-drag { visibility: hidden; }

/* ─────────────────────────────────────────────
   SPLIT-PANE  (Etapa 4 — lista + detalhe)
───────────────────────────────────────────── */
.split-pane-wrap {
  display: grid;
  grid-template-columns: 1fr 0px;
  overflow: hidden;
  transition: grid-template-columns 0.22s ease;
}
.split-pane-wrap.split-ativo {
  grid-template-columns: 1fr 360px;
}
.split-pane-list { min-width: 0; }
.split-pane-detalhe {
  border-left: 1px solid var(--borda);
  background: var(--bg-card);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.16s ease 0.08s;
}
.split-pane-wrap.split-ativo .split-pane-detalhe {
  overflow-y: auto;
  max-height: 72vh;
  opacity: 1;
}
.split-detalhe-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg-card);
  gap: 4px;
}
tr.tr-ativa {
  background: rgba(14,165,233,.1) !important;
  box-shadow: inset 3px 0 0 var(--cor-acento);
}
@media (max-width: 991px) {
  .split-pane-wrap.split-ativo { grid-template-columns: 1fr; }
  .split-pane-detalhe { display: none; }
}

/* ─────────────────────────────────────────────
   SWIMLANE  (Etapa 5)
───────────────────────────────────────────── */
.swimlane-wrap {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 16px;
  align-items: flex-start;
  min-height: 200px;
}
.swimlane-col {
  min-width: 220px;
  max-width: 240px;
  flex-shrink: 0;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;
}
.swimlane-col-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda);
  background: rgba(14,165,233,.05);
  font-size: 13px;
}
.swimlane-col-body {
  padding: 8px;
  max-height: 62vh;
  overflow-y: auto;
}
.swimlane-card {
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-card);
  cursor: pointer;
  transition: box-shadow .15s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.swimlane-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* ─────────────────────────────────────────────
   CALENDÁRIO DE PRAZOS  (Etapa 5)
───────────────────────────────────────────── */
.cal-prazos-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.cal-praz-th {
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--texto-muted);
  border-bottom: 1px solid var(--borda);
}
.cal-praz-dia, .cal-praz-vazio {
  vertical-align: top;
  padding: 4px;
  border: 1px solid var(--borda);
  min-height: 72px;
}
.cal-praz-vazio { background: rgba(0,0,0,.03); }
.cal-praz-fds { background: rgba(0,0,0,.02); }
.cal-praz-hoje { background: rgba(14,165,233,.07); }
.cal-praz-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-muted);
  margin-bottom: 3px;
}
.cal-praz-num.hoje { color: var(--cor-acento-texto); font-weight: 800; }
.cal-praz-item {
  display: block;
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 2px;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.cal-praz-mais {
  font-size: 10px;
  color: var(--texto-muted);
  padding: 1px 4px;
}

/* ─────────────────────────────────────────────
   AGRUPAMENTO NO MODO LISTA  (Etapa 5)
───────────────────────────────────────────── */
tr.grupo-header td {
  background: rgba(14,165,233,.06) !important;
  border-top: 2px solid var(--cor-acento);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: .2px;
}

/* ─────────────────────────────────────────────
   TOPBAR — bell + ações  (Etapa 6)
───────────────────────────────────────────── */
.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Barra de ciência em lote (B13b-8) ── */
.pend-lote-bar {
  position: sticky; top: 52px; z-index: 300;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--radius);
  padding: 8px 14px; margin-bottom: 12px; box-shadow: var(--sombra);
}

/* ── Modo TV do Painel do Setor (B13b-7) ── */
/* O modo apresentação da CADA (T4-04) esconde o mesmo casco: uma regra só para
   os dois, para que uma tela nova no chrome não fique aparecendo em um deles. */
body.painel-tv .sigma-sidebar,
body.painel-tv .sigma-topbar,
body.painel-tv #btn-toggle-sidebar,
body.painel-tv .page-header > div:last-child,
body.cada-projecao .sigma-sidebar,
body.cada-projecao .sigma-topbar,
body.cada-projecao #btn-toggle-sidebar,
body.cada-projecao .page-header { display: none !important; }
body.cada-projecao .sigma-conteudo { margin-left: 0 !important; }
body.cada-projecao .view-container { padding: 0; }
body.painel-tv .sigma-conteudo { margin-left: 0 !important; }
body.painel-tv .view-container { padding: 0 18px 18px; }
body.painel-tv .kanban-board { zoom: 1.28; }
body.painel-tv .page-header h4 { font-size: 26px; }
#painel-tv-hint {
  position: sticky; top: 0; z-index: 400;
  background: var(--cor-primaria); color: #fff;
  text-align: center; padding: 6px 12px; font-size: 13px; font-weight: 600;
}
#painel-tv-hint kbd { background: rgba(255,255,255,.25); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   Modo apresentação da CADA (T4-04) — a sessão projetada no telão.
   Tipografia grande porque a leitura é a 4 metros de distância, não a 40 cm.
   Tudo em tokens: a projeção segue o tema escolhido, clara ou escura.
══════════════════════════════════════════════════════════════ */
.cada-proj {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--texto);
  /* Acento do componente por light-dark(), como manda a casa — navy no claro,
     ouro no escuro (o dourado só aparece sobre fundo escuro, que é a regra).
     Os tokens de MARCA são invioláveis: não se redefinem por tema. */
  --proj-acento: light-dark(#0f3460, #C7AC74);
}
.cada-proj-corpo {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 5vw, 72px);
  max-width: 1400px; width: 100%; margin: 0 auto;
}
.cada-proj-etiqueta {
  font-size: clamp(13px, 1.4vw, 18px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--proj-acento); margin-bottom: .6em;
}
.cada-proj-titulo {
  font-size: clamp(28px, 4.4vw, 68px); font-weight: 700;
  line-height: 1.15; margin: 0 0 .4em;
}
.cada-proj-texto {
  font-size: clamp(18px, 2.4vw, 36px); line-height: 1.5;
  color: var(--texto); margin: 0;
}
.cada-proj-sub {
  font-size: clamp(15px, 1.7vw, 24px); color: var(--texto-muted); margin-top: 1em;
}
.cada-proj-lista { list-style: none; padding: 0; margin: 0; }
.cada-proj-lista li {
  font-size: clamp(16px, 1.9vw, 28px); line-height: 1.4;
  padding: .5em 0; border-bottom: 1px solid var(--borda);
  display: flex; align-items: baseline; gap: .7em;
}
.cada-proj-lista li:last-child { border-bottom: 0; }
.cada-proj-num {
  font-size: clamp(30px, 5vw, 76px); font-weight: 700; line-height: 1;
  color: var(--proj-acento);
}
.cada-proj-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 3vw, 40px);
  border-top: 1px solid var(--borda); background: var(--bg-card);
  font-size: 14px; color: var(--texto-muted);
}
.cada-proj-rodape kbd {
  background: var(--borda); color: var(--texto);
  border-radius: 4px; padding: 1px 6px; font-size: 12px;
}
/* Trilha de progresso: quantos itens a sessão tem e onde ela está. */
.cada-proj-trilha { display: flex; gap: 4px; flex: 1; max-width: 420px; }
.cada-proj-trilha span {
  flex: 1; height: 4px; border-radius: 2px; background: var(--borda);
}
.cada-proj-trilha span.ativo { background: var(--proj-acento); }
/* Foco visível mesmo em telão (linha de base de acessibilidade da casa). */
.cada-proj button:focus-visible {
  outline: 3px solid var(--foco-anel); outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .cada-proj-corpo > * { animation: cadaProjEntra .18s ease-out; }
}
@keyframes cadaProjEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Botões de escala de fonte A+/A− (B13b-6) ── */
.btn-fonte { font-weight: 700; font-size: 13px; line-height: 1; }
.btn-fonte .fonte-minus { font-size: 9px; vertical-align: super; }
.btn-fonte .fonte-plus  { font-size: 10px; vertical-align: super; }
.btn-fonte:disabled { opacity: .4; cursor: default; }

/* ── Menu de ajuda "?" na topbar (B13-a) ── */
.ajuda-wrap { position: relative; display: inline-flex; }
.ajuda-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050;
  min-width: 232px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
.ajuda-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--texto); font-size: 13.5px; text-align: left;
  cursor: pointer;
}
.ajuda-item > i { font-size: 15px; color: var(--cor-acento-texto); flex-shrink: 0; }
.ajuda-item:hover, .ajuda-item:focus-visible { background: var(--row-hover); outline: none; }
.ajuda-item:focus-visible { box-shadow: inset 0 0 0 2px var(--foco-anel); }
.ajuda-sep { height: 1px; background: var(--borda); margin: 5px 6px; }

/* ── Indicador de conexão: PONTO na barra de topo (2026-07-19) ──
 *
 * Antes: uma tarja âmbar grande, no rodapé, disparada na PRIMEIRA queda, sem
 * nenhuma tolerância. Como o navegador fecha o socket a cada troca de rede, a cada
 * suspensão da máquina e a cada reinício do servidor, ela aparecia o tempo todo —
 * e "aviso que grita sempre é aviso que ninguém lê". Pior: gritava com a mesma
 * força para uma piscada de 200 ms e para o servidor fora do ar.
 *
 * Agora o estado mora num ponto discreto ao lado do sino, e a ESCALA é que informa:
 *   verde    — conectado (aparece só ao restabelecer, depois se apaga sozinho)
 *   âmbar    — reconectando há mais de 4 s (a piscada curta não aparece)
 *   vermelho — sem conexão há mais de 20 s (aí sim é problema de verdade)
 * O texto vive no `title`/leitor de tela; a tela fica quieta. */
.conn-dot {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 2px; flex-shrink: 0;
}
.conn-dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor-sucesso);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-sucesso) 22%, transparent);
  transition: background .3s, box-shadow .3s, opacity .5s;
}
/* Conectado é o estado normal: silêncio. O ponto verde só aparece ao RESTABELECER,
   como confirmação, e some — não fica um enfeite permanente na barra. */
.conn-dot.conn-ok::after      { opacity: 1; }
.conn-dot.conn-quieto::after  { opacity: 0; }
.conn-dot.conn-lento::after {
  background: var(--cor-aviso);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-aviso) 22%, transparent);
  animation: conn-pulso 1.6s ease-in-out infinite;
}
.conn-dot.conn-fora::after {
  background: var(--cor-perigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-perigo) 25%, transparent);
  animation: conn-pulso 1.6s ease-in-out infinite;
}
@keyframes conn-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .conn-dot::after { animation: none; } }

/* ── Indicador de conexão em tempo real (B13b-3) — tarja legada ── */
.conn-status {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 3000; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: opacity .4s, transform .4s;
}
.conn-status.offline { background: #b45309; }        /* âmbar — degradado, mas operante */
.conn-status.online  { background: var(--cor-sucesso); }
.conn-status.conn-hide { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
.conn-spin {
  width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: conn-spin-kf .7s linear infinite;
}
@keyframes conn-spin-kf { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .conn-spin { animation: none; } }

/* Realce temporário do capítulo aberto via "Manual desta tela" (B13-a) */
.manual-sec-destaque {
  animation: manual-flash 1.8s ease-out;
  border-radius: var(--radius);
}
@keyframes manual-flash {
  0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-acento) 55%, transparent); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .manual-sec-destaque { animation: none; }
}
.topbar-busca-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--bg);
  color: var(--texto-muted);
  font-size: 13px;
  cursor: pointer;
  min-width: 220px;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.topbar-busca-pill:hover, .topbar-busca-pill:focus-visible { border-color: var(--cor-acento); color: var(--texto); }
.topbar-busca-pill i { font-size: 14px; flex-shrink: 0; }
.topbar-busca-texto { flex: 1; text-align: left; }
.topbar-busca-kbd {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  /* P5 — muted sobre `--borda` dá 3,99:1: o token muted é calibrado contra o FUNDO
     DA PÁGINA, e aqui ele estava sobre uma superfície cinza. Texto normal sobre
     superfície de apoio pede o token de texto cheio. */
  background: var(--borda); color: var(--texto); border: none; flex-shrink: 0;
}
@media (max-width: 768px) {
  .topbar-busca-texto, .topbar-busca-kbd { display: none; }
  .topbar-busca-pill { min-width: auto; padding: 8px; border-radius: 50%; border-color: transparent; }
}
.topbar-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--texto-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.topbar-bell:hover,
.topbar-bell:focus-visible {
  background: var(--row-hover);
  color: var(--texto);
  outline: 2px solid var(--foco-anel);
  outline-offset: 2px;
}
.topbar-bell .badge-notif {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--cor-perigo);
  color: #fff;
  font-weight: 700;
}

/* ─────────────────────────────────────────────
   PAINEL DE NOTIFICAÇÕES (drawer)  (Etapa 6)
───────────────────────────────────────────── */
.notif-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 490;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.notif-panel-overlay.ativo {
  opacity: 1;
  pointer-events: auto;
}
.notif-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100dvh;
  background: var(--bg-card);
  border-left: 1px solid var(--borda);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* P5.2 (WCAG 2.1.1 / 2.4.3) — FECHADO, o painel apenas saía de cena pela
     transformação: continuava renderizado, e portanto seus botões continuavam na
     ordem do Tab. Quem navega por teclado tabulava para DENTRO de um painel que não
     está na tela — o foco sumia, e não havia como saber onde ele tinha ido parar. Só
     quem usa teclado sente isso; com mouse o defeito é literalmente invisível.
     `visibility: hidden` tira o painel da ordem de foco sem tirá-lo do layout; o
     atraso na transição é o que preserva a animação de saída (esconde DEPOIS de
     deslizar, e não antes). */
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.notif-panel.aberto {
  transform: translateX(0);
  visibility: visible;
  transition: transform .22s ease, visibility 0s;   /* ao ABRIR, aparece já */
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
  gap: 8px;
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 1;
}
.notif-panel-body {
  flex: 1;
  overflow-y: auto;
}
.notif-panel-item {
  transition: background .12s;
}
.notif-panel-item:hover {
  background: var(--row-hover);
}

/* ─────────────────────────────────────────────
   SIDEBAR — badge "Hoje"  (Etapa 6)
───────────────────────────────────────────── */
.badge-hoje {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Badge "Avisos urgentes" no link do Calendário */
.badge-aviso {
  margin-left: auto;
  background: #9d174d;
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.sigma-sidebar.colapsada .badge-aviso { display: none !important; }

/* ─────────────────────────────────────────────
   TELA HOJE  (Etapa 6)
───────────────────────────────────────────── */
.hoje-item {
  transition: background .12s;
}
.hoje-item:hover {
  background: var(--row-hover);
}
.hoje-tarja {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
  min-height: 40px;
}

/* ─────────────────────────────────────────────
   ETAPA 7 — Informação contextual
───────────────────────────────────────────── */

/* Ponto azul para atividade recente (< 24h) */
.ponto-novo {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #3b82f6;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Indicador de saúde do processo */
.saude-ico {
  font-size: 8px;
  margin-right: 4px;
  vertical-align: middle;
}
.saude-ok         { color: #22c55e; }
.saude-alerta     { color: #f59e0b; }
.saude-vencido    { color: #ef4444; }
.saude-parado     { color: #94a3b8; }
.saude-aguardando { color: #7c3aed; }

/* Hover card (preview ao passar o mouse) */
#hover-card {
  position: fixed;
  z-index: 1100;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 14px 16px;
  min-width: 260px;
  max-width: 340px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  /* P5.2 — o cartão de prévia ficava no DOM apenas TRANSPARENTE (opacity: 0). Duas
     consequências, e a segunda é a que importa: (a) o auditor o media meio esmaecido e
     acusava contraste de 2:1 num texto que ninguém vê assim; (b) — a séria — o leitor
     de tela LIA o cartão, porque `opacity: 0` esconde da vista e não da árvore de
     acessibilidade. Quem não enxerga ouvia a prévia de uma linha sobre a qual não
     passou o mouse (não tem mouse), no meio da leitura da tabela. `visibility: hidden`
     esconde para os dois; o atraso na transição preserva o desvanecer. */
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  font-size: 13px;
  line-height: 1.5;
}
#hover-card.visivel {
  visibility: visible;
  transition: opacity .15s ease, transform .15s ease, visibility 0s;
  opacity: 1;
  transform: translateY(0);
}

/* Botão expand de linha */
.tr-exp-btn {
  background: none;
  border: none;
  padding: 2px 5px;
  color: var(--texto-muted);
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background .1s, color .1s;
  user-select: none;
}
.tr-exp-btn:hover, .tr-exp-btn.aberto {
  background: var(--row-hover);
  color: var(--cor-acento-texto);
}

/* Linha expandida (accordion inline) */
.tr-exp-row > td {
  background: var(--bg-sidebar) !important;
  border-top: none !important;
  padding: 10px 16px 12px 46px;
}
.tr-exp-inner {
  border-left: 2px solid var(--cor-acento);
  padding-left: 12px;
}

/* ─────────────────────────────────────────────
   C10 — Vista anual (12 mini-calendários)
───────────────────────────────────────────── */
.cal-anual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 992px) { .cal-anual-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .cal-anual-grid { grid-template-columns: repeat(2, 1fr); } }

.cal-mini-mes {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 8px 8px;
  transition: box-shadow .15s;
}
.cal-mini-mes:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.cal-mini-header {
  text-align: center;
  margin-bottom: 5px;
}
.cal-mini-mes-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: color .12s, background .12s;
}
.cal-mini-mes-btn:hover { color: var(--cor-acento-texto); background: var(--hover-bg); }

.cal-mini-grade {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cal-mini-grade th {
  text-align: center;
  padding: 2px 0;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--texto-muted);
  text-transform: uppercase;
}
.cal-mini-grade th.cal-mini-fds-h { color: var(--cor-perigo-texto); opacity: .7; }

.cal-mini-dia {
  text-align: center;
  padding: 1px 0;
  font-size: 9.5px;
  color: var(--texto);
  cursor: pointer;
  border-radius: 3px;
  line-height: 1.5;
  vertical-align: top;
  user-select: none;
}
.cal-mini-dia:hover { background: var(--hover-bg); }
.cal-mini-dia.cal-mini-fds { color: var(--cor-perigo-texto); }
.cal-mini-dia.cal-mini-hoje {
  background: var(--cor-acento) !important;
  color: #fff !important;
  border-radius: 50%;
  font-weight: 700;
}
.cal-mini-dia.cal-mini-feriado { background: rgba(59,130,246,.08); }
[data-bs-theme="dark"] .cal-mini-dia.cal-mini-feriado { background: rgba(59,130,246,.14); }

.cal-mini-pips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  min-height: 5px;
}
.cal-mini-pip {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-mini-pip-prazo    { background: #065f46; }
.cal-mini-pip-corr     { background: #1e3a8a; }
.cal-mini-pip-lembrete { background: #5b21b6; }
.cal-mini-pip-aviso    { background: #9d174d; }
.cal-mini-pip-ttd      { background: #854d0e; }
[data-bs-theme="dark"] .cal-mini-pip-prazo    { background: #6ee7b7; }
[data-bs-theme="dark"] .cal-mini-pip-corr     { background: #93c5fd; }
[data-bs-theme="dark"] .cal-mini-pip-lembrete { background: #c4b5fd; }
[data-bs-theme="dark"] .cal-mini-pip-aviso    { background: #fbcfe8; }
[data-bs-theme="dark"] .cal-mini-pip-ttd      { background: #fcd34d; }

/* ─────────────────────────────────────────────
   C12 — painel de atalhos de teclado (calendário)
───────────────────────────────────────────── */
#cal-atalhos-overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9000;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  animation: sigma-fade-in .15s ease;
}


/* ─────────────────────────────────────────────
   COCKPIT PRESIDÊNCIA
───────────────────────────────────────────── */
.cockpit-item {
  transition: background .12s;
}
.cockpit-item:hover {
  background: var(--row-hover);
}
.cockpit-tarja {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
  min-height: 40px;
}

/* Sub-seções dentro do card de Ação Imediata */
.cockpit-subsec-label {
  background: color-mix(in srgb, var(--borda) 40%, transparent);
  border-top: 1px solid var(--borda);
}
.cockpit-subsec-label:first-child,
.cockpit-subsec-label.cockpit-subsec-first {
  border-top: none;
}


/* ─────────────────────────────────────────────
   PAINEL DO SETOR — Kanban (S8)
───────────────────────────────────────────── */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
}
.kanban-col {
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.kanban-col-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-card);
}
.kanban-col-body {
  overflow-y: auto;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kanban-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  transition: background .12s;
}
.kanban-card:last-child { border-bottom: none; }
.kanban-card:hover { background: var(--row-hover); }

/* ── I1: Drag-and-drop de PDF ──────────────────────────── */
.prot-dropzone {
  border: 2px dashed var(--borda);
  background: var(--bg-card);
  transition: border-color .15s, background-color .15s;
  cursor: pointer;
}
.prot-dropzone:hover,
.prot-dropzone.dragover {
  border-color: var(--sigma-cor-primaria, #0d6efd);
  background-color: color-mix(in srgb, var(--sigma-cor-primaria, #0d6efd) 5%, transparent);
}

/* ── I2: Indicadores de confiança por campo ────────────── */
.conf-badge { font-size: .7em; vertical-align: middle; }
.conf-alta  { color: #198754; }
.conf-media { color: #f0ad4e; }

/* ── I5: Indicadores de etapa do wizard de lote ────────── */
.lote-step-ind        { color: var(--bs-secondary-color); }
/* P5 — a etapa ATIVA do wizard é justamente a que precisa ser lida (2,57:1 antes). */
.lote-step-ind.active { color: var(--cor-acento-texto); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   Ciclo T — Editor Inteligente
══════════════════════════════════════════════════════════════ */

/* Área de scroll do editor */
.editor-scroll-area {
  background: var(--bg-sidebar);
  min-height: calc(100vh - 280px);
  padding: 24px 20px 80px;
  overflow-y: auto;
}

/* Folha de papel A4 virtual */
.editor-paper {
  width: 794px;          /* A4 a 96dpi */
  min-height: 1123px;
  margin: 0 auto;
  padding: 72px 80px;
  box-shadow: 0 2px 16px rgba(0,0,0,.15);
  border-radius: 2px;
  position: relative;
}

/* Marca d'água de estado (BRAND-3d): glifo do estado (minuta, no editor)
   atrás do texto. Herda a cor do texto da folha (currentColor) para
   funcionar sobre qualquer fundo de papel; ~5% de opacidade = presença
   sutil, nunca disputa com o conteúdo. Fora do fluxo e do tab order. */
.editor-marca-dagua {
  position: absolute;
  top: 90px; left: 0; right: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  opacity: .05;
}
.editor-marca-dagua .glifo { width: 300px; height: 300px; }
.editor-marca-dagua .glifo .g-haste,
.editor-marca-dagua .glifo .g-barra { stroke: currentColor; }
/* O conteúdo editável fica acima da marca d'água. */
.editor-paper #editor-content { position: relative; z-index: 1; }

/* Régua */
.editor-regua {
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--borda);
  height: 22px;
  position: sticky;
  top: 97px;
  z-index: 98;
  overflow: hidden;
}
.editor-regua-track {
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--borda) 0,
    var(--borda) 1px,
    transparent 1px,
    transparent 10px
  );
  background-size: 10px 100%;
  width: 100%;
  opacity: .5;
}

/* Corpo do editor TipTap */
.editor-body {
  outline: none;
  min-height: 400px;
  font-family: 'Times New Roman', serif;
  font-size: 12pt;
  line-height: 1.6;
}
.editor-body > * + * { margin-top: 0.75em; }
.editor-body h1 { font-size: 18pt; font-weight: 700; text-align: center; }
.editor-body h2 { font-size: 15pt; font-weight: 700; }
.editor-body h3 { font-size: 13pt; font-weight: 700; }
.editor-body ul, .editor-body ol { padding-left: 1.5em; }
.editor-body blockquote { border-left: 3px solid currentColor; padding-left: 1em; opacity: .8; margin-left: 1em; }
.editor-body hr { border: none; border-top: 1px solid currentColor; opacity: .3; }

/* Tabelas no editor */
.editor-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.8em 0;
  table-layout: fixed;
  overflow: hidden;
}
.editor-body td,
.editor-body th {
  border: 1px solid #bbb;
  padding: 6px 10px;
  min-width: 1em;
  vertical-align: top;
  word-break: break-word;
  position: relative;
  box-sizing: border-box;
}
.editor-body th {
  background: rgba(0,0,0,.04);
  font-weight: 600;
}
/* Célula selecionada pelo TipTap Table */
.editor-body .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14,165,233,.15);
  pointer-events: none;
  z-index: 2;
}

.editor-body p.is-editor-empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
  float: left;
  height: 0;
}

/* Toolbar botões ativos */
#editor-toolbar .editor-tool.active,
.mc-toolbar .editor-tool.active {
  background: var(--cor-acento);
  color: #fff;
  border-color: var(--cor-acento);
}

/* Indicador de atualização pendente em aba de processo (PROT-V2-1) */
.ws-ponto {
  color: #fd7e14;
  font-weight: 700;
  pointer-events: none;
}

/* ── Inventário do acervo (árvore de localização) ── */
.inv-arvore { max-height: 62vh; overflow-y: auto; }
.inv-arvore .inv-lista .inv-lista { border-left: 1px solid var(--borda); }
.inv-no-sel { border-radius: 6px; padding-inline: 4px; cursor: pointer; }
.inv-no-sel:hover { background: var(--bs-tertiary-bg, rgba(125,125,125,.08)); }
.inv-no-sel.active { background: var(--cor-acento); color: #fff; }
.inv-no-sel.active .badge { background: rgba(255,255,255,.25) !important; color: #fff !important; border-color: transparent !important; }
.inv-no-sel.active .bi { color: #fff !important; }
.inv-toggle { width: 1rem; text-align: center; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
   AUDITORIA-UX — panorama, lista HARMONIA por dia, e impressão
   (Trilho C / AUDITORIA-UX). Tokens de tema reutilizados; sem cor crua.
═══════════════════════════════════════════════════════════════════ */

/* Fonte mono para hash / IP / número / sessão */
.audit-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }

/* — Panorama — */
.audit-panorama-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 1.4fr;
  gap: 0;
}
.audit-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid var(--borda-card, rgba(125,125,125,.15));
}
.audit-tile-ico {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cor-acento, #2e86de) 14%, transparent);
  color: var(--cor-acento-texto, #2e86de);
  font-size: 16px;
}
.audit-tile--alerta  .audit-tile-ico { background: color-mix(in srgb, #d64545 16%, transparent); color: #d64545; }
.audit-tile--restrito .audit-tile-ico { background: color-mix(in srgb, #b5820a 18%, transparent); color: #b5820a; }
.audit-tile-num { font-size: 22px; font-weight: 700; line-height: 1.05; }
.audit-tile-rot { font-size: 11.5px; color: var(--texto-muted, #6b7280); }

.audit-spark { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.audit-spark-titulo { font-size: 11.5px; color: var(--texto-muted, #6b7280); }
.audit-spark-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.audit-spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.audit-spark-bar { width: 100%; max-width: 16px; border-radius: 3px 3px 0 0; background: var(--cor-acento, #2e86de); opacity: .85; }
.audit-spark-lbl { font-size: 9px; color: var(--texto-muted, #6b7280); }

@media (max-width: 992px) {
  .audit-panorama-grid { grid-template-columns: repeat(2, 1fr); }
  .audit-tile:nth-child(2n) { border-right: 0; }
  .audit-spark { grid-column: 1 / -1; border-top: 1px solid var(--borda-card, rgba(125,125,125,.15)); }
}

/* — Lista de eventos (gramática HARMONIA) — */
.audit-dia-head {
  padding: 8px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--texto-muted, #6b7280);
  background: var(--bs-tertiary-bg, rgba(125,125,125,.06));
  border-top: 1px solid var(--borda-card, rgba(125,125,125,.15));
  position: sticky; top: 0; z-index: 2;
}
.audit-dia-head:first-child { border-top: 0; }

.audit-row { border-top: 1px solid var(--borda-card, rgba(125,125,125,.12)); }
.audit-row:first-child { border-top: 0; }
.audit-row-main {
  display: grid;
  grid-template-columns: 46px minmax(180px, 1.7fr) minmax(110px, 1fr) 140px minmax(90px, 150px) 120px 22px;
  gap: 10px; align-items: center;
  width: 100%; min-height: 44px; padding: 5px 14px;
  background: none; border: 0; text-align: left; color: inherit;
  cursor: pointer;
}
.audit-row--flat .audit-row-main { cursor: default; }
.audit-row-main:hover:not([disabled]) { background: var(--bs-tertiary-bg, rgba(125,125,125,.06)); }
.audit-row-main:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: -2px; }
.audit-hora { color: var(--texto-muted, #6b7280); }
.audit-op { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.audit-op .badge { white-space: normal; text-align: left; }
.audit-res { font-size: 10px; }
.audit-quem { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-mod, .audit-ref, .audit-ip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.audit-chev { color: var(--texto-muted, #6b7280); text-align: center; }

.audit-det {
  padding: 12px 16px 14px 60px;
  background: var(--bs-tertiary-bg, rgba(125,125,125,.05));
  border-top: 1px dashed var(--borda-card, rgba(125,125,125,.2));
}
.audit-diff-antes  { color: #b3261e; background: color-mix(in srgb, #b3261e 8%, transparent); padding: 0 4px; border-radius: 3px; }
.audit-diff-depois { color: #1b7a43; background: color-mix(in srgb, #1b7a43 10%, transparent); padding: 0 4px; border-radius: 3px; }

@media (max-width: 820px) {
  .audit-row-main { grid-template-columns: 44px 1fr auto 22px; gap: 8px; }
  .audit-mod, .audit-ip { display: none; }
  .audit-det { padding-left: 16px; }
}

/* — Impressão — */
.audit-somente-impressao { display: none; }
@media print {
  .audit-nao-imprime { display: none !important; }
  .audit-somente-impressao { display: block !important; margin-bottom: 10px; }
  #sidebar, #sigma-topbar, .sigma-sidebar, .sigma-topbar, .page-header { display: none !important; }
  .admin-layout { display: block !important; }
  .audit-det { display: block !important; padding-left: 16px; }
  .audit-row, .audit-row-main { break-inside: avoid; }
  .audit-dia-head { position: static; }
  .sigma-card { border: 0 !important; box-shadow: none !important; }
  .audit-row-main { cursor: default; }
}

/* ═══════════════════════════════════════════════════════════
   SAUDAÇÃO — acolhida por hora do dia + faixa "Hoje" no topo da home.
   Cordial de repartição boa: cumprimento em cerimonial, contexto discreto,
   faixa "Hoje" como link para o Calendário. Tokens tematizados (claro/escuro).
═══════════════════════════════════════════════════════════ */
.saudacao {
  margin: 2px 0 16px;
}
.saudacao-ola {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  line-height: 1.35;
}
.saudacao-base {
  font-family: var(--fonte-cerimonial);
  font-size: 22px;
  font-weight: 500;
  color: var(--cor-primaria);
}
.saudacao-floreio {
  font-size: var(--text-sm);
  color: var(--marca-ouro-texto);
  font-style: italic;
}
.saudacao-floreio[hidden] { display: none; }
.saudacao-ctx {
  font-size: var(--text-sm);
  color: var(--texto-muted);
}
.saudacao-prazo { white-space: nowrap; }

/* Faixa "Hoje" — link discreto para o Calendário. */
a.saudacao-hoje {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--borda);
  color: var(--texto-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  max-width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
a.saudacao-hoje[hidden] { display: none; }
a.saudacao-hoje:hover {
  border-color: var(--cor-acento);
  color: var(--texto-muted);
}
a.saudacao-hoje > .bi { color: var(--marca-ouro-texto); flex-shrink: 0; }
.saudacao-hoje-txt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}
.saudacao-data { color: var(--texto); font-weight: 600; }
.saudacao-marca, .saudacao-selo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.saudacao-marca.fechado, .saudacao-selo { color: var(--marca-ouro-texto); }
.saudacao-marca.prazo   { color: var(--texto-muted); }
.saudacao-marca.calmo   { font-style: italic; }
.saudacao-marca:not(:first-child)::before,
.saudacao-selo::before {
  content: "·";
  margin-right: 10px;
  color: var(--borda);
}

@media (max-width: 640px) {
  .saudacao-base { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════
   GLOSSÁRIO INLINE (HOSPITALIDADE) — termo com "o que é isso?"
   Sublinhado pontilhado discreto + "?" ; balão flutuante único.
═══════════════════════════════════════════════════════════ */
.glossario-termo {
  cursor: help;
  border-bottom: 1px dotted var(--marca-ouro-texto);
  display: inline;
}
.glossario-termo:hover { border-bottom-color: var(--cor-acento); }
.glossario-termo.glossario-termo--icone { border-bottom: 0; }
.glossario-i {
  font-size: .82em;
  color: var(--marca-ouro-texto);
  margin-left: 3px;
  vertical-align: baseline;
}
.glossario-termo:hover .glossario-i { color: var(--cor-acento-texto); }
.glossario-termo:focus-visible {
  outline: 2px solid light-dark(var(--marca-ink), var(--marca-ouro));
  outline-offset: 2px;
  border-radius: 2px;
}

.glossario-pop {
  position: absolute;
  z-index: 1080;
  max-width: min(320px, calc(100vw - 16px));
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  padding: 12px 14px;
  font-size: var(--text-sm);
  color: var(--texto);
  line-height: 1.45;
}
.glossario-pop[hidden] { display: none; }
.glossario-pop-t {
  font-family: var(--fonte-cerimonial);
  font-size: 15px;
  color: var(--cor-primaria);
  margin-bottom: 4px;
}
.glossario-pop-d { color: var(--texto); }
.glossario-pop-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--marca-ouro-texto);
  text-decoration: none;
}
.glossario-pop-link:hover { text-decoration: underline; }

/* Selo "Rascunho salvo às HH:MM" do autosave de despacho (discreto, abaixo do campo). */
.autosave-selo {
  font-size: var(--text-xs);
  color: var(--texto-muted);
  text-align: right;
  margin-top: 3px;
  line-height: 1.4;
  animation: autosave-selo-in .25s ease;
}
.autosave-selo > .bi { color: var(--marca-ouro-texto); }
.autosave-selo[hidden] { display: none; }
@keyframes autosave-selo-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .autosave-selo { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   PAINEL BI (CICLO BI) — visão gerencial. Ver docs/PLANO-BI-0-PAINEL-BI.md.
   Gráfico = SVG próprio (decisão BI-0: acessível por título/ARIA/teclado,
   o que canvas não é; CSP proíbe CDN). Cores validadas pelo skill dataviz:
   série categórica azul+aqua (CVD ok em light/dark); rampa ordinal azul
   light→dark para as 3 fases do ciclo. Status usa os tokens semânticos da
   casa (--cor-sucesso/aviso/perigo), que já são theme-aware.
═══════════════════════════════════════════════════════════════════ */
:root {
  --bi-serie-1: #2a78d6;   /* azul  — categórica slot 1 (linha: abertos) */
  --bi-serie-2: #1baf7a;   /* aqua  — categórica slot 2 (linha: encerrados) */
  --bi-seq-1:   #86b6ef;   /* rampa ordinal — corrente (mais clara) */
  --bi-seq-2:   #3987e5;   /* rampa ordinal — intermediária */
  --bi-seq-3:   #184f95;   /* rampa ordinal — permanente (mais escura) */
  --bi-grid:    color-mix(in srgb, var(--texto-muted) 22%, transparent);
}
[data-bs-theme="dark"] {
  /* CSS-TOKENS (2026-07-19): --bi-serie-1 era #3987e5 — EXATAMENTE o mesmo hex
     de --bi-seq-2. Duas escalas de significado diferente (categórica "abertos
     vs encerrados" × rampa ordinal das fases arquivísticas) pintavam igual na
     mesma tela do painel. Medido com o validador de paletas: ΔE 0,0.
     Agora #2f6fd0 — ΔE 7,0 do degrau médio, e a dupla categórica (com o verde)
     passa nos 5 checks, contraste ≥3:1 sobre a superfície escura inclusive.
     ⚠️ Medido também o que NÃO se resolve aqui: a rampa ocupa todo o eixo azul,
     então nenhuma cor categórica atinge o piso de 15 contra ela — inclusive
     violeta e magenta, que colidem com o degrau escuro sob protanopia. Separar
     as FAMÍLIAS é decisão de paleta, registrada no BACKLOG (BI-PALETA-FAMILIA).
     O leitor já está protegido pelo que a doutrina exige: nenhum gráfico mistura
     as duas escalas, e todos trazem legenda + rótulo (identidade nunca só cor). */
  --bi-serie-1: #2f6fd0;
  --bi-serie-2: #199e70;
  --bi-seq-1:   #6da7ec;
  --bi-seq-2:   #3987e5;
  --bi-seq-3:   #184f95;
}

/* Grade de blocos do hub */
.bi-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.bi-col-3  { grid-column: span 3; }
.bi-col-4  { grid-column: span 4; }
.bi-col-6  { grid-column: span 6; }
.bi-col-8  { grid-column: span 8; }
.bi-col-12 { grid-column: span 12; }
@media (max-width: 992px) {
  .bi-col-3, .bi-col-4, .bi-col-6, .bi-col-8 { grid-column: span 12; }
}

/* KPI-card: o número é o herói (padrão BI-0) */
.bi-kpi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem 1.1rem; height: 100%;
}
.bi-kpi-rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-muted); font-weight: 600;
  display: flex; align-items: center; gap: .4rem;
}
.bi-kpi-num { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--texto); }
.bi-kpi-tend { font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.bi-kpi-tend.sobe { color: var(--cor-sucesso-texto); }
.bi-kpi-tend.desce { color: var(--cor-aviso-texto); }
.bi-kpi-ctx { font-size: .78rem; color: var(--texto-muted); margin-top: auto; }

/* A "porta": todo número que leva a uma lista (drill-down, BI-2) */
.bi-porta {
  color: var(--cor-primaria); text-decoration: none; font-weight: 600;
  border-radius: 6px; cursor: pointer;
}
.bi-porta:hover, .bi-porta:focus-visible { text-decoration: underline; }
.bi-clicavel { cursor: pointer; }
.bi-clicavel:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }

/* Barras horizontais (gargalos por setor) — marcas finas, ponta arredondada */
.bi-bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: .6rem; padding: .3rem 0; border-radius: 6px; }
.bi-bar-row + .bi-bar-row { border-top: 1px solid var(--bi-grid); }
.bi-bar-rot { font-size: .82rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bar-track { height: 12px; background: var(--bi-grid); border-radius: 6px; overflow: hidden; }
.bi-bar-fill { height: 100%; background: var(--bi-seq-2); border-radius: 6px; transition: width .5s ease; }
.bi-bar-val { font-size: .82rem; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }

/* Legenda de gráfico (donut) — identidade nunca só por cor: swatch + texto */
.bi-legenda { display: flex; flex-direction: column; gap: .35rem; }
.bi-legenda-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--texto); border-radius: 6px; padding: .15rem .3rem; }
.bi-legenda-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.bi-legenda-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Semáforo (LAI, prazos) — status com ícone+rótulo, nunca cor sozinha */
.bi-semaforo { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.bi-sem-item { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.bi-sem-bolha { width: 12px; height: 12px; border-radius: 50%; }
.bi-sem-num { font-weight: 700; font-size: 1.1rem; }

/* SVG dos gráficos: responsivo, nunca estoura a largura do bloco */
.bi-svg { width: 100%; height: auto; display: block; }
.bi-fonte { font-size: .72rem; color: var(--texto-muted); margin-top: .5rem; }

/* Aparição discreta (BI-0: ~200ms, uma vez; Brave e reduced-motion = sem nada) */
@keyframes bi-surge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bi-surge { animation: bi-surge .2s ease both; }
@media (prefers-reduced-motion: reduce) { .bi-surge { animation: none; } .bi-bar-fill { transition: none; } }

/* ── Toggle segmentado "Fluxo" da correspondência ─────────────────────────
   Compacto e elegante (estilo segmented control), discreto no canto do modal.
   Interna vem pré-selecionada; clicar troca. Claro/escuro via light-dark(). */
.fluxo-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: light-dark(#eceef2, rgba(255,255,255,.08));
}
.fluxo-opt {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
  padding: 3px 11px;
  border-radius: 6px;
  color: var(--bs-secondary-color, #6c757d);
  transition: background .15s, color .15s, box-shadow .15s;
}
.fluxo-opt:hover { color: var(--bs-body-color); }
.fluxo-opt:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 1px; }
.fluxo-opt.ativo {
  background: light-dark(#ffffff, #34373e);
  color: light-dark(var(--cor-primaria, #17294C), #e9e9ec);
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .fluxo-opt { transition: none; } }

/* ══════════════════════════════════════════════════════════════
   Agenda do ano arquivístico (#/agenda-ano) — AF2 peça 3
   A grade é uma tabela de contagens, não um mapa de calor: o trabalho dela é
   levar ao mês e de lá à porta que pratica o ato. Por isso a cor fica reservada
   ao que é ESTADO (mês corrente, atraso) e os números seguem em tinta de texto.
══════════════════════════════════════════════════════════════ */
.tabela-agenda th[scope="col"] { font-weight: 600; font-size: .82rem; }

/* Mês corrente: marcado por borda + rótulo textual, nunca por cor sozinha. */
.tabela-agenda .mes-corrente {
  border-bottom: 2px solid var(--cor-acento-texto, #B0934E);
  background: light-dark(rgba(176,147,78,.08), rgba(176,147,78,.14));
}
.tabela-agenda .marca-hoje {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-acento-texto, #B0934E);
  line-height: 1;
}

/* A contagem é o alvo de clique — grande o bastante para o dedo e o teclado. */
.cel-agenda {
  min-width: 2.4rem;
  padding: .3rem .35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-body-color);
  border-radius: 6px;
}
.cel-agenda:hover { background: var(--bs-secondary-bg); text-decoration: none; }
.cel-agenda:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 1px; }

/* ─── Árvore de setores (redesenho de 2026-08-04) ───────────────────────────
 * O desenho anterior nasceu com os 5 setores da vitrine e desabou com os 44 do
 * organograma real: linha de largura inteira com o botão preso na borda direita,
 * indentação de 20px invisível numa tela larga, e nada que recolhesse — 2376px
 * de altura, medidos na tela. Aqui: linha densa, fio-guia da hierarquia,
 * recolhimento nativo por <details> e tipografia que acompanha o nível. */

/* ── A linha ── */
.setor-linha {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  min-height: 38px;
  border-bottom: 1px solid var(--borda);
}
#arvore-setores > .setor-linha:last-child,
#arvore-setores > details.setor-no:last-child > .setor-filhos > *:last-child .setor-linha,
.setor-filhos > *:last-child > .setor-linha { border-bottom: 0; }

details.setor-no > summary.setor-linha {
  cursor: pointer;
  list-style: none;
  /* nó com filhos = leve destaque, derivado do TEXTO para acompanhar o tema */
  background: color-mix(in srgb, var(--texto) 4%, transparent);
}
details.setor-no > summary.setor-linha::-webkit-details-marker { display: none; }
details.setor-no > summary.setor-linha:hover { background: color-mix(in srgb, var(--texto) 9%, transparent); }
details.setor-no > summary.setor-linha:focus-visible {
  outline: 2px solid var(--cor-primaria); outline-offset: -2px;
}
.setor-linha:not(summary):hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }

/* O fio-guia é o que faz a hierarquia aparecer sem gastar indentação larga. */
.setor-filhos { margin-left: 20px; border-left: 1px solid var(--borda); }

/* A tipografia acompanha o nível: raiz forte, folha discreta. Sem isto, 23 nomes
   com o mesmo peso viram um bloco só e a hierarquia depende apenas do fio. */
.setor-nome { font-weight: 600; letter-spacing: -.01em; }
.setor-linha[data-nivel="0"] .setor-nome { font-size: 15px; font-weight: 700; }
.setor-linha[data-nivel="1"] .setor-nome { font-size: 14px; }
.setor-linha[data-nivel="2"] .setor-nome { font-size: 13.5px; font-weight: 500; color: var(--texto); }
.setor-linha[data-nivel="3"] .setor-nome { font-size: 13px;   font-weight: 500; color: var(--texto-muted); }

.setor-chevron { font-size: 11px; color: var(--texto-muted); transition: transform .15s ease; flex: none; width: 12px; }
details.setor-no[open] > summary .setor-chevron { transform: rotate(90deg); }
.setor-chevron-vazio { display: inline-block; width: 12px; flex: none; }

.setor-contador {
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--borda);
  color: var(--texto-muted);
}

/* ⚠️ O lápis NÃO some no repouso: botão que só aparece no hover é invisível para
   teclado e para toque. Ele fica discreto e ganha contorno ao ser alcançado. */
.setor-acoes {
  margin-left: auto; flex: none;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--texto-muted) !important;
  padding: 3px 8px !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.setor-linha:hover .setor-acoes,
.setor-acoes:hover, .setor-acoes:focus-visible {
  color: var(--cor-primaria) !important;
  border-color: var(--borda) !important;
  background: var(--bg-card) !important;
}

@media (prefers-reduced-motion: reduce) {
  .setor-chevron, .setor-acoes { transition: none; }
}