/* Implementa DESIGN_SYSTEM.md (tokens ConfigCube/Metasix, mesmos de Campanhas Ativas) — não introduzir valores fora dos tokens. */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Source+Code+Pro:wght@400;600&display=swap');

:root {
  color-scheme: light;
  --orange-100: #fde7d3; --orange-500: #ec7a23; --orange-600: #d96a16; --orange-700: #9e4b0d;
  --navy-600: #33495d; --navy-700: #28394a; --navy-800: #22323f; --navy-900: #1d2c38;
  --gray-100: #eceef0; --gray-200: #dde1e4; --gray-300: #c3c9ce;
  --success-100: #e1f5e9; --success-500: #2f9e5b; --success-700: #1f7a45;
  --danger-100: #fbe4e2; --danger-500: #d6403a; --danger-700: #a82e29;
  --warning-100: #fbf1da; --warning-500: #a97c12; --warning-700: #8a6913;
  --info-100: #e3eefb; --info-500: #2f7fd6; --info-700: #1f5fa8;
  --background: #f5f6f7; --foreground: #1a2025; --foreground-secondary: #3d4750; --muted-foreground: #606b74; --foreground-subtle: #7d8890;
  --surface: #fff; --surface-muted: #eceef0; --surface-hover: #fafafa;
  --border: #dde1e4; --border-strong: #7d8890; --ring: #d96a16;
  --primary: #ec7a23; --primary-hover: #d96a16; --on-primary: #1a2025; --on-inverse: #fff;
  --link: #9e4b0d; --diff: #ffe29a; --overlay: rgba(20, 24, 28, .5);
  --shadow-sm: 0 1px 2px rgba(20, 24, 28, .06); --shadow-md: 0 4px 12px rgba(20, 24, 28, .1);
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius: var(--radius-lg);
  --t-xl: 2rem; --t-lg: 1.375rem; --t-md: 1.0625rem; --t-base: 0.84375rem; --t-sm: 0.75rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --font: "Mulish", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Source Code Pro", Menlo, Consolas, monospace;
  /* Nomes da versão anterior, mantidos como apelidos (templates e dashboard.js usam). */
  --bg: var(--surface); --bg-page: var(--background); --ink: var(--foreground); --ink-muted: var(--muted-foreground);
  --rule: var(--border); --program: var(--link); --ok: var(--success-700); --warn: var(--warning-700);
  --fail: var(--danger-700); --pending: var(--muted-foreground);
}
.dark {
  color-scheme: dark;
  --orange-100: #45301c; --orange-700: #f0a468;
  --navy-600: #22303c; --navy-700: #1a2832; --navy-800: #141f28; --navy-900: #0f1820;
  --gray-100: #222b33; --gray-200: #2c3640; --gray-300: #3d4750;
  --success-100: #1b3a29; --success-500: #3fb571; --success-700: #86e2ab;
  --danger-100: #43201f; --danger-500: #e8615b; --danger-700: #ffa39d;
  --warning-100: #3a2f16; --warning-500: #e8b23c; --warning-700: #f5d383;
  --info-100: #1a3049; --info-500: #4f9ae8; --info-700: #9cc9f7;
  --background: #1e252c; --foreground: #f5f6f7; --foreground-secondary: #c3c9ce; --muted-foreground: #929ba3; --foreground-subtle: #757f88;
  --surface: #262f38; --surface-muted: #2c3641; --surface-hover: #2a333d;
  --border: #2c3640; --border-strong: #757f88; --ring: #ec7a23;
  --link: #f0a468; --diff: #6b5310; --overlay: rgba(0, 0, 0, .65);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
html { font-size: 100%; }   /* raiz fica em 16 px: todo rem do sistema é relativo a ela */
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 var(--t-base)/1.5 var(--font); }
body { display: flex; min-height: 100vh; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: 0.95em; white-space: nowrap; }

/* Sidebar (navy-900): presa à altura da janela (sticky) para o rodapé ficar sempre visível, mesmo em página
   longa; o menu rola por dentro se não couber. Recolhe para 60 px com html.sb-min. */
.sidebar { flex: 0 0 220px; width: 220px; background: var(--navy-900); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; align-self: flex-start;
  padding: var(--s-4) var(--s-3); transition: flex-basis 200ms, width 200ms; overflow: hidden; }
.sidebar .brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-2) 0 var(--s-4);
  margin-bottom: var(--s-3); border-bottom: 1px solid rgb(255 255 255 / .08); text-decoration: none; }
.sidebar .brand img { width: 36px; height: auto; display: block; }
.sidebar .brand span { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: rgb(255 255 255 / .4); white-space: nowrap; }
.sidenav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nav-grupo { margin: var(--s-4) var(--s-3) var(--s-1); font-size: 0.65625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgb(255 255 255 / .35); white-space: nowrap; }
.nav-sep { border: none; border-top: 1px solid rgb(255 255 255 / .08); margin: var(--s-3) 0; }
.sidenav a { display: flex; align-items: center; gap: var(--s-3); padding: 9px var(--s-3); border-radius: var(--radius-md);
  margin-bottom: 2px; color: rgb(255 255 255 / .6); font-weight: 500; white-space: nowrap; }
.sidenav a svg { flex: none; width: 16px; height: 16px; }
.sidenav a:hover { background: rgb(255 255 255 / .06); text-decoration: none; color: var(--on-inverse); }
.sidenav a.active { background: rgb(255 255 255 / .06); color: var(--on-inverse); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary); }
.sidebar .rodape { font-size: 0.625rem; line-height: 1.5; color: rgb(255 255 255 / .35); text-align: center;
  padding-top: var(--s-3); margin-top: var(--s-3); border-top: 1px solid rgb(255 255 255 / .08); white-space: nowrap; }
html.sb-min .sidebar { flex-basis: 60px; width: 60px; padding-left: var(--s-2); padding-right: var(--s-2); }
html.sb-min .sidebar .brand span, html.sb-min .sidebar .rodape, html.sb-min .sidenav a span { display: none; }
html.sb-min .nav-grupo { font-size: 0; margin: var(--s-2) 0; border-top: 1px solid rgb(255 255 255 / .08); }
html.sb-min .sidenav a { justify-content: center; }
@media (max-width: 700px) {
  body { flex-direction: column; }
  .sidebar, html.sb-min .sidebar { flex: none; width: 100%; height: auto; position: static; padding: var(--s-3) var(--s-4); }
  .nav-grupo, .nav-sep { display: none; }
  .sidebar .brand { flex-direction: row; justify-content: center; padding-bottom: var(--s-3); }
  .sidenav { display: flex; gap: var(--s-1); overflow-x: auto; }
  .sidenav a { margin-bottom: 0; }
  .sidebar .rodape, .appbar .sb-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Topbar branca (46 px): recolher sidebar · breadcrumb · versão da config · tema · menu do usuário */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.appbar { display: flex; align-items: center; gap: var(--s-3); min-height: 46px; padding: 0 var(--s-6) 0 var(--s-3);
  background: var(--surface); border-bottom: 1px solid var(--border); font-size: var(--t-sm); color: var(--muted-foreground); }
.appbar .crumbs { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .crumbs strong { color: var(--foreground); font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
  border: none; background: none; border-radius: var(--radius-md); color: var(--foreground-subtle); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--surface-muted); color: var(--foreground-secondary); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .sol, .dark .theme-toggle .lua { display: none; }
.dark .theme-toggle .sol { display: inline; }
.appbar .cfgv { color: var(--muted-foreground); }
.conta-menu { position: relative; }
.conta-menu > summary { list-style: none; display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
  padding: var(--s-1) var(--s-2); border-radius: var(--radius-md); margin: 0; }
.conta-menu > summary::-webkit-details-marker { display: none; }
.conta-menu > summary:hover { background: var(--surface-muted); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex: none; }
.conta-menu .quem { display: flex; flex-direction: column; line-height: 1.25; }
.conta-menu .quem strong { color: var(--foreground); font-size: 0.8125rem; font-weight: 600; }
.conta-menu .quem span { font-size: 0.6875rem; color: var(--muted-foreground); }
.conta-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 180px; padding: var(--s-1) 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); }
.conta-menu .menu a, .conta-menu .menu button { display: block; width: 100%; text-align: left; padding: var(--s-2) var(--s-3);
  font: inherit; font-size: 0.8125rem; color: var(--foreground-secondary); background: none; border: none; cursor: pointer; }
.conta-menu .menu a:hover, .conta-menu .menu button:hover { background: var(--surface-muted); text-decoration: none; }
.conta-menu .menu form { margin: 0; border-top: 1px solid var(--border); }
.conta-menu .menu button.sair { color: var(--danger-700); }
.conta-menu .menu button.sair:hover { background: var(--danger-100); }
@media (max-width: 700px) { .conta-menu .quem, .appbar .cfgv { display: none; } .appbar { padding: 0 var(--s-3); } }

/* Cabeçalho de página (PageHeader): cartão com título, contexto e ação à direita */
.wrap { flex: 1; padding: var(--s-6); display: flex; gap: var(--s-4); align-items: flex-start; }
.conteudo { flex: 1; min-width: 0; }

/* InfoPanel "Sobre esta página": coluna à direita do conteúdo, recolhida por padrão (só o botão ⓘ) */
.infopanel { flex: none; position: sticky; top: var(--s-4); order: 2; }
.infopanel > summary { list-style: none; display: flex; align-items: center; gap: var(--s-2); cursor: pointer; margin: 0;
  height: 36px; padding: 0 var(--s-3); border-radius: 20px; background: var(--orange-100); font-weight: 700;
  border: 1px solid transparent; color: var(--orange-700); box-shadow: var(--shadow-sm); white-space: nowrap; }
.infopanel > summary::-webkit-details-marker { display: none; }
.infopanel > summary:hover { border-color: var(--primary); }
.infopanel > summary svg { width: 18px; height: 18px; flex: none; }
.infopanel > summary .aberto, .infopanel[open] > summary .fechado { display: none; }
.infopanel[open] { width: 18rem; }
.infopanel[open] > summary { width: auto; justify-content: flex-start; padding: 0 var(--s-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border); border-bottom: none; box-shadow: none; background: var(--surface); color: var(--foreground); font-size: 0.71875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.infopanel[open] > summary .aberto { display: inline; }
.infopanel-corpo { background: var(--surface); border: 1px solid var(--border); border-top: none; box-shadow: var(--shadow-sm);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 0 var(--s-4) var(--s-4); font-size: 0.8125rem; color: var(--foreground-secondary); }
.infopanel-corpo h2 { font-size: var(--t-md); margin: 0 0 var(--s-2); padding: var(--s-2) 0 var(--s-2); color: var(--foreground); }
.infopanel-corpo p { margin: 0 0 var(--s-3); }
.infopanel-corpo dl { margin: 0; }
.infopanel-corpo dt { font-weight: 700; color: var(--foreground); margin-top: var(--s-3); }
.infopanel-corpo dd { margin: 2px 0 0; }
@media (max-width: 1024px) {
  .wrap { flex-direction: column; align-items: stretch; }
  .infopanel { position: static; order: -1; align-self: flex-end; }
  .infopanel[open] { width: 100%; }
}
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.topbar h1 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 0; color: var(--foreground); }
.topbar .crumb { color: var(--muted-foreground); }
.topbar .crumb a { color: var(--muted-foreground); }
.topbar .crumb a:hover { color: var(--primary-hover); }
.topbar form { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted-foreground); }
.small { font-size: var(--t-sm); line-height: 1.45; }
h2 { font-size: var(--t-md); line-height: 1.4; font-weight: 600; margin: var(--s-6) 0 var(--s-2);
  padding-bottom: var(--s-1); border-bottom: 1px solid var(--border); }
h2:first-child { margin-top: 0; }
h3 { font-weight: 600; }
p { margin: 0 0 var(--s-3); max-width: 75ch; }

/* Cartão genérico — envolve tabela, painéis, listas */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 18px var(--s-6); margin-bottom: var(--s-6); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.actions-card { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.actions-card > div:first-child { flex: 1 1 320px; }
.actions-card-buttons { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: 0 0 auto; }

/* Botões: .btn = outline; .btn-primary = laranja com texto on-primary (nunca branco) */
.btn { font: inherit; font-size: var(--t-base); font-weight: 600; line-height: 1.4; padding: 7px var(--s-4);
  border: 1px solid var(--border-strong); color: var(--foreground-secondary); background: var(--surface);
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--surface-muted); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(236 122 35 / .3); }
input[type=file] { font: inherit; font-size: var(--t-sm); }

/* Tabela */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--muted-foreground); font-weight: 700; font-size: 0.71875rem; text-transform: uppercase;
  letter-spacing: .03em; padding: 10px var(--s-3); background: var(--background); border-bottom: 1px solid var(--border); }
.table td { padding: 11px var(--s-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-hover); transition: background 120ms; }
.table td.num { font-family: var(--mono); }
.table[data-sortable] th:hover { color: var(--foreground); }
.table[data-sortable] th[data-sorted="asc"]::after { content: " \25B2"; font-size: 0.7em; }
.table[data-sortable] th[data-sorted="desc"]::after { content: " \25BC"; font-size: 0.7em; }

/* Legenda do veredito */
.verdict-legend { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--rule); }
.verdict-legend .item { flex: 1 1 220px; border-left: 3px solid var(--rule); padding: 0 var(--s-3); }
.verdict-legend .aprovado { border-color: var(--ok); } .verdict-legend .revisao { border-color: var(--warn); }
.verdict-legend .reprovado { border-color: var(--fail); }
.verdict-legend p { margin: var(--s-1) 0 0; color: var(--ink-muted); font-size: var(--t-sm); max-width: none; }

/* Veredito */
.verdict { font-weight: 600; }
.verdict-aprovado { color: var(--ok); } .verdict-revisao { color: var(--warn); }
.verdict-reprovado { color: var(--fail); } .verdict-processando { color: var(--pending); }
.verdict-band { display: grid; grid-template-columns: auto auto 1fr; gap: var(--s-6); align-items: baseline;
  padding: var(--s-4) var(--s-6); border-left: 6px solid var(--pending); background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); margin-bottom: var(--s-6); }
.verdict-band.aprovado { border-color: var(--ok); } .verdict-band.revisao { border-color: var(--warn); }
.verdict-band.reprovado { border-color: var(--fail); }
.verdict-band .word { font-size: var(--t-xl); line-height: 1.1; }
.verdict-band .score { font-family: var(--mono); font-size: var(--t-lg); }
.verdict-band .score span { color: var(--ink-muted); font-size: var(--t-sm); font-family: var(--font); }
.verdict-band .reason { max-width: none; margin: 0; }

/* Layout do detalhe */
.cols { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .verdict-band { grid-template-columns: 1fr; gap: var(--s-2); } }

/* Checks */
.check { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--pending); margin: 0 0 var(--s-2); }
.check.ok { border-color: var(--ok); } .check.alerta { border-color: var(--warn); }
.check.falha { border-color: var(--fail); } .check.nao_verificado { border-color: var(--pending); }
.check .status { font-size: var(--t-sm); font-weight: 600; padding-top: 2px; }
.check.ok .status { color: var(--ok); } .check.alerta .status { color: var(--warn); }
.check.falha .status { color: var(--fail); } .check.nao_verificado .status { color: var(--pending); }
.check .title { font-weight: 600; }
.check .detail { color: var(--ink-muted); margin: 0; }
.check .weight { color: var(--ink-muted); font-size: var(--t-sm); margin-left: var(--s-2); font-weight: 400; }
.severity { font-size: var(--t-sm); font-weight: 600; }
.severity-critica { color: var(--fail); }
.severity-alta { color: var(--fail); font-weight: 400; }
.severity-media { color: var(--warn); }
.severity-baixa { color: var(--pending); font-weight: 400; }
.review { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.review label { font-size: var(--t-sm); color: var(--ink-muted); display: flex; align-items: center; gap: var(--s-1); }
.review textarea { font: inherit; font-size: var(--t-sm); width: 100%; margin-top: var(--s-1);
  padding: var(--s-1) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); resize: vertical; }

/* Comparação de códigos */
.codecmp { display: grid; grid-template-columns: 110px auto; gap: var(--s-1) var(--s-3); margin-top: var(--s-2);
  font-size: var(--t-sm); }
.codecmp .src { color: var(--ink-muted); }
.codecmp .par { display: grid; grid-template-columns: max-content max-content auto; gap: 0 var(--s-2); align-items: baseline; }
.codecmp .par .val { text-align: right; }
.codecmp .val { font-family: var(--mono); font-size: var(--t-base); letter-spacing: 0.02em; }
.codecmp .val mark { background: var(--diff); color: inherit; }
.codecmp .val.unread { color: var(--ink-muted); font-family: var(--font); }
.codecmp .same { color: var(--ok); } .codecmp .differ { color: var(--fail); } .codecmp .similar { color: var(--warn); }

/* Formulário extraído */
.fields { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-1) var(--s-3); }
.fields dt { color: var(--ink-muted); margin: 0; }
.fields dd { margin: 0; }
.fields dd.mono { font-family: var(--mono); }

/* Fotos */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 500px) { .photos { grid-template-columns: 1fr; } }
.photo img { width: 100%; height: auto; display: block; background: var(--surface-muted); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.photo .ptitle { font-weight: 600; margin-top: var(--s-2); }
.photo .pmeta { font-size: var(--t-sm); color: var(--ink-muted); }
.photo .pmeta .mono { color: var(--ink); }
.photo .pcat { font-size: var(--t-sm); }
.sigs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.sig img { width: 100%; max-height: 120px; object-fit: contain; background: #fff; /* tinta sobre papel: branco nos dois temas */ border: 1px solid var(--rule); }

.empty { padding: var(--s-12) 0; color: var(--ink-muted); }
.notice { padding: var(--s-3) var(--s-4); background: var(--info-100); color: var(--info-700);
  border-left: 4px solid var(--info-500); border-radius: var(--radius-md); margin-bottom: var(--s-4); }
.notice.error { background: var(--danger-100); color: var(--danger-700); border-left-color: var(--danger-500); }
.notice a { color: inherit; text-decoration: underline; }
details summary { cursor: pointer; color: var(--program); }
pre { background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--s-3); overflow: auto; font-size: var(--t-sm); }

/* Painel (tela inicial) */

.stats { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-8); }
.stat { flex: 1 1 140px; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--rule); border-radius: var(--radius-md); }
.stat.aprovado { border-left-color: var(--success-500); } .stat.revisao { border-left-color: var(--warning-500); }
.stat.reprovado { border-left-color: var(--danger-500); } .stat.neutro { border-left-color: var(--primary); }
.stat .label { color: var(--muted-foreground); font-size: 0.71875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; }

/* Histograma de score */

/* Ranking horizontal (barras simples e empilhadas) */
.rank-row { display: grid; grid-template-columns: 200px 1fr 48px; gap: var(--s-3); align-items: center; margin-bottom: var(--s-2); font-size: var(--t-sm); }
.rank-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .track { background: var(--surface-muted); height: 20px; border-radius: 4px; overflow: hidden; }
.rank-row .fillwrap { height: 100%; display: flex; gap: 2px; }
.rank-row .fill { height: 100%; background: var(--primary); }
.rank-row .fill.falha { background: var(--fail); } .rank-row .fill.alerta { background: var(--warn); }
.rank-row .val { font-family: var(--mono); text-align: right; }
.legend { display: flex; gap: var(--s-4); font-size: var(--t-sm); color: var(--ink-muted); margin-bottom: var(--s-3); }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.legend .falha .swatch { background: var(--fail); } .legend .alerta .swatch { background: var(--warn); }

/* Modais (dialog nativo) */
dialog::backdrop { background: var(--overlay); }
.modal { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: var(--shadow-md);
  background: var(--surface); color: var(--foreground); width: 32rem; max-width: calc(100vw - 32px); }
.modal h2 { margin: 0 0 var(--s-4); padding-bottom: 0; border-bottom: none; font-size: var(--t-md); }
.modal-body label { display: block; margin-bottom: var(--s-2); color: var(--ink-muted); font-size: var(--t-sm); }
.modal-body input[type=file] { display: block; width: 100%; padding: var(--s-4); font-size: var(--t-sm);
  border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--bg-page); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2);
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.lightbox { border: none; border-radius: var(--radius); padding: 0; background: transparent;
  width: 90vw; height: 90vh; max-width: 90vw; max-height: 90vh; overflow: auto; text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(90vh - 48px); width: auto; height: auto; cursor: zoom-in; }
.lightbox-barra { position: sticky; top: 0; left: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2); padding: var(--s-2); background: var(--surface); border-bottom: 1px solid var(--border); }
.lightbox-barra [aria-pressed="true"] { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.lightbox.com-lupa img { cursor: crosshair; }
.lightbox-lente { position: fixed; width: 180px; height: 180px; border-radius: 50%; border: 2px solid var(--primary);
  pointer-events: none; background-repeat: no-repeat; background-color: var(--surface); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.lightbox img.zoomed { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }

@media (prefers-reduced-motion: reduce) { .table tbody tr:hover { transition: none; } }

/* ---- Spec 03: conta, login, formulários, usuários, auditoria ---- */
body.login-body { display: block; min-height: 100vh; padding: var(--s-4); box-sizing: border-box; }
.login { display: grid; grid-template-columns: 1.15fr .85fr; max-width: 1120px; min-height: calc(100vh - 2 * var(--s-4));
  margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 16px rgb(15 24 32 / .08); }
.login-painel { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--navy-900);
  color: #fff; padding: 56px; }
.login-anel { position: absolute; border-radius: 50%; pointer-events: none; }
.login-anel.a { width: 256px; height: 256px; top: -96px; right: -96px; border: 28px solid rgb(236 122 35 / .15); }
.login-anel.b { width: 256px; height: 256px; bottom: -128px; left: 64px; border: 1px solid rgb(255 255 255 / .1); }
.login-marca { position: relative; display: flex; align-items: center; gap: var(--s-3); }
.login-marca img { width: 44px; height: auto; }
.login-marca span { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }
.login-mensagem { position: relative; margin: auto 0; padding: var(--s-12) 0; max-width: 36rem; }
.login-caption { margin: 0 0 var(--s-3); font-size: 0.71875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.login-painel .login-caption { color: #ffbd4b; }
.login-mensagem h1 { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.login-mensagem > p:not(.login-caption) { margin: var(--s-4) 0 0; font-size: 1rem; line-height: 1.75; color: rgb(255 255 255 / .7); }
.login-pilares { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.login-pilares li { display: flex; flex-direction: column; padding: var(--s-4); border: 1px solid rgb(255 255 255 / .1);
  border-radius: 10px; background: rgb(255 255 255 / .05); }
.login-pilares svg { color: #ffbd4b; margin-bottom: var(--s-4); }
.login-pilares strong { font-size: 0.875rem; line-height: 1.4; }
.login-pilares span { margin-top: 6px; font-size: 0.75rem; line-height: 1.6; color: rgb(255 255 255 / .6); }
.login-rodape { position: relative; margin: 0; display: flex; align-items: center; gap: var(--s-2); font-size: 0.75rem; color: rgb(255 255 255 / .45); }
.login-acesso { display: flex; align-items: center; justify-content: center; padding: var(--s-12) 56px; }
.login-acesso .form { width: 100%; max-width: 360px; }
.login-acesso .login-caption { color: var(--orange-700); }
.login-acesso h2 { margin: 0; padding: 0; border: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.login-apoio { margin: var(--s-2) 0 var(--s-6); font-size: 0.84375rem; line-height: 1.5; color: var(--foreground-secondary); }
.login-acesso .btn { width: 100%; margin-top: var(--s-6); min-height: 2.75rem; font-size: 0.9375rem; }
.login-nota { margin: var(--s-6) 0 0; text-align: center; font-size: 0.75rem; line-height: 1.6; color: var(--foreground-secondary); }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; min-height: 0; }
  .login-painel { padding: var(--s-8) var(--s-6); }
  .login-mensagem { padding: var(--s-8) 0; }
  .login-acesso { padding: var(--s-8) var(--s-6); }
}
@media (max-width: 560px) { .login-pilares { display: none; } .login-mensagem h1 { font-size: 1.5rem; } }
.form label { display: block; font-size: 0.8125rem; color: var(--foreground-secondary); font-weight: 600; margin: var(--s-3) 0 var(--s-1); }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=date], .form select {
  font: inherit; width: 100%; box-sizing: border-box; padding: 7px var(--s-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--foreground); }
input, select, textarea { background: var(--surface); color: var(--foreground); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(236 122 35 / .3); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
.form-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.form-row > div { flex: 1 1 160px; }
.form-row > .form-actions { flex: 0 0 auto; }
.notice.secret .mono { font-size: var(--t-md); font-weight: 600; }
.table input[type=text], .table input[type=number], .table select { font: inherit; font-size: var(--t-sm); padding: var(--s-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.table form { margin: 0; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.table tr.inativo td { color: var(--ink-muted); }
.table td.dados { font-family: var(--mono); font-size: var(--t-sm); white-space: pre-wrap; word-break: break-word; max-width: 40ch; }
.pager { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); font-size: var(--t-sm); }
.revisado-por { margin: var(--s-1) 0 0; }
@media (max-width: 700px) { .form-row { flex-direction: column; align-items: stretch; } }

/* ---- Spec 04: configuração ---- */
.abas { display: flex; gap: var(--s-4); margin-top: var(--s-3); font-weight: 600; }
.abas a { color: var(--muted-foreground); padding-bottom: var(--s-1); }
.abas a:hover { color: var(--foreground); text-decoration: none; }
.abas a.ativa { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--primary); }
.topbar > div:first-child { display: flex; flex-direction: column; }
.selo { font-size: 0.71875rem; font-weight: 700; color: var(--orange-700); background: var(--orange-100);
  border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.modo-off { color: var(--ink-muted); } .modo-alert { color: var(--warn); } .modo-block { color: var(--fail); }
.fields.params { grid-template-columns: minmax(220px, 2fr) 3fr; gap: var(--s-3); }
.fields.params dd input, .fields.params dd select, .form textarea { font: inherit; width: 100%; box-sizing: border-box;
  padding: 7px var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--foreground); }
.form textarea.mono, .fields.params textarea.mono { font-family: var(--mono); font-size: var(--t-sm); }
.table td.antes { color: var(--ink-muted); text-decoration: line-through; }
@media (max-width: 700px) { .fields.params { grid-template-columns: 1fr; } }
.table.cfg { table-layout: fixed; }
.table.cfg td.mono { white-space: normal; word-break: break-word; font-size: var(--t-sm); }

/* ---- Spec 05: destino, modo do check ---- */
.card.destino { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; padding: var(--s-3) var(--s-6); }
.card.destino strong { font-weight: 600; }
.card.destino .parciais { margin-left: auto; }
.check.desligado .title, .check.desligado .detail { color: var(--ink-muted); }
.bloqueia { color: var(--fail); margin: 0 0 var(--s-1); }

/* Coletas (Spec 07) */
.scroll-x { overflow-x: auto; }

/* Lotes (Spec 09) */
.progress { height: 6px; background: var(--surface-muted); border-radius: 3px; overflow: hidden; min-width: 80px; flex: 1; }
.progress > span { display: block; height: 100%; background: var(--primary); }
.progress-lg { margin-bottom: var(--s-3); }
.progress-cell { display: flex; align-items: center; gap: var(--s-2); min-width: 160px; }
/* barra com o % dentro: rótulo em duas camadas, a de cima recortada no preenchimento (contraste nos dois temas) */
.progress-pct { position: relative; height: 20px; border-radius: 4px; flex: 0 0 160px; }
.progress-pct > span { width: var(--pct); }
.progress-pct > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 var(--t-sm)/1 var(--mono); color: var(--ink); clip-path: inset(0 0 0 var(--pct)); }
.progress-pct > b + b { color: var(--on-primary); clip-path: inset(0 calc(100% - var(--pct)) 0 0); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 700px) { .duas-colunas { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }

/* Spec 10 — lista de OS: filtros, chips, selo de destino, ordenação; detalhe: histórico e fonte */
.filtros .form-row > div { flex: 0 1 180px; }
.filtros .form-row > .busca { flex: 1 1 320px; }
.filtros details { margin-top: var(--s-3); }
.filtros summary { cursor: pointer; color: var(--program); font-size: var(--t-sm); font-weight: 600; }
.form input[type=number] { font: inherit; padding: var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); width: 5.5em; }
.faixa { display: flex; gap: var(--s-1); }
.caixas { border: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.caixas legend { font-size: var(--t-sm); color: var(--ink-muted); font-weight: 600; padding: 0; margin-bottom: var(--s-1); width: 100%; }
.caixas label { display: inline-flex; gap: var(--s-1); align-items: center; font-size: var(--t-sm); color: var(--ink); font-weight: 400; margin: 0; }
.resultado { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.resultado .total { font-size: var(--t-md); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.chip { font-size: var(--t-sm); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 20px;
  padding: 2px 10px; color: var(--foreground); text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--primary); text-decoration: none; }
.table a.ord { color: inherit; text-decoration: none; white-space: nowrap; }
.table a.ord:hover { color: var(--foreground); text-decoration: underline; }
.ok-mark { color: var(--ok); font-weight: 600; }
.sla-atraso { color: var(--warn); font-weight: 600; }
.modo { font-size: var(--t-sm); font-weight: 600; margin-left: var(--s-2); }
.causa { font-size: var(--t-sm); color: var(--ink-muted); margin-left: var(--s-2); }

/* Spec 11 — revisão amostral e liberação */
.taxa-acima { color: var(--fail); font-weight: 600; }
.amostra-item { border-left: 4px solid var(--primary); }
.vereditos { border: none; padding: 0; margin: 0 0 var(--s-3); display: flex; gap: var(--s-6); flex-wrap: wrap; }
.vereditos legend { font-size: var(--t-sm); color: var(--ink-muted); font-weight: 600; padding: 0; margin-bottom: var(--s-2); }
.vereditos label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); color: var(--ink); font-weight: 600; margin: 0; }
.vereditos input { width: 18px; height: 18px; }
kbd { font-family: var(--mono); font-size: var(--t-sm); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 var(--s-1); background: var(--surface-muted); }
.form label.inline { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); font-weight: 400; }
.checks-item { margin: var(--s-2) 0; }
.acoes-item { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-3); }
.retida-form { display: flex; gap: var(--s-2); align-items: center; }
.retida-form input[type=text] { font: inherit; padding: var(--s-1) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-width: 14em; }
.painel-decisao h3 { font-size: var(--t-base); margin: var(--s-4) 0 var(--s-2); }

/* Governança (Spec 12) */
.table.num td.mono:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.matriz th, .matriz td { white-space: nowrap; }
.matriz td.diag { color: var(--ink-muted); }
.matriz a.alterada { font-weight: 600; }
details > summary { cursor: pointer; margin: var(--s-3) 0 var(--s-2); }
.insuf { font-family: var(--font); font-size: var(--t-sm); color: var(--ink-muted); white-space: nowrap; }

/* Dashboard (Spec 14) */
@media (min-height: 900px) { .dash-filtros { position: sticky; top: 0; z-index: 5; } }   /* tela baixa: não cobre os painéis */
.form .rotulo { display: block; font-size: 0.8125rem; color: var(--foreground-secondary); font-weight: 600; margin: var(--s-3) 0 var(--s-1); }
/* Seleção múltipla (.multi): parece um <select>, abre lista de checkboxes; mesmo parâmetro repetido na URL */
.filtros details.multi, .multi { position: relative; margin: 0; }
.form select, .form input[type=text], .form input[type=date], .form input[type=email], .form input[type=password],
.multi > summary { min-height: 2.25rem; }
.multi > summary { list-style: none; margin: 0; cursor: pointer; line-height: normal; padding: 7px 32px 7px var(--s-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--foreground); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; position: relative; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.multi[open] > summary, .multi > summary:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(236 122 35 / .3); }
.multi-opcoes { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 100%; max-height: 16rem; overflow-y: auto;
  padding: var(--s-1) 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); }
.form .multi-opcoes label { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 6px var(--s-3);
  font-weight: 400; color: var(--foreground); white-space: nowrap; cursor: pointer; }
.multi-opcoes label:hover { background: var(--surface-muted); }
.multi-opcoes p { margin: 0; padding: 6px var(--s-3); }
.multi-opcoes { max-height: 20rem; min-width: max(100%, 16rem); }
.form .multi-busca { position: sticky; top: calc(-1 * var(--s-1)); display: block; width: calc(100% - 2 * var(--s-2));
  margin: 0 var(--s-2) var(--s-1); padding: 6px var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--foreground); font: inherit; min-height: 0; }
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.dash > .card { margin: 0; min-width: 0; }
.dash-full { grid-column: 1 / -1; }
@media (max-width: 1024px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.dash-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.dash-cab h2 { font-size: var(--t-md); margin: 0; padding: 0; border: none; }
.dash-grafico { position: relative; height: 220px; margin-bottom: var(--s-4); }
.dash .table td.num, .dash .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dash .stats { margin-bottom: 0; }
.dash .stat a { color: inherit; text-decoration: none; }
.dash .stat a:hover .value { color: var(--link); text-decoration: underline; }

/* Badges de status (pílula): destino, status de coleta/lote/carga, veredito de revisão */
.selo-destino, .coleta-status, .lote-status, .carga-status, .veredito {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.71875rem; font-weight: 700; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap; line-height: 1.5;
  background: var(--pill-bg, var(--surface-muted)); color: var(--pill-fg, var(--foreground-secondary)); }
.selo-destino.muted { --pill-fg: var(--muted-foreground); }
.destino-APROVADA, .coleta-status.concluida, .lote-status.processado, .lote-status.apto, .lote-status.liberado,
.lote-status.carregado, .carga-status.enviada, .carga-status.dry_run,
.veredito-CONCORDA, .veredito-APROVAR, .veredito-LIBERAR, .veredito-LIBERAR_COM_JUSTIFICATIVA
  { --pill-bg: var(--success-100); --pill-fg: var(--success-700); }
.destino-APROVADA_ALERTA, .lote-status.devolvido, .veredito-DEVERIA_APROVAR
  { --pill-bg: var(--warning-100); --pill-fg: var(--warning-700); }
.carga-status, .destino-REPROVADA, .coleta-status.falhou, .lote-status.retido, .lote-status.carregado_com_erros,
.veredito-DEVERIA_REPROVAR, .veredito-REPROVAR, .veredito-DEVOLVER
  { --pill-bg: var(--danger-100); --pill-fg: var(--danger-700); }
.coleta-status.em_andamento, .lote-status.processando, .lote-status.carregando, .lote-status.em_amostragem,
.lote-status.aguardando_decisao, .carga-status.pendente, .carga-status.enviando
  { --pill-bg: var(--info-100); --pill-fg: var(--info-700); }

/* Página de Ajuda (/ajuda) */
.btn-sm { font-size: var(--t-sm); padding: 5px var(--s-3); }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ajuda-perfil { display: flex; gap: var(--s-4); align-items: flex-start; }
.ajuda-perfil .avatar { width: 48px; height: 48px; font-size: 1.25rem; }
.ajuda-perfil h2 { border: none; padding: 0; margin-bottom: var(--s-2); }
.papel { display: inline-flex; align-items: center; font-size: 0.71875rem; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  background: var(--surface-muted); color: var(--foreground-secondary); margin-right: var(--s-1); white-space: nowrap; }
.papel-voce { background: var(--orange-100); color: var(--orange-700); }
.papel-auto { background: var(--info-100); color: var(--info-700); }
/* fases: cor de faixa por grupo de etapa */
.fase-entrada { --fase: var(--info-500); } .fase-decisao { --fase: var(--warning-500); }
.fase-humano { --fase: var(--primary); } .fase-entrega { --fase: var(--success-500); }
.fases-legenda { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); color: var(--muted-foreground); }
.fases-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px;
  background: var(--fase); vertical-align: -1px; }
.mapa { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); counter-reset: none; }
.mapa li { position: relative; }
.mapa li:not(:nth-child(4n)):not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--s-6) + 4px); top: 50%;
  transform: translateY(-50%); color: var(--foreground-subtle); font-size: 1.1rem; }
.mapa a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--s-3); height: 100%;
  padding: var(--s-3); border: 1px solid var(--border); border-top: 4px solid var(--fase); border-radius: var(--radius-md);
  background: var(--surface); color: var(--foreground); text-decoration: none; }
.mapa a:hover { border-color: var(--fase); box-shadow: var(--shadow-md); }
.mapa .num, .etapa-cab .num { grid-row: 1 / span 3; width: 28px; height: 28px; border-radius: 50%; background: var(--fase); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; flex: none; }
.mapa .t { font-weight: 700; line-height: 1.3; }
.mapa .s { font-size: var(--t-sm); color: var(--muted-foreground); }
.mapa .q { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); margin-top: var(--s-1); }
.mapa li.e-voce a { background: var(--orange-100); }
.mapa li.e-voce .q { color: var(--orange-700); }
@media (max-width: 1100px) { .mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mapa li::after { display: none; } }
@media (max-width: 600px) { .mapa { grid-template-columns: 1fr; } }
.saidas ul { margin: var(--s-1) 0 0; padding-left: var(--s-4); } .saidas li { margin-bottom: var(--s-2); } .saidas p { margin: 0; }
.etapa { border-left: 4px solid var(--fase); scroll-margin-top: var(--s-4); }
.etapa-cab { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.etapa-cab .num { width: 36px; height: 36px; font-size: 1rem; }
.etapa-cab h2 { border: none; padding: 0; margin: 0 0 var(--s-1); }
.etapa h3, .faq h3 { font-size: var(--t-base); margin: var(--s-4) 0 var(--s-2); }
.passos { margin: 0 0 var(--s-3); padding-left: var(--s-6); }
.passos li { margin-bottom: var(--s-2); padding-left: var(--s-1); max-width: 90ch; }
.passos li::marker { color: var(--fase, var(--primary)); font-weight: 700; }
.acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) 0; }
.voce { padding: var(--s-2) var(--s-3); border-radius: var(--radius-md); margin: var(--s-3) 0; font-size: 0.8125rem; max-width: none; }
.voce-sim { background: var(--orange-100); color: var(--orange-700); }
.voce-nao { background: var(--surface-muted); color: var(--foreground-secondary); }
.dica { background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--s-2) var(--s-3); font-size: 0.8125rem; max-width: none; }
.regra-destaque { border: 1px solid var(--border); border-left: 4px solid var(--danger-500); border-radius: var(--radius-md);
  padding: var(--s-3); margin: var(--s-3) 0; }
.tabela-ajuda { margin: var(--s-2) 0 var(--s-3); }
.grupos { padding-left: var(--s-6); } .grupos li { margin-bottom: var(--s-1); }
.decisao { list-style: none; counter-reset: q; margin: 0 0 var(--s-3); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.decisao li { counter-increment: q; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border); }
.decisao li:last-child { border-bottom: none; }
.decisao li::before { content: counter(q); width: 26px; height: 26px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--warning-100); color: var(--warning-700); display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; flex: none; }
.decisao .pergunta { flex: 1 1 320px; }
.decisao .sim { color: var(--muted-foreground); font-size: var(--t-sm); font-weight: 700; }
.fluxo-mini { list-style: none; counter-reset: f; padding: 0; margin: 0 0 var(--s-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.fluxo-mini li { counter-increment: f; background: var(--success-100); color: var(--success-700); border-radius: var(--radius-md); padding: var(--s-3); font-size: 0.8125rem; }
.fluxo-mini li::before { content: counter(f) ". "; font-weight: 700; }
.fluxo-mini code { white-space: normal; word-break: break-all; }
@media (max-width: 900px) { .fluxo-mini { grid-template-columns: 1fr 1fr; } }
.cards-telas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.cards-telas > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s-3) var(--s-4); }
.cards-telas h3 { margin-top: 0; }
.matriz-papeis td:not(:first-child), .matriz-papeis th:not(:first-child) { text-align: center; }
.matriz-papeis .col-voce { background: var(--orange-100); }
.faq details { border-bottom: 1px solid var(--border); padding: var(--s-1) 0; }
.faq summary { font-weight: 600; color: var(--foreground); margin: var(--s-2) 0; }
.faq details p { margin: 0 0 var(--s-3); color: var(--foreground-secondary); }
.glossario { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.glossario dt { font-weight: 700; } .glossario dd { margin: 0; color: var(--foreground-secondary); }
@media (max-width: 600px) { .glossario { grid-template-columns: 1fr; } .glossario dd { margin-bottom: var(--s-2); } }

/* Fontes (/admin/fontes): fonte padrão (rádios) acima das abas, uma aba por fonte */
.fonte-padrao fieldset { border: none; margin: 0; padding: 0; }
.fonte-padrao legend { font-size: var(--t-md); font-weight: 600; padding: 0; margin-bottom: var(--s-1); }
.fonte-padrao { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.radios { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.form .radios label { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: 7px var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 400; color: var(--foreground); cursor: pointer; }
.form .radios label:has(input:checked) { border-color: var(--primary); background: var(--orange-100); }
.form .radios label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.fonte-abas { padding-top: var(--s-2); }
.fonte-abas .abas { margin: 0 0 var(--s-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: var(--s-6); }
.fonte-abas .abas a { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; }
.fonte-abas .abas .selo { font-size: 0.625rem; padding: 1px 7px; }

/* Configuração → Integração SER */
.ser-estado { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0 var(--s-4); }
.ser-testar { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.fields.params dd.radios { margin: 0; }
.fields.params dd input[type=checkbox], .fields.params dd input[type=radio] { width: auto; padding: 0; }
.fields.params dd label.inline { margin-top: var(--s-2); }
.modo-envio { display: inline-flex; font-size: 0.71875rem; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  background: var(--warning-100); color: var(--warning-700); }
.modo-envio.real { background: var(--danger-100); color: var(--danger-700); }
.salvar-revisao { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-3); padding: var(--s-3) 0; }
.salvar-revisao.nao-salva { position: sticky; bottom: 0; z-index: 5; padding: var(--s-3) var(--s-4); background: var(--surface);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
.modo-envio.s3 { background: var(--success-100); color: var(--success-700); }

/* Ajuda: bloco só para Admin (renderizado no servidor, não escondido por CSS) */
.so-admin { margin-top: var(--s-6); padding: var(--s-4) var(--s-4) var(--s-2); background: var(--surface-muted);
  border-left: 3px solid var(--navy-600); border-radius: var(--radius-md); }
.so-admin h3 { margin: var(--s-2) 0 var(--s-2); }
.so-admin h4 { margin: var(--s-3) 0 var(--s-2); font-size: 0.875rem; }
.so-admin ul { margin: 0 0 var(--s-2); padding-left: var(--s-4); }
.so-admin li { margin-bottom: var(--s-1); }
.so-admin .dica { background: var(--surface); }

/* ---- Spec 15: login pelo Keycloak, emergência, acesso pendente ---- */
.login-acesso a.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); text-decoration: none; }
.login-acesso .login-caption-emergencia { color: var(--danger-700); }
.faixa-emergencia { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4);
  background: var(--danger-100); color: var(--danger-700); border-bottom: 1px solid var(--danger-500);
  font-size: 0.8125rem; font-weight: 600; position: sticky; top: 0; z-index: 20; }
.pendente { max-width: 480px; margin: 12vh auto 0; padding: var(--s-8); background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-md); }
.pendente .login-caption { margin-top: var(--s-4); color: var(--orange-700); }
.pendente h1 { margin: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 700; }
.pendente p:not(.login-caption) { margin: var(--s-4) 0 var(--s-6); line-height: 1.6; color: var(--foreground-secondary); }
.chip-emergencia { background: var(--danger-100); color: var(--danger-700); }
.chip-pendente { background: var(--orange-100); color: var(--orange-700); border-color: transparent; }
.abas-usuarios { margin: 0 0 var(--s-3); font-size: var(--t-sm); }
.abas-usuarios a.ativa { font-weight: 700; text-decoration: underline; text-decoration-color: var(--program); }
.acoes-usuario { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Evidência do check na linha do item da amostra */
.evid-check summary { cursor: pointer; }
.evid-check > p { color: var(--ink-muted); margin: var(--s-1) 0; }
.evid-status { font-size: var(--t-sm); font-weight: 600; margin-left: var(--s-2); }
.evid-status.status-ok { color: var(--ok); } .evid-status.status-alerta { color: var(--warn); }
.evid-status.status-falha { color: var(--fail); } .evid-status.status-nao_verificado { color: var(--pending); }
.evid-fotos { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-2) 0; }
.evid-fotos figure { margin: 0; width: 120px; font-size: var(--t-sm); color: var(--ink-muted); }
.evid-fotos img { width: 120px; height: 96px; object-fit: cover; border: 1px solid var(--rule); display: block; }
.evid-fotos .sig img { object-fit: contain; background: #fff; }
.check:target { outline: 2px solid var(--primary); outline-offset: 2px; }
.checks-item td { vertical-align: top; }

/* Governança: "como funciona" da regra (linha expansível e cartão no detalhe) */
.regra-cel { display: flex; align-items: flex-start; gap: var(--s-2); }
.expandir { flex: 0 0 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--ink-muted); font-size: var(--t-sm); cursor: pointer; }
.expandir:hover { background: var(--surface-muted); color: var(--ink); }
.expandir:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.table tr.explicacao > td { background: var(--surface-muted); white-space: normal; text-align: left; font-family: var(--font); }
.explicacao p, .como-funciona p { max-width: 90ch; margin: 0 0 var(--s-2); font-size: var(--t-sm); color: var(--ink); line-height: 1.55; }
.como-funciona p { font-size: var(--t-base); }
.param { font-family: var(--mono); font-weight: 600; }
.filtros-painel > summary { margin: 0; font-size: var(--t-base); }
.filtros-painel[open] > summary { margin-bottom: var(--s-3); }

/* Dashboard: saúde dos serviços (só Admin) */
.saude > summary { cursor: pointer; font-weight: 600; }
.saude[open] > summary { margin-bottom: var(--s-3); }
.saude-resumo-ok { color: var(--ok); } .saude-resumo-alerta { color: var(--warn); } .saude-resumo-erro { color: var(--fail); }
.saude-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.saude-item { border-left: 4px solid var(--border-strong); padding: var(--s-2) var(--s-3); background: var(--surface-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.saude-item.saude-ok { border-left-color: var(--ok); } .saude-item.saude-alerta { border-left-color: var(--warn); }
.saude-item.saude-erro { border-left-color: var(--fail); }
.saude-nome { font-size: var(--t-sm); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.saude-valor { font-weight: 600; margin-top: 2px; }
.saude-detalhe { font-size: var(--t-sm); color: var(--ink-muted); margin-top: 2px; overflow-wrap: anywhere; }

/* Pausa de lote */
.selo.pausado { color: var(--warning-700); background: var(--warning-100); }
.pausa-cel { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.pausa-cel form { margin: 0; }
.notice.pausa { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.acao-lote { margin: 0 0 var(--s-3); }
.atualizado-lista { margin: 0 0 var(--s-1) auto; height: 36px; display: flex; align-items: center; }   /* centro do select (36 px) */