/* GOKEI · CTO — sistema visual
   Linguagem: sóbria, institucional, densa sem ser apertada. Marinho profundo +
   dourado discreto como acento de marca; cor forte só para estado e criticidade. */
:root {
  --marinho-950: #071631; --marinho-900: #0a1f44; --marinho-800: #10295a; --marinho-700: #183872; --marinho-600: #22478c;
  --azul: #1f4fd1; --azul-escuro: #173fae; --azul-claro: #e9effd; --azul-borda: #c7d5f8;
  --ouro: #b8913f; --ouro-claro: #f6efdf;
  --fundo: #f3f5f9; --superficie: #ffffff; --superficie-2: #f8f9fc; --borda: #e2e7ef; --borda-forte: #cdd5e1;
  --texto: #0f1b2d; --texto-2: #3b4a5f; --suave: #66758a; --apagado: #94a1b3;
  --ok: #157347; --ok-f: #e6f4ec; --alerta: #9a6b00; --alerta-f: #fdf4dc; --erro: #b42318; --erro-f: #fdeceb;
  --sev1: #c0262d; --sev1-f: #fdecec; --sev2: #c85a12; --sev2-f: #fdf0e6; --sev3: #9a7200; --sev3-f: #fcf6df; --sev4: #2c64d6; --sev4-f: #ebf1fd;
  --raio: 12px; --raio-p: 8px;
  --sombra-1: 0 1px 2px rgba(15, 27, 45, .05);
  --sombra-2: 0 1px 3px rgba(15, 27, 45, .06), 0 6px 16px -8px rgba(15, 27, 45, .10);
  --sombra-3: 0 24px 64px -16px rgba(7, 22, 49, .35);
  --fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  --lateral: 252px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 13.5px/1.55 var(--fonte); background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.015em; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 650; letter-spacing: -.005em; }
h3 { font-size: 13.5px; margin: 18px 0 10px; font-weight: 650; }
p { margin: 0 0 10px; }
small, .suave { color: var(--suave); }
code { font: 12px var(--mono); background: var(--superficie-2); border: 1px solid var(--borda); padding: 1px 5px; border-radius: 5px; color: var(--texto-2); }
::selection { background: #cfdcfb; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ------------------------------------------------------------ casca */
.casca { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.casca.sem-menu { grid-template-columns: 1fr; }
.lateral { background: linear-gradient(180deg, var(--marinho-900), var(--marinho-950)); color: #c9d4e8; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; }
.marca { display: flex; gap: 11px; align-items: center; padding: 4px 8px 20px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: var(--marinho-900);
  background: linear-gradient(135deg, #f3e3b8, var(--ouro)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.25); }
.marca strong { display: block; color: #fff; font-size: 15px; letter-spacing: .08em; }
.marca small { display: block; color: #8ea0bf; font-size: 11px; line-height: 1.3; }
.logo-img { display: block; height: 26px; width: auto; flex: none; }
.marca { flex-direction: column; align-items: flex-start; gap: 8px; }
.entrada .vitrine .logo-img { height: 34px; }
.acoes-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.botao.ficha { border-color: var(--ouro); color: var(--marinho-900); background: linear-gradient(180deg, #fffaf0, #f6ecd4); font-weight: 600; }
.botao.ficha:hover { background: #f3e3b8; }
.botao.ficha svg { color: #9a7a2c; }
.nav-grupo { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6f82a3; margin: 14px 10px 6px; font-weight: 600; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 11px; color: #c9d4e8; padding: 9px 10px; border-radius: 8px; font-weight: 500; position: relative; }
.lateral nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.lateral nav a.ativo { background: rgba(255,255,255,.10); color: #fff; }
.lateral nav a.ativo::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ouro); }
.lateral nav svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.rodape-lateral { margin-top: auto; padding: 14px 10px 2px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: #7487a8; line-height: 1.5; }
.rodape-lateral .ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ccf8e; margin-right: 6px; box-shadow: 0 0 0 3px rgba(60,207,142,.18); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; }
.trilha { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; }
.trilha a { color: var(--suave); } .trilha a:hover { color: var(--texto); }
.trilha strong { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.trilha svg { width: 14px; height: 14px; color: var(--apagado); flex: none; }
.usuario { display: flex; align-items: center; gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--marinho-600), var(--marinho-800)); flex: none; }
.usuario .quem { line-height: 1.2; text-align: right; }
.usuario .quem strong { display: block; font-size: 13px; }
.usuario .quem small { font-size: 11px; letter-spacing: .04em; }
.conteudo { width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 72px; }

/* ------------------------------------------------------------ cabeçalhos e cartões */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.conteudo > .cabecalho { margin-bottom: 22px; }
.conteudo > .cabecalho h1 + p, .conteudo > .cabecalho p.suave { margin: 6px 0 0; max-width: 760px; }
.sobrelinha { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); margin-bottom: 6px; display: block; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra-1); margin-bottom: 18px; }
.cartao > h2:first-child, .cartao > .cabecalho:first-child { margin-top: 0; }
.cartao .cabecalho { margin-bottom: 14px; }
.cartao .cabecalho p { margin: 4px 0 0; }

/* ------------------------------------------------------------ botões */
button, .botao { font: inherit; font-weight: 550; font-size: 13px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  height: 36px; padding: 0 14px; border-radius: var(--raio-p); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap; box-shadow: var(--sombra-1); transition: background .12s, border-color .12s, box-shadow .12s, color .12s; text-decoration: none; }
button:hover, .botao:hover { background: var(--superficie-2); border-color: #b9c3d2; text-decoration: none; }
button svg, .botao svg { width: 16px; height: 16px; }
button.primario, .botao.primario { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 1px 2px rgba(31,79,209,.3), inset 0 1px 0 rgba(255,255,255,.12); }
button.primario:hover, .botao.primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
button.perigo { color: var(--erro); border-color: #efc4c0; }
button.perigo:hover { background: var(--erro-f); border-color: #e5a29c; }
button.mini, .botao.mini { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
button:disabled, button:disabled:hover { opacity: .45; cursor: not-allowed; background: var(--superficie); }
button.primario:disabled { background: var(--azul); }

/* ------------------------------------------------------------ formulários */
input, select, textarea { font: inherit; font-size: 13.5px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 0 11px; height: 38px;
  background: var(--superficie); color: var(--texto); width: 100%; transition: border-color .12s, box-shadow .12s; }
textarea { padding: 9px 11px; min-height: 84px; height: auto; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { border-color: #b2bdcc; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31,79,209,.15); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--suave); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; padding: 0; accent-color: var(--azul); cursor: pointer; box-shadow: none; flex: none; }
label.campo { display: block; margin-bottom: 14px; }
label.campo > span { display: block; font-weight: 600; font-size: 12.5px; color: var(--texto-2); margin-bottom: 5px; }
label.campo > em { display: block; font-style: normal; color: var(--suave); font-size: 12px; margin-top: 5px; line-height: 1.4; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 18px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.linha-check { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie-2); }
.linha-check label { cursor: pointer; font-weight: 500; }

/* ------------------------------------------------------------ tabelas */
.tabela-rolagem { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: 11px; color: var(--suave); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; background: var(--superficie-2); white-space: nowrap; }
thead th:first-child { border-top-left-radius: 8px; } thead th:last-child { border-top-right-radius: 8px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: #fafbfd; }
tr.clicavel { cursor: pointer; } tr.clicavel:hover td { background: #f4f7fe; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td input, td select { height: 32px; font-size: 13px; }
tr.mudou td { background: #f4f7fe; }

/* ------------------------------------------------------------ selos e chips */
.selo { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef1f6; color: var(--texto-2); white-space: nowrap; border: 1px solid transparent; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.selo.ok { background: var(--ok-f); color: var(--ok); } .selo.aviso { background: var(--alerta-f); color: var(--alerta); } .selo.erro { background: var(--erro-f); color: var(--erro); }
.selo.neutro::before, .selo.sem-ponto::before { display: none; }
.selo.sev-SEV-1 { background: var(--sev1-f); color: var(--sev1); } .selo.sev-SEV-2 { background: var(--sev2-f); color: var(--sev2); }
.selo.sev-SEV-3 { background: var(--sev3-f); color: var(--sev3); } .selo.sev-SEV-4 { background: var(--sev4-f); color: var(--sev4); }
.chip { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; border: 1px solid var(--borda); border-radius: 6px; font-size: 12px; background: var(--superficie-2); color: var(--texto-2); }
.vazio { padding: 42px 20px; text-align: center; color: var(--suave); }
.vazio strong { display: block; color: var(--texto); font-size: 14px; margin-bottom: 4px; }

/* ------------------------------------------------------------ avisos (toasts) */
.avisos { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.notificacao { background: var(--marinho-900); color: #fff; padding: 12px 16px 12px 14px; border-radius: 10px; box-shadow: var(--sombra-3); max-width: 420px; display: flex; gap: 10px; align-items: flex-start;
  border-left: 4px solid var(--ouro); animation: entra .2s ease-out; }
.notificacao.erro { border-left-color: #ff6b5e; } .notificacao.ok { border-left-color: #3ccf8e; }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ modal */
.modal-fundo { position: fixed; inset: 0; background: rgba(7, 22, 49, .55); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 50; padding: 20px; animation: aparece .15s; }
@keyframes aparece { from { opacity: 0; } }
.modal { background: var(--superficie); border-radius: 16px; width: min(780px, 100%); max-height: 90vh; overflow: auto; padding: 24px 26px 20px; box-shadow: var(--sombra-3); animation: entra .18s ease-out; }
.modal > h2 { font-size: 17px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.modal .acoes-modal { display: flex; justify-content: flex-end; gap: 10px; margin: 20px -26px -20px; padding: 14px 26px; border-top: 1px solid var(--borda); background: var(--superficie-2); position: sticky; bottom: -20px; }
.modal pre.segredo { max-height: 60vh; overflow: auto; }

/* ------------------------------------------------------------ login */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrada .vitrine { background: radial-gradient(1200px 600px at -10% 110%, rgba(184,145,63,.22), transparent 60%), linear-gradient(160deg, var(--marinho-800), var(--marinho-950));
  color: #d5deee; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.entrada .vitrine::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 0 60px rgba(255,255,255,.02), 0 0 0 120px rgba(255,255,255,.015); }
.entrada .vitrine h1 { color: #fff; font-size: 32px; line-height: 1.2; max-width: 460px; font-weight: 650; letter-spacing: -.02em; margin: 18px 0 14px; }
.entrada .vitrine p { max-width: 460px; color: #a9b8d2; font-size: 14.5px; }
.entrada .vitrine ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.entrada .vitrine li { display: flex; gap: 10px; align-items: center; color: #c9d4e8; }
.entrada .vitrine li svg { width: 18px; height: 18px; color: var(--ouro); flex: none; }
.entrada .vitrine .marca { border: 0; padding: 0; margin: 0; }
.entrada .rodape-vitrine { font-size: 12px; color: #7487a8; }
.entrada .painel { display: grid; place-items: center; padding: 40px 24px; background: var(--superficie); }
.entrada form { width: min(380px, 100%); }
.entrada form h2 { font-size: 22px; margin-bottom: 6px; letter-spacing: -.015em; }
.entrada form > p { margin-bottom: 26px; }
.entrada form button[type=submit] { width: 100%; height: 42px; margin-top: 8px; font-size: 14px; }
.entrada .seguro { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 22px; font-size: 12px; color: var(--suave); }
.entrada .seguro svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.kpi .rotulo { font-size: 12px; color: var(--suave); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi .rotulo svg { width: 16px; height: 16px; color: var(--apagado); }
.kpi .valor { font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.1; }
.kpi .nota { font-size: 12px; color: var(--suave); }
.kpi.destaque { border-color: #f0dca6; background: linear-gradient(180deg, #fffdf7, var(--superficie)); }
.kpi.destaque .valor { color: var(--alerta); }
.resumo-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.resumo-num div { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; font-size: 12px; color: var(--suave); }
.resumo-num strong { display: block; font-size: 22px; color: var(--texto); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.grade-inicio { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.atividade { list-style: none; margin: 0; padding: 0; }
.atividade li { display: grid; grid-template-columns: 8px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.atividade li:last-child { border-bottom: 0; }
.atividade li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--borda-forte); }
.atividade li i.CRIAR { background: var(--ok); } .atividade li i.EDITAR { background: var(--azul); } .atividade li i.EXCLUIR { background: var(--erro); }
.atividade li i.GERAR, .atividade li i.EXPORTAR { background: #6b3fd1; } .atividade li i.LOGIN_FALHOU { background: var(--alerta); }
.atividade small { display: block; margin-top: 2px; }
.distribuicao { display: grid; gap: 10px; }
.distribuicao .linha { display: grid; grid-template-columns: 92px 1fr 36px; gap: 10px; align-items: center; font-size: 12.5px; }
.distribuicao .trilho { height: 8px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.distribuicao .trilho span { display: block; height: 100%; border-radius: 4px; }

/* ------------------------------------------------------------ instituição */
.instituicao-cab { display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; padding: 22px 24px; }
.instituicao-cab .ident { display: flex; gap: 16px; align-items: center; min-width: 0; flex: 1 1 360px; }
.instituicao-cab .painel-dash { flex: 0 0 auto; margin-left: auto; }
.monograma { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--marinho-800);
  background: linear-gradient(135deg, #eef2fb, #dfe6f5); border: 1px solid #d3dcee; flex: none; }
.instituicao-cab h1 { font-size: 21px; }
.instituicao-cab .meta-inst { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 7px; color: var(--suave); font-size: 12.5px; }
.instituicao-cab .cnpj { font: 12.5px var(--mono); color: var(--texto-2); }
.painel-dash { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.painel-dash .estado { font-size: 12px; color: var(--suave); line-height: 1.35; }
.painel-dash .estado strong { display: block; color: var(--texto); font-size: 13px; }
.lista-inst td:first-child { display: flex; gap: 12px; align-items: center; }
.lista-inst .monograma { width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px; }
.lista-inst .cnpj { font: 12.5px var(--mono); color: var(--texto-2); }
.filtros { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.busca { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.busca svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--apagado); }
.busca input { padding-left: 34px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 4px 0 22px; overflow-x: auto; scrollbar-width: none; }
.abas a { padding: 11px 14px; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 550; white-space: nowrap; }
.abas a:hover { color: var(--texto); text-decoration: none; }
.abas a.ativo { color: var(--marinho-800); border-color: var(--azul); }
.status-dash { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dica { background: var(--azul-claro); border: 1px solid var(--azul-borda); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #1d3270; margin-bottom: 16px; line-height: 1.55; }
.dica strong { color: var(--marinho-800); }

/* ------------------------------------------------------------ critérios ilustrados */
.barra-sev { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #eef1f6; margin: 16px 0 8px; gap: 2px; }
.barra-sev span { display: block; height: 100%; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--suave); }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.cartoes-crit { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 8px; }
.crit { border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px 12px 18px; background: var(--superficie); position: relative; box-shadow: var(--sombra-1); transition: box-shadow .15s, border-color .15s, opacity .15s; }
.crit::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--borda-forte); }
.crit.SEV-1::before { background: var(--sev1); } .crit.SEV-2::before { background: var(--sev2); } .crit.SEV-3::before { background: var(--sev3); } .crit.SEV-4::before { background: var(--sev4); }
.crit:hover { box-shadow: var(--sombra-2); }
.crit.off { background: var(--superficie-2); box-shadow: none; }
.crit.off h4, .crit.off .meta { color: var(--apagado); }
.crit.mudou { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31,79,209,.12); }
.crit .topo-crit { display: flex; gap: 12px; align-items: flex-start; }
.crit .topo-crit > input { margin-top: 2px; width: 18px; height: 18px; }
.crit h4 { margin: 0; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.crit .meta { font-size: 12.5px; color: var(--suave); margin-top: 5px; line-height: 1.45; }
.crit .marcas { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.crit .marcas button { margin-left: auto; }
.cartao.crit { padding: 20px 22px 18px 26px; }
.medidor { position: relative; height: 4px; background: linear-gradient(90deg, #cfe9da, #f7e4a6 62%, #f2b8b3); border-radius: 2px; margin-top: 8px; max-width: 260px; }
.medidor b { position: absolute; top: -3px; width: 2px; height: 10px; border-radius: 1px; background: var(--marinho-800); }

/* ------------------------------------------------------------ cenários / catálogo */
.grade-sev { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 8px; }
.sev-card { position: relative; overflow: hidden; }
.sev-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.sev-card.SEV-1::before { background: var(--sev1); } .sev-card.SEV-2::before { background: var(--sev2); } .sev-card.SEV-3::before { background: var(--sev3); } .sev-card.SEV-4::before { background: var(--sev4); }
.sev-card h3 { margin-top: 2px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.sev-card ul { padding-left: 18px; margin: 8px 0 12px; color: var(--texto-2); }
.sev-card table td { padding: 7px 0; font-size: 12.5px; } .sev-card table td:first-child { color: var(--suave); width: 42%; }
.sev-card table tr:hover td { background: none; }
.matriz td.marca-pre { color: var(--ouro); font-weight: 700; text-align: center; font-size: 15px; } .matriz td.marca-apl { color: var(--apagado); text-align: center; }
.matriz th.vertical { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 10.5px; height: 160px; text-transform: none; letter-spacing: 0; vertical-align: bottom; padding: 10px 6px; }
.matriz td { padding: 9px 6px; }

/* ------------------------------------------------------------ log */
.log-item { border-bottom: 1px solid var(--borda); padding: 12px 2px; }
.log-item:last-child { border-bottom: 0; }
.log-item .cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; cursor: pointer; }
.log-item .cab:hover strong { color: var(--azul); }
.log-item .cab strong { font-weight: 550; }
.log-item .cab > .suave { font-size: 12px; white-space: nowrap; }
.log-item pre { white-space: pre-wrap; background: var(--superficie-2); border: 1px solid var(--borda); padding: 12px 14px; border-radius: 8px; font: 12.5px/1.6 var(--mono); margin: 10px 0; color: var(--texto-2); }
.log-item table { margin: 8px 0; } .log-item details { margin-top: 6px; } .log-item summary { cursor: pointer; color: var(--azul); font-size: 12.5px; }
.acao-CRIAR { background: var(--ok-f) !important; color: var(--ok) !important; } .acao-EDITAR { background: var(--azul-claro) !important; color: var(--azul) !important; }
.acao-EXCLUIR { background: var(--erro-f) !important; color: var(--erro) !important; } .acao-GERAR, .acao-EXPORTAR { background: #f1ebfd !important; color: #5b30b8 !important; }
.acao-LOGIN_FALHOU { background: var(--alerta-f) !important; color: var(--alerta) !important; }
.integridade { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; border: 1px solid; }
.integridade.ok { background: var(--ok-f); border-color: #b7dfc8; color: #0f5534; } .integridade.falha { background: var(--erro-f); border-color: #f2b8b3; color: #7a1a12; }
.integridade svg { width: 22px; height: 22px; flex: none; }
.segredo { font: 12.5px/1.5 var(--mono); background: var(--ouro-claro); border: 1px dashed var(--ouro); padding: 12px; border-radius: 8px; word-break: break-all; white-space: pre-wrap; }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1100px) { .grade-inicio { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; padding: 10px 14px; overflow-x: auto; gap: 8px; }
  .lateral .marca { border: 0; margin: 0; padding: 0 8px 0 0; } .lateral .logo-img { height: 20px; } .acoes-cab { margin-left: 0; width: 100%; } .lateral .marca small, .nav-grupo, .rodape-lateral { display: none; }
  .lateral nav { flex-direction: row; } .lateral nav a { padding: 8px 10px; white-space: nowrap; } .lateral nav a span { display: none; }
  .lateral nav a.ativo::before { display: none; }
  .barra { padding: 0 16px; } .usuario .quem { display: none; }
  .conteudo { padding: 20px 16px 60px; }
  .grade-2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi { padding: 14px; } .kpi .valor { font-size: 24px; }
  .entrada { grid-template-columns: 1fr; } .entrada .vitrine { padding: 32px 24px; } .entrada .vitrine ul, .entrada .rodape-vitrine { display: none; }
  .log-item .cab { grid-template-columns: auto 1fr; } .log-item .cab > .suave { grid-column: 2; white-space: normal; }
  .tabela-rolagem { margin: 0 -22px; }
}

/* ------------------------------------------------------------ credenciais, acesso e conta */
.secreto { margin: 14px 0; }
.secreto > span { display: block; font-size: 12px; font-weight: 650; color: var(--texto-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.secreto-linha { display: flex; gap: 10px; align-items: center; background: var(--ouro-claro); border: 1px dashed var(--ouro); border-radius: 10px; padding: 12px 14px; }
.secreto-linha code { flex: 1; font: 600 17px/1.4 var(--mono); background: none; border: 0; padding: 0; color: var(--marinho-900); letter-spacing: .04em; word-break: break-all; user-select: all; }
.aviso-forte { background: var(--alerta-f); border-color: #ecd593; margin-top: 16px; }
.orientacoes { margin: 10px 0 14px; padding-left: 18px; color: var(--texto-2); }
.orientacoes li { margin: 4px 0; }
.escopos-cab { margin: 0 0 8px; align-items: center; }
.rotulo-campo { font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.grade-escopos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 16px; }
.escopo { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 9px; cursor: pointer; background: var(--superficie); transition: border-color .12s, background .12s; }
.escopo:hover { border-color: var(--azul-borda); }
.escopo:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.escopo input { margin-top: 2px; }
.escopo strong { display: block; font: 600 13px var(--mono); color: var(--marinho-800); }
.escopo small { display: block; font-size: 11px; color: var(--suave); line-height: 1.3; }
.atalhos { margin-top: 6px; }
.escopos-celula { max-width: 260px; }
.escopos-celula .chip { font: 11.5px var(--mono); }
.acoes-linha { white-space: nowrap; text-align: right; }
.acoes-linha button { margin: 2px 0 2px 4px; }
.grupo-perm h3 { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.grupo-perm .linha-check { align-items: flex-start; margin: 0 0 6px; }
.grupo-perm .linha-check:has(input:checked) { border-color: var(--azul-borda); background: var(--azul-claro); }
.suave.bloco, small.bloco { display: block; }
.matriz tr.grupo-linha td { background: var(--superficie-2); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.matriz td.marca-pre { color: var(--azul); font-size: 12px; }
.perfil-card h3 { margin: 0 0 4px; }
.lista-inst .avatar { width: 34px; height: 34px; }
.conta-link { display: flex; align-items: center; gap: 12px; color: inherit; padding: 4px 6px; border-radius: 10px; }
.conta-link:hover { background: var(--superficie-2); text-decoration: none; }
.lista-perm { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lista-perm li { display: flex; gap: 8px; align-items: center; }
.lista-perm svg { width: 16px; height: 16px; color: var(--ok); }
.passos { padding-left: 18px; } .passos li { margin-bottom: 12px; }
pre.codigo { font: 12px/1.6 var(--mono); background: var(--marinho-950); color: #d5deee; padding: 12px 14px; border-radius: 8px; overflow-x: auto; margin: 6px 0 0; white-space: pre; }
.form-troca { width: min(380px, 100%); }
.form-troca form button[type=submit] { width: 100%; height: 42px; margin-top: 6px; }
.sair-troca { margin-top: 18px; }

/* ------------------------------------------------------------ cenários, critérios, fornecedores, VPN */
.modal.largo { width: min(1080px, 100%); }
.secao-form { border-top: 1px solid var(--borda); padding-top: 4px; margin-top: 14px; }
.secao-form:first-child { border-top: 0; margin-top: 0; }
.secao-form > h3 { margin-top: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--marinho-700); }
.grade-check { display: grid; gap: 6px; margin-bottom: 10px; }
.check-item { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; background: var(--superficie); }
.check-item:hover { border-color: var(--azul-borda); }
.check-item:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.check-item input { margin-top: 2px; }
.check-item strong { display: block; font-size: 12.5px; font-weight: 600; }
.check-item small { display: block; font-size: 11px; color: var(--suave); }
.grupo-check h4 { margin: 10px 0 6px; font-size: 12px; color: var(--suave); font-weight: 600; }
.caixa-rolagem { max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 10px; background: var(--superficie-2); }
.info-param { font-size: 12px; color: var(--suave); margin: -6px 0 12px; line-height: 1.45; }
.tabela-tipos td, .tabela-tipos th { padding: 7px 10px; }
.tabela-tipos .centro, .tabela-tipos th.centro { text-align: center; width: 120px; }
.tabela-tipos tr.bloqueado td { opacity: .4; }
.roteiro td { padding: 5px 6px; } .roteiro select { min-width: 260px; } .roteiro input { width: 90px; }
.lista-simples { padding-left: 0; list-style: none; margin: 0 0 10px; display: grid; gap: 6px; }
tr.inativo td { opacity: .55; }
.marcas-linha { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.segmentado { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmentado button, .segmentado label { height: 30px; border: 0; background: none; box-shadow: none; padding: 0 12px; border-radius: 7px; color: var(--suave); font-weight: 550; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.segmentado button.ativo, .segmentado label:has(input:checked) { background: var(--superficie); color: var(--marinho-800); box-shadow: var(--sombra-1); }
.segmentado.escolha input { display: none; }
.escolha-categoria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.opcao-categoria { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; background: var(--superficie); }
.opcao-categoria:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); box-shadow: 0 0 0 3px rgba(31,79,209,.1); }
.opcao-categoria input { margin-top: 3px; accent-color: var(--azul); }
.opcao-categoria strong { display: block; font-size: 14px; }
.opcao-categoria small { display: block; color: var(--suave); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.selo.fornecedor { background: #f1ebfd; color: #5b30b8; }
.monograma.fornecedor { background: linear-gradient(135deg, #f3edfd, #e6dcfa); border-color: #d9cbf6; color: #4c2a9c; }
.titular { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); margin-bottom: 14px; }
.titular svg { width: 22px; height: 22px; color: var(--marinho-600); flex: none; margin-top: 2px; }
.titular.fornecedor { background: #faf7ff; border-color: #ddd0f7; } .titular.fornecedor svg { color: #5b30b8; }
.titular div > div { color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
.dias { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dias label { display: inline-flex; }
.dias input { display: none; }
.dias span { min-width: 44px; height: 30px; display: grid; place-items: center; border: 1px solid var(--borda-forte); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; text-transform: capitalize; background: var(--superficie); color: var(--suave); }
.dias input:checked + span { background: var(--marinho-700); border-color: var(--marinho-700); color: #fff; }
.rede .chip { font: 11.5px var(--mono); }
.seta-rede { color: var(--apagado); font-size: 12px; margin: 0 0 2px 6px; }
.filtro-data { display: inline-flex; align-items: center; gap: 6px; }
.filtro-data span { font-size: 12px; color: var(--suave); font-weight: 600; }
.filtro-data input, .filtro-data select { width: auto; }
.tabela-tipos td small.bloco { max-width: 520px; }
@media (max-width: 900px) { .escolha-categoria { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ manual */
.m-layout { display: grid; grid-template-columns: 270px 1fr; gap: 22px; align-items: start; }
.m-layout > aside { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; }
.m-busca { max-width: none; margin-bottom: 12px; }
.m-indice { display: flex; flex-direction: column; gap: 1px; }
.m-indice .m-grupo { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); font-weight: 650; margin: 14px 8px 4px; }
.m-indice a { padding: 6px 10px; border-radius: 7px; color: var(--texto-2); font-size: 13px; border-left: 2px solid transparent; }
.m-indice a:hover { background: var(--superficie); text-decoration: none; }
.m-indice a.ativo { background: var(--superficie); color: var(--marinho-800); font-weight: 600; border-left-color: var(--azul); }
.m-secao { scroll-margin-top: 80px; padding: 24px 28px; }
.m-secao p, .m-secao li, .m-secao td { line-height: 1.65; }
.m-secao h3 { margin-top: 22px; color: var(--marinho-700); }
.m-secao h4 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.m-cab { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.m-num { font: 700 26px/1 var(--fonte); color: var(--azul-borda); min-width: 42px; }
.m-cab h2 { font-size: 19px; margin: 0 0 6px; }
.m-passos ol { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.m-passos li { counter-increment: passo; position: relative; padding: 9px 12px 9px 46px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 9px; }
.m-passos li::before { content: counter(passo); position: absolute; left: 12px; top: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--marinho-700); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.m-campos { margin: 6px 0 10px; }
.m-campos th { width: 30%; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texto); background: var(--superficie-2); white-space: normal; vertical-align: top; }
.m-campos tr:first-child th, .m-campos tr:first-child td { border-top: 1px solid var(--borda); }
.m-alerta { display: flex; gap: 10px; align-items: flex-start; background: var(--alerta-f); border: 1px solid #ecd593; color: #5c4300; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.m-alerta svg { width: 20px; height: 20px; flex: none; color: var(--alerta); }
.m-nota { margin-top: 12px; }
@media (max-width: 1000px) { .m-layout { grid-template-columns: 1fr; } .m-layout > aside { position: static; max-height: none; } }
@media print {
  .lateral, .barra, .m-layout > aside, .conteudo > .cabecalho .status-dash, .notificacoes, .avisos, .botao { display: none !important; }
  .casca { display: block; } body { background: #fff; } .conteudo { padding: 0; max-width: none; }
  .m-layout { display: block; } .m-secao { box-shadow: none; border: 0; border-top: 1px solid #ccc; border-radius: 0; break-inside: avoid-page; }
  .m-secao[hidden] { display: block !important; }
}

/* ------------------------------------------------------------ aprovações */
.lateral nav a .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ouro); color: var(--marinho-950); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.faixa-pendente { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--alerta-f); border: 1px solid #ecd593; color: #5c4300; margin-bottom: 14px; }
.faixa-pendente svg { width: 22px; height: 22px; color: var(--alerta); flex: none; }
.faixa-pendente > div { flex: 1; } .faixa-pendente ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.cartao.sol { border-left: 4px solid var(--borda-forte); } .cartao.sol.pendente { border-left-color: var(--alerta); }
.cartao.sol.aprovada { border-left-color: var(--ok); } .cartao.sol.rejeitada { border-left-color: var(--erro); }
.cartao.sol h3 { margin: 8px 0 4px; font-size: 15px; }
.sol-detalhes td.antes { color: var(--suave); text-decoration: line-through; text-decoration-color: #e0a5a0; }
.sol-detalhes td.depois { color: var(--texto); font-weight: 600; }
.decisao { margin-top: 10px; font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--superficie-2); }
.decisao.ok { background: var(--ok-f); color: #0f5534; } .decisao.erro { background: var(--erro-f); color: #7a1a12; }
pre.codigo.claro { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); white-space: pre-wrap; }
a.kpi-link { color: inherit; } a.kpi-link:hover { text-decoration: none; box-shadow: var(--sombra-2); }
.acao-SOLICITAR { background: var(--alerta-f) !important; color: var(--alerta) !important; } .acao-APROVAR { background: var(--ok-f) !important; color: var(--ok) !important; }
.acao-REJEITAR, .acao-CANCELAR { background: var(--erro-f) !important; color: var(--erro) !important; }
.decisao svg { width: 14px; height: 14px; vertical-align: -2px; }