/* ============================================================================
   "Vidraça de Papel" — janela fosca sobre papel frio, azul institucional único,
   a medalha é o único elemento saturado. Inspirado em macOS/iOS (HIG).
   Tema claro + escuro por tokens. Zero dependências externas.
   ============================================================================ */
:root{
  --desktop-a:#edf0f4; --desktop-b:#e3e7ee;
  --chrome:rgba(255,255,255,.72); --chrome-solid:#f5f7fa;
  --paper:#ffffff; --paper-2:#f2f2f5;
  --ink:#1c1c1e; --ink-2:#5c6470; --ink-3:#9096a0;
  --accent:#185abd; --accent-2:#2f73d6; --accent-tint:#eaf1fb;
  --hairline:rgba(0,0,0,.09); --hairline-strong:rgba(0,0,0,.14); --hairline-top:rgba(255,255,255,.7);
  --danger:#d8402f; --danger-tint:#fcecea; --ok:#1b9e6b; --ok-tint:#e9f7f1;
  --bronze:#b06a34; --bronze-a:#ce8a4a; --bronze-b:#8f5326;
  --prata:#8a8f98; --prata-a:#cbd0d6; --prata-b:#9198a0;
  --ouro:#b8912a; --ouro-a:#e7c15a; --ouro-b:#b58a1e;
  --cad:#8a929e; --cad-a:#aab0ba; --cad-b:#7c848f;
  --r-window:20px; --r-card:16px; --r-group:14px; --r-field:11px; --r-control:9px; --r-pill:999px;
  --vibrancy:blur(30px) saturate(180%); --scrim-blur:blur(20px);
  --sh-window:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(15,23,42,.06),0 24px 56px -20px rgba(15,23,42,.32);
  --sh-card:0 1px 1px rgba(0,0,0,.04),0 6px 20px -10px rgba(15,23,42,.12);
  --sh-pop:0 8px 24px -6px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);
  --focus:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent);
  --ease:cubic-bezier(.32,.72,0,1);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --desktop-a:#0a0c10; --desktop-b:#05070b;
    --chrome:rgba(28,30,36,.68); --chrome-solid:#171a20;
    --paper:#1b1e24; --paper-2:#24272e;
    --ink:#f5f5f7; --ink-2:#9da3ae; --ink-3:#6c727c;
    --accent:#5a97f5; --accent-2:#7fb0f8; --accent-tint:#16233a;
    --hairline:rgba(255,255,255,.11); --hairline-strong:rgba(255,255,255,.17); --hairline-top:rgba(255,255,255,.06);
    --danger:#ff5247; --danger-tint:#3a1714; --ok:#34d399; --ok-tint:#0e2a20;
    --bronze:#d69a5c; --bronze-a:#e7b074; --bronze-b:#a9682f;
    --prata:#c4c7cd; --prata-a:#dde1e6; --prata-b:#9ca1a8;
    --ouro:#e3c04a; --ouro-a:#f2d473; --ouro-b:#b99326;
    --cad:#98a0ad; --cad-a:#aab2be; --cad-b:#7f8792;
    --sh-window:0 0 0 .5px rgba(255,255,255,.08),0 20px 60px -20px rgba(0,0,0,.6);
    --sh-card:0 0 0 .5px var(--hairline); --sh-pop:0 12px 34px -8px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --desktop-a:#edf0f4; --desktop-b:#e3e7ee; --chrome:rgba(255,255,255,.72); --chrome-solid:#f5f7fa;
  --paper:#ffffff; --paper-2:#f2f2f5; --ink:#1c1c1e; --ink-2:#5c6470; --ink-3:#9096a0;
  --accent:#185abd; --accent-2:#2f73d6; --accent-tint:#eaf1fb;
  --hairline:rgba(0,0,0,.09); --hairline-strong:rgba(0,0,0,.14); --hairline-top:rgba(255,255,255,.7);
  --danger:#d8402f; --danger-tint:#fcecea; --ok:#1b9e6b; --ok-tint:#e9f7f1;
  --bronze:#b06a34; --bronze-a:#ce8a4a; --bronze-b:#8f5326; --prata:#8a8f98; --prata-a:#cbd0d6; --prata-b:#9198a0;
  --ouro:#b8912a; --ouro-a:#e7c15a; --ouro-b:#b58a1e; --cad:#8a929e; --cad-a:#aab0ba; --cad-b:#7c848f;
  --sh-window:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(15,23,42,.06),0 24px 56px -20px rgba(15,23,42,.32);
  --sh-card:0 1px 1px rgba(0,0,0,.04),0 6px 20px -10px rgba(15,23,42,.12); --sh-pop:0 8px 24px -6px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);
}
:root[data-theme="dark"]{
  --desktop-a:#0a0c10; --desktop-b:#05070b; --chrome:rgba(28,30,36,.68); --chrome-solid:#171a20;
  --paper:#1b1e24; --paper-2:#24272e; --ink:#f5f5f7; --ink-2:#9da3ae; --ink-3:#6c727c;
  --accent:#5a97f5; --accent-2:#7fb0f8; --accent-tint:#16233a;
  --hairline:rgba(255,255,255,.11); --hairline-strong:rgba(255,255,255,.17); --hairline-top:rgba(255,255,255,.06);
  --danger:#ff5247; --danger-tint:#3a1714; --ok:#34d399; --ok-tint:#0e2a20;
  --bronze:#d69a5c; --bronze-a:#e7b074; --bronze-b:#a9682f; --prata:#c4c7cd; --prata-a:#dde1e6; --prata-b:#9ca1a8;
  --ouro:#e3c04a; --ouro-a:#f2d473; --ouro-b:#b99326; --cad:#98a0ad; --cad-a:#aab2be; --cad-b:#7f8792;
  --sh-window:0 0 0 .5px rgba(255,255,255,.08),0 20px 60px -20px rgba(0,0,0,.6);
  --sh-card:0 0 0 .5px var(--hairline); --sh-pop:0 12px 34px -8px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans); color:var(--ink); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background:linear-gradient(160deg,var(--desktop-a),var(--desktop-b)); background-attachment:fixed;
  min-height:100vh; padding:24px; display:flex; justify-content:center; align-items:flex-start;
}
@media(min-width:700px){ body{padding:40px} }
a{color:var(--accent);text-decoration:none}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}

/* ------------- janela ------------- */
.window{
  width:100%; max-width:720px; background:var(--paper); border-radius:var(--r-window);
  box-shadow:var(--sh-window); overflow:hidden; display:flex; flex-direction:column;
  position:relative; min-height:min(560px,84vh);
}
.window::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 .5px 0 var(--hairline-top);z-index:5}
.window.wide{max-width:1080px}

/* chrome translúcido */
.chrome{ background:var(--chrome); -webkit-backdrop-filter:var(--vibrancy); backdrop-filter:var(--vibrancy); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .chrome{background:var(--chrome-solid)} }

.titlebar{
  display:flex; align-items:center; gap:16px; padding:0 18px; height:52px; flex-shrink:0;
  border-bottom:.5px solid var(--hairline); position:sticky; top:0; z-index:4;
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.mark{width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.wordmark{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.confbadge{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--danger);background:var(--danger-tint);border:.5px solid color-mix(in srgb,var(--danger) 30%,transparent);padding:3px 9px;border-radius:var(--r-pill)}

.window-body{flex:1;overflow-y:auto;padding:28px 28px 32px}
@media(min-width:700px){.window-body{padding:34px 40px 40px}}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:.5px solid var(--hairline);flex-shrink:0}

/* ------------- step-rail ------------- */
.rail{margin-left:auto;display:flex;align-items:center;gap:12px}
.rail .segs{display:flex;gap:4px}
.rail .seg{width:16px;height:4px;border-radius:var(--r-pill);background:var(--hairline-strong);transition:.3s var(--ease)}
.rail .seg.done{background:color-mix(in srgb,var(--accent) 55%,var(--hairline-strong))}
.rail .seg.cur{background:var(--accent);width:26px}
.rail .lbl{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){.rail .seg{width:10px}.rail .lbl{display:none}}

/* ------------- tipografia ------------- */
.steptitle{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;text-wrap:balance}
h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
h3{font-size:17px;font-weight:600;margin:0 0 4px}
.help{font-size:14px;color:var(--ink-2);margin:0 0 22px;max-width:60ch}
.sub{font-size:13px;color:var(--ink-2)}
.kicker{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.tabnum{font-variant-numeric:tabular-nums}

/* ------------- cartões / grupos ------------- */
.card{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:22px}
.section{margin-bottom:26px}
.sectionhead{margin:0 0 14px}
.sectionhead .kicker{display:block;margin-bottom:3px}
.grouphead{font-size:13px;color:var(--ink-2);margin:0 0 8px 4px}

/* ------------- perguntas / opções ------------- */
.q{margin-bottom:26px}
.q .qt{font-size:16px;font-weight:500;line-height:1.45;margin:0 0 12px}
.opts{background:var(--paper-2);border-radius:var(--r-group);overflow:hidden}
.opt{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;cursor:pointer;position:relative;min-height:44px;transition:background .12s var(--ease)}
.opt+.opt{border-top:.5px solid var(--hairline)}
.opt::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .15s var(--ease)}
.opt:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.opt.sel{background:var(--accent-tint)}
.opt.sel::after{background:var(--accent)}
.opt input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--ink-3);position:relative;flex-shrink:0;margin:1px 0 0;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
.opt input[type=radio]:checked{border-color:var(--accent);background:var(--accent)}
.opt input[type=radio]:checked::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.opt .otext{font-size:14px;line-height:1.5;color:var(--ink);padding-top:1px}
.opt.sel .otext{font-weight:500}
.opt .chip{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);flex-shrink:0;margin-top:2px}

/* segmented control (Sim/Não) */
.segmented{display:inline-flex;background:var(--paper-2);border-radius:var(--r-control);padding:3px;gap:3px;width:100%;max-width:280px}
.segmented.tri{max-width:400px}
.segmented label{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;text-align:center;font-size:14px;font-weight:500;padding:8px 12px;border-radius:calc(var(--r-control) - 2px);cursor:pointer;color:var(--ink-2);transition:.18s var(--ease)}
.segmented input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.segmented label.on{background:var(--paper);color:var(--ink);box-shadow:var(--sh-pop)}
.segmented label:focus-within{box-shadow:var(--focus)}

/* campos de texto */
.fieldgroup{background:var(--paper-2);border-radius:var(--r-group);overflow:hidden}
.field{display:block;padding:11px 16px}
.field+.field{border-top:.5px solid var(--hairline)}
.field span{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],textarea{width:100%;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:15px;padding:0}
input:focus,textarea:focus{outline:none}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r-field)}
textarea{resize:vertical;min-height:56px;line-height:1.5}
.field.solo{background:var(--paper-2);border-radius:var(--r-field);margin-bottom:12px}

/* ------------- botões ------------- */
.btn{appearance:none;font-family:inherit;font-size:15px;font-weight:600;padding:11px 20px;border-radius:var(--r-control);border:.5px solid var(--hairline-strong);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .1s var(--ease),background .15s,box-shadow .15s;min-height:44px}
.btn:hover{box-shadow:var(--sh-card)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn.primary:hover{background:var(--accent-2)}
.btn.primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.text{background:transparent;border-color:transparent;color:var(--accent);padding:11px 12px}
.btn.text:hover{box-shadow:none;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn.full{width:100%;justify-content:center;display:inline-flex;align-items:center}
.btn.danger{color:var(--danger)}

/* ------------- medalha / nível ------------- */
.medal{width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;position:relative;color:#fff}
.medal::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.18)}
.medal.sm{width:64px;height:64px}
.medal .mtier{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1}
.medal.sm .mtier{font-size:11px}
.medal .mscore{font-size:11px;opacity:.9;margin-top:3px;font-variant-numeric:tabular-nums}
.medal.Bronze{background:radial-gradient(circle at 35% 30%,var(--bronze-a),var(--bronze-b))}
.medal.Prata{background:radial-gradient(circle at 35% 30%,var(--prata-a),var(--prata-b))}
.medal.Ouro{background:radial-gradient(circle at 35% 30%,var(--ouro-a),var(--ouro-b))}
.medal.Cadastramento{background:radial-gradient(circle at 35% 30%,var(--cad-a),var(--cad-b))}
.medal.Prata .mtier,.medal.Prata .mscore{color:#2b2f36}
.medal.Ouro .mtier,.medal.Ouro .mscore{color:#4a3a09}
.medal.Bronze .mtier,.medal.Bronze .mscore{color:#2e1c07}
.medal.Cadastramento .mtier,.medal.Cadastramento .mscore{color:#23272d}

.leveltag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.mdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mdot.Bronze{background:var(--bronze)}.mdot.Prata{background:var(--prata)}.mdot.Ouro{background:var(--ouro)}.mdot.Cadastramento{background:var(--cad)}
.tier-Bronze{color:var(--bronze)}.tier-Prata{color:var(--prata)}.tier-Ouro{color:var(--ouro)}.tier-Cadastramento{color:var(--cad)}

/* ------------- notas ------------- */
.note{padding:12px 15px;border-radius:var(--r-field);font-size:13.5px;margin:0 0 16px;display:flex;gap:9px;align-items:flex-start}
.note.ok{background:var(--ok-tint);color:color-mix(in srgb,var(--ok) 88%,var(--ink))}
.note.warn{background:var(--danger-tint);color:color-mix(in srgb,var(--danger) 82%,var(--ink))}
.note.info{background:var(--accent-tint);color:color-mix(in srgb,var(--accent) 78%,var(--ink))}

/* ------------- confirmação ------------- */
.confirm{text-align:center;padding-top:14px}
.checkmark{width:60px;height:60px;border-radius:50%;background:var(--ok-tint);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.codeblock{font-family:var(--mono);font-size:12px;white-space:pre;overflow:auto;background:var(--paper-2);border-radius:var(--r-field);padding:14px;line-height:1.5;max-height:240px;text-align:left}

/* ------------- painel ------------- */
.panel{display:flex;min-height:0;flex:1}
.sidebar{width:216px;flex-shrink:0;padding:18px 12px;border-right:.5px solid var(--hairline);display:flex;flex-direction:column;gap:2px}
.sidebar .shead{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:6px 10px 8px}
.filter{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:9px 10px;border-radius:var(--r-control);cursor:pointer;font-size:14px;color:var(--ink);transition:background .12s;border:0;background:transparent;font-family:inherit;text-align:left;width:100%}
.filter:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.filter.active{background:var(--accent-tint);color:var(--accent);font-weight:600}
.filter .fcount{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--paper-2);border-radius:var(--r-pill);padding:1px 8px;min-width:22px;text-align:center}
.filter.active .fcount{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.panel-content{flex:1;min-width:0;width:100%;padding:22px 24px}
.sidebar-foot{margin-top:auto;padding-top:12px}
@media(max-width:820px){
  .panel{flex-direction:column}
  .sidebar{width:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:.5px solid var(--hairline);gap:6px;padding:12px}
  .sidebar .shead,.sidebar-foot{display:none}
  .filter{flex:0 0 auto;width:auto}
}

.kpis{display:flex;flex-wrap:wrap;gap:0;margin-bottom:20px}
.stat{padding:2px 22px;flex:0 0 auto}
.stat:first-child{padding-left:0}
.stat+.stat{border-left:.5px solid var(--hairline)}
.stat .n{font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px;color:var(--ink-2);margin-top:5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
th,td{text-align:left;padding:12px 10px;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
td.num,th.num,td.nowrapc{white-space:nowrap;overflow-wrap:normal}
thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:600;border-bottom:.5px solid var(--hairline)}
tbody tr{cursor:pointer;transition:background .1s}
tbody td{border-bottom:.5px solid var(--hairline)}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
tbody tr:focus-visible{background:var(--accent-tint);outline:2px solid var(--accent);outline-offset:-2px}
td.num{font-variant-numeric:tabular-nums}
.evo-up{color:var(--accent)}.evo-down{color:var(--danger)}.evo-eq{color:var(--ink-3)}
.chev{color:var(--ink-3);text-align:right}

/* ------------- sheet ------------- */
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.4);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);display:none;align-items:center;justify-content:center;padding:24px;z-index:50}
.scrim.show{display:flex}
.sheet{background:var(--paper);border-radius:var(--r-window);width:100%;max-width:600px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-window);position:relative}
.sheet .grabber{width:36px;height:5px;border-radius:var(--r-pill);background:var(--ink-3);opacity:.4;margin:10px auto 0;flex-shrink:0}
.sheet .sheethead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 22px 0}
.sheet .sheetbody{overflow-y:auto;padding:14px 22px 24px}
@media(max-width:560px){
  .scrim{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:var(--r-window) var(--r-window) 0 0;max-height:92vh}
}

.pbar{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:13px}
.pbar .pname{width:210px;flex-shrink:0;color:var(--ink-2)}
@media(max-width:560px){.pbar .pname{width:130px}}
.pbar .ptrack{flex:1;height:7px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden}
.pbar .pfill{height:100%;border-radius:var(--r-pill);background:var(--accent);transition:width .4s ease-out}
.pbar .pfill.zero{background:var(--danger)}
.pbar .pval{width:64px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pbar.zero .ptrack{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 55%,transparent)}
.pbar.zero .pval{color:var(--danger);font-weight:600}

.gaplist{list-style:none;padding:0;margin:10px 0 0}
.gaplist li{display:flex;gap:11px;padding:11px 0;border-bottom:.5px solid var(--hairline);font-size:14px;line-height:1.5}
.gaplist li:last-child{border-bottom:0}
.gaplist .ic{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}
.gaplist .ic.block{background:var(--danger-tint);color:var(--danger)}
.gaplist .ic.up{background:var(--accent-tint);color:var(--accent)}
.gpill{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent);white-space:nowrap}

.compl .crow{padding:9px 0;border-bottom:.5px solid var(--hairline);font-size:14px}
.compl .crow:last-child{border-bottom:0}
.compl .clab{font-size:12px;color:var(--ink-2);margin-bottom:2px}

/* ------------- gate ------------- */
.gatewrap{display:flex;align-items:center;justify-content:center;flex:1;padding:40px 24px}
.gate{width:100%;max-width:340px;text-align:center}
.gate .lock{width:44px;height:44px;margin:0 auto 16px;color:var(--accent)}
.gate h2{margin-bottom:6px}
.gate .field.solo{margin:16px 0 12px;text-align:left}
.gate input{padding:11px 14px;text-align:center;font-size:16px}
.shake{animation:shake .4s var(--ease)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ------------- toast ------------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--chrome);-webkit-backdrop-filter:var(--vibrancy);backdrop-filter:var(--vibrancy);color:var(--ink);padding:11px 20px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;z-index:99;box-shadow:var(--sh-pop);transition:opacity .2s,transform .2s;opacity:0;border:.5px solid var(--hairline)}

/* ------------- animações ------------- */
.enter{animation:enter .26s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sheet.pop{animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media(max-width:560px){.sheet.pop{animation:slideup .3s var(--ease)}}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}

.foot{text-align:center;color:var(--ink-3);font-size:12px;padding:18px 24px 4px}
.hidden{display:none!important}

/* ===== classificação: faixa por pontuação (outline, subordinada à medalha) ===== */
.faixatag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);border:1px solid currentColor;background:transparent;white-space:nowrap;line-height:1.3}
td .faixatag{margin-left:8px;vertical-align:1px}
.lockbadge{display:inline-flex;width:15px;height:15px;margin-left:6px;color:var(--danger);vertical-align:-2px}
.medal.locked{filter:saturate(.82)}
.nextstep.block{color:var(--danger);font-weight:600}
.nextstep.maxed{color:var(--ouro);font-weight:600}

/* cartão veredito (sheet) */
.verdict{display:flex;gap:16px;align-items:center;margin:14px 0;padding:14px;border-radius:var(--r-card);background:var(--paper-2)}
.verdict .vlabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.verdict .vtier{font-size:19px;font-weight:700;display:flex;align-items:center;gap:6px;margin-top:2px}
.verdict .vscore{font-size:13px;color:var(--ink-2);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.verdict .vscore b{color:var(--ink);font-weight:600}

/* toolbar do painel + indicador ao vivo */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .grow{flex:1}
.synced{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2.4s var(--ease) infinite;flex-shrink:0}
.livedot.stale{background:var(--danger);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.stat{cursor:pointer;border-radius:10px;transition:background .12s}
.stat:hover{background:var(--paper-2)}
.stat.active{background:var(--accent-tint)}
/* filtro em pílulas (único filtro; substitui sidebar + KPIs) */
.fpills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.fpill{display:inline-flex;align-items:center;gap:8px;border:.5px solid var(--hairline-strong);background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:8px 14px;font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;min-height:38px;transition:.12s}
.fpill:hover{border-color:var(--accent-line)}
.fpill.active{background:var(--accent);border-color:transparent;color:#fff}
.fpill .fdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fpill .fn{font-variant-numeric:tabular-nums;font-weight:700;opacity:.9}
.fpill.active .fn{opacity:1}

/* alternador de visão (Centros | Dashboard) */
.viewtabs{display:inline-flex;background:var(--paper-2);border-radius:var(--r-control);padding:3px;gap:3px;margin-bottom:16px}
.viewtabs button{border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:8px 16px;border-radius:calc(var(--r-control) - 2px);cursor:pointer;min-height:38px}
.viewtabs button.on{background:var(--paper);color:var(--ink);box-shadow:var(--sh-pop)}

/* dashboard */
.statrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.statbig{flex:1;min-width:148px;background:var(--paper-2);border-radius:var(--r-card);padding:16px 18px}
.statbig .v{font-size:29px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.statbig .k{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.statbig .sfx{font-size:15px;font-weight:600;color:var(--ink-2)}
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.dcard{background:var(--paper-2);border-radius:var(--r-card);padding:18px}
.dcard.span2{grid-column:1/-1}
.dcard h3{font-size:14px;margin:0 0 4px;color:var(--ink)}
.dcard .csub{font-size:12px;color:var(--ink-3);margin:0 0 14px}
.cbar{display:grid;grid-template-columns:132px 1fr auto;align-items:center;gap:10px;margin:9px 0;font-size:13px}
@media(max-width:560px){.cbar{grid-template-columns:92px 1fr auto}}
.cbar .lbl{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .track{height:10px;background:var(--paper);border-radius:var(--r-pill);overflow:hidden}
.cbar .fill{height:100%;border-radius:var(--r-pill);background:var(--accent);min-width:3px;transition:width .4s var(--ease)}
.cbar .val{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;text-align:right;min-width:46px}
.dashgrid{grid-auto-flow:row dense}
.dcard{display:flex;flex-direction:column}
.dcard .cbar:last-child{margin-bottom:0}
/* cartograma do Brasil por UF */
.mapwrap{display:flex;flex-direction:column;align-items:center}
.mapgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;width:100%;max-width:300px}
.uftile{aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9.5px;line-height:1.05;border:.5px solid var(--hairline);color:var(--ink-3);background:var(--paper)}
.uftile .ufc{font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;margin-top:1px}
.uftile.has{color:#fff;border-color:transparent}
.maplegend{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:14px;font-size:11px;color:var(--ink-3)}
.maplegend .sw{width:22px;height:9px;border-radius:3px}
/* mapa geográfico do Brasil (choropleth) */
.brmap{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
.brmap path{stroke:var(--hairline);stroke-width:.9;stroke-linejoin:round;transition:fill .3s var(--ease)}
.brmap path:hover{stroke:var(--accent);stroke-width:1.8}
.uflabel{fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.28);stroke-width:2.4px;font-size:22px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-family:var(--sans)}
/* cross-tab / tabela mini */
.crosstab{width:100%;border-collapse:collapse;font-size:13px}
.crosstab th,.crosstab td{padding:7px 6px;text-align:left;border-bottom:.5px solid var(--hairline)}
.crosstab thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
.crosstab td.n,.crosstab th.n{text-align:center;font-variant-numeric:tabular-nums;width:44px}
.crosstab tr:last-child td{border-bottom:0}
.ctdot{display:inline-flex;align-items:center;gap:7px}
/* banner de exemplo */
.demobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-bg);border:.5px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:var(--r-field);padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--ink)}

/* edição no painel */
select{width:100%;border:.5px solid var(--hairline-strong);background:var(--paper-2);color:var(--ink);font-family:inherit;font-size:14px;padding:9px 11px;border-radius:var(--r-field);cursor:pointer}
select:focus{outline:none;box-shadow:var(--focus)}
.editrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:.5px solid var(--hairline);font-size:13.5px}
.editrow .el{color:var(--ink-2)} .editrow select{min-width:120px}
.editlabel{font-size:12px;color:var(--ink-2);margin:14px 0 6px;font-weight:600}
.editlog .le{padding:10px 0;border-bottom:.5px solid var(--hairline);font-size:13px}
.editlog .le:last-child{border-bottom:0}
.editlog .lehead{display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:12.5px;margin-bottom:4px}
.editlog .lechg{font-size:12.5px;color:var(--ink-2)}
.editlog .lechg b{color:var(--ink);font-weight:500}
.chgdiff{font-family:var(--mono);font-size:11.5px}
.row-new td{animation:flashnew 2.4s var(--ease)}
@keyframes flashnew{0%,15%{background:var(--accent-tint)}100%{background:transparent}}
.emptystate{text-align:center;padding:48px 20px;color:var(--ink-2)}
.emptystate .big{font-size:38px;opacity:.5;margin-bottom:10px}
thead th.sortable{cursor:pointer;user-select:none}
thead th .arw{opacity:.6;font-size:9px;margin-left:3px}

/* histórico por centro (timeline no sheet) */
.timeline{list-style:none;margin:10px 0 0;padding:0}
.tl{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:.5px solid var(--hairline);cursor:pointer}
.tl:last-child{border-bottom:0}
.tl .when{width:96px;flex-shrink:0;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:13px}
.tl.cur{font-weight:600}
.tl .tlsc{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13px}

/* mobile: tabela vira cartões */
@media(max-width:560px){
  table thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tbody tr{border:.5px solid var(--hairline);border-radius:var(--r-group);padding:12px 14px;margin-bottom:10px;background:var(--paper-2)}
  tbody td{border:0;padding:3px 0;white-space:normal}
  tbody td.chev{display:none}
  tbody td[data-l]::before{content:attr(data-l);display:inline-block;min-width:120px;color:var(--ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
}

/* ===== formulário: trilho com fases ===== */
.railphase{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.railpos{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.railbar{height:4px;min-width:110px;background:var(--hairline-strong);border-radius:var(--r-pill);overflow:hidden}
.railbar i{display:block;height:100%;background:var(--accent);transition:width .3s var(--ease)}
@media(max-width:560px){.railpos{display:none}}

/* índice navegável (reusa .sheet/.scrim/.grabber) */
.stepnav{list-style:none;padding:0;margin:0}
.stepnav li{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 4px;border-bottom:.5px solid var(--hairline);cursor:pointer}
.stepnav li:last-child{border-bottom:0}
.st-ic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.st-ic.done{background:var(--accent-tint);color:var(--accent)}
.st-ic.cur{background:var(--accent);color:#fff}
.st-ic.todo{border:1.5px solid var(--ink-3);color:var(--ink-3)}
.stepnav .st-phase{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.stepnav .st-prog{margin-left:auto;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* revisão por seção */
.revsec{background:var(--paper-2);border-radius:var(--r-group);margin-bottom:10px;overflow:hidden}
.revsec>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;font-weight:500;list-style:none}
.revsec>summary::-webkit-details-marker{display:none}
.revsec .rc{padding:2px 16px 14px;font-size:13.5px}
.revsec .ans{padding:8px 0;border-top:.5px solid var(--hairline);color:var(--ink-2)}
.revsec .ans b{color:var(--ink);font-weight:500}
.revsec .edit{margin-left:auto;font-size:12px;color:var(--accent)}
.miss{color:var(--danger)}
.revbtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--danger-tint);border:0;border-radius:var(--r-field);padding:11px 14px;margin-bottom:8px;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.revbtn .n{margin-left:auto;color:var(--danger);font-weight:600;font-size:13px}

/* transições direcionais */
.enter[data-dir=fwd]{animation:enterR .26s var(--ease)}
.enter[data-dir=back]{animation:enterL .26s var(--ease)}
@keyframes enterR{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes enterL{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .btn:active{transform:none}
  .livedot{animation:none}
}