/* Barlow Condensed vive en el repo y no en un CDN: así el service worker la
   cachea (es cache-first para fuentes) y en el campo sin señal los títulos no
   se caen a la fuente del sistema. Solo el subconjunto latino, ~68 KB. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-700-italic.woff2") format("woff2");
}

:root {
  /* ---- color ---- */
  /* Esto es el tema "Luna" (oscuro, el default — sin atributo en <html>,
     ver js/theme.js). Gris neutro (R=G=B), no azul marino — antes tenían
     un ligero tinte azul (el canal azul más alto que rojo/verde en cada
     uno), a petición expresa se quitó sin cambiar qué tan claro/oscuro es
     cada nivel. El azul marino clásico sigue disponible como tema aparte,
     "Eclipse" (ver más abajo, después de "Tema Sol"). */
  --bg: #0d0d0d;
  --surface: #1e1e1e;
  --surface-alt: #262626;
  --surface-raised: #2b2b2b;
  --border: #343434;
  --text: #f2f3f4;
  --muted: #8d96a0;

  /* --accent es para bordes, fondos y áreas grandes: sobre las superficies
     da 3.57:1, suficiente para elementos gráficos (mínimo 3) pero NO para
     texto (mínimo 4.5). Para texto chico en rojo va --accent-text, que da
     5.53:1 y se ve prácticamente igual. */
  --accent: #e2202f;
  --accent-text: #ff5a6e;
  --accent-dark: #9c1526;
  --accent-glow: rgba(226, 32, 47, 0.35);

  --win: #3fb56f;
  --loss: #e2202f;
  --tie: #8d96a0;
  --scheduled: #f5a623;

  --pos-pitcher: #4a9eff;
  --pos-catcher: #a855f7;
  --pos-infield: #e2c93f;
  --pos-outfield: #3fb56f;
  --pos-special: #ff6fb5;
  --pos-dh: #ff8c33;

  /* ---- tipografía ---- */
  /* La condensada es solo para títulos, marcadores y cifras grandes — lo que
     le da el aire deportivo del logo. El cuerpo y las tablas siguen en la
     fuente del sistema, que se lee mejor en tamaños chicos. */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Consolas", ui-monospace, monospace;

  /* Escala cerrada: antes había 24 tamaños sueltos, varios a centésimas de
     rem entre sí. Todo nuevo debe salir de aquí. */
  --text-2xs: 0.625rem;
  --text-xs: 0.72rem;
  --text-sm: 0.8rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.15rem;
  --text-2xl: 1.45rem;
  --text-3xl: 2rem;
  --text-4xl: 3.2rem;

  /* ---- forma ---- */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
  /* Sombra del degradado de las tarjetas "hero" (.leader-hero /
     .record-hero — líderes, récords, Resumen). */
  --hero-shade: rgba(0, 0, 0, 0.35);
  --shadow-raised: 0 12px 28px -14px rgba(0, 0, 0, 0.7);

  /* Velo de las filas pares. A 0.015 la diferencia era de 2 niveles por
     canal: rayado invisible. */
  --zebra: rgba(255, 255, 255, 0.03);

  /* Trama diagonal del fondo, tipo raya de uniforme. Es un azul (la misma
     familia que --pos-pitcher) en vez de blanco: sobre un fondo tan oscuro
     el blanco sale gris y pesa más. El azul carga casi todo su contraste en
     el canal del azul, así que se distingue como tono sin aclarar la línea.
     Estas dos son las perillas: subir --pattern-line la hace más marcada,
     bajar --pattern-gap la hace más densa. */
  --pattern-line: rgba(74, 158, 255, 0.05);
  --pattern-gap: 16px;

  /* Centro del resplandor radial detrás del header (ver `body` más abajo) —
     separado de --surface aunque hoy valga lo mismo, para que el tema
     claro pueda darle su propio tono sin tocar las superficies. */
  --bg-glow: #1e1e1e;

  /* Versión SÓLIDA (sin transparencia) de "tu fila" (rgba(226,32,47,0.1) —
     ver .standings-us/.row-you más abajo) para la columna congelada de una
     tabla: esa celda necesita fondo opaco propio (tapa lo que scrollea
     detrás), así que no puede usar la misma rgba translúcida. Aproxima ese
     mismo rojo-al-10% ya mezclado sobre --surface, para que la celda fija y
     las que sí se mueven se vean del mismo color. */
  --row-you-solid: #2a1b1f;
}

/* ---- Tema Sol (claro) ----
   Se activa con [data-theme="light"] en <html> (ver js/theme.js — botón
   junto al ícono de Instagram — y el script inline en <head> de cada
   .html, que lo aplica antes del primer pintado para no parpadear). Solo
   se redefinen los tokens de fondo/superficie/texto — el rojo de acento,
   los colores de posición (--pos-*) y los semánticos (--win/--loss/...) se
   quedan igual que en Luna, es la misma identidad visual. El tercer tema,
   Eclipse (ver más abajo), es la excepción: ese sí trae su propio rojo. */
:root[data-theme="light"] {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-alt: #eef0f3;
  --surface-raised: #ffffff;
  --border: #dbdfe4;
  --text: #1a1e23;
  --muted: #5b6470;

  /* --accent-text (el rojo para TEXTO chico) está afinado para leerse sobre
     fondo oscuro — sobre blanco un rojo tan claro pierde contraste, así que
     aquí usa el tono más oscuro que ya existía para hovers. */
  --accent-text: #b3172a;
  --accent-glow: rgba(226, 32, 47, 0.25);

  --zebra: rgba(0, 0, 0, 0.025);
  --pattern-line: rgba(74, 158, 255, 0.06);

  --bg-glow: #ffffff;

  --shadow-card: 0 8px 20px -12px rgba(20, 24, 28, 0.18);
  /* En claro el negro al 35% dejaba las tarjetas grises — apenas un toque
     de gris azulado, que se lee como degradado sin ensuciar el blanco. */
  --hero-shade: rgba(20, 40, 70, 0.07);
  --shadow-raised: 0 12px 28px -14px rgba(20, 24, 28, 0.22);

  /* Mismo rojo-al-10% que .standings-us/.row-you, pero ya mezclado sobre
     --surface en este tema (blanco) en vez del de fondo oscuro. */
  --row-you-solid: #fbe4e6;
}

/* ---- Tema Eclipse ----
   El azul marino clásico del sitio, de antes de que Luna se volviera gris
   neutro — se conserva como tercera opción para quien lo prefiera. Se
   activa con [data-theme="eclipse"] en <html> (mismo mecanismo que el
   claro de arriba). Además del fondo, este tema también cambia el rojo de
   acento (--accent y derivados) y --muted — a diferencia de Sol/Luna, que
   solo tocan fondo/superficie/texto y comparten el mismo rojo. */
:root[data-theme="eclipse"] {
  --bg: #0a0e18;
  --surface: #101622;
  --surface-alt: #141b28;
  --surface-raised: #1a2230;
  --border: #222c40;
  --muted: #a3a5a4;

  --accent: #bf0f35;
  --accent-text: #e8375c;
  --accent-dark: #7d0924;
  --accent-glow: rgba(191, 15, 53, 0.35);

  --bg-glow: #101622;

  /* Mismo rojo-al-10% que .standings-us/.row-you, pero ya mezclado sobre
     --surface y --accent de este tema. */
  --row-you-solid: #342431;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

/* La trama va en el <body> y no en <main> para que llegue de borde a borde:
   `main` está limitado a 1150px y se le verían los cortes en pantallas
   anchas. Solo asoma detrás del contenido porque el header, la nav y el
   footer llevan fondo opaco propio — si a alguno se le quita, la trama se
   le cuela. */
/* Columna de flex + `main` que crece: en las vistas con poco contenido el
   footer se quedaba a media pantalla. Así siempre baja hasta el fondo del
   visor, sin dejar de empujarse hacia abajo cuando el contenido es largo. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background:
    repeating-linear-gradient(
      135deg,
      var(--pattern-line) 0 1px,
      transparent 1px var(--pattern-gap)
    ),
    radial-gradient(1200px 500px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%),
    var(--bg);
  color: var(--text);
}

/* `position: relative` es lo que ancla al ícono de Instagram (position:
   absolute) a ESTA caja y no a la página completa. */
.topbar {
  position: relative;
  padding: 18px 0px 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 55%);
}

.topbar-inner {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

/* Venía de 250px, donde junto con la nav ocupaba el 38% de la pantalla de un
   celular antes de mostrar un solo dato. Se puede crecer con relativa
   holgura porque la nav quedó pegajosa: esta altura solo se paga en la
   primera pantalla, no durante todo el scroll. */
.brand-logo {
  height: 172px;
  width: 172px;
  object-fit: contain;
}

.season-row {
  display: flex;
  justify-content: center;
  padding: 10px 24px;
}

.season {
  font-family: var(--font-display);
  display: inline-block;
  text-align: center;
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

/* Ancla a la esquina superior IZQUIERDA del header (ver `position: relative`
   en .topbar) en vez de ir en el flujo normal junto al logo — la derecha es
   de .auth-slot, que puede traer nombre y necesita más espacio para crecer
   sin chocar con el logo centrado. Tamaño chico a propósito, para que se
   vea del mismo porte que el interruptor de tema de al lado. */
.social-link {
  position: absolute;
  top: 22px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.social-link i {
  font-size: var(--text-xl);
}

/* Interruptor eclipse/luna (js/theme.js; Sol quitado por ahora) — junto a Instagram, misma
   esquina y centrado a la misma altura (ver .social-link arriba). El
   círculo rojo (el "thumb") y los tres íconos se desliza/cambian de color
   al lado activo nomás con CSS: [data-theme="light"|"eclipse"] en <html>
   (sin atributo = Luna, el oscuro de siempre), sin que JS toque estilos.
   Tanto el thumb como los íconos son position:absolute con el MISMO
   tamaño/posición cada uno (3px/33px) — así el ícono queda
   exactamente centrado sobre su círculo, en vez de depender de que un
   reparto flex coincida por casualidad con dónde cae el círculo. Orden
   izquierda-a-derecha = claro-a-oscuro: eclipse, luna. */
.theme-switch {
  position: absolute;
  top: 23px;
  left: 62px;
  width: 64px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 33px; /* Luna (default): junto a la luna */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: left 0.2s ease;
}

:root[data-theme="eclipse"] .theme-switch-thumb {
  left: 3px; /* Eclipse */
}

.theme-switch-icon {
  position: absolute;
  top: 3px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--muted);
  transition: color 0.2s ease;
}

.theme-switch-icon--eclipse {
  left: 3px;
}

.theme-switch-icon--moon {
  left: 33px;
}

/* El ícono del tema activo queda en blanco, sobre el círculo rojo; los
   otros dos se apagan a --muted (regla base de arriba). */
.theme-switch-icon--moon {
  color: #fff;
}

:root[data-theme="eclipse"] .theme-switch-icon--moon {
  color: var(--muted);
}

:root[data-theme="eclipse"] .theme-switch-icon--eclipse {
  color: #fff;
}

@media (max-width: 640px) {
  /* En celular, Instagram y el interruptor de tema se mudan al menú de
     "apps" (ver #more-tile-instagram/#more-tile-theme en js/main.js) — el
     header se queda solo con el logo, y estos dos ya no ocupan esquina
     propia ahí. */
  .social-link,
  .theme-switch {
    display: none;
  }
}

/* Esquina opuesta a .social-link — ancla a la derecha en vez de a la
   izquierda: con sesión iniciada puede crecer (ícono + nombre del
   jugador), y así tiene hacia dónde sin chocar con el logo centrado.
   Vacío (sin ancho) si Supabase no está configurado: js/auth.js deja
   innerHTML = "" en ese caso, así este bloque no le roba espacio a nada. */
.auth-slot {
  position: absolute;
  top: 16px;
  right: 16px;
  /* Por encima de .tabs (z-index: 30, sticky) — el botón vive en .topbar,
     que precede a la nav en el flujo normal, pero el panel desplegado no
     debe quedar tapado si algo cambia más adelante en ese orden. */
  z-index: 32;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.auth-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Login inline de admin.html (ver loggedOutMarkup en js/auth.js) — la app
   normal ya no lo usa (login se hace en js/splash.js), pero admin.html no
   tiene esa pantalla de bienvenida, así que aquí el formulario sigue
   viviendo en el header. */
.auth-login-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-login-inline input {
  width: 130px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.auth-login-inline input:focus {
  outline: none;
  border-color: var(--accent);
}

#auth-slot .auth-error {
  text-align: right;
  margin-top: 6px;
}

#auth-slot .auth-ok {
  text-align: right;
  margin-top: 6px;
}

.auth-forgot-link {
  display: block;
  margin-top: 4px;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.auth-forgot-link:hover {
  color: var(--accent-text);
}

.auth-btn i {
  font-size: var(--text-2xl);
}

/* Admin/Cerrar sesión (ver loggedInMarkup en js/auth.js): botones
   secundarios aparte del pill, más chicos — mismo tamaño que .social-link
   (Instagram) del otro lado del header, a petición expresa. */
.auth-btn-icon {
  width: 36px;
  height: 36px;
}

.auth-btn-icon i {
  font-size: var(--text-md);
}

/* Con sesión iniciada el botón se pinta de rojo (el acento del sitio) en
   vez de solo resaltar al pasar el mouse — una señal de estado a simple
   vista, sin abrir el panel. Antes era verde; se cambió a rojo por pedido
   expreso, va más acorde con el resto del tema (mismo criterio que
   .row-you/.card-you). */
.auth-btn-in {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* Variante con nombre (jugador ya identificado, ver loggedInMarkup en
   js/auth.js) — deja de ser un círculo fijo de 48px para poder crecer con
   el texto del nombre. */
.auth-btn-named {
  width: auto;
  height: auto;
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 12px;
  gap: 8px;
}

.auth-btn-named i {
  font-size: var(--text-lg);
}

/* El chip de sesión iniciada (foto + número + nombre, ver loggedInMarkup en
   js/auth.js) va SIN el recuadro rojo redondeado que lo encierra — solo la
   foto y el texto, a petición expresa. El botón "Iniciar sesión"
   (logged-out, también .auth-btn-named pero SIN .auth-btn-in) sí conserva
   su recuadro. */
.auth-btn-in.auth-btn-named {
  border: none;
  background: none;
  padding: 4px 4px;
}

.auth-btn-in.auth-btn-named:hover {
  border-color: transparent;
}

.auth-btn-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* Foto (o iniciales) junto a tu nombre en el header — ver loggedInMarkup()
   en js/auth.js. La foto SÍ lleva su borde rojo (a petición expresa); lo
   que se quitó fue el recuadro rojo que envolvía a foto + número + nombre
   juntos (ver .auth-btn-in.auth-btn-named arriba). */
.auth-btn-avatar {
  display: inline-flex;
  flex-shrink: 0;
}

.auth-btn-avatar .avatar {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Fila de controles con sesión iniciada: el pill con tu nombre (link
   directo a tu perfil) + botones redondos aparte para Admin (solo coach) y
   Cerrar sesión — ya no hay panel desplegable (ver loggedInMarkup en
   js/auth.js). */
.auth-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* El pill de "Mi cuenta" (sesión sin vincular a un jugador todavía, ver
   loggedInMarkup en js/auth.js) es un <span>, no un link — nada a dónde
   ir, así que tampoco debe verse clicable. */
.auth-controls span.auth-btn {
  cursor: default;
}

/* :not([hidden]) — igual criterio que .more-sheet más abajo: en
   walkup-edit-form/position-edit-form el atributo `hidden` vive en el
   mismo elemento que esta clase, y "display: flex" le ganaría al `display:
   none` por defecto de `hidden` si no se excluye explícitamente aquí. */
.auth-form:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
}

.auth-form textarea {
  resize: vertical;
  min-height: 46px;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Día + mes del cumpleaños, lado a lado (ver "Estado y cumpleaños" en el
   panel de editar perfil, js/views/jugador.js). */
.bday-inputs {
  display: flex;
  gap: 10px;
}

.bday-inputs label {
  flex: 1;
}

.auth-submit {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 800;
  font-size: var(--text-sm);
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 0;
  cursor: pointer;
  transition: filter 0.15s;
}

.auth-submit:hover {
  filter: brightness(1.15);
}

.auth-error {
  color: var(--loss);
  font-size: var(--text-2xs);
  margin: 0;
}

.auth-ok {
  color: var(--win);
  font-size: var(--text-2xs);
  margin: 0;
}

.auth-hint {
  margin: 10px 0 0;
  font-size: var(--text-2xs);
  color: var(--muted);
  text-align: center;
}

/* .leader-card p (más abajo) le gana en especificidad a un solo .auth-error/
   .auth-hint e impone su tamaño grande en itálicas — mismo problema y
   mismo arreglo de "doble clase" que ya usa .leader-card .leader-note más
   abajo. Afecta el error del login (login-card es .leader-card) y el
   aviso de "inicia sesión para..." del RSVP (la tarjeta de Próximo juego
   también es .leader-card). */
.leader-card .auth-error,
.leader-card .auth-hint {
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 640px) {
  /* En celular ya no hay pill de cuenta en el header — "Iniciar sesión",
     "Cerrar sesión" y "Admin" viven en el menú de "apps" (ver
     #more-tile-login/#more-tile-logout/#more-tile-admin en js/main.js) y
     "Mi Perfil" ya tiene su propio tab abajo, así que este botón (con o sin
     sesión) sobraba aquí — a petición expresa. En escritorio sigue igual. */
  .auth-slot {
    display: none;
  }
}

/* Se queda pegada arriba al hacer scroll, así el sitio no obliga a volver
   hasta el principio para cambiar de pestaña. Necesita fondo opaco propio
   porque el contenido pasa por debajo. */
.tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  overflow-x: auto;
}

.tabs a {
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 16px;
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

/* Sin esto, [hidden] no alcanza a ganarle a "display: flex" de arriba (misma
   especificidad que compite, y la de flex está declarada después) — la
   pestaña "Mi Perfil" (#nav-mi-perfil en index.html) se seguiría viendo sin
   sesión iniciada aunque JS le ponga el atributo `hidden`. */
.tabs a[hidden] {
  display: none;
}

.tabs a:hover {
  color: var(--text);
  border-color: var(--border);
}

.tabs a.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 12px var(--accent-glow);
}

/* Barra de pestañas de abajo y su panel "Más": ocultas por default (esto es
   lo que se ve en escritorio, donde la nav de arriba de siempre sigue
   siendo la real). El media query de abajo las prende solo en celular. */
.bottom-tabs {
  display: none;
}

@media (max-width: 640px) {
  .brand-logo {
    height: 104px;
    width: 104px;
  }

  .season {
    padding: 5px 10px;
  }

  /* En celular NO se envuelve: dos filas de nav pegada se comerían medio
     visor de forma permanente. Una sola fila que se desliza en horizontal
     cuesta ~45px y es el patrón normal en móvil. */
  .tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 12px;
    gap: 6px;
  }

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

  .tabs a {
    padding: 7px 12px;
    font-size: var(--text-sm);
  }
}

@media (max-width: 640px) {
  /* La barra de abajo reemplaza a la de arriba en celular — las dos juntas
     serían redundantes y se comerían pantalla por partida doble. */
  .tabs {
    display: none;
  }

  /* Espacio para que la barra fija de abajo no tape el pie de página — el
     alto real de .bottom-tabs (con safe-area incluido) más un colchón. Va
     SOLO aquí, no también en `main`: el pie de página es lo último del
     documento, así que ya es la única clearance que hace falta — tenerla
     en los dos lugares dejaba un tramo de espacio casi vacío al final de
     cada página (se sentía como "scroll infinito" sin serlo). */
  .footer {
    margin-bottom: 88px;
  }

  .bottom-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    background: none;
    border: none;
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
  }

  /* Sin esto, [hidden] no le gana a "display: flex" de arriba (misma
     especificidad, y flex está declarado después) — la pestaña "Mi Perfil"
     (#bottom-tab-mi-perfil, ver js/main.js) se seguiría viendo sin sesión
     iniciada aunque JS le ponga el atributo `hidden`. Mismo bug ya corregido
     arriba para la nav de escritorio (ver .tabs a[hidden]). */
  .bottom-tab[hidden] {
    display: none;
  }

  .bottom-tab i {
    font-size: 18px;
  }

  .bottom-tab.active {
    color: var(--accent-text);
  }

  /* El panel "Más" arranca oculto vía el atributo `hidden` del HTML — solo
     hace falta describir cómo se ve cuando JS se lo quita. Va ANTES que
     .bottom-tabs en el DOM para apilarse encima sin z-index especial.
     Pantalla completa tipo "apps del celular" (ver APPS_GRID en
     js/main.js) — a propósito, en vez del panelito chico de antes: incluye
     TODO lo navegable, no solo lo que no cabía en la barra de abajo. */
  .more-sheet:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 45;
    /* Misma trama diagonal + resplandor del <body> (ver más arriba) — un
       fondo plano se sentía vacío con solo unos íconos flotando encima;
       esto le da la misma textura y profundidad que el resto del sitio. */
    background:
      repeating-linear-gradient(135deg, var(--pattern-line) 0 1px, transparent 1px var(--pattern-gap)),
      radial-gradient(1200px 500px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%),
      var(--bg);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .more-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
  }

  .more-sheet-header h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0;
  }

  .more-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .more-sheet-close:active {
    transform: scale(0.88);
    background: var(--surface-raised);
  }

  /* Grid de "apps" — 3 por renglón, ícono en su propio cuadro redondeado
     arriba del nombre, como la pantalla de inicio de un celular. Cada tile
     entra con un pequeño "pop" escalonado (más estilo que aparecer de
     golpe) — se reinicia solo cada vez que se abre el panel, porque
     `.more-sheet` pasa de display:none a flex (el navegador reinicia
     animaciones al re-insertar en el árbol de render). */
  .more-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 14px;
    /* `flex: 1` + `align-content: center` reparte el espacio sobrante
       arriba y abajo del grid en vez de dejarlo todo amontonado hasta el
       fondo de la pantalla (lo que se sentía "vacío" con pocos íconos en
       un celular alto). */
    flex: 1;
    align-content: center;
  }

  /* :is(a, button) — el tile de Tema es un <button> (dispara JS, no
     navega, ver js/theme.js), pero se ve idéntico a los demás: mismo reset
     de estilos nativos de botón (borde/fondo/fuente) para que no se note
     la diferencia. */
  .more-sheet-grid a,
  .more-sheet-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    animation: more-app-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  }

  /* El `display: flex` de arriba le gana al `display: none` por default del
     atributo `hidden` (mismo patrón de bug ya visto en este archivo con
     nav-mi-perfil/bottom-tab-mi-perfil — cualquier regla de autor que toque
     `display` le gana al estilo por default del navegador, sin importar
     especificidad). Sin esto, un tile oculto (Mi Perfil sin sesión,
     Admin/Iniciar/Cerrar sesión según el estado) se seguía viendo igual. */
  .more-sheet-grid a[hidden],
  .more-sheet-grid button[hidden] {
    display: none;
  }

  .more-sheet-grid :nth-child(1) { animation-delay: 0.02s; }
  .more-sheet-grid :nth-child(2) { animation-delay: 0.05s; }
  .more-sheet-grid :nth-child(3) { animation-delay: 0.08s; }
  .more-sheet-grid :nth-child(4) { animation-delay: 0.11s; }
  .more-sheet-grid :nth-child(5) { animation-delay: 0.14s; }
  .more-sheet-grid :nth-child(6) { animation-delay: 0.17s; }
  .more-sheet-grid :nth-child(7) { animation-delay: 0.2s; }
  .more-sheet-grid :nth-child(8) { animation-delay: 0.23s; }
  .more-sheet-grid :nth-child(9) { animation-delay: 0.26s; }
  .more-sheet-grid :nth-child(10) { animation-delay: 0.29s; }
  .more-sheet-grid :nth-child(n + 11) { animation-delay: 0.32s; }

  @keyframes more-app-in {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.85);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .more-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--surface-raised), var(--surface-alt));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--accent-text);
    font-size: 1.6rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .more-sheet-grid a:active .more-app-icon,
  .more-sheet-grid button:active .more-app-icon {
    transform: scale(0.9);
  }

  .more-sheet-grid a.active .more-app-icon {
    background: linear-gradient(160deg, var(--accent-text), var(--accent));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 65%, transparent);
  }

  .more-sheet-grid a span:last-child,
  .more-sheet-grid button span:last-child {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
  }

  .more-sheet-grid a.active span:last-child {
    color: var(--accent-text);
  }
}

main {
  /* `flex: 1` es lo que empuja el footer hasta abajo cuando sobra espacio.
     `width: 100%` hace falta porque en columna el flex mide los ítems por su
     contenido, y sin él la caja se encogería en las vistas cortas. */
  flex: 1;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

h2 {
  font-family: var(--font-display);
  margin: 0 0 22px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: normal;
  display: inline-block;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 6px;
}

h2 + * {
  margin-top: 0;
}

main h2 + h3 {
  margin-top: 0;
}

main h3 {
  font-family: var(--font-display);
  margin: 28px 0 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

main h3::before {
  content: "";
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

.subtitle {
  color: var(--muted);
  margin: 10px 0 16px;
  font-size: var(--text-md);
}

.glossary {
  color: var(--muted);
  font-size: var(--text-2xs);
  line-height: 1.7;
  margin: 25px 2px 0;
  text-align: center;
}

.glossary strong {
  color: var(--text);
}

.game-hero {
  position: relative;
  text-align: center;
  background: linear-gradient(160deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  margin: 16px 0 28px;
  box-shadow: var(--shadow-raised);
}

/* Badge de Debut, esquina superior derecha del perfil (ver
   js/views/jugador.js) — antes vivía aquí el estado de inscripción
   ("Pagada"/"Sin pagar"), se quitó a petición expresa y Debut tomó su
   lugar. Vacío y sin tamaño si el jugador no tiene `seasons` capturado
   (renderDebut() regresa ""). margin:0 en el .debut-badge de adentro:
   trae su propio margin (pensado para ir centrado en flujo normal, ver
   más abajo), que aquí sobra. */
#profile-debut-badge {
  position: absolute;
  top: 14px;
  right: 14px;
}

#profile-debut-badge .debut-badge {
  margin: 0;
  padding: 5px 12px;
  font-size: var(--text-2xs);
}

@media (max-width: 640px) {
  /* En la esquina se encima con la foto de perfil en pantallas angostas —
     aquí se saca del position:absolute y se pone en flujo normal, arriba
     de la foto (ver #profile-avatar en js/views/jugador.js, justo después
     en el HTML). */
  #profile-debut-badge {
    position: static;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  #profile-debut-badge .debut-badge {
    padding: 4px 9px;
    font-size: 9px;
    letter-spacing: 0.01em;
  }
}

/* Dos renglones apilados en vez de uno solo en fila: el nuestro siempre en
   grande, el del rival (+ "VS") chico — arriba o abajo según quién abre la
   entrada (ver teamsHtml en js/views/juego.js). */
.game-hero-teams {
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
}

.game-hero-team--us {
  font-weight: 700;
  /* Mismo tamaño que el marcador (.game-hero-score), a petición expresa —
     ese no se achica en celular, así que este tampoco (envuelve a 2
     líneas solo si de plano no cabe, en vez de encogerse). */
  font-size: var(--text-4xl);
  line-height: 1.05;
}

.game-hero-team--them {
  font-weight: 700;
  font-size: var(--text-md);
}

.game-hero-vs {
  color: var(--accent-text);
  font-weight: 800;
}

.game-hero-score {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  margin: 10px 0;
}

.game-hero-score .sep {
  color: var(--muted);
  margin: 0 16px;
  font-style: normal;
}

.game-hero-score.pending {
  font-size: var(--text-2xl);
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.game-hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.game-hero-date {
  /* Antes centrada arriba del badge de resultado — se saca del flujo y se
     manda a la esquina, chica, mismo patrón que #profile-debut-badge, para
     que el badge de Victoria/Derrota quede como lo primero que se lee. */
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--muted);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Solo en un juego de playoffs (ver findGame en js/views/juego.js) — el
   marcador de la serie se recalcula en vivo, nunca se guarda a mano. */
.game-hero-playoff-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 10px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg, #ffd76a, #d4a017);
  color: #4a3200;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: fit-content;
}

.game-hero-meta .badge {
  padding: 6px 14px;
  font-size: var(--text-sm);
}

.game-hero-replay {
  margin-top: 10px;
}

@media (max-width: 640px) {
  /* El renglón nuestro se queda del tamaño del marcador también en
     celular (ver .game-hero-team--us arriba) — solo el del rival se achica
     un poco más aquí. */
  .game-hero-team--them {
    font-size: var(--text-sm);
  }
}

/* ---- Tarjeta principal del perfil de jugador (js/views/jugador.js) ----
   Clase propia (no .game-hero — esa es la del detalle de un juego, otro
   contenido): foto grande a la izquierda con nombre/posiciones/meta a la
   derecha en escritorio; se apila y centra en móvil, como antes. */
.profile-hero {
  position: relative;
  background: linear-gradient(160deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  margin: 16px 0 28px;
  box-shadow: var(--shadow-raised);
}

.profile-hero-top {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Foto + posiciones, una columna aparte a la izquierda — las posiciones
   quedan pegadas al avatar (debajo, centradas) tanto en escritorio como en
   móvil, a propósito. */
.profile-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Anillo rojo + glow alrededor de la foto — el "gap" antes del anillo es el
   borde color --surface, así se ve como un aro separado de la foto en vez
   de un borde pegado directo a la imagen. position:relative es para anclar
   el overlay de cámara de abajo (solo existe en tu propio perfil). */
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
}

.profile-avatar-wrap .avatar {
  border: 4px solid var(--accent);
  box-shadow: 0 0 0 4px var(--surface), 0 10px 26px rgba(226, 32, 47, 0.4);
}

/* Overlay de cámara al pasar el mouse sobre tu propia foto — invisible
   hasta el hover/focus, para no ensuciar la foto con un ícono todo el
   tiempo. Solo existe en tu propio perfil (ver isOwnProfile en
   js/views/jugador.js); el clic abre el mismo <input type="file"> que ya
   usaba "Editar perfil", solo más directo. */
.profile-avatar-overlay {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.6rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}

.profile-avatar-wrap:hover .profile-avatar-overlay,
.profile-avatar-overlay:focus-visible {
  opacity: 1;
}

/* Barra de progreso de asistencia ("9/10 juegos jugados") — reemplaza el
   chip de texto plano de antes. */
/* Esquina inferior derecha en escritorio (mismo truco que Debut arriba, ver
   #profile-debut-badge) — position:relative de .profile-hero (el
   antepasado) es lo que ancla esto, sin importar que .profile-attendance
   viva varios niveles adentro (.profile-hero-top > .profile-hero-info). En
   móvil se revierte a flujo normal, ver @media más abajo. */
.profile-attendance {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 200px;
}

.profile-attendance-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 6px;
}

.profile-attendance-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}

.profile-attendance-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

/* Posiciones junto al nombre — tamaño escalado a algo entre el pill
   original (0.8rem) y el nombre (2rem): igual de grande se vería
   desproporcionado para una píldora tan corta. */
/* align-self:center (no baseline, que es lo que hereda de .profile-hero-name
   de arriba) — una píldora rellena no tiene una "línea base" de texto que se
   alinee bien con el nombre, se veía chueca. gap + margin:0 en vez del
   margen chico de .pos-badge (pensado para su tamaño normal, se sentía
   apretado ya en este tamaño más grande). */
.profile-hero-name-positions {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
}

.profile-hero-name-positions .pos-badge {
  font-size: var(--text-xl);
  margin: 0;
}

.profile-hero-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.profile-hero-name {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--text-3xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.15;
}

.profile-hero-number {
  color: var(--accent-text);
  font-style: italic;
}

.profile-hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.profile-meta-chip i {
  color: var(--accent);
}

.profile-meta-chip--mvp {
  border-color: #f5b942;
  color: #f5b942;
  background: rgba(245, 185, 66, 0.12);
}

.profile-meta-chip--mvp i {
  color: #f5b942;
}

/* renderWalkup() trae su propio centrado (pensado para .game-hero, con
   text-align:center) — aquí la info va alineada a la izquierda, así que se
   corrige nomás para este dentro del perfil. Debut ya no vive en
   .profile-hero-info (se movió a la esquina, ver #profile-debut-badge más
   arriba), así que se quita de esta regla. */
.profile-hero-info .walkup {
  margin-left: 0;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .profile-hero-top {
    flex-direction: column;
    text-align: center;
  }

  .profile-hero-info {
    align-items: center;
  }

  .profile-hero-name {
    justify-content: center;
    font-size: var(--text-2xl);
  }

  /* flex-basis:100% en un flex-wrap las manda a su propio renglón, debajo
     del nombre, en vez de intentar quedarse en la misma línea (que en
     escritorio sí cabe, pero en un nombre largo en celular no). */
  .profile-hero-name-positions {
    flex-basis: 100%;
    justify-content: center;
  }

  .profile-hero-meta-row {
    justify-content: center;
  }

  .profile-attendance {
    position: static;
    width: auto;
    max-width: 260px;
    margin: 12px auto 0;
  }

  .profile-attendance-label {
    text-align: center;
  }

  .profile-hero-info .walkup {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

/* display:flex (no inline-flex) + width:fit-content + margin:auto en vez de
   depender del text-align:center del padre (.game-hero): un inline-flex es
   una caja de línea, así que dos de estos cabiendo uno junto al otro se
   quedan en el mismo renglón — con esto cada uno siempre ocupa su propio
   renglón, uno arriba del otro, aunque haya espacio de sobra a los lados. */
.mvp-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid #f5b942;
  background: rgba(245, 185, 66, 0.12);
  color: #f5b942;
  font-size: var(--text-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* "Debut: ..." en el perfil (ver renderDebut en js/views/jugador.js) —
   mismo tratamiento de píldora que .mvp-badge (incluyendo mayúsculas y
   renglón propio), pero en el color de acento del sitio en vez de dorado,
   para no confundirse con el MVP. */
.debut-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: rgba(226, 32, 47, 0.12);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Insignias de logros del perfil (ver renderAchievements en
   js/views/jugador.js) — formato de medalla: un círculo a color con el
   ícono y el nombre chico debajo, todas del mismo tamaño, en cuadrícula.
   El color va por CATEGORÍA (`kind`), no por logro individual — todos los
   de una misma categoría comparten uno, para que de un vistazo se
   distinga qué tipo de logro es cada quien. */
.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  gap: 18px 14px;
}

/* Tarjeta del medallero: position:relative para anclar el botón de la guía
   en la esquina (ver js/views/jugador.js MEDALLERO_HEADER()). */
.medallero-card {
  position: relative;
}

/* Conteo "14/46" junto al título — normal (no mayúsculas ni tracking como
   el resto del h3), en el rojo de acento para que se lea como un dato, no
   como parte del label. */
.medallero-count {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  color: var(--accent-text);
}

/* Más espacio entre "Medallero" y la primera fila de medallas — .leader-card
   h3 (8px) + .achievements-grid (10px) se sentía pegado. Escalado a esta
   tarjeta nomás, no a .leader-card h3 en general. Doble clase (en vez de
   solo .medallero-card h3) para ganarle en especificidad a `.leader-card
   h3` de abajo — con la misma especificidad, esa queda después en el
   archivo y se imponía. */
.leader-card.medallero-card h3 {
  margin-bottom: 20px;
}

.medallero-guide-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.medallero-guide-btn:hover {
  background: var(--accent-glow);
}

@media (max-width: 640px) {
  /* En celular no cabe anclado en la esquina — pasa a flujo normal, debajo
     de las medallas (el HTML ya lo pone después de .achievements-grid, ver
     js/views/jugador.js) y centrado, con espacio de sobra arriba para que
     no se sienta pegado. */
  .medallero-guide-btn {
    position: static;
    display: flex;
    width: fit-content;
    margin: 20px auto 0;
  }

  /* Icono + "Medallero" centrados en celular (en escritorio se quedan a la
     izquierda, alineados con el resto de tarjetas). */
  .leader-card.medallero-card h3 {
    align-items: center;
    text-align: center;
  }
}

.achievement-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 88px;
  text-align: center;
}

.achievement-medal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

/* Ya se ve como una historia destacada de Instagram (círculo + label
   debajo) — este medallero es exclusivo de cuenta de por sí, así que basta
   un toque sutil de interacción, sin tocar el color por categoría de cada
   ícono (ver .achievement-medal--* más abajo, es la señal de qué tipo de
   logro es cada uno). */
.achievement-medal:hover .achievement-medal-icon {
  transform: translateY(-3px);
}

.achievement-medal-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.25;
}

/* Trayectoria con el equipo: fundador, temporadas, ligas jugadas. Azul
   marino, a petición expresa. */
.achievement-medal--trajectory .achievement-medal-icon {
  border: 2px solid #2c4ec9;
  background: rgba(44, 78, 201, 0.15);
  color: #2c4ec9;
  box-shadow: 0 0 12px rgba(44, 78, 201, 0.35);
}

/* Racha de hits vigente. Naranja/rojo fuego bien brillante — a propósito,
   combina con los íconos de esta categoría (fa-fire, fa-fire-flame-curved).
   Distinto del dorado/bronce del podio (más abajo) y del rojo puro de
   dues-unpaid. */
.achievement-medal--streak .achievement-medal-icon {
  border: 2px solid #ff5722;
  background: rgba(255, 87, 34, 0.15);
  color: #ff5722;
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.35);
}

/* "Ice Cold" — racha SIN hit vigente, o sea negativa como Punch-Out/Wild
   Thing/Gopher Ball/Butterhands (más abajo) — mismo rojo que esas, para no
   confundirse con el cian de threshold (All-Star/Cycle) ni con el
   naranja/fuego de streak (arriba), que son categorías "buenas". */
.achievement-medal--ice .achievement-medal-icon {
  border: 2px solid #dc2626;
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.35);
}

/* Podio del equipo en esta estadística esta temporada — oro/plata/bronce
   según el lugar (1/2/3, ver podiumChip() en js/views/jugador.js). Oro es
   el mismo dorado que .mvp-badge a propósito, es la misma idea de fondo. */
.achievement-medal--gold .achievement-medal-icon {
  border: 2px solid #f5b942;
  background: rgba(245, 185, 66, 0.15);
  color: #f5b942;
  box-shadow: 0 0 12px rgba(245, 185, 66, 0.35);
}

.achievement-medal--silver .achievement-medal-icon {
  border: 2px solid #c4cdd6;
  background: rgba(196, 205, 214, 0.15);
  color: #c4cdd6;
  box-shadow: 0 0 12px rgba(196, 205, 214, 0.35);
}

.achievement-medal--bronze .achievement-medal-icon {
  border: 2px solid #cd7f32;
  background: rgba(205, 127, 50, 0.15);
  color: #cd7f32;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.35);
}

/* Podio "negativo" — mismo mecanismo que oro/plata/bronce de arriba, pero
   para estadísticas donde ser el #1 es un chiste, no un logro (Punch-Out,
   Wild Thing, Gopher Ball, Butterhands, ver `negative: true` en addPodium()
   en js/views/jugador.js). Un solo rojo para las tres, a propósito — a
   diferencia del oro/plata/bronce real, aquí el lugar no importa tanto como
   "es una de las negativas". */
.achievement-medal--neg-gold .achievement-medal-icon,
.achievement-medal--neg-silver .achievement-medal-icon,
.achievement-medal--neg-bronze .achievement-medal-icon {
  border: 2px solid #dc2626;
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.35);
}

/* Umbral fijo: cruzaste una marca (ej. AVG .300), no depende de ser el #1. */
.achievement-medal--threshold .achievement-medal-icon {
  border: 2px solid #22d3ee;
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

/* Asistencia y versatilidad. */
.achievement-medal--participation .achievement-medal-icon {
  border: 2px solid var(--pos-catcher);
  background: rgba(168, 85, 247, 0.15);
  color: var(--pos-catcher);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

/* Interactuar con el sitio: like a un anuncio, comentar, votar MVP, o
   personalizar tu perfil (foto, walkup song) — antes "profile" tenía su
   propio color, se fusionó aquí porque las dos categorías son la misma
   idea ("interactuar con el sitio", no "jugar"). Rosa — el mismo que tenía
   streak antes de pasarse a naranja/fuego (arriba), así queda libre para
   esta categoría sin chocar con nada. */
.achievement-medal--social .achievement-medal-icon {
  border: 2px solid var(--pos-special);
  background: rgba(255, 111, 181, 0.15);
  color: var(--pos-special);
  box-shadow: 0 0 12px rgba(255, 111, 181, 0.35);
}

/* Estado de inscripción — mismo verde/rojo que ya usa el badge "Estado de
   inscripción" (.stat-green/.stat-red) junto a estas medallas. */
.achievement-medal--dues-paid .achievement-medal-icon {
  border: 2px solid var(--win);
  background: rgba(63, 181, 111, 0.15);
  color: var(--win);
  box-shadow: 0 0 12px rgba(63, 181, 111, 0.35);
}

.achievement-medal--dues-unpaid .achievement-medal-icon {
  border: 2px solid var(--loss);
  background: rgba(226, 32, 47, 0.15);
  color: var(--loss);
  box-shadow: 0 0 12px rgba(226, 32, 47, 0.35);
}

/* Explica cada logro al pasar el mouse (o al enfocarlo con teclado, ver
   tabindex en achievementMedalHtml() en js/views/jugador.js) — sin esto,
   una medalla es solo un icono y una palabra suelta, sin decir cómo se
   ganó. */
.achievement-medal {
  position: relative;
}

.achievement-medal[data-tooltip]:hover::after,
.achievement-medal[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  width: max-content;
  max-width: 170px;
  text-align: center;
  line-height: 1.4;
  z-index: 20;
  pointer-events: none;
}

.achievement-medal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: filter 0.15s;
}

.replay-btn:hover {
  filter: brightness(1.15);
}

@keyframes badge-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.badge-blink {
  animation: badge-blink 1.1s ease-in-out infinite;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 14px 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: border-color 0.15s, color 0.15s;
}

.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Guía de medallas (js/views/medallas.js): el título va notoriamente
   debajo del botón de volver, no pegado. .back-link normal es
   inline-flex — comparte renglón con el h2 de al lado (que también es
   inline-block) si hay espacio horizontal, en vez de forzar el salto de
   línea. display:flex (a diferencia de inline-flex) SÍ garantiza su propio
   renglón; width:fit-content evita que ese display de bloque estire el
   botón a todo lo ancho del contenedor. */
.back-link--spaced {
  display: flex;
  width: fit-content;
  margin-bottom: 32px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 28px;
}

.card {
  position: relative;
  background: linear-gradient(160deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
}

.card:hover {
  transform: translateY(-2px);
}

.card-icon {
  font-size: var(--text-3xl);
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .card-icon {
    font-size: var(--text-3xl);
  }
}

.card-icon::before,
.leader-card h3 i::before {
  background: linear-gradient(135deg, #ff5a6e, var(--accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
}

.card-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Insignia "en qué lugar del equipo vas" en esta estadística — SOLO en tu
   propio perfil (ver rankBadge en js/views/jugador.js), nadie más la ve en
   tu tarjeta ni tú en la de alguien más. */
.card-rank {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: var(--radius-pill);
}

.leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.leaders .leader-card {
  flex: 1 1 240px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .cards,
  .leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaders {
    display: grid;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Carrusel horizontal para las filas de tarjetas de Resumen (récord,
     stats de equipo, líderes, récords de temporada) — reemplaza la grilla
     de 2 columnas de arriba solo donde la vista agrega `tab-carousel` al
     contenedor. Compuesto con la clase base (`.cards.tab-carousel`, no
     `.tab-carousel` suelto) para ganarle por especificidad a esa grilla sin
     depender de en qué orden queden declaradas las reglas. Cada tarjeta al
     82% del ancho dice "hay más" con solo asomar el borde de la siguiente
     — nada de JS de scroll, que ya se intentó antes en esta sesión y costó
     más de lo que valía verificar. */
  .cards.tab-carousel,
  .leaders.tab-carousel,
  .records-grid.tab-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 10px;
    padding-bottom: 2px;
  }

  .cards.tab-carousel::-webkit-scrollbar,
  .leaders.tab-carousel::-webkit-scrollbar,
  .records-grid.tab-carousel::-webkit-scrollbar {
    display: none;
  }

  .cards.tab-carousel > *,
  .leaders.tab-carousel > *,
  .records-grid.tab-carousel > * {
    scroll-snap-align: start;
    flex: 0 0 82%;
  }
}

.section-gap {
  margin-top: 14px;
}

.leader-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
}

.leader-card--hero {
  border-top-color: var(--accent);
}

/* ---- Playoffs (js/views/playoffs.js) ---- */

.playoff-season-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-sm);
  margin-bottom: 16px;
}

.playoff-status--progress {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-alt));
  color: var(--accent-text);
}

.playoff-status--out {
  background: color-mix(in srgb, var(--loss) 18%, var(--surface-alt));
  color: var(--loss);
}

.playoff-status--champ {
  background: linear-gradient(160deg, #ffd76a, #d4a017);
  color: #4a3200;
}

.playoff-round-card h3 {
  margin-bottom: 2px;
}

.playoff-games-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

/* Grid 1fr · auto · 1fr (no flex space-between): así el marcador queda
   centrado de verdad en la fila, sin importar qué tan larga sea la fecha. */
.playoff-game-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: border-color 0.15s;
}

.playoff-game-row:hover {
  border-color: var(--accent);
}

.playoff-game-score {
  text-align: center;
}

.playoff-game-result {
  font-weight: 700;
  text-align: right;
}

/* .leader-card normalmente vive dentro de un contenedor con `gap` (ver
   .leaders más abajo), que separa una tarjeta de la siguiente — pero en el
   perfil (Logros, Tu resumen) van sueltas, una tras otra directo en el
   contenedor, así que sin esto quedan con los bordes pegados. Estilo
   normal a propósito (sin degradado ni invertir el borde): esos cambios
   son solo para las tarjetas de Resumen, no las de perfil. */
.player-standalone-card {
  margin-bottom: 16px;
}

.leader-card:hover {
  transform: translateY(-2px);
}

.leader-card h3 {
  font-family: var(--font-display);
  margin: 0 0 8px;
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.leader-card h3::before {
  content: none;
}

.leader-card h3 i {
  color: var(--accent);
  font-size: var(--text-3xl);
}

/* Rojo, no el blanco/plateado de arriba — pero SOLO en las tarjetas "hero"
   de Resumen (récords, líderes, stats de equipo, etc: todas con el mismo
   estilo, degradado blanco de fondo + icono rojo). Las de perfil
   (Medallero, Tu resumen) se quedan con el .leader-card h3 i de arriba. */
.leader-card--hero h3 i {
  color: var(--accent);
}

.leader-card--hero h3 i::before {
  background: linear-gradient(135deg, #ff5a6e, var(--accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 640px) {
  .leader-card h3 i {
    font-size: var(--text-3xl);
  }
}

.leader-card p {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
}

/* Solo el "vs" usa .leader-hero-value (el mismo tamaño gigante del número
   en Racha actual / Juegos jugados, etc.) — el rival sigue en el tamaño
   normal de `.leader-card p`. La fecha/hora va aparte, más chica, debajo.
   Doble clase para ganarle en especificidad a `.leader-card p`. */
.leader-card p.next-game-info {
  margin-top: 4px;
  font-size: var(--text-md);
}

/* En rojo para que se lea como una advertencia y no como un puesto más de
   la lista. Va con doble clase porque `.leader-card p` le gana en
   especificidad a una sola y le impondría el tamaño grande en itálicas del
   líder. */
.leader-card .leader-note {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;
  color: var(--accent-text);
}

/* Tarjetas "hero": mismo .leader-card de siempre, pero con un encabezado a
   color (número grande + foto o insignia a la derecha) en vez del <p>
   simple que usaba leaderCardHtml. La usan Líderes de la temporada (con
   2do/3er lugar abajo, ver .leader-runners) y el resto de tarjetas de
   Resumen que muestran un solo valor (Próximo juego, Racha actual, Racha
   reciente, Juegos jugados, Stats de equipo) sin lista de abajo, ver
   .leader-hero-body. */
.leader-card--hero {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Degradado negro a propósito en TODAS las tarjetas hero de Resumen
   (récords, líderes, stats de equipo, etc.) — mismo estilo, descartado el
   degradado rojo que tenían algunas antes (el azul que se probó después se
   veía muy brillante). */
.leader-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 14px;
  background: linear-gradient(160deg, var(--hero-shade) 0%, transparent 65%), var(--surface);
}

.leader-hero-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.leader-hero-main h3 {
  margin-bottom: 10px;
}

.leader-hero-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--text);
}

.leader-hero-name {
  margin-top: 6px;
  font-size: var(--text-md);
  font-weight: 700;
}

.leader-hero-detail {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
}

.leader-hero-avatar {
  flex-shrink: 0;
}

/* Envoltorio <a> de un avatar hacia el perfil del jugador (ver avatarSlot()
   en js/views/resumen.js) — sin subrayado porque no lleva texto, solo la
   foto/iniciales. */
.avatar-slot {
  display: inline-block;
  text-decoration: none;
}

.leader-hero-avatar .avatar {
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-card);
}

/* Contenido extra debajo del encabezado a color que NO es una lista de
   2do/3er lugar (eso es .leader-runners) — la barra de progreso de "Juegos
   jugados", los chips de "Racha reciente", los botones de RSVP de "Próximo
   juego". */
.leader-hero-body {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
}

.leader-runners {
  border-top: 1px solid var(--border);
  padding: 4px 16px;
}

.leader-runner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.leader-runner-row + .leader-runner-row {
  border-top: 1px solid var(--border);
}

.leader-runner-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-runner-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--muted);
  flex-shrink: 0;
}

.leader-card--hero .leader-note {
  padding: 0 16px 14px;
}

.form-strip {
  display: flex;
  gap: 10px;
}

.badge.form-chip {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--text-md);
}

.stats-table th,
.stats-table td {
  padding: 11px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.stats-table td.numeric,
.stats-table th.numeric {
  font-variant-numeric: tabular-nums;
}

.stats-table thead th {
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.stats-table thead th:hover {
  color: var(--text);
}

.stats-table.not-sortable thead th {
  cursor: default;
}

.stats-table.not-sortable thead th:hover {
  color: var(--muted);
}

.stats-table thead th.sort-asc::after {
  content: " \25B2";
  color: #fff;
}

.stats-table thead th.sort-desc::after {
  content: " \25BC";
  color: #fff;
}

.stats-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

.stats-table tbody tr:last-child td {
  border-bottom: none;
}

.stats-table tbody tr:hover {
  background: var(--surface-alt);
  box-shadow: inset 3px 0 0 var(--accent);
}

.stats-table tbody tr.clickable-row {
  cursor: pointer;
}

/* Columna congelada: se queda a la vista mientras el resto de la tabla
   scrollea en horizontal. El `left` lo calcula ui.js según el ancho real. */
.stats-table th.sticky-col,
.stats-table td.sticky-col {
  position: sticky;
  z-index: 1;
  background-color: var(--surface);
}

.stats-table thead th.sticky-col {
  z-index: 3;
  background-color: var(--surface-alt);
}

/* El velo de las filas pares vive en el <tr>, pero la celda congelada necesita
   fondo opaco propio, así que se repinta aquí encima. */
.stats-table tbody tr:nth-child(even) td.sticky-col {
  background-image: linear-gradient(var(--zebra), var(--zebra));
}

.stats-table tbody tr:hover td.sticky-col {
  background-color: var(--surface-alt);
}

/* La barra de acento del hover la pinta el <tr>, pero queda tapada por la
   celda congelada; se vuelve a dibujar sobre ella. */
.stats-table tbody tr:hover td.sticky-col-first {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Filo que marca dónde termina lo congelado y empieza lo que se mueve. */
.stats-table th.sticky-col-last::before,
.stats-table td.sticky-col-last::before {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

/* Nuestra fila en la tabla de posiciones: hay 18 equipos y sin esto hay que
   ir leyendo nombre por nombre para encontrarnos. */
.stats-table tbody tr.standings-us td {
  background-color: rgba(226, 32, 47, 0.1);
  font-weight: 700;
  color: var(--text);
}

.stats-table tbody tr.standings-us td.sticky-col {
  background-color: var(--row-you-solid);
}

.stats-table tbody tr.standings-us td.sticky-col-first {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Tu propia fila en cualquier tabla donde aparezcas (Roster, Bateo,
   Pitcheo, Fildeo, el line-up de un juego, la alineación sugerida) — mismo
   tratamiento (y mismo rojo) que .standings-us de arriba; nunca aparecen
   juntas en una misma tabla (esa es de equipos, esta de jugadores), así
   que no hay ambigüedad de cuál "tú" es cuál. */
.stats-table tbody tr.row-you td {
  background-color: rgba(226, 32, 47, 0.1);
  font-weight: 700;
  color: var(--text);
}

.stats-table tbody tr.row-you td.sticky-col {
  background-color: var(--row-you-solid);
}

.stats-table tbody tr.row-you td.sticky-col-first {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Misma idea para tarjetas (posiciones sugeridas / banca en el generador
   de alineación). El filo de arriba de .card ya es rojo por default, así
   que ahí no alcanza para distinguirse — se agrega un aro completo más un
   tinte de fondo, mismo rojo que .row-you de arriba. */
.card.card-you {
  background: linear-gradient(160deg, rgba(226, 32, 47, 0.14), var(--surface));
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}

.stats-table td.empty {
  text-align: center;
  color: var(--muted);
  padding: 28px;
}

.stat-red {
  color: var(--accent-text);
  font-weight: 400;
}

.stat-green {
  color: var(--win);
  font-weight: 400;
}

/* Guía de medallas (js/views/medallas.js): "Cargando…" / "Todavía no" /
   "Requiere sesión" en la columna de estado. */
.medalla-status-pending {
  color: var(--muted);
}

/* La columna de icono no necesita ancho de texto — el resto sí se pueden
   quebrar en celular en vez de forzar scroll horizontal enorme. */
.medallas-table td:first-child {
  width: 1%;
}

.medallas-table .achievement-medal {
  width: auto;
}

/* Columna "Inscripción" en Roster — un ícono, siempre de solo lectura
   (incluso para el coach: marcarla solo se puede desde admin.html, ver
   js/admin-dues.js). */
/* Círculo con el mismo estilo que los .pos-badge (borde de color, fondo
   translúcido del mismo color, ícono a color) — ver renderDuesCell en
   js/views/roster.js. */
.dues-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-alt);
  font-size: var(--text-xs);
}

/* ✓ / ✕ en SVG (ver DUES_SVG en js/views/roster.js) — trazo del color del
   círculo, centrado exacto. */
.dues-icon svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dues-icon-paid {
  border-color: var(--win);
  color: var(--win);
  background: color-mix(in srgb, var(--win) 12%, transparent);
}

.dues-icon-unpaid {
  border-color: var(--accent-text);
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
}

/* Ni verde ni rojo: todavía no se sabe (cargando, o la consulta falló
   incluso tras reintentar) — ver renderDuesCell en js/views/roster.js. */
.dues-icon-unknown {
  border-color: var(--muted);
  color: var(--muted);
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-win {
  background: rgba(63, 181, 111, 0.15);
  color: var(--win);
}

.badge-loss {
  background: rgba(226, 32, 47, 0.15);
  color: var(--loss);
}

.badge-tie,
.badge-unknown {
  background: rgba(141, 150, 160, 0.15);
  color: var(--tie);
}

/* Chips de filtro rápido por posición en Roster — mismo código de color que
   los pos-badge de abajo, pero como control clicable en vez de solo
   indicador. */
.pos-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}

.pos-filter-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
}

.pos-filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pos-filter-chip[data-group="P"].active {
  background: var(--pos-pitcher);
  border-color: var(--pos-pitcher);
  color: var(--bg);
}

.pos-filter-chip[data-group="C"].active {
  background: var(--pos-catcher);
  border-color: var(--pos-catcher);
  color: var(--bg);
}

.pos-filter-chip[data-group="IF"].active {
  background: var(--pos-infield);
  border-color: var(--pos-infield);
  color: var(--bg);
}

.pos-filter-chip[data-group="OF"].active {
  background: var(--pos-outfield);
  border-color: var(--pos-outfield);
  color: var(--bg);
}

.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  padding: 2px 0;
  margin: 1px 3px 1px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

.pos-badge-p {
  border-color: var(--pos-pitcher);
  color: var(--pos-pitcher);
  background: rgba(74, 158, 255, 0.12);
}

.pos-badge-c {
  border-color: var(--pos-catcher);
  color: var(--pos-catcher);
  background: rgba(168, 85, 247, 0.12);
}

.pos-badge-if {
  border-color: var(--pos-infield);
  color: var(--pos-infield);
  background: rgba(226, 201, 63, 0.12);
}

.pos-badge-of {
  border-color: var(--pos-outfield);
  color: var(--pos-outfield);
  background: rgba(63, 181, 111, 0.12);
}

.pos-badge-jd {
  border-color: var(--pos-dh);
  color: var(--pos-dh);
  background: rgba(255, 140, 51, 0.12);
}

.pos-badge-special {
  border-color: var(--pos-special);
  color: var(--pos-special);
  background: rgba(255, 111, 181, 0.12);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  vertical-align: middle;
}

.avatar-initials {
  background: linear-gradient(135deg, #ff5a6e, var(--accent-dark));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.cal-title {
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 180px;
  text-align: center;
}

.cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.cal-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-weekday {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 6px;
}

.cal-day {
  min-height: 78px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-day-empty {
  border-color: transparent;
  background: transparent;
}

.cal-day-today {
  border-color: var(--accent);
}

.cal-clickable {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.cal-clickable:hover {
  background: var(--surface-raised);
  transform: translateY(-1px);
}

.cal-daynum {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
}

.cal-day-today .cal-daynum {
  color: var(--accent);
}

/* Día de un juego de playoffs (ver buildEventsByDate en
   js/views/calendario.js) — borde y trofeo con el mismo dorado del badge
   de playoffs (.game-hero-playoff-badge / .playoff-tag). */
.cal-day-playoff {
  position: relative;
  border-color: #d4a017;
}

.cal-playoff-icon {
  color: #d4a017;
  font-size: var(--text-xs);
}

.cal-day .cal-playoff-icon {
  position: absolute;
  top: 7px;
  right: 7px;
}

.cal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.cal-dot.cal-win {
  background: var(--win);
}

.cal-dot.cal-loss {
  background: var(--loss);
}

.cal-dot.cal-tie {
  background: var(--tie);
}

.cal-dot.cal-scheduled {
  background: var(--scheduled);
}

.cal-opponent {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .cal-day {
    min-height: 56px;
    padding: 4px;
  }

  .cal-opponent {
    display: none;
  }

  .cal-title {
    min-width: 140px;
    font-size: var(--text-lg);
  }
}

/* ---- canción de entrada (walk-up song) ---- */

.walkup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Va en un solo renglón. `wrap` es la red de seguridad: con un título muy
     largo en pantalla angosta prefiero que baje de línea a que se desborde. */
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  margin-top: 18px;
  padding: 11px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  text-decoration: none;
  color: var(--text);
  /* Un título de una sola palabra larguísima se saldría de la caja. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.walkup-icon {
  font-size: var(--text-xl);
  color: var(--accent);
  flex-shrink: 0;
}

.walkup-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.walkup-sep {
  font-size: var(--text-md);
  color: var(--muted);
  flex-shrink: 0;
}

.walkup-title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
}

.walkup-artist {
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: 1.3;
}

/* Botón de play al final del renglón; solo existe cuando la canción trae
   link. Va más grande que el icono de plataforma porque es la acción. */
.walkup-play {
  font-size: var(--text-xl);
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 2px;
  transition: color 0.15s;
}

.walkup-link {
  transition: border-color 0.15s, color 0.15s;
}

.walkup-link:hover {
  border-color: var(--accent);
}

.walkup-link:hover .walkup-play {
  color: var(--accent);
}

/* ---- playlist del equipo (js/views/playlist.js) ---- */

/* Botón de play dentro de la tabla de arriba (la playlist en sí) — mismo
   look que .playlist-card-play de las tarjetas de abajo, pero más chico
   para caber cómodo en una celda de tabla. */
/* Nombre del jugador en la tabla de la playlist: link a su perfil. */
.playlist-track-player {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.playlist-track-player:hover {
  color: var(--accent-text);
}

.playlist-track-play {
  font-size: 1.3rem;
  color: var(--accent-text);
  line-height: 1;
}

.playlist-track-play--disabled {
  color: var(--muted);
  opacity: 0.4;
}

/* Tarjetas (foto, jugador, canción, artista, botón de play) — de quién es
   cada canción, debajo de la tabla. 3 columnas fijas en escritorio (a
   petición expresa); en celular, una sola (ver el @media más abajo). */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Esquinas más redondeadas + elevación al hover — look de "tarjeta de
   post" en vez de la caja plana de antes (a petición expresa, la playlist
   ya es exclusiva de cuenta, ver renderPlaylist() en js/views/playlist.js,
   así que este look no se condiciona a html[data-session]). */
.playlist-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-alt);
  transition: box-shadow 0.15s, transform 0.15s;
}

.playlist-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.playlist-card-avatar {
  flex-shrink: 0;
}

.playlist-card-avatar .avatar {
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 3px var(--surface);
}

.playlist-card-body {
  flex: 1;
  min-width: 0;
}

.playlist-card-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}

.playlist-card-name:hover {
  color: var(--accent-text);
}

.playlist-card-title {
  margin: 4px 0 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-card-artist {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-card-play {
  flex-shrink: 0;
  font-size: 1.8rem;
  color: var(--accent-text);
  line-height: 1;
}

.playlist-card-play--disabled {
  color: var(--muted);
  opacity: 0.4;
}

@media (max-width: 900px) {
  /* 3 columnas fijas no caben cómodas por debajo del ancho de tablet — 2
     hasta celular grande, 1 en celular angosto (ver el segundo @media). */
  .playlist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .playlist-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- selector de Bateo/Pitcheo/Fildeo (js/views/estadisticas.js) ----
   Mismo lenguaje visual "app" que .more-sheet-grid (el panel de "Menú" del
   celular, ver más arriba): ícono en su propio cuadro redondeado, nombre
   debajo, resaltado el que está activo. */
.stats-switcher {
  display: flex;
  gap: 16px;
  margin: 18px 0 26px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .stats-switcher {
    justify-content: center;
  }
}

.stats-switcher-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.stats-switcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--surface-raised), var(--surface-alt));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--accent-text);
  font-size: 1.4rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.stats-switcher-btn:active .stats-switcher-icon {
  transform: scale(0.92);
}

.stats-switcher-btn.active .stats-switcher-icon {
  background: linear-gradient(160deg, var(--accent-text), var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}

.stats-switcher-btn span:last-child {
  font-size: var(--text-xs);
  font-weight: 600;
}

.stats-switcher-btn.active span:last-child {
  color: var(--accent-text);
}

@media (max-width: 640px) {
  /* A petición expresa: en celular el renglón NUNCA baja a dos líneas — ni
     aquí ni en el badge de Debut (ver .debut-badge más abajo). Se prioriza
     achicar la letra sobre truncar: cortar el título/artista a "Th…" se ve
     peor que verlo completo mini. Con esto solo se recorta con "…" en el
     caso extremo de una canción con nombre larguísimo (min-width:0 hace
     falta para que un hijo flex pueda encogerse por debajo de su ancho de
     contenido — si no, text-overflow nunca hace nada). */
  .walkup {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 8px 12px;
  }

  .walkup-label,
  .walkup-title,
  .walkup-artist {
    font-size: 9.5px;
  }

  .walkup-icon,
  .walkup-sep,
  .walkup-play {
    font-size: var(--text-md);
  }

  .walkup-title,
  .walkup-artist {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* El badge de Debut es texto uppercase largo ("Debut: 2023 · 1ra
     Temporada · Liga Valle Alto") — se achica lo necesario para que quepa
     completo en un teléfono angosto sin partirse en dos renglones. */
  .debut-badge {
    padding: 5px 10px;
    gap: 5px;
    font-size: 9.5px;
    letter-spacing: 0.01em;
  }
}

/* Botón + formulario para editar la propia canción de entrada — solo se
   pinta en tu propio perfil (ver js/views/jugador.js). Reusa .auth-form/
   .auth-submit/.auth-error de arriba para no repetir estilos de input. */
.walkup-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.walkup-edit-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.walkup-edit-form {
  max-width: 320px;
  margin: 0 auto;
  text-align: left;
}

/* "Editar perfil" es un popup aparte, no un panel que empuja el resto de
   la tarjeta hacia abajo (así era antes, con la animación de
   grid-template-rows) — se muestra sobre un fondo oscurecido, centrado, y
   se cierra con la X, tocando el fondo, o Escape (ver profile-edit-toggle
   en js/views/jugador.js). */
.profile-edit-collapse {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
}

.profile-edit-collapse.open {
  display: flex;
}

body.modal-open {
  overflow: hidden;
}

.profile-edit-collapse > .walkup-edit-form {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
  padding: 20px;
}

.profile-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.profile-edit-modal-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.profile-edit-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}

.profile-edit-close:hover {
  color: var(--text);
}

/* "Editar perfil" es un solo botón para las 3 secciones del panel de
   abajo (posiciones, canción, contraseña) — cada línea divisoria es un
   .profile-edit-heading, no una tarjeta aparte por sección. */
.profile-edit-heading {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.profile-edit-heading:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* RSVP en la tarjeta "Próximo juego" (Resumen) — solo los botones Sí/No
   (con cuenta vinculada a un jugador); quién ya confirmó se ve en
   admin.html (js/admin-rsvp.js), no aquí. */

.rsvp-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.rsvp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

@media (max-width: 640px) {
  /* A petición: "Voy" y "No voy" van uno debajo del otro, cada uno
     ocupando su propio renglón completo — no lado a lado. */
  .rsvp-actions {
    flex-direction: column;
  }

  .rsvp-btn {
    width: 100%;
    padding: 10px 10px;
  }
}

.rsvp-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.rsvp-yes.active {
  background: rgba(63, 181, 111, 0.15);
  border-color: var(--win);
  color: var(--win);
}

.rsvp-no.active {
  background: rgba(226, 32, 47, 0.12);
  border-color: var(--loss);
  color: var(--loss);
}

/* Voto de MVP del equipo, en el detalle de un juego jugado — una tarjeta
   por candidato (foto + números DE ESE JUEGO), no el <select> de antes.
   Botón real (interactivo, ver `canVote` en renderMvpVote) o <div> (nomás
   informativo) según si a quien mira le toca votar — mismo reset de
   estilos nativos de botón que ya usan otros grids de tarjetas del sitio
   (ver .more-sheet-grid button en este mismo archivo). */
.mvp-vote-grid {
  display: grid;
  /* 150px de mínimo — a propósito, para que como mucho quepan 6 columnas
     por renglón (con 7 se veían muy apretadas) en el ancho normal de
     `main` (ver css/styles.css). */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.mvp-vote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--text);
  font-family: inherit;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

button.mvp-vote-card {
  cursor: pointer;
}

button.mvp-vote-card:hover {
  border-color: var(--accent);
}

button.mvp-vote-card:active {
  transform: scale(0.97);
}

.mvp-vote-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
  box-shadow: 0 0 0 1px var(--accent);
}

.mvp-vote-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.2;
}

/* Decisión de pitcheo (W/L/SV), esquina superior IZQUIERDA — a diferencia
   de .mvp-vote-count (la derecha, que sí flota fuera de la tarjeta), esta
   va POR DENTRO (top/left positivos, no negativos): flotando afuera
   chocaba con el badge de la tarjeta vecina de al lado (su .mvp-vote-count
   sobresaliendo por la derecha) en el pasillo angosto entre tarjetas. Sin
   este badge, un cerrador que entró a la boleta solo por su Salvamento
   (ver rankParticipants en js/views/juego.js) se vería con puros ceros,
   sin ninguna pista de por qué está ahí. */
.mvp-vote-decision {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  box-shadow: var(--shadow-card);
}

.mvp-vote-decision--win {
  background: color-mix(in srgb, var(--win) 20%, var(--surface-raised));
  border-color: var(--win);
  color: var(--win);
}

.mvp-vote-decision--save {
  background: color-mix(in srgb, #f5b942 20%, var(--surface-raised));
  border-color: #f5b942;
  color: #f5b942;
}

.mvp-vote-stats {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.mvp-vote-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mvp-vote-stat b {
  font-size: var(--text-sm);
  font-weight: 700;
}

.mvp-vote-stat small {
  font-size: var(--text-2xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mvp-vote-count {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 800;
  box-shadow: var(--shadow-card);
}

/* Quien va ganando la votación (ver `isLeader` en renderMvpVote, js/views/
   juego.js) cambia el círculo rojo con el número por una estrella dorada —
   ya no hace falta el número ahí, la estrella sola dice "vas ganando". */
.mvp-vote-count--leader {
  background: linear-gradient(160deg, #ffd76a, #d4a017);
  color: #4a3200;
  font-size: var(--text-sm);
}

/* ---- gráfica de tendencia ---- */

.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-card);
}

/* El viewBox se arma con el ancho real en píxeles (ver charts.js), así que la
   gráfica se dibuja a escala 1:1 y el texto de los ejes no se encoge. */
.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

/* Única excepción a la escala: esto vive dentro del SVG, donde la unidad es
   la del viewBox. Como charts.js lo arma a escala 1:1 con los píxeles, 13px
   aquí son 13px reales en pantalla; un rem se resolvería contra la raíz. */
.chart-axis-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.chart-bar {
  fill: var(--surface-raised);
  stroke: var(--border);
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
}

.chart-swatch-bar {
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

.chart-swatch-line {
  background: var(--accent);
}

/* ---- récords de temporada ---- */

.records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Cantidad variable de jugadores en banca (0 a N), a diferencia de las 9
   posiciones fijas de .grid-3 — necesita columnas que se ajusten solas. */
.bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.record-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Mismo estilo que el resto de tarjetas hero de Resumen: fondo
     blanco/plateado (ver .record-hero más abajo) con borde e icono rojos. */
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
}

.record-clickable {
  cursor: pointer;
}

.record-clickable:hover {
  transform: translateY(-2px);
}

/* Mismo tamaño/jerarquía que .leader-card h3 (icono grande arriba, título
   chico debajo) — antes el icono de récords salía en línea con el título y
   a tamaño de texto normal, mucho más chico que en las tarjetas de líderes;
   ver comentario en .record-card--hero sobre por qué el acento es blanco y
   no rojo. */
.record-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.record-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.record-detail {
  margin-top: 6px;
  font-size: var(--text-md);
  font-weight: 600;
}

.record-note {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Variante "hero" (mismo lenguaje visual que .leader-card--hero): número
   grande y, a la derecha, la foto real del dueño del récord — solo cuando
   hay un único dueño (r.playerId); con empate o récord de equipo no hay a
   quién retratar y se usa una insignia circular con el icono en su lugar.
   El acento es blanco/plateado (no el rojo de "Líderes") a propósito, para
   distinguir "récord de la temporada" de "líder actual" — mismo criterio ya
   usado en las tarjetas de "Stats de equipo". El 2do/3er lugar
   (.leader-runners, la misma clase que usan los líderes de temporada) va
   debajo, fuera del degradado — por eso el padding se mueve de la tarjeta a
   .record-hero. */
.record-card--hero {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-top: 4px solid var(--accent);
}

.record-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 14px;
  background: linear-gradient(160deg, var(--hero-shade) 0%, transparent 65%), var(--surface);
}

/* Rojo, mismo estilo que el resto de tarjetas hero de Resumen. */
.record-label i {
  font-size: var(--text-3xl);
  color: var(--accent);
}

.record-label i::before {
  background: linear-gradient(135deg, #ff5a6e, var(--accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.record-hero-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.record-hero-avatar {
  flex-shrink: 0;
}

.record-hero-avatar .avatar {
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-card);
}

/* Récord empatado entre varios jugadores: sus fotos en fila, encimadas
   (como una firma de "estos son"), en vez de una sola foto grande — no hay
   un único dueño que destacar. */
.record-hero-avatar-group {
  display: flex;
  flex-shrink: 0;
}

/* El margen negativo (el traslape) va en el envoltorio directo (`> *` —
   puede ser un .avatar-slot o el "+N" de abajo); el anillo va en el círculo
   de verdad, que puede quedar un nivel más adentro si hydrateAvatars() (ver
   más arriba en js/views/resumen.js) todavía no reemplazó el avatar-slot
   por la foto real. */
.record-hero-avatar-group > * {
  margin-left: -14px;
}

.record-hero-avatar-group > *:first-child {
  margin-left: 0;
}

.record-hero-avatar-group .avatar,
.record-hero-avatar-group .avatar-more {
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-card);
}

/* ---- Look "red social" con sesión iniciada ----
   html[data-session] lo pone js/auth.js (notifyChange()) en cada cambio de
   sesión — mismo truco que ya usa el tema (document.documentElement.
   dataset.theme, ver js/theme.js). Con sesión, estos avatares PÚBLICOS
   (Líderes/Récords de Resumen, y el chip del header — ver .leader-hero-
   avatar, .record-hero-avatar(-group) y .auth-btn-avatar arriba/abajo)
   cambian su anillo neutro de siempre por uno del acento del sitio, mismo
   truco de borde+box-shadow que ya usaban — no se inventa nada nuevo. Sin
   sesión (invitado) no cambia nada. */
html[data-session="in"] .leader-hero-avatar .avatar,
html[data-session="in"] .record-hero-avatar .avatar,
html[data-session="in"] .record-hero-avatar-group .avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--surface), var(--shadow-card);
}

.avatar-more {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
}

.record-runner-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ---- comparador ---- */

.compare-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.compare-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
}

.compare-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- selector de temporada (js/views/temporadas.js) ---- */

.temporada-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.temporada-picker label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.temporada-select {
  min-width: 260px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
}

.temporada-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@media (max-width: 640px) {
  .temporada-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .temporada-select {
    width: 100%;
    min-width: 0;
  }
}

.compare-vs {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.compare-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.compare-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 12px;
}

.compare-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.compare-number {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--muted);
}

.compare-games {
  font-size: var(--text-xs);
  color: var(--muted);
}

.compare-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}

.compare-row:last-child {
  border-bottom: none;
}

.compare-row:nth-child(even) {
  background: var(--zebra);
}

.compare-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: center;
  /* La etiqueta manda: fija el centro para que los números no la muevan. */
  min-width: 116px;
}

.compare-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.compare-row .compare-value:first-child {
  text-align: right;
}

.compare-row .compare-value:last-child {
  text-align: left;
}

.compare-win {
  color: var(--win);
}

.compare-lose {
  color: var(--text);
}

@media (max-width: 640px) {
  .compare-picker {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .compare-vs {
    text-align: center;
  }

  .compare-label {
    min-width: 0;
    font-size: var(--text-2xs);
  }

  .compare-row {
    padding: 9px 10px;
    gap: 6px;
  }

  .compare-value {
    font-size: var(--text-md);
  }
}

/* Fondo opaco propio: sin esto la trama diagonal del body se vería a través
   del footer, y la idea es que quede solo en el cuerpo. */
.footer {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-xs);
  padding: 28px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer code {
  color: var(--text);
}

/* Logos de patrocinadores (ver SPONSORS en js/data.js) — PNGs transparentes
   con el logo en negro. En tema claro se ven tal cual; en Eclipse y Luna
   (los dos oscuros, ver js/theme.js) se invierten a blanco solos, sin
   necesidad de guardar una segunda versión de cada logo. */
.footer-sponsors-title {
  display: block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-sponsors {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 18px;
}

/* Tamaño de arranque nomás — al cargar, fitSponsorLogo() en js/main.js le
   recorta el margen transparente y le pone alto/ancho de área pareja.
   max-width + object-fit por si eso no corre (logo muy horizontal). */
.footer-sponsor-logo {
  height: 46px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.85;
  filter: invert(1);
}

:root[data-theme="light"] .footer-sponsor-logo {
  filter: none;
}

/* ---- Comentarios (juego + alineación) ---- */

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

/* Burbuja de chat (Instagram/Facebook), no la caja con borde de antes —
   avatar a la izquierda, nombre + texto dentro de una burbuja redondeada a
   la derecha, like/borrar como texto chico DEBAJO de la burbuja (ver
   commentItem() en js/views/comments.js). Los comentarios ya son
   exclusivos de cuenta (ver renderComments()), así que este look no se
   condiciona a html[data-session] — un invitado nunca llega a verlo. */
.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.comment-avatar {
  flex-shrink: 0;
  display: block;
}

.comment-main {
  flex: 1;
  min-width: 0;
}

.comment-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 18px;
  background: var(--surface-raised);
}

.comment-author-name {
  display: block;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--text);
  text-decoration: none;
}

a.comment-author-name:hover {
  color: var(--accent-text);
}

.comment-body {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Fila de acciones bajo la burbuja — texto chico, sin bordes ni pills (el
   "Me gusta · 2 h · Borrar" de Instagram), a diferencia del pill con borde
   que sigue usando el like de Avisos (ver .announcement-like-btn más
   abajo, otro contexto con su propio look de "post"). */
.comment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0 14px;
}

.comment-date {
  color: var(--muted);
  font-size: var(--text-2xs);
}

/* El corazón se rellena de rojo (currentColor hereda el color del texto,
   ya en --accent-text cuando está activo) sin necesitar dos íconos
   distintos (fa-regular/fa-solid), que Font Awesome Free no siempre trae
   ambos. */
.comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s;
}

.comment-like-btn:disabled {
  cursor: default;
}

.comment-like-btn:not(:disabled):hover,
.comment-like-btn.active {
  color: var(--accent-text);
}

/* Borrar es irreversible y no debe verse tan disponible como dar like —
   mismo texto chico sin borde, pero se pone rojo hasta el hover. */
.comment-delete-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s;
}

.comment-delete-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.comment-delete-btn:not(:disabled):hover {
  color: var(--accent);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}

.comment-form textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 10px;
  min-height: 70px;
  resize: vertical;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.comment-form .auth-submit {
  align-self: flex-start;
  padding: 8px 20px;
}

/* ---- Muro / feed de Inicio (js/views/feed.js) ----
   Cuadrícula de 4 columnas en escritorio, tarjetas CUADRADAS (aspect-ratio 1,
   a petición expresa). Va bajando: 3 en escritorio angosto, 2 en tablet, 1
   en celular — ahí las tarjetas dejan de ser cuadradas (a lo ancho de la
   pantalla un cuadrado sería enorme) y toman su alto natural. */
.feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  .feed {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feed-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  aspect-ratio: 1 / 1;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

/* El aviso va como los demás ítems del feed: TODO centrado (contenido +
   reacciones como un solo bloque, centrado vertical y horizontalmente), en
   escritorio y en celular. */
.feed-aviso-header {
  justify-content: center;
}

/* Reacciones centradas en todas las tarjetas del feed. */
.feed-item .reaction-bar {
  justify-content: center;
}

@media (max-width: 900px) {
  .feed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .feed {
    grid-template-columns: 1fr;
  }

  .feed-item {
    aspect-ratio: auto;
    min-height: 92px;
  }

  /* El cuerpo del aviso se recorta más para que la tarjeta quede de un
     tamaño parecido a las demás del feed. */
  .feed-aviso-body {
    -webkit-line-clamp: 3;
  }
}

/* Aviso — tarjeta tipo "post" (logo + "Anuncio · fecha", título, cuerpo).
   Texto centrado, igual que las demás tarjetas del feed. */
.feed-aviso-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  text-align: center;
}

.feed-aviso-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.feed-aviso-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-raised);
  padding: 3px;
  object-fit: contain;
}

.feed-aviso-meta {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feed-aviso-title {
  margin: 0 0 6px;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.feed-aviso-body {
  display: -webkit-box;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* Resultado — mini marcador: icono grande de color, "GANAMOS", el marcador
   gigante y "vs Rival · fecha". Todo centrado, llena el cuadrado. */
.feed-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

.feed-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.3rem;
}

.feed-result-icon--win {
  background: color-mix(in srgb, var(--win) 20%, var(--surface-alt));
  color: var(--win);
}

.feed-result-icon--loss {
  background: color-mix(in srgb, var(--loss) 18%, var(--surface-alt));
  color: var(--loss);
}

.feed-result-icon--tie {
  background: var(--surface-alt);
  color: var(--muted);
}

.feed-result-verb {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.feed-result-score {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--text);
}

.feed-result-opp {
  font-size: var(--text-xs);
  color: var(--muted);
}

.feed-avatar {
  flex-shrink: 0;
  display: block;
}

/* Cumpleaños / MVP — avatar grande + etiqueta + nombre + subtítulo, en
   columna centrada (mismo "tile" que el resultado). */
.feed-cumple,
.feed-mvp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.feed-cumple-label,
.feed-mvp-label {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.feed-mvp-star {
  color: #f5b942;
}

.feed-cumple-name,
.feed-mvp-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-text);
  text-decoration: none;
}

.feed-cumple-sub,
.feed-mvp-opp {
  font-size: var(--text-xs);
  color: var(--muted);
}

.feed-cumple-emoji {
  font-size: 1.1rem;
}

/* ---- Barra de reacciones con emoji (js/views/reactions.js) ----
   Compartida entre los comentarios de un juego y el feed de Inicio. Los 7
   emojis van TODOS en línea (con menú desplegable tapaba la tarjeta): los
   que ya tienen reacciones salen como chip con su conteo, el resto
   atenuados y sin borde, listos para tocar. */
.reaction-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

/* En comentarios la barra va en la fila de acciones (bajo la burbuja), sin
   margen extra arriba. */
.comment-actions .reaction-bar {
  margin-top: 0;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

/* Emoji que todavía nadie usó en este ítem — sin chip, solo el emoji
   atenuado (aparece más chico y discreto que los que sí tienen conteo). */
.reaction-chip--empty {
  padding: 2px 4px;
  border-color: transparent;
  background: none;
  opacity: 0.45;
  font-size: var(--text-sm);
}

.reaction-chip:disabled {
  cursor: default;
}

.reaction-chip:not(:disabled):hover {
  border-color: var(--accent);
  opacity: 1;
}

.reaction-chip--mine {
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* ---- Bio en el perfil (js/views/jugador.js) ---- */
.profile-bio {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---- Foto de perfil personalizada ---- */

.avatar-edit-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.avatar-edit-label:hover {
  color: var(--accent);
  border-color: var(--accent);
}


/* ---- Pantalla de bienvenida (#splash-gate en index.html, js/splash.js) ----
   Video de fondo + logo + "Soy invitado"/"Soy jugador", tapando todo lo
   demás (que ya renderizó normal por debajo) hasta que se elige una. */
.splash-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Fondo de respaldo si el video no cargó (sin señal, se bloqueó, etc.) —
     nunca se ve un hueco en blanco. También es el fondo de #recovery-gate
     (js/recovery.js), que no trae video. */
  background: linear-gradient(160deg, #0b0d10, #1a1f27);
  /* opacity explícito (no el inicial implícito) para que el fundido de
     salida tenga un "desde" definido — ver .splash-gate--leaving. */
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Al entrar (login OK o "Soy invitado", ver enter() en js/splash.js) el gate
   se desvanece en vez de desaparecer de golpe — la app ya está pintada
   debajo. pointer-events:none deja pasar los clics a la app durante el
   fundido. js/splash.js lo quita del DOM cuando termina la transición. */
.splash-gate--leaving {
  opacity: 0;
  pointer-events: none;
}

/* #recovery-gate arranca oculto en el HTML — sin esto, el `display: flex`
   de arriba le gana al `display: none` por default de `hidden` (mismo
   patrón de bug ya visto en este archivo con .more-sheet-grid a[hidden]):
   se vería siempre, tapando todo el sitio desde que carga la página. */
.splash-gate[hidden] {
  display: none;
}

.splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Atenuado azul marino, a petición expresa (antes negro liso) — sigue
   siendo más oscuro hacia abajo, donde va el texto/botones, para que
   tengan contraste sin importar qué tan clara sea esa parte del video. */
.splash-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 45, 0.55) 0%, rgba(6, 14, 32, 0.8) 100%);
}

.splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 24px;
  text-align: center;
}

.splash-logo {
  width: min(380px, 78vw);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.splash-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.splash-btn {
  min-width: 180px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  border: 2px solid #fff;
  background: none;
  color: #fff;
}

.splash-btn:active {
  transform: scale(0.97);
}

.splash-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.splash-btn:hover {
  filter: brightness(1.15);
}

@media (max-width: 480px) {
  .splash-actions {
    flex-direction: column;
    width: 100%;
  }

  .splash-btn {
    width: 100%;
  }
}

/* Formulario de "Soy jugador" (ver showLogin en js/splash.js) — reemplaza
   los botones en el mismo lugar. Colores fijos (no las variables de tema):
   esta pantalla siempre es oscura, con o sin video, sin importar el tema
   claro/oscuro que tenga elegido el sitio. */
.splash-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(320px, 82vw);
}

.splash-login-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
}

.splash-login-form input {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-md);
}

.splash-login-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.splash-login-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.splash-login-error {
  color: #ff8a8a;
  font-size: var(--text-sm);
  margin: 0;
}

.splash-login-ok {
  color: #7fe0a6;
  font-size: var(--text-sm);
  margin: 0;
}

.splash-back-btn,
.splash-forgot-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}

.splash-back-btn:hover,
.splash-forgot-btn:hover {
  color: #fff;
}

/* Al swapear los botones <-> el formulario en la pantalla de bienvenida
   (ver showButtons()/showLogin() en js/splash.js) el contenido nuevo entra
   con un fundido corto en vez de aparecer de golpe. */
#splash-actions > * {
  animation: splash-actions-in 0.28s ease backwards;
}

@keyframes splash-actions-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---- Transiciones de sesión (login / logout) ---- */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner en el botón mientras corre `await signIn()` — el texto se vuelve
   transparente y un aro gira en su lugar (ver el submit de showLogin() en
   js/splash.js y el form inline de js/auth.js). */
.splash-btn.is-loading,
.auth-btn.is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.splash-btn.is-loading > i,
.auth-btn.is-loading > i {
  visibility: hidden;
}

.splash-btn.is-loading::after,
.auth-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Velo de salida: cerrar sesión (o "Iniciar sesión", que te regresa a la
   pantalla de bienvenida) cubre todo con un fundido rápido antes de la
   recarga, para que no se sienta un corte seco. Fondo oscuro fijo (no
   var(--bg)) porque el destino SIEMPRE es la portada oscura, sin importar
   el tema — así el fundido va directo hacia ella. Ver leaveToSplash() en
   js/auth.js. */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0b0d10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.page-veil--on {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Spinner reutilizable ----
   Aro que gira; toma el tamaño de `font-size` y el color de `currentColor`,
   así sirve igual dentro de un botón o en la pantalla de bienvenida. */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0.14em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -0.15em;
}

/* En la pantalla de bienvenida ("Entrando…", ver enterApp() en
   js/splash.js) — más grande y en blanco, sobre el fondo oscuro del gate. */
.splash-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.splash-loading .spinner {
  font-size: 2.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .splash-gate,
  .page-veil {
    transition: none;
  }

  #splash-actions > * {
    animation: none;
  }
}

/* Etiqueta "Playoffs" junto al rival en las tablas juego por juego del
   perfil (ver opponentColumn en js/views/jugador.js) — mismo dorado que el
   badge de playoffs del detalle de un juego (.game-hero-playoff-badge). */
.playoff-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg, #ffd76a, #d4a017);
  color: #4a3200;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Medallas de la temporada en "Temporadas anteriores" (ver
   renderSeasonMedals en js/views/temporadas.js) — una tarjeta por jugador
   con sus medallas de ESA temporada. */
.season-medals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* Foto · nombre · conteo: el nombre se estira (flex: 1) para mandar el
   conteo a la orilla derecha, y una línea abajo separa el encabezado de
   las medallas. */
.season-medals-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.season-medals-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.season-medals-name:hover {
  color: var(--accent-text);
}

.season-medals-count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-glow);
  color: var(--accent-text);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 640px) {
  .season-medals-grid {
    grid-template-columns: 1fr;
  }
}

/* Pestañas de "Temporadas anteriores" (ver TABS en js/views/temporadas.js)
   — mismo selector que Estadísticas, pero son 5: en celular se achican
   para que quepan en un solo renglón. */
@media (max-width: 640px) {
  .temporada-tabs {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .temporada-tabs .stats-switcher-btn {
    width: 64px;
  }

  .temporada-tabs .stats-switcher-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.15rem;
  }
}

/* Conteo de jugadores del roster (ver countEl en js/views/roster.js) — a la
   derecha de los filtros de posición. */
.roster-count {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ---- Flyers para compartir en redes (ver js/flyers.js) ---- */

.share-flyer-row {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 12px;
}

.share-flyer-row--center {
  justify-content: center;
  margin: 14px 0 0;
}

.share-flyer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.share-flyer-btn:hover {
  background: var(--accent);
  color: #fff;
}

.leader-hero-body .share-flyer-btn {
  margin-top: 10px;
}

.flyer-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.flyer-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(440px, 100%);
  max-height: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}

.flyer-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
}

.flyer-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - 230px);
}

.flyer-preview img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

.flyer-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.flyer-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.flyer-btn--share {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Selector Post / Historia de la vista previa del flyer. */
.flyer-formats {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}

.flyer-format {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.flyer-format.active {
  background: var(--accent);
  color: #fff;
}

/* Arrastrar para reacomodar el orden al bat en lineup/ (ver enableRowDrag
   en js/lineup.js). touch-action: none — sin esto, en celular el dedo
   desplaza la página en vez de arrastrar la fila. */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.drag-handle:hover {
  background: var(--surface-alt);
  color: var(--accent-text);
}

.stats-table tr.row-dragging td {
  background: var(--accent-glow);
}

.stats-table tr.row-dragging .drag-handle {
  cursor: grabbing;
  color: var(--accent-text);
}

/* Mientras se arrastra una fila (ver enableRowDrag): sin selección de texto
   ni cursor de texto en toda la página. */
body.is-row-dragging {
  user-select: none;
  cursor: grabbing;
}

/* Selector de posición del orden al bat en lineup/ (ver EDITABLE_POSITIONS
   en js/lineup.js). */
.pos-select {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

/* .flyer-actions / .flyer-btn traen display propio, que le gana a [hidden]
   — sin esto se veían los botones mientras cargaba el flyer, y "Compartir"
   aparecía aunque el navegador no pudiera compartir archivos. */
.flyer-actions[hidden],
.flyer-btn[hidden] {
  display: none;
}

/* ---- Fanzone: generador de wallpaper (ver js/views/fanzone.js) ---- */

.fanzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 24px;
  align-items: start;
}

.fanzone-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fz-field select,
.fz-field input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.fz-row {
  display: flex;
  gap: 12px;
}

.fz-field--grow {
  flex: 1;
}

.fz-field--number {
  width: 110px;
}

.fz-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fz-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fz-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.fz-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--border);
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  transition: border-color 0.15s, transform 0.15s;
}

.fz-preset.active .fz-swatch {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.fz-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.fanzone-preview {
  display: flex;
  justify-content: center;
}

/* Marco de celular alrededor de la vista previa. */
.fz-phone {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1170 / 2532;
  padding: 8px;
  border-radius: 38px;
  background: #1a1a1c;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #2c2c30;
}

.fz-phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
}

@media (max-width: 760px) {
  .fanzone {
    grid-template-columns: 1fr;
  }

  .fanzone-preview {
    order: -1;
  }

  .fz-phone {
    max-width: 240px;
  }
}


/* Vista previa del flyer: dos grupos (Post/Historia y Clásico/Moderno). */
.flyer-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.flyer-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid;
  border-radius: 50%;
}


/* =====================================================================
   ESTILO LYON.GG (a petición expresa): barra Match Center, header delgado
   con menú ☰, menú de pantalla completa en lista, títulos en dos tonos y
   la portada (js/views/home.js). Va al final para ganarle a las reglas
   viejas del header/nav sin tener que reescribirlas una por una.
   ===================================================================== */

/* El hero de la portada sale de lo ancho de <main> (100vw); clip evita la
   barra horizontal que 100vw provoca en Windows sin romper el sticky. */
html,
body {
  overflow-x: clip;
}

/* La barra de pestañas de abajo ya no se usa: todo vive en el menú ☰. */
.bottom-tabs {
  display: none !important;
}

@media (max-width: 640px) {
  .footer {
    margin-bottom: 0;
  }
}

body.menu-open {
  overflow: hidden;
}

/* ---- Match Center ---- */
.match-ticker {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 34px;
  padding: 0 0 0 16px;
  /* Color de fondo del tema (marino en Eclipse, negro en Luna), apenas más
     oscuro que el header para que se distingan las dos barras. */
  background: color-mix(in srgb, var(--bg) 80%, #000);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted);
  overflow: hidden;
}

.match-ticker[hidden] {
  display: none;
}

.ticker-label {
  flex-shrink: 0;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticker-viewport {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ticker-track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: ticker-run 65s linear infinite;
}

.match-ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-run {
  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
}

.ticker-item b {
  color: var(--text);
  font-weight: 700;
}

.ticker-item--next b {
  color: var(--accent-text);
}

.ticker-score {
  font-style: normal;
  font-weight: 800;
}

.ticker-score--W {
  color: var(--win);
}

.ticker-score--L {
  color: var(--accent-text);
}

/* ---- Header delgado ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

/* Cabeza del caimán en blanco (assets/logos/whitelogo@2x.png, más ancha
   que alta): se fija el alto y el ancho sale solo. */
.site-brand-logo {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header .auth-slot {
  position: static;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ---- Menú de pantalla completa (lista, como lyon.gg) ---- */
.more-sheet:not([hidden]) {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  padding: 0 clamp(16px, 4vw, 48px) calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.more-sheet .more-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--border);
}

.more-sheet .more-sheet-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.more-sheet .more-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
}

/* Título de cada grupo del menú (Temporada, Equipo, Números, Multimedia, Más). */
.more-sheet .more-sheet-group {
  margin: 26px 0 2px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.more-sheet .more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 40px;
  flex: none;
  align-content: start;
}

.more-sheet .more-sheet-grid a,
.more-sheet .more-sheet-grid button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  animation: menu-row-in 0.3s ease backwards;
}

.more-sheet .more-sheet-grid a[hidden],
.more-sheet .more-sheet-grid button[hidden] {
  display: none;
}

.more-sheet .more-sheet-grid a::after,
.more-sheet .more-sheet-grid button::after {
  content: "→";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s, color 0.15s;
}

.more-sheet .more-sheet-grid a:hover::after,
.more-sheet .more-sheet-grid button:hover::after {
  transform: translateX(4px);
  color: var(--accent-text);
}

@keyframes menu-row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.more-sheet .more-app-icon {
  width: 30px;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent-text);
  font-size: 1.05rem;
}

.more-sheet .more-sheet-grid a span:last-child,
.more-sheet .more-sheet-grid button span:last-child {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.more-sheet .more-sheet-grid a.active span:last-child {
  color: var(--accent-text);
}

.more-sheet .more-sheet-grid a.active .more-app-icon {
  background: none;
  color: var(--accent-text);
  box-shadow: none;
}

/* ---- Títulos de página (dos tonos + ///) ---- */
h2.page-title {
  border-bottom: none;
  padding-bottom: 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: 0.01em;
}

.page-title-accent,
.home-title span {
  color: var(--accent-text);
}

.page-title-slashes,
.home-slashes {
  margin-left: 6px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.12em;
  color: var(--accent);
  opacity: 0.8;
}

/* =========================== PORTADA =========================== */
.home {
  margin-top: -28px; /* el padding de <main>: el hero pega con el header */
}

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 98px);
  margin-inline: calc(50% - 50vw);
  padding: 40px 20px 150px;
  overflow: hidden;
  text-align: center;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 50% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, transparent 60%, var(--bg));
}

.home-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-hero-logo {
  width: clamp(150px, 22vw, 230px);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.55));
}

.home-hero-name {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 9.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 30%, #c9ccd2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-hero-tag {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.home-hero-league {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.home-btn:hover {
  transform: translateY(-2px);
}

.home-btn--solid {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px -10px var(--accent-glow);
}

.home-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.home-center {
  display: flex;
  width: fit-content;
  margin: 26px auto 0;
}

/* Tarjeta del próximo juego, montada sobre la parte baja del hero. */
.home-next {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label count" "match count" "when count";
  column-gap: 28px;
  width: min(760px, calc(100% - 40px));
  padding: 16px 22px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.home-next-label {
  grid-area: label;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.home-next-match {
  grid-area: match;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  text-transform: uppercase;
}

.home-next-match em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.75em;
}

.home-next-when {
  grid-area: when;
  font-size: var(--text-sm);
  color: var(--muted);
}

.home-next-countdown {
  grid-area: count;
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  /* Dígitos del mismo ancho: los segundos cambian sin que el texto "brinque". */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Franja de números grandes. */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: calc(50% - 50vw);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 12px;
  border-right: 1px solid var(--border);
  text-align: center;
}

.home-stat:last-child {
  border-right: none;
}

.home-stat b {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
}

/* El "+" va por CSS y no en el texto: el conteo animado reescribe el
   textContent del número en cada cuadro y se lo comería. */
.home-stat b[data-plus]::before {
  content: "+";
}

.home-stat span {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Cinta en movimiento. */
.home-marquee {
  margin-inline: calc(50% - 50vw);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.home-marquee-track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: ticker-run 60s linear infinite;
}

.home-marquee-track span {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}

.home-marquee-track span::after {
  content: "·";
  margin-left: 34px;
  color: var(--accent);
}

/* Los hashtags (#CaimaWin, #Caimanation) en rojo Caimanes. */
.home-marquee-track .home-marquee-accent {
  color: var(--accent-text);
}

.home-marquee-ghost {
  color: transparent !important;
  -webkit-text-stroke: 1px var(--muted);
}

/* Secciones. */
.home-section {
  position: relative;
  padding: 70px 0 10px;
}

.home-section-head {
  position: relative;
  margin-bottom: 26px;
}

.home-bg-word {
  position: absolute;
  top: -34px;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 9%, transparent);
  pointer-events: none;
  user-select: none;
}

.home-title {
  position: relative;
  margin: 0;
  border: none;
  padding: 0;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
}

.home-sub {
  position: relative;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.home-empty {
  color: var(--muted);
}

.home-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.home-match {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

/* Los próximos juegos llevan borde rojo para distinguirlos de los ya jugados. */
.home-match--next {
  border-color: var(--accent);
}

.home-match:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.home-match-league {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Temporada y número de juego, justo debajo de la liga. */
.home-match-tag {
  margin-top: -8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.home-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.home-match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.home-match-team img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.home-match-rival-badge {
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--text-sm);
}

.home-match-vs {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--muted);
}

.home-match-when {
  font-size: var(--text-sm);
  color: var(--text);
}

.home-match-cta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.home-match-score {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Etiqueta Victoria/Derrota de los juegos ya jugados. */
.home-match-badge {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--surface-alt);
}

.home-match-badge--W {
  background: color-mix(in srgb, var(--win) 75%, #000);
}

.home-match-badge--L {
  background: color-mix(in srgb, var(--accent) 85%, #000);
}

/* La temporada en números. */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
}

.home-card-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.home-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
}

.home-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.home-card-list li {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-alt);
}

.home-card-list--rank li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-card-list--rank b {
  color: var(--accent-text);
  font-family: var(--font-display);
}

.home-card-list--rank em {
  margin-left: auto;
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
}

.home-card-link {
  margin-top: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
}

/* Roster. */
.home-roster {
  display: grid;
  /* 3 columnas fijas: los 9 titulares quedan en 3 filas de 3. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Tarjeta: foto a la izquierda, nombre y número a un lado. */
.home-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.home-player > :first-child {
  flex-shrink: 0;
}

.home-player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* En celular no caben 3 tarjetas horizontales: una por fila. */
@media (max-width: 640px) {
  .home-roster {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .home-player {
    padding: 12px 14px;
  }
}

.home-player:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.home-player-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--accent-text);
}

.home-player-name {
  font-weight: 700;
  font-size: var(--text-lg);
}

/* Historia. */
.home-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-timeline li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
}

.home-timeline-year {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-text);
}

.home-timeline li b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
}

.home-timeline li span:last-child {
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (max-width: 760px) {
  .home-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-stat:nth-child(2) {
    border-right: none;
  }

  .home-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .home-next {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "match" "when" "count";
  }

  .home-next-countdown {
    margin-top: 6px;
    font-size: var(--text-2xl);
  }

  .home-hero {
    padding-bottom: 200px;
  }

  .match-ticker {
    gap: 10px;
    padding-left: 10px;
  }
}

/* ---- Escritorio: secciones en fila en el header, sin menú ☰ ----
   (a petición expresa). Por debajo de 1100px no caben: ahí se esconde la
   fila y vuelve el ☰. */
.site-header .site-nav {
  position: static;
  z-index: auto;
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  /* visible (no auto): los desplegables de .nav-group salen por debajo
     del header y con overflow se recortarían. */
  overflow: visible;
}

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

.site-header .site-nav a,
.nav-group-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

/* ---- Grupos desplegables (Temporada, Equipo, Números, Multimedia) ---- */
.nav-group {
  position: relative;
}

.nav-group-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.nav-group-btn i {
  font-size: 0.7em;
  transition: transform 0.2s;
}

.nav-group:hover .nav-group-btn,
.nav-group.open .nav-group-btn {
  color: var(--text);
  background: var(--surface);
}

.nav-group.active .nav-group-btn {
  color: var(--accent-text);
}

.nav-group:hover .nav-group-btn i,
.nav-group.open .nav-group-btn i {
  transform: rotate(180deg);
}

/* El padding-top hace de "puente" invisible entre el botón y la lista,
   para que el :hover no se pierda al bajar el mouse. */
.nav-group-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  display: none;
  min-width: 190px;
  padding-top: 8px;
  transform: translateX(-50%);
}

.nav-group:hover .nav-group-menu,
.nav-group.open .nav-group-menu,
.nav-group:focus-within .nav-group-menu {
  display: block;
}

.nav-group-menu::before {
  content: "";
  position: absolute;
  inset: 8px 0 0;
  z-index: -1;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.site-header .site-nav .nav-group-menu a {
  display: block;
  margin: 4px;
  padding: 10px 14px;
}

.site-header .site-nav a.active {
  background: none;
  box-shadow: none;
  color: var(--accent-text);
}

.site-header .site-nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-lg);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.header-icon:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* El interruptor de tema venía posicionado en la esquina del header viejo. */
.site-header .theme-switch {
  position: relative;
  top: auto;
  left: auto;
  flex-shrink: 0;
}

@media (min-width: 1100px) {
  .menu-toggle {
    display: none;
  }
}

@media (max-width: 1099px) {
  .site-header .site-nav,
  .site-header .header-icon,
  .site-header .theme-switch {
    display: none;
  }
}

/* ---- Hero con el video de fondo (assets/video.mp4, el mismo de la
   bienvenida) — oscurecido para que el nombre y los botones se lean. ---- */
.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo encima del video con el color de fondo DEL TEMA (azul marino en
   Eclipse, negro en Luna — var(--bg)), semitransparente, y que se funde con
   el fondo de la página abajo. */
.home-hero-bg {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 86%, transparent) 0%,
    color-mix(in srgb, var(--bg) 80%, transparent) 50%,
    var(--bg) 100%
  );
}