/*
 * Jugadex — sistema de diseño.
 *
 * Oscuro, deportivo, con el verde del logo como acento, y con la forma
 * de una aplicación de iPhone: esquinas redondeadas, barras de vidrio
 * esmerilado arriba y abajo, hojas que suben desde abajo con su
 * agarradera, listas agrupadas y controles segmentados.
 *
 * La personalidad deportiva va en los números y en el acento: las
 * cuotas son fichas de marcador con cifras condensadas y tabulares, la
 * cuota elegida brilla en verde, la señal de "en vivo" late y los
 * destacados llevan un degradado que se mueve despacio.
 *
 * Todo el color, el radio y el movimiento viven aquí arriba, en
 * variables. Cambiar el acento de la marca es cambiar una línea, no
 * buscar por todo el archivo.
 */

:root {
  /* Controles nativos (desplegables, calendario, barras de
     desplazamiento) en su versión oscura. */
  color-scheme: dark;

  /* Fondo: casi negro, con un tinte azulado que lo separa del gris. */
  --suelo: #05070a;
  --suelo-2: #0e121a;
  --suelo-3: #171d2a;
  --suelo-4: #212a3b;
  --borde: #1e2636;
  --borde-vivo: #2d3850;

  /* Filo de un pixel, como los separadores de iOS: un blanco muy bajo
     que se lee igual sobre cualquier superficie. */
  --filo: rgba(255, 255, 255, 0.075);
  --filo-fuerte: rgba(255, 255, 255, 0.14);

  /* Relleno de los controles grises (buscador, segmentados, botones
     secundarios): el "fill" de iOS en oscuro, con el tinte de la casa. */
  --relleno: rgba(120, 132, 158, 0.16);
  --relleno-fuerte: rgba(120, 132, 158, 0.26);

  /* Acento: el verde del logo. Sobre la tarjeta da 10:1 de contraste,
     y el negro sobre el verde (los botones) da 10,9:1. */
  --acento: #47da49;
  --acento-apagado: #35a838;
  --acento-claro: #72f06f;
  --acento-brillo: rgba(71, 218, 73, 0.42);
  --sobre-acento: #05070a;
  /* Segundo tono, solo para los degradados de los destacados. */
  --acento-2: #1fd1b4;

  /* Texto. Medido sobre la ficha de cuota, que es la superficie más
     clara donde va texto chico: --texto-3 da 5,2:1 y --texto-2 6,4:1,
     los dos por encima del 4,5:1 que se considera legible. */
  --texto: #eef2f8;
  --texto-2: #a0abc0;
  --texto-3: #8a95ad;

  /* Estados */
  --vivo: #ff453a;
  /* Esmeralda y no verde: separado del acento de la marca y del rojo
     de "perdida" también para quien tiene daltonismo rojo-verde. */
  --gana: #19c98a;
  --pierde: #ff4d4d;
  --espera: #ffb020;

  /* Tipografía. El texto corrido va en la letra del sistema (San
     Francisco en el iPhone y la Mac, Roboto en Android, Segoe en
     Windows): se lee mejor y no pesa nada. La condensada queda para
     lo que es de pizarra: números, cuotas, marcadores y títulos. */
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: 'Barlow Condensed', 'Avenir Next Condensed', 'Arial Narrow', 'Roboto Condensed', var(--fuente);
  --fuente-numero: 'Barlow Condensed', 'Avenir Next Condensed', 'SF Pro Display', var(--fuente);

  /* Forma */
  --radio-tarjeta: 18px;
  --radio-control: 12px;
  --radio-chico: 8px;
  --radio-pildora: 999px;
  --radio-hoja: 22px;

  /* Sombras suaves: la tarjeta flota un poco sobre la cancha. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 22px -12px rgba(0, 0, 0, 0.6);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 48px -14px rgba(0, 0, 0, 0.75);
  /* La luz que cae desde arriba sobre el borde de una superficie. */
  --luz-arriba: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Vidrio esmerilado de las barras. El sólido es para navegadores
     sin backdrop-filter: pierden el efecto, no la legibilidad. */
  --vidrio: rgba(8, 11, 16, 0.8);
  --vidrio-solido: rgba(8, 11, 16, 0.97);
  --desenfoque: saturate(180%) blur(20px);

  /* Movimiento: corto y con la curva de las hojas de iOS. */
  --curva: cubic-bezier(0.25, 0.8, 0.25, 1);
  --curva-resorte: cubic-bezier(0.32, 0.72, 0, 1);
  --rapido: 160ms;
  --medio: 240ms;
  --presion: 0.97;

  --nav-alto: 60px;
  --boleto-alto: 72px;

  /* ----------------------------------------------------------
     Fondo deportivo
     ----------------------------------------------------------

     La cancha que se dibuja detrás de todo. Cambia según la
     pantalla: el enrutador pone data-escena en el body y las
     reglas de más abajo cambian estas dos variables.

     La opacidad es baja a propósito. Esto es una aplicación de
     dinero: la cuota tiene que leerse de un vistazo, en un
     teléfono, al sol. Un fondo que compita con el texto no es
     decoración, es un error que se paga en apuestas mal puestas.
     Si quiere probar más presencia, suba --fondo-opacidad de a
     poco y mírelo afuera, no solo en el monitor. */
  --fondo-cancha: url('/fondos/cancha-futbol.svg');
  --fondo-opacidad: 0.1;

  /* Ranura para una foto, si algún día quiere una. Ver el README:
     va aquí y el resto del sistema no se toca. */
  --fondo-foto: none;
  --fondo-foto-opacidad: 0.16;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

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

html,
body {
  margin: 0;
  padding: 0;
}

/* El color base va en html y el body queda transparente. Así la capa
   del fondo, que se pinta con z-index negativo, queda POR ENCIMA de
   ese color y por DEBAJO del contenido. Si el color se quedara en el
   body, el fondo desaparecería detrás de él. */
html {
  background: var(--suelo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* En iOS, el área segura de abajo (la barra de gestos) se come la
     navegación si no se reserva. Y la barra flotante del boleto, cuando
     está, tampoco debe tapar lo último de la pantalla. */
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + var(--boleto-alto, 0px));
  overscroll-behavior-y: none;
}

/* Que un toque no deje el rectángulo gris del navegador. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* `hidden` manda siempre. Sin esto, un botón con .btn (que se muestra
   como flex) ignoraba el atributo y aparecía igual. */
[hidden] {
  display: none !important;
}

::selection {
  background: color-mix(in srgb, var(--acento) 35%, transparent);
}

/* ------------------------------------------------------------
   El fondo
   ------------------------------------------------------------

   Tres capas fijas, que no se mueven al desplazar:

     1. la cancha, tenue
     2. la foto, si hay (por defecto no hay)
     3. los reflectores y la viñeta, encima de todo lo anterior

   Es `fixed` y no `scroll` a propósito: una imagen que se desplaza
   con el contenido obliga al teléfono a repintar el fondo entero en
   cada cuadro, y eso se siente en un equipo de gama media, que es la
   mitad del mercado aquí.

   Sin filtros, sin blur, sin animación. Todo eso se ve bien en el
   monitor y le come la batería al jugador.
   ------------------------------------------------------------ */

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

/* Capa 1: la cancha. */
.fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--fondo-cancha);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--fondo-opacidad);
  transition: opacity 0.3s ease;
}

/* Capa 3: reflectores y viñeta. Van ENCIMA de la cancha, para que los
   bordes queden oscuros y el centro respire. El verde es el de la marca;
   el azul frío del otro lado imita las dos torres de un estadio. */
.fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 50% at 10% -8%, color-mix(in srgb, var(--acento) 12%, transparent), transparent 62%),
    radial-gradient(75% 50% at 90% -8%, rgba(110, 160, 255, 0.085), transparent 62%),
    radial-gradient(130% 95% at 50% 0%, transparent 38%, rgba(5, 7, 10, 0.82) 100%);
}

/* La foto opcional. Solo aparece si --fondo-foto deja de ser `none`. */
.fondo-foto {
  position: absolute;
  inset: 0;
  background-image: var(--fondo-foto);
  background-size: cover;
  background-position: center;
  opacity: var(--fondo-foto-opacidad);
  /* Gris y frío: una foto a todo color se pelea con el verde de la
     marca y con los colores de ganado/perdido. */
  filter: grayscale(1) contrast(1.05);
}

/* ------------------------------------------------------------
   Qué cancha según la pantalla
   ------------------------------------------------------------ */

body[data-escena='beisbol'] {
  --fondo-cancha: url('/fondos/diamante-beisbol.svg');
}

/* Baloncesto, voleibol y hockey comparten silueta: rectángulo con
   círculo al centro. Una sola cancha sirve para los tres. */
body[data-escena='baloncesto'] {
  --fondo-cancha: url('/fondos/cancha-baloncesto.svg');
}

body[data-escena='tenis'] {
  --fondo-cancha: url('/fondos/cancha-tenis.svg');
}

body[data-escena='combate'] {
  --fondo-cancha: url('/fondos/ring.svg');
}

/* En las pantallas de dinero el fondo se aparta. Un saldo y un monto a
   retirar se leen mejor sobre negro limpio, y además da la sensación
   correcta: esta parte es el banco, no la pizarra. */
body[data-escena='dinero'] {
  --fondo-opacidad: 0.04;
}

/* Entrar y registrarse: aquí sí se deja ver, es la primera impresión. */
body[data-escena='entrar'] {
  --fondo-opacidad: 0.15;
}

/* Si el teléfono pide menos estímulo, se baja todo. */
@media (prefers-reduced-motion: reduce) {
  .fondo::before {
    transition: none;
  }
}

/* Pantalla ancha: la cancha se ve entera y puede permitirse un poco
   más, porque el texto no está tan apretado. */
@media (min-width: 900px) {
  :root {
    --fondo-opacidad: 0.12;
  }
}

/* ------------------------------------------------------------
   Títulos
   ------------------------------------------------------------

   Condensados, en mayúsculas y apretados: la voz de un marcador. El
   primer título de cada pantalla es un "título grande" de iOS. */

h1,
h2,
h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.005em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

/* Título grande: el de arriba de cada pantalla ("Mis apuestas",
   "Mi dinero", "Mi cuenta"...). Disponible también como clase. */
.pantalla > h1,
.pantalla > div > h1:first-child,
.titulo-grande {
  font-size: 36px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.012em;
  line-height: 1;
  margin: 6px 0 16px;
  /* La itálica se sale un poco por la derecha: que no se corte. */
  padding-right: 0.06em;
}

/* ------------------------------------------------------------
   Controles base
   ------------------------------------------------------------ */

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  /* Sin la espera de 300 ms del doble toque. */
  touch-action: manipulation;
}

/* El aspecto de TODOS los campos, estén o no dentro de un .campo.
   Estaba atado a `.campo input`, y un campo suelto salía en blanco
   sobre el fondo oscuro. El aspecto es del control, no del sitio
   donde esté. Las casillas y los archivos quedan fuera (:where no suma
   especificidad: cualquier regla de más abajo lo sigue pisando). */
input:where(:not([type='checkbox'], [type='radio'], [type='range'], [type='file'], [type='color'])),
select,
textarea {
  font-family: inherit;
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar. */
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--suelo-3);
  border: 1px solid var(--filo);
  border-radius: var(--radio-control);
  color: var(--texto);
  outline: none;
  box-shadow: var(--luz-arriba);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}

textarea {
  line-height: 1.45;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* El desplegable con su flecha propia, igual en todos los sistemas. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a95ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  text-overflow: ellipsis;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--acento);
  width: 20px;
  height: 20px;
}

/* La fecha y la hora: con color-scheme oscuro el navegador ya pinta el
   icono claro; solo se le baja un poco la intensidad. */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  opacity: 0.6;
}

input::placeholder,
textarea::placeholder {
  color: var(--texto-3);
}

a {
  color: var(--acento);
  text-decoration: none;
}

/* El anillo de foco: solo con teclado, nunca con el dedo. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------
   Estructura
   ------------------------------------------------------------ */

.envoltura {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

.pantalla {
  padding-top: 14px;
  padding-bottom: 28px;
  animation: entra var(--medio) var(--curva-resorte);
}

@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

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

/* ------------------------------------------------------------
   Cabecera: vidrio esmerilado
   ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--filo);
  padding-top: env(safe-area-inset-top, 0px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cabecera,
  .nav {
    background: var(--vidrio-solido);
  }
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 54px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radio-chico);
}

/* <picture> es inline y no tiene alto propio: si el alto se pusiera en
   porcentaje, el navegador no tendría contra qué calcularlo y dejaría
   la imagen en su tamaño natural, que son 200 px de ancho encima de la
   cabecera. El alto va en píxeles, sobre la imagen. */
.marca picture {
  display: flex;
}

.marca img {
  height: 30px;
  width: auto;
  display: block;
  /* El resplandor del logo NO viene en la imagen: se hace aquí. Así el
     archivo pesa un tercio, el halo escala sin pixelarse y sigue al
     color de la marca si algún día cambia. */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento) 45%, transparent));
}

/* "Cerrado": el servicio en pausa (vistas-cerrado.js). */
.cerrado {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding-top: 40px;
}

.cerrado p {
  max-width: 34ch;
  margin: 0;
  line-height: 1.5;
}

.cerrado .cerrado-equipo {
  width: auto;
  margin-top: 28px;
  opacity: .75;
}

/* El logo completo, para entrar y registrarse. */
.logo-grande {
  display: block;
  width: min(260px, 62%);
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--acento) 38%, transparent));
}

/* El saldo: una cápsula con la cifra de marcador. */
.saldo-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  background: var(--relleno);
  border: 1px solid var(--filo);
  border-radius: var(--radio-pildora);
  padding: 4px 14px 4px 12px;
  font-family: var(--fuente-numero);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  box-shadow: var(--luz-arriba);
  transition: transform var(--rapido) var(--curva), background-color var(--rapido);
}

.saldo-chip:active {
  transform: scale(var(--presion));
}

.saldo-chip small {
  color: var(--acento);
  font-family: var(--fuente);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Barra de pestañas de abajo: vidrio esmerilado, como la de iOS
   ------------------------------------------------------------ */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-top: 1px solid var(--filo);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: var(--nav-alto);
  color: var(--texto-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  transition: color var(--rapido) var(--curva);
}

.nav-item span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--rapido) var(--curva), filter var(--rapido);
}

.nav-item:active svg {
  transform: scale(0.88);
}

.nav-item[aria-current='page'] {
  color: var(--acento);
}

.nav-item[aria-current='page'] svg {
  stroke-width: 2.1;
  filter: drop-shadow(0 0 6px var(--acento-brillo));
}

.nav-item:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radio-control);
}

/* La insignia: cápsula, como las de iOS, en el verde de la casa. */
.nav-punto {
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -22px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radio-pildora);
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--fuente);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--suelo), 0 0 10px var(--acento-brillo);
}

/* ------------------------------------------------------------
   Tarjetas
   ------------------------------------------------------------ */

.tarjeta {
  /* Translúcida, no sólida: así la cancha del fondo se lee a través de
     la pizarra y no solo en los huecos entre tarjetas.
     La opacidad es alta (90%) porque debajo hay casi negro: el texto
     mantiene un contraste de más de 15:1, muy por encima del 4.5:1 que
     se considera el mínimo. Si alguna vez sube --fondo-opacidad de
     forma agresiva, baje también este número y vuelva a mirarlo. */
  background: color-mix(in srgb, var(--suelo-2) 90%, transparent);
  border: 1px solid var(--filo);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--luz-arriba), var(--sombra-1);
  margin-bottom: 12px;
}

/* Navegadores viejos que no conocen color-mix: reciben el color sólido
   de siempre. Pierden el efecto, no la legibilidad. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .tarjeta {
    background: var(--suelo-2);
  }
}

.tarjeta-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--filo);
  font-size: 12px;
  color: var(--texto-2);
}

.tarjeta-cuerpo {
  padding: 14px 16px 16px;
}

.liga {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--texto-2);
}

.equipos {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.equipo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.equipo-nombre {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* El marcador: grande, condensado y en verde, como el tablero. */
.equipo-marcador {
  font-family: var(--fuente-numero);
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
  min-width: 26px;
  text-align: right;
  text-shadow: 0 0 14px var(--acento-brillo);
}

/* ------------------------------------------------------------
   Cuotas: fichas de marcador
   ------------------------------------------------------------ */

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

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

.cuota {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Sin esto, una etiqueta larga en una sola línea ensancha su columna
     de la cuadrícula en vez de recortarse. */
  min-width: 0;
  min-height: 58px;
  padding: 8px 6px;
  border-radius: var(--radio-control);
  background: linear-gradient(180deg, #1b2232 0%, #151b28 100%);
  border: 1px solid var(--filo);
  box-shadow: var(--luz-arriba), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition:
    background var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva),
    transform var(--rapido) var(--curva);
}

.cuota:active {
  transform: scale(var(--presion));
}

.cuota-etiqueta {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-3);
  text-align: center;
  line-height: 1.2;
  /* Una sola línea. Con el nombre del equipo en la etiqueta, "Manchester
     City" se partía en dos y ese botón quedaba más alto que sus vecinos:
     los números dejaban de estar alineados, que es lo primero que el ojo
     compara. El nombre completo sigue en el texto para el lector de
     pantalla; solo se recorta a la vista. */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Aire arriba para la tilde de las mayúsculas ("ESPAÑA", "MÁS DE"): el
     recorte de arriba se la comía. El margen negativo lo compensa, así
     que el botón mide lo mismo. */
  padding-top: 3px;
  margin-top: -3px;
}

.cuota-valor {
  font-family: var(--fuente-numero);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* En lista: una opción por fila, con el nombre entero a la izquierda y
   la cuota a la derecha. Para los mercados de nombres largos (margen de
   victoria, descanso/final, resultado y ambos marcan), que en columnas
   se recortaban y quedaban todos iguales. */
.cuotas.lista {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.cuotas.lista .cuota {
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
}

.cuotas.lista .cuota-etiqueta {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: var(--texto-2);
}

.cuotas.lista .cuota-valor {
  flex: none;
  font-size: 19px;
}

@media (min-width: 900px) {
  .cuotas.lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La elegida: verde lleno, con el brillo del tablero encendido. */
.cuota[aria-pressed='true'] {
  background: linear-gradient(180deg, var(--acento-claro) 0%, var(--acento) 100%);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px color-mix(in srgb, var(--acento) 70%, transparent),
    0 6px 20px -6px var(--acento-brillo),
    0 0 22px -6px var(--acento-brillo);
}

.cuota[aria-pressed='true'] .cuota-valor,
.cuota[aria-pressed='true'] .cuota-etiqueta {
  color: var(--sobre-acento);
}

.cuota[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* Una cuota que acaba de cambiar parpadea: el jugador tiene que
   notarlo ANTES de tocar, no después. */
.cuota.subio { animation: destella-verde 1.1s ease-out; }
.cuota.bajo { animation: destella-rojo 1.1s ease-out; }

/* ------------------------------------------------------------
   Lista compacta de partidos
   ------------------------------------------------------------

   Un partido por fila: hora y equipos a la izquierda (se toca para ver
   todas sus jugadas), cuotas chicas a la derecha con 1 · X · 2. En el
   teléfono entran siete u ocho partidos por pantalla, contra dos de la
   tarjeta grande: las demás ligas quedan a la vista. */

.lista-partidos {
  background: color-mix(in srgb, var(--suelo-2) 90%, transparent);
  border: 1px solid var(--filo);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--luz-arriba), var(--sombra-1);
  margin-bottom: 12px;
}

.partido-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
}

.partido-fila + .partido-fila,
.partido-fila + .lista-partidos-mas {
  border-top: 1px solid var(--filo);
}

/* Hora + equipos: un botón entero, sin aspecto de botón. */
.partido-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 3px 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.partido-info:active {
  opacity: 0.7;
}

/* Que un nombre largo se recorte con "…" en vez de empujar las cuotas
   o esconder el marcador. */
.partido-info > *,
.partido-fila .equipo-id,
.partido-fila .equipo-nombre {
  min-width: 0;
}

.partido-cuando {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.partido-hora {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--texto-3);
  white-space: nowrap;
}

.partido-liga {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.partido-liga::before {
  content: '· ';
}

/* "+3": tiene más jugadas además de la principal. */
.partido-mas {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  color: var(--acento);
  font-family: var(--fuente-numero);
  font-size: 11px;
  font-weight: 700;
}

.partido-fila .vivo {
  padding: 1px 7px 1px 6px;
  font-size: 9.5px;
}

.partido-fila .equipo {
  gap: 8px;
}

.partido-fila .equipo-id {
  gap: 7px;
}

.partido-fila .equipo-nombre {
  font-size: 14.5px;
  line-height: 1.25;
}

.partido-fila .camiseta,
.partido-fila .escudo {
  width: 19px;
  height: 19px;
}

.partido-fila .equipo-marcador {
  min-width: 18px;
  font-size: 17px;
  text-shadow: none;
}

/* Las cuotas de la fila: columnas fijas, para que los números de todos
   los partidos queden alineados en vertical. */
.cuotas.compactas {
  flex: none;
  grid-template-columns: repeat(3, 54px);
  gap: 5px;
}

.cuotas.compactas.dos {
  grid-template-columns: repeat(2, 83.5px);
}

.cuotas.compactas .cuota {
  min-height: 48px;
  padding: 5px 2px;
  gap: 1px;
  border-radius: 10px;
}

.cuotas.compactas .cuota-etiqueta {
  font-size: 10px;
  letter-spacing: 0.02em;
}

.cuotas.compactas .cuota-valor {
  font-size: 16.5px;
}

/* Teléfonos angostos (320 px): las cuotas un poco más chicas. */
@media (max-width: 359px) {
  .cuotas.compactas {
    grid-template-columns: repeat(3, 47px);
    gap: 4px;
  }

  .cuotas.compactas.dos {
    grid-template-columns: repeat(2, 72.5px);
  }

  .cuotas.compactas .cuota-valor {
    font-size: 15px;
  }

  /* No cabe junto a la hora: las jugadas extra se ven al tocar. */
  .partido-mas {
    display: none;
  }
}

/* Con más ancho (tableta, computadora), las cuotas respiran. */
@media (min-width: 720px) {
  .partido-fila {
    padding: 9px 12px 9px 16px;
  }

  .cuotas.compactas {
    grid-template-columns: repeat(3, 66px);
    gap: 6px;
  }

  .cuotas.compactas.dos {
    grid-template-columns: repeat(2, 102px);
  }
}

/* "Ver los 20 partidos": la última fila de la lista. */
.lista-partidos-mas {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
  color: var(--acento);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.lista-partidos-mas:active {
  background: var(--relleno);
}

/* ------------------------------------------------------------
   Destacados: una fila que se desliza de lado
   ------------------------------------------------------------ */

.carrusel {
  display: flex;
  gap: 10px;
  /* Sale hasta el borde de la pantalla: la tarjeta siguiente asoma y se
     entiende que hay más. */
  margin: 0 calc(-1 * var(--canal, 16px));
  padding: 2px var(--canal, 16px) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--canal, 16px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

/* Con ratón no hay dedo que deslice: la barra se deja ver, fina. */
@media (hover: hover) and (pointer: fine) {
  .carrusel {
    scrollbar-width: thin;
    scrollbar-color: var(--filo-fuerte) transparent;
  }

  .carrusel::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .carrusel::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--filo-fuerte);
  }
}

.carrusel-item {
  flex: none;
  width: min(86%, 340px);
  scroll-snap-align: start;
}

/* Uno solo: ocupa todo el ancho, sin dejar un hueco al lado. */
.carrusel-item:only-child {
  width: 100%;
}

.carrusel-item > .tarjeta {
  height: 100%;
  margin-bottom: 0;
}

.carrusel-item .tarjeta-cuerpo {
  padding: 12px 14px 14px;
}

/* Los equipos de la tarjeta destacada: se tocan para ver el partido. */
.equipos-toque {
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.equipos-toque:active {
  opacity: 0.7;
}

.equipos-ver {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acento);
}

.equipos-ver .ico-trazo {
  width: 12px;
  height: 12px;
}

@keyframes destella-verde {
  0%, 100% { border-color: var(--filo); }
  25% { border-color: var(--gana); background: color-mix(in srgb, var(--gana) 16%, #151b28); }
}

@keyframes destella-rojo {
  0%, 100% { border-color: var(--filo); }
  25% { border-color: var(--pierde); background: color-mix(in srgb, var(--pierde) 16%, #151b28); }
}

/* ------------------------------------------------------------
   Señal de en vivo: una cápsula roja que late
   ------------------------------------------------------------ */

.vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--vivo) 16%, transparent);
  color: #ff6b62;
  font-weight: 800;
  font-size: 10.5px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vivo::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vivo);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--vivo) 60%, transparent);
  animation: late 1.6s ease-out infinite;
}

@keyframes late {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vivo) 65%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.suspendido {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--espera);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--acento-claro) 0%, var(--acento) 100%);
  color: var(--sobre-acento);
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -10px var(--acento-brillo);
  transition:
    transform var(--rapido) var(--curva),
    filter var(--rapido) var(--curva),
    background-color var(--rapido) var(--curva),
    box-shadow var(--rapido) var(--curva);
}

.btn:active {
  transform: scale(var(--presion));
  filter: brightness(0.92);
}

.btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* El secundario: relleno gris translúcido, como los botones "gray" de
   iOS, con un filo que lo separa de la tarjeta. */
.btn-fantasma {
  background: var(--relleno);
  border: 1px solid var(--filo);
  color: var(--texto);
  box-shadow: var(--luz-arriba);
}

.btn-fantasma:active {
  background: var(--relleno-fuerte);
  filter: none;
}

.btn-peligro {
  background: linear-gradient(180deg, #ff6464 0%, var(--pierde) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -10px rgba(255, 77, 77, 0.5);
}

/* El chico es una cápsula: para acciones dentro de una tarjeta. */
.btn-chico {
  min-height: 44px;
  font-size: 15px;
  padding: 8px 18px;
  width: auto;
  border-radius: var(--radio-pildora);
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */

.campo {
  margin-bottom: 16px;
}

/* La etiqueta del campo: como el encabezado de una sección agrupada de
   iOS, chica y en mayúsculas, alineada con el texto de adentro. */
.campo label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-2);
  margin: 0 4px 7px;
}

.campo .ayuda {
  margin: 6px 4px 0;
  font-size: 12.5px;
  color: var(--texto-3);
}

.campo .error {
  margin: 6px 4px 0;
  font-size: 12.5px;
  color: var(--pierde);
}

/* ------------------------------------------------------------
   Boleto
   ------------------------------------------------------------ */

/* En el teléfono: una cápsula verde que flota sobre la barra de abajo,
   con el brillo del acento. */
.boleto-barra {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 62px;
  max-width: 540px;
  margin: 0 auto;
  padding: 0 8px 0 18px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(135deg, var(--acento-claro) 0%, var(--acento) 55%, var(--acento-apagado) 100%);
  color: var(--sobre-acento);
  box-shadow: 0 10px 30px -8px var(--acento-brillo), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(calc(100% + 90px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Al esconderse, `visibility` cambia al final: así la salida se ve. */
  transition: transform 0.38s var(--curva-resorte), opacity var(--medio) var(--curva), visibility 0s linear 0.38s;
}

.boleto-barra.visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.42s var(--curva-resorte), opacity var(--medio) var(--curva), visibility 0s;
}

.boleto-barra strong {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* El botón de adentro trae su color en línea (negro con letra verde). */
.boleto-barra .btn {
  min-height: 46px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.boleto-linea {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filo);
}

.boleto-linea:last-child {
  border-bottom: none;
}

/* La × de quitar: el área que se toca es de 44 px, el círculo que se ve
   es más chico. */
.boleto-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px -4px;
  border-radius: 50%;
  color: var(--texto-2);
  font-size: 20px;
  line-height: 1;
  background: radial-gradient(circle, var(--relleno) 0 14px, transparent 14.5px);
  transition: transform var(--rapido) var(--curva), color var(--rapido);
}

.boleto-quitar:active {
  transform: scale(0.88);
  color: var(--texto);
}

/* ------------------------------------------------------------
   Mensajes
   ------------------------------------------------------------ */

.aviso {
  padding: 12px 14px;
  border-left: 3px solid var(--espera);
  border-radius: var(--radio-control);
  background: color-mix(in srgb, var(--espera) 10%, transparent);
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.aviso.malo {
  border-left-color: var(--pierde);
  background: color-mix(in srgb, var(--pierde) 10%, transparent);
}

.aviso.bueno {
  border-left-color: var(--gana);
  background: color-mix(in srgb, var(--gana) 10%, transparent);
}

/* Una nota tranquila: informa, no alarma. (Al retirar: de dónde sale el
   retiro y qué pasa con el bono.) No es .nota, que es la del panel. */
.nota-suave {
  padding: 11px 14px;
  border: 1px solid var(--filo);
  border-radius: var(--radio-control);
  background: var(--relleno);
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Un enlace de texto, para lo que se consulta de vez en cuando
   (las condiciones del bono). */
.enlace-suave {
  display: inline-block;
  min-height: 32px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--texto-2);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.enlace-suave:hover {
  color: var(--texto);
}

.vacio {
  text-align: center;
  padding: 44px 20px;
  color: var(--texto-3);
}

.vacio h3 {
  color: var(--texto-2);
  font-size: 20px;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------
   Pestañas: cápsulas que se deslizan, o control segmentado
   ------------------------------------------------------------

   Muchas opciones (los deportes): una fila de cápsulas que se desliza
   de lado, como los filtros de la App Store. Dos o tres opciones
   (Abiertas / Resueltas): un control segmentado de iOS, a lo ancho. */

.pestanas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px 16px 12px;
  margin: 0 -16px;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
}

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

.pestana {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: var(--radio-pildora);
  background: var(--relleno);
  border: 1px solid var(--filo);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--texto-2);
  white-space: nowrap;
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva),
    transform var(--rapido) var(--curva);
}

.pestana:active {
  transform: scale(var(--presion));
}

.pestana[aria-selected='true'] {
  background: linear-gradient(180deg, var(--acento-claro) 0%, var(--acento) 100%);
  border-color: transparent;
  color: var(--sobre-acento);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px -4px var(--acento-brillo);
}

/* Control segmentado: dos o tres pestañas, o la clase .segmentado. */
/* :is() perdona: en un navegador sin :has() la primera parte se
   descarta y .segmentado sigue funcionando. */
:is(.pestanas:has(> .pestana:nth-child(2)):not(:has(> .pestana:nth-child(4))), .segmentado) {
  display: flex;
  gap: 2px;
  margin: 0 0 14px;
  padding: 3px;
  overflow: visible;
  border-radius: 12px;
  background: var(--relleno);
  border: 1px solid var(--filo);
}

:is(.pestanas:has(> .pestana:nth-child(2)):not(:has(> .pestana:nth-child(4))) > .pestana, .segmentado > *) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  /* Un nombre largo baja de línea dentro de su segmento en vez de
     salirse de él. */
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--texto-2);
}

:is(.pestanas:has(> .pestana:nth-child(2)):not(:has(> .pestana:nth-child(4))) > .pestana[aria-selected='true'], .segmentado > [aria-selected='true'], .segmentado > [aria-pressed='true']) {
  background: linear-gradient(180deg, var(--acento-claro) 0%, var(--acento) 100%);
  color: var(--sobre-acento);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 14px -4px var(--acento-brillo);
}

/* Con cuatro o más segmentos (Depósitos: Pendientes, Aprobados,
   Rechazados, Todos) la letra baja un punto: que quepan en el teléfono
   sin cortarse. */
.segmentado:has(> :nth-child(4)) > * {
  padding: 6px 3px;
  font-size: 13px;
}

/* ------------------------------------------------------------
   Estados de apuesta: cápsulas
   ------------------------------------------------------------ */

.estado {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: var(--radio-pildora);
  white-space: nowrap;
}

.estado.gana { background: color-mix(in srgb, var(--gana) 16%, transparent); color: var(--gana); }
.estado.pierde { background: color-mix(in srgb, var(--pierde) 16%, transparent); color: var(--pierde); }
.estado.espera { background: color-mix(in srgb, var(--espera) 16%, transparent); color: var(--espera); }
.estado.nulo { background: var(--relleno); color: var(--texto-2); }

/* ------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------ */

.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.columna { display: grid; gap: 10px; }
.num { font-family: var(--fuente-numero); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.01em; }
.tenue { color: var(--texto-2); }
.tenue-3 { color: var(--texto-3); }
.texto-malo { color: var(--pierde); }
.texto-espera { color: var(--espera); }
.chico { font-size: 12.5px; }
.centro { text-align: center; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }

.cargando {
  display: block;
  width: 28px;
  height: 28px;
  margin: 40px auto;
  border: 2.5px solid var(--relleno-fuerte);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: gira 0.7s linear infinite;
}

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

/* Escritorio: la misma aplicación, más ancha y sin barra inferior
   pegada al borde. Un solo código, como se prometió. */
@media (min-width: 900px) {
  .envoltura,
  .cabecera-fila { max-width: 840px; }
  .cuotas { grid-template-columns: repeat(3, minmax(0, 190px)); }
  /* Sin esta línea, las filas de dos (béisbol, NBA) ganaban por
     especificidad y ocupaban todo el ancho, mientras las de tres
     quedaban cortas: dos tamaños de botón en la misma lista. */
  .cuotas.dos { grid-template-columns: repeat(2, minmax(0, 190px)); }
}

/* Aviso suave dentro de una hoja: para instrucciones previas, no para
   errores. Usa el ámbar de "espera" porque pide atención sin alarmar. */
.aviso-suave {
  background: color-mix(in srgb, var(--espera) 10%, transparent);
  border-left: 3px solid var(--espera);
  border-radius: var(--radio-control);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-2);
}

.aviso-suave strong {
  color: var(--texto);
}

/* Sugerencias de nombre de usuario: chips que se tocan. */
.sugerencia {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  background: var(--relleno);
  border: 1px solid var(--filo);
  border-radius: var(--radio-pildora);
  color: var(--acento);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  margin: 6px 6px 0 0;
  font-family: var(--fuente);
}

.sugerencia:active {
  background: var(--relleno-fuerte);
}

/* ------------------------------------------------------------
   Avatar
   ------------------------------------------------------------
   Un cuadrado de esquinas muy redondeadas, como el ícono de una
   aplicación de iPhone: ni el círculo de todas las redes ni la esquina
   cortada de antes.
   ------------------------------------------------------------ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 30%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  user-select: none;
}

/* La rejilla para elegir avatar. */
.avatares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 10px;
  margin: 8px 0 4px;
}

.avatar-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  background: var(--relleno);
  border: 1px solid var(--filo);
  border-radius: 14px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido), background-color var(--rapido);
}

.avatar-opcion:active {
  transform: scale(var(--presion));
}

.avatar-opcion[aria-pressed='true'] {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 14%, var(--suelo-3));
  color: var(--texto);
  box-shadow: 0 0 0 1px var(--acento), 0 0 16px -4px var(--acento-brillo);
}

/* La fila de identidad del perfil. */
.perfil-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 18px;
}

.perfil-cabeza .nombre {
  font-family: var(--fuente-titulo);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
}

/* ------------------------------------------------------------
   Portada: destacados, ligas del top y resto A-Z
   ------------------------------------------------------------ */

/* Íconos de trazo: deportes, estrella, trofeo, flecha. Mismo estilo que
   los de la barra de abajo; el color lo pone el texto que los rodea. */
.ico-trazo {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pestana {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pestana .ico-trazo {
  width: 15px;
  height: 15px;
}

/* Banderas: 3:2, con un filo claro para que una bandera blanca (Japón,
   Inglaterra) no se pierda contra el fondo oscuro. */
.bandera {
  width: 18px;
  height: 12px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
}

.bandera-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--suelo-3);
  color: var(--texto-2);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bandera-trofeo {
  width: 16px;
  height: 16px;
  color: var(--espera);
}

/* Escudo generado: iniciales en blanco sobre el color del equipo. El
   fondo va al 30% de luminosidad: el blanco encima queda por encima de
   4.5:1 en cualquier tono. */
.escudo {
  width: 22px;
  height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--escudo-fondo, var(--suelo-3));
  box-shadow: inset 0 0 0 1.5px var(--escudo-borde, var(--borde));
  color: #fff;
  font-family: var(--fuente-numero);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.escudo-tres {
  font-size: 8.5px;
  letter-spacing: 0;
}

/* La camiseta del equipo: un poco más grande que el escudo, porque la
   forma (mangas, cuello, botones) tiene que leerse a este tamaño. */
.camiseta {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
  margin: -1px 0;
}

.escudo-imagen {
  background: transparent;
  box-shadow: none;
}

.escudo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* El escudo va pegado al nombre; el marcador sigue a la derecha. */
.equipo {
  align-items: center;
}

.equipo-id {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.equipo-id .equipo-nombre {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Destacados */
.portada-bloque {
  margin-bottom: 18px;
}

.portada-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.005em;
}

.portada-titulo .ico-trazo {
  width: 21px;
  height: 21px;
  color: var(--acento);
  filter: drop-shadow(0 0 6px var(--acento-brillo));
}

.portada-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--texto-3);
}

/* Destacados: la tarjeta lleva un degradado verde-turquesa que se
   mueve despacio por el filo de arriba, y un reflector en la esquina. */
.tarjeta.destacada {
  border-color: color-mix(in srgb, var(--acento) 32%, transparent);
  /* La primera capa es el filo de arriba (3 px, se repite de lado y se
     desliza); las otras ocupan toda la tarjeta. Va como fondo y no como
     ::before para que la esquina redondeada lo recorte sola, sin
     overflow: hidden, que cortaría el brillo de las cuotas. */
  background:
    linear-gradient(90deg, var(--acento), var(--acento-2), var(--acento-claro), var(--acento)) 0 0 / 300% 3px repeat-x,
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acento) 15%, transparent), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--acento-2) 9%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--acento) 7%, var(--suelo-2)) 0%, color-mix(in srgb, var(--suelo-2) 92%, transparent) 60%);
  box-shadow: var(--luz-arriba), var(--sombra-1), 0 14px 34px -22px var(--acento-brillo);
  animation: barrido 8s linear infinite;
}

/* -150 % corre el filo exactamente un ancho de imagen (300 %): la
   vuelta empalma sin salto. A las capas de tamaño completo el
   porcentaje no las mueve. */
@keyframes barrido {
  to { background-position: -150% 0; }
}

.tarjeta.destacada .tarjeta-cabeza {
  border-bottom-color: color-mix(in srgb, var(--acento) 14%, var(--filo));
}

/* Cabecera de deporte, solo en "Todos" */
.portada-deporte {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--filo);
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
}

.portada-deporte .ico-trazo {
  width: 22px;
  height: 22px;
  color: var(--acento);
  filter: drop-shadow(0 0 6px var(--acento-brillo));
}

/* "Ligas principales" / "Más ligas · A–Z": encabezado de sección
   agrupada de iOS. */
.portada-grupo {
  margin: 18px 4px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-3);
}

/* Una liga: cabecera que abre y cierra, y sus partidos debajo. */
.liga-bloque {
  margin-bottom: 8px;
}

.liga-bloque-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--suelo-3) 92%, transparent);
  border: 1px solid var(--filo);
  border-radius: 14px;
  box-shadow: var(--luz-arriba);
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}

.liga-bloque-cabeza:active {
  background: var(--suelo-4);
}

.liga-bloque-cabeza::-webkit-details-marker {
  display: none;
}

.liga-bloque-cabeza:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.liga-bloque[open] > .liga-bloque-cabeza {
  border-color: var(--filo-fuerte);
}

.liga-bloque-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.liga-bloque-cuenta {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: var(--radio-pildora);
  background: var(--relleno);
  font-family: var(--fuente-numero);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}

.liga-bloque-cabeza > .ico-trazo:last-child {
  width: 15px;
  height: 15px;
  color: var(--texto-3);
  transition: transform var(--medio) var(--curva-resorte);
}

.liga-bloque[open] > .liga-bloque-cabeza > .ico-trazo:last-child {
  transform: rotate(90deg);
}

.liga-bloque-cuerpo {
  padding-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .liga-bloque-cabeza > .ico-trazo:last-child {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Panel: partidos por liquidar
   ------------------------------------------------------------ */

/* El aviso de arriba del control del día. Es un botón entero: se toca
   en cualquier parte. */
.aviso-liquidar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border-left: 4px solid var(--espera);
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido);
}

button.aviso-liquidar:active {
  transform: scale(0.985);
}

.aviso-liquidar-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--espera);
  min-width: 1.2em;
  text-align: center;
}

.aviso-liquidar-texto {
  display: grid;
  gap: 2px;
}

.liga-con-icono .ico-trazo {
  width: 14px;
  height: 14px;
  flex: none;
}

.por-liquidar-partido {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

/* Una nota dentro de la tarjeta. La "ojo" es el motivo por el que la
   liquidación automática no pudo: es lo primero que tiene que leer el
   operador, por eso lleva el color de "espera". */
.nota {
  margin: 8px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-2);
  background: var(--relleno);
  border-left: 3px solid var(--borde-vivo);
  border-radius: 10px;
}

.nota-ojo {
  color: var(--texto);
  border-left-color: var(--espera);
}

/* Local – visitante, en una fila. En pantallas angostas los nombres se
   cortan con puntos suspensivos, los números no. */
.por-liquidar-marcador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin: 14px 0 6px;
}

.por-liquidar-equipo {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--texto-2);
}

.por-liquidar-equipo > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.por-liquidar-numero {
  font-family: var(--fuente-numero);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 10px 8px;
}

.por-liquidar-paga {
  margin: 10px 0 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--acento);
}

.btn-fantasma[aria-pressed='true'] {
  border-color: var(--acento);
  color: var(--acento);
}


/* ------------------------------------------------------------
   Identidad: las fotos de la cédula
   ------------------------------------------------------------ */

.aviso-identidad {
  border-left-color: var(--acento);
}

/* Panel: la tasa de cambio. No es un boton entero (tiene el suyo). */
.aviso-tasa {
  cursor: default;
  border-left-color: var(--borde-vivo);
  flex-wrap: wrap;
}

.aviso-tasa-normal {
  display: block;
}

.aviso-tasa-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 6px;
}

.aviso-tasa-vieja {
  border-left-color: var(--espera);
}

.aviso-servicio {
  cursor: default;
  display: block;
}

.aviso-servicio .fila {
  align-items: flex-start;
}

.aviso-servicio .btn {
  width: auto;
  flex: none;
}

.aviso-servicio-pausa {
  border-left-color: var(--espera);
}

.aviso-servicio-activo {
  border-left-color: var(--gana);
}

.aviso-tasa-falta {
  border-left-color: var(--pierde);
}

.aviso-tasa-falta .aviso-liquidar-num {
  color: var(--pierde);
}

.aviso-tasa-cifra {
  display: grid;
  gap: 0;
  line-height: 1.1;
}

.aviso-tasa-cifra strong {
  font-size: 24px;
}

.aviso-identidad .aviso-liquidar-num {
  color: var(--acento);
}

/* Jugador: cada paso con su vista previa al lado. */
.foto-id {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--filo);
}

.foto-id-vista {
  width: 96px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--suelo-3);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--radio-control);
  overflow: hidden;
  text-align: center;
}

.foto-id-vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El botón es un <label>: el input de archivo va adentro, invisible,
   y todo el botón lo abre. */
.foto-id-boton {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.foto-id-archivo {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  padding: 0;
}

/* Operador: las dos fotos lado a lado, tocables para agrandar. */
.identidad-datos {
  margin-bottom: 10px;
}

.foto-id-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.foto-id-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--suelo-3);
  border: 1px solid var(--filo);
  border-radius: var(--radio-control);
  overflow: hidden;
  cursor: zoom-in;
  padding: 0;
}

.foto-id-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-id-panel-titulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  font-size: 11px;
  text-align: left;
  color: var(--texto);
  background: rgba(5, 7, 10, 0.72);
}

/* ------------------------------------------------------------
   Buscador, favoritos y resultados
   ------------------------------------------------------------ */

/* La barra de arriba de la portada: buscar y resultados. */
/* En el teléfono: el buscador a lo ancho, como el de iOS, y debajo
   Resultados y Predicciones en dos cápsulas parejas. En la computadora
   (más abajo) va todo en una fila. */
.inicio-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}

.buscador-falso {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--relleno);
  border: 1px solid var(--filo);
  border-radius: var(--radio-control);
  color: var(--texto-3);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: text;
  transition: background-color var(--rapido) var(--curva);
}

.buscador-falso:active {
  background: var(--relleno-fuerte);
}

.buscador-falso span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.buscador-falso .ico-trazo,
.buscador-campo .ico-trazo,
.inicio-resultados .ico-trazo {
  width: 17px;
  height: 17px;
  flex: none;
}

.inicio-resultados {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

.inicio-resultados span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 600px) {
  .inicio-barra {
    flex-wrap: nowrap;
  }

  .buscador-falso {
    flex: 1 1 auto;
  }

  .inicio-resultados {
    flex: none;
  }
}

.buscador-caja {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.buscador-campo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--relleno);
  border: 1px solid var(--acento);
  border-radius: var(--radio-control);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
  color: var(--texto-3);
}

.buscador-campo .buscador {
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Encabezado de una lista agrupada: chico, en mayúsculas, en la letra
   del sistema, como en Ajustes. */
.busqueda-titulo {
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 20px 4px 8px;
}

.busqueda-lista {
  padding: 0;
  overflow: hidden;
}

.busqueda-fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 0;
}

/* El separador empieza donde empieza el texto, no en el borde: la
   línea "con sangría" de las listas de iOS. */
.busqueda-fila + .busqueda-fila::before {
  content: '';
  position: absolute;
  top: 0;
  left: 52px;
  right: 0;
  height: 1px;
  background: var(--filo);
}

.busqueda-boton {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.busqueda-nombre {
  display: grid;
  min-width: 0;
}

.busqueda-nombre strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* La estrella. Vacía = no la sigue; llena = la sigue. */
.seguir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 6px 8px;
  background: none;
  border: 0;
  color: var(--texto-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.seguir .ico-trazo {
  width: 20px;
  height: 20px;
  fill: none;
}

.seguir[aria-pressed='true'] {
  color: var(--espera);
}

.seguir .ico-trazo {
  transition: transform var(--medio) var(--curva-resorte);
}

.seguir[aria-pressed='true'] .ico-trazo {
  fill: currentColor;
  transform: scale(1.08);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--espera) 55%, transparent));
}

.seguir:active .ico-trazo {
  transform: scale(0.85);
}

.seguir.con-texto {
  border: 1px solid var(--filo);
  border-radius: var(--radio-pildora);
  background: var(--relleno);
  padding: 6px 14px;
  max-width: 100%;
}

.seguir.con-texto span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--texto-2);
}

.seguir.con-texto[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--espera) 55%, var(--borde));
}

.seguir-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 14px;
}

.seguir-fila .seguir {
  flex: 1 1 140px;
  min-width: 0;
}

.pista-favoritos {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--espera) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--espera) 6%, transparent);
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.45;
}

.pista-favoritos .ico-trazo {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--espera);
}

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

.liga-cabeza h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 28px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Resultados */
.resultados-dia {
  font-size: 18px;
  margin: 22px 4px 8px;
}

.resultado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.resultado + .resultado {
  border-top: 1px solid var(--filo);
}

.resultado-equipos {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.resultado-equipo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--texto-2);
}

.resultado-equipo.gana {
  color: var(--texto);
  font-weight: 600;
}

.resultado-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.resultado-marcador {
  font-size: 21px;
  font-weight: 800;
  min-width: 1.4em;
  text-align: right;
}

.resultado-equipo.gana .resultado-marcador {
  color: var(--acento);
}

.resultado-estado {
  flex: none;
  width: 58px;
  text-align: right;
}

/* La campana de avisos, en la cabecera */
.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campana {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--texto-2);
  cursor: pointer;
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}

.campana:active {
  background: var(--relleno);
  transform: scale(0.92);
}

.campana .ico-trazo {
  width: 22px;
  height: 22px;
}

.campana-punto {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  box-shadow: 0 0 0 2px var(--suelo);
  background: var(--vivo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.avisos-lista {
  padding: 0;
}

.aviso-fila {
  display: flex;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  background: none;
  border: 0;
  color: var(--texto-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.aviso-fila + .aviso-fila {
  border-top: 1px solid var(--filo);
}

.aviso-fila:first-child {
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}

.aviso-fila:last-child {
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
}

.aviso-fila:only-child {
  border-radius: var(--radio-tarjeta);
}

.aviso-fila.sin-leer {
  background: color-mix(in srgb, var(--acento) 6%, transparent);
}

.aviso-fila.sin-leer strong {
  color: var(--texto);
}

.aviso-icono .ico-trazo {
  width: 20px;
  height: 20px;
  color: var(--acento);
}

.aviso-texto {
  display: grid;
  gap: 2px;
  line-height: 1.4;
}

/* Panel: el menú de secciones, en grupos como los Ajustes de iOS. En
   la computadora, tres grupos lado a lado. */
.panel-menu {
  display: grid;
  gap: 0 14px;
  margin-bottom: 8px;
}

.panel-menu .lista-ios-titulo {
  margin-top: 4px;
}

@media (min-width: 900px) {
  .panel-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.panel-menu .btn {
  flex: 1 1 auto;
  width: auto;
}

/* Panel: retiros por pagar */
.panel-menu-num {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--espera);
  color: var(--sobre-acento);
  font-size: 13px;
  line-height: 1;
}

.aviso-retiros {
  border-left-color: var(--acento);
}

.aviso-retiros .aviso-liquidar-num {
  color: var(--acento);
}

.retiro-quien {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.retiro-quien > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.retiro-quien > :last-child {
  flex: 0 1 45%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.retiro-monto {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--texto);
  white-space: nowrap;
}

.retiro-mio {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--filo);
}

.retiro-mio-cabeza,
.retiro-de-otro {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  line-height: 1.4;
  background: var(--relleno);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
}

.retiro-de-otro {
  margin-top: 12px;
  border-left-color: var(--texto-3);
}

.retiro-mio .retiro-mio-cabeza strong {
  color: var(--acento);
}

.tarjeta.retiro-es-de-otro {
  opacity: 0.78;
}

.tarjeta.retiro-es-mio {
  border-color: var(--acento-apagado);
}

.casilla-pagado {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 13px 14px;
  line-height: 1.4;
  background: var(--relleno);
  border: 1px solid var(--filo);
  border-radius: var(--radio-control);
  cursor: pointer;
}

.casilla-pagado:has(input:checked) {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background: color-mix(in srgb, var(--acento) 8%, var(--relleno));
}

.casilla-pagado input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--acento);
}

/* Panel: cuentas de cobro */
.campo-cobro {
  display: grid;
  gap: 4px;
}

.cuenta-cobro-apagada {
  opacity: 0.6;
}

.direccion-usdt {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-all;
  color: var(--texto);
}

.aviso-tasa-propuesta {
  border-left-color: var(--espera);
  margin-top: 8px;
}

/* ============================================================
   COMPUTADORA (1024 px o más)
   ============================================================

   El mismo sitio, en tres columnas: deportes y lo que sigue a la
   izquierda, la pantalla en el centro, el boleto siempre a la vista a
   la derecha. La barra de abajo del teléfono sube a la cabecera.
   En el teléfono las columnas de los lados no existen. */

.lateral {
  display: none;
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  .cabecera-fila {
    max-width: 1400px;
    height: 64px;
    padding: 0 24px;
  }

  /* De 1024 a 1279 no alcanza para tres columnas sin apretar el
     centro: se quedan el centro y el boleto (los deportes ya están en
     las pestañas de arriba). */
  .marco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-areas: 'app der';
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 24px 0;
    align-items: start;
  }

  .lateral-izq { grid-area: izq; }
  #app { grid-area: app; min-width: 0; }
  .lateral-der { grid-area: der; }

  body[data-zona='panel'] .marco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'app';
  }

  body[data-zona='entrar'] .marco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'app';
  }

  .lateral {
    display: block;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 12px 2px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--relleno-fuerte) transparent;
  }

  .lateral-izq,
  body[data-zona='panel'] .lateral-der,
  body[data-zona='entrar'] .lateral {
    display: none;
  }

  /* El centro ya no es una columna de teléfono. */
  #app .envoltura {
    max-width: 920px;
    padding-left: 0;
    padding-right: 0;
  }

  /* La barra de navegación sube a la cabecera y se vuelve un control
     segmentado en cápsula, centrado, como la barra de una app de Mac. */
  .nav {
    top: calc(env(safe-area-inset-top, 0px) + 11px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: flex !important;
    align-items: center;
    gap: 2px;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--filo);
    border-radius: var(--radio-pildora);
    background: var(--relleno);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--luz-arriba);
  }

  /* De 1024 a 1279 no hay espacio para centrarla sin rozar el saldo:
     va pegada al logo. */
  @media (max-width: 1279px) {
    .nav {
      left: 96px;
      transform: none;
    }

    .nav-item {
      padding: 0 13px;
    }
  }

  /* Entrar no lleva barra (el JS la esconde en línea, pero el
     !important de arriba le ganaba). */
  body[data-zona='entrar'] .nav {
    display: none !important;
  }

  .nav-item {
    flex-direction: row;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--radio-pildora);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--texto-2);
    transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }

  .nav-item svg {
    width: 17px;
    height: 17px;
  }

  .nav-item[aria-current='page'] {
    background: var(--suelo-4);
    color: var(--acento);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .nav-item[aria-current='page'] svg {
    filter: none;
  }

  .nav-punto {
    position: static;
    margin: 0 0 0 2px;
    box-shadow: none;
  }

  /* El boleto está a la derecha: la barra verde de abajo sobra. */
  .boleto-barra {
    display: none;
  }

  /* El boleto de la derecha: vidrio, con su título de pizarra. */
  .boleto-lateral {
    background: color-mix(in srgb, var(--suelo-2) 82%, transparent);
    -webkit-backdrop-filter: var(--desenfoque);
    backdrop-filter: var(--desenfoque);
    box-shadow: var(--luz-arriba), var(--sombra-2);
  }

  .boleto-lateral > .tarjeta-cabeza {
    min-height: 52px;
    padding: 14px 18px 10px;
    border-bottom: 0;
  }

  .boleto-lateral > .tarjeta-cabeza .liga {
    font-family: var(--fuente-titulo);
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0;
    color: var(--texto);
  }

  .boleto-lateral .tarjeta-cuerpo {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Los montos rápidos del boleto, en la columna angosta. */
  .boleto-lateral .pestana,
  .boleto-lateral .montos-rapidos .pestana {
    min-width: 0;
    padding: 6px 2px;
    font-size: 14px;
  }

  .boleto-lateral .par-de-botones .btn {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Las cápsulas de deportes: sin el margen negativo del teléfono, y
     con el borde derecho que se desvanece para decir "hay más". */
  .pestanas {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .pestanas:has(> .pestana:nth-child(4)) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    padding-right: 40px;
  }

  .pestanas:has(> .pestana:nth-child(2)):not(:has(> .pestana:nth-child(4))) {
    max-width: 440px;
  }

  /* El menú del panel: cápsulas de su tamaño, no estiradas. */
  .panel-menu .btn {
    flex: 0 0 auto;
  }

  /* Entrar y registrarse: una tarjeta de vidrio angosta en el centro,
     sobre la cancha. */
  body[data-zona='entrar'] #app > .pantalla {
    max-width: 460px;
    margin: 40px auto;
    padding: 36px 32px 28px;
    border: 1px solid var(--filo);
    border-radius: 28px;
    background: color-mix(in srgb, var(--suelo-2) 78%, transparent);
    -webkit-backdrop-filter: var(--desenfoque);
    backdrop-filter: var(--desenfoque);
    box-shadow: var(--luz-arriba), var(--sombra-2), 0 30px 80px -40px var(--acento-brillo);
  }
}

/* Pasar el ratón por encima: lo que se puede tocar lo dice. Solo con
   ratón: en el teléfono un :hover se queda pegado después del toque. */
@media (hover: hover) and (pointer: fine) {
  .cuota:hover:not(:disabled):not([aria-pressed='true']) {
    border-color: var(--filo-fuerte);
    background: linear-gradient(180deg, #222b3e 0%, #1a2131 100%);
    transform: translateY(-1px);
  }

  .btn:hover {
    filter: brightness(1.06);
  }

  .btn-fantasma:hover {
    background: var(--relleno-fuerte);
    filter: none;
  }

  .pestana:hover:not([aria-selected='true']) {
    color: var(--texto);
    background: var(--relleno-fuerte);
  }

  .nav-item:hover:not([aria-current='page']) {
    color: var(--texto);
  }

  @media (min-width: 1024px) {
    .nav-item:hover:not([aria-current='page']) {
      background: rgba(255, 255, 255, 0.05);
    }
  }

  .lateral-enlace:hover:not([aria-current='page']) {
    background: var(--relleno);
    color: var(--texto);
  }

  .liga-bloque-cabeza:hover {
    background: var(--suelo-4);
  }

  .busqueda-boton:hover,
  .aviso-fila:hover {
    background: rgba(255, 255, 255, 0.035);
  }

  .campana:hover,
  .seguir:not(.con-texto):hover {
    background: var(--relleno);
  }

  .saldo-chip:hover {
    background: var(--relleno-fuerte);
  }
}

@media (min-width: 1280px) {
  .marco {
    grid-template-columns: 220px minmax(0, 1fr) 350px;
    grid-template-areas: 'izq app der';
    gap: 28px;
  }

  body[data-zona='panel'] .marco {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: 'izq app';
  }

  .lateral-izq {
    display: block;
  }

  body[data-zona='entrar'] .lateral-izq {
    display: none;
  }
}

/* La columna de la izquierda: una barra lateral de Mac. */
.lateral-titulo {
  margin: 20px 10px 6px;
  font-family: var(--fuente);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-3);
  letter-spacing: 0.06em;
}

.lateral-lista {
  display: grid;
  gap: 2px;
}

.lateral-enlace {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  color: var(--texto-2);
  font-weight: 600;
  font-size: 14.5px;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.lateral-enlace span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lateral-enlace .ico-trazo,
.lateral-enlace svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.lateral-enlace[aria-current='page'] {
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent);
}

.lateral .buscador-falso {
  width: 100%;
}

.boleto-lateral .tarjeta-cuerpo {
  padding-top: 4px;
}

/* Promociones en el boleto y en Mis jugadas: un cupón con su borde
   punteado, como un ticket. */
.gratis-lista {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.gratis-chip {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border: 1.5px dashed color-mix(in srgb, var(--acento) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--acento) 6%, transparent);
  color: var(--texto);
  transition: transform var(--rapido) var(--curva), background-color var(--rapido);
}

.gratis-chip:active {
  transform: scale(0.985);
}

.gratis-chip .chico {
  color: var(--texto-2);
}

.gratis-chip.activa {
  border-style: solid;
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 15%, transparent);
  box-shadow: 0 0 18px -6px var(--acento-brillo);
}

.gratis-chip.activa strong {
  color: var(--acento);
}

.aumento-parley {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--espera) 12%, transparent);
  border-left: 3px solid var(--espera);
  border-radius: 10px;
  color: var(--texto);
  font-weight: 600;
  font-size: 14px;
}

.aumento-parley .num {
  color: var(--espera);
  font-size: 16px;
}

/* Seguro de parley en el boleto: lo que cubre. */
.seguro-parley {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  gap: 8px;
  flex-wrap: wrap;
}

.seguro-parley .chico {
  font-weight: 400;
  color: var(--texto-2);
  text-align: right;
}

/* Parley compartido: el enlace, y las selecciones que ya cerraron. */
.enlace-compartido {
  display: block;
  padding: 13px 14px;
  background: var(--suelo-3);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--radio-control);
  font-size: 15px;
  word-break: break-all;
  user-select: all;
}

.compartida-cerrada {
  opacity: 0.55;
}

a.btn {
  text-decoration: none;
}

/* Dos botones lado a lado (Compartir y Vaciar en el boleto). */
.par-de-botones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.boton-compartir {
  width: 100%;
}

/* Dos etiquetas seguidas (potenciado y seguro): juntas, no repartidas. */
.etiqueta-promo + .etiqueta-promo {
  margin-left: 0;
}

.etiqueta-promo {
  margin-left: auto;
  margin-right: 8px;
  padding: 3px 9px;
  border-radius: var(--radio-pildora);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sobre-acento);
  background: linear-gradient(180deg, #ffc24d 0%, var(--espera) 100%);
}

/* ============================================================
   Predicciones (vistas-predicciones.js)
   ============================================================ */

.pred-intro h1 {
  margin: 4px 0 6px;
}

.pred-intro p {
  margin: 0 0 14px;
  line-height: 1.45;
  font-size: 14px;
}

.pred-lista {
  display: grid;
  gap: 12px;
}

@media (min-width: 1280px) {
  .pred-lista {
    grid-template-columns: 1fr 1fr;
  }
}

.pred-tarjeta {
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido);
}

.pred-tarjeta:active {
  transform: scale(0.985);
}

.pred-pregunta {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
}

.pred-pregunta.grande {
  font-size: 22px;
}

.pred-prob {
  justify-content: flex-start;
  gap: 8px;
  align-items: baseline;
}

.pred-grande {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--acento);
  text-shadow: 0 0 18px var(--acento-brillo);
}

.pred-barra {
  height: 8px;
  margin: 12px 0 14px;
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--pierde) 55%, transparent);
  overflow: hidden;
}

.pred-barra-si {
  display: block;
  height: 100%;
  border-radius: var(--radio-pildora);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gana) 75%, #000), var(--gana));
  box-shadow: 0 0 10px color-mix(in srgb, var(--gana) 50%, transparent);
  transition: width var(--medio) var(--curva-resorte);
}

.pred-botones,
.pred-lados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pred-lados {
  margin-bottom: 14px;
}

.pred-si,
.pred-no {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 50px;
  padding: 10px 16px;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid;
  border-radius: 14px;
  background: var(--relleno);
  color: var(--texto);
  transition: transform var(--rapido) var(--curva), background-color var(--rapido), border-color var(--rapido), box-shadow var(--medio);
}

.pred-si:active,
.pred-no:active {
  transform: scale(var(--presion));
}

.pred-si strong,
.pred-no strong {
  font-variant-numeric: tabular-nums;
  font-size: 21px;
}

.pred-si {
  border-color: color-mix(in srgb, var(--gana) 60%, transparent);
}

.pred-no {
  border-color: color-mix(in srgb, var(--pierde) 60%, transparent);
}

.pred-si strong {
  color: var(--gana);
}

.pred-no strong {
  color: var(--pierde);
}

.pred-si.activo {
  background: color-mix(in srgb, var(--gana) 18%, transparent);
  border-color: var(--gana);
  box-shadow: 0 0 20px -6px color-mix(in srgb, var(--gana) 60%, transparent);
}

.pred-no.activo {
  background: color-mix(in srgb, var(--pierde) 18%, transparent);
  border-color: var(--pierde);
  box-shadow: 0 0 20px -6px color-mix(in srgb, var(--pierde) 60%, transparent);
}

.pred-comprar-no {
  background: linear-gradient(180deg, #ff6464 0%, var(--pierde) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -10px rgba(255, 77, 77, 0.5);
}

.pred-cotizacion {
  min-height: 64px;
  margin-bottom: 12px;
}

.pred-cobra {
  color: var(--acento);
  font-size: 20px;
}

.pred-reglas {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--relleno);
  border: 1px solid var(--filo);
  border-radius: var(--radio-control);
}

.pred-reglas summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 24px;
}

.pred-reglas p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.pred-subtitulo {
  margin: 26px 0 10px;
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
}

.pred-posicion {
  cursor: pointer;
}

.pred-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pred-acciones .btn {
  flex: 1 1 auto;
}

.pred-nueva > summary {
  cursor: pointer;
  list-style: none;
}

.pred-nueva textarea {
  width: 100%;
  font: inherit;
}

/* ============================================================
   Arma tu apuesta, pago anticipado, sistema
   ============================================================ */

.evento-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.pago-anticipado {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--espera);
  border-radius: 10px;
  background: color-mix(in srgb, var(--espera) 10%, transparent);
  line-height: 1.45;
}

.arma-mercados {
  display: grid;
  gap: 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}

.arma-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.arma-chip {
  padding: 8px 14px;
  min-height: 40px;
  border: 1px solid var(--filo);
  border-radius: var(--radio-pildora);
  background: var(--relleno);
  color: var(--texto);
  font-size: 14px;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido), border-color var(--rapido), box-shadow var(--medio);
}

.arma-chip:active {
  transform: scale(var(--presion));
}

.arma-chip.activa {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  box-shadow: 0 0 14px -4px var(--acento-brillo);
  font-weight: 600;
}

.arma-resumen {
  min-height: 56px;
}

/* Varias etiquetas en la cabecera de una jugada (potenciado, seguro,
   sistema...): bajan de linea enteras, sin partir el codigo ni la
   etiqueta por la mitad. */
.tarjeta-cabeza:has(.etiqueta-promo) {
  flex-wrap: wrap;
  row-gap: 6px;
}

.tarjeta-cabeza .liga,
.etiqueta-promo {
  white-space: nowrap;
}

.etiqueta-promo {
  margin-right: 0;
}

/* Montos rapidos: cuatro columnas que caben siempre (antes el cuarto se
   salia de la hoja en un telefono angosto). */
.montos-rapidos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}

.montos-rapidos .pestana {
  justify-content: center;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  min-width: 0;
  min-height: 40px;
  font-family: var(--fuente-numero);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.pred-cotizacion .num {
  white-space: nowrap;
}

.tarjeta-cabeza:has(.etiqueta-promo) .estado {
  margin-left: auto;
}

/* Editando una jugada ya hecha: el boleto avisa en qué está. */
.aviso-edicion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-control);
  padding: 11px 14px;
  line-height: 1.4;
  color: var(--texto-2);
}

.aviso-edicion strong {
  color: var(--texto);
}

/* ============================================================
   Hojas (ui.js → hoja()): suben desde abajo, como en iOS
   ============================================================

   ui.js les pone estilos en línea (el fondo, el borde verde de arriba
   y la animación de entrada). Aquí se pisan con !important SOLO esas
   propiedades; el alto máximo y el desplazamiento siguen viniendo de
   allá. En la computadora la hoja es una ventana en el centro. */

.hoja-fondo {
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
  animation: hoja-fondo-entra var(--medio) var(--curva) !important;
}

.hoja-panel {
  position: relative;
  background: linear-gradient(180deg, #141a26 0%, var(--suelo-2) 140px) !important;
  border-top: 0 !important;
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: hoja-sube 0.44s var(--curva-resorte);
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.hoja-panel::-webkit-scrollbar {
  display: none;
}

/* La agarradera de arriba. */
.hoja-panel::before {
  content: '';
  display: block;
  width: 38px;
  height: 5px;
  margin: 7px auto 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.24);
}

/* La fila del título: se queda arriba al desplazar, sobre vidrio. */
.hoja-panel > .fila:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -16px 6px;
  padding: 10px 16px 10px 20px !important;
  background: color-mix(in srgb, #131924 84%, transparent);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
}

.hoja-panel > .fila:first-child h2 {
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.005em;
  padding-right: 0.06em;
}

@keyframes hoja-sube {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes hoja-fondo-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hoja-aparece {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .hoja-fondo {
    align-items: center !important;
    padding: 24px;
  }

  .hoja-panel {
    max-width: 560px !important;
    max-height: 86vh !important;
    border: 1px solid var(--filo-fuerte) !important;
    border-radius: var(--radio-hoja);
    box-shadow: var(--sombra-2), 0 30px 80px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: hoja-aparece 0.32s var(--curva-resorte);
  }

  .hoja-panel::before {
    display: none;
  }

  .hoja-panel > .fila:first-child {
    padding-top: 16px !important;
  }
}

/* ------------------------------------------------------------
   Avisos flotantes (ui.js → aviso()): la notificación de iOS
   ------------------------------------------------------------
   También traen su estilo en línea; se pisa la forma y el vidrio, y
   se respeta el filo de color de la izquierda, que dice qué tipo es. */

.avisos > div {
  border-radius: 14px;
  background: rgba(28, 34, 48, 0.88) !important;
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  line-height: 1.4;
  animation: aviso-entra 0.42s var(--curva-resorte) !important;
}

/* Encima de la barra de abajo y del boleto, contando la barra de
   gestos del iPhone (el cálculo en línea de ui.js no la cuenta). En la
   computadora la barra está arriba: los avisos van abajo, al borde. */
.avisos {
  bottom: calc(var(--nav-alto) + var(--boleto-alto, 0px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
}

@media (min-width: 1024px) {
  .avisos {
    bottom: 24px !important;
  }
}

/* Con una hoja abierta: arriba, para no quedar detrás de ella ni encima
   de sus botones (ver aviso() en js/ui.js). */
.avisos.arriba {
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  bottom: auto !important;
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Piezas de iOS para usar desde las vistas
   ============================================================

   Clases nuevas, todavía sin uso en el JS, para quien arme pantallas:

     .titulo-grande        el título grande de arriba (ya se aplica
                           solo al primer h1 de cada .pantalla)
     .segmentado           control segmentado: un contenedor con
                           botones adentro; el elegido lleva
                           aria-selected="true" o aria-pressed="true"
                           (dos o tres .pestana ya se ven así solas)
     .lista-ios            lista agrupada de Ajustes, con
       .lista-ios-titulo   su encabezado (va ANTES de la lista)
       .lista-ios-fila     cada fila (button, a o div); .con-flecha le
                           pone el ">" y .peligro la pinta de rojo
       .lista-ios-valor    el valor gris a la derecha de una fila
       .lista-ios-pie      la nota chica de abajo (va DESPUÉS)
     .vidrio               superficie de vidrio esmerilado
     .interruptor          una casilla (input type=checkbox) con
                           forma de interruptor de iOS
   ------------------------------------------------------------ */

.lista-ios {
  background: color-mix(in srgb, var(--suelo-2) 90%, transparent);
  border: 1px solid var(--filo);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--luz-arriba), var(--sombra-1);
  overflow: hidden;
  margin-bottom: 16px;
}

.lista-ios-titulo {
  margin: 22px 16px 8px;
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-3);
}

.lista-ios-pie {
  margin: -8px 16px 18px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texto-3);
}

.lista-ios-fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  background: none;
  border: 0;
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--rapido) var(--curva);
}

.lista-ios-fila + .lista-ios-fila::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  background: var(--filo);
}

button.lista-ios-fila:active,
a.lista-ios-fila:active {
  background: rgba(255, 255, 255, 0.06);
}

.lista-ios-fila .ico-trazo {
  width: 20px;
  height: 20px;
  color: var(--acento);
}

.lista-ios-valor {
  margin-left: auto;
  color: var(--texto-2);
  font-size: 15px;
  text-align: right;
}

.lista-ios-fila.con-flecha::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-top: 2px solid var(--texto-3);
  border-right: 2px solid var(--texto-3);
  border-radius: 1px;
  transform: rotate(45deg);
}

.lista-ios-fila.con-flecha .lista-ios-valor {
  margin-right: 4px;
}

.lista-ios-fila.con-flecha:has(.lista-ios-valor)::after {
  margin-left: 0;
}

.lista-ios-fila.peligro {
  color: var(--pierde);
}

.vidrio {
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--filo);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vidrio {
    background: var(--vidrio-solido);
  }
}

/* El interruptor: el círculo blanco es una capa de fondo que se
   desliza (background-position sí se anima). */
input[type='checkbox'].interruptor {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: var(--radio-pildora);
  background:
    radial-gradient(circle, #fff 0 12.5px, transparent 13px) 2px 50% / 27px 27px no-repeat,
    var(--relleno-fuerte);
  box-shadow: inset 0 0 0 1px var(--filo);
  cursor: pointer;
  transition: background-position var(--medio) var(--curva-resorte), background-color var(--medio) var(--curva);
}

input[type='checkbox'].interruptor:checked {
  background-color: var(--acento);
  background-position: calc(100% - 2px) 50%, 0 0;
  box-shadow: 0 0 14px -4px var(--acento-brillo);
}

input[type='checkbox'].interruptor:disabled {
  opacity: 0.4;
}

/* ------------------------------------------------------------
   Teléfonos angostos (360 px y menos)
   ------------------------------------------------------------ */

@media (max-width: 380px) {
  .pantalla > h1,
  .pantalla > div > h1:first-child,
  .titulo-grande {
    font-size: 32px;
  }

  .cuota-valor {
    font-size: 20px;
  }

  .cuotas {
    gap: 6px;
  }

  .tarjeta-cabeza,
  .tarjeta-cuerpo {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pestana {
    padding-left: 13px;
    padding-right: 13px;
  }

  .nav-item {
    font-size: 10px;
    letter-spacing: -0.01em;
  }
}

/* La barra de progreso del bono (Mi dinero) viene con estilo en línea
   y sin clase: se le redondean las puntas. */
.tarjeta-cuerpo > div[style*='height:5px'] {
  height: 6px !important;
  border-radius: var(--radio-pildora);
  overflow: hidden;
}

.tarjeta-cuerpo > div[style*='height:5px'] > div {
  border-radius: var(--radio-pildora);
  box-shadow: 0 0 10px var(--acento-brillo);
}

/* ============================================================
   Transacciones, registros y revisión de depósitos
   ============================================================ */

/* Una lista agrupada sin filas no deja una caja vacía. */
.lista-ios:empty {
  display: none;
}

/* Pastilla de estado: Pendiente, Aprobado, Rechazado... El color llega
   en --chip desde la vista. */
.chip-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--chip, var(--texto-2));
  background: color-mix(in srgb, var(--chip, var(--texto-3)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip, var(--texto-3)) 35%, transparent);
  white-space: nowrap;
}

.chip-estado::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.transaccion-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
}

.transaccion-icono.entra {
  color: var(--gana);
  background: color-mix(in srgb, var(--gana) 15%, transparent);
}

.transaccion-icono.sale {
  color: var(--texto);
  background: var(--relleno);
}

.resumen-pendiente {
  border-color: color-mix(in srgb, var(--espera) 40%, transparent);
}

/* Cifras grandes del panel: dos por fila en el teléfono, cuatro en la
   computadora. */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (min-width: 720px) {
  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi .num {
  overflow-wrap: normal;
  line-height: 1.1;
}

/* Las cifras de Depósitos: una fila de cuatro, chicas, también en el
   teléfono (la lista es lo importante, no los números). */
.kpis.kpis-fila {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kpis-fila .kpi {
  padding: 10px 8px 9px;
  gap: 2px;
}

.kpis-fila .kpi .num {
  font-size: 20px;
}

.kpis-fila .kpi .chico {
  font-size: 11.5px;
  line-height: 1.2;
}

.kpis-fila .kpi.resaltado .num {
  color: var(--espera);
}

/* Barras de la serie (registros y depósitos por hora, día o mes). */
.serie-registros summary {
  list-style: none;
}

.serie-registros summary::-webkit-details-marker {
  display: none;
}

.serie-leyenda {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.serie-punto {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.serie-punto.registros,
.serie-barra.registros {
  background: var(--acento-2);
}

.serie-punto.depositos,
.serie-barra.depositos {
  background: var(--acento);
}

.serie-fila {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.serie-etiqueta {
  text-transform: capitalize;
}

.serie-barras {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.serie-barra {
  height: 6px;
  min-width: 2px;
  border-radius: 3px;
  transition: width var(--rapido, 0.2s) ease;
}

.serie-num {
  color: var(--texto-3);
  min-width: 44px;
  text-align: right;
}

.aviso-banco {
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--relleno);
  margin-bottom: 6px;
}