/* Navarro Performance · Design system escuro (base do BI de gestão)
   Referência: print do dashboard antigo (fundo azul-marinho, cards escuros, azul vibrante como destaque). */
:root{
  --bg:#050f1e; --bg-glow:#0a2542; --card:#0d1c2d; --card-2:#0a1626; --line:#1f3047; --line-2:#2b4260;
  --ink:#ffffff; --ink-2:#c7d2e0; --muted:#8497ad;
  --blue:#3295f6; --blue-2:#2f84e0; --blue-3:#205082; --blue-bg:rgba(50,149,246,.14);
  --gold:#e9b73c; --silver:#b9c2cf; --bronze:#cb8559;
  --ok:#2fbf71; --warn:#f5a524; --bad:#ef4444;
  --radius:18px; --radius-sm:12px;
  --font-display:"Outfit","Sora","Segoe UI",system-ui,sans-serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 var(--font-text);
  background:radial-gradient(1200px 520px at 50% -160px,var(--bg-glow),transparent 70%),var(--bg);background-attachment:fixed}
.wrap{max-width:1240px;margin:0 auto;padding:28px 24px 72px}
.hidden{display:none!important}
.num,.display{font-family:var(--font-display)}
.eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

.card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:var(--radius)}
.card.destaque{border-color:var(--blue);box-shadow:0 0 0 1px rgba(50,149,246,.25),0 10px 40px -18px rgba(50,149,246,.55)}

button{font:inherit;cursor:pointer;border-radius:10px;padding:9px 16px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-weight:600}
button:hover{border-color:var(--blue)}
button.primary{background:var(--blue);border-color:var(--blue);color:#04101f}
button:disabled{opacity:.5;cursor:default}
.linkbtn{border:0;background:none;padding:0;color:var(--muted);font-weight:500;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}

label.f,.ctl label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
input,select{font:inherit;color:var(--ink);background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;color-scheme:dark}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.segmento{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:4px;background:var(--card-2);gap:2px;flex-wrap:wrap}
.segmento button{border:0;padding:7px 16px;border-radius:9px;color:var(--ink-2);font-weight:500;background:transparent}
.segmento button.on{background:var(--blue);color:#04101f;font-weight:700}

.kpi{padding:22px 24px}
.kpi .t{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.kpi .n{font-family:var(--font-display);font-size:56px;line-height:1.05;font-weight:700;margin-top:6px}
.kpi .s{font-size:13px;color:var(--muted);margin-top:2px}
.kpi.azul .n{color:var(--blue)}

.medalha{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:700;font-size:13px;color:#1a1204}
.medalha.m1{background:var(--gold)} .medalha.m2{background:var(--silver)} .medalha.m3{background:var(--bronze)}

.err{color:#ff8a8a;font-size:13px;min-height:18px;margin-top:10px}
#aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#fff;color:#04101f;padding:10px 18px;border-radius:10px;z-index:30;font-size:14px;max-width:92vw}
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius);max-width:390px;width:92vw;padding:22px}
dialog::backdrop{background:rgba(0,0,0,.6)}