/* Fantasy Manager — negro y rojo de LaLiga Fantasy. Barlow para leer, Barlow Condensed en mayúsculas para
   marcadores, cifras y títulos: aire de retransmisión deportiva. */
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --fondo: #08080a;
  --plano: #131317;
  --plano2: #1b1b21;
  --plano3: #26262e;
  --linea: #24242b;
  --texto: #f4f2f3;
  --texto2: #c3bec5;
  --apagado: #948f9b;
  --rojo: #ee1c3c;
  --rojo2: #b30f2c;
  --rojo3: #5a0b1a;
  --rojo-s: rgba(238, 28, 60, 0.13);
  --rojo-l: #ff5269;
  --sube: #2fd18f;
  --sube-s: rgba(47, 209, 143, 0.12);
  --baja: #ff6f61;
  --baja-s: rgba(255, 111, 97, 0.12);
  --oro: #ffc547;
  --oro-s: rgba(255, 197, 71, 0.12);
  --azul: #58a6ff;
  --azul-s: rgba(88, 166, 255, 0.12);
  --por: #ffc547; --def: #58a6ff; --med: #2fd18f; --del: #ee1c3c; --ent: #9a96a0;
  --cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--fondo); touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 16px/1.45 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rojo-l); text-decoration: none; }
.ic { width: 22px; height: 22px; flex: none; }
.oculto { display: none !important; }
.sube { color: var(--sube); } .baja { color: var(--baja); } .apag { color: var(--apagado); } .t2 { color: var(--texto2); } .rojo { color: var(--rojo-l); } .oro { color: var(--oro); }
b, strong { font-weight: 600; color: var(--texto); }
.peq { font-size: 14px; }
.cifra { font-family: var(--cond); font-weight: 600; letter-spacing: 0.2px; }

/* ---------- marco ---------- */
#app { max-width: 620px; margin: 0 auto; min-height: 100vh; }
.sup {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.sup .logo { width: 30px; height: 30px; flex: none; }
.sup-liga { flex: 1; min-width: 0; }
.sup-liga b { display: block; font: 700 17px/1.1 var(--cond); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-liga span { font-size: 13.5px; color: var(--apagado); display: flex; align-items: center; gap: 6px; }
.sup-liga .sup-queda { color: var(--oro); font-weight: 600; font-size: 12.5px; margin-top: 1px; }
.sup-liga .sup-queda.poco { color: var(--baja); }
.sup-liga .sup-queda[hidden] { display: none; }
/* el nombre de la liga: con varias ligas, un botón para cambiar */
.sup-nombre { display: flex; align-items: center; gap: 4px; max-width: 100%; color: var(--texto); text-align: left; padding: 7px 0; margin: -7px 0; }
.sup-nombre b { min-width: 0; }
.sup-nombre .ic { width: 18px; height: 18px; flex: none; color: var(--rojo-l); }
.sup-nombre:disabled { cursor: default; opacity: 1; }
.ligas-l { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.ligas-l button { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 13px; background: var(--plano2); border: 1px solid var(--linea); text-align: left; font-size: 16px; }
.ligas-l button b { flex: 1; min-width: 0; }
.ligas-l button small { font-size: 12.5px; color: var(--oro); }
.ligas-l button.activa { border-color: var(--rojo); background: var(--rojo-s); }
.ligas-l button .ic { color: var(--rojo-l); width: 20px; height: 20px; }
/* los avisos de fallos */
.b-ico { position: relative; }
.b-ico .gl { position: absolute; top: 2px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rojo); color: #fff; font: 700 11px/17px 'Barlow'; text-align: center; }
.aviso-t { width: 100%; resize: vertical; min-height: 96px; margin: 4px 0 10px; font-size: 16px; line-height: 1.4; }
.aviso-diag { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--texto2); margin: 0 0 14px; line-height: 1.4; }
.aviso-diag input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--rojo); }
.aviso { background: var(--plano2); border: 1px solid var(--linea); border-radius: 13px; padding: 12px 14px; margin: 0 0 10px; }
.aviso.nuevo { border-color: var(--rojo); }
.aviso p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.aviso-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left; font-size: 13px; color: var(--apagado); }
.aviso-cab b { color: var(--texto); font-size: 15px; }
.aviso-cab .pill { margin-left: auto; }
.aviso-t2 { color: var(--apagado); }
.aviso-resp { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sube-s); display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.45; }
.aviso-resp b { font-size: 13px; color: var(--sube); }
.aviso-resp span { white-space: pre-wrap; word-break: break-word; }
.aviso-resp small { font-size: 12px; color: var(--apagado); }
.aviso-det { margin-top: 8px; }
.aviso-det details { margin: 8px 0; }
.aviso-det summary { cursor: pointer; color: var(--texto2); font-size: 14px; }
.aviso-det pre.diag { max-height: 260px; overflow: auto; }
.aviso-texto { font-size: 15.5px !important; color: var(--texto); }
/* un fallo al cargar, explicado */
.banda.mal { background: var(--baja-s); }
.banda.mal .ic { color: var(--baja); }
.fallo p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--texto2); }
.error-c .fallo-det { margin-top: 6px; font-size: 12.5px; color: var(--apagado); font-family: ui-monospace, monospace; word-break: break-word; }
.fallo p.fallo-det { font-size: 12.5px; color: var(--apagado); font-family: ui-monospace, monospace; word-break: break-word; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--apagado); display: inline-block; }
.punto.vivo { background: var(--sube); } .punto.viejo { background: var(--oro); } .punto.mal { background: var(--rojo); }
.sup-btns { display: flex; gap: 2px; flex: none; }
.b-ico { min-width: 52px; height: 48px; padding: 0 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--texto2); flex: none; font: 600 12px/1 'Barlow'; white-space: nowrap; }
.b-ico::after { content: attr(data-et); }
@media (max-width: 380px) { .sup { gap: 8px; padding-left: 12px; padding-right: 10px; } .sup-btns { gap: 0; } .b-ico { min-width: 46px; padding: 0 2px; font-size: 11.5px; } .sup-liga b { font-size: 16px; letter-spacing: 0.3px; } }
.b-ico:active { background: var(--plano2); }
.gira .ic { animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

main { padding: 16px 16px 120px; }
/* tirar hacia abajo para actualizar: la flecha baja con el dedo y gira al soltar */
#tiron { position: fixed; z-index: 25; left: 50%; top: calc(var(--sup-h, 61px) + 8px); width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; display: grid; place-items: center; background: var(--plano2); border: 1px solid var(--linea); color: var(--texto2); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); pointer-events: none; opacity: min(1, calc(var(--f, 0) * 2)); transform: translateY(calc(var(--f, 0) * 40px - 50px)) rotate(calc(var(--f, 0) * 270deg)); transition: opacity 0.2s; }
#tiron.listo { color: var(--rojo-l); border-color: var(--rojo3); }
#tiron.va .ic { animation: gira 0.6s linear; }
.vista { animation: entra 0.2s ease-out; }
@keyframes entra { from { opacity: 0; } }

/* barra de abajo: indicador rojo arriba del activo */
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #0d0d10; border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.nav-in { display: flex; max-width: 620px; margin: 0 auto; }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 60px; padding: 9px 0 8px; color: var(--texto2); font: 600 13.5px 'Barlow'; position: relative; }
.nav button .ic { width: 25px; height: 25px; }
.nav button::before { content: ''; position: absolute; top: -1px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: transparent; }
.nav button.activo { color: var(--texto); }
.nav button.activo::before { background: var(--rojo); }
.nav button.activo .ic { color: var(--rojo-l); }
.nav button.activo { font-weight: 700; }
.nav .gl { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rojo); color: #fff; font: 700 11px/17px 'Barlow'; text-align: center; }

/* ---------- títulos ---------- */
.eti { font: 700 13px 'Barlow'; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rojo-l); }
.titulo { font: 700 34px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; margin: 6px 0 4px; }
.entradilla { color: var(--texto2); font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.sec { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 10px; }
.sec h2 { margin: 0; font: 700 22px/1.05 var(--cond); text-transform: uppercase; letter-spacing: 0.4px; flex: 1; }
.sec .mas { font: 600 14px 'Barlow'; color: var(--rojo-l); }
.sec .sub { font-size: 14.5px; color: var(--apagado); }

/* ---------- el marcador ---------- */
.marcador {
  position: relative; overflow: hidden; border-radius: 18px; padding: 14px 16px 16px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #2a0710 0%, #12060a 55%, #0d0d10 100%);
  border: 1px solid #3a0c18;
}
.marcador[data-accion] { cursor: pointer; transition: transform 0.12s; }
.marcador[data-accion]:active { transform: scale(0.985); }
.marcador-ir { display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -6px -4px 0; border-radius: 50%; background: rgba(238, 28, 60, 0.14); color: var(--rojo-l); flex: none; }
.marcador-ir .ic { width: 16px; height: 16px; }
.marcador .fila-j > :first-child + .marcador-ir { margin-left: auto; }
.marcador .col .dist { font: 600 12.5px/1.2 'Barlow'; color: var(--texto2); margin-top: 3px; white-space: nowrap; }
@media (max-width: 370px) { .marcador .col .dist { font-size: 12px; letter-spacing: -0.1px; } }
.resumen-liga { display: grid; gap: 4px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--plano2); font-size: 14.5px; color: var(--texto2); }
.resumen-liga b { color: var(--texto); }
.tabla-p { display: flex; flex-direction: column; gap: 2px; }
.tp { display: grid; grid-template-columns: 44px 1fr auto 86px; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--linea); font-size: 14.5px; }
.tp .pos { justify-self: start; }
.tp .n { color: var(--texto2); }
.tp > span:nth-child(3) { font: 700 15px var(--cond); text-align: right; }
.tp .apag7 { font-size: 13px; text-align: right; }
.marcador .fila-j { display: flex; align-items: center; gap: 8px; font: 600 13px 'Barlow'; letter-spacing: 1px; text-transform: uppercase; color: var(--texto2); }
.marcador .fila-j .vivo { color: var(--rojo-l); display: inline-flex; align-items: center; gap: 6px; }
.marcador .fila-j .vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px rgba(238,28,60,0.25); }
.marcador .fila-j .der { margin-left: auto; color: var(--texto); }
.marcador .cols { display: grid; grid-template-columns: 1.15fr 1fr 0.8fr; margin-top: 12px; }
.marcador .col { padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.08); }
.marcador .col:first-child { padding-left: 0; border-left: 0; }
.marcador .col .et { font: 600 12.5px 'Barlow'; letter-spacing: 1px; text-transform: uppercase; color: var(--apagado); }
.marcador .col .v { font: 700 30px/1.05 var(--cond); margin-top: 3px; white-space: nowrap; }
.marcador .col .v small { font-size: 17px; font-weight: 600; color: var(--texto2); margin-left: 2px; }
.marcador .col .d { font: 600 14px var(--cond); margin-top: 1px; }
.marcador .neg { color: var(--baja); }
.alerta-m { margin-top: 12px; padding: 9px 12px; border-radius: 11px; background: rgba(238,28,60,0.18); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.alerta-m .ic { width: 18px; height: 18px; color: var(--rojo-l); }
.alerta-m.oro { background: var(--oro-s); color: var(--texto); }
.alerta-m.oro .ic { color: var(--oro); flex: none; }

/* ---------- el plan del día ---------- */
.plan { margin-top: 18px; }
.plan-cab { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.plan-quien { margin-left: auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px 'Barlow'; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-quien .ic { width: 15px; height: 15px; flex: none; color: var(--rojo-l); }
.plan-otro { margin: 6px 0 18px; }
.plan-otro .btn { min-height: 48px; padding-top: 11px; padding-bottom: 11px; }
.plan-otro .btn .ic { color: #fff; }
.plan-otro p { margin: 7px 2px 0; font-size: 13px; line-height: 1.4; color: var(--apagado); text-align: center; }
.escritorio .plan-otro { display: flex; align-items: center; gap: 14px; }
.escritorio .plan-otro .btn { width: auto; flex: none; }
.escritorio .plan-otro p { margin: 0; text-align: left; }
.banda.plan-cambio { border: 1px solid rgba(255, 197, 71, 0.35); background: var(--oro-s); }
.banda.plan-cambio .ic { color: var(--oro); }
.plan-cab .der { margin-left: auto; }
.plan-titular { font: 700 29px/1.08 var(--cond); margin: 10px 0 8px; }
.plan-sit { color: var(--texto2); font-size: 16px; margin: 0 0 6px; }
.pasos { position: relative; margin: 18px 0 6px; }
.paso-op { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.paso-op::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: var(--linea); }
.paso-op:last-child::before { display: none; }
.paso-op .num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 18px var(--cond); background: var(--plano2); border: 2px solid var(--plano3); color: var(--texto); position: relative; z-index: 1; }
.paso-op.vender .num { border-color: var(--sube); color: var(--sube); }
.paso-op.clausular .num, .paso-op.pujar .num, .paso-op.comprar .num { border-color: var(--rojo); color: var(--rojo-l); background: var(--rojo-s); }
.paso-op.blindar .num { border-color: var(--oro); color: var(--oro); }
.paso-op.alinear .num, .paso-op.esperar .num { border-color: var(--azul); color: var(--azul); }
.paso-op.hecho .num { background: var(--sube); border-color: var(--sube); color: #08080a; }
.op { flex: 1; min-width: 0; background: var(--plano); border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.op.hecho { opacity: 0.55; }
.op-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.accion-t { font: 700 13px 'Barlow'; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--plano3); color: var(--texto); }
.accion-t.vender { background: var(--sube-s); color: var(--sube); }
.accion-t.clausular, .accion-t.pujar, .accion-t.comprar { background: var(--rojo-s); color: var(--rojo-l); }
.accion-t.blindar { background: var(--oro-s); color: var(--oro); }
.accion-t.alinear, .accion-t.esperar { background: var(--azul-s); color: var(--azul); }
.op-top .cuando { font: 600 13.5px 'Barlow'; color: var(--texto2); display: inline-flex; align-items: center; gap: 4px; }
.op-top .cuando .ic { width: 15px; height: 15px; }
.op-j { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; width: 100%; text-align: left; }
.op-j .n { font: 700 21px/1.1 var(--cond); }
.op-j .s { font-size: 14.5px; color: var(--texto2); }
.op-j .der { margin-left: auto; text-align: right; flex: none; }
.op-j .imp { font: 700 22px/1 var(--cond); }
.op-j .imp.mas { color: var(--sube); } .op-j .imp.menos { color: var(--texto); }
.op-j .puja { font: 600 13px 'Barlow'; color: var(--rojo-l); margin-top: 3px; }
.op .motivo { font-size: 15.5px; line-height: 1.5; color: var(--texto2); margin: 4px 0 0; }
.op-pie { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--linea); font-size: 13.5px; color: var(--apagado); }
.op-pie .saldo { margin-left: auto; font: 600 14px var(--cond); color: var(--texto2); }
.op-pie .saldo.neg { color: var(--baja); }
.op-pie button { color: var(--texto2); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.op-pie button .ic { width: 16px; height: 16px; }
.op .aviso-op { margin-top: 8px; font-size: 13.5px; color: var(--oro); display: flex; gap: 6px; align-items: center; }
.op .aviso-op .ic { width: 15px; height: 15px; }
.conf { font: 700 12px 'Barlow'; letter-spacing: 0.8px; text-transform: uppercase; }
.conf.alta { color: var(--sube); } .conf.media { color: var(--oro); } .conf.baja { color: var(--apagado); }
.cierre { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--plano2); margin-top: 4px; }
.cierre .v { margin-left: auto; font: 700 22px var(--cond); }
.cierre.mal { background: var(--baja-s); }
.cierre.oro { background: var(--oro-s); }
.cierre.oro .ic { color: var(--oro); }
.cargando-ia { margin: 18px 0; padding: 16px; border-radius: 16px; border: 1px solid var(--rojo3); background: linear-gradient(135deg, rgba(238,28,60,0.08), transparent); }
.cargando-ia .t { font: 700 20px var(--cond); text-transform: uppercase; }
.cargando-ia .p { color: var(--texto2); font-size: 14.5px; margin-top: 4px; min-height: 21px; }
.barra-ia { height: 3px; border-radius: 2px; background: var(--plano3); margin-top: 12px; overflow: hidden; }
.barra-ia i { display: block; height: 100%; width: 35%; background: var(--rojo); border-radius: 2px; animation: barre 1.4s ease-in-out infinite; }
@keyframes barre { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.dias { border-left: 2px solid var(--rojo3); margin-left: 6px; }
.dia { position: relative; padding: 0 0 14px 18px; }
.dia::before { content: ''; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--rojo); }
.dia b { display: block; font: 700 16px var(--cond); text-transform: uppercase; letter-spacing: 0.4px; }
.dia span { color: var(--texto2); font-size: 15px; }

/* ---------- pestañas subrayadas y filtros ---------- */
/* las pestañas de cada pantalla: un riel con todas a la vista, pegado bajo la cabecera al bajar */
.tabs-ancla { height: 0; }
.tabs { position: sticky; top: var(--sup-h, 61px); z-index: 15; margin: 8px -16px 14px; padding: 8px 12px; background: var(--fondo); }
.tabs-in { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--plano); border: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.tabs-in::-webkit-scrollbar { display: none; }
.tabs button { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: 10px; color: var(--texto2); font: 600 15px 'Barlow'; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.tabs button:has(.tab-n) { padding-right: 15px; }
/* el número de la pestaña, como un aviso en la esquina (así caben todas) */
.tabs .tab-n { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; margin: 0; padding: 0 4px; font: 700 11px/17px 'Barlow'; }
@media (max-width: 380px) { .tabs { padding: 8px 10px; margin-left: -16px; margin-right: -16px; } .tabs-in { gap: 2px; padding: 3px; } .tabs button { padding: 0 5px; font-size: 14px; } .tabs button:has(.tab-n) { padding-right: 13px; } }
.tabs button.activo { background: var(--plano3); color: var(--texto); box-shadow: inset 0 -2px 0 var(--rojo); }
/* los filtros, todos a la vista: si no caben en una línea, pasan a la siguiente */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; min-height: 38px; padding: 8px 14px; border-radius: 10px; background: var(--plano2); color: var(--texto2); font: 600 15px 'Barlow'; }
.filtros button.activo { background: var(--rojo); color: #fff; }

/* ---------- jugadores ---------- */
.ava { display: block; width: 52px; height: 52px; border-radius: 50%; flex: none; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2c2c35, #17171c); }
.ava::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--plano3); pointer-events: none; }
.ava .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px var(--cond); color: var(--texto2); }
/* la foto se encuadra sola (caras.js): hasta que se sabe dónde está la cara, no se ve */
.ava img.cara { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity 0.2s; }
.ava img.cara.lista { opacity: 1; object-fit: fill; }
.ava img.cara.entera { opacity: 1; }
.ava.p1::after { box-shadow: inset 0 0 0 2px var(--por); } .ava.p2::after { box-shadow: inset 0 0 0 2px var(--def); } .ava.p3::after { box-shadow: inset 0 0 0 2px var(--med); } .ava.p4::after { box-shadow: inset 0 0 0 2px var(--del); } .ava.p5::after { box-shadow: inset 0 0 0 2px var(--ent); }
.ava-w { display: block; position: relative; flex: none; }
.ava-w .esc { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; padding: 2px; object-fit: contain; box-shadow: 0 0 0 2px var(--fondo); }
.ava.g { width: 88px; height: 88px; } .ava.g .ini { font-size: 30px; }
.ava.m { width: 44px; height: 44px; } .ava.m .ini { font-size: 15px; }
.fila { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linea); width: 100%; }
.fila:last-child { border-bottom: 0; }
.fila:active { opacity: 0.7; }
.fila-c { flex: 1; min-width: 0; }
.fila-n { font: 600 17px 'Barlow'; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-n .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* al lado del nombre: la probabilidad de ser titular o, con la alineación confirmada, si está */
.tit-b { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font: 700 12.5px/1 'Barlow'; padding: 3px 6px; border-radius: 5px; background: var(--plano2); color: var(--texto2); letter-spacing: 0.2px; }
.tit-b .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.tit-b.bien { background: var(--sube-s); color: var(--sube); } .tit-b.duda { background: var(--oro-s); color: var(--oro); } .tit-b.mal { background: var(--baja-s); color: var(--baja); }
.tit-b.conf { box-shadow: inset 0 0 0 1px currentColor; }
.fila-s { font-size: 14.5px; line-height: 1.35; color: var(--texto2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-x { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fila-d { text-align: right; flex: none; }
.fila-d .v { font: 700 19px/1.1 var(--cond); }
.fila-d .d { font: 600 14px var(--cond); margin-top: 2px; }
.pos { font: 700 10.5px/1 'Barlow'; letter-spacing: 0.6px; padding: 3px 5px; border-radius: 4px; color: #08080a; flex: none; }
.pos.p1 { background: var(--por); } .pos.p2 { background: var(--def); } .pos.p3 { background: var(--med); } .pos.p4 { background: var(--del); color: #fff; } .pos.p5 { background: var(--ent); }
.pill { display: inline-flex; align-items: center; gap: 4px; font: 600 13.5px 'Barlow'; padding: 4px 9px; border-radius: 6px; background: var(--plano2); color: var(--texto2); white-space: nowrap; }
.pill .ic { width: 13px; height: 13px; }
.pill.abierta { background: var(--rojo-s); color: var(--rojo-l); }
.pill.pronto, .pill.duda { background: var(--oro-s); color: var(--oro); }
.pill.mal { background: var(--baja-s); color: var(--baja); }
.pill.bien, .pill.chollo { background: var(--sube-s); color: var(--sube); }
.pill.plan { background: var(--rojo); color: #fff; }
.pill.vende { background: var(--oro-s); color: var(--oro); }
.pill.libre { background: var(--azul-s); color: var(--azul); }
.grupo { font: 700 16px var(--cond); letter-spacing: 0.6px; text-transform: uppercase; color: var(--texto2); margin: 20px 0 2px; display: flex; justify-content: space-between; }
.barra { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--plano3); vertical-align: middle; overflow: hidden; }
.barra i { display: block; height: 100%; width: calc(var(--n) * 1%); background: var(--rojo); border-radius: 3px; }
.mini { width: 54px; height: 20px; display: block; margin: 4px 0 0 auto; color: var(--apagado); }
.mini.sube { color: var(--sube); } .mini.baja { color: var(--baja); }

/* tarjetas horizontales */
.carril { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.tj { flex: none; width: 168px; scroll-snap-align: start; background: var(--plano); border: 1px solid var(--linea); border-radius: 16px; padding: 12px; text-align: left; position: relative; overflow: hidden; }
.tj .ava { width: 60px; height: 60px; }
.tj .n { font: 700 18px/1.1 var(--cond); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj .s { font-size: 13.5px; color: var(--texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj .gr { font: 700 22px/1 var(--cond); margin-top: 10px; }
.tj .cuenta { font: 600 13px 'Barlow'; color: var(--oro); display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.tj .cuenta.ya { color: var(--rojo-l); }
.tj .cuenta .ic { width: 14px; height: 14px; }
.tj .esq { position: absolute; top: 10px; right: 10px; font: 700 18px var(--cond); color: var(--texto2); }

/* ---------- bloques ---------- */
.caja { background: var(--plano); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; margin: 12px 0; }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin: 8px 0; }
.dato .et { color: var(--apagado); font: 600 13px 'Barlow'; letter-spacing: 0.8px; text-transform: uppercase; }
.dato .v { font: 700 25px/1.1 var(--cond); margin-top: 3px; }
.dato .v small { font-size: 15px; font-weight: 600; color: var(--texto2); margin-left: 3px; }
.vacio { color: var(--texto2); text-align: center; padding: 24px 10px; font-size: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border-radius: 13px; background: var(--rojo); color: #fff; font: 700 15px 'Barlow'; letter-spacing: 0.5px; text-transform: uppercase; }
.btn:active { background: var(--rojo2); }
.btn.sec { background: var(--plano2); color: var(--texto); border: 1px solid var(--linea); margin: 0; }
.btn.chico { min-height: 40px; padding: 9px 13px; font-size: 14px; border-radius: 10px; }
.btn.ancho { width: 100%; }
.btn[disabled] { opacity: 0.5; }
.campo-t { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--plano2); outline: none; }
.campo-t:focus { border-color: var(--rojo); }
.banda { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px; background: var(--plano2); margin: 0 0 12px; font-size: 14.5px; }
.banda .ic { color: var(--oro); width: 19px; height: 19px; }
.banda button { margin-left: auto; color: var(--rojo-l); font-weight: 700; white-space: nowrap; }
.error-c { margin: 12px 0; padding: 13px 14px; border-radius: 13px; background: var(--rojo-s); border: 1px solid var(--rojo3); color: var(--texto); font-size: 14.5px; }
.paso { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; color: var(--texto2); }
.paso i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--rojo); color: #fff; display: grid; place-items: center; font: 700 13px 'Barlow'; }

/* actividad */
.ic-act { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--plano2); color: var(--texto2); }
.ic-act .ic { width: 19px; height: 19px; }
.ic-act.clausula { background: var(--rojo-s); color: var(--rojo-l); }
.ic-act.compra { background: var(--sube-s); color: var(--sube); }
.ic-act.venta { background: var(--azul-s); color: var(--azul); }
.ic-act.blindaje { background: var(--oro-s); color: var(--oro); }
.act-t { font-size: 15px; color: var(--texto); white-space: normal; }
.act-t .quien { font-weight: 700; }
.act-t .quien.yo { color: var(--rojo-l); }
.amenaza { font: 700 12px 'Barlow'; letter-spacing: 0.6px; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.amenaza.alta { background: var(--rojo-s); color: var(--rojo-l); }
.amenaza.media { background: var(--oro-s); color: var(--oro); }
.amenaza.baja { background: var(--plano2); color: var(--apagado); }
.posn { font: 700 22px var(--cond); width: 28px; text-align: center; flex: none; color: var(--texto2); }
.posn.yo { color: var(--rojo-l); }
.yo-fila { background: linear-gradient(90deg, var(--rojo-s), transparent 70%); border-radius: 12px; padding-left: 6px; }

/* gráficos */
.graf { width: 100%; height: auto; display: block; margin: 6px 0; }
.graf-vacio { color: var(--apagado); font-size: 14px; padding: 16px 0; text-align: center; }
.graf-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 2px; }
.graf-cab > span small { font: 500 13px 'Barlow'; letter-spacing: 0; text-transform: none; color: var(--apagado); }
.graf-cab > span { font: 700 13.5px 'Barlow'; letter-spacing: 1.3px; text-transform: uppercase; color: var(--texto2); }
.rangos { display: flex; padding: 2px; border-radius: 10px; background: var(--plano2); }
.rangos button { padding: 5px 10px; border-radius: 8px; font: 600 13.5px 'Barlow'; color: var(--texto2); }
.rangos button.activo { background: var(--plano3); color: var(--texto); }
.graf-pie { font-size: 13.5px; color: var(--texto2); margin: -2px 0 6px; }
.g-et { font: 600 12px var(--cond); fill: var(--texto2); }
.g-eje { font: 500 11px 'Barlow'; fill: var(--apagado); }
.b { fill: var(--plano3); } .b-yo { fill: var(--rojo); }
/* el once, como en el Fantasy: césped a franjas, cromos con la cara, la placa del nombre y el dato */
.campo-cab { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.campo-cab .form { padding: 3px 10px; border-radius: 8px; background: var(--rojo); color: #fff; font: 700 17px/1.2 var(--cond); letter-spacing: 0.5px; }
.campo-cab .pp { color: var(--texto2); font-size: 14px; white-space: nowrap; } .campo-cab .pp b { color: var(--texto); font: 700 18px var(--cond); }
.campo-modo { margin-left: auto; display: flex; padding: 2px; border-radius: 10px; background: var(--plano2); }
.campo-modo button { padding: 5px 9px; border-radius: 8px; font: 600 13.5px 'Barlow'; color: var(--texto2); }
.campo-modo button.activo { background: var(--plano3); color: var(--texto); }
.cancha { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 4px 16px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.28)), repeating-linear-gradient(180deg, #1b7240 0 12.5%, #176638 12.5% 25%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35); }
.cancha > i { position: absolute; pointer-events: none; border: 2px solid rgba(255, 255, 255, 0.2); }
.cancha .l-borde { inset: 8px; border-radius: 4px; }
.cancha .l-medio { left: 8px; right: 8px; top: 50%; height: 0; border-width: 2px 0 0; }
.cancha .l-circ { left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; }
.cancha .l-area { left: 50%; width: 48%; height: 12%; transform: translateX(-50%); }
.cancha .l-area.arriba { top: 8px; border-top: 0; } .cancha .l-area.abajo { bottom: 8px; border-bottom: 0; }
.linea-c { position: relative; z-index: 1; display: flex; justify-content: space-evenly; align-items: flex-start; }
.cromo { display: flex; flex-direction: column; align-items: center; width: 22%; max-width: 78px; min-width: 0; padding: 0; color: #fff; }
.linea-c.cinco .cromo { width: 19.4%; }
.cr-foto { position: relative; display: block; }
.ava.cr { width: 54px; height: 54px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); }
.ava.cr::after { box-shadow: inset 0 0 0 2.5px var(--plano3); }
.ava.cr.p1::after { box-shadow: inset 0 0 0 2.5px var(--por); } .ava.cr.p2::after { box-shadow: inset 0 0 0 2.5px var(--def); } .ava.cr.p3::after { box-shadow: inset 0 0 0 2.5px var(--med); } .ava.cr.p4::after { box-shadow: inset 0 0 0 2.5px var(--del); } .ava.cr.p5::after { box-shadow: inset 0 0 0 2.5px var(--ent); }
.cromo .ava-w .esc { width: 19px; height: 19px; right: -5px; bottom: -2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.cr-nom { max-width: 100%; margin-top: 5px; padding: 2px 6px; border-radius: 5px; background: rgba(8, 8, 10, 0.88); font: 700 12.5px/1.25 var(--cond); letter-spacing: 0.2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-nom i { font-style: normal; color: var(--oro); margin-right: 3px; }
.cr-dato { margin-top: 2px; padding: 1px 6px; border-radius: 5px; background: var(--rojo); font: 700 12px/1.3 var(--cond); white-space: nowrap; }
.cr-rv { position: absolute; top: -5px; left: -13px; padding: 0 4px; border-radius: 5px; background: #4a4a55; font: 700 10.5px/15px var(--cond); letter-spacing: 0.3px; box-shadow: 0 0 0 1.5px rgba(8, 8, 10, 0.55); }
.cr-rv.facil { background: #1d9a63; } .cr-rv.media { background: #b98314; } .cr-rv.dificil { background: #cf2537; }
.cr-est { position: absolute; top: -5px; right: -9px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; font: 800 12px/18px 'Barlow'; text-align: center; box-shadow: 0 0 0 1.5px rgba(8, 8, 10, 0.55); }
.cr-est.no { font-size: 9.5px; letter-spacing: 0.3px; }
.cr-est.ok { background: var(--sube); color: #0b1a10; display: inline-flex; align-items: center; justify-content: center; } .cr-est.ok .ic { width: 12px; height: 12px; stroke-width: 3; }
.cr-est.mal { background: var(--rojo); font-size: 15px; } .cr-est.duda { background: var(--oro); color: #111; } .cr-est.sup { background: rgba(8, 8, 10, 0.9); color: var(--oro); font-size: 9.5px; letter-spacing: 0.3px; }
.cromo.baja-c .ava { filter: grayscale(1) brightness(0.7); }
.cromo.vacio-c .cr-hueco { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.5); font: 600 28px var(--cond); color: rgba(255, 255, 255, 0.8); }
.cromo.vacio-c .cr-nom { background: rgba(238, 28, 60, 0.85); }
.cr-ent { position: absolute; left: 12px; bottom: 14px; z-index: 1; }
.cromo.chico { flex: none; width: 66px; }
.cromo.chico .ava.cr { width: 44px; height: 44px; } .cromo.chico .ava .ini { font-size: 15px; }
.cromo.chico .cr-nom { font-size: 11.5px; }
.banquillo { margin-top: 10px; padding: 10px 6px 12px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); }
.banq-t { margin: 0 6px 8px; font: 700 13.5px 'Barlow'; letter-spacing: 1.3px; text-transform: uppercase; color: var(--texto2); } .banq-t span { color: var(--apagado); margin-left: 4px; }
.banq-l { display: flex; gap: 6px; overflow-x: auto; padding: 6px 4px 2px 14px; scrollbar-width: none; } .banq-l::-webkit-scrollbar { display: none; }
.banq-l .cr-dato { background: var(--plano3); }
.puestos-c { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.pz { padding: 4px 9px; border-radius: 8px; background: var(--plano2); font: 600 13px 'Barlow'; color: var(--texto2); }
.pz b { margin-right: 2px; font: 700 13.5px var(--cond); color: var(--texto); }
.pz.p1 b { color: var(--por); } .pz.p2 b { color: var(--def); } .pz.p3 b { color: var(--med); } .pz.p4 b { color: var(--del); }
.pz.falta { background: var(--rojo-s); color: var(--rojo-l); } .pz.sobra { color: var(--oro); }
.leyenda { white-space: nowrap; } .leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 4px 0 2px; vertical-align: -1px; }
.leyenda i + i, .leyenda i:not(:first-child) { margin-left: 8px; }
.leyenda i.facil { background: #1d9a63; } .leyenda i.media { background: #b98314; } .leyenda i.dificil { background: #cf2537; }
/* lo difícil que es el rival, en el texto y en el calendario de la ficha */
.niv { font-weight: 600; } .niv.facil { color: var(--sube); } .niv.media { color: var(--oro); } .niv.dificil { color: var(--baja); }
/* el calendario de riesgo de la ficha: sus próximos partidos con el veredicto */
.cal-riesgo { margin: 14px 0 6px; padding: 12px 12px 10px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); }
.cal-riesgo.duro { border-color: rgba(207, 37, 55, 0.45); }
.cal-riesgo.favorable { border-color: rgba(29, 154, 99, 0.45); }
.cr-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-cab b { font: 700 18px var(--cond); text-transform: uppercase; letter-spacing: 0.3px; }
.cal-riesgo.duro .cr-cab b { color: var(--rojo-l); } .cal-riesgo.favorable .cr-cab b { color: var(--sube); }
.cr-r { font: 600 13px 'Barlow'; padding: 3px 9px; border-radius: 99px; background: var(--plano3); color: var(--texto2); white-space: nowrap; }
.cr-r.alto { background: var(--baja-s); color: var(--baja); } .cr-r.bajo { background: var(--sube-s); color: var(--sube); } .cr-r.medio { background: var(--oro-s); color: var(--oro); }
.cr-txt { margin: 6px 0 10px; font-size: 14px; line-height: 1.4; color: var(--texto2); }
.cr-lista { display: flex; flex-direction: column; gap: 4px; }
.cr-p { display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px 50px; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--plano2); border-left: 3px solid var(--plano3); }
.cr-p.facil { border-left-color: #1d9a63; } .cr-p.media { border-left-color: #b98314; } .cr-p.dificil { border-left-color: #cf2537; }
.cr-p > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cr-p small { font-size: 12.5px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-j { font: 700 15px var(--cond); }
.cr-ri b { font: 700 15.5px var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-n { text-align: right; align-items: flex-end; }
.cr-n b { font: 700 15.5px var(--cond); font-variant-numeric: tabular-nums; }
.cr-h2h { display: flex; gap: 3px; margin-top: 4px; }
.cr-h2h i { width: 18px; height: 18px; border-radius: 4px; font: 700 12px/18px 'Barlow'; font-style: normal; text-align: center; background: var(--plano3); color: var(--texto2); }
.cr-h2h i.h-V { background: var(--sube-s); color: var(--sube); }
.cr-h2h i.h-D { background: var(--baja-s); color: var(--baja); }
.cr-ley { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--apagado); }
.cr-consejo { margin: 10px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; }
.cargando-ia .p2 { margin-top: 10px; font-size: 13px; color: var(--apagado); }

/* ---------- hojas que suben ---------- */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 50; opacity: 0; transition: opacity 0.2s; }
.velo.on { opacity: 1; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 620px; margin: 0 auto; max-height: 92vh; overflow-y: auto;
  background: var(--plano); border-radius: 22px 22px 0 0; border-top: 3px solid var(--rojo);
  padding: 8px 16px calc(26px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); overscroll-behavior: contain;
}
.hoja.on { transform: none; }
.asa { width: 40px; height: 4px; border-radius: 2px; background: var(--plano3); margin: 0 auto 10px; }
.hoja-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hoja-cab h2 { flex: 1; margin: 0; font: 700 26px/1.05 var(--cond); text-transform: uppercase; }
.ficha-top { display: flex; gap: 16px; align-items: center; margin: 4px 0 12px; }
.ficha-top h2 { margin: 0; font: 700 32px/1 var(--cond); text-transform: uppercase; }
.ficha-top .s { color: var(--texto2); font-size: 14.5px; margin-top: 4px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.valor-g { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.valor-g .v { font: 700 44px/1 var(--cond); }
.valor-g .d { font: 600 16px var(--cond); }
.aviso-ficha { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--rojo-s); margin: 10px 0; font-size: 15px; }
.aviso-ficha.verde { background: var(--sube-s); } .aviso-ficha.oro { background: var(--oro-s); } .aviso-ficha.azul { background: var(--azul-s); }
.aviso-ficha .ic { color: var(--rojo-l); margin-top: 1px; }
.aviso-ficha.verde .ic { color: var(--sube); } .aviso-ficha.oro .ic { color: var(--oro); } .aviso-ficha.azul .ic { color: var(--azul); }
.ajuste { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.ajuste:last-child { border-bottom: 0; }
.ajuste .c { flex: 1; min-width: 0; }
.ajuste .c b { font-weight: 600; display: block; }
.ajuste .c span { font-size: 13.5px; color: var(--texto2); }
.ajuste select, .ajuste input[type=time] { background: var(--plano2); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; max-width: 48%; flex: none; }
.interr { width: 48px; height: 28px; border-radius: 14px; background: var(--plano3); position: relative; flex: none; transition: background 0.18s; }
.interr::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.18s; }
.interr.on { background: var(--rojo); }
.interr.on::after { transform: translateX(20px); }
pre.diag { white-space: pre-wrap; word-break: break-word; font: 11.5px/1.45 ui-monospace, monospace; color: var(--texto2); background: var(--plano2); padding: 12px; border-radius: 12px; max-height: 360px; overflow: auto; }
.fuentes { display: flex; flex-wrap: wrap; gap: 6px; }
.fuentes button { font-size: 13.5px; padding: 5px 9px; border-radius: 7px; background: var(--plano2); color: var(--texto2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- chat (pestaña) ---------- */
.chat { padding-bottom: 90px; }
.msg { margin: 14px 0; font-size: 16px; line-height: 1.5; }
.msg.yo { margin-left: auto; max-width: 86%; background: var(--plano2); border: 1px solid var(--linea); padding: 10px 14px; border-radius: 16px 16px 4px 16px; width: fit-content; }
.msg.ia { border-left: 3px solid var(--rojo); padding-left: 12px; }
.msg.ia p { margin: 0 0 8px; } .msg.ia ul { margin: 4px 0 8px; padding-left: 20px; } .msg.ia li { margin: 3px 0; }
.msg .quien-ia { font: 700 13px 'Barlow'; letter-spacing: 1px; text-transform: uppercase; color: var(--rojo-l); margin-bottom: 4px; }
.escribe { position: fixed; left: 0; right: 0; bottom: var(--nav-h, calc(62px + env(safe-area-inset-bottom))); z-index: 25; background: var(--fondo); border-top: 1px solid var(--linea); }
.escribe-in { max-width: 620px; margin: 0 auto; display: flex; gap: 10px; padding: 10px 16px; }
.escribe textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; min-height: 46px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea); background: var(--plano2); outline: none; font-size: 16px; line-height: 1.3; }
.escribe textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escribe button { width: 46px; height: 46px; border-radius: 14px; background: var(--rojo); color: #fff; display: grid; place-items: center; flex: none; align-self: flex-end; }
.escribe-in { gap: 8px; }
.escribe button.micro { background: var(--plano3); color: var(--texto); }
/* fotos y capturas para la IA */
.escribe button:disabled { opacity: 0.4; }
.adjuntos { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; overflow-x: auto; }
.adjuntos:empty { display: none; }
.adj { position: relative; flex: none; width: 58px; height: 58px; border-radius: 10px; background: var(--plano2); border: 1px solid var(--linea); }
.adj img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.escribe .adj button { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--plano3); color: var(--texto); border: 1px solid var(--fondo); }
.escribe .adj button .ic { width: 13px; height: 13px; }
.adj.cargando { display: grid; place-items: center; }
.adj.cargando i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--plano3); border-top-color: var(--rojo); animation: gira 0.8s linear infinite; }
.adj-txt { font-size: 13px; color: var(--apagado); white-space: nowrap; }
.chat.con-adj { padding-bottom: 170px; }
.msg.yo.con-fotos { padding: 6px; }
.msg.yo.con-fotos > div:not(.msg-fotos) { padding: 4px 8px 2px; }
.msg-fotos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.msg-fotos button { display: block; border-radius: 12px; overflow: hidden; background: var(--plano3); }
.msg-fotos img { display: block; height: 150px; max-width: 220px; object-fit: cover; }
.msg-fotos button:only-child img { height: auto; max-height: 260px; max-width: 100%; }
.visor { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.visor img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.visor p { color: var(--texto2); font-size: 14px; margin: 0; text-align: center; }
.visor-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--plano3); color: var(--texto); display: grid; place-items: center; }
body.soltando::after { content: 'Suelta la imagen para mandársela a la IA'; position: fixed; inset: 12px; z-index: 150; border: 2px dashed var(--rojo); border-radius: 18px; background: rgba(8, 8, 10, 0.85); color: var(--texto); font: 600 18px var(--cond); display: grid; place-items: center; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .adj.cargando i { animation: none; } }
.notas { margin: 6px 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--oro-s); }
.notas summary { display: flex; align-items: center; gap: 8px; font: 600 14px 'Barlow'; color: var(--oro); list-style: none; cursor: pointer; }
.notas summary::-webkit-details-marker { display: none; }
.notas summary .ic { width: 18px; height: 18px; }
.nota { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0 2px; border-top: 1px solid rgba(255, 197, 71, 0.15); margin-top: 8px; font-size: 14.5px; }
.nota span { flex: 1; } .nota small { display: block; color: var(--apagado); font-size: 13.5px; margin-top: 2px; }
.nota button { color: var(--apagado); } .nota button .ic { width: 18px; height: 18px; }
.apuntado { display: flex; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: var(--oro-s); color: var(--texto); font-size: 14px; }
.apuntado > .ic { width: 18px; height: 18px; color: var(--oro); flex: none; margin-top: 1px; }
.apuntado b { color: var(--oro); }
.apuntado .btn { margin-top: 8px; display: flex; }
.sugerencias { display: grid; gap: 8px; margin: 10px 0; }
.sugerencias button { padding: 12px 14px; border-radius: 12px; background: var(--plano); border: 1px solid var(--linea); color: var(--texto); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.sugerencias button .ic { color: var(--rojo-l); width: 18px; height: 18px; }
.pensando { display: inline-flex; gap: 5px; padding: 8px 0; }
.pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--rojo-l); animation: late 1s infinite; }
.pensando i:nth-child(2) { animation-delay: 0.15s; } .pensando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes late { 50% { opacity: 0.25; transform: translateY(-3px); } }

/* ---------- pantallas completas ---------- */
.pantalla { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 24px calc(40px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; }
.pantalla .logo { width: 64px; height: 64px; }
.pantalla h1 { font: 700 54px/0.92 var(--cond); text-transform: uppercase; margin: 22px 0 12px; }
.pantalla h1 span { color: var(--rojo); }
.pantalla p { color: var(--texto2); font-size: 16.5px; margin: 0 0 14px; }
.lista-ok { margin: 16px 0 28px; padding: 0; list-style: none; }
.lista-ok li { display: flex; gap: 10px; margin: 10px 0; color: var(--texto2); }
.lista-ok .ic { color: var(--rojo-l); margin-top: 1px; }
.cargando .logo { animation: late 1.4s ease-in-out infinite; }
.pasos-c { margin-top: 20px; }
.pasos-c div { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--apagado); font-size: 15.5px; }
.pasos-c div.hecho { color: var(--texto2); }
.pasos-c div.hecho .ic { color: var(--sube); }
.pasos-c div.ahora { color: var(--texto); }
.pasos-c div .ic { width: 18px; height: 18px; }
.tostada { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); z-index: 70; background: var(--plano3); color: var(--texto); padding: 11px 16px; border-radius: 12px; font-size: 14.5px; opacity: 0; transition: all 0.2s; max-width: calc(100% - 32px); text-align: center; }
.tostada.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 370px) { .marcador .col .v { font-size: 25px; } .plan-titular { font-size: 25px; } .titulo { font-size: 30px; } }

/* tus jugadores en venta y sus ofertas */
.venta { border-bottom: 1px solid var(--linea); padding-bottom: 12px; }
.venta .fila { border-bottom: 0; padding-bottom: 6px; }
.ofertas { margin-left: 64px; display: grid; gap: 6px; }
.oferta { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 7px 10px; border-radius: 9px; background: var(--plano); }
.oferta .de { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oferta .de.liga { color: var(--rojo-l); }
.oferta .cifra { font-size: 15px; }
.oferta .apag { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; }
.oferta .apag .ic { width: 13px; height: 13px; }

/* titulares de prensa */
.noticia { display: block; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.noticia:last-child { border-bottom: 0; }
.noticia .tit { display: block; font-size: 15.5px; line-height: 1.35; color: var(--texto); }
.noticia .meta { display: block; font-size: 13.5px; color: var(--apagado); margin-top: 3px; }

/* ---------- novedades contadas bajando (presentacion.js) ---------- */
body.con-nv { overflow: hidden; }
.nv { --nv-acc: #ee1c3c; position: fixed; inset: 0; z-index: 200; background: var(--fondo); color: var(--texto); overflow: hidden; }
.nv-luz { position: absolute; inset: -20% -30% auto; height: 80%; pointer-events: none; background: radial-gradient(closest-side, rgba(238, 28, 60, 0.3), transparent); background: radial-gradient(closest-side, color-mix(in srgb, var(--nv-acc) 34%, transparent), transparent); opacity: 0.55; transition: background 0.6s; filter: blur(10px); }
.nv-barra { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: var(--nv-acc); transform-origin: left; transform: scaleX(0); transition: background 0.6s; }
.nv-cab { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; background: linear-gradient(var(--fondo) 55%, transparent); }
.nv-cab .logo { width: 26px; height: 26px; }
.nv-cab b { font: 700 17px var(--cond); letter-spacing: 0.6px; text-transform: uppercase; flex: 1; }
.nv-cab button { padding: 7px 14px; border-radius: 10px; background: var(--plano2); font: 600 14px 'Barlow'; color: var(--texto2); }
.nv-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; outline: none; scrollbar-width: none; }
.nv-scroll::-webkit-scrollbar { display: none; }
.nv-heroe { min-height: 100%; display: grid; place-items: center; padding: 90px 20px 40px; text-align: center; }
.nv-heroe-in { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.nv-eti { margin: 0 0 18px; font: 700 13px 'Barlow'; letter-spacing: 2px; text-transform: uppercase; color: var(--rojo-l); }
/* el número de versión, como un marcador: cada cifra en su casilla, que cae al abrir */
.nv-num { display: flex; align-items: flex-end; gap: 8px; margin: 0; perspective: 600px; font: 700 clamp(78px, 24vw, 132px)/1 var(--cond); }
.nv-num .dg { position: relative; display: grid; place-items: center; min-width: 0.66em; height: 1.18em; padding: 0 0.06em; border-radius: 16px; background: linear-gradient(#1f1f26, #111115 50%, #18181d 50%, #0f0f13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in srgb, var(--nv-acc) 22%, transparent); color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--nv-acc) 55%, transparent); transform-origin: 50% 0; animation: nv-cae 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; animation-delay: calc(0.15s + var(--i) * 0.12s); }
.nv-num .dg::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, 0.55); }
.nv-num .pt { width: 0.13em; height: 0.13em; margin: 0 0.02em 0.16em; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 18px var(--rojo); animation: nv-sale 0.4s ease both 0.4s; }
@keyframes nv-cae { from { transform: rotateX(-95deg) translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nv-sale { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.nv-lema { margin-top: 26px; animation: nv-sube 0.6s ease both 0.75s; }
.nv-lema h2 { margin: 0; font: 700 clamp(26px, 7.5vw, 38px)/1.1 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; }
.nv-lema p { margin: 10px 0 0; color: var(--texto2); font-size: 15px; }
@keyframes nv-sube { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.nv-baja { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--apagado); font: 600 13px 'Barlow'; letter-spacing: 1.5px; text-transform: uppercase; animation: nv-sube 0.6s ease both 1.1s; }
.nv-baja svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; animation: nv-bota 1.6s ease-in-out infinite; }
@keyframes nv-bota { 50% { transform: translateY(6px); } }
.nv-cap { min-height: 92%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 60px 24px; text-align: center; }
/* el cromo de cada novedad */
.nv-cromo { position: relative; width: min(250px, 70vw); aspect-ratio: 4 / 4.2; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #1d1d24, #101014); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--acc) 18%, transparent); will-change: transform, opacity; }
.nv-cromo::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--acc); }
.nv-cromo .dib { flex: 1; width: 100%; padding: 26px 18px 6px; --dl: #f4f2f3; }
.nv-cromo-pie { display: flex; justify-content: space-between; padding: 10px 16px 13px; background: rgba(0, 0, 0, 0.35); font: 700 13px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--acc); }
.nv-cromo-pie span + span { color: var(--apagado); }
.dib .d-l { fill: none; stroke: var(--dl, var(--texto)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dib .d-al { fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dib .d-a { fill: var(--acc); }
.dib .d-s { fill: var(--acc); opacity: 0.16; }
.dib .d-w { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dib .d-t { font: 700 26px var(--cond); fill: #fff; text-anchor: middle; }
.dib .d-tl { fill: var(--dl, var(--texto)); }
.nv-txt { max-width: 480px; display: flex; flex-direction: column; align-items: center; }
.nv-tipo { display: inline-block; padding: 3px 9px; border-radius: 7px; font: 700 13px 'Barlow'; letter-spacing: 1.2px; text-transform: uppercase; background: var(--rojo-s); color: var(--rojo-l); }
.nv-tipo.mejora { background: var(--azul-s); color: var(--azul); }
.nv-tipo.arreglo { background: var(--sube-s); color: var(--sube); }
.nv-txt h2 { margin: 12px 0 0; font: 700 clamp(30px, 9vw, 44px)/1.05 var(--cond); text-transform: uppercase; letter-spacing: 0.2px; }
.nv-txt h2 span { display: inline-block; will-change: transform, opacity; }
.nv-txt p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--texto2); }
.nv-txt .btn { margin-top: 18px; }
.nv-fin { min-height: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px calc(60px + env(safe-area-inset-bottom)); text-align: center; }
.nv-fin-logo .logo { width: 64px; height: 64px; filter: drop-shadow(0 0 24px rgba(238, 28, 60, 0.45)); }
.nv-fin h2 { margin: 6px 0 0; font: 700 40px var(--cond); text-transform: uppercase; }
.nv-fin p { margin: 0 0 10px; color: var(--texto2); max-width: 320px; }
.nv-fin .btn { min-width: 220px; }
.nv-enlace { margin-top: 4px; padding: 8px; font: 600 15px 'Barlow'; color: var(--rojo-l); }
.nv.quieta .nv-num .dg, .nv.quieta .nv-num .pt, .nv.quieta .nv-lema, .nv.quieta .nv-baja, .nv.quieta .nv-baja svg { animation: none; }
/* la lista de todas las versiones (Ajustes → Novedades) */
.nvl { padding: 14px 0 6px; border-top: 1px solid var(--linea); }
.nvl:first-of-type { border-top: 0; }
.nvl-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.nvl-cab b { font: 700 22px var(--cond); color: var(--rojo-l); }
.nvl-cab span { font: 700 17px var(--cond); text-transform: uppercase; }
.nvl-cab small { width: 100%; color: var(--apagado); font-size: 13px; }
.nvl-c { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.nvl-c .nv-tipo { flex: none; min-width: 86px; text-align: center; margin-top: 2px; }
.nvl-c b { font-weight: 600; }
.nvl-c p { margin: 3px 0 0; color: var(--texto2); font-size: 14.5px; }

/* un paso del plan que la app descarta (pagar muchísimo más de lo que vale) */
.paso-op.descartada .op { opacity: 0.6; border-style: dashed; }
.paso-op.descartada .num { border-color: var(--plano3); color: var(--apagado); background: none; }
.paso-op.descartada .imp { text-decoration: line-through; }
.aviso-op.mal { color: var(--baja); }

/* los datos que respaldan cada paso y lo que la IA ha mirado y descartado */
.claves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.claves span { padding: 3px 8px; border-radius: 7px; background: var(--plano2); font: 600 13.5px 'Barlow'; color: var(--texto2); }
.descartes { margin: 14px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--plano); border: 1px solid var(--linea); }
.descartes summary { display: flex; align-items: center; gap: 8px; font: 600 14.5px 'Barlow'; color: var(--texto2); list-style: none; cursor: pointer; }
.descartes summary::-webkit-details-marker { display: none; }
.descartes summary .ic { width: 18px; height: 18px; }

/* la previa del próximo partido en la ficha */
.previa { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.previa span { padding: 5px 9px; border-radius: 9px; background: var(--plano2); font-size: 13px; color: var(--texto2); }
.previa b { color: var(--texto); font-family: var(--cond); font-size: 14.5px; }

/* ---------- la pantalla de carga ---------- */
/* la pantalla de carga: la camiseta se llena de rojo según avanza; debajo (al lado, en el ordenador), los pasos.
   La de arranque (index.html, «splash») es solo el logo mientras se abre la app */
.carga { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: calc(28px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(120% 60% at 50% 18%, rgba(238, 28, 60, 0.16), transparent 62%), var(--fondo); }
.escritorio #app:has(> .carga) { padding-left: 0; }
.carga-in { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px; }
.carga-izq { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cc { width: 132px; height: 132px; overflow: visible; filter: drop-shadow(0 14px 30px rgba(238, 28, 60, 0.32)); }
.cc-vacia { fill: #1c1c22; stroke: #34343d; stroke-width: 2; }
.cc-llena { transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); }
.cc-ola { fill: var(--rojo); animation: cc-ola 2.2s linear infinite; }
@keyframes cc-ola { to { transform: translateX(-50px); } }
.carga-wm { margin-top: 14px; font: 700 15px var(--cond); letter-spacing: 3px; text-transform: uppercase; color: var(--texto2); }
.carga-wm b { font-weight: 700; color: var(--rojo-l); }
.carga-t { margin: 10px 0 16px; font: 700 clamp(28px, 8vw, 38px)/1.02 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; }
.carga-t span { display: block; color: var(--rojo-l); }
.carga-barra { width: 100%; height: 8px; border-radius: 5px; background: var(--plano3); overflow: hidden; }
.carga-barra i { display: block; height: 100%; border-radius: 5px; background: var(--rojo); transition: width 0.6s cubic-bezier(0.3, 0.8, 0.3, 1); }
.carga-pct { width: 100%; display: flex; justify-content: space-between; margin-top: 8px; font: 600 15px var(--cond); color: var(--texto2); }
.carga-pct b { color: var(--texto); font-weight: 700; }
.carga-pasos { list-style: none; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; }
.carga-pasos li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14.5px; color: var(--apagado); }
.carga-pasos li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carga-pasos li > i { flex: none; width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; background: var(--plano3); }
.carga-pasos li .ic { flex: none; width: 16px; height: 16px; color: var(--sube); }
.carga-pasos li.ok { color: var(--texto2); }
.carga-pasos li.ya { color: var(--texto); font-weight: 600; }
.carga-pasos li.ya > i { width: 14px; height: 14px; margin: 0 1px; background: none; border: 2px solid var(--rojo-l); border-right-color: transparent; animation: gira 0.8s linear infinite; }
.carga-pasos li small { margin-left: auto; flex: none; font: 600 13px var(--cond); color: var(--oro); }
.carga-consejo { padding: 14px 16px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); }
.carga-consejo .et { display: flex; align-items: center; gap: 6px; font: 700 14.5px 'Barlow'; color: var(--oro); }
.carga-consejo .et .ic { width: 17px; height: 17px; }
.carga-consejo p { margin: 6px 0 0; min-height: 46px; font-size: 16px; line-height: 1.45; color: var(--texto2); transition: opacity 0.35s, transform 0.35s; }
.carga-consejo p.sale { opacity: 0; transform: translateY(6px); }
.carga-abre { margin: 18px 0 0; font-size: 16px; color: var(--texto2); }
.carga.mal .cc { filter: none; }
.carga.mal .cc-llena { display: none; }
.carga.mal .carga-t span { color: var(--texto); }
.carga .error-c { width: 100%; text-align: left; }
.carga-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
/* en el ordenador: la camiseta y el título a la izquierda, los pasos y el consejo a la derecha */
@media (min-width: 1000px) {
  .carga-in { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .carga.splash .carga-in { display: flex; max-width: 440px; }
  .cc { width: 220px; height: 220px; }
  .carga-wm { font-size: 18px; margin-top: 18px; }
  .carga-t { font-size: 48px; margin: 14px 0 22px; }
  .carga-der { display: flex; flex-direction: column; gap: 18px; }
  .carga-pasos { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; gap: 11px; }
  .carga-pasos li { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .carga *, .carga *::before, .carga *::after { animation: none !important; transition: none !important; } }

/* parar la IA */
.cargando-ia .parar-ia { margin-top: 12px; }
.parar-chat { display: flex; justify-content: flex-start; margin: -2px 0 10px; }
.escribe button.parar { background: var(--plano3); color: var(--rojo-l); }

/* 0.2.0: puntos esperados por partes, dinero de los rivales, aciertos */
.pp-partes { display: grid; gap: 6px; margin: 6px 0 8px; }
.pp-p { display: grid; grid-template-columns: 128px 1fr 44px; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto2); }
.pp-p i { display: block; height: 8px; border-radius: 4px; background: var(--plano2); position: relative; overflow: hidden; }
.pp-p i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--sube); border-radius: 4px; }
.pp-p i.neg::after { background: var(--baja); }
.pp-p b { text-align: right; color: var(--texto); font-family: var(--cond); font-size: 15px; }
.pill.estim { background: var(--plano2); color: var(--texto2); border: 1px dashed var(--plano3); }
.aciertos summary b { color: var(--texto); }
/* 0.2.1: la inercia del valor */
.inercia { margin: 10px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--plano); border: 1px solid var(--plano2); }
.inercia.mal { background: var(--baja-s); border-color: rgba(255, 111, 97, 0.35); }
.inercia.ojo { background: var(--oro-s); border-color: rgba(255, 197, 71, 0.35); }
.inercia.bien { background: var(--sube-s); border-color: rgba(47, 209, 143, 0.3); }
.inercia .in-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inercia .in-cab .ic { width: 18px; height: 18px; }
.inercia.mal .in-cab .ic { color: var(--baja); } .inercia.ojo .in-cab .ic { color: var(--oro); } .inercia.bien .in-cab .ic { color: var(--sube); }
.inercia .in-cab .t2 { font-size: 13px; margin-left: auto; }
.inercia .in-barras { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin: 10px 0 4px; }
.inercia .in-b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; min-width: 0; }
.inercia .in-b i { display: block; width: 100%; max-width: 30px; height: calc(var(--h) * 0.42); border-radius: 4px; background: var(--sube); }
.inercia .in-b i.dw { background: var(--baja); }
.inercia .in-b span { font: 600 11.5px var(--cond); color: var(--texto); }
.inercia .in-b em { font: 500 10.5px 'Barlow'; color: var(--apagado); font-style: normal; text-transform: uppercase; }
.inercia p { margin: 6px 0 0; font-size: 14px; color: var(--texto2); }
.inercia p b { color: var(--texto); }
/* 0.2.2: el chat */
.chat-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.chat-acc { display: flex; gap: 8px; align-items: center; flex: none; padding-bottom: 6px; margin-left: auto; }
.chat-acc:empty { display: none; }
.chat-acc .btn .ic { width: 16px; height: 16px; }
.msg .msg-h { font-size: 12.5px; color: var(--apagado); text-align: right; margin-top: 4px; }
.msg .quien-ia { display: flex; align-items: center; gap: 8px; }
.msg .quien-ia span { font: 500 12.5px 'Barlow'; letter-spacing: 0; text-transform: none; color: var(--apagado); }
.msg .copiar-msg { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--apagado); }
.msg .copiar-msg .ic { width: 16px; height: 16px; }
.msg .copiar-msg:active { background: var(--plano2); color: var(--texto); }
.seguir { display: flex; gap: 8px; overflow-x: auto; margin: -4px 0 14px 15px; padding-bottom: 2px; scrollbar-width: none; }
.seguir::-webkit-scrollbar { display: none; }
.seguir button { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--plano); border: 1px solid var(--linea); color: var(--texto2); font-size: 13.5px; white-space: nowrap; }
.seguir button:active { border-color: var(--rojo); color: var(--texto); }
.chat-viejo { align-items: center; }
.chat-viejo-acc { display: flex; gap: 6px; align-items: center; flex: none; }
.chat-acc .btn { height: 38px; margin: 0; align-self: center; }
/* 0.2.2: la pestaña principal */
.saludo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 2px 10px; font-size: 16px; color: var(--texto2); flex-wrap: wrap; }
.saludo b { color: var(--texto); }
.saludo .t2 { font-size: 13px; }
.tiempos { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.tiempos::-webkit-scrollbar { display: none; }
.tiempo { flex: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: var(--plano); border: 1px solid var(--linea); }
.tiempo .ic { width: 18px; height: 18px; color: var(--rojo-l); }
.tiempo div { display: flex; flex-direction: column; line-height: 1.15; }
.tiempo b { font: 600 13.5px 'Barlow'; color: var(--texto); white-space: nowrap; }
.tiempo span { font: 600 13px var(--cond); color: var(--apagado); }
.ahora-ok { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 11px 14px; border-radius: 14px; background: var(--sube-s); border: 1px solid rgba(47, 209, 143, 0.25); font-size: 14px; color: var(--texto2); }
.ahora-ok .ic { width: 18px; height: 18px; color: var(--sube); flex: none; margin-top: 1px; }
.ahora-ok b { color: var(--texto); }
.ahora { display: grid; gap: 8px; }
.ahora-f { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--plano); border: 1px solid var(--linea); border-left: 3px solid var(--rojo); width: 100%; }
.ahora-f.t-vender { border-left-color: var(--baja); } .ahora-f.t-blindar { border-left-color: var(--oro); } .ahora-f.t-clausular { border-left-color: var(--sube); }
.ahora-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--rojo-s); display: grid; place-items: center; flex: none; }
.ahora-ic .ic { width: 18px; height: 18px; color: var(--rojo-l); }
.ahora-f.t-vender .ahora-ic { background: var(--baja-s); } .ahora-f.t-vender .ahora-ic .ic { color: var(--baja); }
.ahora-f.t-blindar .ahora-ic { background: var(--oro-s); } .ahora-f.t-blindar .ahora-ic .ic { color: var(--oro); }
.ahora-f.t-clausular .ahora-ic { background: var(--sube-s); } .ahora-f.t-clausular .ahora-ic .ic { color: var(--sube); }
.ahora-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ahora-c b { font: 600 15px 'Barlow'; color: var(--texto); }
.ahora-c span { font-size: 13.5px; color: var(--texto2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ahora-cu { flex: none; font: 600 13px 'Barlow'; color: var(--apagado); white-space: nowrap; margin-top: 2px; }
.eq-hoy { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--plano); border: 1px solid var(--linea); }
.eq-hoy-t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eq-hoy-t .ic { width: 18px; height: 18px; color: var(--rojo-l); }
.eq-hoy-t b { font: 700 15px 'Barlow'; flex: 1; }
.eq-hoy-t .mas { font: 600 13.5px 'Barlow'; color: var(--rojo-l); }
.chs { display: flex; flex-wrap: wrap; gap: 6px; }
.ch { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; background: var(--plano2); font: 600 13px 'Barlow'; color: var(--texto2); }
.ch .ic { width: 13px; height: 13px; }
.ch.sube { color: var(--sube); background: var(--sube-s); } .ch.baja, .ch.mal { color: var(--baja); background: var(--baja-s); } .ch.duda { color: var(--oro); background: var(--oro-s); }
.eq-hoy-m { margin: 9px 0 0; font-size: 13.5px; color: var(--texto2); }
.eq-hoy-m button { color: var(--texto); }
.eq-hoy-m b { font-family: var(--cond); font-size: 14.5px; }
.liga-c { display: grid; gap: 6px; }
.liga-f { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--plano); border: 1px solid var(--linea); width: 100%; }
.liga-f.yo { background: var(--rojo-s); border-color: rgba(238, 28, 60, 0.35); }
.liga-n { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.liga-n b { font: 600 15px 'Barlow'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-n span { font-size: 13.5px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-p { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.liga-p b { font: 700 18px var(--cond); }
.liga-p span { font: 600 13.5px var(--cond); }
.liga-f .amenaza { flex: none; }
.liga-sep { text-align: center; color: var(--apagado); letter-spacing: 3px; line-height: 0.8; }
.mas-pasos { margin: 4px 0 0; }
.mas-pasos > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 12px; border: 1px dashed var(--plano3); color: var(--texto2); font: 600 14px 'Barlow'; cursor: pointer; }
.mas-pasos > summary::-webkit-details-marker { display: none; }
.mas-pasos > summary .ic { width: 16px; height: 16px; color: var(--rojo-l); }
.mas-pasos[open] > summary { display: none; }
.once-pleg { margin: 18px 0 0; border-radius: 14px; border: 1px solid var(--linea); background: var(--plano); padding: 0 12px; }
.once-pleg > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 2px; cursor: pointer; }
.once-pleg > summary::-webkit-details-marker { display: none; }
.once-pleg > summary .ic { width: 18px; height: 18px; color: var(--rojo-l); }
.once-pleg > summary b { font: 700 18px var(--cond); text-transform: uppercase; letter-spacing: 0.4px; }
.once-pleg > summary span { margin-left: auto; font-size: 13px; color: var(--apagado); }
.once-pleg > summary::after { content: '▾'; color: var(--apagado); margin-left: 6px; transition: transform 0.15s; }
.once-pleg[open] > summary::after { transform: rotate(180deg); }
.once-pleg[open] { padding-bottom: 10px; }
.tab-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--plano3); color: var(--texto2); font: 700 11.5px/18px 'Barlow'; text-align: center; vertical-align: 1px; }
.tab-n.rojo { background: var(--rojo); color: #fff; } .tab-n.verde { background: var(--sube-s); color: var(--sube); }

/* lo que te ha dicho un rival de su dinero */
.dicho { margin: 2px 0 6px; }
.dicho .enlace { background: none; border: 0; padding: 0; color: var(--rojo-l); font: 600 13px 'Barlow'; text-decoration: underline; cursor: pointer; }
.dicho-f { border-radius: 12px; border: 1px dashed var(--plano3); padding: 0 12px; }
.dicho-f > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 0; color: var(--texto2); font: 600 14px 'Barlow'; cursor: pointer; }
.dicho-f > summary::-webkit-details-marker { display: none; }
.dicho-f > summary .ic { width: 16px; height: 16px; color: var(--rojo-l); }
.dicho-in { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dicho-in input { width: 64px; background: var(--plano2); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; outline: none; text-align: right; }
.dicho-in .btn { margin-left: auto; }

/* la versión web: entrar con el código de la app */
a.btn { text-decoration: none; }
.entrar-codigo { text-align: left; background: var(--plano); border: 1px solid var(--linea); border-radius: 16px; padding: 14px; margin: 0 0 10px; }
.entrar-codigo > b { display: flex; align-items: center; gap: 8px; font: 700 17px var(--cond); text-transform: uppercase; letter-spacing: 0.4px; }
.entrar-codigo > b .ic { width: 18px; height: 18px; color: var(--rojo-l); }
.entrar-codigo > span { display: block; color: var(--texto2); font-size: 14px; margin: 6px 0 12px; }
.codigo-in { display: flex; gap: 8px; }
.codigo-in input { flex: 1; min-width: 0; background: var(--plano2); border: 1px solid var(--plano3); border-radius: 12px; padding: 12px 14px; outline: none; font: 700 22px var(--cond); letter-spacing: 3px; text-transform: uppercase; text-align: center; color: var(--texto); }
.codigo-in input:focus { border-color: var(--rojo); }
.sin-app { text-align: left; margin: 12px 0 0; border-radius: 12px; border: 1px dashed var(--plano3); padding: 0 12px; }
.sin-app > summary { list-style: none; padding: 11px 0; color: var(--texto2); font: 600 14px 'Barlow'; cursor: pointer; }
.sin-app > summary::-webkit-details-marker { display: none; }
.sin-app p, .sin-app li { color: var(--texto2); font-size: 14px; }
.sin-app ol { padding-left: 20px; margin: 6px 0 10px; }
.sin-app textarea { display: block; width: 100%; margin: 10px 0 8px; background: var(--plano2); border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font: 13px ui-monospace, monospace; color: var(--texto); resize: vertical; }
.sin-app .btn { margin-bottom: 12px; }
.pantalla a { color: var(--rojo-l); }
/* el código en la app, para escribirlo en el ordenador */
.pasos-web { color: var(--texto2); padding-left: 20px; margin: 4px 0 8px; }
.codigo-grande { text-align: center; font: 700 52px var(--cond); letter-spacing: 8px; color: var(--texto); margin: 10px 0 6px; padding: 14px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); user-select: all; }
.codigo-grande span { color: var(--rojo-l); }

/* ======================= EL ORDENADOR (1100 px o más) =======================
   El marco cambia: la cabecera y la barra de abajo se juntan en el banquillo, una columna fija a la izquierda con la
   liga, las pestañas y los botones; y cada pestaña reparte su contenido en columnas (vistas.js: cols y lista2).
   La clase .escritorio la pone app.js según el ancho, para que el HTML y el CSS cambien a la vez. */
.escritorio { --rail: 264px; }
.escritorio body { overscroll-behavior-y: auto; }
.escritorio #app { max-width: none; margin: 0; padding-left: var(--rail); }

/* el banquillo */
.escritorio .sup {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); z-index: 30;
  flex-direction: column; align-items: stretch; gap: 2px; padding: 26px 14px 18px;
  border-bottom: 0; border-right: 1px solid var(--linea);
  background: linear-gradient(180deg, #16070c 0, #0c0c0f 260px);
}
.escritorio .sup .logo { width: 42px; height: 42px; margin: 0 0 16px 8px; }
.escritorio .sup-liga { flex: none; padding: 0 8px 20px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.escritorio .sup-liga b { font-size: 25px; line-height: 1; white-space: normal; }
.escritorio .sup-liga span { margin-top: 8px; }
.escritorio .sup-btns { flex-direction: column; gap: 0; width: 100%; margin-top: auto; }
.escritorio .sup .b-ico { width: 100%; height: 42px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px; font: 600 15px 'Barlow'; }
.escritorio .sup .b-ico::after { content: attr(aria-label); }
.escritorio .sup .b-ico .ic { width: 20px; height: 20px; }
.escritorio .nav { position: static; background: none; border-top: 0; padding: 0; }
.escritorio .nav-in { flex-direction: column; gap: 2px; max-width: none; }
.escritorio .nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 12px; height: 46px; border-radius: 12px; font: 600 16px 'Barlow'; letter-spacing: 0; text-transform: none; color: var(--texto2); }
.escritorio .nav button::before { top: 11px; bottom: 11px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
.escritorio .nav button.activo { background: var(--rojo-s); color: var(--texto); }
.escritorio .nav .gl { position: static; margin-left: auto; }
.escritorio .nav .ic { width: 21px; height: 21px; }

/* el campo de juego */
.escritorio main { max-width: none; margin: 0; padding: 34px 48px 72px; }
.escritorio .eti { font-size: 13.5px; }
.escritorio .titulo { font-size: 50px; margin: 8px 0 6px; }
.escritorio .entradilla { font-size: 17px; max-width: 70ch; }
.escritorio .tabs { top: 0; margin: 14px 0 18px; padding: 10px 0; }
.escritorio .tabs-in { display: inline-flex; }
.escritorio .tabs button { flex: none; padding: 0 18px; font-size: 16.5px; }
.escritorio .sec { margin-top: 34px; }
.escritorio .sec h2 { font-size: 24px; }
.escritorio .vacio { padding: 40px 10px; }

/* dos columnas: lo principal y al lado una estrecha (sin scroll propio: baja con la página y no se corta) */
.cols-e { display: grid; gap: 48px; align-items: start; }
.cols-e.lado-der { grid-template-columns: minmax(0, 1fr) 400px; }
.cols-e.lado-izq { grid-template-columns: 430px minmax(0, 1fr); }
.cols-e.mitades { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols-e .ce-i, .cols-e .ce-d { min-width: 0; }
.cols-e > div > :first-child { margin-top: 0; }
@media (min-width: 1500px) { .cols-e.lado-der { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; } .cols-e.lado-izq { grid-template-columns: 470px minmax(0, 1fr); gap: 64px; } }

/* las listas de jugadores, a dos columnas; los títulos y textos ocupan las dos */
.lista2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
.lista2 > :not(.fila):not(.venta) { grid-column: 1 / -1; }
.lista2 > .fila:last-child { border-bottom: 1px solid var(--linea); }
.lista2 > .venta { padding: 4px 0 12px; border-bottom: 1px solid var(--linea); }

/* Hoy: el plan respira; las cláusulas a tiro, en rejilla en la columna de la derecha */
.escritorio .saludo { margin-bottom: 6px; }
.escritorio .plan-titular { font-size: 36px; }
.escritorio .plan-sit { font-size: 17px; max-width: 72ch; }
.escritorio .ce-d .carril { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; margin: 0; padding: 0; }
.escritorio .ce-d .tj { width: auto; }
/* los avisos de tiempo (mercado nuevo, se abre…), en varias líneas si no caben */
.escritorio .tiempos { flex-wrap: wrap; overflow: visible; margin: 12px 0 0; padding: 0; }
.escritorio .tiempo { flex: 1 1 auto; }
.escritorio .ce-d .marcador .col .v { font-size: 27px; }
.escritorio .noticias-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.escritorio .noticias-l .noticia:last-child { border-bottom: 1px solid var(--linea); }

/* Equipo: el once más grande */
.escritorio .ce-i .cancha { padding: 26px 8px 22px; gap: 18px; }

/* Pregunta: la conversación en una columna cómoda de leer, centrada en el campo */
.escritorio .chat { max-width: 860px; margin: 0 auto; }
.escritorio .sugerencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.escritorio .escribe { left: var(--rail); bottom: 0; padding-bottom: 8px; }
.escritorio .escribe-in { max-width: 860px; padding: 14px 0; }
.escritorio .adjuntos { max-width: 860px; padding: 12px 0 0; }
.escritorio .msg.yo { max-width: 70%; }

/* las fichas se abren de lado, como un panel, y la página sigue a la vista */
.escritorio .hoja {
  top: 0; bottom: 0; left: auto; right: 0; width: 620px; max-width: calc(100vw - var(--rail)); max-height: none; margin: 0;
  border-radius: 0; border-top: 0; border-left: 3px solid var(--rojo); padding: 26px 30px 40px;
  transform: translateX(100%);
}
.escritorio .hoja.on { transform: none; }
.escritorio .asa { display: none; }
.escritorio .velo { background: rgba(0, 0, 0, 0.5); }

/* avisos abajo a la derecha */
.escritorio .tostada { left: auto; right: 32px; bottom: 32px; transform: translateY(16px); max-width: 420px; text-align: left; }
.escritorio .tostada.on { transform: none; }

/* con ratón: dónde se puede pulsar */
@media (hover: hover) {
  .escritorio .fila:hover .fila-n, .escritorio .liga-f:hover b, .escritorio .noticia:hover .tit { color: var(--rojo-l); }
  .escritorio .nav button:hover:not(.activo), .escritorio .sup .b-ico:hover { background: var(--plano); color: var(--texto); }
  .escritorio .tj:hover, .escritorio .sugerencias button:hover, .escritorio .op:hover { border-color: var(--plano3); }
  .escritorio .tabs button:hover { color: var(--texto); background: var(--plano2); }
}
.escritorio :focus-visible { outline: 2px solid var(--rojo-l); outline-offset: 2px; }

/* la entrada: el texto a la izquierda y la forma de entrar a la derecha */
.escritorio .pantalla { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 88px; align-items: center; padding: 56px 48px; }
.escritorio .pantalla h1 { font-size: 92px; }
.escritorio .pantalla .pant-i > p { font-size: 18px; max-width: 46ch; }
.escritorio .pant-d { padding: 28px; border-radius: 20px; background: linear-gradient(160deg, #1a0910, #101013 60%); border: 1px solid #2c0f17; }
.escritorio .pant-d .entrar-codigo { background: none; border: 0; padding: 0; }
/* la IA sin clave: los pasos en una columna estrecha */
.escritorio .ia-alta { max-width: 640px; }

/* el límite de uso diario: al pasarse, esto tapa la app hasta las 00:00 */
#limite { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); text-align: center; background: radial-gradient(120% 60% at 50% 20%, rgba(238, 28, 60, 0.18), transparent 60%), var(--fondo); }
.lim-in { max-width: 420px; }
.lim-in .logo { width: 104px; height: 104px; filter: drop-shadow(0 14px 30px rgba(238, 28, 60, 0.32)); }
.lim-in h1 { margin: 18px 0 14px; font: 700 42px/1 var(--cond); text-transform: uppercase; }
.lim-in p { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--texto2); }
.lim-in .lim-frase { color: var(--texto); font-weight: 600; }
.lim-in .lim-vuelve { font-size: 15px; color: var(--apagado); }
.lim-in .lim-msg { margin: 18px auto 14px; padding: 12px 16px; border-radius: 14px; background: var(--rojo-s); color: var(--texto); font: 700 22px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; max-width: 340px; }
body.limitado { overflow: hidden; }

/* toques más cómodos: los botones de texto pequeños ganan zona de toque sin cambiar de aspecto */
.banda button, .op-pie button, .sec .mas, .eq-hoy-t .mas, button.rojo, .ia-alta .paso a { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
.op-pie button { padding-left: 6px; padding-right: 6px; margin-left: -6px; }
.campo-modo button { padding: 8px 11px; }

/* la bienvenida */
/* ---------- el tutorial: foco sobre la app y una tarjeta al lado ---------- */
body.en-tour { overflow: hidden; }
.tour { position: fixed; inset: 0; z-index: 90; touch-action: none; }
.tour-foco { position: fixed; border-radius: 16px; box-shadow: 0 0 0 200vmax rgba(4, 4, 6, 0.8); outline: 2px solid rgba(238, 28, 60, 0.9); pointer-events: none;
  transition: left 0.35s cubic-bezier(.2, .8, .2, 1), top 0.35s cubic-bezier(.2, .8, .2, 1), width 0.35s cubic-bezier(.2, .8, .2, 1), height 0.35s cubic-bezier(.2, .8, .2, 1); }
.tour-foco.sin { outline-color: transparent; }
.tour-caja { position: fixed; width: min(380px, calc(100vw - 32px)); background: var(--plano); border: 1px solid var(--linea); border-radius: 18px; padding: 14px 16px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); outline: none; touch-action: pan-y;
  transition: top 0.35s cubic-bezier(.2, .8, .2, 1), left 0.35s cubic-bezier(.2, .8, .2, 1); }
.tour-caja::before { content: ''; position: absolute; left: var(--fx, 50%); width: 12px; height: 12px; background: var(--plano); border: 1px solid var(--linea); transform: translateX(-50%) rotate(45deg); }
.tour-caja.abajo::before { top: -7px; border-right: 0; border-bottom: 0; }
.tour-caja.arriba::before { bottom: -7px; border-left: 0; border-top: 0; }
.tour-caja.centro::before { display: none; }
.tour-x { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--apagado); }
.tour-x .ic { width: 20px; height: 20px; }
.tour-prog { display: flex; gap: 4px; margin: 6px 46px 14px 0; }
.tour-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--plano3); }
.tour-prog i.ya { background: rgba(238, 28, 60, 0.45); }
.tour-prog i.on { background: var(--rojo); }
.tour-logo .logo { display: block; width: 58px; height: 58px; margin: 0 0 10px; }
.tour-txt h3 { font: 700 25px/1.04 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; color: var(--texto); margin: 0 0 7px; }
.tour-txt p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--texto2); }
.tour-btns { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-n { margin-right: auto; font-size: 13px; color: var(--apagado); }
.tour-btns .btn, .tour-lista .btn { margin: 0; display: inline-flex; align-items: center; }
.tour-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tour-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--plano2); }
.tl-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(238, 28, 60, 0.14); color: var(--rojo-l); }
.tl-ic .ic { width: 18px; height: 18px; }
.tour-lista li.ok .tl-ic { background: var(--sube-s); color: var(--sube); }
.tl-t b { display: block; color: var(--texto); font-size: 15px; font-weight: 600; }
.tl-t small { display: block; color: var(--apagado); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.entra-d { animation: tourD 0.28s ease both; }
.entra-i { animation: tourI 0.28s ease both; }
@keyframes tourD { from { opacity: 0; transform: translateX(14px); } }
@keyframes tourI { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) { .tour-foco, .tour-caja { transition: none; } .entra-d, .entra-i { animation: none; } }
.ajuste-tour { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(238, 28, 60, 0.09); border: 1px solid rgba(238, 28, 60, 0.3); text-align: left; color: var(--texto); }
.ajuste-tour > .ic:first-child { width: 22px; height: 22px; flex: none; color: var(--rojo-l); }
.ajuste-tour > span { flex: 1; min-width: 0; }
.ajuste-tour b { display: block; font-size: 15.5px; font-weight: 600; }
.ajuste-tour small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--texto2); }
.ajuste-tour > .ic:last-child { width: 18px; height: 18px; flex: none; color: var(--apagado); }

/* con la app cerrada también se puede actualizar */
.lim-nueva { margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--plano2); border: 1px solid var(--linea); }
.lim-nueva p { margin: 0 0 10px; font-size: 14.5px; color: var(--texto2); }

/* lo que llevas hoy: lo que has hecho de verdad en LaLiga */
.llevas { margin: 0 0 18px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); }
.llevas > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; cursor: pointer; }
.llevas > summary::-webkit-details-marker { display: none; }
.llevas-t { display: inline-flex; align-items: center; gap: 9px; color: var(--texto); font: 700 18px var(--cond); text-transform: uppercase; letter-spacing: 0.4px; }
.llevas-t .ic { width: 19px; height: 19px; color: var(--rojo-l); }
.llevas-n { margin-left: auto; font-size: 13.5px; color: var(--apagado); white-space: nowrap; }
.llevas[open] > summary { border-bottom: 1px solid var(--linea); }
.llevas-vacio { margin: 0; padding: 12px 14px 14px; font-size: 14px; line-height: 1.5; color: var(--texto2); }
.llevas-l { list-style: none; margin: 0; padding: 4px 0; }
.llevas-f { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 14px; text-align: left; }
.ll-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sube-s); color: var(--sube); }
.ll-ic .ic { width: 16px; height: 16px; }
.llevas-l li.curso .ll-ic { background: var(--oro-s); color: var(--oro); }
.llevas-l li.contra .ll-ic { background: var(--baja-s); color: var(--baja); }
.ll-t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--texto); }
.ll-t small { color: var(--apagado); font-size: 12.5px; white-space: nowrap; }
.ll-tag { flex: none; font-size: 12px; font-weight: 600; color: var(--apagado); padding: 3px 8px; border-radius: 999px; background: var(--plano2); }
.ll-tag.plan { color: var(--rojo-l); background: var(--rojo-s); }
.llevas-pie { margin: 0; padding: 4px 14px 13px; font-size: 13px; line-height: 1.45; color: var(--apagado); }
/* los pasos del plan que se ven hechos (o en marcha) en LaLiga */
.paso-liga { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 11px; background: var(--sube-s); font-size: 14px; line-height: 1.4; color: var(--texto); }
.paso-liga .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--sube); }
.paso-liga.curso { background: var(--oro-s); }
.paso-liga.curso .ic { color: var(--oro); }
.paso-op.curso .num { background: var(--oro-s); border-color: var(--oro); color: var(--oro); }
/* quién usa la app (el dueño) */
.quien-res { margin: 0 0 10px; font-size: 15px; color: var(--texto2); }
.quien-res b { color: var(--texto); }
.quien-l { display: grid; }
.quien-f { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.qf-p { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--plano3); }
.quien-f.si .qf-p { background: var(--texto2); }
.quien-f.dentro .qf-p { background: var(--sube); box-shadow: 0 0 0 4px var(--sube-s); }
.qf-c { flex: 1; min-width: 0; display: grid; gap: 2px; }
.qf-c b { font-size: 15.5px; color: var(--texto); }
.qf-c span { font-size: 13.5px; color: var(--apagado); }
.quien-f.no .qf-c b { color: var(--texto2); }
.quien-f small { flex: none; font-size: 12.5px; color: var(--apagado); }
/* las funciones top bloqueadas (hasta los anuncios) */
.bloq { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0; padding: 13px 14px; border-radius: 14px; text-align: left; color: var(--texto);
  background: repeating-linear-gradient(135deg, rgba(255, 197, 71, 0.07) 0 10px, rgba(255, 197, 71, 0.03) 10px 20px), var(--plano2); border: 1px dashed rgba(255, 197, 71, 0.45); }
.bloq-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--oro-s); color: var(--oro); }
.bloq-ic .ic { width: 19px; height: 19px; }
.bloq-c { display: grid; gap: 3px; min-width: 0; }
.bloq-c b { font-size: 15px; }
.bloq-c span { font-size: 13.5px; line-height: 1.45; color: var(--texto2); }
.pill.bloq-p { background: var(--oro-s); color: var(--oro); cursor: pointer; }
.pill.bloq-p .ic { width: 13px; height: 13px; }
.bloq-hoja { text-align: center; padding-bottom: 6px; }
.bloq-hoja .hoja-cab { justify-content: space-between; }
.bloq-grande { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--oro-s); color: var(--oro); margin: 0 0 10px; }
.bloq-grande .ic { width: 32px; height: 32px; }
.bloq-hoja h2 { font: 700 27px/1.05 var(--cond); text-transform: uppercase; margin: 0 0 10px; }
.bloq-hoja p { margin: 0 auto 12px; max-width: 32em; font-size: 15.5px; line-height: 1.5; color: var(--texto2); }
.bloq-hoja p b { color: var(--texto); }
.bloq-hoja .btn { margin-top: 6px; }
.inercia.neutra { background: var(--plano2); border-color: var(--linea); }
.inercia.neutra .in-cab .ic { color: var(--azul); }
/* la web abierta desde un móvil: en Android, la app; en el iPhone, cómo entrar la primera vez */
.entrar-movil { display: grid; gap: 8px; text-align: left; margin: 0 0 12px; padding: 14px; border-radius: 16px; background: var(--rojo-s); border: 1px solid rgba(238, 28, 60, 0.4); }
.entrar-movil > b { display: flex; align-items: center; gap: 8px; font: 700 18px var(--cond); text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto); }
.entrar-movil > b .ic { width: 19px; height: 19px; color: var(--rojo-l); }
.entrar-movil > span { font-size: 14.5px; line-height: 1.5; color: var(--texto2); }
.entrar-movil > span b { color: var(--texto); }
.entrar-movil .btn { margin-top: 4px; }
.entrar-o { margin: 4px 0 8px; font-size: 13.5px; color: var(--apagado); text-align: left; }
.entrar-movil a.btn { color: #fff; }
.entrar-movil a.btn .ic { color: #fff; }
.pant-i .entrar-movil { margin: 14px 0 16px; }
/* las rachas: últimos partidos de cada equipo en bolitas */
.racha { display: inline-flex; gap: 3px; flex: none; }
.racha i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 700 10.5px/1 'Barlow'; font-style: normal; color: #08080a; background: var(--plano3); }
.racha i.r-V { background: var(--sube); }
.racha i.r-E { background: var(--oro); }
.racha i.r-D { background: var(--baja); }
.cr-ri2 { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.cr-ri2 small { flex: 0 1 auto; min-width: 0; }
.cr-su { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--plano2); font-size: 14px; color: var(--texto2); }
.cr-ley b { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: 9.5px; color: #08080a; vertical-align: 1px; }
.cr-ley .ley-V { background: var(--sube); } .cr-ley .ley-E { background: var(--oro); } .cr-ley .ley-D { background: var(--baja); }
.rejilla.rinde .v.sube { color: var(--sube); }
.rejilla.rinde .v.baja { color: var(--baja); }
@media (max-width: 380px) { .racha i { width: 15px; height: 15px; font-size: 9.5px; } .racha { gap: 2px; } }
.cr-p .racha { gap: 2px; }
.cr-p .racha i { width: 14px; height: 14px; font-size: 8.5px; }
.cr-ri2 { gap: 6px; }
.cr-ri2 small { overflow: visible; text-overflow: clip; }
/* si el puesto y el nivel no caben con las bolitas, las bolitas bajan a la línea siguiente */
.cr-ri2 { flex-wrap: wrap; row-gap: 4px; }
.cr-ri2 small { flex: none; white-space: nowrap; }
/* siempre igual: el nombre, debajo el puesto y el nivel, y debajo sus últimos partidos */
.cr-ri2 { flex-direction: column; align-items: flex-start; gap: 4px; }
.cr-p .racha i { width: 16px; height: 16px; font-size: 9.5px; }
/* el calendario en dos líneas: rival, puntos y titularidad; debajo, puesto y nivel con sus últimos partidos a la derecha */
.cal-riesgo .cr-p { grid-template-columns: 48px minmax(0, 1fr) 54px 50px; grid-template-areas: "j rv pt ti" "j nv ra ra"; column-gap: 8px; row-gap: 3px; padding: 8px 10px; }
.cal-riesgo .cr-p > .cr-j { grid-area: j; align-self: center; }
.cr-rv2 { grid-area: rv; min-width: 0; font: 700 15.5px var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-pt, .cr-ti { font-size: 12.5px; color: var(--apagado); text-align: right; white-space: nowrap; }
.cr-pt { grid-area: pt; } .cr-ti { grid-area: ti; }
.cr-pt b, .cr-ti b { font: 700 15.5px var(--cond); color: var(--texto); font-variant-numeric: tabular-nums; }
.cal-riesgo .cr-p > small.cr-nv { grid-area: nv; min-width: 0; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-ra { grid-area: ra; display: flex; justify-content: flex-end; align-items: center; }
.cal-riesgo .cr-p .racha i { width: 16px; height: 16px; font-size: 9.5px; }
.cal-riesgo .cr-p .racha { gap: 3px; }
@media (max-width: 370px) { .cal-riesgo .cr-p { grid-template-columns: 44px minmax(0, 1fr) 50px 46px; column-gap: 6px; } .cal-riesgo .cr-p .racha i { width: 15px; height: 15px; } .cal-riesgo .cr-p .racha { gap: 2px; } }
.cal-riesgo .cr-p { grid-template-columns: 48px minmax(0, 1fr) 60px 54px; }
.cal-riesgo .cr-p > .cr-pt, .cal-riesgo .cr-p > .cr-ti { display: block; line-height: 1.2; }
.cal-riesgo .cr-p > .cr-ra { flex-direction: row; }
@media (max-width: 370px) { .cal-riesgo .cr-p { grid-template-columns: 44px minmax(0, 1fr) 56px 50px; } }
/* con la cuenta atrás delante, lo que se abre desde ella (el código para otro dispositivo) va por encima */
body.limitado .velo { z-index: 110; }
body.limitado .hoja { z-index: 111; }
body.limitado .tostada { z-index: 120; }
.lim-otro { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.lim-otro p { margin: 0 0 10px; font-size: 14.5px; color: var(--texto2); }
/* la guía de la clave de Gemini (clave.js): pasos numerados con un esquema de AI Studio y dónde tocar en rojo */
.gc .entradilla { margin-bottom: 12px; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.gc-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 99px; background: var(--plano2); border: 1px solid var(--linea); font: 600 13.5px 'Barlow'; color: var(--texto); }
.gc-chips .ic { width: 15px; height: 15px; color: var(--sube); }
.gc-vuelta { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 13px; background: var(--rojo-s); border: 1px solid var(--rojo3); color: var(--texto); font-size: 15px; }
.gc-vuelta .ic { color: var(--rojo-l); }
.gc-vuelta b { color: var(--rojo-l); }
.gc-pasos { list-style: none; margin: 0; padding: 0; }
.gc-paso { position: relative; display: flex; gap: 12px; padding: 0 0 22px; }
.gc-paso::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; background: var(--linea); }
.gc-paso:last-child::before { display: none; }
.gc-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rojo); color: #fff; font: 700 17px var(--cond); position: relative; z-index: 1; }
.gc-c { flex: 1; min-width: 0; padding-top: 4px; }
.gc-t { display: block; font: 700 18px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; }
.gc-c p { margin: 5px 0 0; color: var(--texto2); font-size: 15px; line-height: 1.45; }
.gc-c p b { color: var(--texto); }
.gc-abrir { margin-top: 12px; }
.gc-abrir .ic { width: 19px; height: 19px; }
.gc-fila { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.gc-campo { flex: 1; min-width: 0; height: 50px; padding: 0 13px; font: 600 15.5px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: 0.2px; }
.gc-pegar { flex: none; height: 50px; margin: 0; padding: 0 14px; border-radius: 12px; }
.gc-mono { font: 700 0.92em ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--texto); background: var(--plano2); padding: 1px 5px; border-radius: 5px; }
.gc-guardar { margin-top: 10px; }
.gc-paso.resalta .gc-c { animation: gc-luz 1.6s ease-out; border-radius: 12px; }
@keyframes gc-luz { 0%, 30% { box-shadow: 0 0 0 6px var(--rojo-s); background: var(--rojo-s); } 100% { box-shadow: 0 0 0 6px transparent; background: transparent; } }
.gc-dib { display: block; width: 100%; max-width: 380px; height: auto; margin: 12px 0 0; }
.gc-dib .m { fill: var(--plano); stroke: var(--plano3); stroke-width: 1.5; }
.gc-dib .l { fill: none; stroke: var(--plano3); stroke-width: 1.2; }
.gc-dib .p { fill: var(--plano3); }
.gc-dib .u { fill: var(--plano2); }
.gc-dib .ut { fill: var(--apagado); font: 500 9.5px 'Barlow', sans-serif; }
.gc-dib .c { fill: var(--plano2); stroke: var(--plano3); stroke-width: 1; }
.gc-dib .side { fill: var(--plano2); }
.gc-dib .g { fill: var(--plano3); }
.gc-dib .g.on { fill: var(--apagado); }
.gc-dib .t { fill: var(--texto2); font: 500 11px 'Barlow', sans-serif; }
.gc-dib .t.tb { fill: var(--texto); font: 700 14px 'Barlow', sans-serif; }
.gc-dib .t.s { fill: var(--apagado); font-size: 10px; }
.gc-dib .av { fill: var(--azul); }
.gc-dib .av-t { fill: #08080a; font: 700 11px 'Barlow', sans-serif; }
.gc-dib .chk { fill: none; stroke: var(--apagado); stroke-width: 1.4; }
.gc-dib .chk.on { fill: var(--azul); stroke: var(--azul); }
.gc-dib .w { fill: none; stroke: #08080a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gc-dib .b { fill: var(--azul); }
.gc-dib .bt { fill: #08080a; font: 700 10.5px 'Barlow', sans-serif; }
.gc-dib .f { fill: var(--fondo); stroke: var(--plano3); stroke-width: 1; }
.gc-dib .k { fill: var(--texto); font: 600 11px ui-monospace, Menlo, monospace; }
.gc-dib .cp { fill: none; stroke: var(--texto2); stroke-width: 1.4; stroke-linejoin: round; }
.gc-dib .toast { fill: var(--texto); }
.gc-dib .tt { fill: #08080a; font: 600 10px 'Barlow', sans-serif; }
.gc-dib .ring { fill: none; stroke: var(--rojo); stroke-width: 2.4; }
.gc-dib .tap { fill: var(--rojo); opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: gc-tap 1.8s ease-out infinite; }
.gc-dib .tap2 { fill: var(--rojo-l); }
@keyframes gc-tap { 0% { transform: scale(0.6); opacity: 0.5; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.gc-ayuda { margin: 4px 0 0; border-radius: 13px; background: var(--plano); border: 1px solid var(--linea); }
.gc-ayuda summary { display: flex; align-items: center; gap: 8px; padding: 13px 14px; font-weight: 600; cursor: pointer; list-style: none; }
.gc-ayuda summary::-webkit-details-marker { display: none; }
.gc-ayuda summary .ic { width: 19px; height: 19px; color: var(--oro); }
.gc-ayuda dl { margin: 0; padding: 0 14px 6px; }
.gc-ayuda dt { font-weight: 700; font-size: 15px; margin-top: 4px; }
.gc-ayuda dd { margin: 3px 0 12px; color: var(--texto2); font-size: 14.5px; line-height: 1.45; }
.gc-priv { display: flex; gap: 9px; align-items: flex-start; margin: 14px 2px 4px; font-size: 13.5px; line-height: 1.4; color: var(--apagado); }
.gc-priv .ic { width: 16px; height: 16px; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .gc-dib .tap { animation: none; opacity: 0.25; } .gc-paso.resalta .gc-c { animation: none; } }
/* 0.5.0a: el botón de cerrar de las fichas de jugador y rival, solo en el ordenador (en el móvil, el asa y atrás) */
.cerrar-flota { display: none; }
.escritorio .cerrar-flota { display: grid; position: sticky; top: 0; float: right; margin: -8px -12px 0 10px; z-index: 3; background: var(--plano2); border: 1px solid var(--linea); }
/* 0.5.0a: las etiquetas largas de una fila («No lo venderá: se quedaría con…») bajan de línea en vez de sacar la página de la pantalla */
.fila-x .pill { max-width: 100%; white-space: normal; }
/* 0.5.1: las etiquetas de los pasos del plan («Para revender · +200 mil · vender mañana sábado 24») bajan de línea en vez de salirse de la tarjeta */
.op .pill { max-width: 100%; white-space: normal; }
/* 0.5.1: lo que llevas hoy, separado de los chips de arriba; los chips llevan flecha (se tocan) */
.llevas { margin-top: 16px; }
.tiempo .tiempo-ir { width: 14px; height: 14px; color: var(--apagado); margin-left: 2px; }
/* los nombres de jugadores dentro de un texto del plan: se tocan para abrir su ficha */
.enlace-j { display: inline; padding: 0; font: inherit; font-weight: 600; color: var(--texto); text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }

/* el botón del dueño para pasar los avisos a Claude */
.avisos-claude { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.avisos-claude .t2 { flex: 1; min-width: 160px; margin: 0; }
.para-claude { margin-bottom: 16px; }
.paso-compra { margin: 4px 0 0; font-size: 14px; color: var(--texto2); }
.imp-t { font: 600 11.5px 'Barlow'; color: var(--texto2); text-align: right; margin-top: 1px; }
.cargando-av { display: flex; align-items: center; gap: 6px; } .cargando-av .ic { width: 14px; height: 14px; }

/* la jornada en directo */
.vivo-c { background: var(--plano); border: 1px solid var(--sube-s); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.vivo-t { display: flex; align-items: center; gap: 8px; font: 700 16px 'Barlow'; }
.vivo-t b { flex: 1; text-transform: uppercase; letter-spacing: 0.3px; }
.vivo-tot { font: 700 22px 'Barlow Condensed', 'Barlow'; color: var(--sube); }
.vivo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sube); box-shadow: 0 0 0 0 var(--sube); animation: vivo-l 1.8s infinite; flex-shrink: 0; }
@keyframes vivo-l { 0% { box-shadow: 0 0 0 0 rgba(47, 209, 143, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(47, 209, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 209, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .vivo-dot { animation: none; } }
.vivo-s { margin: 4px 0 0; font-size: 13.5px; color: var(--texto2); }
.vv-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vv-j { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: var(--plano2); font: 600 14px 'Barlow'; color: var(--texto); }
.vv-j b { font-weight: 700; } .vv-j b.sube { color: var(--sube); } .vv-j b.baja { color: var(--baja); } .vv-j b.apag { color: var(--texto2); }
.vivo-d { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--sube); font-weight: 700; }
.vivo-d .vivo-dot { width: 6px; height: 6px; }
.tit-b.vivo { box-shadow: inset 0 0 0 1px currentColor; }
.cr-vivo.sube { color: var(--sube); } .cr-vivo.baja { color: var(--baja); }

/* el buscador del Mercado */
.busca-j { display: flex; align-items: center; gap: 8px; background: var(--plano); border: 1px solid var(--plano3); border-radius: 12px; padding: 0 12px; margin: 4px 0 12px; }
.busca-j .ic { width: 18px; height: 18px; color: var(--texto2); flex-shrink: 0; }
.busca-j input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--texto); font: 500 16px 'Barlow'; padding: 12px 0; }
.busca-j:focus-within { border-color: var(--rojo); }
#buscaRes:not(:empty) { margin-bottom: 14px; }
.vivo-c .cancha { margin-top: 10px; }
.cv-forma { position: absolute; top: 12px; left: 14px; font: 700 13px 'Barlow Condensed', 'Barlow'; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.75); z-index: 1; }
.cr-hora { font-weight: 600; opacity: 0.85; }
/* en el campo, con la jornada en juego: los puntos que lleva cada uno, bien a la vista; la hora del que aún no ha jugado */
.cr-dato.vivo-p { font-size: 13px; padding: 1px 8px; }
.cr-dato.vivo-p.sube { background: var(--sube); color: #062015; }
.cr-dato.vivo-p.baja { background: var(--baja); color: #fff; }
.cr-dato.vivo-p.cero { background: #3b3e46; color: #fff; }
.cr-dato.hora { background: rgba(8, 8, 10, 0.85); color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.pp-vivo { display: inline-flex; align-items: center; gap: 6px; } .pp-vivo b { color: var(--sube); }

/* ---------- Directo (directo.js) ---------- */
/* seis pestañas abajo: algo más estrechas */
.nav button { min-width: 0; font-size: 12.5px; letter-spacing: -0.1px; }
.nav button .ic { width: 24px; height: 24px; }
@media (max-width: 360px) { .nav button { font-size: 11.5px; } .nav button .ic { width: 22px; height: 22px; } }
.nav .gl.punto-v { min-width: 0; width: 9px; height: 9px; padding: 0; top: 8px; left: calc(50% + 8px); background: var(--sube); box-shadow: 0 0 0 2px #0d0d10; }
.escritorio .nav .gl.punto-v { margin-left: auto; box-shadow: none; }
.vivo-tot.baja { color: var(--baja); } .vivo-tot.cero { color: var(--texto2); }
.dt-ent { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dt-ent .vivo-dot { margin-right: 2px; }
.dt-act { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; color: var(--rojo-l); font: 600 14px 'Barlow'; }
.dt-act .ic { width: 15px; height: 15px; }
.dt-res { display: flex; align-items: stretch; gap: 14px; margin: 0 0 6px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #0d2a1e 0%, #0d1511 60%, #0d0d10 100%); border: 1px solid rgba(47, 209, 143, 0.22); }
.dt-yo { flex: 1; min-width: 0; }
.dt-yo .et { font: 600 12.5px 'Barlow'; letter-spacing: 1px; text-transform: uppercase; color: var(--apagado); }
.dt-yo .v { font: 700 40px/1 var(--cond); color: var(--sube); margin-top: 2px; }
.dt-yo .v small { font-size: 17px; color: var(--texto2); margin-left: 4px; font-weight: 600; }
.dt-yo .d { font-size: 14px; color: var(--texto2); margin-top: 4px; }
.dt-yo .d b { color: var(--texto); }
.dt-once { display: grid; gap: 4px; align-content: center; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.08); font-size: 13.5px; color: var(--texto2); }
.dt-once span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.dt-once b { font: 700 19px/1 var(--cond); color: var(--texto); min-width: 16px; text-align: right; }
.dt-once span.on b { color: var(--sube); }
/* un partido en la lista */
.pt { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--linea); text-align: left; }
.pt:active { opacity: 0.7; }
.pt-est { flex: none; width: 52px; padding-top: 3px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 13px 'Barlow'; color: var(--texto2); text-align: center; }
.pt-est b { font: 700 15px/1.1 var(--cond); color: var(--texto); letter-spacing: 0.2px; }
.pt-est small { font-size: 12px; color: var(--apagado); }
.pt-est.vivo b { color: var(--sube); }
.pt-est.fin b { color: var(--apagado); text-transform: uppercase; font-size: 13.5px; letter-spacing: 0.6px; }
.pt-eqs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-eq { display: flex; align-items: center; gap: 9px; font: 600 16px 'Barlow'; color: var(--texto2); }
.pt-eq.gana { color: var(--texto); }
.pt-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-g { font: 700 20px/1 var(--cond); color: var(--texto); min-width: 18px; text-align: right; }
.pt.en-juego .pt-g { color: var(--sube); }
.pt-esc { width: 22px; height: 22px; flex: none; object-fit: contain; }
.pt-esc.sin { display: inline-block; border-radius: 50%; background: var(--plano3); }
.pt-esc.g { width: 52px; height: 52px; }
.pt-esc.chico { width: 16px; height: 16px; }
.pt-mios { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pt-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 13px 'Barlow'; padding: 3px 8px; border-radius: 6px; background: var(--rojo-s); color: var(--texto); }
.pt-chip b { font: 700 14px/1 var(--cond); }
.pt-chip.sube b { color: var(--sube); } .pt-chip.baja b { color: var(--baja); } .pt-chip.cero b { color: var(--texto2); }
.pt-chip.banq { background: var(--plano2); color: var(--texto2); }
.pt-mas { align-self: center; font-size: 13px; color: var(--apagado); }
/* la ficha de un partido */
.pf-mar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 16px 10px; border-radius: 16px; background: var(--plano); border: 1px solid var(--linea); }
.pf-eq { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; font: 700 16px/1.15 'Barlow'; text-align: center; }
.pf-eq span { overflow-wrap: anywhere; }
.pf-res { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pf-res b { font: 700 40px/1 var(--cond); letter-spacing: 1px; }
.pf-res b i { font-style: normal; color: var(--apagado); margin: 0 6px; }
.pf-e { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px 'Barlow'; color: var(--texto2); white-space: nowrap; }
.pf-e.vivo { color: var(--sube); }
.pf-jug { display: flex; flex-direction: column; }
.jg { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.jg:last-child { border-bottom: 0; }
.jg-min { width: 40px; flex: none; font: 700 15px var(--cond); color: var(--texto2); text-align: right; }
.jg-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--texto2); }
.jg-ic .ic { width: 18px; height: 18px; }
.jg-ic.gol { color: var(--sube); }
.jg-t { flex: 1; min-width: 0; }
.jg-r { font: 700 14px var(--cond); color: var(--texto); background: var(--plano2); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.tarjeta { display: block; width: 11px; height: 15px; border-radius: 2px; }
.tarjeta.amarilla { background: #ffd23f; } .tarjeta.roja { background: #ff3b47; }
.pf-pts { min-width: 34px; }
.pf-pts.sube { color: var(--sube); } .pf-pts.baja { color: var(--baja); } .pf-pts.cero { color: var(--texto2); }
/* en la ficha de un jugador */
.dt-j .enlace { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 0; color: var(--rojo-l); font: 600 14px 'Barlow'; }
.dt-j .enlace .ic { width: 14px; height: 14px; }
@media (max-width: 370px) { .dt-yo .v { font-size: 34px; } .dt-once { padding-left: 10px; } .pt-est { width: 46px; } .pt-eq { font-size: 15px; } }
/* la ficha de un partido: cada equipo en su campo */
.pf-cab { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; }
.pf-cab b { flex: 1; min-width: 0; font: 700 21px/1.1 var(--cond); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cab span { font-size: 14px; color: var(--apagado); white-space: nowrap; }
.pf-cab .pt-esc { width: 26px; height: 26px; }
.linea-c.seis .cromo { width: 16%; }
.linea-c.seis .ava.cr { width: 46px; height: 46px; }
.linea-c.seis .cr-nom { font-size: 11px; padding: 2px 4px; }
.cr-rv.tuyo { background: var(--rojo); } .cr-rv.suyo { background: #3c3c47; color: #e6e3e8; }
.cr-est.ev { display: inline-flex; align-items: center; justify-content: center; gap: 1px; background: rgba(8, 8, 10, 0.9); }
.cr-est.ev.gol { background: #fff; color: #0b1a10; }
.cr-est.ev .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.cr-est.ev b { font: 800 11px/1 'Barlow'; }
.cr-est.ev .tarjeta { width: 9px; height: 12px; }
.cr-dato.prob { background: rgba(8, 8, 10, 0.85); }
.cr-dato.prob.bien { color: var(--sube); } .cr-dato.prob.duda { color: var(--oro); } .cr-dato.prob.mal { color: var(--baja); }
.cancha.pf-c { padding-left: 14px; padding-right: 10px; }

/* la mudanza de la web (solo en charly10sf.github.io) */
.aviso-mudanza { display: block; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--oro-s); color: var(--oro); font-size: 15px; text-decoration: none; }
.aviso-mudanza b { color: var(--texto); }