:root{
  /* Los colores del modo oscuro son los de siempre; lo que cambió son las
     formas (esquinas más redondas y controles más altos). */
  --bg:#080d1a; --panel:#0e1526; --panel2:#141d33; --panel3:#1b2540;
  --line:#1f2b45; --line2:#2a3958;
  --txt:#e8eefb; --dim:#8ea0bd; --dim2:#64748b;
  --blue:#2f7ff0; --blue2:#38bdf8; --green:#22c55e; --green2:#4ade80;
  --gray:#5b6b86; --warn:#fbbf24; --bad:#f87171;
  --radius:18px; --radius-sm:13px;
  --side:236px;
  --head:rgba(8,13,26,.92);
  --sombra:0 22px 60px rgba(0,0,0,.6);
  --sombra2:0 14px 34px rgba(0,0,0,.45);
}
/* Tema claro: mismos componentes, otra paleta. Se guarda en el navegador.
   Los grises tiran a azul y el texto es oscuro de verdad: en la primera
   versión todo quedaba deslavado y las etiquetas no se leían. */
:root[data-theme="claro"]{
  --bg:#eaeff7; --panel:#ffffff; --panel2:#f2f5fb; --panel3:#e4ebf7;
  --line:#d6dfee; --line2:#bfcde3;
  --txt:#0b1b33; --dim:#4a5b75; --dim2:#67789a;
  --blue:#1f6fe0; --blue2:#0b76c4;
  --green:#16a34a; --green2:#15803d;
  --gray:#7e8ea6; --warn:#c07c0a; --bad:#dc2626;
  --head:rgba(234,239,247,.92);
  --sombra:0 24px 54px rgba(13,30,60,.18);
  --sombra2:0 14px 30px rgba(13,30,60,.13);
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--blue2)}
:root[data-theme="claro"] a{color:#0b76c4}

/* ---------- armazón: lateral fija (horizontal) o barra inferior (vertical) ---------- */
.app{display:flex;align-items:flex-start;min-height:100vh}
.col{flex:1;min-width:0}
main{padding:18px 22px 80px;max-width:1180px}

.side{width:var(--side);flex:0 0 var(--side);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:6px;padding:18px 14px;
  background:var(--panel);border-right:1px solid var(--line)}
.sbrand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
.sbrand .logo,.mbrand .logo{width:30px;height:30px;flex:0 0 auto}
.sbrand h1,.mbrand h1{font-size:19px;margin:0;letter-spacing:-.4px;font-weight:700}
.snav{display:flex;flex-direction:column;gap:3px}
.snav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:var(--radius-sm);padding:11px 12px;
  color:var(--dim);font-size:14.5px;position:relative}
.snav button svg{width:20px;height:20px;flex:0 0 auto}
.snav button:hover{background:var(--panel2);color:var(--txt)}
.snav button.on{background:rgba(47,127,240,.12);color:var(--txt);font-weight:600}
.snav button.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue)}
.snav button.on svg{color:var(--blue2)}
.sidefoot{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--line)}

/* ---------- barra superior ---------- */
header{position:sticky;top:0;z-index:30;background:var(--head);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 22px}
.mbrand{display:none;align-items:center;gap:9px}
.topbar .tag{color:var(--dim);font-size:12.5px}
.tbright{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  padding:0;border-radius:50%;background:var(--panel2);color:var(--dim)}
.iconbtn svg{width:19px;height:19px}
.iconbtn:hover{color:var(--txt)}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;
  background:var(--panel2);font-size:14px;font-weight:600}
.userchip .uname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userchip .icon{color:var(--dim)}
.usermenu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;display:none;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:var(--sombra2);padding:6px;z-index:60}
.usermenu.on{display:block}
.usermenu .umhead{padding:9px 11px 7px;border-bottom:1px solid var(--line);margin-bottom:5px}
.usermenu .umhead b{display:block;font-size:14px}
.usermenu .umhead span{color:var(--dim);font-size:12px}
.usermenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:0;padding:9px 11px;border-radius:8px;font-size:14px;color:var(--txt)}
.usermenu button:hover{background:var(--panel2)}
.usermenu button svg{width:16px;height:16px;color:var(--dim)}
.usermenu button.salir{color:var(--bad)}

.toolbar{padding:0 22px 12px}
.controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.subnav:empty{display:none}
.subnav button{border-radius:999px;padding:6px 14px;font-size:13px;background:var(--panel2)}
.subnav button.on{background:var(--blue);color:#fff;border-color:transparent;font-weight:600}

input,select,button{font-family:inherit;font-size:14px;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:11px 14px}
input::placeholder{color:var(--dim2)}
/* El aro de foco solo para quien navega con teclado. Al tocar con el dedo o
   pinchar con el ratón ya sabes dónde has tocado: el aro sobra y se ve como
   un recuadro suelto flotando. */
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid rgba(47,127,240,.55);outline-offset:1px}
button{cursor:pointer}
button:hover{border-color:var(--blue)}
.btn-primary{background:var(--blue);border-color:transparent;color:#fff;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px}
.btn-primary:hover{background:#3d8bf7;border-color:transparent}
.icon{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px}

.field{display:flex;align-items:center;gap:9px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:var(--radius-sm);padding:0 13px}
.field input,.field select{border:0;background:transparent;padding:11px 0}
/* Enfocar un campo solo tiñe el borde de su caja. El aro lo pintaba el
   input de dentro, que no tiene borde ni ocupa el ancho del .field, así que
   se dibujaba alrededor del texto y dejaba fuera el icono: ese recuadro azul
   descolocado. Se quita del campo y se marca en la caja, sin resplandor.
   Quien navega con teclado sigue viendo dónde está. */
.field:focus-within{border-color:var(--blue)}
.field input:focus-visible,.field select:focus-visible{outline:none}
.field.grow{flex:1;min-width:200px;max-width:340px}
.field svg{color:var(--dim)}

/* selector de competicion */
.comp-btn{display:flex;align-items:center;gap:9px;min-width:210px;justify-content:space-between}
.comp-btn .lbl{display:flex;align-items:center;gap:8px;font-weight:600}
.picker{position:absolute;top:calc(100% + 6px);left:0;width:min(640px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:var(--sombra);padding:12px;display:none;z-index:50}
.picker.on{display:block}
.picker .cols{display:flex;flex-wrap:wrap;align-content:flex-start;gap:0 20px;
  max-height:min(62vh,520px);overflow-y:auto;margin-top:10px;padding-bottom:4px}
.picker .grp{flex:1 1 calc(50% - 12px);min-width:170px;margin-bottom:12px}
@media(max-width:480px){.picker .grp{flex-basis:100%}}
.picker .grp h5{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--dim2);font-weight:600}
.picker .it{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  cursor:pointer;font-size:14px}
.picker .it:hover{background:var(--panel2)}
.picker .it.sel{background:rgba(47,127,240,.14);box-shadow:inset 0 0 0 1px rgba(47,127,240,.4)}
.picker .it .chk{color:var(--blue2);width:15px;flex:0 0 auto}
.picker .it .fl{font-size:16px;line-height:1}
.pos{position:relative}

.status{display:flex;align-items:center;gap:7px;color:var(--dim);
  font-size:11.5px;line-height:1.25}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.dot.stale{background:var(--warn);box-shadow:0 0 0 3px rgba(251,191,36,.16)}

/* sin flechas: se escribe el numero o se usa el deslizador */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.info{width:15px;height:15px;color:var(--dim2);cursor:help}

/* ---------- barra inferior: solo en vertical ---------- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--head);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(5,1fr)}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;border:0;padding:7px 2px;border-radius:var(--radius-sm);
  color:var(--dim2);font-size:10.5px;line-height:1.1}
.tabbar button svg{width:21px;height:21px}
.tabbar button.on{color:var(--blue2)}
.tabbar button.on svg{color:var(--blue2)}

@media(max-width:900px){
  .side{display:none}
  .mbrand{display:flex}
  .topbar .tag{display:none}
  .topbar{padding:10px 14px}
  .toolbar{padding:0 14px 10px}
  main{padding:14px 14px 86px}
  .tabbar{display:grid}
  .userchip .uname{max-width:92px}
}

/* ---------- lista compacta ---------- */
.meta{color:var(--dim);font-size:12.5px;margin-bottom:12px;line-height:1.6}
.list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.lhead,.row{display:grid;grid-template-columns:30px 1fr 62px 62px 62px 64px;
  align-items:center;gap:9px;padding:11px 13px}
.lhead{color:var(--dim2);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  border-bottom:1px solid var(--line);font-weight:600}
.lhead .c{text-align:center}
.row{border-bottom:1px solid var(--line);cursor:pointer;
  border-left:3px solid transparent;padding-left:10px}
.row:last-child{border-bottom:0}
.row:hover{background:var(--panel2)}
.row.sel{background:rgba(47,127,240,.09);border-left-color:var(--blue)}
.star{background:none;border:0;padding:0;color:var(--dim2);cursor:pointer;line-height:1}
.star.on{color:var(--warn)}
.match{display:flex;align-items:center;gap:10px;min-width:0}
.crests{display:flex;flex:0 0 auto}
/* Fondo blanco: muchos escudos son azul marino o negro (Yankees, Juventus,
   Raiders...) y sobre el panel oscuro desaparecian. */
.crest{width:26px;height:26px;border-radius:50%;background:#fff;object-fit:contain;
  border:1px solid rgba(255,255,255,.22);padding:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.45)}
.crest.mono{padding:0;border-color:rgba(255,255,255,.14)}
.crest+.crest{margin-left:-8px}
.crests .crest:last-child{z-index:1}
.mono{display:inline-flex;align-items:center;justify-content:center;font-size:10px;
  font-weight:700;color:#fff}
.mtxt{min-width:0}
.mtxt .t{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mtxt .t .vs{color:var(--dim2);font-weight:400;margin:0 3px}
.mtxt .d{color:var(--dim2);font-size:11.5px}
.chip{text-align:center;border-radius:8px;padding:7px 4px;font-size:13px;font-weight:600;
  background:var(--panel2);color:var(--dim);font-variant-numeric:tabular-nums}
.chip.h{background:rgba(34,197,94,.14);color:#86efac}
.chip.d{background:rgba(91,107,134,.18);color:#c3cede}
.chip.a{background:rgba(56,189,248,.14);color:#93d7fb}
.chip.top.h{background:var(--green);color:#052e16}
.chip.top.d{background:var(--gray);color:#0b1220}
.chip.top.a{background:var(--blue2);color:#04202e}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--dim2)}
.actions svg{width:17px;height:17px}
.row:hover .actions{color:var(--blue2)}
@media(max-width:560px){
  .lhead,.row{grid-template-columns:24px 1fr 50px 50px 50px 26px;gap:6px;padding:10px 9px}
  .lhead .an,.actions .bars{display:none}
  .mtxt .t{font-size:13.5px}
}

/* ---------- ficha ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:16px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--dim);font-size:13.5px;
  background:none;border:0;padding:0 0 12px;cursor:pointer}
.back:hover{color:var(--blue2);border:0}
.dhead{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:14px}
.dhead .crest{width:42px;height:42px;padding:3px}
.dhead h2{margin:0;font-size:21px;letter-spacing:-.3px}
.dhead h2 .vs{color:var(--dim2);font-weight:400;font-size:17px;margin:0 5px}
.dhead .d{color:var(--dim2);font-size:12.5px}
.confpill{margin-left:auto;background:rgba(47,127,240,.13);border:1px solid rgba(47,127,240,.4);
  color:var(--blue2);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600}
.bar{display:flex;height:34px;border-radius:10px;overflow:hidden;margin:4px 0 6px}
.bar div{display:flex;align-items:center;justify-content:center;font-size:12.5px;
  font-weight:700;min-width:0;overflow:hidden}
.b1{background:var(--green);color:#052e16} .bx{background:var(--gray);color:#0b1220}
.b2{background:var(--blue2);color:#04202e}
.legend{display:flex;justify-content:space-between;color:var(--dim2);font-size:11.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px;margin-top:14px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px}
.stat .k{color:var(--dim2);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px}
.stat .v{font-size:18px;font-weight:700;margin-top:3px}
.value{margin-top:14px;border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.07);
  border-radius:var(--radius-sm);padding:11px 13px}
.value .row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:3px 0;
  flex-wrap:wrap;border:0;cursor:default;grid-template-columns:none}
.value .row:hover{background:none}
.value b{color:var(--green2)}
.players{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:640px){.players{grid-template-columns:1fr}}
.players h4,.why h4{margin:0 0 8px;font-size:11px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600}
.p-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.p-row:last-child{border:0}
.p-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-row .pos{color:var(--dim2);font-size:11px;margin-left:5px}
.p-row .pct{color:var(--green2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* por que */
.why{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.verdict{font-size:15px;line-height:1.5;margin-bottom:12px}
.conf{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);margin-left:4px}
.conf.alta{border-color:var(--green);color:var(--green2)}
.conf.baja{border-color:var(--warn);color:var(--warn)}
.fbar{margin:9px 0}
.fbar .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;gap:8px}
.fbar .lbl .who{color:var(--dim2)}
.fbar .track{height:8px;background:var(--panel2);border-radius:5px;overflow:hidden}
.fbar .fill{height:100%;border-radius:5px}
.fbar .det{color:var(--dim2);font-size:11.5px;margin-top:4px}
.notes{margin-top:13px;display:flex;flex-direction:column;gap:7px}
.note{display:flex;gap:9px;font-size:13px;align-items:flex-start}
.note .t{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;
  padding:1px 7px;font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.4px}
.note.ctx .t{border-color:var(--warn);color:var(--warn)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 6px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}
th{color:var(--dim2);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px}
.tteam{display:flex;align-items:center;gap:8px}
.tteam .crest{width:22px;height:22px}
.muted{color:var(--dim);font-size:13px}
.spin{color:var(--dim2);padding:40px;text-align:center}
.warnbox{border:1px solid var(--warn);background:rgba(251,191,36,.08);border-radius:var(--radius-sm);
  padding:11px 13px;color:#fde68a;font-size:13px;margin-bottom:14px}
.chipx{display:inline-block;background:var(--panel2);border:1px solid var(--line2);
  border-radius:999px;padding:4px 11px;margin:3px 4px 0 0;font-size:12.5px;cursor:pointer}
.chipx.out{background:rgba(248,113,113,.15);border-color:var(--bad);color:var(--bad);
  text-decoration:line-through}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.two{grid-template-columns:1fr}}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--radius-sm);max-height:330px;overflow:auto;
  display:none;z-index:45;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.results.on{display:block}
.results .r{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13.5px;
  display:flex;align-items:center;gap:9px}
.results .r:last-child{border:0}
.results .r:hover{background:var(--panel2)}
.results .r .c{color:var(--dim2);font-size:11.5px;margin-left:auto}
.results .head{padding:7px 12px;color:var(--dim2);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.6px;background:var(--panel2)}

/* ---------- planes ---------- */
.plans-hero{text-align:center;padding:26px 0 8px}
.plans-hero h2{font-size:34px;margin:0 0 8px;letter-spacing:-.8px}
.plans-hero h2 em{color:var(--blue2);font-style:normal}
.plans-hero p{color:var(--dim);margin:0 auto;max-width:520px}
.cycle{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);
  border-radius:999px;padding:4px;margin:16px 0 4px;gap:4px}
.cycle button{border:0;background:transparent;border-radius:999px;padding:7px 18px;
  font-size:13.5px;color:var(--dim)}
.cycle button.on{background:var(--blue);color:#fff;font-weight:600}
.cycle .save{color:var(--green2);font-size:12px;margin-left:5px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;align-items:start}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
  position:relative;display:flex;flex-direction:column;gap:14px}
.plan.best{border-color:var(--blue);box-shadow:0 0 0 1px rgba(47,127,240,.35),0 18px 50px rgba(47,127,240,.12)}
.plan .badge{position:absolute;top:-11px;right:16px;background:var(--green);color:#052e16;
  border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:700}
.plan .ptop{display:flex;gap:12px;align-items:flex-start}
.plan .picon{width:42px;height:42px;border-radius:11px;background:var(--panel3);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;color:var(--blue2)}
.plan.best .picon{background:rgba(47,127,240,.18)}
.plan h3{margin:0;font-size:18px}
.plan .sub{color:var(--dim);font-size:13px;margin-top:3px;line-height:1.4}
.plan .price{font-size:34px;font-weight:800;letter-spacing:-1px}
.plan .price span{font-size:15px;font-weight:500;color:var(--dim);letter-spacing:0}
.plan .billed{color:var(--dim2);font-size:12px;margin-top:-6px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{display:flex;gap:9px;font-size:13.5px;align-items:flex-start;color:var(--txt)}
.plan li svg{width:17px;height:17px;flex:0 0 auto;color:var(--green2);margin-top:1px}
.plan .cta{width:100%;justify-content:center;padding:11px;font-weight:600;margin-top:auto}
.plan .cta.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line2)}
.plan .cta.outline{background:transparent;border:1px solid var(--blue);color:var(--blue2)}
.plan.cur .cta{background:var(--panel3);border-color:var(--line2);color:var(--dim);cursor:default}
.plans-note{margin-top:22px}
.picker .grp.full{flex:1 1 100%}
.picker .it .hint{margin-left:auto;color:var(--dim2);font-size:12px}
.picker .it.back-it{color:var(--dim);font-weight:600}
.picker .it.back-it .chk{font-size:18px;line-height:1}

/* ---------- perfil y cuenta ---------- */
.avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  border:0;cursor:pointer;flex:0 0 auto;letter-spacing:.3px}
.avatar.ghost{background:var(--panel3);color:var(--dim);border:1px solid var(--line2)}
.acct{display:flex;align-items:center;gap:9px;margin-left:12px}
.authwrap{max-width:460px;margin:8px auto}
.authwrap h2{margin:0 0 6px;font-size:23px;letter-spacing:-.4px}
.authwrap .lead{color:var(--dim);font-size:13.5px;margin-bottom:16px}
.f{margin-bottom:13px}
.f label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:5px}
.f input,.f select{width:100%}
.f .hint{color:var(--dim2);font-size:11.5px;margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:12px;margin:14px 0}
.check input{width:17px;height:17px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--blue);padding:0}
.check a{cursor:pointer;text-decoration:underline}
.wide{width:100%;justify-content:center;padding:12px;font-size:15px}
button[disabled]{opacity:.45;cursor:not-allowed}
button[disabled]:hover{border-color:transparent}
.terms{max-height:340px;overflow:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;line-height:1.6;color:var(--dim)}
.terms h4{color:var(--txt);margin:14px 0 5px;font-size:13.5px}
.terms h4:first-child{margin-top:0}
.terms ul{margin:5px 0;padding-left:18px}
.prof{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prof .big{width:56px;height:56px;font-size:19px}
.prof h3{margin:0;font-size:19px}
.prof .sub{color:var(--dim);font-size:13px}
.prof .out{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.danger{border-color:var(--bad);color:var(--bad);background:transparent}
.danger:hover{border-color:var(--bad);background:rgba(248,113,113,.1)}

/* ---------- fondo del hero de planes (SVG, sin imágenes externas) ---------- */
.hero{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 130% at 50% -20%, #14325e 0%, #0d1b33 45%, #080d1a 100%);
  padding:34px 18px 30px;margin-bottom:22px}
.hero svg.deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .inner{position:relative;z-index:1}
.hero h2{font-size:clamp(26px,4.4vw,38px);margin:0 0 10px;letter-spacing:-1px}
.hero h2 em{color:var(--blue2);font-style:normal}
.hero p{color:#b6c7e3;margin:0 auto;max-width:540px;font-size:14.5px}
.plans-hero{text-align:center;padding:0}

/* ---------- mi lista ---------- */
.wrow{display:grid;grid-template-columns:1fr auto 28px;gap:10px;align-items:center;
  padding:12px 4px;border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:0}
.wchips{display:flex;gap:6px}
.wrow .star{color:var(--dim2);font-size:15px}
.wrow .star:hover{color:var(--bad)}
.wres{grid-column:1/-1;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-top:2px}
.wres b{font-size:16px}
.wres.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:#bbf7d0}
.wres.ko{background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.3);color:#fecaca}
@media(max-width:560px){
  .wrow{grid-template-columns:1fr 28px}
  .wchips{grid-column:1/-1}
}

/* combinada */
.combo{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:14px 0 4px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:14px 16px}
.cbig{font-size:38px;font-weight:800;letter-spacing:-1.5px;color:var(--blue2);line-height:1}
.cside{font-size:13.5px;line-height:1.6}
.legs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.leg{display:grid;grid-template-columns:1fr auto 62px;gap:10px;align-items:center;
  padding:7px 2px;border-bottom:1px dashed var(--line);font-size:13.5px}
.leg:last-child{border-bottom:0}
.leg .lname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg .lpick{color:var(--green2);font-weight:600}
.leg .lp{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}

/* fotos de ticket */
.tkwrap,.tkcombo{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px;
  flex-wrap:wrap}
.tkadd{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px dashed var(--line2);border-radius:var(--radius-sm);padding:7px 12px;
  font-size:12.5px;color:var(--dim);cursor:pointer}
.tkadd:hover{border-color:var(--blue);color:var(--blue2)}
.tkadd svg{width:16px;height:16px}
.tk{position:relative;display:inline-block}
.tk img{max-height:88px;max-width:170px;border-radius:9px;border:1px solid var(--line2);
  display:block;cursor:zoom-in;background:#fff}
.tkdel{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--panel3);border:1px solid var(--line2);color:var(--dim);font-size:12px;
  line-height:1;padding:0;cursor:pointer}
.tkdel:hover{color:var(--bad);border-color:var(--bad)}
.zoom{position:fixed;inset:0;background:rgba(3,7,15,.92);display:flex;align-items:center;
  justify-content:center;z-index:200;padding:22px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 70px rgba(0,0,0,.7)}

/* invitaciones */
.invite{margin-top:18px}
.slots{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.slot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--panel2);border:1px dashed var(--line2);
  color:var(--dim2);font-size:13px;font-weight:700}
.slot.on{background:var(--green);border:0;color:#052e16}
.slots .cnt{margin-left:6px;color:var(--dim);font-size:13.5px}
.reward{margin-top:12px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.4);
  border-radius:var(--radius-sm);padding:10px 13px;font-size:13.5px;color:#bbf7d0}

/* galeria de tickets */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;
  margin-top:14px}
.gitem{display:flex;flex-direction:column;gap:6px}
.gitem .tk img{max-height:130px;max-width:100%;width:100%;object-fit:contain}
.gnote{font-size:12.5px;padding:6px 9px}
.gdate{color:var(--dim2);font-size:11px}

/* boletos */
.slipbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:20px 0 12px;flex-wrap:wrap}
.slip{border-color:var(--line2)}
.sliphead{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.slipname{flex:1;min-width:0;background:transparent;border:1px solid transparent;
  font-size:17px;font-weight:700;padding:5px 8px}
.slipname:hover,.slipname:focus{border-color:var(--line2);background:var(--panel2)}
.slipbig{font-size:24px;font-weight:800;color:var(--blue2);letter-spacing:-.6px}
.slipdel{padding:5px 10px;font-size:13px}
.sels{margin-top:10px;display:flex;flex-direction:column}
.sel{display:grid;grid-template-columns:auto 1fr auto auto 26px;gap:10px;align-items:center;
  padding:9px 2px;border-bottom:1px dashed var(--line);
  grid-template-areas:"crest name picks res del"}
.sel > .crests{grid-area:crest} .sel > .sname{grid-area:name}
.sel > .pks{grid-area:picks} .sel > .sres{grid-area:res} .sel > .selrm{grid-area:del}
.sel:last-child{border-bottom:0}
.sname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.sname small{display:block;color:var(--dim2);font-size:11.5px;font-weight:400}
.pks{display:flex;gap:4px}
.pk{padding:4px 8px;font-size:12px;line-height:1.1;border-radius:7px;background:var(--panel2);
  color:var(--dim);min-width:34px}
.pk small{display:block;font-size:9.5px;opacity:.75}
.pk.on{background:var(--blue);color:#fff;border-color:transparent;font-weight:700}
.sres{font-size:12.5px;white-space:nowrap}
.sres.ok{color:var(--green2)} .sres.ko{color:var(--bad)} .sres.pend{color:var(--dim2)}
.sliptools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.sliptools label{display:flex;align-items:center;gap:7px;font-size:13px}
.addsel{margin-top:10px}
.addsel select{width:100%;max-width:340px}
@media(max-width:600px){
  .sel{grid-template-columns:auto 1fr 26px;row-gap:7px;
    grid-template-areas:"crest name del" ". picks picks" ". res res"}
  .sel > .sres{justify-self:start}
}

/* comunidad */
textarea{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line2);
  border-radius:var(--radius-sm);padding:11px 12px;font:inherit;font-size:14px;resize:vertical;
  margin-top:10px}
.pbar{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.pbar label{display:flex;align-items:center;gap:7px;font-size:13px}
.post{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;margin-bottom:12px}
.phead{display:flex;align-items:center;gap:9px;font-size:14px}
.phead .muted{font-size:11.5px}
.phead .star{margin-left:auto}
.ptext{margin-top:9px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.pslip{margin-top:11px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:13px}
.psliphead{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.psliphead span{color:var(--blue2)}
.psel{display:grid;grid-template-columns:1fr auto 56px;gap:9px;padding:4px 0;
  border-top:1px dashed var(--line);color:var(--dim)}
.psel .ppick{color:var(--green2)}
.psel .pp{text-align:right;font-variant-numeric:tabular-nums}
.pacts{display:flex;gap:8px;margin-top:11px}
.like,.link{background:var(--panel2);font-size:12.5px;padding:6px 12px}
.like.on{background:var(--blue);color:#fff;border-color:transparent}
.replies{margin-top:11px;border-left:2px solid var(--line2);padding-left:12px;
  display:flex;flex-direction:column;gap:9px}
.reply{font-size:13.5px}
.reply .muted{font-size:11px}
.reply .star{float:right}
.replybox{gap:8px;margin-top:10px}
.replybox input{flex:1}

/* grupos */
.gbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.gchip{border-radius:999px;padding:7px 14px;font-size:13px;background:var(--panel2)}
.gchip.on{background:var(--blue);color:#fff;border-color:transparent;font-weight:600}
.gchip small{opacity:.7;margin-left:5px;font-size:11px}
.gchip.add{border-style:dashed}
.ghead{border-bottom:1px solid var(--line);padding-bottom:14px}
.ghead .lock{font-size:12px;color:var(--warn);font-weight:500;margin-left:6px}
.gacts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* contraseña y acceso social */
.pwrap{position:relative;display:flex}
.pwrap input{flex:1;padding-right:66px}
.eye{position:absolute;right:5px;top:5px;bottom:5px;padding:0 10px;font-size:11.5px;
  background:var(--panel3);color:var(--dim)}
.bars{display:flex;gap:4px;margin-top:7px}
.bars i{height:4px;flex:1;border-radius:3px;background:var(--panel3);transition:background .2s}
.social{margin-top:18px}
.sep{display:flex;align-items:center;gap:12px;color:var(--dim2);font-size:12px;margin:4px 0 14px}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--line)}
.sbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px;
  font-size:14.5px;font-weight:600;margin-bottom:9px;background:#fff;color:#1f2937;border:0}
.sbtn:hover{background:#f1f5f9;border:0}
.sbtn.apple{background:#000;color:#fff}
.sbtn.apple:hover{background:#181818;border:0}
.gbtn-host{display:flex;justify-content:center;margin-bottom:9px}
.socialnote:empty{display:none}

/* propietario */
.ownertag{display:inline-block;background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#1a1205;
  border-radius:6px;padding:1px 8px;font-size:10.5px;font-weight:800;letter-spacing:.6px;
  margin-left:7px;vertical-align:1px}
.avatar.owner{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#1a1205;font-size:16px}
.ownerbox{border-color:rgba(251,191,36,.45);box-shadow:0 0 0 1px rgba(251,191,36,.15)}

/* pestañas de acceso */
.authtabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:999px;padding:4px;margin-bottom:18px}
.authtabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:9px;
  font-size:14px;color:var(--dim);font-weight:600}
.authtabs button.on{background:var(--blue);color:#fff}
.owner-modal{cursor:default;align-items:flex-start;padding-top:12vh}
.owner-modal .card{cursor:default}

/* amigos */
.frow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.frow:last-child{border-bottom:0}
.fname{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fname small{color:var(--dim2);margin-left:7px;font-size:11.5px}
.facts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
button.mini{padding:5px 11px;font-size:12.5px}
.fsub{margin:16px 0 4px;font-size:11px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600}
#fres:empty{display:none}
#fres{margin-top:8px}

/* tarjeta de boleto resuelto */
.rescard{position:relative;margin-top:12px;border-radius:14px;padding:14px;overflow:hidden;
  border:1px solid var(--line2);background:linear-gradient(180deg,#101a2e,#0c1322)}
.rescard.win{border-color:rgba(34,197,94,.45);box-shadow:0 0 0 1px rgba(34,197,94,.12)}
.rescard.lose{border-color:rgba(248,113,113,.4);box-shadow:0 0 0 1px rgba(248,113,113,.1)}
.resbadge{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:800;
  letter-spacing:.8px;padding:3px 10px;border-radius:999px}
.rescard.win .resbadge{background:rgba(34,197,94,.18);color:#86efac}
.rescard.lose .resbadge{background:rgba(248,113,113,.16);color:#fecaca}
.reschart{width:100%;height:74px;display:block;margin-bottom:6px}
.resname{font-size:13.5px;font-weight:600}
.resname span{color:var(--dim2);font-weight:400;font-size:12px}
.resbig{font-size:30px;font-weight:800;letter-spacing:-1px;margin:4px 0 12px}
.resbig span{font-size:14px;font-weight:600;letter-spacing:0;opacity:.85}
.restiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.restiles div{background:var(--panel);padding:9px 11px}
.restiles span{display:block;color:var(--dim2);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.5px}
.restiles b{font-size:15px}
.ressels{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.ressel{display:grid;grid-template-columns:18px 1fr auto;gap:8px;font-size:12.5px;
  color:var(--dim)}
.ressel .rs{font-weight:800;text-align:center}
.ressel .rs.ok{color:var(--green2)} .ressel .rs.ko{color:var(--bad)} .ressel .rs.pe{color:var(--dim2)}
.ressel .rsm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ressel .rsp{color:var(--txt)}
.resnote{margin-top:10px;color:var(--dim2);font-size:11.5px}

/* boton + y menu de listas */
.addbtn{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;padding:0;background:var(--panel2);color:var(--dim);
  border:1px solid var(--line2);font-size:12px;font-weight:700}
.addbtn:hover{color:var(--blue2);border-color:var(--blue)}
.addbtn.on{background:var(--blue);color:#fff;border-color:transparent}
.lmenu{position:fixed;z-index:120;min-width:230px;background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.lmhead{display:flex;justify-content:space-between;gap:10px;padding:7px 10px 8px;
  color:var(--dim2);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.lmhead span{text-transform:none;letter-spacing:0}
.lmi{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;
  padding:9px 10px;border-radius:8px;font-size:13.5px;color:var(--txt);text-align:left}
.lmi:hover{background:var(--panel2);border:0}
.lmi .chk{width:14px;color:var(--blue2)}
.lmi small{margin-left:auto;color:var(--dim2)}
.lmi.on{color:var(--blue2)}
.lmi.new{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;
  color:var(--blue2);font-weight:600}
.lmi.new[disabled]{color:var(--dim2)}
.lmempty{padding:8px 10px;color:var(--dim2);font-size:12.5px}
.lmnote{padding:7px 10px;color:var(--dim2);font-size:11.5px}
.lmnote a{cursor:pointer}

/* barra de marcadores en directo */
#livebar{display:none;border-bottom:1px solid var(--line);background:#070c17;
  position:sticky;top:0;z-index:25}
#livebar.on{display:block}
.lbwrap{display:flex;gap:0;overflow-x:auto;max-width:1100px;margin:0 auto;
  scrollbar-width:thin}
.lbitem{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;background:transparent;
  border:0;border-right:1px solid var(--line);border-radius:0;padding:8px 14px;
  min-width:132px;text-align:left;position:relative}
.lbitem:hover{background:var(--panel);border:0;border-right:1px solid var(--line)}
.lbstate{font-size:10.5px;color:var(--dim2);display:flex;align-items:center;gap:5px;
  text-transform:uppercase;letter-spacing:.4px}
.lbitem.in .lbstate{color:var(--bad);font-weight:700}
.lbteams{display:flex;flex-direction:column;gap:1px;font-size:12.5px}
.lbteams span{display:flex;justify-content:space-between;gap:12px;
  max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lbteams b{font-variant-numeric:tabular-nums}
.lbitem.post .lbteams{color:var(--dim)}
.lbprob{position:absolute;top:7px;right:10px;font-size:10px;color:var(--blue2);font-weight:700}
.dot2{width:6px;height:6px;border-radius:50%;background:var(--bad);display:inline-block;
  animation:pulso 1.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.25}}
.lv{display:inline-flex;align-items:center;gap:5px;color:var(--bad);font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.lv.fin{color:var(--dim2)}
.lvsc{font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;margin-left:3px}
.sres.live{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.sres.live.ok{color:var(--green2)} .sres.live.ko{color:var(--bad)}
.livenow{border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.06);
  border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px}
.lnhead{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--bad);
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.lnhead b{color:var(--txt);font-size:15px}
.prehead{margin:0 0 6px;font-size:11px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600}

/* narración en vivo */
.narr{border:1px solid var(--line2);border-radius:var(--radius-sm);padding:12px 13px;
  margin:14px 0;background:var(--panel2)}
.nhead{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--bad);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.nhead .mini{margin-left:auto;color:var(--dim);text-transform:none;letter-spacing:0;font-weight:500}
.plays{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.play{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:13px;
  padding-bottom:6px;border-bottom:1px dashed var(--line)}
.play:last-child{border-bottom:0}
.play .pw{color:var(--dim2);font-size:11.5px}
.play.gol{color:var(--green2);font-weight:600}
.donde{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.donde .k{color:var(--dim2);font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  margin-right:8px}
.canal{display:inline-block;background:var(--panel3);border:1px solid var(--line2);
  border-radius:999px;padding:3px 11px;font-size:12.5px;margin-right:5px}
.donde a{margin-left:auto;font-size:13px}
.lbtag{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 14px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim2);
  border-right:1px solid var(--line);font-weight:700}
.lbtag.live{color:var(--bad)}

/* aviso de temporada */
.seasonbox{display:flex;gap:12px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line2);border-left:3px solid var(--blue);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:12px;font-size:13.5px}
.seasonbox.fuera{border-left-color:var(--dim2)}
.seasonbox .sbicon{font-size:20px;line-height:1.2}
.seasonbox div div{color:var(--dim);margin-top:3px;line-height:1.5}

/* pantalla de bienvenida (acceso al abrir) */
body.gated .toolbar,
body.gated .side,
body.gated .tabbar,
body.gated #livebar,
body.gated .tbright .userchip{display:none}
body.gated main{padding-top:34px}
body.gated .authwrap{margin-top:0}
.welcome{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.welcome b{display:block;font-size:19px;letter-spacing:-.4px}
.welcome span{display:block;color:var(--dim);font-size:12.5px}
.skipwrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.skipwrap button{background:transparent;border:0;color:var(--blue2);font-size:14px;
  padding:6px 10px;text-decoration:underline}
.skipwrap button:hover{border:0;color:#7cc4fb}
.skipwrap .hint{margin-top:6px}
.continuar{display:flex;align-items:center;gap:16px;justify-content:space-between;
  flex-wrap:wrap;margin-top:18px;border-color:var(--blue)}
.continuar b{font-size:15px}

/* ---------- portada de acceso ---------- */
body.gated header{border-bottom:0;background:transparent}
body.gated .mbrand{display:flex}
body.gated main{padding:0 0 50px;max-width:none}
body.gated .app{display:block}
body.gated{background:
  radial-gradient(70% 60% at 85% 10%, rgba(47,127,240,.13), transparent 60%),
  radial-gradient(50% 50% at 10% 80%, rgba(168,85,247,.08), transparent 60%), var(--bg)}
.landing{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:40px;
  max-width:1160px;margin:0 auto;padding:22px 16px}
/* En móvil solo el acceso: la columna de presentación es para pantalla grande */
@media(max-width:940px){
  .landing{grid-template-columns:1fr;gap:0;max-width:520px}
  .lright{display:none}
}
.lbrand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lbrand b{display:block;font-size:22px;letter-spacing:-.5px}
.lbrand span{display:block;color:var(--dim);font-size:12.5px}
body.gated .authwrap{max-width:none;margin:0;background:var(--panel);
  border:1px solid var(--line2);border-radius:18px;padding:22px}
.f label{display:flex;align-items:center;gap:7px}
.ficon{width:15px;height:15px;color:var(--dim2);flex:0 0 auto}
.skipwrap{display:flex;gap:10px;text-align:left;align-items:flex-start}
.skipwrap .shield{width:17px;height:17px;color:var(--dim2);flex:0 0 auto;margin-top:2px}
.skipwrap .hint{margin-top:0}

/* columna derecha */
.lright{padding-top:6px}
.eyebrow{color:var(--dim2);font-size:11.5px;text-transform:uppercase;letter-spacing:1.4px;
  margin-bottom:14px}
.lright h2{font-size:clamp(30px,4.6vw,46px);line-height:1.05;margin:0 0 12px;
  letter-spacing:-1.6px}
.lright h2 em{font-style:normal;background:linear-gradient(90deg,#38bdf8,#6366f1);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lright p{color:var(--dim);font-size:15px;max-width:460px;margin:0 0 22px}
.feats{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:22px}
.feat{display:flex;flex-direction:column;gap:9px;font-size:13.5px;line-height:1.35}
.fic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:color-mix(in srgb, var(--c) 12%, transparent);color:var(--c)}
.fic svg{width:20px;height:20px}

/* tarjeta de muestra */
.pvcard{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:15px;
  box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pvhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.pvhead b{font-size:15.5px}
.pvlive{display:flex;align-items:center;gap:6px;color:var(--dim2);font-size:11.5px;margin-top:2px}
.dotg{width:7px;height:7px;border-radius:50%;background:var(--green)}
.pvconf{margin-left:auto;background:rgba(47,127,240,.14);border:1px solid rgba(47,127,240,.4);
  color:var(--blue2);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:600}
.pvcols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.pvcol{display:flex;flex-direction:column;gap:5px}
.pvk{color:var(--dim2);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.pvcol b{font-size:22px;letter-spacing:-.6px}
.pvbar{height:5px;background:var(--panel3);border-radius:3px;overflow:hidden}
.pvbar i{display:block;height:100%;border-radius:3px}
.pvteam{color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvtrend{margin-top:14px;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px}
.pvt{color:var(--dim);font-size:12px;margin-bottom:4px}
.pvtrend svg{width:100%;height:auto;display:block}
.pvfoot{color:var(--dim2);font-size:11.5px;margin-top:10px}
.pvt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pvleg{display:flex;gap:12px;margin-left:auto;font-size:11px;color:var(--dim)}
.pvleg span{display:flex;align-items:center;gap:5px}
.pvleg i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* parte médico */
.injbox{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.injbox h4{margin:0 0 10px;font-size:11px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600;display:flex;align-items:center;gap:8px}
.injbox h4 .src{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;
  padding:1px 7px;letter-spacing:0;text-transform:none;color:var(--dim)}
.injbox h5{margin:0 0 6px;font-size:13px;display:flex;gap:7px;align-items:center}
.injbox h5 span{background:var(--panel2);border-radius:999px;padding:1px 8px;
  font-size:11px;color:var(--dim)}
.injrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:5px 0;border-bottom:1px dashed var(--line);font-size:13px}
.injrow:last-child{border-bottom:0}
.injst{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  border-radius:5px;padding:2px 7px}
.injst.fuera{background:rgba(248,113,113,.16);color:#fecaca}
.injst.duda2{background:rgba(251,191,36,.16);color:#fde68a}
.injst.duda{background:var(--panel2);color:var(--dim)}
.injn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.injz{color:var(--dim2);font-size:11.5px;text-align:right}

/* límites del plan */
.upsell{display:flex;align-items:center;gap:14px;background:var(--panel2);
  border:1px solid var(--line2);border-left:3px solid var(--warn);
  border-radius:var(--radius-sm);padding:13px 15px;margin-top:14px;flex-wrap:wrap}
.upsell .uic{font-size:19px}
.upsell b{font-size:14.5px}
.upsell div div{color:var(--dim);font-size:13px;margin-top:2px}
.upsell button{margin-left:auto}
.players-lock{margin-top:16px}
.cuota{display:inline-block;background:var(--panel2);border:1px solid var(--line2);
  border-radius:999px;padding:2px 10px;font-size:11.5px;color:var(--dim);margin-right:6px}
.cuota.agotado{border-color:var(--warn);color:var(--warn)}
.picker .it.bloq{opacity:.55}
.lockmini{margin-left:auto;font-size:11px;opacity:.8}

/* ---------- límites del plan bien visibles ---------- */
/* La barra de plan vive encima de la lista: se ve el plan, los análisis que
   quedan y el camino para quitarse el límite. */
.planbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:12px}
.planbar .pchip{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}
.planbar.free .pchip{background:rgba(148,163,184,.18);color:#cbd5e1;border:1px solid var(--line2)}
.planbar.analyst .pchip{background:rgba(47,127,240,.18);color:#93c5fd;border:1px solid rgba(47,127,240,.5)}
.planbar.pro .pchip{background:linear-gradient(90deg,#f59e0b,#f97316);color:#1a1205;border:1px solid transparent}
.planbar .ptxt{font-size:13.5px;color:var(--dim)}
.planbar .ptxt b{color:var(--txt)}
.planbar .dots{display:inline-flex;gap:5px;align-items:center}
.planbar .dots i{width:9px;height:9px;border-radius:50%;display:block}
.planbar .dots i.on{background:var(--green)}
.planbar .dots i.off{background:transparent;border:1.5px solid var(--line2)}
.planbar.bajo{border-color:var(--warn)}
.planbar.bajo .dots i.on{background:var(--warn)}
.planbar .planup{margin-left:auto;background:var(--blue);border-color:transparent;color:#fff;
  font-weight:600;font-size:13px;padding:7px 13px}
.planbar .planup:hover{background:#3d8bf7;border-color:transparent}

/* Fila con el pronóstico aún cerrado */
.row.locked .chip.lock{background:var(--panel3);color:var(--dim2);letter-spacing:2px;
  filter:blur(1.2px);user-select:none}
.row.locked:hover .chip.lock{filter:blur(0);color:var(--blue2)}
.actions.cerrada{color:var(--dim2)}
.actions .abrir{display:inline-flex;align-items:center;gap:4px;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px}
.actions .abrir svg{width:13px;height:13px}
.row.locked:hover .actions{color:var(--blue2)}
.lockhint{display:flex;gap:9px;align-items:flex-start;padding:10px 14px;
  border-bottom:1px solid var(--line);background:rgba(47,127,240,.05);
  color:var(--dim);font-size:12.5px}
.lockhint svg{width:15px;height:15px;flex:0 0 auto;color:var(--blue2);margin-top:1px}

/* Aviso flotante al gastar un análisis */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  background:var(--panel3);border:1px solid var(--line2);border-radius:999px;
  padding:10px 18px;font-size:13.5px;color:var(--txt);
  box-shadow:0 12px 32px rgba(0,0,0,.45);animation:toastin .22s ease-out}
.toast.cero{border-color:var(--warn);border-radius:var(--radius);display:flex;
  align-items:center;gap:12px}
.toast button{padding:6px 12px;font-size:13px;background:var(--blue);
  border-color:transparent;color:#fff;font-weight:600}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* Listas con partidos sin analizar */
.sel.bloq .sname small{color:var(--warn)}
.sel .analizar{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  padding:5px 10px;border-color:var(--warn);color:var(--warn);background:transparent}
.sel .analizar svg{width:12px;height:12px}
.sel .analizar:hover{background:rgba(245,158,11,.12);border-color:var(--warn)}
.slipbig.parcial{color:var(--warn)}
.faltan{display:flex;gap:9px;align-items:flex-start;margin:9px 0 2px;padding:9px 12px;
  border:1px solid var(--warn);border-radius:var(--radius-sm);
  background:rgba(245,158,11,.08);font-size:12.5px;color:var(--dim)}
.faltan b{color:var(--txt)}
.faltan svg{width:15px;height:15px;flex:0 0 auto;color:var(--warn);margin-top:1px}

/* Tarjetas de plan: lo que no incluye, tachado en gris */
.plan ul li.no{color:var(--dim2)}
.plan ul li.no span{text-decoration:line-through;text-decoration-color:var(--line2)}
.plan ul li.no svg{color:var(--dim2)}

/* Comparativa */
.cmp{margin-top:18px}
.cmp table{width:100%;border-collapse:collapse;margin-top:10px}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.cmp thead th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim2);
  text-align:center}
.cmp thead th:first-child{text-align:left}
.cmp td{text-align:center;color:var(--dim)}
.cmp td:first-child{text-align:left;color:var(--txt)}
.cmp td b{color:var(--txt);font-weight:600}
.cmp .cur{background:rgba(47,127,240,.08)}
.cmp thead th.cur{color:var(--blue2)}
.cmp .si svg{width:18px;height:18px;color:var(--green)}
.cmp .nope svg{width:18px;height:18px;color:var(--dim2)}
.hoyuso{margin-top:6px;font-size:13.5px;color:var(--dim)}
.hoyuso b{color:var(--warn)}
@media(max-width:700px){
  .cmp th,.cmp td{padding:8px 6px;font-size:12.5px}
  .planbar{padding:9px 11px;gap:8px}
  .planbar .planup{margin-left:0;width:100%;order:9}
}

/* Barra de directos cuando el plan no los incluye */
.lbwrap.lblock{align-items:center;gap:12px;padding:9px 14px;flex-wrap:wrap}
.lbwrap.lblock .lbtag{display:inline-flex;align-items:center;gap:6px;color:var(--dim);
  background:var(--panel3);border:1px solid var(--line2)}
.lbwrap.lblock .lbtag svg{width:13px;height:13px}
.lbwrap.lblock .lbtxt{font-size:12.5px;color:var(--dim2);flex:1 1 320px}
.lbwrap.lblock .lbup{background:var(--blue);border-color:transparent;color:#fff;
  font-weight:600;font-size:12.5px;padding:6px 12px}
.lbwrap.lblock .lbup:hover{background:#3d8bf7;border-color:transparent}

/* ---------- equipo favorito ---------- */
.favbtn{background:transparent;border:0;padding:2px 4px;color:var(--dim2);
  vertical-align:middle;line-height:0}
.favbtn svg{width:17px;height:17px;fill:none}
.favbtn:hover{color:var(--warn);border-color:transparent}
.favbtn.on{color:var(--warn)}
.favbtn.on svg{fill:var(--warn)}
.favtag{display:inline-block;margin-left:5px;color:var(--warn);line-height:0;
  vertical-align:-2px}
.favtag svg{width:12px;height:12px;fill:var(--warn)}
.row.esfav{border-left-color:var(--warn)}
.planbar .favmini{color:var(--warn);white-space:nowrap}
.planbar .favmini svg{width:11px;height:11px;fill:var(--warn);vertical-align:-1px;
  margin-right:2px}
.favrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.favrow .favname{display:inline-flex;align-items:center;gap:7px;font-size:16px;
  color:var(--warn)}
.favrow .favname svg{width:18px;height:18px;fill:var(--warn)}
.favrow .favname b{color:var(--txt)}
.favrow .meta{flex:1 1 260px;margin:0}
.tteam .favbtn{margin-left:4px}
.favbtn.bloq{color:var(--line2)}
.favbtn.bloq:hover{color:var(--dim2)}
.favrow button[disabled]{opacity:.5;cursor:not-allowed}

/* Distintivo con el número de listas en la navegación */
.navpin{position:absolute;top:7px;left:26px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  font-style:normal;display:flex;align-items:center;justify-content:center;line-height:1}
.snav button .navpin{left:auto;right:12px;top:50%;transform:translateY(-50%)}
.tabbar button{position:relative}

/* ---------- ajustes finos del tema claro ----------
   Los tonos claros sobre fondo oscuro no valen aquí: se rehacen los pocos
   colores que estaban escritos a mano. */
:root[data-theme="claro"] .sbrand .logo circle,
:root[data-theme="claro"] .mbrand .logo circle{fill:#10203c}
:root[data-theme="claro"] .sbrand .logo path,
:root[data-theme="claro"] .mbrand .logo path{fill:#e8eefb}
:root[data-theme="claro"] #livebar{background:var(--panel)}
:root[data-theme="claro"] .chip.h{background:rgba(22,163,74,.14);color:#15803d}
:root[data-theme="claro"] .chip.d{background:rgba(100,116,139,.14);color:#475569}
:root[data-theme="claro"] .chip.a{background:rgba(2,132,199,.13);color:#0369a1}
:root[data-theme="claro"] .chip.lock{background:var(--panel3);color:var(--dim2)}
:root[data-theme="claro"] .warnbox{color:#92610b}
:root[data-theme="claro"] .hero p{color:var(--dim)}
:root[data-theme="claro"] .wres.ok{color:#15803d}
:root[data-theme="claro"] .wres.ko{color:#b91c1c}
:root[data-theme="claro"] .value{color:#15803d}
:root[data-theme="claro"] .rescard.win .resbadge{color:#15803d}
:root[data-theme="claro"] .rescard.lose .resbadge{color:#b91c1c}
:root[data-theme="claro"] .injst.fuera{color:#b91c1c}
:root[data-theme="claro"] .injst.duda2{color:#92610b}
:root[data-theme="claro"] .planbar.free .pchip{background:var(--panel3);color:#475569}
:root[data-theme="claro"] .planbar.analyst .pchip{background:rgba(47,127,240,.14);color:#1d4ed8}
:root[data-theme="claro"] .skipwrap button:hover{color:#0b76c4}
:root[data-theme="claro"] .toast{background:#10203c;color:#e8eefb;border-color:#1f2b45}
:root[data-theme="claro"] .toast.cero{border-color:var(--warn)}
:root[data-theme="claro"] .crest.ph{color:#fff}
:root[data-theme="claro"] body.gated{background:
  radial-gradient(70% 60% at 85% 10%, rgba(47,127,240,.10), transparent 60%),
  radial-gradient(50% 50% at 10% 80%, rgba(168,85,247,.07), transparent 60%), var(--bg)}

/* ---------- página de Ajustes ---------- */
.card.sec{padding:0;overflow:hidden}
.sechead{display:flex;align-items:center;gap:14px;padding:20px 20px 14px;cursor:pointer;
  flex-wrap:wrap}
.sechead .secic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 auto;border-radius:14px;background:rgba(47,127,240,.14);color:var(--blue2)}
.sechead .secic svg{width:21px;height:21px}
.sechead .sectit{min-width:0}
.sechead h3{margin:0;font-size:19px;letter-spacing:-.3px}
.sechead .meta{margin:2px 0 0;font-size:12.5px}
.sechead .chev{margin-left:auto;color:var(--dim2);display:flex;transition:transform .18s}
.sechead .chev svg{width:20px;height:20px}
.card.sec.cerrada .chev{transform:rotate(-90deg)}
.card.sec.cerrada .secbody{display:none}
.secbody{padding:0 20px 20px}
.secbtns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.secbtns button{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:11px 17px;
  border-radius:var(--radius-sm)}
.secbtns button svg{color:inherit}
.sechead .secbtns + .chev{margin-left:8px}
.cardtit{margin:0 0 12px;font-size:17px}
.btn-primary.ancho{justify-content:center}
.pwrow{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center}
@media(max-width:700px){.pwrow{grid-template-columns:1fr}}
.field.pw{padding-right:4px}
.field.pw input{flex:1;min-width:0}
.field.pw .verpw{position:static;background:transparent;border:0;padding:6px;
  color:var(--dim2);line-height:0;height:auto;width:auto}
.field.pw .verpw:hover{color:var(--txt)}

/* fichas del resumen, con icono */
.kv.chips{margin-top:0;gap:14px}
.stat.ic{display:flex;align-items:center;gap:13px;padding:14px 16px;
  border-radius:var(--radius-sm);border-color:var(--line2)}
.stat.ic .si{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  flex:0 0 auto;border-radius:12px;background:var(--panel3);color:var(--dim)}
.stat.ic .si.oro{color:var(--warn);background:rgba(251,191,36,.12)}
.stat.ic .k{font-size:11px;letter-spacing:1px;color:var(--dim2)}
.stat.ic .v{font-size:17px;font-weight:700;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* segmentado de plan del propietario */
.seg{display:inline-flex;gap:6px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:999px;padding:4px}
.segbtn{border-radius:999px;border:0;background:transparent;padding:7px 18px;font-size:13.5px;
  color:var(--dim)}
.segbtn:hover{border:0;color:var(--txt)}
.segbtn.on{background:var(--blue);color:#fff;font-weight:600}
.livepill{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--green2);background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.35);
  border-radius:999px;padding:7px 14px}
.planpill{margin-left:auto;font-size:12.5px;font-weight:600;border-radius:999px;padding:7px 14px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--dim)}
.planpill.analyst{color:#93c5fd;border-color:rgba(47,127,240,.5);background:rgba(47,127,240,.14)}
.planpill.pro{background:linear-gradient(90deg,#f59e0b,#f97316);color:#1a1205;border-color:transparent}
:root[data-theme="claro"] .planpill.analyst{color:#1d4ed8}
:root[data-theme="claro"] .livepill{color:#15803d}

@media(max-width:700px){
  .sechead{padding:14px 15px;gap:10px}
  .secbody{padding:0 15px 15px}
  .secbtns{width:100%;order:9;margin-left:0}
  .secbtns button{flex:1;justify-content:center}
  .two{grid-template-columns:1fr;gap:12px}
  .seg{display:flex;width:100%}
  .segbtn{flex:1;text-align:center;padding:9px 6px}
  .livepill,.planpill{margin-left:0;width:100%;justify-content:center}
  .btn-primary.ancho{width:100%}
  .kv.chips{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}

/* ---------- campos del boceto: etiqueta arriba, icono dentro ---------- */
.ff{margin-bottom:16px}
.ff > label{display:block;font-size:14px;color:var(--txt);margin-bottom:8px;font-weight:500}
.ff .ctl{display:flex;align-items:center;gap:11px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:var(--radius-sm);padding:0 14px;
  min-height:50px;position:relative}
.ff .ctl:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,127,240,.16)}
.ff .ctl.on{border-color:var(--blue)}
.ff .ctl > .ci{color:var(--blue2);display:flex;flex:0 0 auto}
.ff .ctl > .ci svg{width:19px;height:19px}
.ff .ctl select,.ff .ctl input{flex:1;min-width:0;border:0;background:transparent;
  padding:13px 0;font-size:15px;appearance:none;-webkit-appearance:none}
.ff .ctl select:focus,.ff .ctl input:focus{outline:none}
.ff .ctl .cc{color:var(--dim);display:flex;pointer-events:none}
.ff .ctl .cc svg{width:19px;height:19px}
.ff .hint{color:var(--dim2);font-size:12px;margin-top:7px;line-height:1.5}

/* fila-enlace (móvil): "Borrar mis datos ›" */
.rowlink{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;font-size:15px;margin-bottom:16px;color:var(--txt)}
.rowlink svg{width:19px;height:19px;flex:0 0 auto}
.rowlink .fin{margin-left:auto;color:var(--dim2)}
.rowlink.peligro{color:var(--bad);border-color:rgba(248,113,113,.4)}
.rowlink.peligro:hover{background:rgba(248,113,113,.08);border-color:var(--bad)}
.solo-movil{display:none}
@media(max-width:700px){
  .solo-movil{display:flex}
  .solo-ancho{display:none}
}

/* ---------- claro: relieve y contraste ----------
   En claro, un borde fino no basta para separar la tarjeta del fondo: se
   apoya en una sombra suave, y los iconos y etiquetas se oscurecen para
   que se lean. */
:root[data-theme="claro"] .card,
:root[data-theme="claro"] .rowlink{box-shadow:0 1px 2px rgba(13,30,60,.05),0 10px 24px rgba(13,30,60,.05)}
:root[data-theme="claro"] .side{background:#fff;border-right-color:var(--line)}
:root[data-theme="claro"] .snav button.on{background:rgba(31,111,224,.10)}
:root[data-theme="claro"] .snav button.on svg{color:var(--blue)}
:root[data-theme="claro"] .tabbar{background:rgba(255,255,255,.94)}
:root[data-theme="claro"] .tabbar button.on,
:root[data-theme="claro"] .tabbar button.on svg{color:var(--blue)}
:root[data-theme="claro"] .iconbtn,
:root[data-theme="claro"] .userchip{background:#fff;border:1px solid var(--line)}
:root[data-theme="claro"] .stat{background:#fff;border-color:var(--line)}
:root[data-theme="claro"] .stat.ic .si{background:#e7eefb;color:#2b62b5}
:root[data-theme="claro"] .stat.ic .si.oro{background:#fdf1d3;color:#a6740c}
:root[data-theme="claro"] .stat .k{color:#5d6f8d}
:root[data-theme="claro"] .sechead .secic{background:#e7eefb;color:#2b62b5}
:root[data-theme="claro"] .ff .ctl,
:root[data-theme="claro"] .field,
:root[data-theme="claro"] input,
:root[data-theme="claro"] select{background:#f7f9fd;border-color:var(--line2)}
:root[data-theme="claro"] .ff .ctl > .ci{color:#2b62b5}
:root[data-theme="claro"] .ff .hint,
:root[data-theme="claro"] .f .hint{color:#5d6f8d}
/* Los botones toman el tono claro de --panel2; los activos mandan sobre él. */
:root[data-theme="claro"] .subnav button.on,
:root[data-theme="claro"] .segbtn.on{background:var(--blue);color:#fff}
:root[data-theme="claro"] .btn-primary{background:var(--blue);border-color:transparent;color:#fff}
:root[data-theme="claro"] .btn-primary:hover{background:#1a62c9}
:root[data-theme="claro"] .segbtn{background:transparent}
:root[data-theme="claro"] .seg{background:#eef2fa}
:root[data-theme="claro"] .list{background:#fff}
:root[data-theme="claro"] .row:hover{background:#f4f7fd}
:root[data-theme="claro"] .lhead{color:#5d6f8d}
:root[data-theme="claro"] .meta,
:root[data-theme="claro"] .muted{color:#4a5b75}
:root[data-theme="claro"] .picker,
:root[data-theme="claro"] .usermenu{background:#fff}
:root[data-theme="claro"] .picker .it:hover{background:#f0f4fb}
:root[data-theme="claro"] .picker .it.sel{background:#e3edfd;box-shadow:inset 0 0 0 1px rgba(31,111,224,.45)}
:root[data-theme="claro"] .planbar{background:#fff}
:root[data-theme="claro"] .warnbox{background:#fdf6e3;border-color:#e2b14a;color:#7a5405}
:root[data-theme="claro"] .seasonbox{background:#eef3fd}
:root[data-theme="claro"] .ownerbox{background:#fffdf5}
:root[data-theme="claro"] .ownertag{color:#3b2a02}
:root[data-theme="claro"] .avatar.owner{color:#3b2a02}
:root[data-theme="claro"] .terms{background:#f7f9fd}
.sepfav{height:1px;background:var(--line);margin:16px 0}
.favrow{margin-bottom:2px}
/* Los iconos dentro de un botón nunca deben estirarse */
.btn-primary svg{width:18px;height:18px;flex:0 0 auto;fill:none}
#favsave svg{fill:currentColor;stroke:currentColor}

/* Modo tienda: fuera todo lo que suene a apostar dinero */
body.tienda .value,
body.tienda .oddsrow{display:none !important}

/* ---------- viñeta de planes (al abrir la app) ---------- */
body.sinscroll{overflow:hidden}
.vplanes{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:20px;overflow:auto;
  background:rgba(4,8,18,.72);backdrop-filter:blur(6px);
  animation:vpin .22s ease-out}
@keyframes vpin{from{opacity:0}to{opacity:1}}
.vpcaja{position:relative;width:min(1060px,100%);max-height:calc(100vh - 40px);
  overflow:auto;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--radius);box-shadow:var(--sombra);padding:26px 24px 20px}
.vpx{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;
  border-radius:50%;background:var(--panel2);color:var(--dim);font-size:22px;
  line-height:1;display:flex;align-items:center;justify-content:center}
.vpx:hover{color:var(--txt)}
.vphead{text-align:center;margin-bottom:20px}
.vphead h2{margin:0 0 6px;font-size:27px;letter-spacing:-.6px}
.vphead h2 em{font-style:normal;color:var(--blue2)}
.vphead p{margin:0 auto 14px;color:var(--dim);font-size:14px;max-width:520px}
.vphead p b{color:var(--txt)}
.vphead .cycle{justify-content:center}
.vpplans{margin:0}
.vpfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.vpskip{background:transparent;border:0;color:var(--dim);font-size:13.5px;padding:8px 0}
.vpskip:hover{color:var(--txt);border:0}
.vpver{color:var(--blue2);font-size:13.5px;cursor:pointer}
@media(max-width:700px){
  .vplanes{padding:0;align-items:stretch}
  .vpcaja{max-height:100vh;border-radius:0;border:0;padding:22px 14px 90px;width:100%}
  .vphead h2{font-size:23px}
  .vpfoot{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---------- viñeta de planes: acabado del boceto ---------- */
.vplanes{background:rgba(2,6,16,.82)}
.vpcaja{border:1px solid rgba(47,127,240,.45);padding:34px 30px 22px;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(47,127,240,.16), transparent 60%),
    var(--panel);
  box-shadow:0 0 0 1px rgba(47,127,240,.18), 0 30px 80px rgba(0,0,0,.6),
             0 0 70px rgba(47,127,240,.10)}
.vpx{width:40px;height:40px;background:transparent;border:1px solid var(--line2);
  color:var(--dim);font-size:20px}
.vpx:hover{border-color:var(--blue);color:var(--txt)}
.vphead h2{font-size:38px;font-weight:800;letter-spacing:-1.2px;margin-bottom:10px}
.vphead p{font-size:15px;margin-bottom:18px}
.vphead .cycle{display:inline-flex;gap:4px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:999px;padding:5px}
.vphead .cycle button{border:0;background:transparent;border-radius:999px;
  padding:9px 22px;font-size:14.5px;color:var(--dim)}
.vphead .cycle button.on{background:var(--blue);color:#fff;font-weight:600}
.vphead .cycle .save{margin-left:7px;background:rgba(34,197,94,.18);color:var(--green2);
  border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:700}

/* tarjetas dentro de la viñeta */
.vpplans{gap:18px}
.vpplans .plan{padding:24px 22px;border-radius:18px;gap:16px}
.vpplans .plan.best{border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue), 0 0 40px rgba(47,127,240,.22)}
.vpplans .plan h3{font-size:21px}
.vpplans .plan .price{font-size:40px}
.vpplans .plan li{font-size:14px;gap:11px;line-height:1.5}
.vpplans .plan .cta{padding:14px;font-size:15px;border-radius:12px}

/* icono de cada plan, con su color */
.plan .picon{width:46px;height:46px;border-radius:13px}
.plan.p-free .picon{background:rgba(47,127,240,.14);color:var(--blue2)}
.plan.p-analyst .picon{background:rgba(47,127,240,.20);color:#7cc0ff}
.plan.p-pro .picon{background:rgba(251,191,36,.16);color:var(--warn)}

/* separador bajo el precio */
.psep{height:1px;background:var(--line);margin-top:16px}

/* marcas: verde relleno cuando está incluido, gris cuando no */
.plan li svg circle{fill:var(--green);stroke:none;opacity:1}
.plan li svg path{stroke:#04140a;stroke-width:2.6}
.plan li.no svg circle{fill:var(--line2)}
.plan li.no svg path{stroke:var(--dim2)}
.plan li.no{color:var(--dim2)}

/* pie con las tres garantías */
.vpfoot{justify-content:center;gap:26px;border-top:1px solid var(--line);
  padding-top:16px;margin-top:22px}
.vpgar{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:13px}
.vpgar svg{color:var(--dim2);flex:0 0 auto}
.vpsalir{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:10px}

:root[data-theme="claro"] .vplanes{background:rgba(190,205,230,.72)}
:root[data-theme="claro"] .vpcaja{background:
  radial-gradient(90% 60% at 50% -10%, rgba(31,111,224,.10), transparent 60%), #fff}
:root[data-theme="claro"] .plan li svg path{stroke:#fff}

@media(max-width:700px){
  .vpcaja{padding:26px 14px 80px}
  .vphead h2{font-size:27px}
  .vpfoot{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .vpsalir{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---------- moderación de la comunidad ---------- */
.modbtn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;
  color:var(--dim2);font-size:12px;padding:4px 6px;border-radius:8px}
.modbtn:hover{color:var(--bad);background:rgba(248,113,113,.08);border:0}
.modbtn svg{width:14px;height:14px}
.pacts.mini{margin-top:4px;gap:2px}
.pacts.mini .modbtn{font-size:11.5px;padding:2px 5px}
.post.oculto{border-color:var(--warn);background:rgba(251,191,36,.05)}
.modaviso{display:flex;align-items:center;gap:7px;color:var(--warn);font-size:12px;
  margin-bottom:8px}
.modaviso svg{width:14px;height:14px}
.repcard{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--line)}
.repcard:last-child{border-bottom:0}
.repcard .rtxt{flex:1;min-width:0}
.repcard .rmot{color:var(--warn);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.6px;font-weight:700}
.repcard .rquote{color:var(--dim);font-size:13px;margin-top:4px;line-height:1.5}
.repcard .racts{display:flex;gap:7px;flex:0 0 auto}
.bloqrow{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.bloqrow:last-child{border-bottom:0}
.bloqrow button{margin-left:auto;font-size:12.5px;padding:6px 12px}

/* ---------- panel de moderación ---------- */
.mark{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;
  padding:2px 9px;letter-spacing:.3px;margin-left:6px}
.mark.oculto{background:rgba(251,191,36,.16);color:var(--warn)}
.mark.den{background:rgba(248,113,113,.16);color:var(--bad)}
.mark.grp{background:rgba(47,127,240,.16);color:var(--blue2)}
.mark.free{background:var(--panel3);color:var(--dim)}
.mark.analyst{background:rgba(47,127,240,.16);color:var(--blue2)}
.mark.pro{background:linear-gradient(90deg,#f59e0b,#f97316);color:#1a1205}
.repcard .rquote{white-space:pre-wrap;word-break:break-word}
@media(max-width:700px){
  .repcard{flex-direction:column;gap:8px}
  .repcard .racts{width:100%}
  .repcard .racts button{flex:1}
  .bloqrow{flex-wrap:wrap}
}

/* ---------- deportes de combate ---------- */
.combate{margin-top:16px}
.combate h4{margin:0 0 10px;font-size:14px}
.metrow{display:flex;align-items:center;gap:11px;margin-bottom:8px;font-size:13.5px}
.metrow .mlab{width:86px;flex:0 0 auto;color:var(--dim)}
.metrow .mbar{flex:1;height:9px;border-radius:999px;background:var(--panel3);overflow:hidden}
.metrow .mbar i{display:block;height:100%;border-radius:999px}
.metrow .mbar i.ko{background:var(--bad)}
.metrow .mbar i.sub{background:var(--warn)}
.metrow .mbar i.dec{background:var(--blue2)}
.metrow b{width:50px;text-align:right;font-variant-numeric:tabular-nums}
.fighters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.fighter{background:var(--panel2);border:1px solid var(--line2);
  border-radius:var(--radius-sm);padding:13px}
.fighter .fnom{font-weight:700;font-size:15px;margin-bottom:7px}
.fighter .fdatos{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--dim)}
.fighter .fdatos b{color:var(--txt);font-size:13.5px;margin-right:3px}
.fracha{display:flex;gap:4px;margin-top:9px}
.fracha i{width:19px;height:19px;border-radius:6px;font-style:normal;font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.fracha i.rV{background:rgba(34,197,94,.2);color:var(--green2)}
.fracha i.rD{background:rgba(248,113,113,.18);color:var(--bad)}
.fracha i.rE{background:var(--panel3);color:var(--dim)}
@media(max-width:700px){.fighters{grid-template-columns:1fr}}

/* ---------- mini ventana del partido ---------- */
#miniwin{display:none;position:fixed;right:18px;bottom:18px;z-index:70;width:300px;
  touch-action:none}
#miniwin.on{display:block}
.mwcaja{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:var(--sombra2);overflow:hidden}
.mwbar{display:flex;align-items:center;gap:8px;padding:9px 10px;cursor:grab;
  background:var(--panel2);border-bottom:1px solid var(--line)}
.mwbar:active{cursor:grabbing}
.mwbar b{font-size:12.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwdot{width:8px;height:8px;border-radius:50%;background:var(--dim2);flex:0 0 auto}
.mwdot.vivo{background:var(--bad);box-shadow:0 0 0 3px rgba(248,113,113,.18);
  animation:latido 1.6s infinite}
@keyframes latido{50%{opacity:.45}}
.mwx{background:transparent;border:0;color:var(--dim);font-size:15px;padding:2px 5px;
  line-height:1}
.mwx:hover{color:var(--txt);border:0}
#miniwin.plegada .mwcuerpo{display:none}
.mwcuerpo{padding:12px}
.mwmarcador{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mwmarcador b{font-size:19px;font-variant-numeric:tabular-nums}
.mwe{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;
  font-size:11px;color:var(--dim);text-align:center;line-height:1.2}
.mwe span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:84px}
.mwmin{text-align:center;color:var(--dim);font-size:12px;margin-top:6px}
.mwbarra{display:flex;height:7px;border-radius:999px;overflow:hidden;margin-top:9px;
  background:var(--panel3)}
.mwbarra i{display:block;height:100%}
.mwbarra .b1{background:var(--green)}
.mwbarra .bx{background:var(--gray)}
.mwbarra .b2{background:var(--blue2)}
.mwpct{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);
  margin-top:3px}
.mwplays{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;
  display:flex;flex-direction:column;gap:5px;max-height:96px;overflow:auto}
.mwplay{font-size:11.5px;color:var(--dim);line-height:1.35}
.mwplay span{color:var(--blue2);margin-right:5px;font-variant-numeric:tabular-nums}
.mwcanal{margin-top:8px;font-size:11.5px;color:var(--dim2)}
.mwacts{display:flex;gap:6px;margin-top:10px}
.mwacts button{flex:1;font-size:12px;padding:7px 4px}
.dacts{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.minibtn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 12px}
.minibtn svg{width:15px;height:15px}
@media(max-width:700px){
  #miniwin{right:10px;left:10px;bottom:76px;width:auto}
  .mwe{width:72px}
}

/* ---------- vídeos oficiales ---------- */
.vidbox{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.vidbox h4{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}
.vidbox h4 .src{font-size:10.5px;font-weight:600;color:var(--dim2);background:var(--panel2);
  border:1px solid var(--line2);border-radius:999px;padding:2px 8px;letter-spacing:.4px}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.vid{display:block;text-decoration:none;color:var(--txt)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--panel3);border:1px solid var(--line2)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7);
  background:linear-gradient(transparent 40%,rgba(0,0,0,.35))}
.vid:hover .vthumb{border-color:var(--blue)}
.vdur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.78);color:#fff;
  font-size:11px;border-radius:5px;padding:1px 6px;font-variant-numeric:tabular-nums}
.vtit{display:block;font-size:13px;line-height:1.35;margin-top:7px}
.vid:hover .vtit{color:var(--blue2)}

/* ---------- Fantasy (Sleeper) ---------- */
.fpos{flex:0 0 auto;min-width:40px;text-align:center;font-size:10.5px;font-weight:800;
  letter-spacing:.5px;padding:3px 7px;border-radius:6px;background:var(--panel3);
  color:var(--dim)}
.fpts{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px}
.fgana{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;color:var(--green)}
.fval{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:var(--blue2);
  text-align:right;line-height:1.25}
.fval small{display:block;font-size:10px;font-weight:600;color:var(--dim2);
  text-transform:uppercase;letter-spacing:.5px}
.fduel{padding:13px 0;border-bottom:1px solid var(--line)}
.fduel:last-child{border-bottom:0}
.fduel.mio{border-left:3px solid var(--blue);padding-left:11px;margin-left:-14px;
  background:rgba(47,127,240,.05);border-radius:0 8px 8px 0}
.fdnames{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;
  margin-bottom:8px}
.fdnames .vs{color:var(--dim2);font-size:12.5px}
.fduel .falin{margin-top:8px}
.fduel .falin summary{cursor:pointer;color:var(--blue2);font-size:12.5px;
  list-style:none;user-select:none}
.fduel .falin summary::-webkit-details-marker{display:none}
.fduel .falin summary::before{content:"▸ ";font-size:11px}
.fduel .falin[open] summary::before{content:"▾ "}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 22px;
  margin-top:10px}
.fch{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:var(--dim2);padding-bottom:5px;border-bottom:1px solid var(--line);margin-bottom:5px}
.ftit{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 0;
  color:var(--dim);flex-wrap:wrap}
.fmkt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 22px}
@media (max-width:640px){
  .fduel.mio{margin-left:0;padding-left:9px}
  .fdnames{font-size:13px}
}
/* Las fichas de fantasy solo llevan un número a la derecha, no botones: en el
   teléfono se quedan en fila en vez de apilarse como las de moderación. */
.repcard.fan{align-items:center}
@media (max-width:640px){
  .repcard.fan{flex-direction:row;gap:12px}
  .repcard.fan .racts{width:auto;flex:0 0 auto}
}
/* Enlace a Sleeper: la app aconseja, los movimientos se hacen allí. */
.slp{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--blue2);
  text-decoration:none;cursor:pointer}
.slp:hover{border-color:var(--blue);background:var(--panel3)}
.fango{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.fango .meta{margin:14px 0 0}
/* Propuestas de cambio */
.trade{padding:14px 0;border-bottom:1px solid var(--line)}
.trade:last-child{border-bottom:0}
.thead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.thead .tnums{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--dim2)}
.thead .up{color:var(--green)} .thead .down{color:var(--bad)}
.tswap{display:flex;align-items:stretch;gap:10px;margin:10px 0;flex-wrap:wrap}
.tside{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:13.5px}
.tside.give{border-left:3px solid var(--bad)}
.tside.get{border-left:3px solid var(--green)}
.tside .tlab{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--dim2);flex:0 0 auto}
.tarr{display:flex;align-items:center;color:var(--dim2);transform:rotate(-90deg)}
.trade .rquote{color:var(--dim);font-size:13px;margin-top:5px;line-height:1.55}
.tmsg{width:100%;margin-top:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px;color:var(--txt);font-size:13px;resize:vertical}
@media (max-width:640px){ .tarr{transform:none;justify-content:center;width:100%} }

/* ---------- Nada de zoom al tocar un campo ----------
   Safari en iPhone acerca la página cuando enfocas un campo con letra menor
   de 16px, y luego se queda ahí: tocas el buscador y la app se descoloca.
   No es un capricho del navegador, es su forma de decir "esto no se lee".
   La solución correcta no es prohibir el zoom (eso deja fuera a quien lo
   necesita para ver), sino que la letra de los campos llegue a 16px en
   pantallas táctiles. Se aplica por tipo de puntero, no por ancho: el zoom
   depende de tener dedos, no de tener poca pantalla. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}
/* Y que iOS no infle el texto por su cuenta al girar el teléfono. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- Invita y gana ---------- */
.vinv .vpcaja{width:min(520px,100%)}
.invhead{text-align:center;margin-bottom:18px}
.invhead h2{margin:0 0 8px;font-size:24px;letter-spacing:-.5px}
.invhead p{margin:0;color:var(--dim);font-size:14px;line-height:1.6}
.invhead p b{color:var(--txt)}

/* Añadir a alguien por su enlace: su cara, su nombre, y un sí o un no. Nada
   más, porque es una decisión de un segundo y no una pantalla de ajustes. */
.vamigo .vpcaja{width:min(410px,100%);text-align:center}
.amighead{margin-bottom:18px}
/* .avatar es inline-flex, y así no lo centra ningún margin auto. */
.amighead .avatar{display:flex;margin:0 auto 12px;cursor:default}
.amighead h2{margin:0;font-size:22px;letter-spacing:-.4px}
.amigouser{color:var(--dim2);font-size:13px;margin-top:3px}
.amighead p{margin:13px 0 0;color:var(--dim);font-size:14px;line-height:1.6}
.amighead p b{color:var(--txt)}
.vamigo .warnbox{margin:0 0 14px;text-align:left}
.vamigo button.ancho{width:100%;justify-content:center}

/* Títulos: un distintivo pequeño al lado del nombre. Se parece al de OWNER
   pero en frío, para que no se confunda con un cargo: aquello manda y esto
   solo adorna. */
.titulo{display:inline-block;vertical-align:middle;margin-left:7px;padding:2px 7px;
  border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap;
  background:rgba(47,127,240,.16);color:var(--blue2);
  border:1px solid rgba(47,127,240,.38)}
.fname .titulo{font-size:9.5px;margin-left:6px}
.selti{padding:4px 8px;font-size:12px;max-width:130px}
/* La cuenta de verdad de quien firma, al lado del nombre que se puso. */
.pcuenta{color:var(--dim2);font-size:11.5px;margin-left:6px;white-space:nowrap}
@media(max-width:700px){
  /* Las otras viñetas ocupan la pantalla entera porque llevan dentro una
     pantalla entera. Esta son una cara y dos botones: estirada a lo alto deja
     medio móvil vacío, así que aquí se queda centrada. Las dos clases hacen
     falta para ganarle a la regla de arriba. */
  .vplanes.vamigo{padding:20px;align-items:center}
  .vamigo .vpcaja{width:min(410px,100%);max-height:calc(100vh - 40px);
    border-radius:var(--radius);padding:30px 20px 22px}
}
.invprog{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.invnum{display:flex;align-items:baseline;gap:4px;flex:0 0 auto}
.invnum b{font-size:34px;letter-spacing:-1px}
.invnum span{color:var(--dim2);font-size:15px}
.invtxt{flex:1;min-width:0;font-size:13.5px;color:var(--dim)}
.invtxt b{color:var(--txt)}
.invbar{height:6px;border-radius:99px;background:var(--panel3);margin-top:7px;overflow:hidden}
.invbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:width .5s}
.invaros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.invaros .aro{width:26px;height:26px;border-radius:50%;border:2px dashed var(--line2)}
.invaros .aro.on{border-style:solid;border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--green))}
.invesc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.invcaja{background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px}
.invcaja h4{margin:0 0 10px;font-size:13.5px;display:flex;align-items:center;gap:8px}
.invlink{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--blue2);word-break:break-all;user-select:all;margin-bottom:12px}
.invqr{display:flex;justify-content:center;margin-bottom:12px}
.invqr svg{width:min(190px,60vw);height:auto;border-radius:8px}
.invbtns{display:flex;gap:9px;flex-wrap:wrap}
.invbtns button,.invbtns .btn-primary{flex:1;min-width:130px;justify-content:center;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.invesp{margin-top:14px;font-size:12.5px;color:var(--dim);line-height:1.6;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px}
.invesp b{color:var(--txt)}
.invlista{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;justify-content:center}
/* Aviso de que el enlace de invitación no sale de la red local. */
.invlocal{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);
  border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px;
  font-size:12.5px;line-height:1.55;color:var(--dim)}
.invlocal b{color:var(--warn)}
/* Panel de "olvidé mi contraseña": no hay correos, así que lo que se ofrece
   es a quién escribir, y el comando si el servidor es tuyo. */
.recubox{margin-top:14px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px}
.recubox h4{margin:0 0 8px;font-size:14px}
.recubox p{margin:0 0 10px;font-size:13px;color:var(--dim);line-height:1.6}
.recubox p b{color:var(--txt)}
.recucorreo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.recucorreo code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--blue2);background:var(--panel3);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;word-break:break-all;user-select:all}
.recubox details{border-top:1px solid var(--line);padding-top:10px}
.recubox details summary{cursor:pointer;font-size:13px;color:var(--blue2);
  list-style:none;user-select:none}
.recubox details summary::-webkit-details-marker{display:none}
.recubox details summary::before{content:"▸ ";font-size:11px}
.recubox details[open] summary::before{content:"▾ "}
.recubox details p{margin-top:10px}
/* Moderación de cuentas: escondida tras un botón a propósito, porque son
   acciones que le cambian el día a alguien. */
.cuentafila{border-bottom:1px solid var(--line)}
.cuentafila:last-child{border-bottom:0}
.cuentafila .bloqrow{border-bottom:0}
.modestado{font-size:12px;color:var(--warn);padding:0 0 9px 38px}
.modacciones{padding:4px 0 14px 38px;display:flex;flex-direction:column;gap:9px}
/* Un display explicito gana al atributo hidden del navegador, asi que sin
   esto los paneles salian todos abiertos de golpe. */
.modacciones[hidden]{display:none}
.modfila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.modfila label{font-size:12px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.5px}
.modfila input{flex:1;min-width:180px}
.modbotones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.modbotones button{font-size:12.5px;padding:6px 12px}
.modbotones button.peligro{border-color:rgba(248,113,113,.4);color:var(--bad)}
.modbotones button.peligro:hover{background:rgba(248,113,113,.1);border-color:var(--bad)}
.modsep{flex:1}
.modacciones .hint{margin:0}
@media (max-width:640px){
  .modestado,.modacciones{padding-left:0}
  .modsep{display:none}
  .modbotones button,.modbotones select{flex:1;min-width:120px}
}
/* Buscador dentro de la cabecera de una tarjeta plegable. */
.cabbusca{flex:0 1 240px;min-width:130px;font-size:13px;padding:7px 11px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:8px}
.cabbusca:focus{border-color:var(--blue);outline:none}
@media (max-width:640px){ .cabbusca{flex:1 1 100%;order:3;margin-top:8px} }
/* La contraseña recién puesta: se enseña una vez y no vuelve. */
.clavenueva{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);
  border-radius:var(--radius-sm);padding:12px 14px;margin-top:4px}
.clavenueva b{display:block;font-size:13px;margin-bottom:8px}
.clavenueva span{font-size:12.5px;color:var(--dim);line-height:1.5}
.recupie{margin:0;font-size:13px;color:var(--dim);line-height:1.6}
/* Foto de perfil */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar:has(img){background:none;padding:0}
.fotoedit{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fotobotones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fotobotones button.peligro{border-color:rgba(248,113,113,.4);color:var(--bad)}
.fotoedit .hint{margin:0}
@media (max-width:640px){ .fotobotones button{flex:1;min-width:120px} }
/* "Vienes invitado por X" en el alta: que se vea que el enlace funcionó,
   antes de crear la cuenta y no después. */
.invitapor{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.3);
  border-radius:var(--radius-sm);padding:10px 13px;font-size:13px;color:var(--dim)}
.invitapor b{color:var(--green)}
.invitapor svg{color:var(--green);flex:0 0 auto}

/* ---------- escaparate público ----------
   Lo que ve quien llega sin cuenta: qué es, qué cuesta y qué incluye. Vive en
   la columna de la derecha de la pantalla de acceso, debajo del partido de
   muestra, para que se lea de corrido sin tener que registrarse. */
.escaparate{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.escaparate h3{margin:0 0 10px;font-size:19px;letter-spacing:-.3px}
.escaparate h3+.epintro{margin-top:0}
.epintro{color:var(--dim);font-size:14.5px;line-height:1.65;margin:0 0 20px;max-width:62ch}
.epintro b{color:var(--txt)}
.epintro a{color:var(--blue2)}
.epchico{font-size:13px;color:var(--dim2)}
.epgrid{display:grid;gap:12px;margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.epl{position:relative;border:1px solid var(--line2);background:var(--panel2);
  border-radius:var(--radius);padding:16px 16px 14px}
.epl.mejor{border-color:rgba(47,127,240,.5)}
.epbadge{position:absolute;top:-9px;left:14px;background:var(--blue);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px}
.epl h4{margin:0 0 6px;font-size:15px;letter-spacing:-.2px}
.epprecio{font-size:13px;color:var(--dim2)}
.epprecio b{font-size:25px;color:var(--txt);letter-spacing:-.8px;
  font-variant-numeric:tabular-nums}
.epsub{color:var(--dim2);font-size:12.5px;margin:6px 0 10px;line-height:1.5}
.epl ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px}
.epl li{color:var(--dim);font-size:12.5px;line-height:1.45}
.eplegal{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--dim2)}
.eplegal a{color:var(--blue2)}
.eplegal b{color:var(--dim)}

/* ---------- marcador de acierto ----------
   Cuánto acierta la persona, con el número grande delante: es el dato que se
   mira, y el resto son detalles que lo acompañan. */
.marcador .mkgrid{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:14px}
.mkbig{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:120px;padding:14px 18px;border-radius:var(--radius);
  background:var(--panel2);border:1px solid rgba(47,127,240,.35)}
.mkbig b{font-size:40px;line-height:1;letter-spacing:-1.5px;color:var(--blue2);
  font-variant-numeric:tabular-nums}
.mkbig span{font-size:12px;color:var(--dim2);margin-top:5px}
.mkcol{display:grid;gap:10px 22px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));flex:1}
.mkcol div{display:flex;flex-direction:column}
.mkcol b{font-size:19px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.mkcol span{font-size:12px;color:var(--dim2)}