/* =====================================================================
   Design system da Plataforma SGSI
   Conceito: painel de controle técnico, sóbrio e denso. Azul-petróleo como cor
   de marca, cores de risco separadas da marca, números e códigos em fonte mono.
   Toda cor sai de um token; os dois temas redefinem só os tokens.
   ===================================================================== */

/* ---------- Fontes (servidas pelo próprio sistema) ---------- */
@font-face{font-family:"Plex Sans";src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(../fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Condensed";src:url(../fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Condensed";src:url(../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Condensed";src:url(../fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens: tema claro ---------- */
:root{
  /* superfícies e texto */
  --bg:#F3F5F7; --superficie:#FFFFFF; --superficie-2:#EDF1F4; --superficie-3:#E2E8ED;
  --texto:#0E1B26; --texto-2:#384957; --apagado:#56666F; --linha:#D3DCE2; --linha-forte:#A9B7C1;
  /* marca */
  --marca:#0B5C68; --marca-forte:#08464F; --marca-suave:#DDEEF0; --sobre-marca:#FFFFFF;
  --lateral:#0C1F29; --lateral-texto:#C9D6DD; --lateral-apagado:#8DA2AD; --lateral-ativo:#163240; --lateral-marca:#5FC3CF;
  /* semânticas */
  --ok:#1D6534; --ok-suave:#DFF0E3; --aviso:#865100; --aviso-suave:#FAEDD3;
  --erro:#A3222A; --erro-suave:#F8E1E2; --info:#1C56A3; --info-suave:#E1EAF7;
  /* níveis de risco (fundo / texto) */
  --r1:#DCEEDF; --r1-t:#1C4F2D; --r2:#FAEEC4; --r2-t:#654A00; --r3:#F9D7BC; --r3-t:#76300C; --r4:#B21F2A; --r4-t:#FFFFFF;
  /* foco, sombra */
  --foco:#1C56A3; --sombra:0 1px 2px rgba(14,27,38,.06),0 8px 24px rgba(14,27,38,.10);
  --sombra-leve:0 1px 2px rgba(14,27,38,.06);
  /* tipografia */
  --f-texto:"Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-titulo:"Plex Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --t-11:.6875rem; --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-17:1.0625rem;
  --t-20:1.25rem; --t-24:1.5rem; --t-30:1.875rem; --t-38:2.375rem;
  /* espaços, raios, camadas, movimento */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e10:40px; --e12:48px;
  --raio-p:4px; --raio:6px; --raio-g:10px;
  --z-topo:20; --z-menu:30; --z-gaveta:40; --z-dialogo:50; --z-aviso:60;
  --rapido:120ms; --medio:200ms;
  --lateral-largura:248px;
  color-scheme:light;
}

/* ---------- Tokens: tema escuro (sistema ou escolha explícita) ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A131A; --superficie:#111D25; --superficie-2:#16252F; --superficie-3:#1E303B;
  --texto:#E2EAEF; --texto-2:#B6C4CD; --apagado:#93A5B0; --linha:#24353F; --linha-forte:#3A4F5D;
  --marca:#56B9C6; --marca-forte:#7FCFD9; --marca-suave:#0F333A; --sobre-marca:#04222A;
  --lateral:#071016; --lateral-texto:#C3D1D8; --lateral-apagado:#8598A3; --lateral-ativo:#13262F; --lateral-marca:#56B9C6;
  --ok:#6DCB87; --ok-suave:#123020; --aviso:#E7AF55; --aviso-suave:#33260E; --erro:#F18C90; --erro-suave:#3A191B; --info:#83B3EF; --info-suave:#13253D;
  --r1:#15331F; --r1-t:#9FE0B1; --r2:#3A3011; --r2-t:#F1D57C; --r3:#45260F; --r3-t:#F7B67F; --r4:#C2333B; --r4-t:#FFFFFF;
  --foco:#83B3EF; --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45); --sombra-leve:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A131A; --superficie:#111D25; --superficie-2:#16252F; --superficie-3:#1E303B;
  --texto:#E2EAEF; --texto-2:#B6C4CD; --apagado:#93A5B0; --linha:#24353F; --linha-forte:#3A4F5D;
  --marca:#56B9C6; --marca-forte:#7FCFD9; --marca-suave:#0F333A; --sobre-marca:#04222A;
  --lateral:#071016; --lateral-texto:#C3D1D8; --lateral-apagado:#8598A3; --lateral-ativo:#13262F; --lateral-marca:#56B9C6;
  --ok:#6DCB87; --ok-suave:#123020; --aviso:#E7AF55; --aviso-suave:#33260E; --erro:#F18C90; --erro-suave:#3A191B; --info:#83B3EF; --info-suave:#13253D;
  --r1:#15331F; --r1-t:#9FE0B1; --r2:#3A3011; --r2-t:#F1D57C; --r3:#45260F; --r3-t:#F7B67F; --r4:#C2333B; --r4-t:#FFFFFF;
  --foco:#83B3EF; --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45); --sombra-leve:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--f-texto);font-size:var(--t-15);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:600;line-height:1.2;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--t-30)} h2{font-size:var(--t-24)} h3{font-size:var(--t-20)} h4{font-size:var(--t-17)}
p{margin:0}
a{color:var(--marca);text-underline-offset:2px}
a:hover{color:var(--marca-forte)}
code,kbd,.mono{font-family:var(--f-mono);font-size:.9em}
kbd{display:inline-block;padding:0 6px;border:1px solid var(--linha-forte);border-bottom-width:2px;border-radius:var(--raio-p);font-size:var(--t-12);color:var(--texto-2);background:var(--superficie)}
img,svg{max-width:100%}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--raio-p)}
.so-leitor{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:absolute;left:var(--e4);top:-60px;z-index:var(--z-aviso);background:var(--marca);color:var(--sobre-marca);padding:var(--e2) var(--e4);border-radius:var(--raio)}
.pular:focus{top:var(--e4)}
.numeros{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}}

/* ---------- Estrutura do aplicativo ---------- */
.app{display:grid;grid-template-columns:var(--lateral-largura) minmax(0,1fr);min-height:100vh;background:linear-gradient(to right,var(--lateral) var(--lateral-largura),transparent 0)}
.lateral{background:var(--lateral);color:var(--lateral-texto);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--e4) var(--e3)}
.marca-sgsi{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) var(--e2) var(--e5);color:#FFFFFF;text-decoration:none}
.marca-sgsi:hover{color:#FFFFFF}
.marca-sgsi svg{flex:none}
.marca-sgsi b{font-family:var(--f-titulo);font-size:var(--t-17);font-weight:700;letter-spacing:.01em;display:block;line-height:1.1}
.marca-sgsi small{font-size:var(--t-11);color:var(--lateral-apagado);letter-spacing:.04em;text-transform:uppercase}
.org-troca{display:flex;align-items:center;gap:var(--e2);width:100%;margin-bottom:var(--e4);padding:var(--e2) var(--e3);border:1px solid #23404E;border-radius:var(--raio);background:transparent;color:var(--lateral-texto);font:inherit;font-size:var(--t-13);text-align:left;cursor:pointer}
.org-troca:hover{background:var(--lateral-ativo)}
.org-troca span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-grupo{margin-top:var(--e4)}
.nav-grupo>p{font-size:var(--t-11);letter-spacing:.08em;text-transform:uppercase;color:var(--lateral-apagado);padding:0 var(--e2) var(--e1);font-weight:600}
.nav a{display:flex;align-items:center;gap:var(--e3);padding:7px var(--e2);border-radius:var(--raio);color:var(--lateral-texto);text-decoration:none;font-size:var(--t-14)}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:var(--lateral-ativo);color:#FFFFFF}
.nav a[aria-current="page"]{background:var(--lateral-ativo);color:#FFFFFF;box-shadow:inset 3px 0 0 var(--lateral-marca)}
.nav a .contador{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-11);background:#23404E;color:#FFFFFF;border-radius:999px;padding:0 7px}
.nav a:focus-visible{outline-color:var(--lateral-marca)}
.lateral-rodape{margin-top:auto;padding-top:var(--e5);font-size:var(--t-12);color:var(--lateral-apagado)}

.principal{min-width:0;display:flex;flex-direction:column}
.topo{position:sticky;top:0;z-index:var(--z-topo);display:flex;align-items:center;gap:var(--e3);height:56px;padding:0 max(var(--e6),env(safe-area-inset-right,0px)) 0 var(--e6);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.topo .migalhas{flex:1;min-width:0}
.busca-gatilho{display:flex;align-items:center;gap:var(--e2);min-width:240px;height:36px;padding:0 var(--e3);border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie);color:var(--apagado);font:inherit;font-size:var(--t-14);cursor:pointer}
.busca-gatilho:hover{border-color:var(--linha-forte)}
.busca-gatilho kbd{margin-left:auto}
.icone-botao{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:var(--raio);background:transparent;color:var(--texto-2);cursor:pointer;position:relative}
.icone-botao:hover{background:var(--superficie-2);color:var(--texto)}
.icone-botao svg{width:20px;height:20px}
.icone-botao .ponto{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--erro);box-shadow:0 0 0 2px var(--bg)}
.menu-celular{display:none}
.conteudo{padding:var(--e6) max(var(--e6),env(safe-area-inset-right,0px)) var(--e12) max(var(--e6),env(safe-area-inset-left,0px));max-width:1440px;width:100%}

.cabecalho-pagina{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e4);margin-bottom:var(--e6)}
.cabecalho-pagina .rotulo{font-family:var(--f-mono);font-size:var(--t-12);color:var(--marca);letter-spacing:.03em}
.cabecalho-pagina p{color:var(--apagado);max-width:68ch;margin-top:var(--e1)}
.acoes-pagina{display:flex;flex-wrap:wrap;gap:var(--e2)}

/* ---------- Migalhas ---------- */
.migalhas ol{display:flex;flex-wrap:wrap;gap:var(--e2);list-style:none;margin:0;padding:0;font-size:var(--t-13);color:var(--apagado)}
.migalhas li+li::before{content:"/";margin-right:var(--e2);color:var(--linha-forte)}
.migalhas a{color:var(--apagado);text-decoration:none}
.migalhas a:hover{color:var(--texto);text-decoration:underline}
.migalhas [aria-current]{color:var(--texto);font-weight:500}

/* ---------- Grades ---------- */
.grade{display:grid;gap:var(--e4)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.c-3{grid-column:span 3} .c-4{grid-column:span 4} .c-5{grid-column:span 5} .c-6{grid-column:span 6} .c-7{grid-column:span 7} .c-8{grid-column:span 8} .c-12{grid-column:span 12}
.pilha{display:flex;flex-direction:column;gap:var(--e4)}
.linha-flex{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
.entre{justify-content:space-between}

/* ---------- Cartão ---------- */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-g);min-width:0}
.cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e4) var(--e5) 0}
.cartao-cab h2,.cartao-cab h3{font-size:var(--t-17)}
.cartao-cab .sub{font-size:var(--t-13);color:var(--apagado)}
.cartao-corpo{padding:var(--e4) var(--e5) var(--e5)}
.cartao-rodape{padding:var(--e3) var(--e5);border-top:1px solid var(--linha);font-size:var(--t-13);color:var(--apagado)}

/* ---------- Indicador (KPI) ---------- */
.kpi{padding:var(--e4) var(--e5);display:flex;flex-direction:column;gap:var(--e1)}
.kpi .nome{font-size:var(--t-13);color:var(--apagado);display:flex;align-items:center;gap:var(--e2)}
.kpi .valor{font-family:var(--f-titulo);font-size:var(--t-30);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .valor small{font-size:var(--t-17);color:var(--apagado);font-weight:500}
.kpi .rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);font-size:var(--t-12);color:var(--apagado);margin-top:var(--e1)}
.variacao{font-family:var(--f-mono);font-size:var(--t-12);font-weight:500}
.variacao.sobe{color:var(--ok)} .variacao.desce{color:var(--erro)} .variacao.neutra{color:var(--apagado)}
.kpi .mini{height:28px;width:96px}

/* ---------- Botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);height:36px;padding:0 var(--e4);border:1px solid transparent;border-radius:var(--raio);font:inherit;font-size:var(--t-14);font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--rapido),border-color var(--rapido),color var(--rapido)}
.botao svg{width:16px;height:16px;flex:none}
.botao-primario{background:var(--marca);color:var(--sobre-marca)}
.botao-primario:hover{background:var(--marca-forte);color:var(--sobre-marca)}
.botao-secundario{background:var(--superficie);color:var(--texto);border-color:var(--linha-forte)}
.botao-secundario:hover{background:var(--superficie-2);color:var(--texto)}
.botao-fantasma{background:transparent;color:var(--texto-2)}
.botao-fantasma:hover{background:var(--superficie-2);color:var(--texto)}
.botao-perigo{background:var(--erro);color:#FFFFFF}
:root[data-theme="dark"] .botao-perigo{color:#2A0B0D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .botao-perigo{color:#2A0B0D}}
.botao-perigo:hover{filter:brightness(.92)}
.botao-pequeno{height:30px;padding:0 var(--e3);font-size:var(--t-13)}
.botao-grande{height:44px;padding:0 var(--e5);font-size:var(--t-15)}
.botao:disabled,.botao[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.botao[aria-busy="true"]{color:transparent!important;position:relative;pointer-events:none}
.botao[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--sobre-marca);border-right-color:transparent;border-radius:50%;animation:girar .7s linear infinite}
.botao-secundario[aria-busy="true"]::after{border-color:var(--texto);border-right-color:transparent}
@keyframes girar{to{transform:rotate(360deg)}}
.grupo-botoes{display:inline-flex}
.grupo-botoes .botao{border-radius:0}
.grupo-botoes .botao:first-child{border-radius:var(--raio) 0 0 var(--raio)}
.grupo-botoes .botao:last-child{border-radius:0 var(--raio) var(--raio) 0}
.grupo-botoes .botao+.botao{margin-left:-1px}

/* ---------- Formulários ---------- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label,.campo>.rotulo{font-size:var(--t-13);font-weight:500;color:var(--texto-2)}
.campo .obrigatorio{color:var(--erro);margin-left:2px}
.entrada,select.entrada,textarea.entrada{width:100%;min-height:38px;padding:8px var(--e3);border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--superficie);color:var(--texto);font:inherit;font-size:var(--t-14);line-height:1.4}
textarea.entrada{min-height:96px;resize:vertical}
select.entrada{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--apagado) 50%),linear-gradient(135deg,var(--apagado) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.entrada::placeholder{color:var(--apagado);opacity:1}
.entrada:hover{border-color:var(--apagado)}
.entrada:focus-visible{outline:2px solid var(--foco);outline-offset:0;border-color:var(--foco)}
.campo .ajuda{font-size:var(--t-12);color:var(--apagado)}
.campo.com-erro .entrada{border-color:var(--erro)}
.campo .erro{font-size:var(--t-12);color:var(--erro);display:flex;gap:6px;align-items:flex-start}
.entrada-icone{position:relative}
.entrada-icone svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--apagado);pointer-events:none}
.entrada-icone .entrada{padding-left:34px}
.marcar{display:flex;align-items:flex-start;gap:var(--e2);font-size:var(--t-14);cursor:pointer}
.marcar input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--marca);flex:none}
.chave{position:relative;display:inline-flex;align-items:center;gap:var(--e3);cursor:pointer;font-size:var(--t-14)}
.chave input{appearance:none;width:38px;height:22px;margin:0;border-radius:999px;background:var(--linha-forte);transition:background var(--rapido);cursor:pointer;flex:none}
.chave input::before{content:"";display:block;width:16px;height:16px;margin:3px;border-radius:50%;background:#FFFFFF;transition:transform var(--rapido);box-shadow:var(--sombra-leve)}
.chave input:checked{background:var(--marca)}
.chave input:checked::before{transform:translateX(16px)}
.segmentado{display:inline-flex;padding:3px;gap:2px;background:var(--superficie-2);border-radius:var(--raio);border:1px solid var(--linha)}
.segmentado button{border:0;background:transparent;color:var(--texto-2);font:inherit;font-size:var(--t-13);padding:5px var(--e3);border-radius:var(--raio-p);cursor:pointer}
.segmentado button[aria-pressed="true"]{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-leve);font-weight:500}
.formulario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4) var(--e5)}
.formulario .inteiro{grid-column:1/-1}
.escala{display:flex;gap:6px}
.escala button{width:38px;height:38px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--superficie);color:var(--texto);font-family:var(--f-mono);font-size:var(--t-14);cursor:pointer}
.escala button[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}

/* ---------- Selos (estado e nível) ---------- */
.selo{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:var(--t-12);font-weight:500;line-height:1;white-space:nowrap;background:var(--superficie-3);color:var(--texto-2)}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.selo.sem-ponto::before{display:none}
.selo-ok{background:var(--ok-suave);color:var(--ok)} .selo-aviso{background:var(--aviso-suave);color:var(--aviso)}
.selo-erro{background:var(--erro-suave);color:var(--erro)} .selo-info{background:var(--info-suave);color:var(--info)}
.selo-marca{background:var(--marca-suave);color:var(--marca)}
.nivel{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 6px;border-radius:var(--raio-p);font-family:var(--f-mono);font-size:var(--t-12);font-weight:500}
.nivel-1{background:var(--r1);color:var(--r1-t)} .nivel-2{background:var(--r2);color:var(--r2-t)} .nivel-3{background:var(--r3);color:var(--r3-t)} .nivel-4{background:var(--r4);color:var(--r4-t)}
.codigo{font-family:var(--f-mono);font-size:var(--t-12);color:var(--texto-2);background:var(--superficie-2);border:1px solid var(--linha);border-radius:var(--raio-p);padding:1px 6px;white-space:nowrap}

/* ---------- Avatar ---------- */
.avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--marca-suave);color:var(--marca);font-size:var(--t-11);font-weight:600;flex:none}
.avatar-grande{width:36px;height:36px;font-size:var(--t-13)}
.avatares{display:flex}.avatares .avatar{box-shadow:0 0 0 2px var(--superficie)}.avatares .avatar+.avatar{margin-left:-6px}

/* ---------- Abas ---------- */
.abas{display:flex;gap:var(--e1);border-bottom:1px solid var(--linha);overflow-x:auto;scrollbar-width:none}
.abas [role="tab"]{border:0;background:transparent;font:inherit;font-size:var(--t-14);color:var(--apagado);padding:var(--e3) var(--e3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center}
.abas [role="tab"]:hover{color:var(--texto)}
.abas [role="tab"][aria-selected="true"]{color:var(--texto);border-bottom-color:var(--marca);font-weight:500}
.abas .contagem{font-family:var(--f-mono);font-size:var(--t-11);background:var(--superficie-3);border-radius:999px;padding:0 6px;color:var(--texto-2)}
[role="tabpanel"]{padding-top:var(--e4)}

/* ---------- Tabela de dados ---------- */
.barra-tabela{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);padding:var(--e3) var(--e4);border-bottom:1px solid var(--linha)}
.barra-tabela .entrada-icone{flex:1 1 220px;max-width:340px}
.filtro{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--e3);border:1px dashed var(--linha-forte);border-radius:999px;background:transparent;color:var(--texto-2);font:inherit;font-size:var(--t-13);cursor:pointer}
.filtro[aria-pressed="true"]{border-style:solid;border-color:var(--marca);background:var(--marca-suave);color:var(--marca)}
.filtro .contagem{font-family:var(--f-mono);font-size:var(--t-11)}
.rolar-tabela{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-14)}
.tabela th{position:sticky;top:0;background:var(--superficie-2);text-align:left;font-weight:500;font-size:var(--t-12);letter-spacing:.03em;text-transform:uppercase;color:var(--apagado);padding:var(--e2) var(--e4);border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.tabela th button:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.tabela th[aria-sort] button::after{content:"↕";font-size:10px;opacity:.5}
.tabela th[aria-sort="ascending"] button::after{content:"↑";opacity:1}
.tabela th[aria-sort="descending"] button::after{content:"↓";opacity:1}
.tabela td{padding:10px var(--e4);border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tbody tr:hover{background:var(--superficie-2)}
.tabela tbody tr[aria-selected="true"]{background:var(--marca-suave)}
.tabela .titulo-linha{font-weight:500;color:var(--texto)}
.tabela .titulo-linha a{color:inherit;text-decoration:none}
.tabela .titulo-linha a:hover{text-decoration:underline}
.tabela .sub-linha{font-size:var(--t-12);color:var(--apagado)}
.tabela td.num,.tabela th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabela .col-marcar{width:40px}
.tabela input[type=checkbox]{width:16px;height:16px;accent-color:var(--marca)}
.rodape-tabela{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--e4);font-size:var(--t-13);color:var(--apagado)}
.paginacao{display:flex;gap:var(--e1)}
.paginacao a,.paginacao span{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:var(--raio-p);color:var(--texto-2);text-decoration:none;font-family:var(--f-mono);font-size:var(--t-12)}
.paginacao a:hover{background:var(--superficie-2)}
.paginacao [aria-current]{background:var(--marca);color:var(--sobre-marca)}
.selecao-barra{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) var(--e4);background:var(--marca-suave);color:var(--marca);font-size:var(--t-13);font-weight:500;border-bottom:1px solid var(--linha)}

/* ---------- Barra de progresso e anel ---------- */
.progresso{height:6px;border-radius:999px;background:var(--superficie-3);overflow:hidden;min-width:60px}
.progresso>span{display:block;height:100%;border-radius:inherit;background:var(--marca)}
.progresso.p-ok>span{background:var(--ok)} .progresso.p-aviso>span{background:var(--aviso)} .progresso.p-erro>span{background:var(--erro)}
.anel{--v:0;--cor:var(--marca);position:relative;display:inline-grid;place-items:center;width:var(--tam,120px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--cor) calc(var(--v)*1%),var(--superficie-3) 0)}
.anel::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--superficie)}
.anel>div{position:relative;text-align:center}
.anel strong{display:block;font-family:var(--f-titulo);font-size:var(--t-30);line-height:1;font-variant-numeric:tabular-nums}
.anel small{font-size:var(--t-12);color:var(--apagado)}

/* ---------- Avisos na página (banner) e avisos flutuantes (toast) ---------- */
.alerta{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3) var(--e4);border-radius:var(--raio);border:1px solid;font-size:var(--t-14)}
.alerta svg{width:18px;height:18px;flex:none;margin-top:2px}
.alerta strong{display:block;margin-bottom:2px}
.alerta-info{background:var(--info-suave);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--texto)}
.alerta-info svg{color:var(--info)}
.alerta-aviso{background:var(--aviso-suave);border-color:color-mix(in srgb,var(--aviso) 35%,transparent);color:var(--texto)}
.alerta-aviso svg{color:var(--aviso)}
.alerta-erro{background:var(--erro-suave);border-color:color-mix(in srgb,var(--erro) 35%,transparent);color:var(--texto)}
.alerta-erro svg{color:var(--erro)}
.alerta-ok{background:var(--ok-suave);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--texto)}
.alerta-ok svg{color:var(--ok)}
.avisos{position:fixed;right:max(var(--e5),env(safe-area-inset-right,0px));bottom:max(var(--e5),env(safe-area-inset-bottom,0px));z-index:var(--z-aviso);display:flex;flex-direction:column;gap:var(--e2);max-width:min(380px,calc(100vw - 32px))}
.aviso{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3) var(--e4);background:var(--texto);color:var(--bg);border-radius:var(--raio);box-shadow:var(--sombra);font-size:var(--t-14);animation:entrar var(--medio) ease-out}
.aviso button{all:unset;cursor:pointer;margin-left:auto;opacity:.75;padding:0 2px}
.aviso button:focus-visible{outline:2px solid var(--bg)}
@keyframes entrar{from{transform:translateY(8px);opacity:0}}

/* ---------- Estados: vazio, carregando, erro ---------- */
.estado{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e3);padding:var(--e10) var(--e6)}
.estado svg{width:44px;height:44px;color:var(--apagado)}
.estado h3{font-size:var(--t-17)}
.estado p{color:var(--apagado);max-width:46ch;font-size:var(--t-14)}
.estado.erro svg{color:var(--erro)}
.esqueleto{display:block;border-radius:var(--raio-p);background:linear-gradient(90deg,var(--superficie-2),var(--superficie-3),var(--superficie-2));background-size:200% 100%;animation:brilho 1.4s ease-in-out infinite}
@keyframes brilho{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Menu suspenso, dica e "como foi calculado" ---------- */
.suspenso{position:relative;display:inline-block}
.menu-suspenso{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-menu);min-width:220px;padding:var(--e1);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra)}
.menu-suspenso [role="menuitem"],.menu-suspenso a{display:flex;align-items:center;gap:var(--e2);width:100%;padding:8px var(--e3);border:0;border-radius:var(--raio-p);background:transparent;color:var(--texto);font:inherit;font-size:var(--t-14);text-align:left;text-decoration:none;cursor:pointer}
.menu-suspenso [role="menuitem"]:hover,.menu-suspenso [role="menuitem"]:focus{background:var(--superficie-2);outline:none}
.menu-suspenso hr{border:0;border-top:1px solid var(--linha);margin:var(--e1) 0}
.calculo{position:relative;display:inline-block}
.calculo>summary{list-style:none;cursor:pointer;font-size:var(--t-12);color:var(--marca);display:inline-flex;align-items:center;gap:4px}
.calculo>summary::-webkit-details-marker{display:none}
.calculo>div{position:absolute;z-index:var(--z-menu);left:0;top:calc(100% + 6px);width:min(340px,80vw);padding:var(--e4);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);font-size:var(--t-13);color:var(--texto-2)}
.calculo table{width:100%;border-collapse:collapse;margin-top:var(--e2);font-size:var(--t-12)}
.calculo td{padding:3px 0;border-bottom:1px solid var(--linha)}
.calculo td:last-child{text-align:right;font-family:var(--f-mono)}
.calculo .obs{margin-top:var(--e2);font-size:var(--t-11);color:var(--apagado)}

/* ---------- Diálogo, gaveta e busca global ---------- */
dialog.dialogo{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--superficie);color:var(--texto);box-shadow:var(--sombra)}
dialog.dialogo::backdrop{background:rgba(6,14,20,.55)}
.dialogo-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e4) var(--e5);border-bottom:1px solid var(--linha)}
.dialogo-cab h2{font-size:var(--t-20)}
.dialogo-corpo{padding:var(--e5);overflow-y:auto}
.dialogo-rodape{display:flex;justify-content:flex-end;gap:var(--e2);padding:var(--e4) var(--e5);border-top:1px solid var(--linha);background:var(--superficie-2);border-radius:0 0 var(--raio-g) var(--raio-g)}
dialog.gaveta{margin:0 0 0 auto;height:100vh;max-height:none;width:min(520px,100vw);border-radius:0;border-width:0 0 0 1px}
dialog.busca{width:min(620px,calc(100vw - 32px));margin-top:12vh;padding:0;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--superficie);color:var(--texto);box-shadow:var(--sombra)}
dialog.busca::backdrop{background:rgba(6,14,20,.55)}
.busca-entrada{display:flex;align-items:center;gap:var(--e3);padding:0 var(--e4);border-bottom:1px solid var(--linha)}
.busca-entrada svg{width:18px;height:18px;color:var(--apagado)}
.busca-entrada input{flex:1;height:52px;border:0;background:transparent;color:var(--texto);font:inherit;font-size:var(--t-17)}
.busca-entrada input:focus{outline:none}
.busca-lista{list-style:none;margin:0;padding:var(--e2);max-height:50vh;overflow-y:auto}
.busca-lista li{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) var(--e3);border-radius:var(--raio-p);cursor:pointer;font-size:var(--t-14)}
.busca-lista li[aria-selected="true"]{background:var(--marca-suave)}
.busca-lista .tipo{margin-left:auto;font-size:var(--t-12);color:var(--apagado)}
.busca-lista .grupo{font-size:var(--t-11);letter-spacing:.06em;text-transform:uppercase;color:var(--apagado);padding:var(--e3) var(--e3) var(--e1);cursor:default}
.busca-rodape{display:flex;gap:var(--e4);padding:var(--e2) var(--e4);border-top:1px solid var(--linha);font-size:var(--t-12);color:var(--apagado)}

/* ---------- Passos (assistente) ---------- */
.passos{display:flex;gap:var(--e2);list-style:none;margin:0;padding:0;counter-reset:passo}
.passos li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:var(--t-13);color:var(--apagado);counter-increment:passo}
.passos li::before{content:"";height:4px;border-radius:999px;background:var(--superficie-3)}
.passos li[data-estado="feito"]::before,.passos li[data-estado="atual"]::before{background:var(--marca)}
.passos li[data-estado="atual"]{color:var(--texto);font-weight:500}

/* ---------- Matriz de risco 5 × 5 ---------- */
.matriz{display:grid;grid-template-columns:auto repeat(5,minmax(44px,1fr));grid-template-rows:repeat(5,minmax(44px,1fr)) auto;gap:4px;max-width:420px}
.matriz .eixo{display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--t-12);color:var(--apagado);padding:0 6px}
.matriz [role="gridcell"]{display:grid;place-items:center;border-radius:var(--raio-p);border:2px solid transparent;font-family:var(--f-mono);font-size:var(--t-14);font-weight:500;cursor:pointer;aspect-ratio:1.15;position:relative}
.matriz [role="gridcell"] .qtd{font-size:var(--t-17)}
.matriz [role="gridcell"][data-qtd="0"] .qtd{opacity:.35;font-size:var(--t-12)}
.matriz [role="gridcell"]:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.matriz [role="gridcell"][aria-selected="true"]{border-color:var(--texto)}
.matriz-titulo{display:flex;justify-content:space-between;font-size:var(--t-12);color:var(--apagado);max-width:420px;margin-top:var(--e2)}
.legenda{display:flex;flex-wrap:wrap;gap:var(--e3);font-size:var(--t-12);color:var(--texto-2)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ---------- Kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:var(--e3);overflow-x:auto;padding-bottom:var(--e2);align-items:start}
.coluna{background:var(--superficie-2);border:1px solid var(--linha);border-radius:var(--raio-g);display:flex;flex-direction:column;min-height:240px}
.coluna-cab{display:flex;align-items:center;justify-content:space-between;padding:var(--e3) var(--e4);font-size:var(--t-14);font-weight:500}
.coluna-cab .contagem{font-family:var(--f-mono);font-size:var(--t-12);color:var(--apagado)}
.coluna-lista{list-style:none;margin:0;padding:0 var(--e2) var(--e2);display:flex;flex-direction:column;gap:var(--e2);flex:1;min-height:60px;border-radius:var(--raio)}
.coluna-lista.alvo{background:var(--marca-suave);outline:2px dashed var(--marca);outline-offset:-2px}
.cartao-acao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e3);display:flex;flex-direction:column;gap:var(--e2);cursor:grab;box-shadow:var(--sombra-leve)}
.cartao-acao:active{cursor:grabbing}
.cartao-acao.arrastando{opacity:.5}
.cartao-acao h3,.cartao-acao h4{font-family:var(--f-texto);font-size:var(--t-14);font-weight:500;line-height:1.35}
.cartao-acao .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--t-12);color:var(--apagado)}
.cartao-acao .prazo.atrasado{color:var(--erro);font-weight:500}
.cartao-acao .mover{display:flex;gap:4px;margin-left:auto}
.cartao-acao .mover button{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--raio-p);color:var(--apagado)}
.cartao-acao .mover button:hover{background:var(--superficie-2);color:var(--texto)}
.cartao-acao .mover button:focus-visible{outline:2px solid var(--foco)}
.cartao-acao .mover button:disabled{opacity:.3;cursor:default}
.cartao-acao .mover svg{width:14px;height:14px}

/* ---------- Gráficos (SVG desenhado pelo sgsi.js) ---------- */
.grafico{width:100%;display:block}
.grafico text{fill:var(--apagado);font-family:var(--f-mono);font-size:11px}
.grafico .grade-linha{stroke:var(--linha);stroke-width:1}
.grafico .eixo-linha{stroke:var(--linha-forte);stroke-width:1}
.grafico .serie{fill:none;stroke:var(--marca);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.grafico .area{fill:var(--marca);opacity:.12}
.grafico .ponto-final{fill:var(--marca);stroke:var(--superficie);stroke-width:2}
.grafico .barra{fill:var(--marca)}
.grafico .barra.fraca{fill:var(--linha-forte)}
.grafico .meta{stroke:var(--aviso);stroke-width:1.5;stroke-dasharray:4 3}
.grafico .rotulo-valor{fill:var(--texto);font-weight:500}
.mini .serie{stroke-width:1.75}

/* ---------- Lista de atividades ---------- */
.atividades{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.atividades li{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--linha);font-size:var(--t-14)}
.atividades li:last-child{border-bottom:0}
.atividades .quando{font-size:var(--t-12);color:var(--apagado);white-space:nowrap;margin-left:auto}
.lista-simples{list-style:none;margin:0;padding:0}
.lista-simples li{display:flex;align-items:center;gap:var(--e3);padding:10px 0;border-bottom:1px solid var(--linha);font-size:var(--t-14)}
.lista-simples li:last-child{border-bottom:0}

/* ---------- Tela de entrada (login) ---------- */
.entrar{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.entrar-lado{background:var(--lateral);color:var(--lateral-texto);padding:var(--e10) max(var(--e10),env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between;gap:var(--e8)}
.entrar-lado h1{color:#FFFFFF;font-size:var(--t-38);max-width:16ch}
.entrar-lado p{color:var(--lateral-texto);max-width:44ch}
.entrar-lado .fatos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);border-top:1px solid #23404E;padding-top:var(--e5)}
.entrar-lado .fatos strong{display:block;font-family:var(--f-titulo);font-size:var(--t-24);color:#FFFFFF}
.entrar-lado .fatos span{font-size:var(--t-12);color:var(--lateral-apagado)}
.entrar-form{display:grid;place-items:center;padding:var(--e8) max(var(--e6),env(safe-area-inset-right,0px)) var(--e8) var(--e6)}
.entrar-form form{width:min(380px,100%);display:flex;flex-direction:column;gap:var(--e4)}
.codigo-2fa{display:flex;gap:var(--e2)}
.codigo-2fa input{width:46px;height:54px;text-align:center;font-family:var(--f-mono);font-size:var(--t-24);border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--superficie);color:var(--texto)}
.codigo-2fa input:focus-visible{outline:2px solid var(--foco);outline-offset:0;border-color:var(--foco)}

/* ---------- Página do design system ---------- */
.ds-amostras{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e3)}
.ds-amostra{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--superficie);font-size:var(--t-12)}
.ds-amostra div{height:56px}
.ds-amostra p{padding:var(--e2) var(--e3);display:flex;justify-content:space-between;gap:var(--e2)}
.ds-amostra code{color:var(--apagado)}
.ds-secao{scroll-margin-top:72px}
.ds-tipo{display:flex;align-items:baseline;gap:var(--e5);padding:var(--e3) 0;border-bottom:1px solid var(--linha)}
.ds-tipo code{width:120px;flex:none;color:var(--apagado)}

/* ---------- Responsivo ---------- */
@media (max-width:1180px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.c-3,.c-4,.c-5,.c-7,.c-8{grid-column:span 12}.c-6{grid-column:span 12}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);background:none}
  .lateral{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:var(--z-gaveta);transform:translateX(-100%);transition:transform var(--medio);padding-left:max(var(--e3),env(safe-area-inset-left,0px));box-shadow:var(--sombra)}
  .app.menu-aberto .lateral{transform:none}
  .app.menu-aberto::after{content:"";position:fixed;inset:0;background:rgba(6,14,20,.5);z-index:calc(var(--z-gaveta) - 1)}
  .menu-celular{display:inline-grid}
  .topo{padding:0 max(var(--e4),env(safe-area-inset-right,0px)) 0 max(var(--e4),env(safe-area-inset-left,0px))}
  .busca-gatilho{min-width:0;width:36px;padding:0;justify-content:center}
  .busca-gatilho span,.busca-gatilho kbd{display:none}
  .topo .migalhas{display:none}
  .conteudo{padding:var(--e5) max(var(--e4),env(safe-area-inset-right,0px)) var(--e10) max(var(--e4),env(safe-area-inset-left,0px))}
  .entrar{grid-template-columns:minmax(0,1fr)}
  .entrar-lado{padding:var(--e8) max(var(--e5),env(safe-area-inset-right,0px)) var(--e8) max(var(--e5),env(safe-area-inset-left,0px))}
  .entrar-lado h1{font-size:var(--t-30)}
  .formulario{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  h1{font-size:var(--t-24)}
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .kpi .valor{font-size:var(--t-24)}
  /* tabela vira cartões empilhados */
  .tabela.empilha thead{display:none}
  .tabela.empilha,.tabela.empilha tbody,.tabela.empilha tr,.tabela.empilha td{display:block;width:100%}
  .tabela.empilha tr{padding:var(--e3) var(--e4);border-bottom:1px solid var(--linha)}
  .tabela.empilha td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:var(--e3);text-align:right}
  .tabela.empilha td::before{content:attr(data-rotulo);color:var(--apagado);font-size:var(--t-12);text-align:left}
  .tabela.empilha td.col-marcar,.tabela.empilha td.titulo-celula{display:block;text-align:left}
  .tabela.empilha td.titulo-celula::before,.tabela.empilha td.col-marcar::before{display:none}
  .kanban{grid-template-columns:repeat(4,minmax(260px,86vw));scroll-snap-type:x mandatory}
  .coluna{scroll-snap-align:start}
  .entrar-lado .fatos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .codigo-2fa input{width:40px;height:50px}
}

/* Alvos de toque de pelo menos 24 × 24 px (WCAG 2.2, critério 2.5.8) */
.tabela th button{min-height:24px;padding:2px 0}
.aviso button{display:inline-grid;place-items:center;min-width:24px;min-height:24px}
.kpi .rodape a,.entrar-form a,.cartao-cab a:not(.botao){display:inline-flex;align-items:center;min-height:24px}
.tabela .titulo-linha a{display:inline-flex;align-items:center;min-height:24px}
.tabela td .linha-flex{flex-wrap:nowrap;white-space:nowrap}
.entrar-lado{border-right:1px solid var(--linha)}
.nav a .contador{white-space:nowrap}
.org-troca{text-decoration:none}
@media (max-width:900px){.topo .busca-gatilho{margin-left:auto}}
.lista-simples a{display:inline-flex;align-items:center;min-height:24px}

/* ---------- Etapa 4c: abas de navegação (links), níveis 0–5 e perguntas do diagnóstico ---------- */
.abas>a{font-size:var(--t-14);color:var(--apagado);padding:var(--e3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:6px;align-items:center;text-decoration:none}
.abas>a:hover{color:var(--texto)}
.abas>a[aria-current="page"]{color:var(--texto);border-bottom-color:var(--marca);font-weight:500}
.niveis{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.niveis legend{font-size:var(--t-13);font-weight:500;margin-bottom:6px}
.niveis label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px var(--e3);border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--superficie);font-size:var(--t-13);cursor:pointer}
.niveis label b{font-family:var(--f-mono)}
.niveis input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.niveis label:has(input:checked){background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.niveis label:has(input:focus-visible){outline:2px solid var(--foco,var(--marca));outline-offset:2px}
.niveis .na:has(input:checked){background:var(--superficie-3);border-color:var(--linha-forte);color:var(--texto)}
.pergunta{padding:var(--e5);border-bottom:1px solid var(--linha);display:grid;gap:var(--e3)}
.pergunta:last-child{border-bottom:0}
.pergunta.com-erro{background:color-mix(in srgb,var(--erro) 6%,transparent)}
.pergunta h3{font-size:var(--t-16);display:flex;gap:var(--e2);align-items:baseline;flex-wrap:wrap}
.pergunta .texto{color:var(--texto-2);font-size:var(--t-14)}
.pergunta details summary{cursor:pointer;color:var(--marca);font-size:var(--t-13)}
.pergunta details p{font-size:var(--t-13);color:var(--texto-2);margin-top:6px}
.barras-h{display:grid;gap:var(--e3)}
.barras-h>div{display:grid;grid-template-columns:minmax(120px,190px) 1fr 64px;gap:var(--e3);align-items:center;font-size:var(--t-13)}
.barras-h b{text-align:right;font-family:var(--f-mono);font-weight:500}
.barras-h .progresso{height:10px}
.barras-h .antes{display:block;font-size:var(--t-11);color:var(--apagado)}
@media (max-width:640px){.barras-h>div{grid-template-columns:1fr 56px}.barras-h .progresso{grid-column:1/-1;grid-row:2}}
.rotulo a{display:inline-flex;align-items:center;min-height:24px}
.lista-simples.cartao-corpo,.atividades.cartao-corpo{padding-left:var(--e5);padding-right:var(--e5)}
.pergunta h3 a{display:inline-flex;align-items:center;min-height:24px}

/* Etapa 4g: planos de ação */
.segmentado a{display:inline-flex;align-items:center;min-height:28px;color:var(--texto-2);text-decoration:none;font-size:var(--t-13);padding:3px var(--e3);border-radius:var(--raio-p)}
.segmentado a[aria-current]{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-leve);font-weight:500}
.cartao-acao h3 a,.cartao-acao h4 a{color:inherit;text-decoration:none;display:inline-block;min-height:24px}
.cartao-acao h3 a:hover{text-decoration:underline}
.cartao-acao[data-travado]{cursor:default}
.linha-tempo{list-style:none;margin:0;padding:0 var(--e4) var(--e4);display:flex;flex-direction:column;gap:var(--e3)}
.linha-tempo li{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);font-size:var(--t-14)}
.linha-tempo .marco{width:10px;height:10px;border-radius:50%;background:var(--linha-forte);margin-top:6px}
.linha-tempo .marco.m-ok{background:var(--ok)} .linha-tempo .marco.m-erro{background:var(--erro)} .linha-tempo .marco.m-aviso{background:var(--aviso)} .linha-tempo .marco.m-info{background:var(--marca)}
.linha-tempo small{color:var(--apagado);font-size:var(--t-12)}
.sub-linha a{display:inline-flex;align-items:center;min-height:24px}
.atividades a{display:inline-flex;align-items:center;gap:4px;min-height:24px}
.texto-documento{line-height:1.6;max-width:72ch}.texto-documento h3{font-size:var(--t-17);margin:var(--e4) 0 var(--e2)}.texto-documento h4{font-size:var(--t-15,15px);margin:var(--e3) 0 var(--e1,4px)}.texto-documento p{margin:0 0 var(--e3)}.texto-documento ul{margin:0 0 var(--e3);padding-left:1.4em}
dd a{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px}
/* links dentro de avisos, listas de atividades e células: alvo de toque de 24 px */
.alerta a,.atividades a,.titulo-celula > a,.tabela td > a,.cartao-corpo small a{display:inline-flex;align-items:center;min-height:24px}

/* ---------- Guia de Implementação ---------- */
.guia-hero{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e6);align-items:center;padding:var(--e6);border-radius:var(--raio-g);
  background:linear-gradient(135deg,#0B1820 0%,#0B5C68 100%);color:#FFFFFF;margin-bottom:var(--e5);position:relative;overflow:hidden}
.guia-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:28px solid rgba(127,207,217,.14)}
.guia-hero-texto{position:relative;z-index:1}
.guia-hero h2{color:#FFFFFF;font-size:var(--t-24);margin-top:var(--e2)}.guia-hero p{color:#D3E6EA;max-width:62ch}
.guia-hero .anel{background:conic-gradient(#7FCFD9 calc(var(--v)*1%),rgba(255,255,255,.16) 0)}
.guia-hero .anel::before{background:#0C2A33}
.guia-hero .anel>div,.guia-hero .anel strong{color:#FFFFFF}
.guia-hero .anel small{color:#D3E6EA}
.guia-hero .fatos{display:grid;gap:var(--e2);font-size:var(--t-13);position:relative;z-index:1}
.guia-hero .fatos b{display:block;font-size:var(--t-17);color:#FFFFFF}
.guia-hero .fatos span{color:#D3E6EA}
.guia-selo{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(127,207,217,.18);color:#E4F4F6;font-size:var(--t-12)}
.guia-proxima{border:1px solid color-mix(in srgb,var(--marca) 45%,var(--linha));background:color-mix(in srgb,var(--marca) 6%,var(--superficie));border-radius:var(--raio-g);padding:var(--e4) var(--e5);display:flex;gap:var(--e4);align-items:flex-start;margin-bottom:var(--e5)}
.guia-proxima .icone-grande{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--marca);color:var(--sobre-marca)}
.guia-trilho{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin-bottom:var(--e5)}
.guia-trilho a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--texto-2);font-size:var(--t-11);min-width:0;min-height:24px}
.guia-trilho a i{height:8px;border-radius:999px;background:var(--superficie-3)}
.guia-trilho a.concluida i{background:var(--ok)}.guia-trilho a.andamento i{background:linear-gradient(90deg,var(--marca) var(--p,0%),var(--superficie-3) 0)}
.guia-trilho a.atual{color:var(--texto);font-weight:600}
.guia-trilho a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fase{margin-bottom:var(--e4)}
.fase-cab{display:flex;gap:var(--e4);align-items:center;cursor:pointer;list-style:none;padding:var(--e4) var(--e5)}
.fase-cab::-webkit-details-marker{display:none}
.fase-num{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;background:var(--superficie-3);color:var(--texto)}
.fase.concluida .fase-num{background:var(--ok);color:var(--superficie)}.fase.atual .fase-num{background:var(--marca);color:var(--sobre-marca)}
.fase-cab h2{font-size:var(--t-17)}.fase-cab .sub{font-size:var(--t-13);color:var(--apagado)}
.fase-cab .direita{margin-left:auto;display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;justify-content:flex-end}
.tarefa{display:grid;grid-template-columns:28px 1fr auto;gap:var(--e3);padding:var(--e4) var(--e5);border-top:1px solid var(--linha);align-items:start}
.tarefa .marca-t{width:24px;height:24px;border-radius:50%;border:2px solid var(--linha-forte);display:grid;place-items:center;color:var(--superficie);margin-top:2px}
.tarefa.concluida .marca-t{background:var(--ok);border-color:var(--ok)}
.tarefa h3{font-size:var(--t-14);font-weight:600;display:flex;gap:var(--e2);align-items:baseline;flex-wrap:wrap;font-family:inherit}
.tarefa .porque{font-size:var(--t-13);color:var(--texto-2);margin-top:2px}
.tarefa .conf{font-size:var(--t-12);margin-top:6px;display:inline-flex;gap:6px;align-items:center;color:var(--apagado)}
.tarefa .conf.ok{color:var(--ok)}
.tarefa details summary{cursor:pointer;color:var(--marca);font-size:var(--t-13);margin-top:6px;min-height:24px;display:inline-flex;align-items:center}
.tarefa form{margin-top:var(--e3)}
@media (max-width:900px){.guia-hero{grid-template-columns:1fr}.guia-trilho{grid-template-columns:repeat(6,minmax(0,1fr))}.tarefa{grid-template-columns:28px 1fr}.tarefa>.acao{grid-column:2}}
@media (max-width:640px){.guia-proxima{flex-wrap:wrap}.guia-proxima>div{flex-basis:calc(100% - 56px)}.guia-proxima>.botao{width:100%;justify-content:center}
  .fase-cab{flex-wrap:wrap}.fase-cab>div{flex:1 1 calc(100% - 56px)}.fase-cab .direita{margin-left:54px;justify-content:flex-start}.guia-trilho{grid-template-columns:repeat(4,minmax(0,1fr))}}