/* ds.css — Design System (contrato visual). Ver DESIGN_SYSTEM.md.
   Estático, sem build. Estende os tokens do dashboard atual (zero rename). */

/* Fontes SELF-HOSTED (auditoria de segurança M3 — tira o Google de toda página autenticada).
   Variáveis (peso 400–700), latin+latin-ext (pt-BR). woff2 em fonts/, gerados por tools/vendor-fonts.mjs. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* base (preservados) */
  --bg:#FAFAF6; --surface:#FFFFFF; --surface-2:#F5F2EC; --surface-3:#EFEBE2;
  /* `--ink-subtle` é o cinza MAIS CLARO que dá 4,5:1 sobre `--bg`, `--surface` e `--surface-2` (BC-39).
     O valor SAI da conta (`tests/unit/contraste-rules.test.mjs`), não se digita: clarear reprova no
     gate. Ele fica perto do `--ink-muted` de propósito — a hierarquia vem de tamanho e peso, não de
     um cinza que ninguém lê. Era #8C8C8C (3,0:1 no `--surface-2`). */
  --ink:#0A0A0A; --ink-muted:#5C5C5C; --ink-subtle:#6E6E6E;
  --border:#EBE8E0; --border-strong:#D9D5CC;
  --tangerine:#FF6B00; --tangerine-deep:#E25500; --tangerine-darker:#B84300;
  --tangerine-soft:#FFF0E5; --tangerine-glow:rgba(255,107,0,.10);
  --navy:#0F1B2D; --navy-soft:#1B2A41; --navy-2:#2A3A55;
  /* TINTA SOBRE NAVY (hero em `docs/front.md` §3.31). Existem porque `--danger`/`--success` são
     calibrados para fundo CLARO e afundam no navy: #C73E3E sobre `--navy-soft` dá 2,88:1 e reprova
     AA com folga.
     Razões CALCULADAS (WCAG 2.x, script no ticket BC-21) — sobre `--navy-soft` #1B2A41 e, entre
     parênteses, o PIOR caso, que é dentro do `--tangerine-glow` (composita para #32313B):
       `-neg` 7,26 (6,49) · `-pos` 9,02 (8,06) · `-mute` 6,76 (6,04). Os três passam AA nos dois.
     `--on-navy-mute` é o micro-label, e é SÓLIDO de propósito: `rgba(255,255,255,.5)` passa no navy
     liso (4,75:1) e cai para 4,49:1 dentro do glow, reprovando AA exatamente na região do hero em
     que o glow existe para estar. Branco a 50 % também não é uma das combinações validadas do
     DESIGN_SYSTEM §5 ("`-soft` + sólido"). Sólido não tem essa dependência do que está por baixo. */
  --on-navy-neg:#FF9D9D; --on-navy-pos:#7BE0AE; --on-navy-mute:#A8B2C4;
  --success:#1B8B5C; --success-soft:#E6F3EC; --danger:#C73E3E; --danger-soft:#FBEAEA;
  --warning:#D9A300; --warning-soft:#FBF3E1; --info:#2563B5; --info-soft:#E5EDF8;
  /* IDENTIDADE V3 (BC-64, D68 — DESIGN_SYSTEM.md §"Identidade v3"). Tokens novos, nenhum renomeado: a tela
     que não migrou não muda um pixel. Os `-ink` são a TINTA de texto semântico, que passa 4,5:1 sobre o
     `-soft` dele e sobre `--surface` (o `--warning` puro sobre branco dá 2,2:1 e não é texto). Laranja vira
     também DADO na v3 — a barra do retorno —, e cada posição da barra tem a sua cor (`--seg-1`…`--seg-4`,
     pela POSIÇÃO na lista, nunca pelo projeto) e o cinza-azul só do segmento "Outros". `--on-navy-muted` é o
     texto secundário do topo v3, mais claro que o `-mute` do hero antigo (que segue para quem não migrou).
     Razões em `tools/contraste-rules.mjs`. */
  --success-ink:#16744C; --warning-ink:#6E5100; --danger-ink:#B03434; --warning-line:#E8C766;
  /* BC-74 (D80, grill de 14/10): cores DIFERENTES, não degraus de laranja — os dois tons claros de laranja
     ficavam a ΔE 9,4 sobre o navy (mínimo 15) e o gestor via dois projetos com a mesma cor. Sem verde-água
     (lembra "positivo") nem roxo/lavanda (confundem com o azul, também para daltônico). */
  --seg-1:var(--tangerine); --seg-2:#7FB8F0; --seg-3:#F2D06B; --seg-4:#F28DB2; --seg-outros:#5D6B82;
  --surface-warm:#FCFBF8; --on-navy-muted:#B9C3D3; --on-navy-line:rgba(255,255,255,.12);
  --bsc:#6E3FCB; --bsc-deep:#5B2FB0; --bsc-star:#FFD46B; --bsc-soft:#EEE7FA;   /* BSC (roxo do dash legado) */
  /* status "Upstream" do Projeto BSC (D59): o roxo do painel do Luis. Os outros 4 status usam os
     semânticos (success/info/warning/danger); este é o único sem par no DS. ≠ `--bsc`: marca estado,
     não prioridade. Branco sobre ele 7,0:1; ele sobre o `-soft` 5,8:1 (AA). */
  --st-upstream:#8E24AA; --st-upstream-soft:#F3E5F5;
  /* rampa de squad (atribuível por org) */
  --squad-1:#1B6E7A; --squad-1-soft:#E3F0F1; --squad-2:#6A4C93; --squad-2-soft:#EFE9F4;
	  --squad-3:#9C5A2C; --squad-3-soft:#F4EADF; --squad-4:#3E6B49; --squad-4-soft:#E6EFE8;
	  --squad-5:#8A4A5E; --squad-5-soft:#F3E7EB; --squad-6:#4A5A8C; --squad-6-soft:#E8ECF5;
	  --squad-7:#3A3D7A; --squad-7-soft:#E6E7F3;
	  --squad-8:#245C73; --squad-8-soft:#E2EEF2; --squad-9:#7B3B6E; --squad-9-soft:#F2E4EE;
	  --squad-10:#5E6F2F; --squad-10-soft:#EEF2E1; --squad-11:#2F5E8C; --squad-11-soft:#E3EBF4;
	  --squad-12:#7A6A2F; --squad-12-soft:#F1EDE0; --squad-13:#4F6F6A; --squad-13-soft:#E6EFEC;
	  --squad-14:#6D4B3A; --squad-14-soft:#F1E7E1;
  --squad-outros:#7A7A72; --squad-outros-soft:#EEEDE8;
  /* papéis / rbac */
  --role-diretor:#0F1B2D; --role-gerente:#1B6E7A; --role-admin:#B84300; --role-colaborador:#5A3FB8; --role-financeiro:#7A5A00; --role-campanhas:#A32063;
  --readonly-ink:#8C8C8C; --readonly-bg:#F5F2EC;
  /* forma / movimento */
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,27,45,.04),0 0 0 1px rgba(15,27,45,.04);
  --shadow-md:0 4px 14px rgba(15,27,45,.06),0 0 0 1px rgba(15,27,45,.04);
  --shadow-lg:0 16px 48px rgba(15,27,45,.10),0 0 0 1px rgba(15,27,45,.04);
  --spine-w:3px; --ease:cubic-bezier(.2,.6,.2,1); --dur-1:120ms; --dur-2:200ms;
  /* skeleton (§3.17). A barra NÃO é `--surface-2` como o §3.17 dizia: #F5F2EC sobre o `--bg`
     #FAFAF6 dá ~1,02:1 e some na tela. `--surface-3` é o tom vizinho que ainda se enxerga. */
  --sk-bar:var(--surface-3); --sk-hi:rgba(255,255,255,.75); --sk-dur:1.4s;
  --sk-linhas:repeating-linear-gradient(180deg,var(--sk-bar) 0 14px,transparent 14px 44px);
  --sk-brilho:linear-gradient(90deg,transparent,var(--sk-hi),transparent);
  --sk-pilulas:repeating-linear-gradient(90deg,var(--sk-bar) 0 120px,transparent 120px 130px);
  --sk-cheio:linear-gradient(var(--sk-bar),var(--sk-bar));
  --z-sticky:10; --z-modal:100; --z-toast:120;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',-apple-system,system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Menlo',monospace;
  --sidebar-w:236px;
  --content-max:2100px; /* teto da coluna de conteúdo — enche monitores wide (32"); notebook fica abaixo do cap, intocado */
}
/* temas de squad: aplicar data-squad no card/linha.
   Este mapa é FALLBACK, não a fonte: `js/supabase.js:310` (mountSquadTheme) injeta o tema em runtime
   a partir de `squads.codigo` + `cor_slot` lidos do banco, então squad criada pela tela ganha cor
   sozinha e errar aqui não pinta errado na tela. Ele existe para o que roda antes do ctx e para a
   vitrine. Os slugs e os slots saem de `tools/slugs-de-producao.json` (medido de prod em 22/08) —
   `--squad-N` é 1-based e `cor_slot` é 0-based, logo N = cor_slot + 1 (`access-rules.js:76`).
   ID-05: até 22/08 este bloco declarava `bancos` e `aereas`, que nunca foram códigos de squad em
   produção (`bancos` é vocabulário do seed local; a squad Aéreas é `fluxo-de-emissao` desde a fusão
   de 06/07), e não declarava a squad Aéreas de jeito nenhum. */
[data-squad="fluxo-de-emissao"]{--squad-c:var(--squad-1);--squad-c-soft:var(--squad-1-soft)}
[data-squad="cobranded"]{--squad-c:var(--squad-2);--squad-c-soft:var(--squad-2-soft)}
[data-squad="ffp"]{--squad-c:var(--squad-3);--squad-c-soft:var(--squad-3-soft)}
[data-squad="portais-institucionais"]{--squad-c:var(--squad-4);--squad-c-soft:var(--squad-4-soft)}
[data-squad="marketplace"]{--squad-c:var(--squad-5);--squad-c-soft:var(--squad-5-soft)}
[data-squad="universo-viajante"]{--squad-c:var(--squad-6);--squad-c-soft:var(--squad-6-soft)}
[data-squad="clube-b2c"]{--squad-c:var(--squad-7);--squad-c-soft:var(--squad-7-soft)}
[data-squad="cadastro-login"]{--squad-c:var(--squad-8);--squad-c-soft:var(--squad-8-soft)}
[data-squad="app"]{--squad-c:var(--squad-10);--squad-c-soft:var(--squad-10-soft)}
[data-squad="smiles-viagens"]{--squad-c:var(--squad-14);--squad-c-soft:var(--squad-14-soft)}
[data-squad="outros"]{--squad-c:var(--squad-outros);--squad-c-soft:var(--squad-outros-soft)}

*{box-sizing:border-box}
/* `hidden` esconde SEMPRE (D-a3-05). O `[hidden]` do navegador perde para qualquer `display:` de classe, e o
   JS que faz `el.hidden = true` deixava o bloco na tela. A guarda caso a caso (`.pager[hidden]`, …) mordeu 3×
   e deixou 2 vivos. Para mostrar, tire o `hidden` — não dê `display` a ele. Travada pelo lint L27. */
[hidden]{display:none!important}
body{margin:0;font-family:var(--font-body);font-size:13.5px;line-height:1.45;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--ink-subtle)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
/* height:100vh + overflow-y:auto — menu longo (diretor) em tela baixa/zoom ROLA dentro do navy.
   Sem o overflow, os últimos itens (Auditoria, rodapé) pintavam FORA do fundo, sobre o conteúdo. */
/* Linhas FULL-BLEED (padding horizontal 0 no aside, 20px em cada linha): é o que faz a espinha
   tangerine do item ativo nascer colada na borda do navy, como no Claude Design. Com padding no
   aside a espinha ficava 14px para dentro e lia como "caixinha selecionada", não como aba ativa. */
.sidebar{background:var(--navy);color:#fff;padding:18px 0 22px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar .brand,.sidebar .nav-foot{flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 20px 18px}
/* logo Squads Produtos Smiles (data-URI; CSP libera img-src data:). Esconde o "S" do markup legado. */
.brand .glyph{width:34px;height:34px;border-radius:8px;background:var(--tangerine) center/cover no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAkoklEQVR42o19ebxdRZXut6r2PufcKTcjSSAkIQlJAAGZZxFkFlvAlklwwOGJgPpa7YeNee2IU9u2CKi8Ru1n82NSEBoEZGiZISABiUBCAiEh83DvTe4949719R97qtp7n4v3B78k5+5Tp2pV1Rq+9a11pHnFHAGR/jD6XyDWKySUQARk9MvkV4QIBDQQJK9Hj8VDJX+IWONbP+J+YjQgQFLSV9K3k8470/emn5jOTJKx07dLspD4t2ItOZ2oWJ9DERERL5oLICCTd4k1BQAmmV82w+SJ+HX746JJpUNG8xTmJeMsIJEfkWwWwXj9YolVMpECwkSuyWMUCLMnonUxepK5pSUD0BEW7c8iCKrsjOS2l9HLZDIQ6Q7mbEKy1GgqjOUhYDRQNFhOQPEjEq8xERaTrWLJ4/Gys3+n41KypTBZKstObSIU5ocoPEXCQ+lPNMXsbdnG5HYo2p94PvHnMbol0TwkO8HiHLTcJUN6issfy/ajy2KKh5Rd1gYIycKDkpeoCABVlFq34QlKtE8ECCGS8xHf8mgLRdJRhLRnwrK5RicOZUKhq3TKly7oIs/0nuQFLNYptIdiMprYb1HJBKOjKaCAsLaR2QPOHWbuxFmnWpxL13U3mVxtZp8iArqLIUvOkdiaNRuoiyDjPbSlyjI9gXjfaR8Xleg3ployp6oTkdo2Kd5xdr3Bkh2p7DURSexEdqvEkrZk+ozWlXRsFzNbmT9GLKxXrH2jo5yyT6NzeWhpS4LZFcsJxT0ysdhSBRzJzH5WABTn7UrHkaXEQrTFlPt7Kggp1wGlSorvqIIkZxnh3ipbvYtAlGXXcrfPcmGyuWZ2MGc4y/WBiONsMNrTbnqFJRZS/ga1W5hAps+lq46SbsNKsmSBraRtieQGSZ4lCxqczp53VbfjLUm6Hg0pLE9KpMESITPnq2XjdDEZ7Do9ZS2PtgRLPlZsY2WdVxnXuorln9iqNN5qoZQZXLjOOsaxZgVjJ6nwpOBjOtueTU9KV04wb+bF2VkpeOUlusWaHll2v904g7Sd0szSRY69fXiF4ym11EcQuHtmeZA5P1FQ9s/0fOXvZ/Sj3K0muoZM2S44QjbM1iySOvjp/3zHG5e8lXmnRdzDawlLbNUvRY/THt2xpiJOvNL1+toCkjJDYPmB0dVIrHMuKGQx5IvVkDguo3OGC4dC4DpbtvtoBS7OVZKiM4aCB1Cipmx1V3Y9XH9coCyPRCyvj07Q4wzpur5SOL1SEJmrLfO+ChyL31WXsezvUqqUWLT2peNHCy2/xDGYAM96Mwt7wYJ/IalSpHR1JcQRDrPoO+cmRFdSqa5gSKaA0xBQymWUOS/uisVGKaww09pY2nrF0jPRH557rOgey0QcObdV8rtk4SyJ/1pw70vUOwil0W6g04KovNdvDJSW2gBo4uskXfTMOErIvvjxEOLOlpldkcKpJ73c4oqusav8JUVdusTJVjDD7quIPlNrtBtqzgHquI9J70T7kJBEGJjn7jQv/QHV/hSRox0426ecLI/1JEV24Drr6dGzXBxK3qsGpHn57EwiYhljR9lb+EDmqhf8QheGzN9+cXdIBGFbJu7u/9OD6JuELvvTueZ8s/xhqfWDJn8oCj6L7biPq366xf1uECwCUEGQOSCk2EcvidyYN5N0tKvIuOqVXXS2Qruh5h+GvkloN+NHgg6CTjxcuwlAveskBC3JVAML94mW210a9aSam3mzm2AJksTxhORcC+VESknEK/kQMTuhYmu4EtHE8pY4eIdtCkmWeFgkvIp5+hY+c5toD9o3rz0ePnBN5sgk6klS2yK5u0CUysb22+IVST7mgiQ3lw66IqkfROTRhhSal2KETxuHEViecQ7+SIAdZtK0UVLmIglz34/Ng9dGW2heuDu89auoD4uNNCWeWdGfkJz7mu2ulPjGUoyDmZeOZbu9kgshuUCUeWgzlYWwPOwquAx0PNt8tE7SW/IowhAiMMY792qc/TXUBhndRHTxeZkmBDKPOca2xYmBOL6znGCMLHpnTOGOvHcpNmyTHVIlMcgurlcgRVyCxaxKN79VYMK7ruaaFyACpcz2teEd38bQ25G1f0f9Fk9InFCd7A4wFnRQHv/MwAt6UgLy2rmVWK/YuAiZBpNxKErXbjmHhoUIQBSUEq2pdHb02o3gJx/C9EWo1rh2uVp4FKp9ySxFlI6FacJyWEe64tdlESW7/CW7MfHOER4TGaTxBu3Qg652cpwBKfeDkJNXwT9s19GuU2m26+JVQANDfeEP1Xs+YV75bwRt9aFvysKjYAxo4PkStDiyBWGgKjXU+kkWvUKWeIlSVK4iwlJPXLqlFOK0T7Zu29djmgqhRJnG5B/OoEyxdgcpch3W2AVUaNf1vENx3MWqb2L40v0c2gRRQMhOS2btq2ftG08u6MCEUqlheIPa7736tC+y3eCye80L98CrWOHLOIE8nU3L5xGs2duq1rHXSdpHJEVjxFGBdLCBXOTexZu2wirJfFaBQBTCNiburj9/K3abZxqj7J1kXn+KK58Wzxe/6qgsz0elZra+aZ6+VabMZnsUSnufvgGLj2NzNI5LbLeQOYgjH2+QhQyN7cqkkku8AUmW4DlZr0SUqVp3gGdm5tY+HpJzwnPOsIhoj8aIUmy31e6LTGNX8OMPcXSH1AbgV9vXfUQtPg59E6U9qo64AFPnBnd/V2p9aDf5+tMc3WGW3YNnbpV2Xf3fJ2T+IfzL/VAahhAlMCi5cUIHkrKwPCnYLnGsaRZCJydImlfMloKLKlneugDmkpEPaEfOKdcgdTgdH7KxUyo1KMUwlGoPege5cztE0GlDgEoP6zuhNUa2+h+/Fnsd1F5yjEyYQmNUbz+MQdCSai8Yomciw4BjQxLZ/rCDSk20B1owVZrGlVwwKnaCTPLcBWamSxww1nNxjWiRwtL0iWRjM5c/TF/Mzl7KEDDqzC+rA06FUslxN1AaJHZtD/94rXnjeemfBFHstFHpgVeRCVOkf6KQ6DTV5Fnq/V+SGQui+D5WCzRQimtfDu/6Lptj8ciW1pTkQESHgJKaQwcOIZEHazPVGRtpLyZ3WJpMCuGwhXaRJRmIeLvic5eea+1hbEid+L+8s67qFtjLvEPa33wvxobgVwUmc5GNiW64vvjf1MKjWObnydyD6fcEN16q+ibAmPSIiJuIlCzfy1RkFn+EpQlBYSw9VZYhJogi3aac40Cmf+a4JHGqfuFRNCHCMB49DBnGvgw7bfRPkT32ZbsJ7aFdR6uOTgONESgPYUdNnIFZ+zH1fQiEQebtmVDmHYKeAYZh8mEZb0AyTDtJErixo6DIkpAi3Kls5U0LxcgjRxmqklJWCtJjIWEpgqANpblrW/Czi7D8YSgtYHDrP4UP/BSeD5JhIEqhsVO962Q54kNq4TH6+EtYH4YoBmH0dvOXPwa/uASj26E0tq4JrrsQb74ApSXsiOOg5FHINNcsTvaabkQnrgWzE0pQmf5OXRbbDmZeMUs4AGI5lo5zEMVCSf4WQGuUyx8xb/8VQoQBlz+Ct16M/QvfQ9iSKbP1F243K58K7vs375M/V/ufZMaG4fmiFABue8ssu5djQwJwZBNefpBDGxzOBPP8LsegW6lzmjiwoAWKxk4x84lTgtK8fE8bIZQccCQF4KVrgqWQjNeao0PeZ25Uh53d7YaSlOZONnbKwFRu39D66kEYG/W/fIc64oPYulZqfeydLCKZGs4NsPH1ztUnO/hUzE5yvFTmI1cWUmC5lFeG8KpilJnPUzBLIMauJFN4MhW7lQ7MnV8aAcybL3S+/36uXop2E2M7gru/H/z75yCiRILHftO5/evhH6+XqbP1IWeqxUeqxceGT9/euePbwX3XoDUGpYI//Dj4xSXcthbthtn0evCTc82TNwPI1JNkwJ11diwdWeLMsiQRzZTHFb9iwx2SgvGJ75egqhQH2E6PH11HlvbrwnggIaCm7cUpe3T+9Wzpm2zaTVHKO+87ICnCF+/j8ofCWp/0TPAv/TVJvvZ4+J9f5q7tmLKHPv2LAPQ+xwfP/rbz9WPRNxH1EbX7Ypl/aInxEIjNB0qzFLRpoFacVECLKGloEkvRsxbNjKSSsSmtkI+Ox0SSZYB8PtesNGjQO6g/dYPa/AY3vqar/WreYaj2MAhEa/QNysBkVPs7t31NnrwJfpVrXxZdkcHd0DNRlAdS9jrY/8aTfPN5Dm3C1Dlq9v7xarXXBapyU3dinY4CUycLORMP2E7jeLazx4Ti4pJlM2jRhdwEBQzFghAEAEyI0e0QhaANKpk+T6bPiycVdMTzAWDn1kh5Sq2fG1aCISq9EKEJVWMYnQZkEEEbypO9DpW9gMhXMIH4VdaH2WpIrQdksrliBzxSysGTzJaJE16X4HsOgUrS4D1FknKs0nQzsny8E/VJhl8BxqDSGz70c769HH7F3m0I4PkI2uaBn5q1L8PvicANqdRQ7QMJY0R7rA+Hd3wT9RF4FUdPay1+lcMbw99fnUaRpMtas5ikZd4by/CaJBqzT0Gc9rFCl9jFdC+jjQrQ+neSGEowThEYk0FootBpotonuy+C1k5+Tmnu2sH1r0q1N0XeKEpoIIphKAIohdaYTJ2DiTOt+yKRn80tb3F4o9QGYMJonzLdy3GZEnDpFRnl2r6hUcAi0rxsT0mYypYbQCsTKcznWpiBbNEJ6rRgQlEegzZ6BmLBGQOReEPa9fgImJCEKA/tOkWrgck0YRxkRXGpX2GrjkoftA8YKI2gjU4bMFAeGKLdRKUXJoRXhV9FYxf8KpQWJRF4y5j3aMoJtM46Xa4A7ZXHB8Czf21lmjMJuJYrNW2WIx10ZOocdeJnpHeCWf5I+PStAkMAlV4EHanU0GnBr6LdAA2qfQLBjrfVyZdydIdZeqdUe8WvQUQGd9NnXcWwg+FN4f3XYGw7dCXKvqLSi2ofRjbL9Ply9EfCu74nPQMwIXduVYuOxZbVHBti2AaJ3kG0Ggja8GvwqzmioAvmiXThdNji1F87fNA+I7lSBMkoOHSjlUT+ysOu7d7ZS9A3yLuvZrsuSukTPqPmHIB2U2bth7FhtehotMb0YWepRcdg65syaaY+9iJ98AfMtrekNqCP/DDGhrl9nZq1vxz6wfD6i7y/uxI0sud+ao/F0L4+8dMStrD9bX38J9SBp2PaXty6VvomyOB0mTrHu/AHmDZH3n5ZHf9JNf9wrHtJzTtUHXqWdBoc2Qztl1AQU985VzZAFjnVeskRE91YTYq3NB/IZQYxSh355u1X1ILD9btO5lt/0ad9ATvWyex3c3C62v8k8/LD+rQvYGidVHrUgaexZ0Af9HfcshqT9sC2Nd5Jl2JkMza8gvqw9E/GYeeo6fPZrqM+oo6+gH99RH/gK3z5AXXsx9SMBZixCJtWsmeCmrk3wrZMnit7HQjt89XH5IBT6VelNiBzD9IHn8lWA+uXc2wIEdovXeBzeaeIQETlaeLyTnRbMkdxAqB2m23uv8a89oQ66ypUB/j2y9iyWmBgAj1rkfRNxG4LOP8I7Nwsg9NR6zNvPCdBS2q95g//IjMWyAGnsDFKv0e16+aJm4JfXo6xIa5ealY8JbUBrnoWSjB5D+xYx/WvqIHJaNdlwjS15z4cWs/RHWgMo9qPza9zy2pMmRX+4ScyMFUOOQuthl0lIyJFl7Ir8zUJu/SSwwczHDc9FXRAAeZTl7ZroMBQdl+sjv84Ju/OB6/l2pfkkHNk7kFc+xLeWqYPP4frlvO1x9XMhaiP8I1nuWaZOu5jGNvBN56T3ebDr3LVc9z6ltQGYDpm2b3iV6R3ECbgqqfE71HHXmxee9Q8eqM68P3YbR7eesEsf0gddjY6db76mOx4Ww47Gy/dK/ucIBNnmId+puYdJtUa33ieW97IrphgXGEUGWdJaqJ5+Wyx4D8yzzZNNBQLaVZAaYQddBqs7xRR8HyEAUSxVdenfR6Vmrn/J+ibgk4TfhU0MAZKxWcwDOhVRBREEHRQ7YUJEHagNdpNhAEqvajUOLRBtE8AvZOk04izl1rThAgCVHrAMHZJaABCNJSGUmg3Ue2LbVk5ETct2nAPk+1PkZGZz8gptCxa5gHSDmyS9yqN5ih6BvW7T1MLj6bfAxOKiNn6lnn2t9y6Bn4lc59Il/8SKQCT/QqEUui01My99SmXmw0rwodvEIE64VNqzoHBkzebVx+VSo9EHh4TFQKTpKPc5RFQEtXSJI7OeBiE6wE5ELSX01opWJ/F/A65R7Kz0xxVC470LvoRZuyd0mWjbL859KzOd05EGMbnxU48kC7PgSloG+GN+rzvyt5HacCseQkjm/XZSwDo6QvNd94HE9pVV04NUy4PL4BJEgiSRMzSlXhNZMnijN4j0XLycJyDOUkJpwmiFFsNNXORd9lN6BkAweaucMUTCJoyOFPtsY/Z+iZNGF8fCGhEKaSJZhNGrr4ozQzHNPEZVV68pVrHF5MUGhGVL6hUKiILkBAaGmNV4gmUTqJnAUkTChNuXGlhZhcheDmKq5QzQ12MSARhW535j+gZQNjhyNbg+ovD1c9De6pSxeBMjg3BGGiN5iggqPUzbKM+LNGBqvZTeRCgOYqgDRGIRq0foGgJb7lSnXyp2bSaLz+oFh9ncRclgyyiAtrmmITtWCt4lSiXDxKRKBsjMV2EhFKoDTAXXTNDPXMET3vlXppLZrEUwkohOeBJEMjAbmr+YSCh/fCRG8zKp/SUWQwD0GB4I7Qn2kfQlrmHAOAbS2Xy7vrkz2G3edy00jx1C+ojCANZcKQ++ANS6wtfvN+8/CCqPVQ+Nr5mHryeO3fABNAqny+NdF+nBRq16BjZ6xAZnI7GiFnxFF97HJUatCetBv2KOvgDMucgGZiKoMV1L5vn7qQxhXirtDbFEUL+itlJxawqTBLhR/sDg2ovKj0pH1W0ZqR0CXgVUYr1EX3MR7yPXwPS/O4bcuSH1az9onmpQ88JfnimHHGu99Efx7t09IXh/T8N7vy2CPV531MnXIJWvXP1SWjW88WDotGqq8m76wu+L+86KTOnZ3zJPHVLcPM/ot2Q6Qu8j18jcw+yF90RMX/6lfRNEhoyl0sXsStHXWaXlxEUkK9QtTksYmt55WHXVoxsRs8AjNEnfJIv3ceNq9A/KTOrJpA5B0bmXP391wGY9a/I9L0Byp7v8j7+U9nvfdy1DY1dMnUuGOpTrwiX3cNVz8qcgwCi2oupczC6LV/802lJ/2Tv87dh+nyEQfjAT81by7yzlsj0+ero89WGV8wfr9Of/ZXMWICgEy79HTaukD32lRkLuGmV6EqWgy1y0cUiqlqy8JCSQtyQPWfFHDuqNBsj4WP/oc/7DoKWTJ3jfeUec+tV5vk7qSuo9sSpxKAVm5Gw07nxUvPsrf5531WnXI5OUw7+gFn/anDt+dJu+l+6CzMXQqAPODX4658YtOP0rkMFSpzSdl1f9CNMnw8yuOeH4R3fhumY2oD+xHWgUYuPx5Y1MmMBaMJl9wY3fEr8CqDg18AQlR6LjiU5Fkfi8dn81JijyEJhmFvkmgksQfiNkZ5B8+gvzZM3w68iDGXCbvoz/+597jdq2l4YG7EjIPEqZuXTZumd8HvD5+8GCdEgw4eux7a13Lk1XP5IxLOT6fPF86I8TxQmO3R9EbQbsse+6tAPguTOreGffi0Tp8vAFO7aHr9FKZm8ByIDunMTAAzOQN8gtGdH9hCBylI5VgKIku9MIMotmkw4fi5XXqInw46V/RZ6leA3Xwjv/A4Yxof/3Wd4X31AHX0B6rsgOjt9a14EKF5FgjbCANoDiPUrUOkDBM3ReAb9k2MAG3lcJqMNLzoOfg0i3LgSrTEIZGxYHXh6TMjZ8ga3rIbSDDr6qAvUAadi21p02rE7Fk1HKdDAhPHaSes/N7tBglQOy0aKzFGJwUkTYHA6RDPsQFRsEap94b0/7Hz/dPPa4+JXEXRQ6/c+ca069iI2dmbSDztJzGjis2AMwk5u0yBCwy74Q/LiHvvEfxt6W3ZuBKE++E/qmAsgAhOap28zrz6O9a/C81np86+4ybvw+1IbQH1n7IUpjaCDSi/6JkXZ8GT5WXFTzpKpEh66RaVKECbN+k594Gn6I/+CVgMmdZEN+qdw3fLgmg8Hty0BCBPCGP3hb6mpc9FpucQ/ltUlS3e0oFBqJkr6J8d3fM/99SU/ryz5b33OEngVNHcFN15q3nwBSgfXX2RWPCmeB7+mTrnMv+pB9e4zUN8Jr4KgDYh/6a/V3kehNSqR1CJVkKfLJALKgptcTOtUeEG0QmOnd8Q5/qd+hjBApw3tgRATSK0Pfm/wXz8wd34L2kPYkWoPFh2Ddj1bs3FryW1v3Yap8vKSvJ8btgHABDJrP33ipzl1Dre8ET76y873TjdL75CeAXh+uGNDcM154a1f5Y4NADB5D++y/y8HnobhTdIzwf/8LVhwJJu7oBSZpx8U6r9iT5pxRwmXwM+MtGDoVbh5FY1RR53nT5wZ3Hgpd21BzyBMEF03mTwzePa3/mlflP7JIGXidBpTbBmCInW5Sy2F5KSpBCY0W9doANrn5jeC33wRrVFuXYvRHfCr6BtEGACQSg/A4IHr5fm7/It+JAecBhF9ymXh5te9z/1GItRl/SvwazbHOIepJvEvlV1CQ6uqge4+S7XPrF5qHrxeANnnPd7/uUfNPwK7thKA0uJ5aLcgnmg/kjR37bCgle4dOdid5BgJxc7j+z1cvTT+98QZGNlsVi2FCCZMk1pfjA1EfBJCTZqJ5mjn/32GW94EoGbt51/5gMxcCKBz57ewbR28KmDQNSsUuwA2Mzy+hlaWGxlligY9A8Gd3wgf+zUAmbaX9w936NP/QUyA+pDZuQ2gd9aV6J0AEzIMzOtPSepqlzvydoYYuc8DQFFImESYMFUE0q5z+YNctxwCqfToi3+sBqdjdBt2beHoEJpjIBEG6J+CoM2RTagPo9IbcfRQ7UPfRADB775hHrkRPYMwYRfik/OiZ+Vs08x1dsAIq1hVBNW+4KYve80xdcplUJ7++39WR53LlU+RRi0+TnZfDBKeH973E2xYgWpfwvtWcceVKIw0QRKyxJsEEwLRKyrywgFBpWa2rkWrDr8q/VO887+L1hg3rAhvudL7yj0k1cKj1Vf/GP75boRtmbkIQSe48bPq3Wd4l1zHdcvNyqfEBHLQmZg6G0EH2gcZ3Hxl+NDPZWBKNDGnPM2u9WaUrhIQHikiJQ1ZCinvBNmq9ge3XaWHNuhzvxXZ3cz0hiGDpnn4F8E9/yrVfrTGoLQA7DRiiXQa8HyIggI6zYQ6VI8eQ9CWsAXTgfIEQKeF4fXmTzfqU68AoI86H0D45gvht94T/PIy78LvSW3ATJ+vz/jf0fTN5lVQSkyISq8sPFovPDopOWvDr6CxK/j15eFzv1cTpjIM4h45dlI07TFlcRQB6K/FmHR5CyEhKJKvYK30mVcexVsvqcXHodaPdiMGFtYuC67/aPinX0rvIKo92LhClDIrnzaP/koAaB9jQ9y0ivUh8/ANXL1UdAVac/MqhIHZsCK8/xqMDXHjSgDmz3dx2T2o9psVj6M+jEofhzeFL9wd3r6EBN96kS/dz8YuhB2M7jBv/9Us/V34u2+gOWbWLJO1L6p93wuvgqADY+BX+PZfg+su4quPRdKRAvwsDuZj5c/JCJMer563HKzUPkd3qGlzvYt/JPueEF9+kOtfMU/8p3n+Lu7aBu2DhqRU+6B1vDPNUYQBtSe1fklZi61RkPB7pFJju4FOU5RCbQCiADJyYZSWTgOVHugKlEK7wVZDar1UvgSNyBWU3eapIz6sjj5fps2NytAAmCdvCm5bwsao9AzABIKy1HmOGZOCGrGApKzylHyHwlnto10HqN/3WX3mV1DtRRjGCfita8wzt5tl/2U2roxzxNHNYkasBsMErFZJVtqABqJikCwjR+nI3IgoGiMglYJoEbBVR6sh1R7MPkAfdrY69GxMmBYPpRRGNge3/7N55jZU++D52YAslsKDeTufRLCtK+Y43HrnhpElqSKbaq0Ioj6sZh+gz14SATRsN6VSi2oqueJxs+we89rj2LGeQQu6Ar8K7cXRadrezM41ubiUXfgpJGkk7LDTQtiBX5Pp89W+J6qD3i/zD4uDiXYTlRoA89TN4d3f47a16JsMGqGB0zSPlg9tlXFEmQybad+6YnZkoUr70DDXyS8jU0vKf6D20BqFMfqws/UZX8LMhfFEU85KfYRrXuCKJ8zq57lpJXdtR9gWESiPKsrS6BgqSNkiMcnSxIFlENAEIiKVHkyYJjMXyYIj1KJjZfaBkTgQBghDVKoAuHppePcPzPKHUe1FpYYwKFYF5oqhXPaMQ2rIkzhLGHziEh9LuADRLQDqw+idqI+5UJ/wKUybG1sQEGmhCoDhjdy8ChtXctNKs20dRjZzbJitUem0aQKhiZsMKiXag9+DWq/0TcbEmTJ1jsxYKLsvkunzEUVkAAwRtKA0PB8A170cPvRz89zvEZFMyDT8lRwmn+hgN1/ksPNirzCu1WBeAHZhOLv1lLJbMIiI0gw6aOzEhGn68HPUcR+VWfsltrZFUrTn0KgAhCFao2iOsjWGThNBO3YI/CoqNVT7pdqHWn+OLoegE2dN/Er8+qqnw0f/wyz7A1qj6JkgSjEJ1oWkzWXOaAvd9Kxbldm8fE8RlySeL00XuzrFYUuL1bExcZREaYZtNEfRO0Etfo868ly1+D3oHcwKv00oEb4jClq/c107GaUD4gyv9iSV8shms/yh8JnfctUz6LTQMwDtiQlTFljKE3QalokFINoVgJmqoZt6lqT5UaK0UmKCpEQ2lvUNkLRspMCzFQ0TsDUmAkydq/Y5Xu1/ipp3CAam5k9QnDuOOK/WaPFkFOycWvTpQ+u56lnzlwe44knu2AClUesXEZowJROks8wXXpLF9gpOwwj7ikgiIOSj0zKFZF85sSmN3btzKAUCnRbbDVFKJs3EnvurvQ6R2QfIjL1l4gz4NfwNP2yNYXgjN67kmmXmzT9z/asY2YKIo+VX4qx/WZfX8s6ohZRhPl+Y8ciRUfDKViqWYXHKqsqEIk7paE7KUeQVtNlpRqir9E2UCdNl0kxMnCmDu6FvEmoD4lWgImJCG81dHN2O4c0c3sihDdi5FY2dCAN4PvwatC8CGiNZj1SHUdel6DlPji51kh1cOhZQ4dBkrmYh1ybitAYVBzcdj8+WSQpEGCLsMOzElU+JG5Gq/qSPoRLlQfvQHpROOhIbgVPxx25nAS6bnrT0BmQcE5QmDkXcLHzaFywB8HP9kly+cNK6NSv5FJbWhGdDhMmyFPxqxE50aPBF4CgtcI+Kwgo6r0tb1lgNxEfMmn2W9Su4L+n7I9MncWaVUjyiFk6VoztCMnmyaHDegaWUgT8m50QwDyy8Y3fW3OryWby0q63k6lmKnSDyRcvZTVJOAtaaMu32r+ze8rGsX6bI+N0Jy/ugjSudYi/BzGZIvjsWUdpuxO73aFdvcbz2nqq00zPKsHNawDaLLUZR7F4kXc6OjH+4ZBxo1m4x6Db+Ke9NaV0LycVQpNBdAks+Urk1rbR6fDukF3GaWbFrJyy35L601XeJ9B0iqbC85807thr8G9pSuK1FHNuS9cS1OuWSCiW5d/c6stiMXEobYhbfz3yznnHXKLkzQscR+xsImO8owVwzy3zXJZE0tE/fpixvB/kS6fE2hg5xp+yaMq+VZNwmtVJoHJPGTJLjd5W1jWfXxm52qGE3CC9tBVxo86LyrXkiqgfpxK/SrTenVR8rJa2LpUu5b8oqFDcXV7zaLMuTsZhTZEkf1GxFIrTbTNm2UMrLC3KZpxwNLfamIkqfiNMfyO1YkvhcXdqYsauSYNrLlQV6qeQ6n8cP0ZFFFyjYKdqSYtdLSahAznJLVV6MuxSqOsWuQSDKv9CgpPtMvhe73em0G0uZJa0qyxs1Md8UvUvWsTRDaWVEC0xokfEbVyvbIRG3fRe7JkPZpTt2lwaU78RK7tL1828zVCx0SWbZfLPvpCjGExLfhUJHPzKtWXUq7sWhLTl1GflSR5Ya+9xIKfiWAC60QdBc0q4YQBVVVEmpel7UYmGE3SSdzZIxoTrjZyZrUWCxOpe57kHuFsn4RS6p4UF5I+4CSyAXYLL8C0q6ul32dS5+uUihSBOO9kQ+EC98w4KX0+DljZwKrfVsciddh9UVFbuUiuRAcxm32S/Lu1LbX2RTglmI24Wm6G6I3V+rdH0CeDZ9iEU03ukqlPbocr4IyK4JoVVolGJqLO0ow3y9dgIGOu27HfHZ+0SbjpUWEWS4oEhZM6r0a43y8JqUg+5ZrYYbHgmzDgGWmqfdPMRu4mh9jZAw19cpqRC2S7TiEt6MLZF8P5GwK7gjpV0xWGrXEt4uUVqbU2w7VqxdTZbt5eq6s94JLHT3tAqh7dbsyRdKWI2xsvIeOvTQPOnWDWDperaFL+mS1PCaYgmpWIxHO86nU2PkkI+cNbDcuef/AEB5xT6lOG7MAAAAAElFTkSuQmCC);color:transparent;font-size:0;flex-shrink:0}
.brand .bt{font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff;line-height:1.1}
.brand .bs{font-size:11px;color:#8794a6;letter-spacing:.04em}
.nav-sep{height:1px;background:rgba(255,255,255,.08);margin:8px 6px}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:#7d8b9f;padding:16px 20px 4px;white-space:nowrap}
/* rodapé na cor do `.nav-label` (BC-39): #6b7789 dava 3,8:1 no navy. */
.nav-foot{margin-top:auto;padding:18px 20px 2px;font-size:11px;color:#7d8b9f;letter-spacing:.03em;white-space:nowrap}
/* o `<nav>` do menu (BC-39) é a mesma coluna da barra, um nível abaixo: cresce para o rodapé seguir
   colado embaixo. Ele sumiu com o `.nav-label:first-of-type{padding-top:4px}`, que nunca casou (o
   1º `div` da barra é o `.brand`) e, dentro do `<nav>`, passaria a casar e subiria o 1º grupo. */
.nav-menu{display:flex;flex-direction:column;gap:2px;flex:1 0 auto}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 20px;color:#c4ccd8;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background var(--dur-1),color var(--dur-1)}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
/* fundo do item ativo é NAVY SÓLIDO, não branco translúcido: `rgba(255,255,255,.10)` sobre o navy
   resolve em #273242 — mais claro E mais cinza que o resto do menu, então o item ativo lia como a
   ÚNICA superfície clara da barra e brigava com a espinha tangerine. `--navy-soft` (#1B2A41) é mais
   escuro que isso e continua na família do fundo: quem carrega o foco é a espinha e o ícone. */
.nav-item.active{background:var(--navy-soft);color:#fff;font-weight:600}
/* barra tangerine à esquerda do item ativo — absoluta p/ não empurrar texto (sem shift vs inativos) */
.nav-item.active::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:var(--spine-w);border-radius:0 2px 2px 0;background:var(--tangerine)}
.nav-item.active .nav-ic{color:var(--tangerine)}
/* "Apresentar" (MN-01 D7): ação da diretoria, não lugar — um `.nav-item` acima dos grupos, em caixa com borda.
   O destaque é o contorno e o ícone tangerine (tangerine = ação no DS), não um fundo cheio: um botão
   primário no menu disputaria atenção com a espinha do item ativo. Ativo, o contorno vira tangerine e a
   espinha sai — ela é de "aba ativa", e aqui a caixa já diz onde você está. */
.nav-item.nav-destaque{margin:4px 12px 6px;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);color:#fff}
.nav-item.nav-destaque .nav-ic{color:var(--tangerine)}
.nav-item.nav-destaque:hover{border-color:rgba(255,255,255,.36)}
.nav-item.nav-destaque.active{border-color:var(--tangerine)}
.nav-item.nav-destaque.active::before{content:none}
/* badge de pendência no item de menu (ex.: itens do feed aguardando revisão).
   NÃO usa tangerine: no DS o tangerine é reservado à AÇÃO (botão primário, foco, espinha do item
   ativo) — como enfeite ele disputaria atenção com a própria espinha. Segue o padrão tonal dos
   contadores (.ac-count/.pill): fundo soft + texto escuro, que também passa no contraste AA do
   texto small. nowrap + shrink:0 = regra dura de zoom (não quebra nem espreme o rótulo do item). */
.nav-badge{margin-left:auto;flex-shrink:0;white-space:nowrap;min-width:20px;text-align:center;
  font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:99px;
  background:var(--warning-soft);color:#7a5c00}
.nav-ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.95}
.nav-ic svg{width:18px;height:18px}
.nav-gated{margin-top:auto}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10}
.crumb{font-size:12px;color:var(--ink-subtle)}
.crumb b{color:var(--ink);font-family:var(--font-display);font-weight:600}
/* segmento anterior da trilha = caminho de volta (mountTopbar → linkaCrumb). Sublinhado só no hover:
   a trilha é orientação, não chamada para ação — sublinhar sempre competiria com o CTA da tela. */
.crumb a{color:var(--ink-muted);text-decoration:none;border-radius:3px}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.topbar .sp{flex:1}
/* DV-02 · carimbo da versão que ESTA aba está rodando. É DIAGNÓSTICO: quem barra o import é a trava
   do Aplicar, não ele — por isso pode sumir na gaveta, como o .crumb já faz.
   NÃO declara `display` no estado normal, de propósito (a estratégia do .pmf): `display` de autor
   ganha por ORIGEM da UA stylesheet e mataria um `hidden` do JS em silêncio — a armadilha do D-a3-05,
   que já mordeu 3×. Medido em 24/08: a versão inline deste estilo estourava a Central em 12px a 390px
   (wire-financeiro), e é o que este bloco existe para não repetir. */
.topbar .rel-carimbo{margin-left:10px;font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
.topbar .rel-carimbo.velho{opacity:1;color:var(--danger,#b3261e);font-weight:600}
.year{font-family:var(--font-mono);font-size:12px;font-weight:600;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:5px 10px;background:var(--surface);cursor:pointer}
/* Seletor de diretoria (EV-17): o mesmo botão do ano, com o nome no texto do corpo (não é número) e
   cortado com reticências — nome de diretoria é texto livre e não pode empurrar a topbar para fora. */
.org-sel{font-size:12px;font-weight:600;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:5px 10px;background:var(--surface);cursor:pointer;margin-right:8px;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content{padding:22px 24px 64px;max-width:var(--content-max,1180px);width:100%}
.view-title{font-size:22px;margin-bottom:2px}
.view-sub{color:var(--ink-muted);font-size:13px;margin-bottom:18px}

/* ---------- card + spine ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm)}
.spine{box-shadow:inset var(--spine-w) 0 0 var(--squad-c,var(--squad-outros))}
.spine.estouro,.card.estouro .spine{box-shadow:inset var(--spine-w) 0 0 var(--danger)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.section-head{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px}
.section-head h2{font-size:17px}
.section-head .d{margin-left:auto;font-size:12px;color:var(--ink-subtle)}

/* ---------- kpi ---------- */
.kpi .kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .kpi-label .ctx{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-subtle)}
.kpi .kpi-value{font-family:var(--font-display);font-weight:600;font-size:28px;margin:5px 0 9px;letter-spacing:-.02em}
.kpi .pill{margin-bottom:2px}
.kpi .kpi-value.neg{color:var(--danger)}
.kpi .kpi-value .cur{font-family:var(--font-mono);font-size:14px;color:var(--ink-muted);margin-right:3px;font-weight:500}
/* teto não declarado: o card mostra o CONSUMIDO, não um saldo que não existe. Menor e em tinta
   apagada de propósito — é informação parcial, e tem que se distinguir do número cheio ao lado. */
.kpi .kpi-value .kpi-undef{font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--ink-muted)}
.kpi .kpi-sub{font-size:12px;color:var(--ink-muted)}
.kpi .kpi-sub b{color:var(--ink);font-family:var(--font-mono);font-weight:500}

/* ---------- budget bar ---------- */
.budget{margin-top:12px}
.budget .track{position:relative;height:12px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.budget .real{position:absolute;left:0;top:0;bottom:0;background:var(--squad-c,var(--squad-outros));border-radius:99px 0 0 99px}
.budget .comp{position:absolute;top:0;bottom:0;background:var(--squad-c-soft,var(--squad-outros-soft));background-image:repeating-linear-gradient(45deg,transparent 0 4px,rgba(0,0,0,.05) 4px 8px)}
.budget .teto{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink)}
.budget.over .real{background:var(--danger)}
.budget .blegend{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);margin-top:6px;text-align:right}
.budget.over .blegend{color:var(--danger)}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-body);font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);cursor:pointer;transition:background var(--dur-2),border-color var(--dur-2)}
.btn:hover{background:var(--surface-2);border-color:var(--ink-subtle)}
.btn:focus-visible{outline:2px solid var(--tangerine);outline-offset:2px}
/* texto `--ink` sobre o laranja (BC-39): branco dava 2,86:1 e reprovava AA; o laranja da marca fica. */
.btn-primary{background:var(--tangerine);border-color:var(--tangerine);color:var(--ink)}
.btn-primary:hover{background:var(--tangerine-deep);border-color:var(--tangerine-deep)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{color:var(--danger);border-color:var(--border)}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger)}
/* `aria-disabled` é o apagado que continua no Tab (EC-35): o travado e a espera dizem o que fazer, e o clique neles não faz nada */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn-sm{padding:3px 10px;font-size:12px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* barra do link pessoal da query do Jira (Importar / Importar roadmap) — mountJiraLink() em supabase.js.
   Per-user (user_settings): hyperlink resumido + CTA editar. Átomos nowrap (regra de zoom §5). */
.jira-bar{margin:6px 0 16px}
.jira-link{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:7px 12px}
.jira-link .jl-a{font-size:12.5px;font-family:var(--font-mono);color:var(--tangerine-darker);text-decoration:none;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}
.jira-link .jl-a:hover{text-decoration:underline}
.jira-link .jl-empty{font-size:12.5px;color:var(--ink-subtle)}

/* sub-view Financeiro | Orçamento (segmented control, injetado por mountFinanceTabs) */
/* segmented control do módulo Financeiro (até 5 abas). flex-wrap: em tela estreita/zoom 200% as abas
   quebram em 2 linhas em vez de estourar a largura (regra dura de zoom do DS). row-gap só entre linhas. */
.fin-tabs{display:inline-flex;flex-wrap:wrap;gap:2px 0;max-width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;margin:2px 0 18px}
.fin-tab{border:0;background:transparent;padding:6px 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink-muted);text-decoration:none;white-space:nowrap;flex-shrink:0}
.fin-tab:hover{color:var(--ink)}
.fin-tab.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm);cursor:default}

/* ---------- pills / chips / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.pill-lg{font-size:12px;padding:3px 11px}
.pill.real,.pill.tone-success{background:var(--success-soft);color:#0f6b44}
.pill.comp,.pill.tone-warning{background:var(--warning-soft);color:#876600}
.pill.estouro,.pill.tone-danger{background:var(--danger-soft);color:#9b2c2c}
.pill.tone-navy{background:var(--surface-2);color:var(--navy)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--squad-c-soft,var(--squad-outros-soft));color:var(--ink);white-space:nowrap;flex-shrink:0}
.chip .dot{flex-shrink:0}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--squad-c,var(--squad-outros))}
.role-badge{display:inline-block;vertical-align:middle;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;border:1px solid currentColor;white-space:nowrap;flex-shrink:0;max-width:min(18ch,20vw);overflow:hidden;text-overflow:ellipsis}
.role-badge.diretor{color:var(--role-diretor)} .role-badge.gerente{color:var(--role-gerente)} .role-badge.admin{color:var(--role-admin)} .role-badge.colaborador{color:var(--role-colaborador)} .role-badge.financeiro{color:var(--role-financeiro)} .role-badge.campanhas{color:var(--role-campanhas)}

/* ---------- financial table ---------- */
.ftable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ftable th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);font-weight:600;text-align:left;padding:10px 12px;background:var(--surface-2)}
.ftable td{padding:9px 12px;border-top:1px solid var(--border);font-size:12.5px;vertical-align:middle}
.ftable th.num,.ftable td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ftable tbody tr{position:relative}
.ftable tbody tr td:first-child{box-shadow:inset var(--spine-w) 0 0 var(--squad-c,var(--squad-outros))}
.ftable tbody tr.estouro td:first-child{box-shadow:inset var(--spine-w) 0 0 var(--danger)}
.ftable tbody tr:hover{background:var(--surface-2)}
.money{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.money .cur{color:var(--ink-muted);font-size:.85em;margin-right:2px}
.money.neg{color:var(--danger)} .money.zero{color:var(--ink-subtle)}
/* carimbo de autoria SEMPRE legível (BC-39): o esmaecido a 40% até o hover dava ~1,5:1 — e hover não
   existe no toque nem no teclado. Quem o apaga em repouso reprova no `contraste-rules.test`. */
.stamp{font-family:var(--font-mono);font-size:11px;color:var(--ink-subtle);white-space:nowrap}
.ftable td.mono{white-space:nowrap}
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
/* paginação de RENDER (page-rules.js `pagerHtml`) — 3º uso (Auditoria, Lançamentos, Imobilizado),
   promovido da cópia tela-local por regra de três. `.pager[hidden]` explícito: o `display:flex` de
   autor ganha do `[hidden]` da UA stylesheet (armadilha já registrada). */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.pager[hidden]{display:none}
.pager button{font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:6px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.pager .pg-info{font-size:12px;color:var(--ink-muted);white-space:nowrap}
/* salto direto de página. Largura pelo conteúdo (o maior número), nunca esticado — e `flex-shrink:0`
   + `nowrap` no `.pg-info` que o contém, que é a regra dura de zoom. */
.pager .pg-go{font:inherit;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:1px 2px 1px 5px;margin:0 1px;cursor:pointer;flex-shrink:0}
.pager .pg-go:focus-visible{outline:2px solid var(--tangerine);outline-offset:1px}
/* colunas redimensionáveis (ui.js resizableColumns) — table-layout fixo + alça na borda do th */
.ftable.resizable{table-layout:fixed}
.ftable.resizable th,.ftable.resizable td{overflow:hidden}
.ftable.resizable th{position:relative;white-space:nowrap;text-overflow:ellipsis}
.ftable.resizable td.mono{text-overflow:ellipsis}
.ftable.resizable td:not(.mono):not(.num){overflow-wrap:break-word}
.col-resize{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;touch-action:none;user-select:none;z-index:3}
.col-resize::after{content:"";position:absolute;top:24%;bottom:24%;right:4px;width:2px;border-radius:2px;background:var(--border-strong);opacity:0;transition:opacity var(--dur-2)}
.ftable.resizable th:hover .col-resize::after,.col-resize.drag::after{opacity:.9}
.col-resize.drag::after{background:var(--tangerine)}
body.col-resizing{cursor:col-resize;user-select:none}

/* ---------- scope banner / presence / empty ---------- */
.scope-banner{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:9px 14px;border-radius:var(--radius);margin-bottom:16px}
.scope-banner.readonly{background:var(--readonly-bg);color:var(--ink-muted);border:1px solid var(--border-strong)}
.scope-banner.squad{background:var(--info-soft);color:#1c4f96;border:1px solid #cdddf3}
/* LG-07 — a revisão mensal de acessos venceu. AMARELO de atenção, não vermelho de erro: nada está
   quebrado, alguém precisa conferir uma lista. E ele não tem "×": a força do aviso é não poder ser
   dispensado (`telas/acessos.js`), porque aviso que se fecha vira ruído em duas semanas. */
.scope-banner.vencida{background:var(--warning-soft);color:#7a5c00;border:1px solid #e8d9a8}
/* O mesmo banner quando a revisão está EM DIA. Tem tinta igual à de `.readonly` e classe própria de
   propósito: `.readonly` significa "você não pode editar aqui", e o estado em dia não diz isso —
   quem administra vê este banner COM o botão. Reusar a classe também colidia com asserts que contam
   `.scope-banner.readonly` por tela (`wire-acessos-camp`, `wire-time`), que passariam a ver dois. */
.scope-banner.revisao{background:var(--readonly-bg);color:var(--ink-muted);border:1px solid var(--border-strong)}
/* D-af-01 — o ano da tela não tem lançamento (`avisoAnoVazio`). Tinta de `.squad` (informação, nada
   quebrado), classe própria pelo mesmo motivo de `.revisao`: asserts contam `.scope-banner.squad`. */
.scope-banner.ano-vazio{background:var(--info-soft);color:#1c4f96;border:1px solid #cdddf3}
.scope-banner.ano-vazio a{color:inherit;font-weight:600}
.presence{display:flex;align-items:center}
.presence .av{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;font-family:var(--font-mono);margin-left:-8px}
.presence .av:first-child{margin-left:0}
.presence .lbl{font-size:11px;color:var(--ink-subtle);margin-left:8px}
.empty{text-align:center;padding:40px 20px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface)}
.empty h3{font-size:16px;margin-bottom:4px} .empty p{color:var(--ink-muted);margin:0 0 14px}

/* ---------- mini progress bar (reusável) ---------- */
.mini-bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:9px;display:flex}
.mini-bar>span{display:block;height:100%;background:var(--ink-subtle)}
.mini-bar>span.s-real{background:var(--success)} .mini-bar>span.s-comp{background:var(--warning)}
.mini-bar.tone-success>span{background:var(--success)} .mini-bar.tone-warning>span{background:var(--warning)}
.mini-bar.tone-danger>span{background:var(--danger)} .mini-bar.tone-navy>span{background:var(--navy)}
.mini-bar[class*="tone-"]>span{border-radius:99px}

/* ---------- toolbar / filtros / listas (reusável) ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .sp{flex:1}
.select,.search{font-family:var(--font-body);font-size:12.5px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 10px;background:var(--surface);color:var(--ink)}
.select:focus,.search:focus{outline:2px solid var(--tangerine);outline-offset:1px}
.search{min-width:200px}
.summary{font-size:12.5px;color:var(--ink-muted);margin-bottom:12px}
.summary b{color:var(--ink);font-family:var(--font-mono);font-weight:500}
.tag-manual{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);border:1px solid var(--border-strong);border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:1px}
/* chave do Jira: link p/ {base}/browse/{chave} (átomo compartilhado — jiraKeyLink em components.js) */
a.jira-k{font-family:var(--font-mono);font-size:12px;color:var(--info);text-decoration:none;white-space:nowrap}
a.jira-k:hover{text-decoration:underline}
span.jira-k{font-family:var(--font-mono);font-size:12px;white-space:nowrap}
.ftable .row-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--dur-2)}
.ftable tr:hover .row-actions{opacity:1}
/* alvo mínimo 24×24 (WCAG 2.5.8, BC-39): o glifo de 13px com 3px de respiro dava ~19px de altura. */
.icon-btn{border:0;background:transparent;cursor:pointer;color:var(--ink-subtle);font-size:13px;padding:3px 5px;border-radius:4px;line-height:1;min-width:24px;min-height:24px}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn.danger:hover{color:var(--danger);background:var(--danger-soft)}
.ro-lock{opacity:.4;font-size:12px}
.ftable td.col-act{width:64px;text-align:right}

/* ---------- form fields (§3.4) ---------- */
.field{display:grid;gap:5px}
.field>label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--ink-subtle)}
.field>label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-subtle)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 10px;width:100%}
.field input.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.field textarea{resize:vertical;min-height:62px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tangerine);box-shadow:0 0 0 3px var(--tangerine-glow)}
.field--error input,.field--error select,.field--error textarea,.field--error .money-wrap{border-color:var(--danger)}
.field-msg{font-size:11px;color:var(--danger);display:none}
.field--error .field-msg{display:block}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.field-grid{grid-template-columns:1fr}}
.money-wrap{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.money-wrap:focus-within{border-color:var(--tangerine);box-shadow:0 0 0 3px var(--tangerine-glow)}
.money-wrap .cur{padding:0 4px 0 10px;color:var(--ink-muted);font-family:var(--font-mono);font-size:12px;flex-shrink:0}
.money-wrap input{border:0!important;box-shadow:none!important;padding-left:2px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- modal (§3.12) ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;background:rgba(15,27,45,.42);overflow-y:auto}
.modal-backdrop.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:modal-in var(--dur-2) var(--ease)}
.modal.modal--wide{width:min(720px,100%)}

/* rodapé de orçamento no card de squad (Visão Geral) */
.kpi-budget{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border);font-size:12px;color:var(--ink-muted);white-space:nowrap}
.kpi-budget b{color:var(--ink);font-weight:600}
.kpi-budget .kpi-edit{margin-left:auto;border:none;background:none;cursor:pointer;color:var(--ink-muted);font-size:13px;padding:2px 5px;line-height:1;flex-shrink:0;border-radius:6px}
/* texto laranja é o `--tangerine-darker` (BC-39): o `-deep` dá ~3,5:1 sobre o `-soft` e o `--surface-2` */
.kpi-budget .kpi-edit:hover{color:var(--tangerine-darker);background:var(--tangerine-soft)}
.kpi-budget .kpi-set{margin-left:auto;border:1px dashed var(--tangerine);background:var(--tangerine-soft);color:var(--tangerine-darker);cursor:pointer;font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.kpi-budget .kpi-set:hover{background:var(--tangerine);color:var(--ink)}
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 10px}
.modal-head h2{font-size:18px}
.modal-head .modal-sub{font-size:12px;color:var(--ink-muted);margin-top:3px}
.modal-x{margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;color:var(--ink-subtle);cursor:pointer;padding:2px 7px;border-radius:6px;flex-shrink:0}
.modal-x:hover{background:var(--surface-2);color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--tangerine);outline-offset:2px}
.modal-body{padding:6px 18px 16px;overflow-y:auto;display:grid;gap:13px}
.modal-note{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.4;color:var(--ink-muted);background:var(--surface-2);border-radius:var(--radius-sm);padding:8px 11px}
.modal-note>span:first-child{color:var(--info);flex-shrink:0}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
.modal-strong{border-top:3px solid var(--danger)} /* ação destrutiva: sinal + exige digitar CONFIRMAR */
@keyframes modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- toast (§3.14) ---------- */
.toast-host{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--success);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:9px 13px;font-size:12.5px;color:var(--ink);animation:modal-in var(--dur-2) var(--ease)}
.toast .tic{color:var(--success);font-weight:700;flex-shrink:0}
.toast.danger{border-left-color:var(--danger)} .toast.danger .tic{color:var(--danger)}

/* ---------- skeleton de carga (§3.17) ---------- */
/* O DS pede skeleton desde a primeira versão e NENHUMA tela entregava: até 07/08 as 16 telas
   pintavam o shell e ficavam vazias até o dado chegar. Medido com o fixture do ano cheio (3.700
   lançamentos) em banco LOCAL: 327 ms na Visão Geral, 901 ms na Auditoria — e isso é o piso, porque
   em produção há 7 idas EM SÉRIE à rede antes do primeiro pixel de dado (3 do `loadContext` +
   4 páginas do `fetchAll`, que é um laço serial por construção).

   Liga por `data-sk` num container que JÁ NASCE VAZIO no markup, e o interruptor é o `:empty`:
   no instante em que o render escreve o `innerHTML` a regra deixa de casar sozinha. Sem JS, sem
   timer, sem esconder à mão — skeleton órfão é impossível por construção, e é a diferença entre
   isto e um `mountSkeleton()` que uma tela nova pode esquecer de chamar (ou de limpar).

   O `:empty` ainda resolve a ESPECIFICIDADE de graça: `[data-sk]:empty` é (0,2,0) e ganha da classe
   da tela (0,1,0), que carrega DEPOIS deste arquivo no `<style>` local. Sem isso o
   `.totals{background:var(--border)}` de `visao-geral.html` cobriria o skeleton e nada apareceria.
   Uma regra só, sem `!important` e sem par de reset. */
[data-sk]:empty{position:relative;overflow:hidden;border-radius:var(--radius-sm);
  /* 150 ms de atraso: tela que resolve antes disso não pisca cinza. São DUAS decisões distintas, e
     confundi-las já me custou um comentário falso aqui (revisão de 07/08):
     · `backwards` é o que FAZ o atraso existir — ele aplica o `from{opacity:0}` durante o delay.
       Com `forwards` não há estado nenhum durante o delay, a opacidade é 1 desde o frame zero e o
       anti-piscada some. `forwards` NÃO quebra o reduced-motion: sem animação não há fill, e os dois
       dariam no mesmo. O que ele quebra é o atraso, e só o check 15 do wire-skeleton protege isso.
     · a opacidade inicial mora no KEYFRAME, nunca na regra. `[data-sk]:empty{opacity:0}` deixaria o
       skeleton invisível sob `prefers-reduced-motion` (o `animation:none!important` do fim deste
       arquivo mata quem devolveria a opacidade) — e nenhum print denuncia, porque print sai com a
       tela pronta. É este ponto que o §4 do wire cobre, não o de cima. */
  animation:sk-in var(--dur-2) var(--ease) 150ms backwards}
@keyframes sk-in{from{opacity:0}to{opacity:1}}
/* varredura por cima das barras. `transform`, não `background-position`: anda no compositor em vez
   de repintar o gradiente a cada frame. Some sozinha em reduced-motion (as barras ficam paradas). */
[data-sk]:empty::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--sk-hi),transparent);
  transform:translateX(-100%);animation:sk-sweep var(--sk-dur) var(--ease) infinite}
@keyframes sk-sweep{to{transform:translateX(100%)}}

/* KPI em faixa (§3.5): 4 colunas cheias, espelhando `.totals`. Abaixo de 760px a tela cai para 2
   colunas e o skeleton acompanha — skeleton que não bate com o layout que chega engana duas vezes. */
/* respiro de 3px entre as colunas, e não o 1px do `.totals` pronto: no print de 07/08 com 1px as
   quatro colunas liam como UMA laje cinza — o skeleton perde a função no instante em que deixa de
   anunciar a FORMA do que vem. O `.totals` pronto se safa com 1px porque tem borda e texto. */
[data-sk="kpi"]:empty{min-height:104px;
  background-image:repeating-linear-gradient(90deg,var(--sk-bar) 0 calc(25% - 3px),transparent calc(25% - 3px) 25%)}
@media(max-width:760px){[data-sk="kpi"]:empty{min-height:208px;
  background-image:repeating-linear-gradient(90deg,var(--sk-bar) 0 calc(50% - 3px),transparent calc(50% - 3px) 50%)}}

/* TABELA — DUAS formas para a mesma variante, e isso foi MEDIDO, não escolhido (07/08):
   · num `<tbody>` vazio o skeleton NÃO PINTA. `min-height` é ignorado em `display:table-row-group`
     (altura medida: 0px), e forçar `display:block` prende o tbody num box anônimo da tabela —
     largura 287 de 600. Pôr o desenho no tbody é hack de layout, não desenho.
   · então o hook vive no WRAPPER (`.table-wrap`, que toda tela de tabela já tem) e o desenho sai
     num `::after`. Ele nasce DEPOIS da `<table>`, então cai abaixo do `<thead>` sozinho, sem
     nenhuma conta de posição — e o cabeçalho, que já está pronto no markup, continua legível.
   · o interruptor continua sendo o vazio, agora lido de dentro: `:has(tbody:empty)`. Some no
     instante em que a 1ª `<tr>` entra.
   · container de LISTA (a Auditoria é um `<div>` vazio, sem tabela nenhuma) usa a forma direta
     `:empty` — é a mesma variante porque é a mesma leitura: linhas empilhadas (§3 regra de três).
   `:has()` degrada SEGURO: onde não houver suporte a regra não casa, e a tela fica como era antes
   desta fatia. Nada quebra, só não pinta. */
[data-sk="tabela"]:has(tbody:empty)::after{content:"";display:block;min-height:264px;
  /* a varredura é a 1ª camada e anda por `background-position` (o `::after` É o skeleton aqui, então
     não sobra pseudo-elemento para o `transform` do resto do §3.17). Começa FORA da caixa: sob
     `prefers-reduced-motion` o `animation:none` congela nesta posição, e o brilho parado no meio das
     barras leria como mancha. */
  background-image:var(--sk-brilho),var(--sk-linhas);
  background-size:200% 100%,100% 44px;
  background-repeat:no-repeat,repeat;
  background-position:-100% 0,0 0;
  /* DUAS animações: o `sk-in` traz o atraso anti-piscada de 150ms que a regra base dá às outras
     variantes — esta forma não é `:empty`, então não casa a regra base e ficaria SEM o atraso
     (tabela rápida piscando cinza, apontado na revisão de 07/08). `backwards` pelo mesmo motivo de lá. */
  animation:sk-in var(--dur-2) var(--ease) 150ms backwards,sk-varre var(--sk-dur) var(--ease) infinite}
@keyframes sk-varre{to{background-position:200% 0,0 0}}
[data-sk="tabela"]:empty{min-height:264px;background-image:var(--sk-linhas);background-size:100% 44px}

/* gráfico (§3.19): um bloco só, na altura que o Chart.js vai ocupar. Sem o `min-height` o container
   vazio tem 0px e o conteúdo abaixo sobe e desce quando o gráfico entra. */
[data-sk="grafico"]:empty{min-height:300px;background-color:var(--sk-bar);border-radius:var(--radius)}

/* CARTÃO — blocos empilhados, para tela cujo miolo é uma lista de cards e não uma tabela (Central de
   Ações, Projetos, Roadmap, Correções, Campanhas; o Backlog saiu no BC-71, com o skeleton na forma de cada
   aba). Forma direta `:empty`: todas essas telas
   pintam com `innerHTML` num container que já nasce vazio no markup, então a regra base do §3.17 vale
   inteira (atraso, fade-in e a varredura no `::after`) e aqui só sobra o desenho.
   Blocos de 88px com respiro de 18px, contra as linhas de 14/44 da variante `tabela`: é o que separa
   as duas leituras à distância — cartão anuncia blocos, tabela anuncia linhas (§3 regra de três).
   `min-height:212px` = dois blocos e os dois respiros, medido para não passar muito da altura real
   que chega (07/08, banco local: roadmap 162px · projetos 175px · acoes 212px · backlog 221px ·
   campanhas 323px · correcoes 367px). Skeleton mais alto que o conteúdo empurra a página para baixo
   e a devolve num salto no instante em que o dado entra.

   CUIDADO ao marcar um container novo com esta variante: o interruptor é o vazio, então o container
   tem que ficar NÃO-vazio quando o render termina. Dois containers destas mesmas telas ficam vazios
   POR PROJETO quando não há nada a dizer (`#hero` da Central de Ações, `#near` de Projetos, ambos
   medidos com `children.length === 0` depois do render pronto) — marcar um deles deixaria a barra
   animada na tela para sempre. O check §8 do `wire-skeleton.mjs` reprova isso em toda tela marcada.
   Fora também o `#kpis` das Correções, por outro motivo: é `auto-fit minmax(196px)` com 6 tiles em
   2 linhas, e nem `kpi` (4 colunas fixas) nem `cartao` anunciam essa forma. Skeleton que promete uma
   forma que não chega engana duas vezes — melhor container sem skeleton que skeleton mentindo. */
[data-sk="cartao"]:empty{min-height:212px;
  background-image:repeating-linear-gradient(180deg,var(--sk-bar) 0 88px,transparent 88px 106px)}

/* CHIPS — uma fileira de pílulas (BC-71): a barra de squads de Backlog e Pipe, e os recortes do Business Case.
   Pílulas de 120px com respiro de 10px, NUM bloco de 30px que não se repete na vertical: quem precisa de duas
   fileiras (os chips do Business Case quebram em duas a 1280–1440px) põe a 2ª camada na própria tela. Lê-se
   como fileira, e não como `kpi` (colunas em % que enchem a largura) nem como `tabela` (linhas empilhadas). */
[data-sk="chips"]:empty{min-height:30px;
  background-image:var(--sk-pilulas);background-size:100% 30px;background-repeat:no-repeat}

/* QUARTER — UMA coluna do Pipe (BC-71), posta em cada `.bk-col` vazio: a tela dá a largura, o respiro entre as
   quatro, a borda e o fundo branco; aqui só o miolo, na ordem em que a coluna pronta o mostra — o título do
   quarter, o anel do teto, a linha "consumido / teto" e um card. As posições descontam os 12px de padding do
   `.bk-col` e saem do print medido da coluna pronta (14/10, 1440px: anel centrado a ~104px do topo, card a
   ~226px); a altura é a da coluna pronta sem card a mais, e a coluna com mais cards cresce ao chegar. */
[data-sk="quarter"]:empty{min-height:380px;
  background-image:var(--sk-cheio),
    radial-gradient(circle at 50% 104px,transparent 0 36px,var(--sk-bar) 37px 49px,transparent 50px),
    var(--sk-cheio),var(--sk-cheio);
  background-repeat:no-repeat;
  background-size:40% 20px,100% 100%,70% 14px,calc(100% - 24px) 72px;
  background-position:12px 14px,0 0,50% 172px,12px 226px}

/* menu lateral. Vive sobre o navy, então barra CLARA e realce fraco — a rampa clara sumiria ali.
   O hook é `.nav-sk` e NUNCA `.nav-item`: `tools/browse.mjs` usa `.sidebar .nav-item` como prova de
   que o módulo rodou, e um skeleton com essa classe faria o browse medir toda tela no meio da carga
   (o defeito de 25/07 outra vez, agora em 16 telas). Quem apaga é o `mountSidebar`, que já remove a
   lista de itens do menu e ganhou `.nav-sk` junto. */
.nav-sk[data-sk="menu"]:empty{flex:0 0 auto;margin:4px 0 0;min-height:300px;border-radius:0;
  background-image:linear-gradient(180deg,transparent 0 9px,rgba(255,255,255,.09) 9px 21px,transparent 21px 30px);
  background-size:calc(100% - 40px) 30px;background-position:20px 0;background-repeat:repeat-y}
.nav-sk[data-sk="menu"]:empty::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}

/* ---------- ação em voo num CONTROLE (§3.17, AV-02) ---------- */
/* O skeleton acima resolve container em CARGA. Este resolve o controle em VOO — botão de linha, botão
   de card, input que salva no `change` —, onde o padrão do `AC-03`/`AV-01` (trocar o rótulo do botão)
   é a resposta ERRADA: texto maior muda a largura, a lista inteira dança embaixo do cursor no instante
   exato em que a pessoa vai clicar no item seguinte, e `<input>` não tem rótulo para trocar.

   NÃO é spinner. O §3.17 recusa spinner girando à toa, e isto continua sendo a barra varrida do
   skeleton (`--sk-bar` + `--sk-brilho`) — só aplicada a um controle em vez de a um container.

   TAMANHO É INVARIANTE: nada de texto, largura, padding ou borda. É a única coisa que separa este
   padrão do `AV-01`, e o wire mede `getBoundingClientRect()` em repouso e em voo para provar.

   POR QUE `background-position` E NÃO O `transform` DO RESTO DO §3.17: `<input>` não aceita
   pseudo-elemento, então não há `::after` onde pendurar a varredura. A regra tem de servir ao botão e
   ao input com UM desenho só, e a forma `background-position` já é precedente da casa — a variante
   `tabela` anda assim, pelo mesmo motivo de não sobrar pseudo-elemento.

   POR QUE O ATRIBUTO DUPLICADO `[aria-busy="true"][aria-busy]`: especificidade, como o `:empty` do
   §3.17. Sem a duplicata a regra é (0,1,1) e empata até com `.bk-qteto input` (0,1,1) de
   `telas/backlog.html:126`. Com ela é (0,2,1) e ganha do `.btn[disabled]` da linha 204 — que é o que
   a `opacity` e o `cursor` precisam.

   E POR QUE O FUNDO, MESMO ASSIM, VAI DE `!important` — isto foi MEDIDO, não escolhido (11/09): o
   wire pegou o botão do feed em voo com `background-color` ainda `rgb(255,255,255)` e a animação já
   rodando. O culpado é `telas/acoes.html:354`, `.fd-row>.ac-acts .btn{…background:var(--surface)}`,
   que é (0,3,0) e carrega DEPOIS deste arquivo — ganha da regra em (0,2,1). E por ser SHORTHAND ele
   não levava só a cor: zerava imagem, tamanho e repetição junto, então a varredura corria sobre
   gradiente nenhum e o estado inteiro era invisível. Subir a especificidade aqui seria corrida
   armamentista com o `<style>` de cada tela, e a tela seguinte a venceria de novo. Estado transitório
   que PRECISA ganhar de qualquer fundo de componente é o caso legítimo do `!important` — o mesmo
   motivo pelo qual o reduced-motion da linha 610 usa um.

   O QUE NÃO LEVA `!important`: o `background-position`. Na cascata, declaração `!important` ganha da
   ANIMAÇÃO — marcá-la congelaria a varredura de vez. Por isso ela fica normal e o keyframe declara o
   `from` explícito: com animação, a varredura anda -100% → 200% de ponta a ponta; sem animação
   (reduced-motion), a posição cai para o que a regra da tela disser, e o que sustenta o estado é o
   TINGIMENTO, que é `!important` e não sai.

   "INDO" NÃO PODE LER IGUAL A "MORTO". `.btn[disabled]{opacity:.45}` continua significando morto;
   aqui a opacidade volta a 1. Sem esta linha o controle em voo fica idêntico ao desabilitado e o
   padrão não entrega nada — que era o defeito de origem do `AV-02`.

   REDUCED-MOTION: o TINGIMENTO mora na regra, só a varredura mora no keyframe. O
   `animation:none!important` da linha 610 mata a varredura, o `background-position:-100%` congela o
   brilho FORA da caixa (mesma razão da variante `tabela`) e sobra o fundo `--sk-bar` — que É o
   feedback. Mover o tingimento para o keyframe deixaria quem pediu menos movimento sem estado nenhum,
   que é a armadilha que o §3.17 já documenta para a opacidade inicial do skeleton. */
button[aria-busy="true"][aria-busy],
input[aria-busy="true"][aria-busy]{opacity:1;cursor:progress;
  background-color:var(--sk-bar)!important;background-image:var(--sk-brilho)!important;
  background-size:200% 100%!important;background-repeat:no-repeat!important;
  background-position:-100% 0;
  animation:sk-varre-ctl var(--sk-dur) var(--ease) infinite}
@keyframes sk-varre-ctl{from{background-position:-100% 0}to{background-position:200% 0}}

/* ---------- importar: preview/diff (§3.14) ---------- */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:38px 24px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);transition:border-color var(--dur-2),background var(--dur-2);cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--tangerine);background:var(--tangerine-soft)}
.dropzone .dz-ic{font-size:26px;color:var(--tangerine-deep)}
.dropzone h3{font-size:16px}
.dropzone p{margin:0;color:var(--ink-muted);font-size:12.5px;max-width:48ch}
.dropzone .dz-file{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted)}
/* auto-fit, não `repeat(6,1fr)`: o 7º tile (adormecidos, 0044) caía sozinho numa 2ª linha com uma
   faixa vazia atravessando o card. Nº de tiles é decisão da TELA — a grade se ajusta. */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.statgrid .st{background:var(--surface);padding:11px 12px;text-align:center}
.statgrid .st .v{font-family:var(--font-mono);font-weight:700;font-size:18px}
.statgrid .st .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);margin-top:2px}
.statgrid .st.novos .v{color:var(--success)} .statgrid .st.atu .v{color:var(--warning)} .statgrid .st.rej .v{color:var(--danger)}
@media(max-width:860px){.statgrid{grid-template-columns:repeat(3,1fr)}}
.match-flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#876600;font-weight:600;cursor:pointer}
.match-flag input{accent-color:var(--tangerine);flex-shrink:0}
/* espinha por SITUAÇÃO (no preview a barra codifica o diff, não a squad) */
.ftable tr.imp-new td:first-child{box-shadow:inset var(--spine-w) 0 0 var(--success)}
.ftable tr.imp-upd td:first-child{box-shadow:inset var(--spine-w) 0 0 var(--warning)}
.ftable tr.imp-ign td:first-child{box-shadow:inset var(--spine-w) 0 0 var(--ink-subtle)}
.ftable tr.imp-rej td:first-child{box-shadow:inset var(--spine-w) 0 0 var(--danger)}
.ftable tr.imp-ign td{color:var(--ink-subtle)}
.pill.tone-muted{background:var(--surface-2);color:var(--ink-subtle)}
.imp-mode{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.imp-mode label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.imp-mode input{accent-color:var(--tangerine)}
.imp-mode .hint{font-size:11.5px;color:var(--ink-subtle)}
.imp-squad-sel{font-family:var(--font-body);font-size:11.5px;border:1px solid var(--tangerine);background:var(--tangerine-soft);border-radius:var(--radius-sm);padding:2px 6px;color:var(--ink)} /* squad ambígua = editável (tangerine) */
.imp-squad-sel:focus{outline:2px solid var(--tangerine);outline-offset:1px}

/* ---------- roadmap board (§3.16) — colunas R1–R12 + "Sem release" ---------- */
/* zoom 200%: colunas minmax + overflow-x no board (nunca esmagar) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,236px);gap:10px;overflow-x:auto;padding-bottom:12px;align-items:start;cursor:grab}
.board.panning{cursor:grabbing;user-select:none}
.bcol{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);min-height:340px;display:flex;flex-direction:column}
.bcol-head{display:flex;align-items:baseline;gap:7px;padding:10px 12px 8px}
.bcol-head .r{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap}
.bcol-head .m{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle);white-space:nowrap}
.bcol-head .n{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-subtle);white-space:nowrap}
.bcol-body{display:flex;flex-direction:column;gap:8px;padding:0 8px 10px;overflow-y:auto;max-height:64vh}
/* card do épico: espinha = squad (regra do DS; farol NUNCA na borda — vira dot) */
.bcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px 8px;cursor:pointer;transition:box-shadow var(--dur-2);box-shadow:var(--shadow-sm),inset var(--spine-w) 0 0 var(--squad-c,var(--squad-outros))}
.bcard:hover{box-shadow:var(--shadow-md),inset var(--spine-w) 0 0 var(--squad-c,var(--squad-outros))}
.bcard .t{font-weight:600;font-size:12.5px;line-height:1.35;padding-right:16px}
.bcard .d{font-size:11.5px;color:var(--ink-muted);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard .meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.bcard .meta .pill{font-size:11px;padding:1px 7px}
/* status nunca estoura pro fora do card (nome longo/zoom): trunca com … e mantém o full no title */
.bcard .meta .pill.status{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.5}
/* farol (DS §3.10): dot de 3 estados — cor nunca é o único sinal (title/label no uso) */
.farol-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.farol-dot[data-farol="verde"]{background:var(--success)}
.farol-dot[data-farol="amarelo"]{background:var(--warning)}
.farol-dot[data-farol="vermelho"]{background:var(--danger)}
.bcard>.farol-dot{position:absolute;top:10px;right:10px}
.pill.tone-info{background:var(--info-soft);color:#1c4f96}
/* fase da esteira (roadmap): upstream = pré-DEV (ardósia/azul frio) · downstream = DEV+entrega (teal) */
.pill.tone-upstream{background:#EAEEF3;color:#455A75}
.pill.tone-downstream{background:#DFF0EC;color:#13675B}
/* status Upstream do Projeto BSC (D59) — o roxo do painel do Luis; a fase upstream do roadmap é a de cima */
.pill.tone-st-upstream{background:var(--st-upstream-soft);color:var(--st-upstream)}

/* ---------- BSC estratégico (§3.24) — destaque roxo do dash legado ---------- */
/* tag no card/título: gradiente roxo + estrela dourada; zoom-proof (nowrap + shrink:0) */
.bsc-tag{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--bsc) 0%,var(--bsc-deep) 100%);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;border-radius:4px;padding:2px 8px;white-space:nowrap;flex-shrink:0;box-shadow:0 1px 3px rgba(110,63,203,.3);vertical-align:2px}
.bsc-tag .bsc-star{width:11px;height:11px;flex-shrink:0;fill:var(--bsc-star);filter:drop-shadow(0 0 2px rgba(255,212,107,.5))}
/* nível "global": peso grande, menor que o estratégico — soft, sem gradiente/estrela */
.bsc-tag.global{background:var(--bsc-soft);color:var(--bsc-deep);box-shadow:none;border:1px solid #D9C9F2}

/* ---------- cores do tipo da demanda (0061) — o Backlog e o slide do COMEX (BC-59) leem DAQUI ---------- */
/* Só as CORES: a forma é de cada tela (a pílula de 10px do Backlog, ao lado do `.bk-tier`, mora no
   `backlog.html`, fora da régua de 11px do ds.css; o slide do COMEX copia a pílula do PPT). A FAMÍLIA DE
   COR não colide com o vocabulário em uso — o `.bk-tier` ocupa vermelho e âmbar, e vermelho/verde/âmbar já
   são dinheiro e estado no DS —: matizes frios (azul, roxo, teal) sem leitura de "bom/ruim", porque
   tipo é classificação, não juízo. O Mandatório (BC-72) é grafite, e não vermelho/terracota: ao lado do
   `.bk-tier` vermelho ele leria como alerta (grill de 14/10). Contraste conferido contra o fundo soft de
   cada par (AA para texto pequeno; o grafite dá 8,4:1). Hex num lugar só: o slide muda a FORMA da tag,
   nunca a cor. */
.bk-tipo.melhoria{background:#E3EDF9;color:#1C4F96}
.bk-tipo.novo_produto{background:#EAE4F7;color:#5B34A8}
.bk-tipo.inovacao{background:#DDF0EC;color:#12645A}
.bk-tipo.mandatorio{background:#E5E9EE;color:#37424F}

/* ---------- audit timeline (§3.15) — imutável, append-only ---------- */
.audit{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:4px 16px 10px}
.audit-day{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--ink-subtle);padding:14px 0 2px;border-top:1px solid var(--border)}
.audit-day:first-child{border-top:0}
.audit-item{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.audit-day + .audit-item{border-top:0}
.audit-item .who{flex:0 0 34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;font-family:var(--font-mono)}
.audit-item .line{font-size:13px;line-height:1.5}
.audit-item .line b{font-weight:600}
.audit-tag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);background:var(--surface-2);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.diff{font-family:var(--font-mono);font-size:11.5px;margin-top:4px;display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.diff .old{color:var(--danger);text-decoration:line-through}
.diff .new{color:var(--success);font-weight:600}
.diff .arr{color:var(--ink-subtle)}

/* ---------- gaveta do menu (tela estreita) ---------- */
/* O media query abaixo já mandava a sidebar para fora da tela e reservava `.sidebar.open` para
   trazê-la de volta — mas NADA adicionava `.open`: o menu simplesmente sumia em 390px, em 640px
   (= zoom 200% num notebook de 1280) e em janela dividida, deixando o usuário sem navegação.
   Quem acende o `.open` é o `mountNavToggle()` do ui.js; aqui fica só o contrato visual.
   O botão nasce `display:none` e só aparece dentro do media query — sem isso ele apareceria no
   desktop, onde a sidebar já é fixa. */
/* BC-33: o botão passou a existir também no computador — lá ele percorre os três estados do menu
   (completo → só ícones → oculto), gravados no `<html data-nav>` pelo `mountNavToggle`. */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;
  margin-right:-4px;padding:0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);cursor:pointer}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle svg{width:18px;height:18px}
.nav-backdrop{position:fixed;inset:0;z-index:45;background:rgba(15,27,45,.42)}
.nav-backdrop[hidden]{display:none}   /* o [hidden] da UA stylesheet perde para o display de autor */
body.nav-open{overflow:hidden}        /* gaveta aberta não rola o conteúdo atrás */

/* ---------- menu em três estados (computador, BC-33) ---------- */
/* Só acima de 820px: abaixo dele o menu é a gaveta e o `data-nav` é ignorado (a preferência sobrevive
   à ida e volta). "Só ícones" deixa uma faixa estreita; o nome sai da vista mas continua no nome
   acessível (recorte, não `display:none`) e volta como dica no hover e no foco. "Oculto" tira a
   coluna inteira — `display:none` também tira os itens do Tab. */
:root{--sidebar-w-ic:60px}
@media(min-width:821px){
  html[data-nav="icones"] .app{grid-template-columns:var(--sidebar-w-ic) minmax(0,1fr)}
  html[data-nav="oculto"] .app{grid-template-columns:minmax(0,1fr)}
  html[data-nav="oculto"] .sidebar{display:none}
  html[data-nav="icones"] .sidebar{overflow-x:visible;overflow-y:auto}
  html[data-nav="icones"] .brand{padding:4px 0 18px;justify-content:center}
  html[data-nav="icones"] .brand>span:not(.glyph),
  html[data-nav="icones"] .nav-label,
  html[data-nav="icones"] .nav-foot{display:none}
  html[data-nav="icones"] .nav-item{justify-content:center;padding:10px 0}
  html[data-nav="icones"] .nav-item.nav-destaque{margin:4px 8px 6px;padding:8px 0}
  html[data-nav="icones"] .nav-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html[data-nav="icones"] .nav-badge{position:absolute;top:2px;right:6px;margin:0;min-width:16px;padding:0 4px;font-size:11px}
  html[data-nav="icones"] .nav-item:hover::after,
  html[data-nav="icones"] .nav-item:focus-visible::after{content:attr(data-tip);position:fixed;left:calc(var(--sidebar-w-ic) + 6px);
    margin-top:0;z-index:60;background:var(--ink);color:#fff;font-size:12px;font-weight:500;padding:5px 9px;
    border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-md)}
}

/* ---------- painel de atalhos (?) ---------- */
/* Conteúdo montado do MENU já pintado (ui.js `abreAtalhos`), então a lista é sempre a do papel de
   quem abriu. `kbd` em duas colunas fixas: a tecla é o que se procura, o rótulo é o que se lê. */
.atx{display:grid;gap:16px}
.atx-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--ink-subtle);margin-bottom:6px}
.atx-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;padding:4px 0}
.atx-row kbd{font-family:var(--font-mono);font-size:11.5px;font-weight:600;white-space:nowrap;flex-shrink:0;
  justify-self:start;background:var(--surface-2);border:1px solid var(--border-strong);border-bottom-width:2px;
  border-radius:var(--radius-sm);padding:3px 8px;color:var(--ink)}
.atx-row span{font-size:13px;min-width:0;overflow-wrap:break-word}
.atx-note{margin:14px 0 0;font-size:12px;color:var(--ink-muted)}
@media(max-width:520px){.atx-row{grid-template-columns:64px minmax(0,1fr);gap:8px}}

/* ---------- foco de teclado ---------- */
/* Faltava em toda a NAVEGAÇÃO: o DS estilizava :focus-visible de .btn/.select/.search/.field/.modal-x
   e de mais nada, então quem anda de Tab não via onde estava no menu, no ano, nas abas nem no pager.
   Contorno tangerine é o mesmo dos outros controles — foco é ação, e ação é tangerine no DS. */
.nav-item:focus-visible,.nav-toggle:focus-visible,.year:focus-visible,.org-sel:focus-visible,.fin-tab:focus-visible,
.pager button:focus-visible,.icon-btn:focus-visible,.crumb a:focus-visible{outline:2px solid var(--tangerine);outline-offset:2px}
/* dentro do navy o tangerine perde contraste contra a espinha do item ativo → contorno claro */
.nav-item:focus-visible{outline-color:#fff;outline-offset:-2px}
/* "Pular para o conteúdo" (BC-39): 1º foco da página, montado pelo `mountTopbar`. Fora da vista até
   receber o foco — `display:none` o tiraria do Tab, que é o único jeito de chegar nele. */
.skip-link{position:fixed;top:8px;left:8px;z-index:calc(var(--z-toast) + 1);transform:translateY(-200%);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:8px 14px;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md);text-decoration:none}
.skip-link:focus{transform:none;outline:2px solid var(--tangerine);outline-offset:2px}
/* o alvo do link é o `.main` inteiro: contorno nele seria uma moldura na tela toda */
.main[tabindex="-1"]:focus{outline:none}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* O hambúrguer ocupa a vaga do `.crumb`, não uma vaga a mais: o topbar de 390px já fechava no
   limite (crumb + ano + presença + papel + Sair) e somar 34px + gap estourou 49px medidos — o
   `wire-financeiro` pegou na hora. Esconder a trilha aqui não perde navegação: ela repete o
   `.view-title` logo abaixo, e quem navega em tela estreita usa a gaveta. */
@media(max-width:820px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:-100%;z-index:50;transition:left var(--dur-2)}.sidebar.open{left:0}.nav-toggle{display:inline-flex}.topbar .crumb{display:none}.topbar .rel-carimbo{display:none}}

/* ── Bifurcação da pergunta em modal (G1 · D28) ─────────────────────────────────────────────────
   Nasceu inline em `acoes.html` (o modal de rejeitar) e subiu para cá em 09/08, quando a tela
   Imobilizado passou a fazer a MESMA pergunta no destino OUTROS. Duas cópias do mesmo padrão em
   telas irmãs é o D7 — e o que este padrão existe para evitar é justamente a tela adivinhar qual
   das duas coisas a pessoa quis dizer. */
.fd-eixo{display:grid;gap:10px;margin-bottom:4px}
/* `[hidden]` explícito — 3ª mordida da armadilha (`.pager`, `.nav-backdrop`). Medição e o resto da
   história em `divida/D-a3-05.md`. */
.fd-eixo[hidden]{display:none}
.fd-eixo .k{font-size:12px;font-weight:600;color:var(--ink-muted)}
.fd-eixo .op{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.55;cursor:pointer;background:var(--surface)}
.fd-eixo .op:has(input:checked){border-color:var(--tangerine);background:var(--surface-2)}
.fd-eixo .op input{margin-top:3px;flex-shrink:0;accent-color:var(--tangerine)}
.fd-eixo .op input:disabled{cursor:not-allowed}
.fd-eixo .op:has(input:disabled){opacity:.62;cursor:not-allowed}
.fd-eixo .cod{font-family:var(--font-mono)}

/* ── Caixa de impacto de um claim (imobilizado · centro · Porta B) ──────────────────────────────
   Viveu inline em `imobilizado.html` e `centros.html`; subiu aqui em 09/08 quando a Central virou o
   3º consumidor — a regra de três do styleguide. `.imp-warn` é o que dá cor de PERIGO ao aviso de
   quem perde dinheiro: sem ele o texto sai indistinguível do resto, numa tela financeira. */
.imp-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;line-height:1.7}
.imp-box b{font-variant-numeric:tabular-nums}
.imp-box .imp-warn,.imp-warn{color:var(--danger);font-weight:600}
.imp-box ul{margin:6px 0 0;padding-left:18px}

/* ── §3.30 Linha de projeto: cabeçalho, strip colapsada e picker de colunas (11/08) ──────────────
   PROMOVIDO, não inventado. Esta anatomia era CSS tela-local de `telas/projetos.html` — a tela que os
   usuários elogiam — e por isso não havia o que reusar quando o Business Case foi portado: ele
   RECRIOU. `business-case.html` e `projetos.html` chegaram a declarar byte a byte as mesmas 11 regras
   de `.kpi-*` e as 2 de `.sort-ctl`, e o `.mval` estava em TRÊS telas com o comentário do próprio
   autor admitindo o gatilho da regra de três. Vem tudo para cá de uma vez: promover metade deixa o
   próximo consumidor recriando o espaçamento, que é o pecado exato que isto veio impedir.

   POR QUE OS SELETORES SÃO LONGOS. `.val` e `.lbl` são os nomes mais genéricos do repo — `.val` está
   em `apresentacao.js` e `backlog.js`, `.lbl` em 12+ telas via `.presence`. Um `.val.pos` global
   pintaria de verde números que ninguém mandou pintar, em telas que ninguém pensaria em abrir. Por
   isso `.proj-mini .pmf .val.pos`, e não `.val.pos`. Medido por `tools/wire-ds-paridade.mjs`, que
   confere as 8 telas, não só esta.

   NÃO DÊ `display:` AO `.pmf`. Ele não declara display de propósito: o `[hidden]` da UA stylesheet
   esconde a célula quando o picker desliga a coluna, e QUALQUER display de autor ganha dele. É a
   mesma armadilha que obrigou `.pgrid[hidden]`, `.pager[hidden]` e o `.ftable *[hidden]` logo abaixo
   a existirem. O `wire-ds-paridade` trava esse invariante (`.proj-mini .pmf[hidden]` → `display:none`).

   FICOU DE FORA: `.sort-ctl #fSortDir{min-width:118px}`. É regra de ID — largura de UM controle, não
   anatomia de componente — e o DS não é dono de id de tela. Segue tela-local nas duas telas. */
.proj{margin-bottom:16px}
.proj.collapsed{padding-top:12px;padding-bottom:12px}
.proj-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.proj-head h3{font-size:17px}
.proj-head .meta{font-size:11.5px;color:var(--ink-muted);margin-top:3px}
.proj-head .meta b{color:var(--ink);font-family:var(--font-mono);font-weight:500}
.proj-head .acts{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
/* strip colapsada: 1 linha com os dados principais (padrão do dash legado) */
.proj-mini{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-left:auto}
.proj-mini .pmf{text-align:right}
.proj-mini .pmf .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);font-weight:600;white-space:nowrap}
.proj-mini .pmf .val{font-family:var(--font-mono);font-weight:600;font-size:13px;white-space:nowrap}
.proj-mini .pmf .val.pos{color:var(--success)} .proj-mini .pmf .val.negv{color:var(--danger)}
/* o chevron ▸/▾ vem depois do `.icon-btn` (ds.css:283, mesma especificidade): quem vier por último
   ganha o font-size, e é este que tem de ganhar. Mover este bloco para CIMA do `.icon-btn` encolhe o
   chevron de 14px para 13px sem nenhum erro — o §A do wire-ds-paridade pega. */
.toggle-exp{font-size:14px;min-width:24px;min-height:24px}

/* picker de colunas/KPIs — preferência GLOBAL do usuário, em <details> (toggle e teclado de graça).
   Vivia idêntico em `projetos.html` e `business-case.html`. */
.kpi-menu{position:relative;display:inline-flex}
.kpi-menu>summary{list-style:none;cursor:pointer}
.kpi-menu>summary::-webkit-details-marker{display:none}
.kpi-menu[open]>summary{background:var(--surface-2);color:var(--ink)}
.kpi-drop{position:absolute;z-index:60;top:calc(100% + 4px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:8px;min-width:212px}
.kpi-h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);font-weight:600;padding:2px 6px 7px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:1px solid var(--border);margin-bottom:3px;white-space:nowrap}
.kpi-h span{text-transform:none;letter-spacing:0;font-weight:400}
.kpi-opt{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;white-space:nowrap;padding:4px 6px;border-radius:var(--radius-sm)}
.kpi-opt:hover{background:var(--surface-2)}
.kpi-opt input{accent-color:var(--tangerine);flex-shrink:0}
.kpi-sep{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);font-weight:600;padding:8px 6px 3px;border-top:1px solid var(--border);margin-top:4px}
.kpi-acts{display:flex;gap:8px;padding-top:7px;border-top:1px solid var(--border);margin-top:5px}
/* O par do picker: ele liga/desliga COLUNA INTEIRA, e sem esta linha a coluna desligada continua
   ocupando a largura. Promovido JUNTO de propósito — picker sem ela é meio componente, e o
   `wire-business-case` tem 6 asserts pendurados nela. */
.ftable th[hidden],.ftable td[hidden]{display:none}

/* controle de ordenação da lista (rótulo + select), idêntico nas duas telas */
.sort-ctl{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.sort-ctl .sort-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);font-weight:600;white-space:nowrap}

/* valor de métrica do helper `valorMetrica()` (components.js, §3.29) — 3º uso: `projetos`,
   `business-case` e `metricas`. A tela que chama o helper TINHA que trazer as 3 linhas junto, ou o
   valor nascia sem estilo; agora vem do DS. `.mu` NU (sem `.mval` em volta) segue tela-local em
   projetos: é outro escopo, com um consumidor só, e `.mu` global é nome curto demais para o DS. */
.mval{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mval .mu{color:var(--ink-muted);font-size:.85em;margin-left:3px}
.mval.vazio{color:var(--ink-subtle)}

/* ── Central de Acessos (AM-12) — padrões novos: §3.34 em docs/front.md (styleguide §21) ───────────────────── */
/* Gaveta lateral: a ficha que abre por cima da lista sem perder a lista. Tela cheia abaixo de 560px. Fecha por
   Esc, pelo fundo e pelo ×; o foco fica preso dentro (quem liga isso é a tela). `[hidden]` vence o `display`. */
.dw-back{position:fixed;inset:0;background:rgba(15,27,45,.32);z-index:60;animation:dwfade var(--dur-2) var(--ease)}
.dw{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--bg);z-index:61;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:dwin 320ms cubic-bezier(.16,1,.3,1)}
.dw[hidden],.dw-back[hidden]{display:none}
@keyframes dwin{from{transform:translateX(32px);opacity:.4}to{transform:none;opacity:1}}
@keyframes dwfade{from{opacity:0}}
.dw-h{padding:18px 22px 14px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;gap:14px;align-items:flex-start}
.dw-h h2{font-family:var(--font-display);font-weight:600;font-size:21px;margin:0 0 3px;line-height:1.2}
.dw-h h2:focus{outline:none}
.dw-h .x{margin-left:auto;flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink-muted);font-size:18px;line-height:1}
.dw-h .x:hover{color:var(--ink);border-color:var(--border-strong)}
.dw-h .x:focus-visible{outline:2px solid var(--tangerine);outline-offset:2px}
.dw-b{flex:1;overflow:auto;padding:16px 22px 24px;display:grid;gap:22px;align-content:start}
.dw-f{padding:12px 22px;background:var(--surface-2);border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dw-f .sp{flex:1}
@media (max-width:560px){.dw-h{padding:14px 16px 12px}.dw-b{padding:14px 16px 20px}.dw-f{padding:10px 16px}.dw-f .btn{flex:1 1 auto;justify-content:center}}
@media (prefers-reduced-motion:reduce){.dw,.dw-back{animation:none}}

/* Segmentado Nenhum / Leitura / Edição (radiogroup). A opção acima do TETO do nível fica LISTRADA e desligada —
   o teto se vê na linha, sem cadeado. `.base` é o traço sob a opção que vem do perfil. */
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--surface)}
.seg button{position:relative;border:0;border-left:1px solid var(--border);background:var(--surface);font:inherit;font-size:12px;padding:6px 12px;min-width:74px;min-height:36px;cursor:pointer;color:var(--ink-muted)}
.seg button:first-child{border-left:0}
.seg button:hover:not(:disabled):not([aria-checked=true]){background:var(--surface-2);color:var(--ink)}
.seg button[aria-checked=true]{color:#fff;font-weight:600}
.seg button[aria-checked=true][data-lvl=""]{background:var(--ink-subtle)}
.seg button[aria-checked=true][data-lvl="read"]{background:var(--info)}
.seg button[aria-checked=true][data-lvl="write"]{background:var(--tangerine-darker)}
.seg button:disabled{cursor:not-allowed;color:var(--ink-subtle);background:repeating-linear-gradient(135deg,var(--surface) 0 5px,var(--surface-3) 5px 10px)}
.seg button.base::after{content:"";position:absolute;left:50%;bottom:3px;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:currentColor;opacity:.7}
.seg button:focus-visible{outline:2px solid var(--tangerine);outline-offset:-2px;z-index:1}
@media (max-width:560px){.seg{display:flex}.seg button{flex:1;min-width:0;padding:8px 6px}}

/* Interruptor "vê / não vê" (checkbox nativo, papel de switch). */
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:700}
.sw input{appearance:none;width:30px;height:18px;border-radius:99px;background:var(--border-strong);position:relative;margin:0;cursor:pointer;transition:background var(--dur-1) var(--ease);flex-shrink:0}
.sw input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.25);transition:transform var(--dur-2) var(--ease)}
.sw input:checked{background:var(--tangerine)}
.sw input:checked::after{transform:translateX(12px)}
.sw input:focus-visible{outline:2px solid var(--tangerine);outline-offset:2px}
.sw input:disabled{cursor:not-allowed;background:repeating-linear-gradient(135deg,var(--border-strong) 0 4px,var(--surface-3) 4px 8px)}

/* Marca de exceção: "A mais" / "A menos" na linha que difere do perfil; a contagem na lista. */
.exc{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.exc.mais{background:var(--info-soft);color:#1c4f96}
.exc.menos{background:var(--surface-3);color:var(--ink-muted)}
.exc-cnt{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#1c4f96;white-space:nowrap}
.exc-cnt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--info)}

/* Recusa / erro no rodapé de quem salvou: erro = vermelho ("nada mudou"); recusa do sistema = caixa NEUTRA, com o
   motivo e o que fazer. Não é toast: fica até a pessoa mudar algo. */
.msg{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius);font-size:12.5px;line-height:1.45;width:100%}
.msg.erro{background:var(--danger-soft);color:#7e2222;border:1px solid #efc9c9}
.msg.recusa{background:var(--surface);color:var(--ink);border:1px solid var(--border-strong)}
.msg .ic{flex-shrink:0;font-weight:700;width:16px;text-align:center}
.msg.erro .ic{color:var(--danger)}
.msg.recusa .ic{color:var(--ink-muted)}
.msg b{display:block;margin-bottom:1px}

/* Aviso de impacto: antes de salvar algo que muda o acesso de várias pessoas, o número vem primeiro. */
.imp-n{font-family:var(--font-display);font-size:19px;font-weight:600;margin:0 0 10px}
.imp-l{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:5px;font-size:13px}
.imp-pp{font-size:12.5px;color:var(--ink-muted);margin:0 0 4px}