/* Fontes do CapyMed Floresta, hospedadas no próprio sistema (licença SIL OFL 1.1). Subconjunto latin. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 750;font-display:swap;src:url(/fonts/bricolage-grotesque-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:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree-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.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}
/* CapyMed Floresta — camada visual do sistema (etapas 1 e 2).
   Carregada por último no index.html. Tokens copiados de vendor/capymed-floresta/tokens.css (v1.8.0);
   fontes hospedadas no próprio sistema (vendor/capymed-floresta/fonts). Tema claro e escuro: os CSS dos
   módulos usam tokens (var(--surface), var(--ink-2)...), então o escuro só redefine os tokens abaixo.
   Regra do design system: cor sempre por token, nunca hexadecimal nos componentes. */

:root,html body{
 --bg:#f2f4f1;--surface:#ffffff;--surface-2:#f7f8f6;--surface-3:#eceee9;--sep:#e1e4de;--sep-2:#858d87;
 --ink:#14201a;--ink-2:#4c5650;--ink-3:#636b65;
 --forest:#0a3d29;--forest-2:#14553a;--on-forest:#eaf5ef;
 --accent:#0f6b47;--accent-2:#0b5638;--accent-3:#2aa06b;--accent-soft:#e4f1ea;--on-accent:#ffffff;
 --calm:#2b5f9e;--calm-soft:#e9f0f9;--warn:#9a5a00;--warn-soft:#fdf2e3;--crit:#a6231b;--crit-soft:#fbecea;
 --plum:#66489a;--plum-soft:#f1ecf9;--capy:#c96a1e;--capy-ink:#7a3d12;--capy-soft:#fbeee0;--helmet:#ffffff;
 --risk-1:#287a4c;--risk-2:#7fa23a;--risk-3:#d8a11e;--risk-4:#dd6b20;--risk-5:#b3261e;--on-risk-light:#ffffff;--on-risk-dark:#16181c;
 --glass:rgba(255,255,255,.78);--scrim:rgba(10,20,15,.42);--focus-ring:var(--accent);
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
 --r-xs:5px;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-pop:16px;--r-arch:28px;--r-arch-base:14px;--r-pill:999px;
 --control-sm:32px;--control-md:40px;--control-lg:44px;--header-h:56px;--sidebar-w:248px;--focus-ring-w:2px;
 --sh-1:0 1px 2px rgba(10,30,20,.06);--sh-2:0 18px 44px -18px rgba(10,30,20,.30);--sh-3:0 16px 32px -14px rgba(12,48,32,.30);
 --font-display:"Bricolage Grotesque",Figtree,-apple-system,"Segoe UI",sans-serif;
 --font-text:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 --font-data:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --dur-1:100ms;--dur-2:160ms;--dur-3:240ms;--ease-standard:cubic-bezier(.2,.7,.2,1);
 /* Nomes antigos do sistema, apontando para os tokens. */
 --navy:var(--forest);--green:var(--accent);--mint:var(--accent-soft);--muted:var(--ink-2);--line:var(--sep);--orange:var(--capy-ink);
 color-scheme:light;
}
/* Tema escuro: escolhido pelo botão do topo (data-theme no <html>). Só na tela; a impressão fica sempre clara. */
@media screen{html[data-theme="dark"],html[data-theme="dark"] body{
 --bg:#0c100e;--surface:#141917;--surface-2:#19201d;--surface-3:#212925;--sep:#27302c;--sep-2:#66726c;
 --ink:#eef3f0;--ink-2:#b2bcb6;--ink-3:#8f9993;
 --forest:#0b2a1e;--forest-2:#123b2b;--on-forest:#e3f2ea;
 --accent:#4fbe8b;--accent-2:#6ed3a3;--accent-3:#6ed3a3;--accent-soft:rgba(79,190,139,.14);--on-accent:#0c100e;
 --calm:#7fb0ea;--calm-soft:rgba(127,176,234,.14);--warn:#e0a44b;--warn-soft:rgba(224,164,75,.14);--crit:#ef6f64;--crit-soft:rgba(239,111,100,.14);
 --plum:#b79ae8;--plum-soft:rgba(183,154,232,.15);--capy:#ee9a52;--capy-ink:#f4b57c;--capy-soft:rgba(238,154,82,.14);--helmet:#1b2220;
 --glass:rgba(20,25,23,.8);--scrim:rgba(0,0,0,.62);
 --sh-1:0 1px 2px rgba(0,0,0,.5);--sh-2:0 20px 48px -18px rgba(0,0,0,.75);--sh-3:0 18px 36px -14px rgba(0,0,0,.7);
 color-scheme:dark;
}}

/* ---------- Base ---------- */
html body{background:var(--bg);color:var(--ink);font-family:var(--font-text);-webkit-font-smoothing:antialiased}
html body h1,html body h2,html body h3,html body .nv-hero h1{font-family:var(--font-display);color:var(--ink);text-wrap:balance}
html body h1{font-weight:650;letter-spacing:-.028em}
html body h2,html body h3{font-weight:650;letter-spacing:-.015em}
html body .muted,html body small{color:var(--ink-2)}
html body a{color:var(--accent)}
html body code,html body kbd,html body .mono,html body .cm-mono{font-family:var(--font-data)}
html body :focus-visible{outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:2px}
html body ::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------- Menu lateral (Sidebar, em verde floresta) ---------- */
html body .sidebar{background:var(--forest);color:var(--on-forest);border-right:0;backdrop-filter:none}
html body .sidebar .brand{color:var(--on-forest)}
html body .sidebar .brand strong{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--on-forest)}
html body .sidebar .brand small,html body .sidebar .nav-caption,html body .sidebar .nv-nav-caption,html body .sidebar .side-bottom small{color:color-mix(in srgb,var(--on-forest) 72%,transparent)}
html body .sidebar .brand-icon{background:none;box-shadow:none;border-radius:0;width:40px;height:40px}
html body .sidebar .brand-icon img{width:40px;height:40px;object-fit:contain;display:block}
html body .sidebar .nav-button{color:var(--on-forest);border-radius:var(--r-md);position:relative}
html body .sidebar .nav-button svg{color:color-mix(in srgb,var(--on-forest) 80%,transparent)}
html body .sidebar .nav-button:hover{background:var(--forest-2);color:var(--on-forest)}
html body .sidebar .nav-button.active,html body .sidebar .nav-button[aria-current="page"]{background:var(--forest-2);color:#fff;font-weight:600;box-shadow:none}
html body .sidebar .nav-button.active::before,html body .sidebar .nav-button[aria-current="page"]::before{content:"";position:absolute;left:-6px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--capy)}
html body .sidebar .nav-button.active svg{color:#fff}
html body .nv-nav-sections{border-top-color:color-mix(in srgb,var(--on-forest) 16%,transparent)}
html body .sidebar .nv-nav-group summary{color:color-mix(in srgb,var(--on-forest) 78%,transparent)}
html body .sidebar .nv-nav-group summary:hover{background:var(--forest-2);color:var(--on-forest)}
html body .sidebar .nv-nav-group summary>svg{color:color-mix(in srgb,var(--on-forest) 70%,transparent)}
html body .sidebar .nv-nav-group>div{border-left-color:color-mix(in srgb,var(--on-forest) 18%,transparent)}
html body .sidebar .nv-side-shortcut{color:var(--on-forest)}
html body .sidebar .nv-side-shortcut:hover{background:var(--forest-2)}
html body .sidebar .nv-side-shortcut svg{color:color-mix(in srgb,var(--on-forest) 75%,transparent)}
html body .sidebar .side-bottom{border-color:color-mix(in srgb,var(--on-forest) 16%,transparent)}
html body .sidebar .side-bottom p{color:var(--on-forest)}
html body #nav{scrollbar-color:var(--forest-2) transparent}

/* ---------- Barra superior (TopbarWork, em vidro) ---------- */
html body .topbar{height:var(--header-h);background:var(--glass);backdrop-filter:blur(18px);border-bottom:1px solid var(--sep)}
html body .workspace-name{color:var(--ink-2)}
html body .avatar{background:var(--accent-soft);color:var(--accent);font-weight:700;border:0}
html body .breadcrumb,html body .breadcrumb button{color:var(--ink-3)}
html body .breadcrumb button:hover{color:var(--accent)}
html body .breadcrumb>span:last-child{color:var(--ink)}
html body .nv-command-trigger{background:var(--surface-2);border-color:var(--sep);color:var(--ink-3);border-radius:var(--r-md)}
html body .nv-command-trigger:hover{background:var(--surface);border-color:var(--sep-2)}
html body .nv-command-trigger kbd,html body .nv-hub-search kbd{font-family:var(--font-data);background:var(--surface);border-color:var(--sep);color:var(--ink-3)}

/* ---------- Botões (Button) ---------- */
html body .btn{min-height:var(--control-md);border:1px solid var(--sep-2);background:var(--surface);color:var(--ink);border-radius:var(--r-md);font:600 13.5px/1 var(--font-text);transition:transform var(--dur-1) var(--ease-standard),background var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2)}
html body .btn:hover{background:var(--surface-2);border-color:var(--ink-3);transform:translateY(-1px)}
html body .btn:active{transform:none}
html body .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:14px 14px 10px 10px;box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.18)}
html body .btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-2px)}
html body .btn.danger,html body .btn.red{background:var(--surface);border-color:var(--crit);color:var(--crit)}
html body .btn.danger:hover,html body .btn.red:hover{background:var(--crit-soft)}
html body .btn.ghost{background:transparent;border-color:transparent}
html body .btn.ghost:hover{background:var(--surface-3)}
html body .btn:disabled,html body .btn[aria-disabled="true"]{opacity:.55;transform:none;cursor:not-allowed;box-shadow:none}
html body .text-btn{color:var(--accent);font-weight:600}
html body .text-btn:hover{color:var(--accent-2)}

/* ---------- Campos (Field) ---------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),html body select,html body textarea{background:var(--surface-2);border:1px solid var(--sep-2);border-radius:var(--r-md);color:var(--ink);min-height:var(--control-lg);font-family:var(--font-text);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
html body textarea{min-height:88px}
html body input::placeholder,html body textarea::placeholder{color:var(--ink-3)}
html body input:not([type=checkbox]):not([type=radio]):focus,html body select:focus,html body textarea:focus{outline:none;border-color:var(--accent-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
html body input[type=checkbox],html body input[type=radio]{accent-color:var(--accent)}
html body label{color:var(--ink-2)}

/* ---------- Cartões e painéis ---------- */
html body .card,html body .pf-panel,html body .mg-panel,html body .nv-module-card,html body .nv-screen-card,html body .source-panel,html body .el-voter-card{background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
html body .card:hover,html body .nv-module-card:hover,html body .nv-screen-card:hover{box-shadow:var(--sh-2);border-color:var(--sep)}
html body .nv-module-icon,html body .nv-card-icon{border-radius:var(--r-md)}
/* A cor do módulo fica só no ícone; o cartão continua em surface. */
html body .nv-green .nv-module-icon{background:var(--accent-soft);color:var(--accent)}
html body .nv-rose .nv-module-icon{background:var(--crit-soft);color:var(--crit)}
html body .nv-violet .nv-module-icon{background:var(--plum-soft);color:var(--plum)}
html body .nv-amber .nv-module-icon{background:var(--warn-soft);color:var(--warn)}
html body .nv-slate .nv-module-icon{background:var(--surface-3);color:var(--ink-2)}
html body .nv-module-card.nv-green,html body .nv-module-card.nv-rose,html body .nv-module-card.nv-violet,html body .nv-module-card.nv-amber,html body .nv-module-card.nv-slate{background:var(--surface)}
/* Busca do painel: a borda é do contêiner, não do campo. */
html body .nv-hub-search{background:var(--surface-2);border:1px solid var(--sep-2);border-radius:var(--r-md)}
html body .nv-hub-search:focus-within{border-color:var(--accent-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
html body .nv-hub-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]){background:transparent;border:0;min-height:0;box-shadow:none}
html body .nv-hero-mark svg{color:var(--on-forest)}
html body .nv-hub-search svg{color:var(--ink-3)}
html body .nv-eyebrow,html body .pf-eyebrow{font-family:var(--font-data);color:var(--ink-2);letter-spacing:.08em}
html body .nv-link,html body .nv-open-module{color:var(--accent)}
html body .nv-star.is-favorite{color:var(--capy)}

/* Hero de marca (BrandHero): verde floresta com o "arco do capacete". */
html body .nv-hero{background:var(--forest);border:0;color:var(--on-forest);border-radius:var(--r-arch) var(--r-arch) var(--r-arch-base) var(--r-arch-base);box-shadow:var(--sh-2)}
html body .nv-hero h1{color:#fff}
html body .nv-hero p,html body .nv-hero .nv-eyebrow{color:color-mix(in srgb,var(--on-forest) 82%,transparent)}
html body .nv-hero-mark{background:var(--forest-2);color:var(--on-forest);border-radius:var(--r-arch) var(--r-arch) var(--r-arch-base) var(--r-arch-base)}

/* ---------- Status (Badge): texto + forma, nunca só cor ---------- */
html body .badge{border-radius:var(--r-pill);padding:3px 10px 3px 8px;font:600 12px/1.4 var(--font-text);background:var(--surface-3);color:var(--ink-2);gap:6px}
html body .badge::before{content:"";width:7px;height:7px;flex:none;background:currentColor;border-radius:2px;transform:rotate(45deg) scale(.85)}
html body .badge.green{background:var(--accent-soft);color:var(--accent)}
html body .badge.green::before{border-radius:50%;transform:none}
html body .badge.orange{background:var(--warn-soft);color:var(--warn)}
html body .badge.orange::before{border-radius:0;transform:none;clip-path:polygon(50% 0,100% 100%,0 100%)}
html body .badge.red{background:var(--crit-soft);color:var(--crit)}
html body .badge.red::before{border-radius:1px;transform:rotate(45deg)}

/* ---------- Avisos (Alert) ---------- */
html body .notice{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);color:var(--ink);border-radius:var(--r-md)}
html body .notice.danger{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 30%,transparent);color:var(--ink)}
html body .notice.danger strong,html body .notice.danger b{color:var(--crit)}

/* ---------- Tabelas (Table) ---------- */
html body table{font-family:var(--font-text);font-variant-numeric:tabular-nums}
html body th{background:var(--surface-2);color:var(--ink-3);font:600 11px/1.2 var(--font-text);letter-spacing:.045em;text-transform:uppercase}
html body td{border-color:var(--sep)}
html body .table-wrap{border:1px solid var(--sep);border-radius:var(--r-lg);background:var(--surface);overflow:auto}
html body tbody tr:hover td{background:var(--surface-2)}

/* ---------- Diálogos (Modal) e toast ---------- */
html body dialog{border:1px solid var(--sep);border-radius:var(--r-lg);box-shadow:var(--sh-2);color:var(--ink);background:var(--surface)}
html body dialog::backdrop{background:var(--scrim)}
html body .modal-head{background:var(--surface);border-bottom-color:var(--sep)}
html body .modal-foot{border-top-color:var(--sep)}
html body .toast{border-radius:var(--r-md);box-shadow:var(--sh-2)}

/* ---------- Abas e trilhos ---------- */
html body .pf-tabs [aria-selected="true"],html body .pf-tabs .active{color:var(--accent);border-color:var(--accent)}

@media (prefers-reduced-motion:reduce){html body *{transition:none!important;animation:none!important}}

/* Menu no celular: mostra só o rótulo curto (data-mobile), sem repetir o nome completo. */
@media (max-width:540px){html body .sidebar .nav-button span{font-size:0!important}html body .sidebar .nav-button span::after{font-size:10px!important}}

/* ---------- Etapa 2: botão de tema ---------- */
html body .theme-toggle{width:40px;height:40px;min-height:40px;padding:0;display:inline-grid;place-items:center;border-radius:12px}
html body .theme-toggle svg{width:20px;height:20px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- Etapa 2: matriz de risco nas cores oficiais (o número e o nível ficam sempre escritos) ---------- */
html body .rk-matrix td{border-radius:var(--r-sm);font-family:var(--font-display)}
html body .rk-matrix td small{font-family:var(--font-text);font-weight:600;color:inherit;opacity:1}
html body .rk-lv-4{background:var(--risk-1);color:var(--on-risk-light)}
html body .rk-lv-9{background:var(--risk-3);color:var(--on-risk-dark)}
html body .rk-lv-16{background:var(--risk-4);color:var(--on-risk-dark)}
html body .rk-lv-25{background:var(--risk-5);color:var(--on-risk-light)}

/* ---------- Etapa 2: estado vazio com a capivara (camada capy só aqui) ---------- */
html body .empty,html body .pf-empty{background:var(--capy-soft);border:1.5px dashed color-mix(in srgb,var(--capy) 55%,transparent);border-radius:var(--r-arch) var(--r-arch) var(--r-arch-base) var(--r-arch-base);padding:36px 24px 32px;text-align:center}
html body .empty>svg{display:none}
html body .empty::before,html body .pf-empty::before{content:"";display:block;width:88px;height:88px;margin:0 auto 14px;background:url(/logo-256.png) center/contain no-repeat}
html body .empty h2,html body .pf-empty h2,html body .pf-empty h3{color:var(--capy-ink);font-family:var(--font-display);font-size:20px;margin:0 0 8px}
html body .empty p,html body .pf-empty p{color:var(--ink-2);max-width:460px;margin:0 auto 20px}
/* Um botão primário por tela: com o estado vazio na tela, a ação dele é a principal e a do cabeçalho vira secundária. */
html body #view:has(.empty .btn.primary,.pf-empty .btn.primary) .page-head .btn.primary{background:var(--surface);color:var(--accent);border-color:var(--sep-2);box-shadow:none}

/* ---------- Etapa 2: navegação no celular — barra inferior fixa (Módulos, Visão geral, Buscar, Conta) ---------- */
html body .cm-tabbar{display:none}
@media (max-width:540px){
 html body .sidebar{display:none}
 html body .cm-tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--forest);border-top:1px solid color-mix(in srgb,var(--on-forest) 12%,transparent);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
 html body .cm-tabbar>*{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;border:0;background:none;border-radius:12px;color:color-mix(in srgb,var(--on-forest) 72%,transparent);font:600 11px/1.2 var(--font-text);text-decoration:none;cursor:pointer}
 html body .cm-tabbar svg{width:22px;height:22px}
 html body .cm-tabbar [aria-current="page"]{color:var(--on-forest);background:var(--forest-2);box-shadow:inset 0 -3px 0 var(--capy)}
 html body .main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   Etapa 3 — refino por módulo: Riscos e GHE, PGR (e os componentes pf-* compartilhados)
   ========================================================================== */
html body .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Pílula de risco (RiskMatrix → .cm-risk-pill): número na cor do nível + nome do nível */
html body .cm-risk-pill{display:inline-flex;align-items:center;gap:8px;padding:3px 11px 3px 3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--sep);font:600 12px/1.3 var(--font-text);color:var(--ink);white-space:nowrap}
html body .cm-risk-pill b{min-width:28px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:var(--r-pill);font:700 12px/1 var(--font-data)}

/* Abas (Tabs): sublinhado de 3px em accent; a aba ativa não é mais um botão primário */
html body .pf-tabs{gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--sep);margin:20px 0}
html body .pf-tabs .btn,html body .pf-tabs .btn.primary{background:transparent;color:var(--ink-2);border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none;padding:12px 14px 10px;min-height:44px;font:600 14px/1.2 var(--font-text);white-space:nowrap}
html body .pf-tabs .btn:hover{color:var(--ink);background:var(--surface-2)}
html body .pf-tabs .btn.primary{color:var(--accent);border-bottom-color:var(--accent)}

/* Indicadores (KPI): rótulo em eyebrow acima, número grande com algarismos tabulares */
html body .pf-stats>div,html body .pg-summary>span{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px 18px;border:1px solid var(--sep);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
html body .pf-stats strong,html body .pg-summary strong{font:700 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);margin:0}
html body .pf-stats span,html body .pg-summary>span{font:600 11px/1.35 var(--font-data);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0}
html body .pg-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}
@media (max-width:760px){html body .pf-stats,html body .pg-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Etiquetas de situação (Badge): texto + forma, nunca só a cor */
html body .pf-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:3px 10px;font:600 12px/1.4 var(--font-text);background:var(--surface-3);color:var(--ink-2)}
html body .pf-badge.green,html body .pf-badge.amber,html body .pf-badge.red,html body .pf-badge.blue{padding-left:8px}
html body .pf-badge.green::before,html body .pf-badge.amber::before,html body .pf-badge.red::before,html body .pf-badge.blue::before{content:"";width:7px;height:7px;flex:none;background:currentColor}
html body .pf-badge.green{background:var(--accent-soft);color:var(--accent)}
html body .pf-badge.green::before{border-radius:50%}
html body .pf-badge.amber{background:var(--warn-soft);color:var(--warn)}
html body .pf-badge.amber::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
html body .pf-badge.red{background:var(--crit-soft);color:var(--crit)}
html body .pf-badge.red::before{transform:rotate(45deg) scale(.85);border-radius:1px}
html body .pf-badge.blue{background:var(--calm-soft);color:var(--calm)}
html body .pf-badge.blue::before{border-radius:1px}
html body .pg-pending{color:var(--warn);font-weight:600}
html body .pg-pending::before{content:"▲";font-size:.7em;margin-right:6px;vertical-align:.12em}

/* Cartões de GHE e de programa: um primário por tela — a ação do cartão é secundária */
html body .rk-group-card,html body .pg-program-card{border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);transition:border-color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
html body .rk-group-card:hover,html body .pg-program-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--sep));box-shadow:var(--sh-2)}
html body .rk-group-card h2,html body .pg-program-card h2{font-family:var(--font-display);font-size:21px}
html body .rk-group-card .btn.primary,html body .pg-program-card .btn.primary{background:var(--surface);color:var(--accent);border:1px solid var(--sep-2);box-shadow:none}
html body .rk-code{font:600 12px/1 var(--font-data);letter-spacing:.04em;color:var(--ink-2);background:var(--surface-3);padding:5px 9px;border-radius:var(--r-pill)}

/* Página de detalhe (PageDetail): sem a faixa de boas-vindas; cabeçalho da entidade em cartão */
html body #view:has(.rk-group-heading) .rk-hero,html body #view:has(.pg-program-heading) .pg-hero{display:none}
html body .rk-group-heading,html body .pg-program-heading{background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 22px;margin:8px 0 20px}
html body .rk-group-heading h2,html body .pg-program-heading h2{font:650 26px/1.2 var(--font-display);letter-spacing:-.02em;margin:10px 0 6px}
html body .rk-group-heading h2 span{font:600 12px/1 var(--font-data);color:var(--ink-2);background:var(--surface-3);padding:5px 9px;border-radius:var(--r-pill);vertical-align:middle;margin:0 8px}
html body .rk-group-heading>div:first-child>.btn:first-child,html body .pg-program-heading>div:first-child>.btn:first-child{background:none;border:0;box-shadow:none;padding:0;min-height:0;color:var(--accent);font:600 13px/1.4 var(--font-text)}
html body .rk-group-heading>div:first-child>.btn:first-child:hover,html body .pg-program-heading>div:first-child>.btn:first-child:hover{text-decoration:underline}

/* Etapas do PGR (Stepper) */
html body .pg-steps{border-color:var(--sep);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
html body .pg-steps li>span{font:700 13px/1 var(--font-data)}
html body .pg-steps .current strong{color:var(--ink)}
html body .pg-steps .done>span{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* Tabelas do inventário (Table) */
html body .pf-table-wrap{border:1px solid var(--sep);border-radius:var(--r-md);background:var(--surface)}
html body .pf-table th{color:var(--ink-3);font:600 11px/1.2 var(--font-text);letter-spacing:.045em}
html body .pf-table tbody tr:hover td{background:var(--surface-2)}
html body .pf-table .btn{min-height:32px;padding:6px 12px;border-radius:10px;font-size:12px}
html body .pf-table td .btn+.btn{margin-left:6px}
html body .pf-table td>small:first-of-type{font-family:var(--font-text)}
html body .pg-preparation-card h2{font-family:var(--font-display)}
html body .pg-preparation-card header span{font:600 11px/1.3 var(--font-data);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}

/* ==========================================================================
   Etapa 3 — Saúde ocupacional (hc-*) e PCMSO (pc-*)
   ========================================================================== */
/* Etiquetas: realizado/ativo ● · agendado ■ · a programar ▲ · não compareceu/cancelado ◆ */
html body .pf-badge.success,html body .pf-badge.danger{padding-left:8px}
html body .pf-badge.success::before,html body .pf-badge.danger::before{content:"";width:7px;height:7px;flex:none;background:currentColor}
html body .pf-badge.success{background:var(--accent-soft);color:var(--accent)}
html body .pf-badge.success::before{border-radius:50%}
html body .pf-badge.danger{background:var(--crit-soft);color:var(--crit)}
html body .pf-badge.danger::before{transform:rotate(45deg) scale(.85);border-radius:1px}

/* Faixa de entrada: só na lista; no detalhe do programa sai. Um primário por tela: se a aba tem a sua ação
   principal, o "Agendar exame" da faixa vira secundário. */
html body .hc-hero,html body .pc-hero{border-radius:var(--r-arch) var(--r-arch) var(--r-arch-base) var(--r-arch-base);background:var(--surface);box-shadow:var(--sh-1)}
html body .hc-hero h1,html body .pc-hero h1{font-family:var(--font-display);letter-spacing:-.025em}
html body .hc-eyebrow{font:600 11px/1.3 var(--font-data);letter-spacing:.08em;color:var(--ink-2)}
html body #view:has(.pg-program-heading) .pc-hero{display:none}
html body #view:has(.hc-panel .btn.primary) .hc-hero .btn.primary{background:var(--surface);color:var(--accent);border:1px solid var(--sep-2);box-shadow:none}
html body .hc-lock{font-weight:600;color:var(--plum)}

/* Abas */
html body .hc-tabs{gap:2px;scrollbar-width:none}
html body .hc-tabs button{font:600 14px/1.2 var(--font-text);padding:12px 14px 10px;min-height:44px;border-bottom:3px solid transparent;color:var(--ink-2)}
html body .hc-tabs button:hover{color:var(--ink);background:var(--surface-2)}
html body .hc-tabs button.active{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}

/* Indicadores (KPI) */
html body .hc-metric,html body .pc-summary>div{border-radius:var(--r-lg);box-shadow:var(--sh-1);background:var(--surface);border:1px solid var(--sep)}
html body .hc-metric small{font:600 11px/1.35 var(--font-data);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
html body .hc-metric>strong{font:700 30px/1.1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:12px}
html body .hc-metric p{font-size:12px;color:var(--ink-2)}
html body .pc-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}
html body .pc-summary>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px 18px}
html body .pc-summary strong{font:700 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
html body .pc-summary span{font:600 11px/1.35 var(--font-data);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
@media (max-width:760px){html body .pc-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Painéis e tabelas: textos legíveis (mínimo 12px) */
html body .hc-panel{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
html body .hc-panel h2{font-family:var(--font-display)}
html body .hc-table{font-size:14px}
html body .hc-table th{font:600 11px/1.2 var(--font-text);letter-spacing:.045em;text-transform:uppercase}
html body .hc-table small{font-size:12px}
html body .hc-table tbody tr:hover td{background:var(--surface-2)}
html body .hc-table .btn{min-height:32px;padding:6px 12px;border-radius:10px;font-size:12px}
html body .hc-note{font-size:12px;border-left:3px solid var(--calm);background:var(--calm-soft)}
html body .hc-empty h3{font-family:var(--font-display);font-size:17px;color:var(--ink)}
html body .hc-empty p{font-size:13px}
html body .hc-empty-icon{background:var(--accent-soft)}
html body .hc-scope label,html body .hc-filters label{font-size:12px;font-weight:600}
html body .hc-footnote{font-size:12px;color:var(--ink-3)}
/* Legibilidade: botões com 13px e notas com no mínimo 12px (rótulos em eyebrow ficam com 11px) */
html body .hc-shell .btn,html body .pc-shell .btn{font-size:13px}
html body .hc-shell small,html body .pc-shell small,html body .pc-footer-note,html body .hc-hero-side small{font-size:12px}
html body .pc-shell dt,html body .hc-details dt{font-size:12px}

/* ==========================================================================
   Etapa 3 — Gestão operacional (mg-*, dl-*) e indicadores gerais (.stats)
   ========================================================================== */
/* Etiqueta "em andamento" (■, calm) para os módulos que usam .badge */
html body .badge.blue{background:var(--calm-soft);color:var(--calm)}
html body .badge.blue::before{border-radius:1px;transform:none}
html body .badge:not(.green):not(.orange):not(.red):not(.blue)::before{display:none}

/* Abas da gestão: sublinhado, uma linha que rola no celular (no lugar das pílulas) */
html body .mg-tabs{display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--sep);margin:0 0 22px}
html body .mg-tabs .btn,html body .mg-tabs .btn.primary{background:transparent;color:var(--ink-2);border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none;padding:12px 14px 10px;min-height:44px;font:600 14px/1.2 var(--font-text);white-space:nowrap;flex:none;grid-column:auto}
html body .mg-tabs .btn:hover{color:var(--ink);background:var(--surface-2)}
html body .mg-tabs .btn.primary{color:var(--accent);border-bottom-color:var(--accent)}
html body .mg-tabs .btn svg{width:18px;height:18px}

/* Seletor de visão (controle segmentado .cm-seg): não é botão primário */
html body .dl-view-switch{display:inline-flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--r-pill)}
html body .dl-view-switch .btn,html body .dl-view-switch .btn.primary{background:transparent;color:var(--ink-2);border:0;box-shadow:none;border-radius:var(--r-pill);min-height:36px;padding:7px 16px;font:600 13px/1.2 var(--font-text)}
html body .dl-view-switch .btn.primary{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* Indicadores (KPI): .stats geral e os indicadores-filtro dos prazos */
html body .stat,html body .dl-stats button{border:1px solid var(--sep);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
html body .stat-label,html body .dl-stats button span{font:600 11px/1.35 var(--font-data);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
html body .stat strong,html body .dl-stats button strong{font:700 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html body .stat small{font-size:12px;color:var(--ink-2)}
html body .stat .symbol{background:var(--accent-soft);color:var(--accent);border-radius:10px}
html body .dl-stats{display:grid}
html body .dl-stats button{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;transition:border-color var(--dur-2) var(--ease-standard)}
html body .dl-stats button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--sep))}
html body .dl-stats button.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
html body .dl-stats button span{margin:0}

/* Cartões da gestão */
html body .mg-card{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
html body .mg-card h3{font-family:var(--font-display);letter-spacing:-.015em}
html body .mg-card>p{font-size:13px;color:var(--ink-2)}
html body .mg-card footer .btn{font-size:13px}
html body .dl-category{font-size:12px}