/* ==========================================================================
   TorneosDePadel — Sistema de diseño
   --------------------------------------------------------------------------
   CSS puro, sin frameworks, sin build. Mobile-first. Contraste AA mínimo.
   Áreas táctiles ≥44×44px. Iconos SVG en línea (sin emojis).
   Paleta de partida (marcador del cliente) conservada tal cual y ampliada
   con escalas, estados y semántica que conviven con ella.

   Índice
   1. Fuentes
   2. Tokens — paleta cruda
   3. Tokens — roles semánticos (tema oscuro "Modo pista", por defecto)
   4. Tema oscuro "Modo pista" ([data-tema="oscuro"] + prefers-color-scheme)
   5. Reset y elementos base
   6. Utilidades de layout
   7. Tipografía
   8. Iconos
   9. Botones
   10. Formularios
   11. Insignias (rol y estado)
   12. Tarjetas genéricas
   13. Cabecera de app
   14. Tarjeta de partido
   15. Marcador rápido de anotación
   16. Clasificación
   17. Tarjeta de jugador
   18. Buscador de jugadores
   19. Tarjeta de convocatoria
   20. Progreso y cronómetro
   21. Estados vacíos, mensajes, esqueletos de carga
   22. Asistente por pasos
   23. Utilidades varias y accesibilidad de movimiento
   ========================================================================== */

/* 1. Fuentes -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap');

/* 2. Tokens — paleta cruda -------------------------------------------------
   Estos valores no cambian de nombre entre temas: son el "marcador" de
   marca. Los componentes NO deben usarlos directamente salvo casos de
   marca fija (p. ej. la cabecera); usan los roles semánticos del bloque 3. */
:root{
  /* Paleta de partida del cliente */
  --pista:#0C2A31;        /* verde pista de noche: tinta principal en claro, fondo en oscuro */
  --pista-alta:#123B45;   /* superficie elevada del tema oscuro */
  --pista-oscura:#081D22; /* fondo hondo del tema oscuro, huecos y scrims */
  --cristal:#17505C;      /* degradado de cabecera (fija en los dos temas) */
  --cristal-oscuro:#0F3941;
  --cal:#EDF3F0;          /* blanco cal (línea de cal de la pista): tinta sobre la cabecera y en oscuro */
  --cal-suave:#9DB6B9;    /* texto secundario del tema oscuro */
  --pelota:#D9F24B;       /* acento, amarillo pelota */
  --pelota-oscuro:#A9C93A;
  --red:#2E7D6B;          /* verde red (la malla central) */
  --red-oscuro:#235F52;

  /* Blancos y tintes del tema claro ------------------------------------
     El lienzo es blanco de verdad. Lo que hay encima no se separa
     oscureciendo la página, sino con borde y sombra; el tinte se reserva
     para lo HUNDIDO (campos, pistas de progreso, casillas), que es donde
     un fondo más apagado que el papel significa algo. */
  --blanco:#FFFFFF;
  --cal-hundido:#F1F6F4;  /* 13.82:1 con la tinta · 5.42:1 con el texto suave */

  /* Tintas del tema claro sobre blanco. Cada una medida, no supuesta.
     El criterio es el mismo de Colkee: un tono ~700 de la misma familia,
     que mantiene la lectura de color y llega a AA. Si tocas uno de estos,
     tests/ContrasteTest.php te lo dice. */
  --cristal-texto-claro:#3E6B72;  /* 5.91:1 sobre blanco · 5.42:1 sobre --cal-hundido */
  --red-claro:#235F52;            /* 7.42:1 sobre blanco · blanco encima: 7.42:1 */
  --exito-claro:#1F7A4C;          /* 5.32:1 sobre blanco · 4.66:1 sobre su relleno suave */
  --aviso-claro:#8A5A05;          /* 5.92:1 sobre blanco · 5.16:1 sobre su relleno suave */
  --error-claro:#B23A2C;          /* 5.94:1 sobre blanco · 5.10:1 sobre su relleno suave */
  --info-claro:#1B6A94;           /* 5.94:1 sobre blanco · 5.15:1 sobre su relleno suave */

  /* Tinta de los enlaces de la cabecera, que es oscura en los dos temas.
     Antes usaba --cal-suave y daba 4.20:1 sobre el cristal: por debajo de
     AA justo en la navegación principal. */
  --cristal-enlace:#C2D5D7;       /* 5.90:1 sobre --cristal */

  /* Semánticos del tema oscuro — familias propias, no compiten con pelota/red */
  --exito:#4CB97C;        --exito-texto:#5FCB8D;
  --aviso:#E8A93D;        --aviso-texto:#F0C15B;
  --error:#E8654F;        --error-texto:#F48A7C;  /* 5.05:1 sobre --pista-alta; con #F0796A eran 4.40:1 */
  --info:#5FBBE8;         --info-texto:#6FC3EA;

  /* 3. Roles semánticos — tema por defecto: fondo blanco ------------------
     color-scheme:light no es decorativo: sin él, el force-dark de Chrome en
     Android reinterpreta la página por su cuenta y la devuelve oscura y con
     los contrastes rotos. Es el mismo motivo por el que está en Colkee. */
  color-scheme: light;
  /* El verde de WhatsApp, en la versión oscura de su propia marca: el
     #25D366 que todo el mundo reconoce da 1.9:1 sobre blanco y no se puede
     usar como texto. Este da 7.67:1 y se sigue leyendo como WhatsApp. */
  --whatsapp-texto: #075E54;
  --whatsapp-suave: #E3F3F0;
  --color-fondo: var(--blanco);
  /* Las tarjetas son blancas como la página: un tinte POR ENCIMA del blanco
     no existe, y si se tiñen se leen como hundidas, que es lo contrario de
     lo que son. Lo que las separa es el borde y la sombra. */
  --color-fondo-elevado: var(--blanco);
  --color-fondo-hondo: var(--cal-hundido);
  --color-texto: var(--pista);               /* 15.10:1 sobre blanco */
  --color-texto-suave: var(--cristal-texto-claro);
  /* Decorativo, acompañado de sombra: separa la tarjeta del papel sin
     pretender ser el límite de un control. */
  --color-borde: rgba(12,42,49,.18);
  /* Este sí es el límite de un control (campos, interruptores, botón
     secundario, casillas del código). WCAG 1.4.11 pide 3:1 y con .26
     se quedaba en 1.70:1: un campo sin borde perceptible. */
  --color-borde-fuerte: rgba(12,42,49,.50);  /* aplanado #869598 · 3.10:1 sobre blanco */
  --color-acento: var(--pelota);
  --color-acento-texto: var(--pista);        /* 12.04:1 sobre la pelota */
  --color-secundario: var(--red-claro);
  --color-secundario-texto: var(--blanco);
  --color-enlace: var(--red-claro);

  /* Semántica: relleno suave + borde + tinta legible. El relleno apenas se
     distingue del papel (1.15:1) y no pasa nada: quien lleva el significado
     es la tinta, que sí está en AA, y el borde, que dibuja la caja. */
  --color-exito-fondo: rgba(31,122,76,.10);
  --color-exito-borde: rgba(31,122,76,.45);
  --color-exito-texto: var(--exito-claro);
  --color-aviso-fondo: rgba(138,90,5,.10);
  --color-aviso-borde: rgba(138,90,5,.45);
  --color-aviso-texto: var(--aviso-claro);
  --color-error-fondo: rgba(178,58,44,.10);
  --color-error-borde: rgba(178,58,44,.45);
  --color-error-texto: var(--error-claro);
  --color-info-fondo: rgba(27,106,148,.10);
  --color-info-borde: rgba(27,106,148,.45);
  --color-info-texto: var(--info-claro);

  /* Acento como tinta/icono/borde plano directamente sobre el papel. La
     pelota sobre blanco da 1.25:1 — no se ve. Sobre fondo claro este rol
     lo cubre el verde red; la pelota sigue siendo la marca, pero siempre
     como RELLENO con tinta oscura encima, nunca como tinta. */
  --color-acento-plano: var(--red-claro);
  --color-acento-plano-fondo: rgba(35,95,82,.10);

  /* Tipografía */
  --fuente-titulares:"Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente-cuerpo:"Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-100:.75rem;      /* 12px — microcopy */
  --fs-200:.8125rem;    /* 13px — ayuda */
  --fs-300:.9375rem;    /* 15px — cuerpo pequeño */
  --fs-400:1rem;        /* 16px — cuerpo base */
  --fs-500:1.125rem;    /* 18px — cuerpo grande */
  --fs-600:1.375rem;    /* 22px — título de tarjeta */
  --fs-700:1.75rem;     /* 28px — título de sección */
  --fs-800:2.25rem;     /* 36px — título de página */
  --fs-900:clamp(2.75rem, 9vw, 3.5rem);   /* marcador grande de partido */
  --fs-950:clamp(3.75rem, 16vw, 6rem);    /* marcador XL — anotación rápida */

  --lh-ajustada:1.05;
  --lh-compacta:1.2;
  --lh-normal:1.45;
  --lh-relajada:1.6;

  --fw-normal:400;
  --fw-medio:500;
  --fw-semi:600;
  --fw-negrita:700;

  --tracking-condensada:-.01em;
  --tracking-mayus:.07em;

  /* Espaciado — base 4px */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.25rem;
  --e6:1.5rem; --e8:2rem; --e10:2.5rem; --e12:3rem; --e16:4rem; --e20:5rem;

  /* Radios */
  --radio-sm:8px;
  --radio-md:14px;
  --radio-lg:20px;
  --radio-pill:999px;
  --radio-circular:50%;

  /* Sombras — sobre papel blanco, tinte verde muy diluido en vez de negro:
     un gris neutro sobre blanco se ve sucio. */
  --sombra-sm:0 1px 2px rgba(12,42,49,.08);
  --sombra-md:0 6px 16px rgba(12,42,49,.10);
  --sombra-lg:0 16px 40px rgba(12,42,49,.14);
  /* El anillo de foco es un componente de interfaz: 3:1 mínimo. Con .35
     daba 2.16:1 y el foco de teclado desaparecía sobre blanco. */
  --anillo-foco:0 0 0 3px rgba(35,95,82,.75);  /* aplanado #5A877D · 4.04:1 sobre blanco */
  --brillo-pelota:0 0 22px rgba(217,242,75,.32);

  /* Movimiento */
  --dur-rapida:120ms;
  --dur-normal:180ms;
  --facilidad:cubic-bezier(.4,0,.2,1);

  /* Táctil */
  --toque-min:44px;

  /* Capas */
  --z-cabecera:100;
  --z-superpuesto:200;
  --z-modal:300;
}

/* 4. Tema oscuro "Modo pista" ----------------------------------------------
   Era el tema de partida y ahora es la alternativa: la app abre en blanco
   porque es lo que espera cualquiera que llegue desde un enlace compartido,
   y porque el papel blanco es el terreno neutro en el que la foto de un
   evento manda. El Modo pista se queda para jugar de noche y para quien
   tenga el sistema en oscuro.

   Los roles se redefinen en dos sitios con el mismo contenido: con
   [data-tema="oscuro"] cuando alguien lo elige a mano, y bajo
   prefers-color-scheme guardado con :not([data-tema="claro"]) para que la
   elección manual gane siempre en los dos sentidos. */
[data-tema="oscuro"]{
  color-scheme: dark;
  /* Sobre la pista sí cabe el verde de marca: 7.61:1 */
  --whatsapp-texto: #25D366;
  --whatsapp-suave: rgba(37,211,102,.14);
  --color-fondo: var(--pista);
  --color-fondo-elevado: var(--pista-alta);
  --color-fondo-hondo: var(--pista-oscura);
  --color-texto: var(--cal);
  --color-texto-suave: var(--cal-suave);
  --color-borde: rgba(157,182,185,.16);
  --color-borde-fuerte: rgba(157,182,185,.32);
  --color-acento: var(--pelota);
  --color-acento-texto: var(--pista);
  --color-secundario: var(--red);
  --color-secundario-texto: var(--cal);
  --color-enlace: var(--pelota);

  --color-exito-fondo: rgba(76,185,124,.16);
  --color-exito-borde: rgba(76,185,124,.45);
  --color-exito-texto: var(--exito-texto);
  --color-aviso-fondo: rgba(232,169,61,.16);
  --color-aviso-borde: rgba(232,169,61,.45);
  --color-aviso-texto: var(--aviso-texto);
  --color-error-fondo: rgba(232,101,79,.16);
  --color-error-borde: rgba(232,101,79,.45);
  --color-error-texto: var(--error-texto);
  --color-info-fondo: rgba(95,187,232,.16);
  --color-info-borde: rgba(95,187,232,.45);
  --color-info-texto: var(--info-texto);

  --color-acento-plano: var(--pelota);
  --color-acento-plano-fondo: rgba(217,242,75,.10);

  --sombra-sm:0 1px 2px rgba(4,12,14,.35);
  --sombra-md:0 6px 16px rgba(4,12,14,.4);
  --sombra-lg:0 16px 40px rgba(4,12,14,.5);
  --anillo-foco:0 0 0 3px rgba(217,242,75,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    color-scheme: dark;
    --whatsapp-texto: #25D366;
    --whatsapp-suave: rgba(37,211,102,.14);
    --color-fondo: var(--pista);
    --color-fondo-elevado: var(--pista-alta);
    --color-fondo-hondo: var(--pista-oscura);
    --color-texto: var(--cal);
    --color-texto-suave: var(--cal-suave);
    --color-borde: rgba(157,182,185,.16);
    --color-borde-fuerte: rgba(157,182,185,.32);
    --color-acento: var(--pelota);
    --color-acento-texto: var(--pista);
    --color-secundario: var(--red);
    --color-secundario-texto: var(--cal);
    --color-enlace: var(--pelota);
    --color-exito-fondo: rgba(76,185,124,.16);
    --color-exito-borde: rgba(76,185,124,.45);
    --color-exito-texto: var(--exito-texto);
    --color-aviso-fondo: rgba(232,169,61,.16);
    --color-aviso-borde: rgba(232,169,61,.45);
    --color-aviso-texto: var(--aviso-texto);
    --color-error-fondo: rgba(232,101,79,.16);
    --color-error-borde: rgba(232,101,79,.45);
    --color-error-texto: var(--error-texto);
    --color-info-fondo: rgba(95,187,232,.16);
    --color-info-borde: rgba(95,187,232,.45);
    --color-info-texto: var(--info-texto);
    --color-acento-plano: var(--pelota);
    --color-acento-plano-fondo: rgba(217,242,75,.10);
    --sombra-sm:0 1px 2px rgba(4,12,14,.35);
    --sombra-md:0 6px 16px rgba(4,12,14,.4);
    --sombra-lg:0 16px 40px rgba(4,12,14,.5);
    --anillo-foco:0 0 0 3px rgba(217,242,75,.5);
  }
}

/* 5. Reset y elementos base ------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--color-fondo);
  color:var(--color-texto);
  font-family:var(--fuente-cuerpo);
  font-size:var(--fs-400);
  font-weight:var(--fw-normal);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--dur-normal) var(--facilidad), color var(--dur-normal) var(--facilidad);
}
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--color-enlace); text-decoration-thickness:2px; text-underline-offset:.15em; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--color-borde); margin:0; }

/* Foco visible global, nunca se elimina — solo se sustituye por el anillo
   de marca (efecto "foco de pista" con el amarillo pelota) */
:focus{ outline:none; }
:focus-visible{
  outline:none;
  box-shadow:var(--anillo-foco);
  border-radius:var(--radio-sm);
}

::selection{ background:var(--pelota); color:var(--pista); }

/* 6. Utilidades de layout --------------------------------------------------- */
.contenedor{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--e4);
}
@media (min-width:768px){ .contenedor{ padding-inline:var(--e8); } }

.pila{ display:flex; flex-direction:column; gap:var(--e4); }
.pila--sm{ gap:var(--e2); }
.pila--lg{ gap:var(--e6); }

.fila{ display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; }
.fila--separada{ justify-content:space-between; }
.fila--apretada{ gap:var(--e2); }

.rejilla{ display:grid; gap:var(--e4); grid-template-columns:1fr; }
@media (min-width:640px){ .rejilla--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){
  .rejilla--3{ grid-template-columns:repeat(3,1fr); }
  .rejilla--4{ grid-template-columns:repeat(4,1fr); }
}

.envoltura-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--color-borde-fuerte) transparent;
}
/* Pista de scroll visible siempre (no solo al arrastrar) — avisa de que
   hay más tabla a la derecha sin depender de la sombra del fondo, que
   cambia según dónde se use ".envoltura-scroll". */
.envoltura-scroll::-webkit-scrollbar{ height:6px; }
.envoltura-scroll::-webkit-scrollbar-track{ background:transparent; }
.envoltura-scroll::-webkit-scrollbar-thumb{ background:var(--color-borde-fuerte); border-radius:var(--radio-pill); }

/* Motivo decorativo — línea de cal discontinua, como el borde de una pista */
.separador-cancha{
  height:1px;
  border:0;
  background-image:repeating-linear-gradient(90deg, var(--color-borde-fuerte) 0 10px, transparent 10px 18px);
  margin-block:var(--e2);
}

.seccion-muestra{ padding-block:var(--e10); border-top:1px dashed var(--color-borde); }
.seccion-muestra:first-of-type{ border-top:0; }
.seccion-muestra__titulo{ margin-bottom:var(--e6); }

/* 7. Tipografía -------------------------------------------------------------- */
.titulo-1,.titulo-2,.titulo-3,.titulo-4{
  font-family:var(--fuente-titulares);
  font-weight:var(--fw-negrita);
  letter-spacing:var(--tracking-condensada);
  line-height:var(--lh-ajustada);
  color:var(--color-texto);
}
.titulo-1{ font-size:var(--fs-800); }
.titulo-2{ font-size:var(--fs-700); }
.titulo-3{ font-size:var(--fs-600); font-weight:var(--fw-semi); line-height:var(--lh-compacta); }
.titulo-4{ font-size:var(--fs-500); font-weight:var(--fw-semi); line-height:var(--lh-compacta); }

.subtitulo{
  font-family:var(--fuente-cuerpo);
  font-size:var(--fs-500);
  font-weight:var(--fw-medio);
  color:var(--color-texto-suave);
  line-height:var(--lh-normal);
}
.cuerpo{ font-size:var(--fs-400); }
.cuerpo-grande{ font-size:var(--fs-500); }
.cuerpo-pequeno{ font-size:var(--fs-300); color:var(--color-texto-suave); }
.ayuda{ font-size:var(--fs-200); color:var(--color-texto-suave); line-height:var(--lh-relajada); }

.etiqueta-mayus{
  font-family:var(--fuente-titulares);
  font-size:var(--fs-200);
  font-weight:var(--fw-semi);
  letter-spacing:var(--tracking-mayus);
  text-transform:uppercase;
  color:var(--color-texto-suave);
}

.cifra{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.enlace{ font-weight:var(--fw-semi); }
.enlace:hover{ text-decoration-line:underline; }

/* 8. Iconos ------------------------------------------------------------------ */
.icono{ width:20px; height:20px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icono--sm{ width:16px; height:16px; }
.icono--lg{ width:28px; height:28px; }
.icono--relleno{ fill:currentColor; stroke:none; }

/* 9. Botones ------------------------------------------------------------------
   Todas las variantes cumplen ≥44px de alto. El primario usa el acento
   pelota con texto oscuro (12:1). En Modo cal el primario invierte a
   fondo pista con texto pelota: el amarillo pelota no llega a 3:1 sobre
   blanco como borde/relleno plano (medido: 1.19:1), así que en claro
   nunca se usa como fondo de un botón — solo como detalle sobre fondo
   oscuro. Ver ratios completos en el muestrario. */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--e2);
  min-height:var(--toque-min);
  padding-inline:var(--e5);
  border-radius:var(--radio-pill);
  font-family:var(--fuente-cuerpo);
  font-size:var(--fs-400);
  font-weight:var(--fw-semi);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform var(--dur-rapida) var(--facilidad),
             box-shadow var(--dur-normal) var(--facilidad),
             background-color var(--dur-normal) var(--facilidad),
             border-color var(--dur-normal) var(--facilidad),
             opacity var(--dur-normal) var(--facilidad);
}
.boton:active{ transform:scale(.97); }

/* Sobre papel blanco el primario es fondo pista con tinta pelota (12.04:1):
   el amarillo pelota da 1.25:1 contra el blanco, así que no puede ser el
   relleno de un botón aquí. En Modo pista se invierte y recupera la pelota
   como relleno, que es la marca. */
.boton--primario{
  background:var(--pista);
  color:var(--pelota);
}
.boton--primario:hover{ box-shadow:var(--sombra-md); }

[data-tema="oscuro"] .boton--primario{ background:var(--pelota); color:var(--pista); }
[data-tema="oscuro"] .boton--primario:hover{ box-shadow:var(--brillo-pelota); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .boton--primario{ background:var(--pelota); color:var(--pista); }
  :root:not([data-tema="claro"]) .boton--primario:hover{ box-shadow:var(--brillo-pelota); }
}

.boton--secundario{
  background:transparent;
  color:var(--color-texto);
  border-color:var(--color-borde-fuerte);
}
.boton--secundario:hover{ border-color:var(--color-acento-plano); background:var(--color-acento-plano-fondo); }

.boton--fantasma{
  background:transparent;
  color:var(--color-texto-suave);
}
.boton--fantasma:hover{ color:var(--color-texto); background:var(--color-borde); }

.boton--peligro{
  background:transparent;
  color:var(--color-error-texto);
  border-color:var(--color-error-borde);
}
.boton--peligro:hover{ background:var(--color-error-fondo); }

.boton--grande{ min-height:52px; padding-inline:var(--e6); font-size:var(--fs-500); }
.boton--pequeno{ min-height:var(--toque-min); padding-inline:var(--e4); font-size:var(--fs-300); }

.boton--icono{ padding-inline:0; width:var(--toque-min); flex:0 0 auto; }
.boton--grande.boton--icono{ width:52px; }
.boton--pequeno.boton--icono{ width:var(--toque-min); }

.boton:disabled,.boton[aria-disabled="true"]{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.boton:disabled:hover,.boton[aria-disabled="true"]:hover{ background-color:inherit; }

.boton[aria-busy="true"]{ color:transparent; pointer-events:none; position:relative; }
.boton[aria-busy="true"]::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border-radius:50%;
  border:2.5px solid currentColor;
  border-top-color:transparent;
  color:var(--pelota);
  animation:girar .7s linear infinite;
}
[data-tema="oscuro"] .boton--primario[aria-busy="true"]::after{ color:var(--pista); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .boton--primario[aria-busy="true"]::after{ color:var(--pista); }
}

/* 10. Formularios --------------------------------------------------------------- */
.campo{ display:flex; flex-direction:column; gap:var(--e2); }
.campo__etiqueta{
  font-size:var(--fs-300);
  font-weight:var(--fw-semi);
  color:var(--color-texto);
}
.campo__opcional{ color:var(--color-texto-suave); font-weight:var(--fw-normal); }

.campo__control{
  min-height:var(--toque-min);
  width:100%;
  padding:0 var(--e4);
  background:var(--color-fondo-hondo);
  border:1.5px solid var(--color-borde-fuerte);
  border-radius:var(--radio-sm);
  color:var(--color-texto);
  font-size:var(--fs-400);
  transition:border-color var(--dur-normal) var(--facilidad), box-shadow var(--dur-normal) var(--facilidad);
}
textarea.campo__control{ padding-block:var(--e3); min-height:96px; resize:vertical; }
.campo__control::placeholder{ color:var(--color-texto-suave); opacity:.8; }
.campo__control:hover{ border-color:var(--color-texto-suave); }
.campo__control:focus-visible{ border-color:var(--color-acento-plano); box-shadow:var(--anillo-foco); }

select.campo__control{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239DB6B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--e3) center;
  padding-right:var(--e10);
}

.campo--error .campo__control{ border-color:var(--error); }
.campo--error .campo__control:focus-visible{ box-shadow:0 0 0 3px rgba(232,101,79,.4); }
.campo__error{ display:flex; align-items:center; gap:var(--e1); font-size:var(--fs-200); color:var(--color-error-texto); }
.campo__ayuda{ font-size:var(--fs-200); color:var(--color-texto-suave); }

/* Interruptor (switch) */
.interruptor{ display:inline-flex; align-items:center; gap:var(--e3); min-height:var(--toque-min); cursor:pointer; }
.interruptor__entrada{ position:absolute; opacity:0; width:1px; height:1px; }
.interruptor__pista{
  width:46px; height:26px;
  border-radius:var(--radio-pill);
  background:var(--color-fondo-hondo);
  border:1.5px solid var(--color-borde-fuerte);
  position:relative;
  flex-shrink:0;
  transition:background-color var(--dur-normal) var(--facilidad), border-color var(--dur-normal) var(--facilidad);
}
.interruptor__pista::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:19px; height:19px;
  border-radius:50%;
  /* El pomo ES el indicador de encendido/apagado: con --cal-suave daba
     1.96:1 sobre la pista clara y no se veía dónde estaba. */
  background:var(--color-texto-suave);
  transition:transform var(--dur-normal) var(--facilidad), background-color var(--dur-normal) var(--facilidad);
}
.interruptor__entrada:checked + .interruptor__pista{ background:var(--color-secundario); border-color:var(--color-secundario); }
.interruptor__entrada:checked + .interruptor__pista::after{ transform:translateX(20px); background:var(--color-secundario-texto); }
.interruptor__entrada:focus-visible + .interruptor__pista{ box-shadow:var(--anillo-foco); }
.interruptor__entrada:disabled + .interruptor__pista{ opacity:.42; }
.interruptor__texto{ font-size:var(--fs-300); }

/* Código de acceso — 6 casillas para el enlace enviado por correo */
.codigo-acceso{ display:flex; gap:var(--e2); }
.codigo-acceso__casilla{
  width:44px; height:52px;
  text-align:center;
  font-family:var(--fuente-titulares);
  font-size:var(--fs-700);
  font-weight:var(--fw-semi);
  background:var(--color-fondo-hondo);
  border:1.5px solid var(--color-borde-fuerte);
  border-radius:var(--radio-sm);
  color:var(--color-texto);
}
.codigo-acceso__casilla:focus-visible{ border-color:var(--color-acento-plano); box-shadow:var(--anillo-foco); }

/* 11. Insignias ------------------------------------------------------------------- */
.insignia{
  display:inline-flex;
  align-items:center;
  gap:var(--e1);
  height:26px;
  padding-inline:var(--e3);
  border-radius:var(--radio-pill);
  font-size:var(--fs-200);
  font-weight:var(--fw-semi);
  line-height:1;
  border:1px solid transparent;
  white-space:nowrap;
}

.insignia--organizador{ background:var(--color-info-fondo); border-color:var(--color-info-borde); color:var(--color-info-texto); }
.insignia--anotador{ background:var(--color-exito-fondo); border-color:var(--color-exito-borde); color:var(--color-exito-texto); }
.insignia--consulta{ background:var(--color-borde); border-color:var(--color-borde-fuerte); color:var(--color-texto-suave); }

.insignia-estado{ display:inline-flex; align-items:center; gap:var(--e2); height:26px; padding-inline:var(--e3); border-radius:var(--radio-pill); font-size:var(--fs-200); font-weight:var(--fw-semi); border:1px solid transparent; }
.insignia-estado__punto{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 2px var(--color-fondo-elevado); flex-shrink:0; }
.insignia-estado--por-jugar{ background:var(--color-borde); color:var(--color-texto-suave); }
.insignia-estado--por-jugar .insignia-estado__punto{ background:var(--color-texto-suave); }
.insignia-estado--en-juego{ background:var(--color-exito-fondo); border-color:var(--color-exito-borde); color:var(--color-exito-texto); }
.insignia-estado--en-juego .insignia-estado__punto{ background:var(--exito); animation:pulso 1.6s ease-in-out infinite; }
.insignia-estado--terminado{ background:var(--color-info-fondo); border-color:var(--color-info-borde); color:var(--color-info-texto); }
.insignia-estado--terminado .insignia-estado__punto{ background:var(--info); }

.insignia-posicion{ display:inline-flex; align-items:center; gap:var(--e1); height:22px; padding-inline:var(--e2); border-radius:var(--radio-sm); font-size:var(--fs-100); font-weight:var(--fw-semi); background:var(--color-borde); color:var(--color-texto-suave); }

/* 12. Tarjetas genéricas -------------------------------------------------------- */
.tarjeta{
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde);
  border-radius:var(--radio-md);
  padding:var(--e5);
  box-shadow:var(--sombra-sm);
}
.tarjeta--interactiva{ cursor:pointer; transition:transform var(--dur-rapida) var(--facilidad), box-shadow var(--dur-normal) var(--facilidad), border-color var(--dur-normal) var(--facilidad); }
.tarjeta--interactiva:hover{ box-shadow:var(--sombra-md); border-color:var(--color-borde-fuerte); }
.tarjeta--interactiva:active{ transform:scale(.99); }

/* 13. Cabecera de app -------------------------------------------------------------
   Marco fijo de marca: se mantiene oscura (cristal) en los dos temas, como
   el bisel de un marcador de pista, para anclar la identidad. */
.cabecera-app{
  position:sticky; top:0; z-index:var(--z-cabecera);
  background:linear-gradient(180deg, var(--cristal) 0%, var(--pista) 130%);
  border-bottom:1px solid rgba(237,243,240,.08);
}
.cabecera-app__interior{
  max-width:1180px; margin-inline:auto;
  display:flex; align-items:center; gap:var(--e4);
  min-height:64px;
  padding-inline:var(--e4);
}
@media (min-width:768px){ .cabecera-app__interior{ padding-inline:var(--e8); } }

.cabecera-app__marca{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  flex-shrink:0; min-width:var(--toque-min); min-height:var(--toque-min);
  border-radius:var(--radio-sm);
}
.cabecera-app__marca img{ height:28px; width:auto; }
/* Por debajo de 480px el lockup completo no cabe junto a las acciones:
   se usa solo la marca (32×32) y se recupera el logotipo con texto desde
   ahí en adelante. Especificidad reforzada con el propio bloque para
   ganarle a la regla genérica ".cabecera-app__marca img" de arriba. */
.cabecera-app__marca .cabecera-app__logo-compacto{ display:block; height:32px; width:32px; }
.cabecera-app__marca .cabecera-app__logo-completo{ display:none; }
@media (min-width:480px){
  .cabecera-app__marca .cabecera-app__logo-compacto{ display:none; }
  .cabecera-app__marca .cabecera-app__logo-completo{ display:block; }
}

.cabecera-app__nav{ display:none; align-items:center; gap:var(--e2); margin-left:var(--e6); flex:1; }
@media (min-width:768px){ .cabecera-app__nav{ display:flex; } }
.cabecera-app__enlace{
  display:inline-flex; align-items:center; min-height:var(--toque-min); padding-inline:var(--e3);
  border-radius:var(--radio-pill); font-size:var(--fs-300); font-weight:var(--fw-medio);
  /* No --cal-suave: sobre el cristal daba 4.20:1 y esto es la navegación
     principal, no un pie de foto. --cristal-enlace da 5.90:1. */
  color:var(--cristal-enlace); text-decoration:none;
}
.cabecera-app__enlace:hover{ color:var(--cal); background:rgba(237,243,240,.10); }
.cabecera-app__enlace[aria-current="page"]{ color:var(--pista); background:var(--pelota); font-weight:var(--fw-semi); }

.cabecera-app__acciones{ display:flex; align-items:center; gap:var(--e2); margin-left:auto; }
.cabecera-app__movil{ display:inline-flex; }
@media (min-width:768px){ .cabecera-app__movil{ display:none; } }

.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  /* Las iniciales identifican a una persona: son texto, no adorno. Con
     --cal sobre --red daban 4.38:1; por roles, 7.42:1 sobre papel. */
  background:var(--color-secundario); color:var(--color-secundario-texto);
  font-family:var(--fuente-titulares); font-weight:var(--fw-semi); font-size:var(--fs-400);
  flex-shrink:0; border:1.5px solid rgba(237,243,240,.18);
}
.avatar--sm{ width:32px; height:32px; font-size:var(--fs-300); }
.avatar--lg{ width:56px; height:56px; font-size:var(--fs-600); }
.avatar--pelota{ background:var(--pelota); color:var(--pista); }
.avatar--cristal{ background:var(--cristal); color:var(--cal); }

/* 14. Tarjeta de partido ----------------------------------------------------------- */
.partido{
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde);
  border-left:3px solid var(--color-borde-fuerte);
  border-radius:var(--radio-md);
  padding:var(--e4) var(--e5);
  box-shadow:var(--sombra-sm);
}
.partido--en-juego{ border-left-color:var(--exito); box-shadow:var(--sombra-sm), 0 0 0 1px var(--color-exito-borde) inset; }
.partido--terminado{ opacity:.88; }

.partido__cabecera{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); margin-bottom:var(--e4); }
.partido__meta{ display:flex; align-items:center; gap:var(--e3); color:var(--color-texto-suave); font-size:var(--fs-200); }
.partido__meta-item{ display:flex; align-items:center; gap:6px; }

.partido__cuerpo{ display:flex; align-items:center; gap:var(--e4); }
.partido__parejas{ flex:1; display:flex; flex-direction:column; gap:var(--e3); min-width:0; }
.partido__pareja{ display:flex; align-items:center; gap:var(--e2); min-width:0; }
.partido__pareja--ganadora .partido__pareja-nombres{ color:var(--color-texto); font-weight:var(--fw-semi); }
.partido__pareja-avatares{ display:flex; flex-shrink:0; }
.partido__pareja-avatares .avatar{ width:30px; height:30px; font-size:var(--fs-200); }
.partido__pareja-avatares .avatar + .avatar{ margin-left:-10px; }
.partido__pareja-nombres{ font-size:var(--fs-300); color:var(--color-texto-suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.partido__marcador{ display:flex; gap:var(--e1); flex-shrink:0; }
.partido__set{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:34px; height:56px;
  background:var(--color-fondo-hondo);
  border-radius:var(--radio-sm);
  font-family:var(--fuente-titulares); font-weight:var(--fw-negrita); font-size:var(--fs-600);
  color:var(--color-texto-suave);
}
.partido__set--activo{ color:var(--color-acento-plano); background:var(--color-acento-plano-fondo); }

.partido__acciones{ display:flex; gap:var(--e2); margin-top:var(--e4); }
.partido__acciones .boton{ flex:1; }

/* 15. Marcador rápido de anotación ---------------------------------------------------
   Pensado para tocar con una mano, sin mirar mucho: cifras enormes,
   controles táctiles grandes (72px) y separación amplia entre equipos. */
.marcador-rapido{
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde);
  border-radius:var(--radio-lg);
  padding:var(--e4);
}
@media (min-width:480px){ .marcador-rapido{ padding:var(--e5); } }
.marcador-rapido__cronometro{ text-align:center; margin-bottom:var(--e4); }

.marcador-rapido__equipos{ display:flex; align-items:stretch; gap:var(--e3); }
.marcador-rapido__equipo{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:var(--e3);
  padding:var(--e3);
  background:var(--color-fondo-hondo);
  border-radius:var(--radio-md);
  border:1.5px solid var(--color-borde);
}
@media (min-width:480px){ .marcador-rapido__equipo{ padding:var(--e4); } }
.marcador-rapido__equipo--saca{ border-color:var(--color-acento-plano); }
.marcador-rapido__nombre{ font-size:var(--fs-300); font-weight:var(--fw-semi); color:var(--color-texto-suave); text-align:center; }
.marcador-rapido__saque{ display:inline-flex; align-items:center; gap:4px; color:var(--color-acento-plano); font-size:var(--fs-100); font-weight:var(--fw-semi); }
.marcador-rapido__saque .icono{ width:12px; height:12px; }

.marcador-rapido__cifra{
  font-family:var(--fuente-titulares);
  font-weight:var(--fw-negrita);
  font-size:var(--fs-950);
  line-height:1;
  color:var(--color-texto);
}

.marcador-rapido__controles{ display:flex; gap:var(--e2); width:100%; }
.marcador-rapido__control{
  flex:1;
  min-height:64px;
  border-radius:var(--radio-md);
  background:var(--color-fondo-elevado);
  border:1.5px solid var(--color-borde-fuerte);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-texto);
  cursor:pointer;
  transition:background-color var(--dur-rapida) var(--facilidad), transform var(--dur-rapida) var(--facilidad);
}
.marcador-rapido__control .icono{ width:26px; height:26px; }
.marcador-rapido__control:active{ transform:scale(.95); background:var(--color-borde); }
/* Mismo motivo que el botón primario: sobre papel la pelota no puede ser el
   relleno plano de un control, así que es fondo pista con icono pelota. */
.marcador-rapido__control--sumar{ background:var(--pista); border-color:var(--pista); color:var(--pelota); }
.marcador-rapido__control--sumar:active{ background:var(--cristal-oscuro); }
[data-tema="oscuro"] .marcador-rapido__control--sumar{ background:var(--pelota); border-color:var(--pelota); color:var(--pista); }
[data-tema="oscuro"] .marcador-rapido__control--sumar:active{ background:var(--pelota-oscuro); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .marcador-rapido__control--sumar{ background:var(--pelota); border-color:var(--pelota); color:var(--pista); }
  :root:not([data-tema="claro"]) .marcador-rapido__control--sumar:active{ background:var(--pelota-oscuro); }
}

.marcador-rapido__pie{ display:flex; justify-content:center; margin-top:var(--e4); }

/* 16. Clasificación ------------------------------------------------------------------ */
.clasificacion{ width:100%; }
.clasificacion th{
  text-align:left;
  font-family:var(--fuente-titulares);
  font-size:var(--fs-200);
  letter-spacing:var(--tracking-mayus);
  text-transform:uppercase;
  color:var(--color-texto-suave);
  font-weight:var(--fw-semi);
  padding:var(--e2) var(--e3);
  border-bottom:1px solid var(--color-borde-fuerte);
}
.clasificacion td{
  padding:var(--e3);
  border-bottom:1px solid var(--color-borde);
  font-size:var(--fs-400);
  vertical-align:middle;
}
.clasificacion th:first-child,.clasificacion td:first-child{ padding-left:var(--e4); }
.clasificacion tbody tr:last-child td{ border-bottom:0; }
.clasificacion tbody tr:hover td{ background:var(--color-borde); }
.clasificacion__pos{ font-family:var(--fuente-titulares); font-weight:var(--fw-bold); font-size:var(--fs-500); color:var(--color-texto-suave); width:2ch; }
.clasificacion__pareja{ display:flex; align-items:center; gap:var(--e3); }
.clasificacion__nombres{ display:flex; flex-direction:column; }
.clasificacion__nombres b{ font-weight:var(--fw-semi); }
.clasificacion__nombres span{ color:var(--color-texto-suave); font-size:var(--fs-200); }
.clasificacion__cifra{ font-family:var(--fuente-titulares); font-weight:var(--fw-semi); font-size:var(--fs-500); }

.clasificacion__lider td{ background:var(--color-acento-plano-fondo); }
.clasificacion__lider .clasificacion__pos{ color:var(--color-acento-plano); }
.clasificacion__lider td:first-child{ border-left:3px solid var(--color-acento-plano); padding-left:calc(var(--e4) - 3px); }

/* Versión compacta para móvil */
.clasificacion-compacta{ display:flex; flex-direction:column; }
.clasificacion-compacta__fila{
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e3) var(--e2);
  border-bottom:1px solid var(--color-borde);
}
.clasificacion-compacta__fila:last-child{ border-bottom:0; }
.clasificacion-compacta__fila--lider{ background:var(--color-acento-plano-fondo); border-left:3px solid var(--color-acento-plano); border-radius:var(--radio-sm); padding-left:calc(var(--e2) - 3px); }
.clasificacion-compacta__pos{ font-family:var(--fuente-titulares); font-weight:var(--fw-bold); font-size:var(--fs-500); width:2ch; color:var(--color-texto-suave); flex-shrink:0; }
.clasificacion-compacta__fila--lider .clasificacion-compacta__pos{ color:var(--color-acento-plano); }
.clasificacion-compacta__info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.clasificacion-compacta__info b{ font-weight:var(--fw-semi); font-size:var(--fs-300); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clasificacion-compacta__info span{ color:var(--color-texto-suave); font-size:var(--fs-100); }
.clasificacion-compacta__cifra{ font-family:var(--fuente-titulares); font-weight:var(--fw-semi); font-size:var(--fs-500); flex-shrink:0; }

/* En pantallas de tableta en adelante se prefiere la tabla completa */
.clasificacion{ display:none; }
.clasificacion-compacta{ display:flex; }
@media (min-width:640px){
  .clasificacion{ display:table; }
  .clasificacion-compacta{ display:none; }
}

/* Utilidad de comparación exclusiva del muestrario: enseña la tabla y la
   versión compacta de la clasificación a la vez, sin depender del ancho
   real de la ventana. No hace falta !important: basta con que el
   selector con el envoltorio tenga más especificidad que la regla
   responsive de base. */
.vista-forzada--movil .clasificacion{ display:none; }
.vista-forzada--movil .clasificacion-compacta{ display:flex; }
.vista-forzada--escritorio .clasificacion{ display:table; }
.vista-forzada--escritorio .clasificacion-compacta{ display:none; }

/* 17. Tarjeta de jugador --------------------------------------------------------------- */
.jugador-tarjeta{
  display:flex; align-items:center; gap:var(--e3);
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde);
  border-radius:var(--radio-md);
  padding:var(--e3) var(--e4);
}
.jugador-tarjeta__info{ flex:1; min-width:0; }
.jugador-tarjeta__nombre{ font-weight:var(--fw-semi); font-size:var(--fs-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jugador-tarjeta__meta{ display:flex; align-items:center; gap:var(--e2); margin-top:2px; }
.jugador-tarjeta__nivel{ display:inline-flex; align-items:center; gap:3px; font-size:var(--fs-200); color:var(--color-texto-suave); }
.jugador-tarjeta__nivel .icono{ width:14px; height:14px; color:var(--color-acento-plano); }

/* 18. Buscador de jugadores -------------------------------------------------------------- */
.buscador-jugadores{ position:relative; }
.buscador-jugadores__campo{ position:relative; }
.buscador-jugadores__campo .icono{ position:absolute; left:var(--e3); top:50%; transform:translateY(-50%); color:var(--color-texto-suave); pointer-events:none; }
.buscador-jugadores__campo input{ padding-left:var(--e10); }

.buscador-jugadores__resultados{
  margin-top:var(--e2);
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde-fuerte);
  border-radius:var(--radio-md);
  overflow:hidden;
}
.buscador-jugadores__resultado{
  display:flex; align-items:center; gap:var(--e3);
  width:100%; min-height:60px;
  padding-inline:var(--e4);
  text-align:left;
  cursor:pointer;
  border-bottom:1px solid var(--color-borde);
}
.buscador-jugadores__resultado:last-child{ border-bottom:0; }
.buscador-jugadores__resultado:hover{ background:var(--color-borde); }
.buscador-jugadores__resultado-info{ flex:1; min-width:0; }
.buscador-jugadores__resultado-nombre{ font-weight:var(--fw-semi); }
.buscador-jugadores__resultado-meta{ font-size:var(--fs-200); color:var(--color-texto-suave); }

.buscador-jugadores__crear{
  display:flex; align-items:center; gap:var(--e3);
  width:100%; min-height:60px;
  padding-inline:var(--e4);
  border-top:1px dashed var(--color-borde-fuerte);
  color:var(--color-acento-plano);
  font-weight:var(--fw-semi);
  cursor:pointer;
}
.buscador-jugadores__crear:hover{ background:var(--color-acento-plano-fondo); }
.buscador-jugadores__crear .icono{ color:var(--color-acento-plano); }

/* 19. Tarjeta de evento ----------------------------------------------------------------------
   Esto es una lista de partidos, no un muro de fotos. El ancla de la tarjeta
   es la FECHA y no la imagen: es el dato por el que se decide, siempre está,
   y evita el agujero que dejaba el hueco de foto vacío cuando —que será lo
   normal— nadie sube ninguna. */
.evento{
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde);
  border-radius:var(--radio-lg);
  padding:var(--e5);
  display:flex; flex-direction:column; gap:var(--e4);
}
.evento__club{ font-weight:var(--fw-semi); font-size:var(--fs-500); line-height:var(--lh-ajustada); }
.evento__ciudad{ color:var(--color-texto-suave); font-size:var(--fs-300); display:flex; align-items:center; gap:4px; margin-top:2px; }

.evento__plazas{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; }
.evento__plazas-texto{ font-size:var(--fs-300); color:var(--color-texto-suave); display:inline-flex; align-items:center; gap:var(--e2); }
.evento__plazas-texto b{ color:var(--color-texto); font-weight:var(--fw-semi); }

.evento__pie{ display:flex; align-items:center; gap:var(--e3); }
.evento__pie .boton{ flex:1; }

/* 20. Progreso y cronómetro ------------------------------------------------------------------ */
.progreso{ display:flex; flex-direction:column; gap:var(--e2); }
.progreso__cabecera{ display:flex; justify-content:space-between; font-size:var(--fs-300); }
.progreso__pista{ height:10px; border-radius:var(--radio-pill); background:var(--color-fondo-hondo); border:1px solid var(--color-borde); overflow:hidden; }
/* El degradado terminaba en pelota: sobre la pista clara da 1.15:1 y la
   punta de la barra desaparecía. Sobre papel va de red oscuro a red (6.79:1
   y 4.51:1); en Modo pista recupera la pelota, que ahí sí destaca. */
.progreso__relleno{ height:100%; border-radius:var(--radio-pill); background:linear-gradient(90deg, var(--red-oscuro), var(--red)); transition:width var(--dur-normal) var(--facilidad); }
[data-tema="oscuro"] .progreso__relleno{ background:linear-gradient(90deg, var(--red), var(--pelota)); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .progreso__relleno{ background:linear-gradient(90deg, var(--red), var(--pelota)); }
}

.cronometro{ display:inline-flex; align-items:center; gap:var(--e2); padding:var(--e2) var(--e4); border-radius:var(--radio-pill); background:var(--color-fondo-hondo); border:1px solid var(--color-borde-fuerte); }
.cronometro__cifra{ font-family:var(--fuente-titulares); font-weight:var(--fw-semi); font-size:var(--fs-600); }
.cronometro--activo .cronometro__punto{ width:8px; height:8px; border-radius:50%; background:var(--exito); animation:pulso 1.6s ease-in-out infinite; }

/* 21. Estados vacíos, mensajes, esqueletos ------------------------------------------------------- */
.estado-vacio{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--e3);
  padding:var(--e10) var(--e5);
}
.estado-vacio img{ width:120px; height:120px; margin-bottom:var(--e2); }
.estado-vacio__titulo{ font-family:var(--fuente-titulares); font-weight:var(--fw-semi); font-size:var(--fs-600); }
.estado-vacio__texto{ color:var(--color-texto-suave); max-width:38ch; }

.mensaje{ display:flex; gap:var(--e3); padding:var(--e4); border-radius:var(--radio-md); border:1px solid; }
.mensaje__icono{ flex-shrink:0; width:22px; height:22px; }
.mensaje__cuerpo{ flex:1; }
.mensaje__titulo{ font-weight:var(--fw-semi); margin-bottom:2px; }
.mensaje__texto{ font-size:var(--fs-300); }

.mensaje--exito{ background:var(--color-exito-fondo); border-color:var(--color-exito-borde); color:var(--color-exito-texto); }
.mensaje--aviso{ background:var(--color-aviso-fondo); border-color:var(--color-aviso-borde); color:var(--color-aviso-texto); }
.mensaje--error{ background:var(--color-error-fondo); border-color:var(--color-error-borde); color:var(--color-error-texto); }
.mensaje--info{ background:var(--color-info-fondo); border-color:var(--color-info-borde); color:var(--color-info-texto); }
.mensaje__titulo,.mensaje__texto{ color:inherit; }
.mensaje__texto{ opacity:.92; }

.esqueleto{ position:relative; overflow:hidden; background:var(--color-fondo-hondo); border-radius:var(--radio-sm); }
.esqueleto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(12,42,49,.06), transparent);
  animation:brillo-esqueleto 1.4s ease-in-out infinite;
}
[data-tema="oscuro"] .esqueleto::after{ background:linear-gradient(90deg, transparent, rgba(237,243,240,.08), transparent); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .esqueleto::after{ background:linear-gradient(90deg, transparent, rgba(237,243,240,.08), transparent); }
}
.esqueleto--linea{ height:14px; width:100%; }
.esqueleto--linea.esqueleto--corta{ width:60%; }
.esqueleto--circulo{ width:44px; height:44px; border-radius:50%; }
.esqueleto--bloque{ height:80px; width:100%; border-radius:var(--radio-md); }

/* 22. Asistente por pasos ------------------------------------------------------------------------ */
.asistente{ display:flex; flex-direction:column; gap:var(--e6); }
.asistente__pasos{ display:flex; align-items:center; }
.asistente__paso{ display:flex; align-items:center; flex:1; }
.asistente__paso:last-child{ flex:0 0 auto; }
.asistente__paso-circulo{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fuente-titulares); font-weight:var(--fw-semi); font-size:var(--fs-300);
  background:var(--color-fondo-hondo); border:1.5px solid var(--color-borde-fuerte); color:var(--color-texto-suave);
  flex-shrink:0;
}
.asistente__paso-linea{ flex:1; height:2px; background:var(--color-borde-fuerte); margin-inline:var(--e2); }
.asistente__paso--hecho .asistente__paso-circulo{ background:var(--color-secundario); border-color:var(--color-secundario); color:var(--color-secundario-texto); }
.asistente__paso--hecho .asistente__paso-linea{ background:var(--color-secundario); }
.asistente__paso--actual .asistente__paso-circulo{ background:var(--pista); border-color:var(--pista); color:var(--pelota); }
[data-tema="oscuro"] .asistente__paso--actual .asistente__paso-circulo{ background:var(--pelota); border-color:var(--pelota); color:var(--pista); box-shadow:var(--brillo-pelota); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .asistente__paso--actual .asistente__paso-circulo{ background:var(--pelota); border-color:var(--pelota); color:var(--pista); box-shadow:var(--brillo-pelota); }
}
.asistente__etiquetas{ display:none; justify-content:space-between; margin-top:var(--e1); }
@media (min-width:640px){ .asistente__etiquetas{ display:flex; } }
.asistente__etiqueta{ font-size:var(--fs-200); color:var(--color-texto-suave); flex:1; text-align:center; }
.asistente__etiqueta--activa{ color:var(--color-acento-plano); font-weight:var(--fw-semi); }

.asistente__contenido{
  background:var(--color-fondo-elevado);
  border:1px solid var(--color-borde);
  border-radius:var(--radio-lg);
  padding:var(--e6);
}

.asistente__navegacion{ display:flex; justify-content:space-between; gap:var(--e3); }

/* 23. Utilidades varias --------------------------------------------------------------------------- */
.u-oculto-visualmente{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Si lo que se oculta es algo enfocable (p. ej. el enlace "Saltar al
   contenido"), debe volverse visible y con tamaño táctil al recibir el
   foco de teclado — si no, quien navega con teclado no lo ve nunca. */
.u-oculto-visualmente:focus{
  position:fixed; top:var(--e2); left:var(--e2); z-index:var(--z-modal);
  width:auto; height:auto; min-height:var(--toque-min);
  padding:var(--e3) var(--e5); margin:0; overflow:visible; clip:auto; white-space:normal;
  display:inline-flex; align-items:center;
  background:var(--pista); color:var(--pelota);
  font-weight:var(--fw-semi); border-radius:var(--radio-sm);
  box-shadow:var(--sombra-lg);
}
[data-tema="oscuro"] .u-oculto-visualmente:focus{ background:var(--pelota); color:var(--pista); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .u-oculto-visualmente:focus{ background:var(--pelota); color:var(--pista); }
}
.u-texto-centro{ text-align:center; }
.u-solo-movil{ display:block; }
.u-desde-tableta{ display:none; }
@media (min-width:768px){
  .u-solo-movil{ display:none; }
  .u-desde-tableta{ display:block; }
}
.u-mt-2{ margin-top:var(--e2); } .u-mt-4{ margin-top:var(--e4); } .u-mt-6{ margin-top:var(--e6); } .u-mt-8{ margin-top:var(--e8); }
.u-mb-2{ margin-bottom:var(--e2); } .u-mb-4{ margin-bottom:var(--e4); } .u-mb-6{ margin-bottom:var(--e6); } .u-mb-8{ margin-bottom:var(--e8); }

/* Animaciones */
@keyframes pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes girar{ to{ transform:rotate(360deg); } }
@keyframes brillo-esqueleto{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

/* Respeto a prefers-reduced-motion: sin desplazamientos, giros ni parpadeos
   automáticos; los estados siguen siendo visibles pero estáticos. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; /* apagar animación sin quitar el estado final (necesario: es la única forma estándar de neutralizar keyframes por variable) */
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .insignia-estado--en-juego .insignia-estado__punto,
  .cronometro--activo .cronometro__punto{ animation:none; opacity:1; }
  .esqueleto::after{ animation:none; opacity:.5; }
}

/* ==========================================================================
   Añadidos de integración (torneosdepadel — cableado de vistas)
   --------------------------------------------------------------------------
   El muestrario no cubre dos patrones que la app sí necesita. En los dos
   casos el panel visible se resuelve componiendo ".tarjeta"/".mensaje"
   normales; solo se añade aquí lo que ningún componente puede dar porque
   no es seleccionable por clase (el ::backdrop de <dialog>) o porque es
   posicionamiento de página, no un componente (el aviso flotante).
   ========================================================================== */

/* El atributo nativo [hidden] debería bastar para ocultar cualquier cosa,
   pero varios componentes del sistema (".mensaje", ".campo", ".fila"...)
   fijan su propio "display" por clase, y una regla de autor con esa
   especificidad gana siempre a la hoja de estilos por defecto del
   navegador — así que un ".mensaje" con "hidden" se queda visible como
   una caja vacía. Las vistas usan "hidden" constantemente (avisos de
   error, paneles de pestañas, el paso 2 del asistente...), así que esto
   hace falta de verdad y no es propio de ningún componente concreto. */
[hidden]{ display:none !important; }

/* Componentes usados sobre un <a> (tarjetas-enlace de "Mis torneos" y del
   historial del perfil, botones que en realidad navegan como "Cerrar
   sesión" o "Crear un torneo"): el reset de "a" del bloque 5 solo toca
   grosor/desplazado del subrayado, no lo quita, así que cualquiera de
   estos sale subrayado de punta a punta. Ningún componente cubre "esto
   también puede ser un enlace", así que se resuelve aquí en vez de
   repetir "text-decoration:none" vista a vista. */
a.tarjeta, a.boton{ text-decoration:none; }

/* <dialog id="modalPublicar"> (tablon.php) — el panel reutiliza ".tarjeta"
   tal cual; aquí solo se resetea el marco nativo del elemento <dialog>
   (borde/centrado de la hoja de estilos de usuario) y se estiliza su
   ::backdrop, que no tiene clase propia que se le pueda aplicar. */
dialog.tarjeta{
  width:min(480px, calc(100vw - 2 * var(--e4)));
  max-height:calc(100vh - 2 * var(--e6));
  overflow-y:auto;
  box-shadow:var(--sombra-lg);
}
dialog.tarjeta::backdrop{ background:rgba(12,42,49,.45); }
[data-tema="oscuro"] dialog.tarjeta::backdrop{ background:rgba(4,12,14,.6); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) dialog.tarjeta::backdrop{ background:rgba(4,12,14,.6); }
}

/* Aviso flotante (torneo.js `alertaSuave`) — toast de error de anotación
   en directo. El color y la forma vienen de ".mensaje.mensaje--error";
   aquí solo se resuelve el posicionamiento fijo y la transición de
   entrada/salida, que no es parte de ningún componente de tarjeta. */
.aviso-flotante{
  position:fixed;
  left:50%; bottom:var(--e6);
  transform:translate(-50%, 12px);
  z-index:var(--z-modal);
  width:min(360px, calc(100vw - 2 * var(--e4)));
  opacity:0;
  pointer-events:none;
  box-shadow:var(--sombra-lg);
  transition:opacity var(--dur-normal) var(--facilidad), transform var(--dur-normal) var(--facilidad);
}
.aviso-flotante.visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .aviso-flotante{ transition:opacity .001ms linear; }
}

/* ─── Pie de página ────────────────────────────────────────────────────
   No existía componente de pie en el muestrario: los avisos legales
   llegaron después. Se apoya en los tokens y roles ya definidos. */
.pie-app{
  margin-top:var(--e12);
  border-top:1px solid var(--color-borde);
  background:var(--color-fondo-elevado);
  padding-block:var(--e6);
}
.pie-app__interior{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);
  align-items:center;justify-content:space-between;
}
.pie-app__marca{margin:0;color:var(--color-texto-suave);font-size:var(--fs-300)}
.pie-app__enlaces{display:flex;flex-wrap:wrap;gap:var(--e1)}
.pie-app__enlaces a{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--e2);
  color:var(--color-texto-suave);font-size:var(--fs-300);text-decoration:none;border-radius:var(--radio-md);
}
.pie-app__enlaces a:hover{color:var(--color-texto);background:var(--color-fondo-hondo)}

/* ─── Documentos legales ──────────────────────────────────────────────
   Texto largo de lectura: ancho de línea corto y aire entre bloques. */
.documento{max-width:68ch;margin-inline:auto;padding-block:var(--e8)}
.documento h2{margin-top:var(--e8);margin-bottom:var(--e3)}
.documento p{margin-block:0 var(--e4);color:var(--color-texto-suave);line-height:1.7}
.documento p b{color:var(--color-texto)}
.documento .lista{margin:0 0 var(--e4);padding-left:var(--e5);color:var(--color-texto-suave);line-height:1.7}
.documento .lista li{margin-bottom:var(--e2)}
.tabla-datos{width:100%;border-collapse:collapse;margin-bottom:var(--e6);font-size:var(--fs-300)}
.tabla-datos th,.tabla-datos td{
  text-align:left;padding:var(--e3);border-bottom:1px solid var(--color-borde);vertical-align:top;
}
.tabla-datos th{color:var(--color-texto);font-weight:var(--fw-medio)}
.tabla-datos td{color:var(--color-texto-suave)}
@media (max-width:600px){
  .tabla-datos,.tabla-datos tbody,.tabla-datos tr,.tabla-datos td{display:block;width:100%}
  .tabla-datos thead{display:none}
  .tabla-datos tr{border-bottom:1px solid var(--color-borde);padding-block:var(--e3)}
  .tabla-datos td{border:0;padding:var(--e1) 0}
  .tabla-datos td:first-child{color:var(--color-texto);font-weight:var(--fw-medio)}
}

/* 27. Eventos: cartel, chips y filtros del tablón --------------------------------------------- */
/* La foto manda: es lo que se ve en la tarjeta de WhatsApp y lo primero que
   mira quien llega por un enlace compartido. */
.evento{ overflow:hidden; padding:0; }
.evento__cuerpo{ display:flex; flex-direction:column; gap:var(--e4); padding:var(--e5); }
.evento--sin-foto .evento__cuerpo{ padding-top:var(--e5); }

.evento__foto{
  position:relative; display:block;
  aspect-ratio:1200/630; width:100%;
  background:var(--color-fondo-hondo);
  overflow:hidden;
}
.evento__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.evento__foto--vacia{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--pista-oscura), var(--pista));
}
.evento__foto--vacia .icono{ width:56px; height:56px; color:var(--pelota); opacity:.85; }
.evento__tipo{
  position:absolute; inset-block-start:var(--e3); inset-inline-start:var(--e3);
  display:inline-flex; align-items:center; height:26px; padding-inline:var(--e3);
  border-radius:var(--radio-pill);
  /* Cal sobre el cristal oscuro (11.11:1). Ojo con --cristal-texto-claro:
     es la tinta apagada del TEMA claro, no un color de texto claro. */
  background:var(--cristal-oscuro); color:var(--cal);
  backdrop-filter:blur(6px);
  font-size:var(--fs-200); font-weight:var(--fw-semi);
  letter-spacing:var(--tracking-mayus); text-transform:uppercase;
}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding-inline:var(--e3);
  border-radius:var(--radio-pill);
  border:1px solid var(--color-borde);
  background:var(--color-fondo-hondo);
  font-size:var(--fs-200); font-weight:var(--fw-semi);
  color:var(--color-texto-suave);
  white-space:nowrap;
}
.chip .icono{ width:14px; height:14px; }
.chip--precio{ background:var(--color-exito-fondo); border-color:var(--color-exito-borde); color:var(--color-exito-texto); }
.chip--gratis{ background:var(--color-info-fondo); border-color:var(--color-info-borde); color:var(--color-info-texto); }
.chip--completo{ background:var(--color-aviso-fondo); border-color:var(--color-aviso-borde); color:var(--color-aviso-texto); }
.chip--cancelado{ background:var(--color-error-fondo); border-color:var(--color-error-borde); color:var(--color-error-texto); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--e2); }

/* Filtros por tipo: una fila que se desliza en el móvil en vez de partirse. */
.filtros{
  display:flex; gap:var(--e2);
  overflow-x:auto; scrollbar-width:none;
  padding-block:var(--e1);
  margin-inline:calc(var(--e4) * -1); padding-inline:var(--e4);
}
.filtros::-webkit-scrollbar{ display:none; }
.filtros__opcion{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  height:38px; padding-inline:var(--e4);
  border-radius:var(--radio-pill);
  border:1px solid var(--color-borde);
  background:var(--color-fondo-elevado);
  color:var(--color-texto-suave);
  font-size:var(--fs-300); font-weight:var(--fw-semi);
  text-decoration:none;
  transition:background var(--dur-rapida) var(--facilidad), color var(--dur-rapida) var(--facilidad);
}
.filtros__opcion:hover{ border-color:var(--color-borde-fuerte); color:var(--color-texto); }
.filtros__opcion--activa{
  /* La tinta es --color-acento-plano y no --color-acento-texto: ese último
     es la tinta que va SOBRE la pelota, y aquí el fondo es el relleno suave
     del acento. En Modo pista daba 1.60:1 — el filtro activo no se leía. */
  background:var(--color-acento-plano-fondo); border-color:var(--color-acento-plano);
  color:var(--color-acento-plano);
}

/* Ficha del evento: la página que se abre desde WhatsApp */
.ficha{ display:flex; flex-direction:column; gap:var(--e6); }
.ficha__cartel{
  border-radius:var(--radio-lg); overflow:hidden;
  border:1px solid var(--color-borde);
  aspect-ratio:1200/630; background:var(--color-fondo-hondo);
}
.ficha__cartel img{ width:100%; height:100%; object-fit:cover; display:block; }
.ficha__datos{ display:grid; gap:var(--e4); }
@media (min-width:640px){ .ficha__datos{ grid-template-columns:repeat(2,1fr); } }
.ficha__dato{ display:flex; gap:var(--e3); align-items:flex-start; }
.ficha__dato .icono{ color:var(--color-acento-plano); flex-shrink:0; margin-top:2px; }
.ficha__dato-etiqueta{ font-size:var(--fs-200); text-transform:uppercase; letter-spacing:var(--tracking-mayus); color:var(--color-texto-suave); }
.ficha__dato-valor{ font-weight:var(--fw-semi); }

/* Las dos acciones que de verdad importan: apuntarse y preguntar. En el móvil
   se quedan pegadas abajo, que es donde está el pulgar. */
/* Apuntarse es LA acción de esta página y ocupa la línea entera. Preguntar y
   compartir van debajo, a medias: son cosas que se hacen después de decidir,
   no antes. Tres botones del mismo tamaño y del mismo peso obligaban a leer
   los tres para elegir. */
.ficha__acciones{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e3); }
.ficha__acciones > .boton--grande:first-child,
.ficha__acciones > .mensaje{ grid-column:1 / -1; }
/* Los botones de la app no parten el texto (`white-space:nowrap`), que está
   bien para una fila de acciones cortas. Aquí no: «Preguntar por WhatsApp» no
   cabe en media pantalla de móvil y se salía de su propia píldora. En esta
   rejilla sí puede ocupar dos líneas. */
.ficha__acciones .boton{
  width:100%;
  white-space:normal;
  line-height:var(--lh-ajustada);
  padding-block:var(--e2);
  padding-inline:var(--e4);
  text-align:center;
}
@media (max-width:380px){ .ficha__acciones{ grid-template-columns:minmax(0, 1fr); } }

/* El verde de WhatsApp es de WhatsApp y se reconoce sin leer. Aquí va como
   contorno y no como relleno: en relleno gritaba más que el botón principal. */
.boton--whatsapp{
  background:transparent; color:var(--whatsapp-texto); border-color:currentColor;
}
.boton--whatsapp:hover{ background:var(--whatsapp-suave); }
.boton--whatsapp:hover{ background:#1FBE5B; }

.subida-foto{ display:flex; flex-direction:column; gap:var(--e3); }
.subida-foto__marco{
  position:relative;
  aspect-ratio:1200/630; width:100%;
  border:1px dashed var(--color-borde-fuerte); border-radius:var(--radio-md);
  background:var(--color-fondo-hondo);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--color-texto-suave); font-size:var(--fs-300);
  overflow:hidden; cursor:pointer;
}
.subida-foto__marco img{ width:100%; height:100%; object-fit:cover; }
.subida-foto__marco:focus-within{ outline:var(--anillo-foco); }
.subida-foto__entrada{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* 28. Tarjeta de evento sin foto ---------------------------------------------------------------
   La mayoría de los eventos se publican sin foto, y reservarles un hueco de
   1200×630 dejaba media pantalla de color plano con un icono flotando: parecía
   una imagen que no había cargado y en el móvil solo cabía una tarjeta y media.
   Sin foto no hay hueco de foto; el tipo se cuenta con una etiqueta más entre
   las demás. */
.evento--sin-foto{ padding:0; }
.evento--sin-foto .evento__cuerpo{ padding:var(--e5); gap:var(--e3); }

.chip--tipo{
  background:var(--color-acento-plano-fondo);
  border-color:var(--color-acento-plano);
  color:var(--color-acento-texto);
  text-transform:uppercase;
  letter-spacing:var(--tracking-mayus);
}

/* El pie de la tarjeta tiene una acción principal y como mucho una secundaria
   al lado, no dos botones peleándose por el mismo peso. */
.evento__pie .boton{ flex:1; }
.evento__pie .boton--fantasma{ flex:0 0 auto; }

/* El selector de idioma vive en una cabecera oscura: sin esto hereda el
   estilo del sistema operativo y la marca de verificación del desplegable se
   pinta encima del texto. */
.cabecera-app select{
  appearance:none; -webkit-appearance:none;
  padding:0 var(--e6) 0 var(--e3);
  height:var(--toque-min);
  border-radius:var(--radio-pill);
  border:1px solid rgba(237,243,240,.28);
  background:transparent;
  color:var(--cristal-texto-claro);
  font:inherit; font-size:var(--fs-200); font-weight:var(--fw-semi);
  /* La flecha, dibujada aquí para no depender de la del sistema */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.cabecera-app select:hover{ border-color:rgba(237,243,240,.5); color:var(--cal); }
.cabecera-app select:focus-visible{ outline:var(--anillo-foco); outline-offset:2px; }
.cabecera-app select option{ background:var(--pista); color:var(--cal); }

/* 29. Podio ------------------------------------------------------------------------------------
   Cuando un torneo termina, el enlace que se compartió por WhatsApp se abre
   otra vez —y mucho— para ver quién ganó. Esto va antes que los datos del
   evento porque a esas alturas la fecha y el precio ya no le importan a nadie. */
.podio{ display:grid; gap:var(--e2); }
.podio__puesto{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--e3);
  padding:var(--e3) var(--e4);
  border:1px solid var(--color-borde); border-radius:var(--radio-md);
  background:var(--color-fondo-elevado);
}
.podio__medalla{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:var(--radio-circular);
  background:var(--color-borde); color:var(--color-texto-suave);
  font-family:var(--fuente-titulares); font-weight:var(--fw-negrita); font-size:var(--fs-300);
}
.podio__nombre{ font-weight:var(--fw-semi); }
.podio__cifra{ font-family:var(--fuente-titulares); font-weight:var(--fw-negrita); color:var(--color-texto-suave); }

/* Solo el primero se sale del molde: si los tres brillan, no brilla ninguno. */
.podio__puesto--1{ border-color:var(--color-acento-plano); }
.podio__puesto--1 .podio__medalla{ background:var(--pista); color:var(--pelota); }
.podio__puesto--1 .podio__nombre{ font-size:var(--fs-500); }

/* 30. Lo opcional, recogido -------------------------------------------------------------------
   Un formulario de catorce campos asusta aunque seis sean obligatorios. Los
   otros ocho viven aquí dentro: siguen a un toque, pero no están de por medio
   mientras alguien publica su quedada del sábado. */
.mas-detalles{
  border:1px solid var(--color-borde); border-radius:var(--radio-md);
  padding:var(--e4);
  background:var(--color-fondo-elevado);
}
.mas-detalles__titulo{
  display:flex; align-items:center; gap:var(--e2);
  cursor:pointer; list-style:none;
  font-weight:var(--fw-semi); color:var(--color-texto);
  min-height:var(--toque-min);
}
.mas-detalles__titulo::-webkit-details-marker{ display:none; }
.mas-detalles__titulo::before{
  content:''; flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); margin-inline-start:2px;
  transition:transform var(--dur-rapida) var(--facilidad);
}
.mas-detalles[open] > .mas-detalles__titulo::before{ transform:rotate(45deg); }
.mas-detalles__titulo:focus-visible{ outline:var(--anillo-foco); outline-offset:3px; border-radius:var(--radio-sm); }
@media (prefers-reduced-motion: reduce){
  .mas-detalles__titulo::before{ transition:none; }
}

/* 31. Dónde estás mirando ---------------------------------------------------------------------
   La región sale adivinada de la zona horaria del navegador, así que lo normal
   es que ya esté bien. Antes se enseñaba como una fila de siete píldoras que
   había que leer entera para saber cuál estaba marcada, más otra de tipos y
   otra de ciudad: tres filas antes del primer evento. Ahora lo normal se dice
   en una frase y lo excepcional está a un toque. */
.donde{
  border:1px solid var(--color-borde);
  border-radius:var(--radio-pill);
  background:var(--color-fondo-elevado);
  margin-top:var(--e4);
}
.donde[open]{ border-radius:var(--radio-lg); }

.donde__resumen{
  display:flex; align-items:center; gap:var(--e2);
  min-height:var(--toque-min);
  padding-inline:var(--e4);
  cursor:pointer; list-style:none;
  font-size:var(--fs-300);
  color:var(--color-texto-suave);
}
.donde__resumen::-webkit-details-marker{ display:none; }
.donde__resumen .icono{ color:var(--color-acento-plano); flex:0 0 auto; }
.donde__sitio{
  flex:1 1 auto; min-width:0;
  color:var(--color-texto); font-weight:var(--fw-semi);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.donde__cambiar{
  flex:0 0 auto;
  color:var(--color-enlace); font-weight:var(--fw-semi);
  text-decoration:underline; text-underline-offset:2px;
}
.donde[open] .donde__cambiar{ text-decoration:none; opacity:.6; }
.donde__resumen:focus-visible{ outline:var(--anillo-foco); outline-offset:2px; border-radius:var(--radio-pill); }

.donde__opciones{
  padding:0 var(--e4) var(--e4);
  border-top:1px solid var(--color-borde);
  margin-top:var(--e2); padding-top:var(--e4);
}

/* 32. Entrar con Google -----------------------------------------------------------------------
   Blanco con borde y la G de colores, que es como Google pide que se vea y
   como la gente lo reconoce sin leer. En Modo pista se invierte el fondo pero
   el logotipo no se toca: una G en otro color deja de ser la G de Google. */
.boton--google{
  background:#FFFFFF;
  color:#1F1F1F;
  border-color:#DADCE0;
  font-weight:var(--fw-medio);
}
.boton--google:hover{ background:#F7F8F8; border-color:#C6C9CC; }
[data-tema="oscuro"] .boton--google{ background:#131314; color:#E3E3E3; border-color:#3C4043; }
[data-tema="oscuro"] .boton--google:hover{ background:#1E1F20; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .boton--google{ background:#131314; color:#E3E3E3; border-color:#3C4043; }
  :root:not([data-tema="claro"]) .boton--google:hover{ background:#1E1F20; }
}

/* La línea de «o con tu correo», con la palabra encima de la raya. */
.separador-o{
  display:flex; align-items:center; gap:var(--e3);
  margin:0; color:var(--color-texto-suave); font-size:var(--fs-200);
  text-transform:uppercase; letter-spacing:var(--tracking-mayus);
}
.separador-o::before,
.separador-o::after{ content:""; flex:1 1 auto; height:1px; background:var(--color-borde); }