/* ===== Padrão visual: painel azul-marinho e verde (só aparência; carregado depois do style.css) ===== */
:root{
  --bg:#f3f5f8; --surface:#fff; --surface-2:#f7f9fb; --ink:#0f172a; --muted:#5b6474; --line:#e3e7ee;
  --accent:#0f7a55; --accent-ink:#fff; --accent-soft:#e3f2ec;
  --good:#127a3e; --good-soft:#e4f4ea; --warn:#a35a00; --warn-soft:#fff2dc; --bad:#c42b1c; --bad-soft:#fdecea;
  --plate:#1f4fa3; --bar:#9cbfe9;
  --card:#fff; --tx:#0f172a; --mut:#5b6474; --bd:#e3e7ee; --in:#f7f9fb; --pri:#0f7a55; --soft:#e3f2ec;
  --err:#c42b1c; --errs:#fdecea; --ok:#127a3e; --oks:#e4f4ea; --warns:#fff2dc; --navy:#0b1220; --grid:#eceff4; --r:12px;
  --s1:#2a78d6; --s2:#eb6834;
  --sombra:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.04);
  --f-display:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --f-body:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-mono:ui-monospace,Consolas,"Cascadia Mono",monospace;
  --topo-h:60px; --lat-w:232px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0e16; --surface:#111827; --surface-2:#0c121d; --ink:#e6eaf2; --muted:#8f9aae; --line:#1f2a3c;
  --accent:#34c38f; --accent-ink:#06261b; --accent-soft:#0f2e24;
  --good:#56d38a; --good-soft:#12301f; --warn:#f0b04a; --warn-soft:#3a2a10; --bad:#ff7b72; --bad-soft:#3a1715;
  --plate:#7da7ef; --bar:#2c5d99;
  --card:#111827; --tx:#e6eaf2; --mut:#8f9aae; --bd:#1f2a3c; --in:#0c121d; --pri:#34c38f; --soft:#0f2e24;
  --err:#ff7b72; --ok:#56d38a; --grid:#1a2332; --s1:#3987e5; --s2:#d95926; --sombra:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0e16; --surface:#111827; --surface-2:#0c121d; --ink:#e6eaf2; --muted:#8f9aae; --line:#1f2a3c;
  --accent:#34c38f; --accent-ink:#06261b; --accent-soft:#0f2e24;
  --good:#56d38a; --good-soft:#12301f; --warn:#f0b04a; --warn-soft:#3a2a10; --bad:#ff7b72; --bad-soft:#3a1715;
  --plate:#7da7ef; --bar:#2c5d99; --card:#111827; --tx:#e6eaf2; --mut:#8f9aae; --bd:#1f2a3c; --in:#0c121d; --pri:#34c38f; --soft:#0f2e24;
  --err:#ff7b72; --ok:#56d38a; --grid:#1a2332; --s1:#3987e5; --s2:#d95926; --sombra:none; color-scheme:dark}

body.tema{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--f-body);font-variant-numeric:tabular-nums}
body.tema::before{display:none}

/* ---- barra superior ---- */
.topo{position:sticky;top:0;z-index:30;min-height:var(--topo-h);background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;
  padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));box-sizing:border-box;flex-wrap:wrap}
.topo .marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0;margin-right:auto}
.topo .logo{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:none}
.topo .nome{display:grid;line-height:1.2;min-width:0}.topo .nome b{font-size:15px;font-weight:700}
.topo .nome small{font-size:12px;color:#c9d2e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo .hctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.topo .fl{color:#c9d2e3}
.topo select{background:#131c2e;color:#fff;border-color:#2a3650}
.topo .discreto{color:#c9d2e3}
.topo .btn.pri{background:#34c38f;color:#06261b;border-color:#34c38f}
.topo .pill.ac{background:rgba(52,195,143,.18);color:#7fe0b8}
.con{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#c9d2e3}
.con i{width:8px;height:8px;border-radius:50%;background:#34c38f;box-shadow:0 0 0 3px rgba(52,195,143,.2)}
.con.off i{background:#ff7b72;box-shadow:0 0 0 3px rgba(255,123,114,.2)}

/* ---- menu lateral (PC) ---- */
.lateral{position:fixed;top:var(--topo-h);bottom:0;left:0;width:var(--lat-w);background:var(--navy);overflow-y:auto;padding:10px 10px 64px;box-sizing:border-box;z-index:20;border-top:1px solid #172036}
.lgrupo{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7c879b;padding:14px 10px 6px}
.litem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#c9d2e3;text-decoration:none;font-size:13.5px;font-weight:500}
.litem:hover{background:rgba(255,255,255,.05);color:#fff}
.litem.on{background:linear-gradient(90deg,rgba(52,195,143,.18),rgba(52,195,143,.04));box-shadow:inset 3px 0 0 #34c38f;color:#fff;font-weight:600}
.litem svg{flex:none;opacity:.9}
.lrodape{position:fixed;bottom:0;left:0;width:var(--lat-w);padding:12px 20px;background:var(--navy);border-top:1px solid #172036;box-sizing:border-box}
.subabas,.abas{display:none}
main.conteudo{margin-left:var(--lat-w);max-width:1280px;padding:22px 24px 60px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:1000px){main.conteudo{width:calc(100% - var(--lat-w))}}

/* ---- celular: abas embaixo e subabas no topo ---- */
@media (max-width:999px){
  .lateral,.lrodape{display:none}
  main.conteudo{margin-left:0;padding:14px 16px calc(84px + env(safe-area-inset-bottom))}
  .topo{gap:8px;position:relative}.topo .con span{display:none}.topo .hctl{gap:6px}.topo .btn{padding:6px 10px}
  .subabas{display:flex;gap:4px;overflow-x:auto;position:sticky;top:0;z-index:25;background:var(--surface);border-bottom:1px solid var(--line);padding:6px 12px;scrollbar-width:none}
  .subabas a{flex:none;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:999px}
  .subabas a.on{background:var(--soft);color:var(--pri)}
  .abas{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .abas a{display:grid;justify-items:center;gap:2px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;padding:6px 2px;border-radius:10px}
  .abas a.on{color:var(--pri);background:var(--soft)}
  [style*="position:sticky;bottom:0"]{bottom:calc(64px + env(safe-area-inset-bottom))!important}
}

/* ---- componentes ---- */
.sec{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}
.sec h2,h2{font:700 16px var(--f-display);letter-spacing:0}
.sec h3,h3{font:700 14px var(--f-display)}
.sechead p{color:var(--mut);font-size:12.5px}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sombra);padding:14px 16px}
.kpi .lab{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--mut)}
.kpi .val{font:650 26px var(--f-display);letter-spacing:-.01em}
.kpi .sub{font-size:12px}
.destaque .kpi:first-child .val{font-size:44px;line-height:1.05}
.trend i{background:var(--bar)}.trend .cur i{background:var(--s1)}
select,input,textarea{border-radius:9px;background:var(--in);border:1px solid var(--bd);color:var(--tx);padding:7px 10px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
.form label,.form label>span{font-size:12px;font-weight:600;color:var(--mut);text-transform:none;letter-spacing:0}
.btn{border-radius:9px;font-weight:650;background:var(--card);border:1px solid var(--bd);color:var(--tx);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--pri)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--accent-ink)}
.btn.lnk{color:var(--pri)}
a{color:var(--pri)}
.pill{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px}
.flash{border-radius:10px;font-weight:600}
.note{border-radius:0 10px 10px 0;border-left-color:var(--pri);background:var(--soft)}
.note.w{border-left-color:var(--warn);background:var(--warns,var(--warn-soft))}
.tw{border-radius:10px;border-color:var(--bd)}
th{font-size:11px;letter-spacing:.06em;color:var(--mut);background:var(--in);font-weight:700}
tbody tr:hover td{background:color-mix(in srgb,var(--in) 70%,transparent)}
.toast{background:var(--navy);color:#fff;border-radius:10px}
.plate,.fno,code,.k{font-family:var(--f-mono)}
.empty{border-radius:10px;background:var(--in)}
.seg input:checked+span{background:var(--tx);color:var(--card)}
.meter .bar{background:var(--grid);border:0;height:8px}.meter .bar i{background:var(--pri);border-radius:0 4px 4px 0}
#drawer{border-radius:14px 0 0 14px}
#scrim{backdrop-filter:blur(2px);background:rgba(11,18,32,.45)}
.grupos{display:none}

/* ---- impressão: só o conteúdo ---- */
@media print{.topo,.lateral,.lrodape,.abas,.subabas,.noprint{display:none!important}main.conteudo{margin:0;padding:0;width:auto}.sec{box-shadow:none;border:0}}
