/* =====================================================================
   Apuração Presidencial 2026 — estilos
   ===================================================================== */
:root{
  --hdr:56px;--plc:40px;--nav:0px;--top:calc(var(--hdr) + var(--plc));
  --r:10px;--tse:#0b2f63;--tse2:#1351b4;--yel:#ffcd07;
  --bg:#f3f5f8;--panel:#ffffff;--card:#ffffff;--card2:#f8fafc;--line:#e3e8ef;--line2:#cfd7e3;
  --txt:#1b2333;--mut:#4b5567;--dim:#5f6b7c;--acc:#1351b4;--hi:#e8f0fc;--hov:#f2f6fc;--strong:#0b2f63;
  --ok:#168821;--err:#c62828;--shadow:0 2px 12px rgba(11,47,99,.12);--hdrbg:#0b2f63;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#020617;--panel:#0b1222;--card:#0f172a;--card2:#0b1222;--line:#1e293b;--line2:#334155;
  --txt:#e2e8f0;--mut:#a9b4c6;--dim:#8391a7;--acc:#5b9dff;--hi:#13284d;--hov:#0f1f3d;--strong:#f1f5f9;
  --ok:#4ade80;--err:#f87171;--shadow:0 10px 40px rgba(0,0,0,.45);--hdrbg:#0a2350;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden}
body{font:14px/1.4 Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:var(--card);color:var(--acc);padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}
.skip:focus{top:8px}
.mOnly{display:none!important}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(126,226,160,0)}100%{box-shadow:0 0 0 0 rgba(126,226,160,0)}}
@keyframes bump{40%{transform:scale(1.25)}}

/* ---------- Botões ---------- */
.btn{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border-radius:9px;border:1px solid var(--line2);background:var(--card);color:var(--txt);font-size:13px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{border-color:var(--acc);background:var(--hov)}
.btn.icon{width:34px;padding:0}
.btn svg{width:16px;height:16px;flex:none}
.btn.spin svg{animation:spin .8s linear infinite}
.btn.pri{background:var(--tse2);border-color:var(--tse2);color:#fff;font-weight:700}
.btn.pri:hover{background:var(--tse);border-color:var(--tse)}
.btn[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}

/* ---------- Cabeçalho ---------- */
#hdr{position:fixed;top:0;left:0;right:0;z-index:40;min-height:56px;display:flex;align-items:center;gap:14px;padding:8px 16px;background:var(--hdrbg);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--tse);display:grid;place-items:center;flex:none}
.logo svg{width:18px;height:18px}
.brandTxt h1{margin:0;font-size:15px;font-weight:700;white-space:nowrap}
.brandTxt small{display:block;font-size:11px;color:rgba(255,255,255,.78)}
.turnos{display:flex;background:rgba(0,0,0,.22);border-radius:999px;padding:3px}
.turnos button{border:0;background:transparent;color:rgba(255,255,255,.85);font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;transition:.15s}
.turnos button:hover{color:#fff}
.turnos button.on{background:#fff;color:var(--tse)}
.ctrl{display:flex;align-items:center;gap:8px;margin-left:auto;order:2}
.hdrRight{display:flex;align-items:center;gap:8px;order:3}
#hdr .btn,#hdr .status,#hdr .viewers{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
#hdr .btn:hover{background:rgba(255,255,255,.18);border-color:#fff}
#hdr .btn[aria-pressed="true"]{color:var(--yel);border-color:var(--yel)}
.status{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:999px;border:1px solid;font-size:11px;font-weight:800;letter-spacing:.6px;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:#94a3b8;flex:none}
#hdr .status.live{color:#7ee2a0;border-color:rgba(126,226,160,.55)}
#hdr .status.live i{background:#7ee2a0;animation:pulse 1.6s infinite}
#hdr .status.off{color:#ffb4b4;border-color:rgba(255,180,180,.55)}
#hdr .status.off i{background:#ff8a8a}
.timer{font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap}
.timer b{color:var(--yel)}
.econ{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(255,205,7,.18);color:var(--yel);white-space:nowrap}
.viewers{display:none;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:999px;border:1px solid;font-size:12px;white-space:nowrap}
.viewers.on{display:inline-flex}
.viewers svg{width:15px;height:15px;color:var(--yel)}
.viewers b{font-size:13px}
.viewers.bump b{animation:bump .5s}
#progTop{position:absolute;left:0;bottom:0;height:3px;background:var(--yel);width:0;transition:width .8s}

/* ---------- Placar fixo ---------- */
#placar{position:fixed;left:0;right:0;top:var(--hdr);height:var(--plc);z-index:30;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;min-width:0}
#placar:focus-visible{outline-offset:-3px}
.plcC{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.plcC i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.plcC b{font-weight:700;color:var(--strong);overflow:hidden;text-overflow:ellipsis;max-width:22vw}
.plcC .num{font-weight:800;color:var(--c);font-size:15px}
.plcBar{position:relative;flex:1 1 200px;min-width:60px;max-width:560px;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.plcBar>span{position:absolute;top:0;bottom:0;transition:width .8s}
.plcBar .pa{left:0}.plcBar .pb{right:0}
.plcBar em{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--strong);opacity:.55}
.plcX{font-size:11px;color:var(--dim);font-weight:700}
.plcSep{width:1px;height:20px;background:var(--line2);flex:none}
.plcApur{color:var(--mut);white-space:nowrap}.plcApur .num{font-weight:800;color:var(--strong)}
.ago{color:var(--dim);font-size:12px;white-space:nowrap;margin-left:auto}
.plcMsg{color:var(--mut)}

/* ---------- Mapa ---------- */
#map{position:fixed;left:0;right:0;top:var(--top);bottom:var(--nav);background:var(--bg)}
.ol-attribution{font-size:10px}
.ol-attribution.ol-uncollapsible{background:rgba(255,255,255,.75)}
:root[data-theme="dark"] .ol-attribution.ol-uncollapsible{background:rgba(2,6,23,.7)}
:root[data-theme="dark"] .ol-attribution li,:root[data-theme="dark"] .ol-attribution a{color:var(--dim)}
#tools{position:fixed;z-index:9;left:394px;top:calc(var(--top) + 12px);display:flex;flex-direction:column;gap:6px}
#tools .btn{background:var(--card);box-shadow:var(--shadow);color:var(--strong)}
#loader{position:fixed;z-index:35;top:calc(var(--top) + 14px);left:50%;transform:translateX(-50%);background:var(--tse);color:#fff;padding:6px 14px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100vw - 100px);overflow:hidden;text-overflow:ellipsis}
#tip{position:fixed;z-index:50;pointer-events:none;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:var(--shadow);min-width:160px;max-width:280px}
#tip b{font-size:13px;color:var(--strong)}
#tip .t2{color:var(--mut);margin-top:3px}
#tip .tAcc{color:var(--acc)}
#toast{position:fixed;z-index:70;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--strong);color:var(--card);padding:9px 14px;border-radius:10px;font-size:12.5px;transition:.25s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Painéis ---------- */
.panel{position:fixed;z-index:10;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
#pResult{left:12px;top:calc(var(--top) + 12px);bottom:12px;width:370px}
#pUF{right:12px;top:calc(var(--top) + 12px);bottom:12px;width:330px}
#pRank{display:none;right:12px;top:calc(var(--top) + 12px);bottom:12px;width:430px}
.pHead{padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--card2)}
.pBody{padding:12px 12px 16px;overflow-y:auto;overflow-x:hidden;flex:1;overscroll-behavior:contain}
.pBody::-webkit-scrollbar{width:8px}.pBody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.pFoot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.pLegal{font-size:12px;color:var(--dim);text-decoration:none;margin-right:auto}
.pLegal:hover{text-decoration:underline}
.sheetHandle{display:none}
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--acc);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.crumb button{background:none;border:0;color:var(--acc);padding:0;font:inherit;text-decoration:underline;text-underline-offset:2px}
.title{font-size:20px;font-weight:800;margin:4px 0 2px;color:var(--strong);letter-spacing:-.2px;line-height:1.2}
.sub{font-size:12px;color:var(--mut)}
.banner{margin:10px 0 0;padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.4}
.banner.err{background:rgba(198,40,40,.08);border:1px solid rgba(198,40,40,.4);color:var(--err)}
.empty{color:var(--mut);font-size:13px;line-height:1.5;padding:14px;border:1px dashed var(--line2);border-radius:12px;margin:8px 0}
.fatal{position:fixed;inset:auto 16px 16px 16px;z-index:99;background:#fff;color:#1b2333;border:2px solid #c62828;border-radius:12px;padding:16px 20px;font:14px/1.5 system-ui,sans-serif}
.fatal h2{margin:0 0 6px;font-size:16px;color:#c62828}

/* Resumo */
.resumo{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--card)}
.resumoTop{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-bottom:8px}
.rLbl{display:block;font-size:12px;color:var(--mut)}
.rVal{font-size:26px;font-weight:800;color:var(--strong);line-height:1.1}
.rTag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--hi);color:var(--acc);white-space:nowrap}
.rTag.ok,.rTag.def{background:rgba(22,136,33,.12);color:var(--ok)}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .8s}
.btn.abrir{width:100%;height:38px;margin:12px 0 0}
.sec{font-size:12px;font-weight:800;color:var(--strong);text-transform:uppercase;letter-spacing:.4px;margin:18px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.secHint{display:block;font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--dim);margin-top:2px}

/* Candidatos */
.cand{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--card);cursor:pointer;transition:opacity .2s,box-shadow .2s,transform .1s}
.cand:hover{box-shadow:0 0 0 1px var(--c)}
.cand:active{transform:scale(.995)}
.cand.lead{box-shadow:inset 4px 0 0 var(--c)}
.cand.foco{box-shadow:0 0 0 2px var(--c),inset 4px 0 0 var(--c)}
.cand.dim{opacity:.5}
.avatar{position:relative;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--c);border:3px solid var(--c);color:#fff;font-weight:900;font-size:16px}
.avatar span{position:absolute;inset:0;display:grid;place-items:center}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#dfe6ef}
.cInfo{min-width:0}
.cName{color:var(--strong);font-size:14px;font-weight:800;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cParty{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:4px;background:var(--hi);color:var(--acc)}
.pill.ok{background:var(--ok);color:#fff}
.cNum{text-align:right}
.cPct{font-size:22px;font-weight:800;color:var(--strong)}
.cVotes{font-size:11px;color:var(--mut)}
.cBar{grid-column:1/-1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.cBar>span{display:block;height:100%;background:var(--c);transition:width .8s}
.delta{display:block;font-size:10.5px;font-weight:800;margin-top:1px;animation:fadeD 12s forwards}
.delta.up{color:var(--ok)}.delta.down{color:var(--err)}
@keyframes fadeD{0%,75%{opacity:1}100%{opacity:0}}
.margin{font-size:12.5px;color:var(--mut);padding:9px 11px;border-radius:6px;background:var(--hi);border-left:4px solid var(--acc);margin-top:4px}
.margin b{color:var(--strong)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi{padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.kpi span{font-size:11px;color:var(--mut);display:block}
.kpi b{font-size:16px;display:block;margin-top:2px;color:var(--strong)}
.kpi small{font-size:11px;color:var(--dim)}
.eleit{margin-top:10px}
.fonte{margin-top:16px;font-size:11px;color:var(--dim);text-align:center;line-height:1.7}
.fonte a{text-decoration:none}.fonte a:hover{text-decoration:underline}

/* Foco */
.focoBox{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:var(--r);background:color-mix(in srgb,var(--c) 12%,var(--card));border:1px solid var(--c)}
.focoBox>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--mut)}
.focoBox b{color:var(--strong);font-size:13.5px}
.focoBox small{color:var(--dim)}
.focoBox .btn{flex:none;height:32px}
.focoChip{display:flex;align-items:center;gap:8px;margin-top:10px;padding:5px 6px 5px 10px;border-radius:9px;font-size:12px;color:var(--mut);background:color-mix(in srgb,var(--c) 10%,var(--card));border:1px solid var(--c)}
.focoChip i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.focoChip b{color:var(--strong)}
.focoChip button{margin-left:auto;border:0;background:none;color:var(--mut);width:26px;height:26px;border-radius:6px}
.focoChip button:hover{background:var(--hov)}

/* ⓘ */
.info{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);font:italic 700 10px/1 Georgia,serif;color:var(--mut);cursor:help;vertical-align:1px;margin-left:3px;text-transform:none;letter-spacing:0;background:var(--card)}
#tipInfo{position:fixed;z-index:80;max-width:260px;background:var(--strong);color:var(--card);padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.4;pointer-events:none;box-shadow:var(--shadow)}

/* Esqueleto */
.sk{border-radius:var(--r);background:linear-gradient(90deg,var(--line) 0%,var(--card2) 50%,var(--line) 100%);background-size:200% 100%;animation:sk 1.2s infinite linear;margin-bottom:10px}
.sk-res{height:80px}.sk-sec{height:14px;width:40%;margin-top:16px}.sk-cand{height:80px}.sk-kpis{height:120px;margin-top:16px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- Lista ---------- */
.tabs{display:flex;gap:6px;margin-top:10px}
.tabs:first-child{margin-top:0}
.tabs button{flex:1;height:32px;border-radius:8px;border:1px solid var(--line2);background:var(--card);font-size:12.5px;color:var(--mut)}
.tabs button.on{background:var(--tse);border-color:var(--tse);color:#fff;font-weight:700}
:root[data-theme="dark"] .tabs button.on{background:var(--tse2);border-color:var(--tse2)}
.pUFclose{display:none!important}
.munFiltro{display:flex;align-items:center;gap:8px;margin-top:10px}
.munFiltro label{font-size:12px;color:var(--mut);font-weight:600}
.sel{flex:1;min-width:0;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--card);color:var(--txt);padding:0 8px;font-size:13px}
.search{position:relative;margin-top:10px}
.search input{width:100%;height:36px;border-radius:9px;border:1px solid var(--line2);background:var(--card);padding:0 10px 0 32px;font-size:13px}
.search svg{position:absolute;left:10px;top:10px;width:16px;height:16px;color:var(--dim)}
.row,.mun{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 0 4px;border-radius:10px;cursor:pointer;outline:none;transition:background .15s;isolation:isolate}
.row{min-height:52px}
.row::before,.mun::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid transparent;pointer-events:none;z-index:-1}
.row:hover,.mun:hover{background:var(--hov)}
.row:focus-visible::before,.mun:focus-visible::before{border-color:var(--acc)}
.row.sel,.mun.sel{background:var(--hi)}
.row.sel::before{border-color:var(--acc);border-left:4px solid var(--c)}
.mun.sel::before{border-color:#eab308}
.dot{flex:0 0 10px;width:10px;height:10px;border-radius:3px;background:var(--c,#94a3b8)}
.uf{flex:0 0 30px;font-weight:800;font-size:12px;color:var(--mut)}
.rkN{flex:0 0 20px;font-weight:800;color:var(--dim);text-align:right}
.rName{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.25}
.rName>span,.rName>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rName>small{color:var(--dim);font-size:11px}
.rPct,.mPct{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-weight:800;font-size:13px;line-height:1.25;color:var(--c,var(--mut))}
.rPct small,.mPct small{font-weight:500;color:var(--dim);font-size:10.5px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mun{min-height:44px;font-size:13px}
.mNome{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.munUf{font-size:10.5px;font-weight:700;color:var(--dim);margin-left:4px}
.cnt{margin:2px 2px 8px}
.munSum{display:flex;gap:6px;flex-wrap:wrap;margin:2px 2px 10px}
.munSum button{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 9px;border-radius:99px;background:var(--card2);border:1px solid var(--line2);color:var(--txt)}
.munSum button.on{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.munSum i{width:8px;height:8px;border-radius:2px;background:var(--c)}

/* ---------- Legenda / comparação ---------- */
#legend{position:fixed;z-index:9;left:50%;transform:translateX(-50%);bottom:calc(var(--nav) + 14px);display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:12px;max-width:calc(100vw - 800px);flex-wrap:wrap;justify-content:center}
#legend .li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#legend button.li{border:1px solid transparent;background:none;color:inherit;padding:3px 8px;border-radius:999px}
#legend button.li:hover{border-color:var(--line2)}
#legend button.li.on{border-color:var(--acc);background:var(--hi)}
#legend .sw{width:12px;height:12px;border-radius:3px}
#legend .grad{width:60px;height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(100,116,139,.15),rgba(100,116,139,.9))}
#cmp{position:fixed;z-index:11;left:50%;transform:translateX(-50%);bottom:64px;width:min(560px,calc(100vw - 40px));background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px}
.cmpHead{display:flex;align-items:center;gap:10px;margin-bottom:8px}.cmpHead .btn{margin-left:auto;width:28px;height:28px}
.cmpGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cmpT{font-weight:800;color:var(--strong);margin-bottom:6px}
.cmpR{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;padding:4px 0;font-size:13px}
.cmpR i{width:10px;height:10px;border-radius:3px;background:var(--c)}.cmpR b{color:var(--c)}

/* ---------- Diálogo ---------- */
dialog.dlg{border:1px solid var(--line2);border-radius:14px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 40px);background:var(--card);color:var(--txt);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.dlg::backdrop{background:rgba(2,6,23,.55)}
.dlgHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.dlgHead h2{margin:0;font-size:16px;color:var(--strong)}
.dlgBody{padding:4px 18px 18px;font-size:13.5px;line-height:1.6}
.dlgBody h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--strong);margin:18px 0 6px;scroll-margin-top:64px}
.dlgBody p,.dlgBody li{color:var(--mut)}
.dlgBody ul{padding-left:18px;margin:6px 0}
table.kb{width:100%;border-collapse:collapse;font-size:13px}
table.kb td{padding:6px 4px;border-bottom:1px solid var(--line);color:var(--mut)}
kbd{display:inline-block;min-width:22px;text-align:center;padding:2px 6px;border-radius:6px;border:1px solid var(--line2);border-bottom-width:2px;background:var(--card2);font:600 12px/1.4 ui-monospace,Consolas,monospace;color:var(--strong)}

#bnav{display:none}

/* ---------- Computadores ---------- */
@media (min-width:961px){ body.ufHidden #pUF{display:none} }
@media (max-width:1180px){ #legend{display:none} }
@media (min-width:961px) and (max-width:1366px){
  #pResult{width:330px} #tools{left:354px} #pUF{width:300px}
  .plcC b{max-width:16vw}
}
@media (min-width:961px) and (max-height:780px){
  .resumo{padding:9px}.rVal{font-size:20px}
  .kpis{grid-template-columns:repeat(4,1fr)}.kpi{padding:7px}.kpi b{font-size:14px}
  .cand{padding:9px;grid-template-columns:44px minmax(0,1fr) auto}.avatar{width:44px;height:44px}
}
body.telao{--plc:58px}
body.telao #placar{font-size:17px;padding:0 24px}
body.telao .plcC .num{font-size:22px}
body.telao .plcBar{height:14px}
body.telao #pResult{width:480px}
body.telao #pResult>.pHead,body.telao #pResult>.pBody,body.telao #pRank>*{zoom:1.25}
body.telao #tools{left:504px}
body.telao #pUF{display:none!important}
body.telao #pRank{display:flex}
body.telao #legend{display:none}
@media (min-width:2200px){
  :root{--plc:50px} #placar{font-size:16px} .plcC .num{font-size:19px}
  #pResult{width:460px} #pResult>.pHead,#pResult>.pBody,#pUF>*{zoom:1.2}
  #pUF{width:400px} #tools{left:484px}
}

/* ---------- Celular ---------- */
@media (max-width:960px){
  :root{--plc:44px;--nav:calc(58px + env(safe-area-inset-bottom))}
  html,body{overscroll-behavior:none}
  #hdr{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 10px 6px;min-height:0}
  .brandTxt,#btnTheme,.vLbl,.timer,#zLista,#zTelao,#zFull,#cmp,#legend{display:none!important}
  .logo{width:32px;height:32px}
  .turnos{justify-self:center;width:100%;max-width:280px}
  .turnos button{flex:1;padding:7px 8px}
  .mOnly{display:inline-flex!important}
  .viewers{height:32px;padding:0 9px}
  #btnMenu{width:36px;height:36px}#btnMenu svg{width:20px;height:20px}
  .ctrl{position:absolute;top:calc(100% + 6px);right:8px;display:none;flex-direction:column;align-items:stretch;gap:2px;width:min(290px,calc(100vw - 16px));padding:8px;margin:0;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:45}
  .ctrl.open{display:flex}
  #hdr .ctrl .btn{width:100%;height:44px;justify-content:flex-start;gap:12px;padding:0 12px;background:transparent;border-color:transparent;color:var(--txt);border-radius:8px}
  #hdr .ctrl .btn:hover{background:var(--hov)}
  #hdr .ctrl .btn[aria-pressed="true"]{color:var(--acc)}
  #hdr .ctrl .btn::after{content:attr(data-label);font-size:14px;font-weight:600}
  #hdr .ctrl .status{width:100%;height:36px;background:var(--card2);border-color:var(--line);color:var(--mut)}
  #hdr .ctrl .status.live{color:var(--ok)}#hdr .ctrl .status.live i{background:var(--ok)}
  #hdr .ctrl .status.off{color:var(--err)}
  .ctrl .econ{align-self:flex-start;color:#a16207;background:rgba(234,179,8,.15)}

  #placar{gap:8px;padding:0 10px;font-size:12px}
  .plcC b{max-width:23vw}.plcC .num{font-size:13.5px}
  .plcBar{flex:1 1 40px}
  .plcSep,.ago,.plcX{display:none}

  #tools{left:auto;right:10px;top:calc(var(--top) + 10px)}
  #tools .btn{width:40px;height:40px}
  #loader{top:calc(var(--top) + 10px)}
  #toast{top:calc(var(--top) + 54px);bottom:auto}
  #tip{display:none!important}

  #pResult{left:0;right:0;top:auto;bottom:var(--nav);width:auto;border-radius:18px 18px 0 0;border-bottom:0;
    height:var(--sheetH,40vh);max-height:calc(100vh - var(--top) - var(--nav) - 8px);transition:height .28s cubic-bezier(.2,.8,.2,1)}
  #pResult.full{--sheetH:78vh}
  #pResult.mini{--sheetH:124px}
  .sheetHandle{display:flex;justify-content:center;align-items:center;width:100%;height:22px;flex:none;border:0;background:var(--card2);cursor:grab;touch-action:none}
  .sheetHandle::before{content:"";width:42px;height:5px;border-radius:99px;background:var(--line2)}
  #pResult .pHead{padding:2px 16px 10px}
  #pResult .title{font-size:18px}
  .cand{grid-template-columns:46px minmax(0,1fr) auto;padding:10px;gap:10px}
  .avatar{width:46px;height:46px}
  .cPct{font-size:19px}
  .rVal{font-size:22px}

  #pUF{left:8px;right:8px;width:auto;top:calc(var(--top) + 8px);bottom:calc(var(--nav) + 8px);display:none;z-index:25}
  #pUF.open{display:flex}
  .pUFclose{display:inline-flex!important;flex:0 0 32px!important;height:32px}
  .sel,.search input{font-size:16px}

  #bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;height:var(--nav);padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);z-index:30}
  #bnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--dim);min-height:48px}
  #bnav button svg{width:22px;height:22px}
  #bnav button.on{color:var(--acc)}

  dialog.dlg{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:16px 16px 0 0}
}
@media (max-width:380px){ .plcC b{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .delta{opacity:1}
}
