/* EL PALCO Tracker · VIVID layer · tipografía + color + presencia */
:root{
  --pos:#3dff7a;--neg:#ff5c52;--warn:#ffe14d;--blue:#5eb3ff;--purple:#c084fc;
  --muted:#9a9aa3;--border:#2a2a2e;--border2:#404048;--card:#161618;
  --hero:44px;--nav-h:60px;
  --glow-pos:0 0 18px rgba(61,255,122,.45);
  --glow-neg:0 0 18px rgba(255,92,82,.4);
  --glow-blue:0 0 16px rgba(94,179,255,.35);
}

html{font-size:17px}
html[data-device="desktop"]{font-size:16px}

body{color:#f5f5f7}

/* ── Headers & labels ── */
.brand{font-size:13px}
.brand strong{color:var(--pos);text-shadow:var(--glow-pos)}
.live-dot{font-size:12px}
.live-dot .dot{width:9px;height:9px;box-shadow:var(--glow-pos)}
.hdr-btn,.btn-ghost{font-size:12px;padding:8px 14px}

.pure-label,.sec-label{
  font-size:12px;color:var(--blue);margin-top:28px;margin-bottom:10px;
  border-left:3px solid var(--pos);padding-left:10px;letter-spacing:.16em;
}
.pure-hero{font-size:var(--hero);text-shadow:0 0 24px rgba(61,255,122,.15)}
.pure-hero .dec{font-size:18px}
.row{font-size:15px;padding:13px 0}
.card-title{font-size:16px}
.card-sub{font-size:12px}
.card{padding:16px;border-color:var(--border2)}
.card.click:hover{border-color:var(--pos);box-shadow:var(--glow-pos)}
.badge{font-size:10px;padding:4px 10px}

/* ── KPI strip · scoreboard ── */
.kpi-strip{gap:10px;margin:18px 0}
.kpi-cell{
  padding:14px 14px;border-radius:12px;border-width:2px;
  background:linear-gradient(160deg,#1a1a1f 0%,#0d0d0f 100%);
}
.kpi-cell:nth-child(1){border-color:rgba(61,255,122,.45)}
.kpi-cell:nth-child(2){border-color:rgba(94,179,255,.4)}
.kpi-cell:nth-child(3){border-color:rgba(255,225,77,.4)}
.kpi-cell:nth-child(4){border-color:rgba(192,132,252,.35)}
.kpi-lbl{font-size:10px;color:var(--muted)}
.kpi-val{font-size:26px;font-weight:700}
.kpi-val.pos{text-shadow:var(--glow-pos)}
.kpi-val.neg{text-shadow:var(--glow-neg)}

/* ── Toggles & chips ── */
.period-bar .tog,.chip,.session-ticker .chip{
  font-size:12px;padding:9px 14px;border-radius:8px;border-width:2px;
}
.period-bar .tog.on,.chip.on,.session-ticker .chip.on{
  border-color:var(--pos);color:var(--pos);background:rgba(61,255,122,.1);box-shadow:var(--glow-pos);
}
.lens{font-size:12px;padding:10px 16px;border-width:2px}
.lens.on{border-color:var(--blue);color:var(--blue);background:rgba(94,179,255,.08)}

/* ── Panels & charts ── */
.panel{
  padding:16px 16px;border-radius:12px;border-color:var(--border2);
  background:linear-gradient(180deg,#121214 0%,#080808 100%);
  border-top:3px solid var(--blue);
}
.panel-h{font-size:11px;color:var(--blue);letter-spacing:.12em;margin-bottom:12px}
.chart-wrap{height:220px}
.chart-legend{font-size:10px;margin-bottom:8px}
.split-hero{font-size:36px}
.split-lbl{font-size:11px;color:var(--warn)}
.day-hero{font-size:36px;text-shadow:0 0 20px rgba(255,255,255,.08)}
.day-stat{padding:14px;border-width:2px}
.day-stat .l{font-size:10px}
.day-stat .v{font-size:20px}

/* ── Tables ── */
table.tbl{font-size:13px}
table.tbl th{font-size:11px;padding:10px 10px;color:var(--blue)}
table.tbl td{padding:10px 10px}
.bet-name{font-size:14px;font-weight:600}
.bet-sub{font-size:11px}
.st-pill{font-size:10px}
.traffic{font-size:12px;font-weight:600}
.traffic .bulb{width:11px;height:11px}

/* ── Calendar heatmap · más fuego ── */
.cal-month{font-size:14px}
.cal-month-pnl{font-size:18px}
.cal-weekdays span{font-size:10px}
.cal-grid{gap:6px}
.cal-cell{
  font-size:13px;font-weight:600;border-radius:8px;border-width:2px;min-height:42px;
}
.cal-cell.win{border-color:rgba(61,255,122,.55);background:rgba(61,255,122,.18);color:var(--pos)}
.cal-cell.loss{border-color:rgba(255,92,82,.5);background:rgba(255,92,82,.15);color:var(--neg)}
.cal-cell .heat-int{opacity:.55!important}
.cal-cell .heat-val{font-size:10px;font-weight:700}

/* ── Nav bottom ── */
.nav a{font-size:12px;padding:16px 8px}
.nav a.on{color:var(--pos);text-shadow:var(--glow-pos)}

/* ── Mobile Mapa · anillos grandes ── */
.mob-mapa{
  padding:18px 16px;border-width:2px;border-color:rgba(94,179,255,.35);
  background:radial-gradient(ellipse 100% 70% at 50% -10%,rgba(94,179,255,.12),transparent 60%),#0a0a0c;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.mob-hud-label,.mapa-spark .spark-lbl{font-size:10px;color:var(--blue)}
.mob-hud-hero{font-size:32px;font-weight:700}
.mob-hud-sub{font-size:13px}
.mapa-rings{gap:36px;margin:12px 0 18px}
.mapa-ring{width:104px;height:104px}
.mapa-ring::before{
  mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));
}
.mapa-ring.b365{filter:drop-shadow(var(--glow-pos))}
.mapa-ring.pm{filter:drop-shadow(var(--glow-blue))}
.mapa-ring .inner .amt{font-size:16px;font-weight:800}
.mapa-ring .inner .lbl{font-size:9px;color:var(--text)}
.mapa-layers button{font-size:12px;padding:14px 8px;font-weight:700}
.mapa-layers button.b365.on{background:rgba(61,255,122,.12)}
.mapa-layers button.pm.on{background:rgba(94,179,255,.12)}
.mapa-body{font-size:15px}
.spark-canvas{height:40px!important;border-radius:6px;border:1px solid var(--border)}

/* ── Day pills ── */
.day-pill{min-width:58px;padding:10px 12px;border-width:2px;border-radius:12px}
.day-pill .d{font-size:20px}
.day-pill .w{font-size:9px}
.day-pill .pnl{font-size:10px;font-weight:700}
.day-pill.win{box-shadow:var(--glow-pos)}
.day-pill.loss{box-shadow:var(--glow-neg)}

/* ── EU4 en mobile mapa también ── */
html[data-device="mobile"][data-mobile-layout="mapa"] .eu4-map{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;
}

/* ── EU4 zones · desktop ── */
.eu4-zone{
  padding:18px;min-height:140px;border-width:2px;border-radius:14px;
}
.eu4-zone.b365{border-color:rgba(61,255,122,.35);box-shadow:inset 0 0 40px rgba(61,255,122,.06)}
.eu4-zone.pm{border-color:rgba(94,179,255,.35);box-shadow:inset 0 0 40px rgba(94,179,255,.06)}
.eu4-zone::before{height:4px}
.eu4-zone .plat{font-size:11px}
.eu4-zone.b365 .plat{color:var(--pos)}
.eu4-zone.pm .plat{color:var(--blue)}
.eu4-zone .cash{font-size:30px;font-weight:800}
.eu4-zone .sub{font-size:12px}
.eu4-zone .bar{height:8px;margin-top:14px}
.eu4-timeline{height:40px;border-width:2px}

/* ── Donut & gauge ── */
.expo-donut{width:100px;height:100px}
.expo-donut canvas{width:100px!important;height:100px!important}
.expo-donut .center .amt{font-size:14px;font-weight:800}
.expo-donut .center .lbl{font-size:9px}
.expo-legend{font-size:14px}
.bank-gauge .track{height:12px}
.bank-gauge .fill{background:linear-gradient(90deg,var(--pos),var(--warn),var(--neg))}
.bank-gauge .labels{font-size:11px}

/* ── Positions board ── */
.pos-card-dense{
  padding:16px;border-width:2px;border-radius:12px;
  background:linear-gradient(135deg,#18181c 0%,#101012 100%);
}
.pos-card-dense .kick{font-size:11px;font-weight:700}
.pos-card-dense .title{font-size:15px}
.pos-card-dense .nums{font-size:14px}

/* ── Platform entities ── */
.plat-entity{padding:14px 16px;border-width:2px;border-radius:12px}
.plat-entity .hd{font-size:14px}
.plat-entity .stack{height:14px;border-radius:7px}
.plat-entity .legends{font-size:10px}

/* ── Fixture clusters ── */
.fixture-hd{padding:14px 16px}
.fixture-hd .match{font-size:16px}
.fixture-hd .agg{font-size:15px;font-weight:700}
.fixture-leg{font-size:13px;padding:12px 16px 12px 28px}

/* ── Heat strip ── */
.heat-strip{height:36px;padding:6px;border-width:2px;border-radius:10px}
.heat-strip .day{border-radius:6px;min-width:12px}

/* ── Streak & kickoff ── */
.streak-rail .dot{width:14px;height:14px}
.kick-chip{font-size:12px;padding:10px 14px;border-width:2px;font-weight:600}
.live-rail .grade{font-size:10px;padding:8px 12px}

/* ── CK3 blocks ── */
.ck3-block{padding:16px;border-width:2px;border-radius:12px}
.ck3-block h4{font-size:11px}
.ck3-trait{font-size:11px;padding:5px 10px}
.detail-hero{font-size:40px;font-weight:800}

/* ── Day histogram ── */
.day-hist{height:88px;padding:12px;border-width:2px;border-radius:10px}

/* ── Desktop rail & inspector ── */
html[data-device="desktop"]{
  --rail-w:68px;--insp-w:340px;
}
html[data-device="desktop"] .desk-rail a{font-size:10px;width:52px;padding:12px 6px}
html[data-device="desktop"] .desk-rail a .ico{font-size:20px}
html[data-device="desktop"] .desk-rail a.on{
  color:var(--pos);background:rgba(61,255,122,.1);box-shadow:inset 0 0 0 2px rgba(61,255,122,.4);
}
html[data-device="desktop"] .desk-rail .rail-logo{
  width:44px;height:44px;font-size:11px;border-color:var(--pos);color:var(--pos);
}
.insp-hd{font-size:11px;color:var(--blue)}
.insp-hero{font-size:32px}

/* ── Bar track cap ── */
.bar-track{height:10px;border-radius:5px}
.bar-fill{background:linear-gradient(90deg,var(--pos),#a3e635)}
.bar-fill.warn{background:linear-gradient(90deg,var(--warn),#fb923c)}
.bar-fill.over{background:linear-gradient(90deg,var(--neg),#dc2626)}

/* ── PM table ── */
.pm-summary{font-size:14px}
.pm-title{font-size:14px;font-weight:600}
.pm-outcome{font-size:11px}
table.pm-tbl{font-size:13px}

/* ── Pos/neg glow on numbers ── */
.pos{font-weight:600}
.neg{font-weight:600}
.mono.pos{text-shadow:0 0 12px rgba(61,255,122,.25)}
.mono.neg{text-shadow:0 0 12px rgba(255,92,82,.25)}