/* ═══════════════════════════════════════════════════════════════════════
   QUINIELA MX · Hoja de estilos
   Lenguaje visual: vidrio esmerilado sobre fondo profundo, tipografía
   apretada, esquinas muy redondeadas y movimiento con resorte.
   Todo el color sale de las variables de abajo: cambia ahí y cambia todo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Tema oscuro (el de casa) */
  --bg: #08080a;
  --bg-2: #0d0d11;
  --text: #f5f5f7;
  --text-2: #a1a1aa;
  --text-3: #6b6b74;

  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .085);
  --stroke: rgba(255, 255, 255, .10);
  --stroke-2: rgba(255, 255, 255, .16);

  --accent: #10d98a;
  --accent-2: #06b6d4;
  --accent-ink: #04120c;
  --accent-soft: rgba(16, 217, 138, .14);

  --live: #ff453a;
  --warn: #ffd60a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .38);
  --shadow-3: 0 24px 68px rgba(0, 0, 0, .5);
  --glow: 0 0 0 1px rgba(16, 217, 138, .3), 0 8px 32px rgba(16, 217, 138, .22);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  --blur: saturate(180%) blur(24px);

  /* Curva tipo resorte: el "sabor" del movimiento de toda la página */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --maxw: 1120px;
  --pad: clamp(16px, 4vw, 32px);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f2f2f5;
  --bg-2: #e8e8ee;
  --text: #1d1d1f;
  --text-2: #55555d;
  --text-3: #86868b;

  --glass: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .88);
  --stroke: rgba(0, 0, 0, .08);
  --stroke-2: rgba(0, 0, 0, .14);

  --accent: #00a86b;
  --accent-2: #0891b2;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 168, 107, .12);

  --live: #e5342a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .10);
  --shadow-3: 0 24px 68px rgba(0, 0, 0, .14);
  --glow: 0 0 0 1px rgba(0, 168, 107, .3), 0 8px 28px rgba(0, 168, 107, .18);

  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

/* El `display` de una clase le gana al `hidden` del navegador, y entonces las
   cosas ocultas se ven igual. Esto hace que `hidden` signifique lo que dice. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Para que el ancla no quede escondida bajo la barra pegada */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Cuando el dashboard está abierto, la página pública se queda quieta.
   El único scroll disponible es el de su contenido administrativo. */
html.admin-open,
body.admin-open { overflow: hidden; }

/* ── El candado del cambio de tema ───────────────────────────────────────
   Al cambiar de tema, CADA color de la página cambia a la vez. Y como medio
   sitio tiene transiciones (bordes, botones, tarjetas), sin este candado el
   cambio se ve como una ola: cada cosa morfea su color por su lado durante
   medio segundo. Se siente lento y descompuesto.

   Apagando toda transición durante el instante del cambio, los colores
   brincan de golpe — que es justo lo que se espera de un cambio de tema.
   Las animaciones de hover y demás siguen intactas: la clase dura lo que
   dura un recálculo de estilos y se quita en el acto. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

img { max-width: 100%; display: block; }
svg { width: 100%; height: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--accent-soft); color: var(--text); }

.display {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.grad {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-2);
}

.rule {
  border: 0;
  height: 1px;
  background: var(--stroke);
  margin: 20px 0;
}

.dot-sep { opacity: .4; margin: 0 2px; }

/* ── Fondo: manchas de color a la deriva ────────────────────────────── */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aurora::after {
  /* Grano sutil: le quita el look "plástico" a los degradados */
  content: '';
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.aurora-1 {
  width: 46vw; height: 46vw;
  min-width: 340px; min-height: 340px;
  top: -14%; left: -8%;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  animation: drift-1 26s var(--ease) infinite alternate;
}

.aurora-2 {
  width: 40vw; height: 40vw;
  min-width: 300px; min-height: 300px;
  top: 24%; right: -10%;
  background: radial-gradient(circle, var(--accent-2), transparent 68%);
  animation: drift-2 32s var(--ease) infinite alternate;
}

.aurora-3 {
  width: 36vw; height: 36vw;
  min-width: 260px; min-height: 260px;
  bottom: -12%; left: 32%;
  background: radial-gradient(circle, #8b5cf6, transparent 68%);
  opacity: .3;
  animation: drift-3 38s var(--ease) infinite alternate;
}

[data-theme="light"] .aurora-blob { opacity: .3; }
[data-theme="light"] .aurora-3 { opacity: .18; }

@keyframes drift-1 { to { transform: translate3d(12vw, 8vh, 0) scale(1.15); } }
@keyframes drift-2 { to { transform: translate3d(-10vw, 12vh, 0) scale(1.2); } }
@keyframes drift-3 { to { transform: translate3d(8vw, -10vh, 0) scale(1.1); } }

/* ── Barra superior ─────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px var(--pad);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--stroke);
}

.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}

.brand-mark {
  width: 38px; height: 38px;
  flex: none;
  padding: 8px;
  border-radius: 11px;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-1);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.02rem; font-weight: 750; letter-spacing: -.02em; }
.brand-text small { font-size: .72rem; color: var(--text-3); font-weight: 550; }

/* El carril del menú. En escritorio no hace nada: los 4 caben y las flechas
   se quedan dormidas. Cobra vida solo cuando el contenido no cabe. */
.nav-scroll { position: relative; min-width: 0; }

.nav { display: flex; gap: 4px; }

/* Las flechitas: nacen apagadas y las prende el JS (clases .hay-izq/.hay-der)
   únicamente cuando queda camino hacia ese lado. Al llegar al final se
   desvanecen solas, así nunca invitan a arrastrar hacia la nada.
   El degradado no es adorno: difumina las pastillas por debajo, que es la
   señal de "aquí sigue habiendo más". */
.nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 7px;
  border-radius: 50%;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.7);
  transition: opacity .28s var(--ease), transform .35s var(--ease-back);
}

.nav-arrow-l { left: -4px; }
.nav-arrow-r { right: -4px; }

.nav-scroll.hay-izq .nav-arrow-l,
.nav-scroll.hay-der .nav-arrow-r {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.nav-arrow:active { transform: translateY(-50%) scale(.86); }

/* La niebla de los bordes, del mismo color que la barra para que se funda */
.nav-scroll::before,
.nav-scroll::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 52px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}

.nav-scroll::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 12%, transparent);
}

.nav-scroll::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 12%, transparent);
}

.nav-scroll.hay-izq::before,
.nav-scroll.hay-der::after { opacity: 1; }

.nav a {
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: .875rem;
  font-weight: 550;
  color: var(--text-2);
  transition: color .2s var(--ease), background .2s var(--ease);
}

.nav a:hover { color: var(--text); background: var(--glass-2); }

.theme-btn {
  width: 38px; height: 38px;
  flex: none;
  padding: 9px;
  border-radius: var(--r-full);
  color: var(--text-2);
  border: 1px solid var(--stroke);
  background: var(--glass);
  transition: transform .3s var(--ease-back), color .2s, border-color .2s;
}

.theme-btn:hover { color: var(--text); border-color: var(--stroke-2); transform: scale(1.06); }
.theme-btn:active { transform: scale(.94); }

.theme-btn .ico-moon { display: none; }
[data-theme="light"] .theme-btn .ico-sun { display: none; }
[data-theme="light"] .theme-btn .ico-moon { display: block; }

/* ── Layout general ─────────────────────────────────────────────────── */

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) 96px;
}

/* El freno de las anclas lo pone SOLO `scroll-padding-top` en el <html>
   (arriba). Si además se le pusiera `scroll-margin-top` a la sección, los
   dos se suman y cada sección aterriza con el doble de hueco encima. */
.section { padding-top: clamp(56px, 9vw, 96px); }
.section-narrow { max-width: 880px; margin-inline: auto; }

.section-head { margin-bottom: 28px; max-width: 640px; }

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-head h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); margin-bottom: 10px; }
.section-head p { color: var(--text-2); font-size: 1.02rem; }

.empty {
  padding: 44px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: .94rem;
  border: 1px dashed var(--stroke);
  border-radius: var(--r-lg);
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(44px, 8vw, 84px);
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-full);
  background: var(--glass);
  border: 1px solid var(--stroke);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 18px;
}

.pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: ping 2s var(--ease) infinite;
}

.pill.is-live { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.pill.is-live .pill-dot { background: var(--live); box-shadow: 0 0 0 0 var(--live); }
.pill.is-closed .pill-dot { background: var(--text-3); animation: none; box-shadow: none; }

@keyframes ping {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 7px transparent; opacity: .85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  margin-bottom: 16px;
}

.lede {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--text-2);
  max-width: 46ch;
  margin-bottom: 26px;
}

.lede strong { color: var(--text); font-weight: 650; }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Botones ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-size: .94rem;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .3s var(--ease-back), box-shadow .3s var(--ease), background .2s, opacity .2s;
}

.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--glow);
}

.btn-primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(16, 217, 138, .34); }

/* Apagado, pero VIVO: se ve inactivo y aun así se puede tocar, porque al
   tocarlo te lleva a lo que te falta. Por eso el cursor sigue siendo de
   mano y no el de "prohibido": sí hace algo. */
.btn-primary.is-apagado {
  background: var(--glass-2);
  color: var(--text-3);
  box-shadow: none;
  transform: none;
}

.btn-primary.is-apagado:hover {
  background: var(--glass-2);
  box-shadow: none;
  transform: none;
}

/* Este sí está muerto de verdad: solo mientras se está enviando. */
.btn-primary:disabled {
  background: var(--glass-2);
  color: var(--text-3);
  box-shadow: none;
  cursor: wait;
  transform: none;
}

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--stroke);
  color: var(--text);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.btn-ghost:hover { background: var(--glass-2); border-color: var(--stroke-2); }

.btn-lg { padding: 14px 30px; font-size: 1rem; }

/* ── Tarjeta del hero: cuenta regresiva + bote ──────────────────────── */

.hero-card { padding: 22px; border-radius: var(--r-xl); }

.hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.live-tag {
  font-size: .74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
}

.live-tag.is-live {
  background: color-mix(in srgb, var(--live) 16%, transparent);
  color: var(--live);
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.cd-unit {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.cd-unit b {
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -.04em;
  /* Los números no bailan al cambiar */
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cd-unit small {
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 5px;
}

.cd-sep { color: var(--text-3); font-weight: 700; opacity: .5; }

.cd-note { font-size: .78rem; color: var(--text-3); margin-top: 12px; line-height: 1.45; }

.bote-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.bote-amount {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bote-meta { font-size: .82rem; color: var(--text-3); margin-top: 4px; }

/* ── Tira de costo: el precio de frente, sin letras chiquitas ───────── */

.costo-strip {
  margin-top: clamp(32px, 5vw, 52px);
  padding: 20px clamp(18px, 3vw, 28px);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  flex-wrap: wrap;
}

.costo-total { display: flex; flex-direction: column; gap: 2px; }

.costo-total strong {
  font-size: clamp(2rem, 5.5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.costo-split {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-3);
}

.costo-breakdown {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}

.costo-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.costo-item b {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* Ojo con el `>`: sin él, esto también agarraría el <span> que va DENTRO del
   <b> del monto y partiría "$50" en dos renglones. */
.costo-item > span { display: flex; flex-direction: column; line-height: 1.25; font-size: .88rem; font-weight: 600; }
.costo-item small { font-size: .72rem; color: var(--text-3); font-weight: 500; }
.costo-item small a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.costo-item-fee b { color: var(--text-2); }

.costo-plus { color: var(--text-3); font-weight: 600; }

/* ── Nombre ─────────────────────────────────────────────────────────── */

.name-row {
  padding: 18px clamp(16px, 3vw, 24px);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.name-row label { display: flex; flex-direction: column; gap: 2px; flex: none; }
.name-row label small { font-size: .78rem; color: var(--text-3); }

.name-row input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  font-size: 1rem;
  font-weight: 550;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.name-row input::placeholder { color: var(--text-3); font-weight: 450; }

.name-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ── Tarjeta de partido ─────────────────────────────────────────────── */

.partidos { display: grid; gap: 12px; }

.partido {
  padding: 16px clamp(14px, 2.5vw, 20px);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.partido:hover { border-color: var(--stroke-2); }
.partido.is-picked { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }

/* Cuando el botón te trae hasta aquí, la tarjeta parpadea para que el ojo
   caiga solita en ella y no tengas que buscar cuál te faltó. */
.partido.is-buscado {
  border-color: var(--accent);
  animation: buscado 1.1s var(--ease) 2;
}

@keyframes buscado {
  50% { box-shadow: 0 0 0 5px var(--accent-soft); }
}

.partido-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  color: var(--text-3);
  font-weight: 550;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.partido-meta .meta-date { color: var(--text-2); font-weight: 650; }

.partido-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Los dos equipos se recargan contra el VS del centro, no contra las orillas
   de la tarjeta. En celular no se nota porque no sobra espacio, pero en una
   pantalla de computadora la tarjeta mide ~880px: sin esto, el local se iba
   hasta la esquina izquierda y quedaba un hueco enorme a media tarjeta.
   Pegados al centro se lee como marcador de estadio. */
.team { display: flex; align-items: center; gap: 10px; min-width: 0; justify-content: flex-end; }

/* row-reverse pone el escudo del lado de afuera (espejo del local), y con
   flex-end los ítems se recorren hacia el centro. */
.team-away { justify-content: flex-end; flex-direction: row-reverse; }

.team-logo {
  width: 34px; height: 34px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

.team-name {
  font-size: .98rem;
  font-weight: 650;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .06em;
}

/* Control segmentado: el corazón de la quiniela. 3 toques y ya. */
.picker {
  display: grid;
  grid-template-columns: 1fr .68fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.pick-btn {
  padding: 11px 8px;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-back);
}

.pick-btn small { font-size: .66rem; font-weight: 550; color: var(--text-3); }

/* Cada botón trae el nombre del equipo Y su abreviatura; el CSS enseña el
   que quepa según el ancho (ver el @media de 560px). */
.pick-abbr { display: none; letter-spacing: .04em; }

.pick-btn:hover:not(.is-on):not(:disabled) { background: var(--glass-2); color: var(--text); }
.pick-btn:active:not(:disabled) { transform: scale(.95); }

.pick-btn.is-on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
  transform: scale(1.02);
}

.pick-btn.is-on small { color: var(--accent-ink); opacity: .75; }

.pick-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Cuando ya cerró: se ve el pick pero no se puede tocar */
.partido.is-locked .picker { opacity: .75; }

/* ── Barra de envío ─────────────────────────────────────────────────── */

.submit-bar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-3);
}

.submit-progress { flex: 1; min-width: 160px; }

.progress-track {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  overflow: hidden;
  margin-bottom: 7px;
}

.progress-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .45s var(--ease);
}

.submit-count { font-size: .8rem; color: var(--text-3); font-weight: 550; }
.submit-count b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Avisos ─────────────────────────────────────────────────────────── */

.alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: .92rem;
  font-weight: 550;
  margin-bottom: 16px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert.is-ok { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.alert.is-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.alert.is-err { border-color: color-mix(in srgb, var(--live) 40%, transparent); background: color-mix(in srgb, var(--live) 10%, transparent); }

/* ── En vivo ────────────────────────────────────────────────────────── */

.envivo-list { display: grid; gap: 12px; }

.ev-card {
  padding: 15px clamp(14px, 2.5vw, 20px);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  transition: border-color .3s var(--ease);
}

.ev-card.is-live {
  border-color: color-mix(in srgb, var(--live) 42%, transparent);
  animation: live-breathe 2.6s var(--ease) infinite;
}

@keyframes live-breathe {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 8%, transparent); }
}

.ev-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 92px;
}

.ev-nums {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-nums em { font-style: normal; color: var(--text-3); font-weight: 400; }

.ev-status {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ev-card.is-live .ev-status { color: var(--live); }

.ev-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
  animation: ping 1.6s var(--ease) infinite;
}

/* Marca de si le atinaste o no */
.ev-mine {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.ev-mine.is-hit { background: var(--accent-soft); color: var(--accent); }
.ev-mine.is-miss { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }

/* ── El bote, en grande ─────────────────────────────────────────────────
   Es la razón por la que la gente entra. El resto de la página es de vidrio
   y susurra; esto grita a propósito: es lo único con color sólido. */

.bote-banner {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 38px);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--accent-ink);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-2) 90%, #fff) 0%, transparent 55%),
    linear-gradient(115deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* Un brillo que barre el banner cada tanto, como el reflejo de una moneda */
.bote-banner::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  animation: brillo 5.5s var(--ease) infinite;
  pointer-events: none;
}

@keyframes brillo {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}

.bote-banner-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }

.bote-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 6px;
}

.bote-banner-label svg { width: 15px; height: 15px; }

/* La cifra. Enorme a propósito, y con números de ancho fijo para que al
   subir el bote no bailen los dígitos. */
.bote-cifra {
  display: block;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .18);
}

.bote-pill {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-ink) 12%, transparent);
}

.bote-art {
  position: relative;
  z-index: 1;
  width: clamp(96px, 16vw, 148px);
  flex: none;
  color: var(--accent-ink);
  opacity: .9;
}

/* La alcancía respira y el billete cae, en bucle */
.bote-art .cerdo { animation: respira 4s var(--ease) infinite; transform-origin: 60px 60px; }
.bote-art .billete { animation: cae 4s var(--ease) infinite; }

@keyframes respira { 50% { transform: scale(1.04); } }

@keyframes cae {
  0%, 100% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(16px) rotate(8deg); opacity: 1; }
  60%, 99% { transform: translateY(26px) rotate(14deg); opacity: 0; }
}

/* Chispitas flotando */
.bote-chispas span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-ink);
  opacity: .35;
  animation: flota 6s var(--ease) infinite;
}

.bote-chispas span:nth-child(1) { top: 22%; left: 58%; animation-delay: 0s; }
.bote-chispas span:nth-child(2) { top: 68%; left: 44%; animation-delay: 1.4s; width: 3px; height: 3px; }
.bote-chispas span:nth-child(3) { top: 38%; left: 76%; animation-delay: 2.6s; }
.bote-chispas span:nth-child(4) { top: 78%; left: 66%; animation-delay: 3.8s; width: 3px; height: 3px; }

@keyframes flota {
  0%, 100% { transform: translateY(0) scale(1); opacity: .35; }
  50% { transform: translateY(-14px) scale(1.5); opacity: .8; }
}

/* ── Va ganando ─────────────────────────────────────────────────────── */

.lider-panel {
  margin-bottom: 14px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lider-corona {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 9px;
  border-radius: 12px;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.lider-copy { flex: 1; min-width: 0; }

.lider-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
}

.lider-nombre {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lider-sub { font-size: .84rem; color: var(--text-2); }
.lider-sub b { color: var(--text); font-weight: 700; }

.lider-live {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--live);
  background: color-mix(in srgb, var(--live) 14%, transparent);
}

/* ── Tabla ──────────────────────────────────────────────────────────── */

.tabla-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
}

.tabla-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--stroke);
  transition: background .2s var(--ease);
}

.tabla-row:last-child { border-bottom: 0; }
.tabla-row:hover { background: var(--glass-2); }

.tabla-row.is-head {
  padding: 11px 18px;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--glass-2);
}

.tabla-row.is-me { background: var(--accent-soft); }

.tabla-row.is-leader .t-pos {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
}

.t-pos {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  font-size: .84rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.t-name { font-weight: 650; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.t-badge {
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  color: var(--text-3);
  flex: none;
}

.t-badge.is-paid { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.t-pts { font-size: 1.05rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.t-pts small { font-size: .72rem; color: var(--text-3); font-weight: 550; }

.t-prize { font-size: .86rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── Pronósticos de todos ───────────────────────────────────────────── */

/* 280px es a propósito: con chips de 38px caben 5 escudos por renglón, así
   los 9 picks quedan en dos filas parejas en vez de tres desiguales. */
.todos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.todo-card {
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.todo-card:hover { transform: translateY(-3px); border-color: var(--stroke-2); }

.todo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.avatar {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: .8rem;
  font-weight: 750;
}

.todo-name { font-weight: 650; font-size: .94rem; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-sub { font-size: .74rem; color: var(--text-3); }

/* Solo aparece en las jornadas pasadas: permite ver de un vistazo quién
   liquidó esa quiniela, sin mezclarlo con el flujo de depósito actual. */
.todo-payment {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: var(--r-full);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.15;
}
.todo-payment.is-paid { color: var(--accent); background: var(--accent-soft); }
.todo-payment.is-unpaid { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }

.todo-picks { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cada chip es un pick dibujado: el escudo del equipo por el que le fue.
   Se lee de un vistazo, sin traducir letras en la cabeza. */
.chip {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: .72rem;
  font-weight: 750;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  color: var(--text-2);
  transition: transform .25s var(--ease-back), border-color .25s var(--ease);
  cursor: default;
}

.chip:hover { transform: translateY(-2px) scale(1.06); }

.chip img {
  width: 25px; height: 25px;
  object-fit: contain;
  /* Los escudos traen mil colores; una sombrita los despega del fondo */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25));
}

/* Empate: los dos escudos con una × en medio. Dice "estos dos se reparten"
   sin necesidad de leyenda. */
.chip-empate {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 3px;
}

.chip-empate img { width: 14px; height: 14px; }
.chip-empate i { font-style: normal; font-size: .6rem; color: var(--text-3); font-weight: 700; }

/* Ya que terminó el partido: verde si le atinó, rojo si no. El anillo se ve
   aunque el escudo de adentro sea del color que sea. */
.chip.is-hit {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.chip.is-miss {
  background: color-mix(in srgb, var(--live) 12%, transparent);
  border-color: color-mix(in srgb, var(--live) 60%, transparent);
  opacity: .6;
}

.chip.is-miss img { filter: grayscale(1); }

.todo-locked { font-size: .8rem; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.todo-locked svg { width: 14px; height: 14px; flex: none; }

.section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -2px 0 16px;
}

.section-actions small { font-size: .78rem; color: var(--text-3); }
.btn-pdf { padding: 10px 16px; font-size: .84rem; }

/* ── Por qué $5 ─────────────────────────────────────────────────────── */

.porque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.porque-card { padding: 22px; border-radius: var(--r-lg); }

/* El `display: grid` NO es decorativo, es lo que sostiene el tamaño: un
   <span> es inline por default, y a los inline el navegador les ignora el
   width y el height. Sin esto, el SVG de adentro (que mide 100% del padre)
   no tiene contra qué medirse y se dispara a un tamaño enorme. */
.porque-ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 9px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  margin-bottom: 14px;
}

.porque-card h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.porque-card p { font-size: .88rem; color: var(--text-2); line-height: 1.5; }

.porque-cierre {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-2);
}

.porque-cierre b { color: var(--text); font-weight: 700; }

/* ── Pie ────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--stroke);
  padding: 36px var(--pad);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.footer-brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.footer-brand strong { font-size: 1rem; font-weight: 750; letter-spacing: -.02em; }
.footer-brand span { font-size: .82rem; color: var(--text-3); }
.footer-legal { font-size: .78rem; color: var(--text-3); max-width: 62ch; line-height: 1.55; }
.footer-credit { color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .04em; }

/* ── Modal de depósito ─────────────────────────────────────────────────── */

.payment-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(0px, 3vw, 28px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.payment-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88dvh, 800px);
  overflow-y: auto;
  padding: 26px 24px 24px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  animation: sube .45s var(--ease);
}

@media (min-width: 700px) { .payment-modal { border-radius: var(--r-xl); } }

.payment-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  font-size: 1.5rem;
  line-height: 1;
}

.payment-close:hover { color: var(--text); transform: scale(1.07); }
.payment-body h2 { font-size: 1.45rem; padding-right: 42px; margin: 4px 0 7px; }
.payment-lede { color: var(--text-2); font-size: .92rem; line-height: 1.55; }

.payment-total {
  margin: 18px 0 12px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
}

.payment-total small { display: block; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.payment-total strong { display: block; margin-top: 2px; font-size: 1.65rem; letter-spacing: -.04em; }

.payment-account {
  display: grid;
  gap: 9px;
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.payment-account div { display: grid; gap: 2px; }
.payment-account span { color: var(--text-3); font-size: .7rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.payment-account b { font-size: .93rem; font-variant-numeric: tabular-nums; word-break: break-word; }

.payment-file {
  display: block;
  margin: 14px 0 10px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--stroke));
  background: var(--accent-soft);
  cursor: pointer;
}

.payment-file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.payment-file strong { display: block; font-size: .9rem; }
.payment-file small { display: block; margin-top: 4px; color: var(--text-2); font-size: .78rem; line-height: 1.4; }
.payment-file.is-ready { border-style: solid; border-color: var(--accent); }
.payment-note { margin: 0 0 16px; color: var(--text-3); font-size: .78rem; line-height: 1.45; }
.payment-submit { width: 100%; }

/* ── Panel de admin ─────────────────────────────────────────────────────
   Va encima de todo, como una hoja que sube. Solo tú lo ves. */

.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(0px, 3vw, 28px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (min-width: 700px) { .admin-overlay { align-items: center; } }

.admin-panel {
  width: min(760px, 100%);
  max-height: min(88dvh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  animation: sube .45s var(--ease);
}

@media (min-width: 700px) { .admin-panel { border-radius: var(--r-xl); } }

@keyframes sube { from { transform: translateY(24px); opacity: 0; } }

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--stroke);
}

.admin-head h2 { font-size: 1.5rem; }

.admin-close {
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-2);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  transition: color .2s, transform .3s var(--ease-back);
}

.admin-close:hover { color: var(--text); transform: scale(1.08); }

.admin-body { padding: 20px 24px 24px; overflow-y: auto; }

.admin-seccion { margin-bottom: 26px; }
.admin-seccion:last-child { margin-bottom: 0; }

.admin-seccion h3 {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.admin-seccion > p { font-size: .84rem; color: var(--text-3); margin-bottom: 12px; }

/* Una fila por partido */
.adm-partido {
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  margin-bottom: 9px;
}

.adm-partido.es-manual { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

.adm-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: .9rem;
  font-weight: 650;
}

.adm-cab small { font-size: .74rem; color: var(--text-3); font-weight: 500; }

.adm-tag {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.adm-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-fila + .adm-fila { margin-top: 8px; }

.adm-mini {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-3);
  min-width: 62px;
}

/* Los botones de forzar resultado */
.adm-res {
  padding: 8px 13px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 650;
  color: var(--text-2);
  background: var(--glass);
  border: 1px solid var(--stroke);
  transition: background .2s, color .2s, transform .25s var(--ease-back);
}

.adm-res:hover { color: var(--text); border-color: var(--stroke-2); }
.adm-res:active { transform: scale(.95); }

.adm-res.is-on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  border-color: transparent;
}

.adm-tv {
  flex: 1;
  min-width: 150px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .82rem;
  background: var(--glass);
  border: 1px solid var(--stroke);
}

.adm-tv:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Gente */
.adm-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  margin-bottom: 8px;
}

.adm-persona-nombre { flex: 1; font-weight: 650; font-size: .92rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adm-pago {
  padding: 6px 13px;
  border-radius: var(--r-full);
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--text-3);
  transition: all .2s var(--ease);
}

.adm-pago.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.adm-borrar {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--text-3);
  border: 1px solid var(--stroke);
  transition: color .2s, background .2s;
}

.adm-borrar:hover { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }
.adm-borrar svg { width: 15px; height: 15px; }

/* Solicitudes que esperan revisar el depósito. La captura se queda privada:
   solo se obtiene una URL temporal después de comprobar que eres admin. */
.adm-solicitud {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
  gap: 13px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  margin-bottom: 10px;
}

.adm-proof {
  display: block;
  min-height: 110px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--glass);
  border: 1px solid var(--stroke);
}

.adm-proof img { width: 100%; height: 100%; min-height: 110px; object-fit: cover; }
.adm-proof-empty { display: grid; place-items: center; padding: 12px; color: var(--text-3); font-size: .74rem; text-align: center; }
.adm-solicitud-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.adm-solicitud-copy h4 { font-size: .96rem; margin-bottom: 3px; }
.adm-solicitud-copy p { color: var(--text-3); font-size: .76rem; line-height: 1.4; margin-bottom: 11px; }
.adm-publicar { margin-top: auto; padding: 9px 12px; font-size: .78rem; }

@media (max-width: 440px) {
  .adm-solicitud { grid-template-columns: 1fr; }
  .adm-proof { max-height: 220px; }
}

/* Entrar */
.admin-login { text-align: center; padding: 18px 0; }
.admin-login p { font-size: .9rem; color: var(--text-2); margin-bottom: 16px; }

.admin-login input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  font-size: 1rem;
  margin-bottom: 10px;
  text-align: center;
}

.admin-login input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.admin-quien {
  font-size: .78rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}

.admin-salir {
  font-size: .76rem;
  font-weight: 650;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-salir:hover { color: var(--live); }

/* ── Dashboard de administración ──────────────────────────────────────
   No es una tarjeta flotante: ocupa la pantalla completa y deja a la vista
   todo lo necesario para revisar depósitos y quinielas sin perder contexto. */
.admin-overlay {
  z-index: 80;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.admin-panel {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
  animation: admin-in .35s var(--ease);
}

@keyframes admin-in { from { opacity: 0; transform: translateY(10px); } }

.admin-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  background: color-mix(in srgb, var(--bg-2) 92%, var(--accent) 8%);
  border-right: 1px solid var(--stroke);
}

.admin-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 30px; }
.admin-brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  border-radius: 11px; font-weight: 900; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.admin-brand b, .admin-brand small { display: block; }
.admin-brand b { font-size: .88rem; line-height: 1.1; }
.admin-brand small { margin-top: 2px; color: var(--text-3); font-size: .68rem; }

.admin-nav { display: grid; gap: 4px; }
.admin-nav a {
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 700;
  transition: background .2s, color .2s, transform .2s var(--ease-back);
}
.admin-nav a:hover, .admin-nav a:focus-visible { color: var(--text); background: var(--glass-2); transform: translateX(2px); }

.admin-sidebar-foot {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding: 15px 8px 2px;
  border-top: 1px solid var(--stroke);
}
.admin-sidebar-foot > span { overflow: hidden; color: var(--text-3); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar .admin-salir { width: fit-content; font-size: .74rem; }

.admin-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.admin-head { align-items: center; padding: 20px clamp(20px, 4vw, 46px); background: color-mix(in srgb, var(--bg) 82%, transparent); }
.admin-head h2 { font-size: clamp(1.42rem, 2.5vw, 1.9rem); }
.admin-close { width: 38px; height: 38px; font-size: 1.55rem; }
.admin-body {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: clamp(22px, 4vw, 42px) clamp(20px, 4vw, 46px) 60px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-summary { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(0, 1.25fr); gap: 24px; align-items: end; margin-bottom: 42px; }
.admin-summary-copy h3 { margin: 5px 0 9px; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.admin-summary-copy p { max-width: 38rem; color: var(--text-2); font-size: .88rem; line-height: 1.55; }
.admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 10px; }
.admin-kpi { min-width: 0; padding: 14px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--glass); }
.admin-kpi span, .admin-kpi small { display: block; color: var(--text-3); font-size: .68rem; font-weight: 650; }
.admin-kpi strong { display: block; overflow: hidden; margin: 3px 0 1px; color: var(--text); font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.06em; text-overflow: ellipsis; white-space: nowrap; }

.admin-section { margin: 0 0 44px; scroll-margin-top: 18px; }
.admin-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.admin-section-head h3 { margin: 4px 0; font-size: 1.18rem; }
.admin-section-head p { max-width: 48rem; color: var(--text-3); font-size: .8rem; line-height: 1.5; }
.admin-count { display: grid; min-width: 30px; height: 30px; padding: 0 9px; place-items: center; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 800; }

.admin-review-list, .admin-quinielas-grid { display: grid; gap: 12px; }
.admin-review-card, .admin-quiniela-card {
  min-width: 0;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--shadow-1);
}
.admin-review-card { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); overflow: hidden; }
.admin-proof { min-height: 100%; border: 0; border-radius: 0; background: color-mix(in srgb, var(--bg-2) 78%, var(--accent) 8%); }
.admin-proof img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; transition: transform .35s var(--ease); }
.admin-proof:hover img { transform: scale(1.035); }
.admin-proof-empty { display: grid; place-items: center; min-height: 180px; color: var(--text-3); font-size: .76rem; text-align: center; }
.admin-review-main, .admin-quiniela-card { padding: 17px; }
.admin-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-player { display: flex; align-items: center; min-width: 0; gap: 10px; }
.admin-player .avatar { flex: none; }
.admin-player h4 { overflow: hidden; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-player p { margin-top: 2px; color: var(--text-3); font-size: .71rem; }
.admin-status { flex: none; padding: 4px 8px; border-radius: var(--r-full); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.admin-status.is-pending { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.admin-status.is-approved { color: var(--accent); background: var(--accent-soft); }
.admin-status.is-unpaid { color: var(--text-3); background: var(--glass-2); }

.admin-picks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.admin-pick { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 160px; padding: 5px 8px 5px 5px; border: 1px solid var(--stroke); border-radius: var(--r-full); background: var(--bg-2); }
.admin-pick img, .admin-pick b { width: 24px; height: 24px; flex: none; object-fit: contain; }
.admin-pick b { display: grid; place-items: center; border-radius: 50%; background: var(--glass-2); color: var(--text-2); font-size: .54rem; }
.admin-pick i { overflow: hidden; color: var(--text-2); font-size: .67rem; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.admin-pick.is-draw { max-width: 180px; gap: 4px; padding-right: 5px; }
.admin-pick.is-draw i { padding: 0 2px; color: var(--text-3); font-size: .61rem; }
.admin-no-picks { color: var(--text-3); font-size: .76rem; }

.admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 17px; }
.admin-actions .btn { min-height: 38px; padding: 8px 12px; font-size: .75rem; }
.admin-secondary, .admin-danger, .admin-link-action { border: 1px solid var(--stroke); border-radius: 10px; font-size: .72rem; font-weight: 750; }
.admin-secondary { color: var(--text-2); background: var(--glass-2); }
.admin-secondary:hover { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.admin-quinielas-grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.admin-quiniela-card { display: flex; flex-direction: column; min-height: 205px; }
.admin-actions-bottom { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--stroke); }
.admin-link-action { padding: 7px 9px; color: var(--text-2); background: transparent; }
.admin-link-action:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.admin-danger { padding: 7px 9px; color: var(--live); background: color-mix(in srgb, var(--live) 7%, transparent); border-color: color-mix(in srgb, var(--live) 25%, transparent); }
.admin-danger:hover { background: color-mix(in srgb, var(--live) 16%, transparent); }

.admin-history-payments { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.admin-history-payment-card { padding: 16px; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--glass); }
.admin-history-payment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--stroke); }
.admin-history-payment-head h4 { margin-top: 3px; font-size: .93rem; }
.admin-history-payment-head > span { color: var(--text-3); font-size: .7rem; }
.admin-history-payment-list { display: grid; gap: 7px; margin-top: 12px; }
.admin-history-payment-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.admin-history-payment-row .avatar { width: 29px; height: 29px; font-size: .63rem; }
.admin-history-payment-row b { flex: 1; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-payment-history { flex: none; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--r-full); font-size: .64rem; font-weight: 800; transition: transform .2s var(--ease-back), filter .2s; }
.admin-payment-history:hover { filter: brightness(1.12); transform: translateY(-1px); }
.admin-payment-history.is-paid { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.admin-payment-history.is-unpaid { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); border-color: color-mix(in srgb, var(--live) 25%, transparent); }

.admin-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 10px; }
.admin-results-grid .adm-partido { height: 100%; margin: 0; padding: 15px; }
.admin-empty { display: grid; min-height: 116px; place-items: center; gap: 5px; padding: 20px; border: 1px dashed var(--stroke-2); border-radius: var(--r-lg); color: var(--text-3); text-align: center; }
.admin-empty b { color: var(--text-2); font-size: .86rem; }
.admin-empty span { font-size: .75rem; }

.admin-body > .admin-login { max-width: 410px; margin: clamp(30px, 12vh, 110px) auto; padding: 30px; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--shadow-2); }

@media (max-width: 900px) {
  .admin-panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .admin-sidebar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; border-right: 0; border-bottom: 1px solid var(--stroke); }
  .admin-brand { padding: 0; }
  .admin-brand small { display: none; }
  .admin-nav { display: flex; justify-content: center; overflow: auto; gap: 3px; }
  .admin-nav a { padding: 7px 9px; font-size: .72rem; white-space: nowrap; }
  .admin-sidebar-foot { display: block; margin: 0; padding: 0; border: 0; }
  .admin-sidebar-foot > span { display: none; }
  .admin-workspace { grid-row: 2; }
  .admin-summary { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .admin-sidebar { grid-template-columns: 1fr auto; }
  .admin-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .admin-brand { padding-left: 2px; }
  .admin-head { padding: 15px 18px; }
  .admin-body { padding: 23px 16px 46px; }
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-kpi { padding: 12px; }
  .admin-review-card { grid-template-columns: 1fr; }
  .admin-proof img, .admin-proof-empty { min-height: 170px; max-height: 230px; }
  .admin-quinielas-grid, .admin-results-grid { grid-template-columns: 1fr; }
  .admin-actions { align-items: stretch; flex-direction: column-reverse; }
  .admin-actions .btn, .admin-secondary, .admin-danger, .admin-link-action { width: 100%; }
  .admin-actions-bottom { align-items: stretch; }
  .admin-pick { max-width: 135px; }
}

/* ── Dónde ver el partido ───────────────────────────────────────────── */

.tv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 650;
  color: var(--accent);
}

.tv-chip svg { width: 12px; height: 12px; flex: none; }

/* ── "Hay una versión nueva" ────────────────────────────────────────────
   Sale arriba, no abajo: abajo vive la barra de enviar el pronóstico y no
   se deben pelear. Y es un aviso, no una alarma — se puede ignorar. */

.update-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  width: min(460px, calc(100vw - 24px));
  padding: 12px 12px 12px 16px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: var(--shadow-3);
  animation: baja .5s var(--ease-back);
}

@keyframes baja { from { opacity: 0; transform: translate(-50%, -18px); } }

.update-ico {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 10px;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.update-copy { flex: 1; min-width: 0; line-height: 1.25; }
.update-copy strong { display: block; font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.update-copy small { font-size: .74rem; color: var(--text-3); }

.update-bar .btn { padding: 9px 16px; font-size: .84rem; flex: none; }

.update-luego {
  width: 28px; height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-3);
  transition: color .2s;
}

.update-luego:hover { color: var(--text); }

/* ── Instalar la app ────────────────────────────────────────────────── */

.btn-instalar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform .3s var(--ease-back), background .2s;
}

.btn-instalar svg { width: 15px; height: 15px; flex: none; }
.btn-instalar:hover { transform: translateY(-2px); }
.btn-instalar:active { transform: scale(.95); }

@media (max-width: 560px) {
  .btn-instalar span { display: none; }
  .btn-instalar { padding: 10px; border-radius: 50%; }
}

/* En la app ya instalada no tiene caso invitar a instalarla */
@media (display-mode: standalone) {
  .btn-instalar { display: none !important; }
}

/* ── Avisos flotantes ───────────────────────────────────────────────── */

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}

.toast {
  padding: 13px 18px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-3);
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-in .5s var(--ease-back);
}

.toast svg { width: 17px; height: 17px; flex: none; }
.toast.is-ok { color: var(--accent); }
.toast.is-err { color: var(--live); }
.toast.is-out { animation: toast-out .35s var(--ease) forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ── Esqueletos de carga ────────────────────────────────────────────── */

.skeleton-list { display: grid; gap: 12px; }

.skeleton {
  height: 132px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass-2) 50%, var(--glass) 75%);
  background-size: 200% 100%;
  border: 1px solid var(--stroke);
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Salón de la fama: ganadores de jornadas pasadas ────────────────── */

.ganadores-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.gan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  text-align: left;
  transition: transform .3s var(--ease-back), border-color .2s, box-shadow .3s var(--ease);
}

.gan-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--glow);
}

.gan-card:active { transform: translateY(0) scale(.99); }
.gan-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gan-card.is-vacia { cursor: default; opacity: .7; }
.gan-card.is-vacia:hover { transform: none; border-color: var(--stroke); box-shadow: var(--shadow-1); }

.gan-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.gan-medalla {
  flex: none;
  color: var(--warn);
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--warn) 40%, transparent));
}

.gan-medalla svg { width: 26px; height: 26px; }

.gan-info { flex: 1; min-width: 0; }

.gan-nombre {
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gan-nombre small { font-weight: 500; color: var(--text-3); font-size: .74rem; }

.gan-sub {
  font-size: .8rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gan-chevron { flex: none; width: 18px; height: 18px; color: var(--text-3); }

/* ── Modal del ganador de la jornada ────────────────────────────────── */

.winner-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 28px);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: win-fade .3s var(--ease);
}

@keyframes win-fade { from { opacity: 0; } }

.winner-modal {
  position: relative;
  width: min(460px, 100%);
  max-height: min(92dvh, 760px);
  overflow: hidden auto;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--stroke));
  box-shadow: var(--shadow-3), var(--glow);
  animation: win-pop .5s var(--ease-back);
}

@keyframes win-pop { from { transform: scale(.86) translateY(20px); opacity: 0; } }

/* La capa del confeti: encima de todo el modal, sin estorbar los clics */
.winner-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.winner-confetti i {
  position: absolute;
  top: -8%;
  display: block;
  animation-name: confetti-cae;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes confetti-cae {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(115vh) rotate(680deg); opacity: 0; }
}

.winner-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-2);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  transition: color .2s, transform .3s var(--ease-back);
}

.winner-close:hover { color: var(--text); transform: scale(1.08); }

.winner-body {
  position: relative;
  z-index: 2;
  padding: clamp(26px, 5vw, 38px) clamp(20px, 4vw, 34px) clamp(22px, 4vw, 30px);
  text-align: center;
}

.win-drums { font-size: 1.9rem; line-height: 1; margin-bottom: 6px; animation: win-bounce 1.8s var(--ease) infinite; }

@keyframes win-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.win-trofeo {
  display: inline-grid;
  place-items: center;
  width: 76px; height: 76px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--accent-ink);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-2) 90%, #fff) 0%, transparent 55%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: win-trofeo-in .6s var(--ease-back) .1s both;
}

.win-trofeo svg { width: 40px; height: 40px; }

@keyframes win-trofeo-in { from { transform: scale(0) rotate(-30deg); } }

.win-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.win-title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.win-felicidades { color: var(--text-2); font-size: .95rem; margin-bottom: 16px; }

.win-nombre {
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: linear-gradient(115deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
  margin-bottom: 14px;
  word-break: break-word;
}

.win-empatados {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 16px;
}

.win-empatados li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-full);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  font-size: .84rem;
  font-weight: 600;
}

.win-empatados .avatar { width: 24px; height: 24px; font-size: .64rem; }

.win-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.win-stat {
  padding: 14px 8px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.win-stat.is-premio { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }

.win-stat b {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.win-stat.is-premio b { color: var(--accent); }
.win-stat b small { font-size: .78rem; font-weight: 600; color: var(--text-3); }

.win-stat span {
  display: block;
  margin-top: 3px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.win-bote { font-size: .86rem; color: var(--text-2); margin-bottom: 18px; }
.win-bote b { color: var(--text); font-weight: 750; }

.win-ok { width: 100%; }

/* Los pronósticos del ganador dentro del modal (por qué ganó) */
.win-picks { margin: 2px 0 18px; text-align: left; }
.win-picks-load { text-align: center; color: var(--text-3); font-size: .84rem; padding: 4px 0; }

.win-picks-label {
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

.win-picks-persona { margin-bottom: 12px; }
.win-picks-persona:last-child { margin-bottom: 0; }
.win-picks-nombre { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; text-align: center; }
.win-picks .todo-picks { justify-content: center; }

/* ── Histórico de resultados (acordeón por jornada) ─────────────────── */

.historico-list { display: flex; flex-direction: column; gap: 10px; }

.hist-jornada {
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.hist-jornada[open] { border-color: var(--stroke-2); box-shadow: var(--shadow-2); }

.hist-sum {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background .2s var(--ease);
}

.hist-sum::-webkit-details-marker { display: none; }
.hist-sum:hover { background: var(--glass-2); }
.hist-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Mismo disco numerado que el Salón de la fama */
.hist-jnum {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.hist-sum-info { flex: 1; min-width: 0; }
.hist-sum-title { font-weight: 700; letter-spacing: -.015em; }

.hist-sum-sub {
  font-size: .82rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-trofeo { filter: grayscale(.1); }

.hist-chevron {
  flex: none;
  width: 20px; height: 20px;
  color: var(--text-3);
  transition: transform .3s var(--ease);
}

.hist-jornada[open] .hist-chevron { transform: rotate(180deg); }

.hist-body { padding: 2px 16px 16px; }

.hist-resultados {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.res-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}

.res-row:nth-child(odd) { background: color-mix(in srgb, var(--text) 4%, transparent); }

.res-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-2);
}

.res-team .team-logo { width: 24px; height: 24px; flex: none; }
.res-away { flex-direction: row-reverse; text-align: right; }
.res-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-team.is-win { color: var(--text); font-weight: 750; }

.res-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1rem;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.res-score em { color: var(--text-3); font-style: normal; font-weight: 600; }
.res-score.is-draw { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

.hist-ver-picks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform .2s var(--ease-back), background .2s;
}

.hist-ver-picks:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.hist-ver-picks:active { transform: translateY(0); }

.hist-picks .todos-grid { margin-top: 2px; }

/* ── "¿Por qué el manejo?" como desplegable, al final ───────────────── */

.porque-details {
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.porque-details[open] { box-shadow: var(--shadow-2); border-color: var(--stroke-2); }

.porque-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "eye chev" "title chev" "hint chev";
  align-items: center;
  column-gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  transition: background .2s var(--ease);
}

.porque-summary::-webkit-details-marker { display: none; }
.porque-summary:hover { background: var(--glass-2); }
.porque-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.porque-summary-eyebrow {
  grid-area: eye;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.porque-summary-title {
  grid-area: title;
  font-size: clamp(1.3rem, 3.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.porque-summary-hint { grid-area: hint; font-size: .82rem; color: var(--text-3); margin-top: 4px; }
.porque-details[open] .porque-summary-hint { display: none; }

.porque-chevron {
  grid-area: chev;
  width: 24px; height: 24px;
  color: var(--text-3);
  transition: transform .3s var(--ease);
}

.porque-details[open] .porque-chevron { transform: rotate(180deg); }

.porque-content { padding: 4px 22px 26px; }
.porque-intro { color: var(--text-2); margin-bottom: 20px; }

/* ── Tabla de posiciones de la Liga MX ──────────────────────────────── */

.pos-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }

.pos-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
}

.zc { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.zc-liguilla { background: var(--accent); }
.zc-playin { background: var(--accent-2); }

.pos-table { border-radius: var(--r-lg); padding: 6px; }

.pos-row {
  display: grid;
  grid-template-columns: 34px 1fr 40px 48px 48px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--r-sm);
  font-size: .92rem;
}

.pos-row + .pos-row { border-top: 1px solid var(--stroke); }
.pos-row:not(.is-head):hover { background: var(--glass-2); }

.pos-row.is-head {
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pos-row.is-head span:nth-child(n+3) { text-align: center; }

.pos-num {
  position: relative;
  text-align: center;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Barrita de color de la zona de clasificación, pegada al número */
.pos-row.zona-liguilla .pos-num::before,
.pos-row.zona-playin .pos-num::before {
  content: '';
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 62%;
  border-radius: 2px;
}

.pos-row.zona-liguilla .pos-num::before { background: var(--accent); }
.pos-row.zona-playin .pos-num::before { background: var(--accent-2); }
.pos-row.zona-liguilla .pos-num { color: var(--accent); }

.pos-equipo { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 650; }
.pos-equipo .team-logo { width: 26px; height: 26px; flex: none; }
.pos-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-abbr { display: none; }

.pos-pj, .pos-dg, .pos-pts { text-align: center; font-variant-numeric: tabular-nums; }
.pos-pj { color: var(--text-3); }
.pos-dg { color: var(--text-2); font-weight: 600; }
.pos-pts { font-weight: 800; font-size: 1rem; }

/* ── Responsivo ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .costo-strip { flex-direction: column; align-items: flex-start; }
  .costo-split { display: none; }

  /* ── El menú en celular ────────────────────────────────────────────────
     Nada de hamburguesa: son 4 anclas de la misma página, y esconderlas
     tras un botón cuesta dos toques y una capa que cerrar, para ahorrar
     40px. Mejor se bajan a su propio renglón y se quedan SIEMPRE a la
     vista, a un toque. Si no caben, se arrastran de lado. */
  .topbar-inner { flex-wrap: wrap; row-gap: 10px; }

  /* El carril se baja a su propio renglón, de lado a lado */
  .nav-scroll { order: 3; width: 100%; }

  .nav {
    overflow-x: auto;
    padding-bottom: 2px;
    /* El arrastre se siente nativo y frena en cada pastilla */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar { display: none; }

  .nav a {
    flex: none;
    scroll-snap-align: start;
    /* 44px: el mínimo que Apple pide para algo que se toca con el dedo */
    min-height: 44px;
    display: flex;
    align-items: center;
    background: var(--glass);
    border: 1px solid var(--stroke);
  }

  .nav a:hover { background: var(--glass-2); }

  /* El encabezado ahora es más alto (dos renglones): las anclas deben frenar
     más abajo para no quedar escondidas debajo de él. */
  html { scroll-padding-top: 132px; }

  .theme-btn { width: 44px; height: 44px; padding: 11px; }
}

@media (max-width: 560px) {
  .team-name { font-size: .88rem; }
  .team-logo { width: 28px; height: 28px; }

  /* En celular no cabe "Atlético de San Luis" en un tercio de pantalla,
     así que mostramos la abreviatura (ATL) en vez del nombre completo.
     Lo que NO hacemos es quitarla: sin ella los tres botones dirían
     "Gana / X / Gana" y no se sabría de quién. */
  .pick-full { display: none; }
  .pick-abbr { display: block; }

  /* Otra vez los 44px, y aquí es lo más importante de la página: es el
     botón con el que se juega la quiniela. Antes medía 38 y se fallaba. */
  .pick-btn { min-height: 48px; justify-content: center; }

  .tabla-row { grid-template-columns: 36px 1fr auto; gap: 9px; padding: 11px 13px; }
  .tabla-row .t-prize { display: none; }
  .tabla-row.is-head span:nth-child(4) { display: none; }

  .submit-bar { bottom: 10px; padding: 12px 14px; }
  .submit-bar .btn { width: 100%; min-height: 48px; }

  .name-row { flex-direction: column; align-items: stretch; }
  .name-row input { width: 100%; min-height: 48px; }

  /* La tabla de la Liga MX: en celular, la abreviatura en vez del nombre
     largo, y columnas más apretadas. Se mantienen las 5 para que los
     números no se desalineen. */
  .pos-row { grid-template-columns: 28px 1fr 32px 42px 42px; gap: 6px; padding: 10px 8px; }
  .pos-nombre { display: none; }
  .pos-abbr { display: inline; font-weight: 700; }
  .pos-equipo .team-logo { width: 24px; height: 24px; }
}

/* ── Respeto a quien pidió menos movimiento ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}