/* ══════════════════════════════════════════════
   PROSUR CAREER · Sistema de diseño
   ══════════════════════════════════════════════ */
:root{
  --bg:#06060a; --s1:#0e0e16; --s2:#14141e; --s3:#1b1b27;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --red:#ff1e14; --red-d:#b30500; --gold:#ffd400; --gold-d:#c9a400;
  --ok:#00e08a; --warn:#ff9500; --info:#3ba9ff;
  --txt:#f2f4f8; --txt2:#b9bfcc; --dim:#7d8494;
  --nav-h:62px;
  --r:4px; --r2:3px; --r3:2px;
  --sp:16px;
  --sh1:0 2px 8px rgba(0,0,0,.4); --sh2:0 8px 28px rgba(0,0,0,.55);
  --glow-r:0 0 24px rgba(255,30,20,.28); --glow-g:0 0 24px rgba(255,212,0,.24);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  min-height:100vh; line-height:1.45; overscroll-behavior-y:none;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(255,30,20,.11), transparent 62%),
    radial-gradient(620px 380px at -12% 104%, rgba(255,212,0,.07), transparent 62%);
}
#app{position:relative;z-index:1}
.gold{color:var(--gold)} .dim{color:var(--dim)} .up{color:var(--ok)} .dn{color:var(--red)}
.clip{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.clipb{border-radius:var(--r3)}

/* ─── Layout ─── */
.wrap{max-width:720px;margin:0 auto;padding:12px 14px calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:12px}
.wrap.noNav{padding-bottom:32px}

/* ─── Topbar ─── */
.top{
  position:sticky;top:0;z-index:30;max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(180deg,rgba(6,6,10,.97),rgba(6,6,10,.82));
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--red),var(--gold),transparent 70%);opacity:.6}
.tlogo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer}
.tmark{width:30px;height:30px;flex:none;position:relative}
.tmark span{position:absolute;color:var(--gold);font-size:7px;text-shadow:0 0 6px rgba(255,212,0,.9);animation:tw 3.2s ease-in-out infinite}
.tmark .a{left:13px;top:0} .tmark .b{left:2px;top:11px;animation-delay:.5s}
.tmark .c{left:23px;top:12px;animation-delay:1s} .tmark .d{left:12px;top:21px;font-size:9px;animation-delay:1.5s}
@keyframes tw{0%,100%{opacity:.5}50%{opacity:1}}
.tname{min-width:0}
.tname b{display:block;font-size:14px;font-weight:700;letter-spacing:1.4px;line-height:1}
.tname b em{font-style:normal;color:var(--gold)}
.tname span{display:block;font-size:8.5px;letter-spacing:2.2px;color:var(--dim);margin-top:2px}
.tstat{display:flex;gap:6px;flex:none}
.tpill{display:flex;align-items:center;gap:4px;background:var(--s2);border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.tpill i{font-style:normal;font-size:11px}

/* ─── Bottom nav ─── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:linear-gradient(180deg,rgba(10,10,16,.94),rgba(6,6,10,.99));
  backdrop-filter:blur(18px);border-top:1px solid var(--line2);
  display:flex;justify-content:center;
}
.navin{width:100%;max-width:720px;display:grid;grid-template-columns:repeat(5,1fr)}
.nbtn{
  background:none;border:0;color:var(--dim);font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 2px;position:relative;transition:color .16s;
}
.nbtn i{font-style:normal;font-size:19px;line-height:1;transition:transform .16s}
.nbtn b{font-size:8.5px;font-weight:700;letter-spacing:.8px}
.nbtn.on{color:var(--gold)}
.nbtn.on i{transform:translateY(-2px) scale(1.1)}
.nbtn.on::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2.5px;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:0 0 3px 3px}
.nbtn:active i{transform:scale(.9)}
.ndot{position:absolute;top:6px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}

/* ─── Secciones ─── */
.sect{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r);padding:14px;position:relative;overflow:hidden}
.sect.acc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--red),transparent)}
.sect.gold::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),transparent)}
.sh{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.sh h3{font-size:12px;font-weight:700;letter-spacing:1.6px;color:var(--txt2);text-transform:uppercase}
.sh .shr{margin-left:auto;font-size:11px;color:var(--dim);font-weight:700}
.sh i{font-style:normal;font-size:15px}
.panel{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r);padding:14px;position:relative}
.panel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--red),transparent);border-radius:var(--r) 0 0 var(--r)}
.panel.goldline::before{background:linear-gradient(180deg,var(--gold),transparent)}
.panel h2{font-size:20px;letter-spacing:.4px;margin:2px 0 8px;font-weight:700}
.panel h3{font-size:15px;letter-spacing:.3px;margin:4px 0 7px;font-weight:600}
.panel p{font-size:13.5px;color:var(--txt2);margin:6px 0}
.ptitle{font-size:10.5px;letter-spacing:1.8px;color:var(--dim);font-weight:700;margin:12px 0 7px;text-transform:uppercase}
.panel>.ptitle:first-child,.sect>.ptitle:first-child{margin-top:0}
.hint{font-size:12px;color:var(--dim);margin:7px 0;line-height:1.5}
.bigline{font-size:17px;font-weight:700;letter-spacing:.4px;margin:8px 0}
.kicker{font-size:9.5px;letter-spacing:2.6px;color:var(--red);font-weight:700;margin-bottom:5px;text-transform:uppercase}
.kicker.gold{color:var(--gold)}

/* ─── Hero ─── */
.hero{
  background:
    radial-gradient(420px 220px at 82% 6%, rgba(255,212,0,.10), transparent 62%),
    radial-gradient(320px 200px at 8% 96%, rgba(255,30,20,.12), transparent 62%),
    linear-gradient(165deg,#1a1a28,#0a0a10);
  border:1px solid var(--line2);border-radius:var(--r);padding:14px;position:relative;overflow:hidden;
  box-shadow:var(--sh2);
}
.hero::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--gold) 55%,transparent)}
.hrow{display:flex;gap:12px;align-items:flex-start}
.havs{flex:none;position:relative;cursor:pointer;transition:transform .14s}
.havs:active{transform:scale(.96)}
.havs svg{display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.65))}
.hovr{position:absolute;right:-6px;bottom:2px;width:42px;height:42px;border-radius:50%;
  background:conic-gradient(from 180deg,var(--red),var(--gold),var(--red));
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(255,30,20,.5)}
.hovr span{width:35px;height:35px;border-radius:50%;background:#0b0b12;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.hovr b{font-size:15px;font-weight:700;color:var(--gold)}
.hovr i{font-style:normal;font-size:6px;letter-spacing:.6px;color:var(--dim)}
.hid{flex:1;min-width:0;padding-top:2px}
.hnick{font-size:21px;font-weight:700;letter-spacing:.4px;line-height:1.15;word-break:break-word}
.hname{font-size:11.5px;color:var(--dim);margin-top:1px}
.hteam{display:flex;align-items:center;gap:7px;margin-top:8px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--r3);padding:5px 8px}
.hteam b{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hteam span{font-size:9.5px;color:var(--dim);display:block}
.htags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.hbars{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.hb{display:flex;align-items:center;gap:7px}
.hb span{font-size:9px;letter-spacing:.9px;color:var(--dim);width:52px;flex:none;font-weight:700}
.hb b{font-size:11px;width:22px;text-align:right;flex:none}
.hkpi{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.hk{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r3);padding:8px 6px;text-align:center}
.hk span{display:block;font-size:8px;letter-spacing:1.2px;color:var(--dim);font-weight:700}
.hk b{display:block;font-size:13px;margin-top:3px;font-weight:700}

/* ─── Chips ─── */
.lchip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.7px;color:var(--txt2);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
.lchip.gold{color:var(--gold);border-color:rgba(255,212,0,.4);background:rgba(255,212,0,.09)}
.lchip.renov{color:var(--gold);border-color:rgba(255,212,0,.4)}
.lchip.fire{color:#ff8c3a;border-color:rgba(255,140,58,.5);background:rgba(255,140,58,.12);animation:fire 1.5s ease-in-out infinite}
@keyframes fire{0%,100%{box-shadow:0 0 0 rgba(255,140,58,0)}50%{box-shadow:0 0 14px rgba(255,140,58,.5)}}
.chip{background:rgba(255,212,0,.1);border:1px solid rgba(255,212,0,.35);border-radius:999px;color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:.8px;padding:5px 10px;white-space:nowrap}

/* ─── Botones ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-weight:700;letter-spacing:1px;font-size:12.5px;
  padding:12px 15px;border:1px solid var(--line2);border-radius:var(--r3);
  background:rgba(255,255,255,.05);color:var(--txt);cursor:pointer;
  transition:transform .09s,filter .16s,background .16s;text-transform:uppercase;
}
.btn:active{transform:scale(.975)}
.btn.red{background:linear-gradient(160deg,var(--red),var(--red-d));border-color:transparent;color:#fff;box-shadow:0 4px 18px rgba(255,30,20,.32)}
.btn.gold{background:linear-gradient(160deg,var(--gold),var(--gold-d));border-color:transparent;color:#141414;box-shadow:0 4px 18px rgba(255,212,0,.26)}
.btn.ghost{background:rgba(255,255,255,.045)}
.btn.ghost:active{background:rgba(255,255,255,.1)}
.btn.big{width:100%;padding:16px;font-size:14px;letter-spacing:1.4px;margin-top:8px}
.btn.sm{padding:8px 11px;font-size:10.5px;letter-spacing:.7px}
.btn.wfull{width:100%;justify-content:space-between;margin:6px 0;text-transform:none;letter-spacing:.3px;font-size:13px}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ─── Acción de la semana ─── */
.wk{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.wkb{
  background:linear-gradient(160deg,var(--s3),var(--s1));border:1px solid var(--line2);border-radius:var(--r2);
  padding:14px 10px;cursor:pointer;font-family:inherit;color:var(--txt);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .1s,border-color .16s;
}
.wkb:active{transform:scale(.96)}
.wkb i{font-style:normal;font-size:26px;line-height:1}
.wkb b{font-size:11.5px;font-weight:700;letter-spacing:.8px}
.wkb span{font-size:9.5px;color:var(--dim);line-height:1.3}
.wkb.pri{border-color:rgba(255,30,20,.5);background:linear-gradient(160deg,rgba(255,30,20,.14),var(--s1))}
.jbig{
  width:100%;padding:20px;border:0;border-radius:var(--r2);cursor:pointer;font-family:inherit;
  background:linear-gradient(120deg,var(--gold),#ff9d00);color:#141414;
  box-shadow:0 6px 26px rgba(255,212,0,.36);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.jbig::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
.jbig b{font-size:16px;font-weight:700;letter-spacing:1.6px}
.jbig i{font-style:normal;font-size:22px}
.jbig:active{transform:scale(.98)}

/* ─── Barras ─── */
.bar{flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .5s cubic-bezier(.2,.9,.3,1)}
.bar.forma i{background:linear-gradient(90deg,#3a3f4a,var(--gold))}
.statrow{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:12px}
.statrow span{width:112px;flex:none;color:var(--dim);letter-spacing:.5px;font-size:10.5px;text-transform:uppercase;font-weight:700}
.statrow b{width:26px;text-align:right;flex:none;font-size:12.5px}
.statrow.edit span{width:92px}

/* ─── Objetivos ─── */
.objr{margin:10px 0}
.objt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;margin-bottom:5px}
.objt span{flex:1;min-width:0;color:var(--txt2)}
.objt b{flex:none;font-size:11.5px}

/* ─── Tablas ─── */
.tbl{width:100%;border-collapse:collapse;font-size:12px;margin:2px 0 8px}
.tbl td{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.05)}
.tbl .tn{width:100%;letter-spacing:.2px}
.tbl .tlg{width:26px;padding-right:0}
.tbl tr.me td{background:linear-gradient(90deg,rgba(255,212,0,.14),rgba(255,212,0,.03));color:var(--gold);font-weight:700}
.tbl tr.me td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.tbl tr.hd td{color:var(--dim);font-size:9px;letter-spacing:1.4px;font-weight:700}
.tbl tr.dots td{text-align:center;color:var(--dim)}
.tbl tr.clik{cursor:pointer}
.tbl tr.clik:active td{background:rgba(255,255,255,.06)}

/* ─── Formularios ─── */
.lbl{display:block;font-size:9.5px;letter-spacing:1.6px;color:var(--dim);font-weight:700;margin:13px 0 5px;text-transform:uppercase}
.inp{width:100%;background:#08080e;border:1px solid var(--line2);border-radius:var(--r3);color:var(--txt);font-family:inherit;font-size:15px;padding:11px 12px}
.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,212,0,.12)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.inp.sm{font-size:12px;padding:7px 9px}
.inp.num{width:64px;flex:none;text-align:center}
.roles,.regs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0}
.regs{grid-template-columns:1fr}
@media(min-width:520px){.regs{grid-template-columns:1fr 1fr}}
.rolb{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);color:var(--txt);font-family:inherit;padding:11px;text-align:left;cursor:pointer;transition:.14s}
.rolb b{display:block;font-size:12.5px;letter-spacing:.3px}
.rolb span{display:block;font-size:10px;color:var(--dim);margin-top:3px;line-height:1.35}
.rolb.on{border-color:var(--gold);background:rgba(255,212,0,.09);box-shadow:var(--glow-g)}
.mini{width:34px;height:32px;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:var(--r3);color:var(--txt);font-size:16px;font-weight:700;cursor:pointer;flex:none}

/* ─── Carta jugador (compat) ─── */
.carta{background:linear-gradient(165deg,#1a1a28,#0a0a10)}
.cartaTop{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.gridmini{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:7px;margin-top:11px}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r3);padding:9px 7px;text-align:center}
.kpi span{display:block;font-size:8px;letter-spacing:1.2px;color:var(--dim);font-weight:700}
.kpi b{display:block;font-size:13px;margin-top:3px;font-weight:700}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:6px 0}
.mates{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
label.btn input{display:none}

/* ─── Logos ─── */
.lg{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1;box-shadow:var(--sh1);vertical-align:middle}
.lg-escudo{clip-path:polygon(50% 0,100% 22%,100% 68%,50% 100%,0 68%,0 22%)}
.lg-rombo{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.lg-hexa{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.lg-circulo{border-radius:50%}
.lg-rayo{clip-path:polygon(20% 0,100% 0,70% 45%,100% 45%,25% 100%,45% 55%,0 55%)}
.lgimg{overflow:hidden;background:#0a0a12}
.lgimg img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── Escuadra ─── */
.squad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.sqp{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r2);padding:7px 3px;text-align:center}
.sqp.mi{border-color:rgba(255,212,0,.45);background:linear-gradient(180deg,rgba(255,212,0,.11),rgba(255,212,0,.02))}
.sqav{display:flex;justify-content:center}
.sqav svg{width:100%;height:auto;max-width:72px}
.sqp b{display:block;font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqp.mi b{color:var(--gold)}
.sqp span{display:block;font-size:9px;color:var(--dim);margin-top:1px}
.ofteam{display:flex;align-items:center;gap:11px;margin:5px 0 10px}
.ofhead{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.ofgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:7px;margin:8px 0}
.oferta .btn{width:100%;margin-top:8px}

/* ─── Jornada ─── */
.strats{display:grid;grid-template-columns:1fr;gap:8px;margin:6px 0 12px}
@media(min-width:520px){.strats{grid-template-columns:repeat(3,1fr)}}
.stratb{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);color:var(--txt);font-family:inherit;padding:11px;text-align:left;cursor:pointer}
.stratb b{display:block;font-size:11.5px;letter-spacing:1px}
.stratb span{display:block;font-size:10px;color:var(--dim);margin-top:3px}
.stratb.on{border-color:var(--red);background:rgba(255,30,20,.13);box-shadow:var(--glow-r)}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r2);padding:11px 12px;animation:slideIn .32s cubic-bezier(.2,1,.3,1)}
.prow.boo{border-color:rgba(255,212,0,.5);background:linear-gradient(100deg,rgba(255,212,0,.11),rgba(255,255,255,.02));box-shadow:var(--glow-g)}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pmap{font-size:9px;letter-spacing:1.8px;color:var(--dim);font-weight:700}
.pline{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;margin-top:5px}
.ppos{font-size:17px;font-weight:700}
.pk{font-size:11.5px;color:var(--dim)}
.ppt{margin-left:auto;font-size:15px;font-weight:700;color:var(--gold)}
.clutch{margin-top:7px;font-size:11.5px;padding:7px 9px;border-left:3px solid var(--gold);background:rgba(255,212,0,.07);border-radius:0 var(--r3) var(--r3) 0}
.clutch.bad{border-left-color:var(--red);background:rgba(255,30,20,.08)}
.resumen{margin-top:12px;padding:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2)}
.rrow{font-size:14px;margin-top:4px}

/* ─── Noticias ─── */
.news{list-style:none}
.news li{font-size:12px;line-height:1.5;padding:8px 0 8px 11px;border-left:2px solid var(--red);margin:6px 0;background:linear-gradient(90deg,rgba(255,30,20,.06),transparent 60%);border-radius:0 var(--r3) var(--r3) 0;color:var(--txt2)}

/* ─── Modales ─── */
.ovl{position:fixed;inset:0;background:rgba(3,3,7,.8);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:0;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(min-width:560px){.ovl{align-items:center;padding:14px}}
.sheet{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:linear-gradient(180deg,var(--s3),var(--s1));border:1px solid var(--line2);border-radius:var(--r) var(--r) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .26s cubic-bezier(.2,1,.3,1);-webkit-overflow-scrolling:touch}
@media(min-width:560px){.sheet{border-radius:var(--r)}}
@keyframes up{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.sheet::before{content:'';display:block;width:38px;height:4px;border-radius:99px;background:var(--line2);margin:-6px auto 12px}
@media(min-width:560px){.sheet::before{display:none}}
.sheet h3{margin:5px 0 10px;font-size:17px;font-weight:700}

/* ─── Tienda ─── */
.shophead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13px;margin-bottom:5px}
.shtabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:7px;margin:7px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shtabs::-webkit-scrollbar{display:none}
.shtab{flex:none;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;color:var(--dim);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.6px;padding:8px 12px;cursor:pointer;white-space:nowrap;text-transform:uppercase;transition:.14s}
.shtab.on{border-color:var(--gold);color:var(--gold);background:rgba(255,212,0,.11)}
.shlist{max-height:56vh;overflow-y:auto;padding-right:2px;-webkit-overflow-scrolling:touch}
.artsvg{display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.artimg{display:block;overflow:hidden;background:#0a0a12;border-radius:var(--r3)}
.artimg img{width:100%;height:100%;object-fit:cover;display:block}
.shopit2{display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r2);padding:9px;margin:8px 0;transition:.16s}
.shopit2.own{border-color:rgba(255,212,0,.4);background:linear-gradient(100deg,rgba(255,212,0,.07),var(--s1))}
.shopit2.caro{opacity:.55}
.shart{flex:none;width:84px;display:flex;align-items:center;justify-content:center}
.shopit2 .shinfo{flex:1;min-width:0}
.shopit2 .shinfo b{display:block;font-size:12.5px;line-height:1.25}
.shopit2 .shinfo span{display:block;font-size:10px;color:var(--dim);margin-top:3px;line-height:1.35}
.shopit2 .shinfo i{display:block;font-size:13.5px;font-weight:700;font-style:normal;margin-top:4px}
.shbtn{flex:none;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.imgb{padding:6px 8px!important}
.shopit{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:10px;margin:7px 0}
.shinfo{flex:1;min-width:0}
.shopit b{display:block;font-size:12.5px}
.shopit span{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.shico{font-size:22px;flex:none;width:30px;text-align:center}
.misgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:7px;margin:6px 0}
.misc{background:rgba(255,255,255,.04);border:1px solid rgba(255,212,0,.28);border-radius:var(--r2);padding:8px 5px;text-align:center}
.misc svg,.misc .artimg{margin:0 auto}
.misc b{display:block;font-size:9.5px;margin-top:5px;color:var(--gold);line-height:1.25}
.misc i{display:block;font-size:8.5px;color:var(--dim);font-style:normal;margin-top:2px}

/* ─── Inversiones ─── */
.invr{background:linear-gradient(100deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r2);padding:11px;margin:8px 0}
.invtop{display:flex;align-items:center;gap:9px}
.invn{flex:1;min-width:0}
.invn b{display:block;font-size:13px;letter-spacing:.4px}
.invn span{display:block;font-size:10px;color:var(--dim);margin-top:2px}
.invp{flex:none;text-align:right}
.invp b{display:block;font-size:13.5px}
.invp span{display:block;font-size:10.5px;font-weight:700;margin-top:2px}
.spk{flex:none;opacity:.95}
.invpos{font-size:11px;color:var(--dim);margin:7px 0 4px;padding:6px 8px;background:rgba(255,255,255,.04);border-left:2px solid var(--gold);border-radius:0 var(--r3) var(--r3) 0}
.invb{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.invb .btn{flex:1 1 auto;padding:8px;font-size:10px}

/* ─── Vida ─── */
.avsvg{display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.avbox{display:flex;align-items:center;gap:14px;background:radial-gradient(200px 120px at 30% 20%,rgba(255,212,0,.09),transparent 70%),rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r2);padding:12px;margin:10px 0}
.avbtns{display:flex;flex-direction:column;gap:8px;flex:1}
.avprev{display:flex;justify-content:center;padding:8px 0 4px}
.avwrap{flex:none;cursor:pointer;transition:transform .12s}
.avwrap:active{transform:scale(.96)}
.felbox{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:11px;margin:8px 0}
.felbox .bar{margin-top:5px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:7px;margin:6px 0}
.vp{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:8px;cursor:pointer;transition:border-color .14s}
.vp:active{border-color:var(--gold)}
.vpav{flex:none} .vpav svg{display:block}
.vpi{flex:1;min-width:0}
.vpi b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpi span{display:block;font-size:9px;margin:1px 0 4px}

/* ─── Duelo ─── */
.duelo{display:flex;align-items:center;gap:8px;margin:8px 0}
.dl{flex:1;text-align:center;min-width:0}
.dlav{display:flex;justify-content:center}
.dl b{display:block;font-size:11.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl span{display:block;font-size:14px;font-weight:700}
.dvs{flex:none;text-align:center;padding:0 4px}
.dvs b{display:block;font-size:18px;color:var(--gold)}
.dvs span{display:block;font-size:8.5px;letter-spacing:2px;color:var(--dim)}

/* ─── Logros ─── */
#logro-pop{position:fixed;left:50%;top:12px;transform:translateX(-50%) translateY(-140%);z-index:80;opacity:0;transition:.34s cubic-bezier(.2,1.5,.4,1);pointer-events:none;width:min(92vw,390px)}
#logro-pop.on{opacity:1;transform:translateX(-50%) translateY(0)}
.lgpop{display:flex;align-items:center;gap:11px;background:linear-gradient(100deg,#231d09,#0d0d14);border:1px solid var(--gold);border-radius:var(--r2);padding:12px 14px;box-shadow:0 10px 34px rgba(255,212,0,.28)}
.lgico{font-size:28px;flex:none}
.lgpop b{display:block;font-size:8.5px;letter-spacing:2px;color:var(--gold)}
.lgpop span{display:block;font-size:13px;font-weight:700;margin-top:2px}
.lggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:6px;max-height:54vh;overflow-y:auto;margin:8px 0;padding-right:2px}
.lgc{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r2);padding:10px 6px;text-align:center;opacity:.42}
.lgc.ok{opacity:1;border-color:rgba(255,212,0,.42);background:rgba(255,212,0,.06)}
.lgc span{display:block;font-size:22px;line-height:1}
.lgc b{display:block;font-size:9.5px;margin-top:4px}
.lgc.ok b{color:var(--gold)}
.lgc i{display:block;font-size:8.5px;color:var(--dim);font-style:normal;margin-top:2px;line-height:1.3}
.gimg{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:8px 5px;text-align:center}
.gimg svg,.gimg .artimg{margin:0 auto}
.gimg b{display:block;font-size:9.5px;margin:5px 0;line-height:1.2}
.gimg .btn{width:100%;margin-top:3px;padding:5px;font-size:9px}
.rankme{background:linear-gradient(90deg,rgba(255,212,0,.13),transparent);border:1px solid rgba(255,212,0,.35);border-radius:var(--r2);padding:10px 12px;margin:8px 0;font-size:12.5px}
.live{color:var(--ok);font-weight:700;font-size:10.5px;letter-spacing:1px}
.autherr{color:#ff7b7b;font-size:12px;min-height:16px;margin:8px 0}
.sqlbox{height:120px;font-size:10px;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.4;resize:vertical;white-space:pre;overflow:auto}

/* ─── Editor ─── */
.edlist{max-height:44vh;overflow-y:auto;margin-top:8px}
.edrow{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:8px 10px;margin:6px 0}
.edinfo{flex:1;min-width:0}
.edinfo b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edinfo span{display:block;font-size:9.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edprev{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:12px;margin:8px 0}
.icgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px}
.icb{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r3);color:var(--txt);font-size:16px;padding:7px 0;cursor:pointer}
.icb.on{border-color:var(--gold);background:rgba(255,212,0,.16)}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px}
.colb{height:28px;border:1px solid var(--line);border-radius:var(--r3);cursor:pointer}
.colb.on{outline:2px solid var(--gold);outline-offset:1px}
.cmdot{width:14px;height:14px;flex:none;border:1px solid var(--line);border-radius:3px}
.edp{display:flex;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:8px;margin:6px 0;align-items:center}
.edpav{flex:none;cursor:pointer;position:relative}
.edpav::after{content:'✏️';position:absolute;right:-2px;bottom:-2px;font-size:10px;background:var(--s1);border:1px solid var(--line);padding:1px 2px;border-radius:3px}
.edpav svg{display:block}
.edpf{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.edpr{display:flex;gap:5px}
.edpr select.inp{flex:1;min-width:0}

/* ─── Minijuegos ─── */
.mjcard{display:flex;align-items:center;gap:11px;width:100%;background:linear-gradient(100deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r2);color:var(--txt);font-family:inherit;padding:12px;margin:7px 0;cursor:pointer;text-align:left;transition:.14s}
.mjcard:active{border-color:var(--gold);background:rgba(255,212,0,.07)}
.mjico{font-size:24px;flex:none;width:30px;text-align:center}
.mjinfo2{flex:1;min-width:0}
.mjinfo2 b{display:block;font-size:12.5px}
.mjinfo2 span{display:block;font-size:10px;color:var(--dim);margin-top:2px}
.mjarea{position:relative;height:262px;background:radial-gradient(180px 120px at 50% 40%,rgba(255,30,20,.1),transparent 70%),#07070c;border:1px solid var(--line);border-radius:var(--r2);margin:10px 0;overflow:hidden;touch-action:manipulation}
.mjtar{position:absolute;border-radius:50%;border:3px solid var(--gold);background:radial-gradient(circle,var(--red) 0 32%,transparent 33% 55%,var(--gold) 56% 100%);cursor:pointer;padding:0;animation:pop .12s ease;box-shadow:var(--glow-g)}
@keyframes pop{from{transform:scale(.5)}to{transform:scale(1)}}
.mjboom{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);color:var(--gold);font-size:30px;animation:fade .3s ease forwards}
@keyframes fade{to{opacity:0;transform:translate(-50%,-50%) scale(2)}}
.mjbar{text-align:center;font-size:12px;padding:7px 0;color:var(--dim)}
.mjpad{height:182px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;letter-spacing:2px;border:2px solid var(--line);border-radius:var(--r2);margin:10px 0;cursor:pointer;user-select:none;touch-action:manipulation;transition:background .06s}
.mjpad.wait{background:#2a0c0c;color:#ff9c9c;border-color:#5a1a1a}
.mjpad.go{background:#073d20;color:#00ffa2;border-color:var(--ok);box-shadow:0 0 30px rgba(0,224,138,.35)}
.mjpad.hit{background:var(--s2);color:var(--gold);border-color:var(--gold)}
.mjpad.early{background:#3d2f00;color:var(--gold);border-color:#8a6d00}
.mjgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:10px 0;aspect-ratio:1}
.mjc{background:var(--s1);border:1px solid rgba(255,255,255,.04);border-radius:3px;display:flex;align-items:center;justify-content:center}
.mjc.zona{background:rgba(0,224,138,.16);border-color:rgba(0,224,138,.32)}
.mjc.en{background:rgba(255,30,20,.14)}
.mjen{color:var(--red);font-size:14px;font-weight:700}
.mjop{width:100%;height:100%;background:var(--gold);border:none;border-radius:3px;color:#141414;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
.mjop:active{transform:scale(.92)}
.mjleg{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.mjcall{background:rgba(255,255,255,.05);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 var(--r2) var(--r2) 0;padding:13px;margin:8px 0;font-size:13.5px;line-height:1.5}
.mjtime{height:5px;background:rgba(255,255,255,.08);border-radius:99px;margin-bottom:10px;overflow:hidden}
.mjtime i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .09s linear}
.mpads{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.mpad{height:90px;border:2px solid var(--line);border-radius:var(--r2);cursor:pointer;transition:filter .1s,transform .06s;touch-action:manipulation}
.mpad:active{transform:scale(.96)}
.mpad.p0{background:#7a1010} .mpad.p1{background:#0e5a3a} .mpad.p2{background:#0d3a6b} .mpad.p3{background:#7a5f00}
.mpad.on{filter:brightness(2.8);border-color:#fff}
.mjres{text-align:center;padding:14px 0 4px}
.mjscore{font-size:54px;font-weight:700;line-height:1}
.mjrank{font-size:14px;font-weight:700;letter-spacing:3px;margin-top:4px}

/* ─── Toast / footer ─── */
#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(16px);background:var(--s3);border:1px solid rgba(255,212,0,.45);border-radius:999px;color:var(--txt);font-size:12.5px;padding:11px 18px;opacity:0;pointer-events:none;transition:.26s cubic-bezier(.2,1.3,.4,1);z-index:70;max-width:92vw;text-align:center;box-shadow:var(--sh2)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.foot{text-align:center;font-size:9px;letter-spacing:1.8px;color:var(--dim);padding:16px 12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─── Estadísticas de jugadores ─── */
.statshead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0 10px}
.statsload{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 0;color:var(--dim);font-size:12px}
.spin{width:32px;height:32px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stbig{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.stcard{background:linear-gradient(160deg,var(--s3),var(--s1));border:1px solid var(--line2);border-radius:var(--r2);padding:14px 8px;text-align:center}
.stcard b{display:block;font-size:26px;font-weight:700;line-height:1}
.stcard span{display:block;font-size:8px;letter-spacing:1px;color:var(--dim);font-weight:700;margin-top:5px}
.strow{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:12px}
.strow span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strow b{flex:none;width:34px;text-align:right;font-size:12.5px;font-weight:700}
.daychart{display:flex;align-items:flex-end;gap:4px;height:110px;padding:6px 2px 0;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r2);margin:6px 0}
.daycol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.daybar{width:70%;max-width:26px;background:linear-gradient(180deg,var(--gold),var(--red));border-radius:3px 3px 0 0;position:relative;min-height:6px;display:flex;justify-content:center}
.daybar span{position:absolute;top:-15px;font-size:9px;font-weight:700;color:var(--txt2)}
.daycol i{font-size:7.5px;color:var(--dim);font-style:normal;white-space:nowrap}

/* ─── Selección de modo ─── */
.modeb{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;background:linear-gradient(160deg,var(--s3),var(--s1));border:1px solid var(--line2);border-radius:var(--r);padding:18px 16px;margin:10px 0;cursor:pointer;color:var(--txt);font-family:inherit;transition:.15s;position:relative;overflow:hidden}
.modeb::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--red),var(--gold))}
.modeb:active{transform:scale(.98);border-color:var(--gold)}
.modeb i{font-style:normal;font-size:34px;line-height:1}
.modeb b{font-size:16px;letter-spacing:1.4px}
.modeb span{font-size:12px;color:var(--dim);line-height:1.5}
.negoferta{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r2);padding:12px}
.negoferta b{font-size:21px;font-weight:700;color:var(--gold);min-width:120px;text-align:center}

/* ─── Asistente Supabase + splash ─── */
.wiz{display:flex;align-items:center;justify-content:center;gap:0;margin:10px 0 4px}
.wizn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--s2);color:var(--dim);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.wizn.on{background:linear-gradient(160deg,var(--gold),var(--gold-d));color:#141414;border-color:transparent;box-shadow:var(--glow-g)}
.wizl{width:34px;height:2px;background:var(--line2)}
.guia{margin:8px 0 12px 18px;font-size:12.5px;color:var(--txt2);line-height:1.6}
.guia li{margin:7px 0}
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg);z-index:5}
.bootmark{font-size:26px;color:var(--gold);letter-spacing:6px;text-shadow:0 0 18px rgba(255,212,0,.8);animation:tw 1.6s ease-in-out infinite}
.boot b{font-size:19px;letter-spacing:3px}
.boot b em{font-style:normal;color:var(--gold)}
.boot span{font-size:9px;letter-spacing:4px;color:var(--dim)}
.bootbar{width:150px;height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:8px}
.bootbar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:99px;animation:bootslide 1.1s ease-in-out infinite}
@keyframes bootslide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}

/* ─── Liga viva + sponsors ─── */
.sect.goldliga{border-color:rgba(255,212,0,.35);background:linear-gradient(180deg,rgba(255,212,0,.05),var(--s1))}
.sect.goldliga::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--red));border-radius:var(--r) 0 0 var(--r)}
.lignot{font-size:12.5px;color:var(--txt2);padding:8px 0 8px 11px;border-left:2px solid var(--gold);margin:6px 0;background:linear-gradient(90deg,rgba(255,212,0,.06),transparent 60%);border-radius:0 var(--r3) var(--r3) 0;line-height:1.5}
.lignf{display:inline-block;font-size:9px;letter-spacing:1px;color:var(--gold);font-weight:700;margin-right:7px;text-transform:uppercase}
.spban{display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,var(--s3),var(--s1));border:1px solid var(--line2);border-radius:var(--r2);padding:9px 12px;margin-bottom:10px}
.spban span{display:block;font-size:8px;letter-spacing:1.6px;color:var(--dim);font-weight:700}
.spban b{display:block;font-size:14px;letter-spacing:.4px;margin-top:2px}
.spimg{width:38px;height:38px;border-radius:8px;overflow:hidden;background:#0a0a12;flex:none;border:1px solid var(--line)}
.spimg.sm{width:30px;height:30px}
.spimg img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- GAMING HOUSE Y ESTADIO ---------- */
.casa-escena{background:#06060a;border-bottom:1px solid var(--line2)}
.casa-svg{display:block;width:100%;height:auto}
.casa-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.casa-stats>div{background:var(--s2);padding:10px 12px;text-align:center}
.casa-stats b{display:block;font-size:17px;color:var(--gold);line-height:1.2}
.casa-stats span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.quim-barra{height:8px;background:var(--s3);border:1px solid var(--line2);overflow:hidden;margin-top:10px}
.quim-lleno{height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .4s ease}
.zonas{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.zona{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--s2);border:1px solid var(--line);border-left:3px solid var(--line2)}
.zona.mia{border-left-color:var(--gold);background:rgba(255,212,0,.05)}
.zona.bloq{opacity:.5}
.zona-ico{font-size:22px;flex:none;width:34px;text-align:center}
.zona-txt{flex:1;min-width:0}
.zona-txt b{display:block;font-size:14px;margin-bottom:2px}
.zona-txt span{font-size:12px;color:var(--txt2);line-height:1.45;display:block}
.zona-acc{flex:none}
.estadio-sig{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.estadio-sig>div{flex:1;min-width:170px}
.estadio-sig b{display:block;font-size:14px;margin-bottom:3px}
.estadio-sig span{font-size:12px;color:var(--dim);line-height:1.45}


/* ---------- ICONOS DE NAVEGACIÓN ---------- */
.nbtn i{display:block;width:21px;height:21px;margin:0 auto 3px}
.nbtn i svg{width:100%;height:100%;display:block}
.zona-ico{font-family:var(--fm,monospace);font-size:19px;color:var(--gold);opacity:.85}
.zona.mia .zona-ico{opacity:1}

/* ---------- INDICADOR DE MODO STAFF ---------- */
.adm-flag{display:inline-block;background:var(--red);color:#fff;font-size:8.5px;letter-spacing:.14em;padding:1px 6px;font-weight:700}

/* ---------- ESTADO DE SESIÓN DEL STAFF ---------- */
.ses-ok,.ses-mal{padding:10px 13px;margin-bottom:8px;border-left:3px solid}
.ses-ok{background:rgba(0,224,138,.08);border-color:var(--ok)}
.ses-mal{background:rgba(255,149,0,.08);border-color:var(--warn)}
.ses-ok b,.ses-mal b{display:block;font-size:13px;margin-bottom:3px}
.ses-ok b{color:var(--ok)} .ses-mal b{color:var(--warn)}
.ses-ok span,.ses-mal span{font-size:11.5px;color:var(--txt2);line-height:1.5}

/* ---------- CENTRO DE ANÁLISIS ---------- */
.an-cab{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:14px}
.an-forma{display:block;font-size:19px;letter-spacing:.08em;color:var(--txt2)}
.an-forma.ok{color:var(--ok)} .an-forma.mal{color:var(--warn)}
.an-cab .dim{font-size:11.5px}
.an-mini{display:flex;gap:1px;background:var(--line)}
.an-mini>div{background:var(--s2);padding:8px 13px;text-align:center;min-width:64px}
.an-mini b{display:block;font-size:16px;color:var(--gold);line-height:1.2}
.an-mini span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.an-graf{margin-top:14px}
.an-graf-t{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.an-linea{width:100%;height:74px;display:block;background:var(--s1);border:1px solid var(--line)}
.an-vacio{padding:20px;text-align:center;color:var(--dim);font-size:12.5px;border:1px dashed var(--line2)}

.an-pos{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.an-pos b{font-size:36px;color:var(--gold);line-height:1}
.an-pos span{font-size:12px;color:var(--dim)}
.an-gap{font-size:12.5px;color:var(--txt2);padding:7px 11px;background:var(--s2);border-left:2px solid var(--line2);margin-bottom:6px}
.an-gap.ok{border-left-color:var(--ok)} .an-gap.mal{border-left-color:var(--warn)}
.an-gap b{color:var(--gold)}

.an-comp{margin-top:13px}
.an-comp-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.an-comp-h span{font-size:11.5px;color:var(--txt2)}
.an-comp-h b{font-size:14px;color:var(--gold)}
.an-comp-b{position:relative;height:9px;background:var(--s3);border:1px solid var(--line2)}
.an-comp-f{height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}
.an-comp-m{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--txt2);opacity:.75}
.an-comp-p{font-size:10px;color:var(--dim);margin-top:4px}

.an-tabla-w{overflow-x:auto;margin-top:10px}
.an-tabla{width:100%;border-collapse:collapse;font-size:12.5px;min-width:430px}
.an-tabla th{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:7px 6px;border-bottom:1px solid var(--line2);white-space:nowrap}
.an-tabla td{padding:8px 6px;border-bottom:1px solid var(--line)}
.an-tabla .n{text-align:center}
.an-tabla .tn{font-weight:600}
.an-tabla .gold{color:var(--gold);font-weight:700}
.an-tabla tr.me{background:rgba(255,212,0,.07)}
.an-yo{font-size:8.5px;background:var(--gold);color:#06060a;padding:1px 5px;letter-spacing:.1em}
.an-perfil{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line2);color:var(--txt2);white-space:nowrap}
.p-agresivo{border-color:var(--red);color:var(--red)}
.p-zonero{border-color:var(--info);color:var(--info)}
.p-rematador{border-color:var(--gold);color:var(--gold)}
.an-amen{width:56px;height:6px;background:var(--s3);border:1px solid var(--line2)}
.an-amen>div{height:100%;background:linear-gradient(90deg,var(--warn),var(--red))}
.an-titulo{font-size:9px;background:var(--gold);color:#06060a;padding:2px 6px;letter-spacing:.1em;font-weight:700}

/* ---------- BARRA DE STAFF ---------- */
.staffbar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(10,10,16,.97);
  border-top:2px solid var(--red);backdrop-filter:blur(10px)}
.staffbar-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:8px;
  padding:9px 14px;flex-wrap:wrap}
.sb-tag{font-family:var(--fm,monospace);font-size:9px;letter-spacing:.16em;background:var(--red);
  color:#fff;padding:3px 8px;font-weight:700;flex:none}
.sb-est{font-size:10.5px;color:var(--txt2);white-space:nowrap}
.sb-est.ok{color:var(--ok)} .sb-est.warn{color:var(--warn)}
.sb-sep{flex:1;min-width:4px}
.sb-btn{background:none;border:1px solid var(--line2);color:var(--txt2);font-family:inherit;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;cursor:pointer;
  white-space:nowrap;transition:.15s}
.sb-btn:hover{color:#fff;border-color:var(--gold)}
.sb-btn.on{background:var(--gold);border-color:var(--gold);color:#06060a;font-weight:700}
.sb-btn.oro{border-color:var(--gold);color:var(--gold)}
.sb-btn.tenue{opacity:.55}
/* El contenido no debe quedar tapado por la barra */
body:has(.staffbar) .wrap,body:has(.staffbar) #app{padding-bottom:64px}
@media(max-width:700px){
  .staffbar-in{padding:7px 10px;gap:5px}
  .sb-est{display:none}
  .sb-btn{font-size:9.5px;padding:5px 8px}
}

/* ---------- IMPORTAR DE LIGA PROSUR ---------- */
.imp-vacio{padding:24px;text-align:center;color:var(--dim);font-size:12.5px;
  border:1px dashed var(--line2);margin:12px 0}
.imp-tiers{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.imp-tier{flex:1;min-width:100px;background:var(--s2);border:1px solid var(--line2);color:var(--txt2);
  font-family:inherit;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 8px;
  cursor:pointer;transition:.15s}
.imp-tier:hover{color:#fff;border-color:var(--gold)}
.imp-tier.on{background:var(--gold);border-color:var(--gold);color:#06060a;font-weight:700}
.imp-cab{display:flex;align-items:center;gap:8px;margin:14px 0 8px}
.imp-cab b{flex:1;font-size:12px;color:var(--gold)}
.imp-lista{max-height:320px;overflow-y:auto;border:1px solid var(--line);background:var(--s1)}
.imp-eq{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:.12s}
.imp-eq:last-child{border-bottom:none}
.imp-eq:hover{background:var(--s2)}
.imp-eq.on{background:rgba(255,212,0,.06)}
.imp-check{width:18px;height:18px;border:1px solid var(--line2);display:flex;align-items:center;
  justify-content:center;font-size:12px;color:var(--gold);flex:none}
.imp-eq.on .imp-check{border-color:var(--gold)}
.imp-logo{width:30px;height:30px;background:var(--s3) center/contain no-repeat;flex:none}
.imp-logo.vacio{border:1px dashed var(--line2)}
.imp-txt{flex:1;min-width:0}
.imp-txt b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-txt span{display:block;font-size:10.5px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.imp-n{font-family:var(--fm,monospace);font-size:11px;color:var(--gold);flex:none}


/* ---------- MÓVIL ---------- */
@media (max-width:640px){
  .panel{padding:14px}
  .btn{min-height:46px}
  .btn.sm,.mini{min-height:38px}
  .inp{font-size:16px;padding:12px}
  .modal{max-height:100vh;border-radius:0}
  .zona{padding:10px}
  .zona-ico{width:28px;font-size:17px}
  .zona-txt b{font-size:13px}
  .zona-txt span{font-size:11px}
  .casa-stats{grid-template-columns:repeat(2,1fr)}
  .an-tabla{min-width:0;font-size:11.5px}
  .an-tabla th{font-size:8px;padding:6px 4px}
  .an-tabla td{padding:7px 4px}
  .an-mini{width:100%}
  .an-mini>div{flex:1;padding:7px 8px}
  .imp-lista{max-height:44vh}
  .estadio-sig{flex-direction:column;align-items:stretch}
  .estadio-sig .btn{width:100%}
}
@media (max-width:400px){
  .casa-stats{grid-template-columns:1fr 1fr}
  .an-tabla th:nth-child(3),.an-tabla td:nth-child(3){display:none}
}