/* =====================================================================
   App del socio — SISTEMA DE DISEÑO
   ---------------------------------------------------------------------
   Reglas de la casa:
     1. Una pantalla = una tarea. Nada de apilar bloques sin fin.
     2. La app NO hace scroll. Lo que no cabe vive en una "hoja" que
        sube desde abajo (ahí sí hay scroll, y el usuario lo espera).
     3. El color del club se usa SOLO en lo que se puede pulsar.
        Si algo es amarillo, se toca. Si no, no.
     4. Jerarquía por tamaño y por aire, no por cajas y bordes.
     5. Todo en medidas fluidas: se adapta del móvil más pequeño
        (iPhone SE, 320x568) a una tablet sin tocar nada.
   ===================================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* ---- Color del club (lo reescribe app.js desde config.js) ---- */
  --club:           #F5D109;
  --acento:         #F5D109;
  --cabecera:       #0A0A0A;
  --bienvenida:       #151A23;
  --sobre-bienvenida: #ffffff;
  --sobre-club:     #101010;
  --sobre-acento:   #101010;
  --sobre-cabecera: #ffffff;
  /* El acento cuando hace de TEXTO: lo calcula app.js para que
     se lea sobre el fondo, sea cual sea el color del club. */
  --acento-texto:   #F5D109;
  --club-texto:     #F5D109;

  /* ---- Superficies ----
     Grafito con un punto de azul, NO negro plano. El negro puro es lo
     que sale por defecto y deja la pantalla muerta; un fondo con matiz
     y unas superficies que se levantan un poco dan profundidad, que es
     lo que separa una app cuidada de una plantilla. ---- */
  --bg:         #0E1117;
  --superficie: #181D26;
  --superficie2:#212832;
  --superficie3:#2A323F;
  --linea:      rgba(255,255,255,.09);
  --texto:      #EEF1F6;
  --dim:        #9AA3B2;

  --verde: #3DD68C;
  --rojo:  #FF6B6B;
  --azul:  #58A6FF;

  /* Sombras: lo que hace que las cosas "floten" */
  --sombra-s: 0 2px 8px rgba(0,0,0,.35);
  --sombra-m: 0 8px 24px -8px rgba(0,0,0,.55);
  --sombra-l: 0 20px 48px -16px rgba(0,0,0,.7);

  /* ---- Espaciado ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px;

  /* ---- Radios ---- */
  --r-s: 12px; --r-m: 18px; --r-l: 26px;

  /* ---- Tipografía fluida ----
     OJO: estos tamaños están subidos a propósito. Muchos socios pasan
     de los 60 y con 10-12px sencillamente no leen. Es preferible que
     algo no quepa y haya que deslizar, a que no se lea. ---- */
  --t-xs:  clamp(12px, 3.1vw, 14px);
  --t-s:   clamp(14px, 3.7vw, 16px);
  --t-m:   clamp(16px, 4.2vw, 18px);
  --t-l:   clamp(19px, 5.1vw, 23px);
  --t-xl:  clamp(24px, 6.6vw, 32px);
  --t-2xl: clamp(32px, 9.4vw, 46px);

  --nav-h: 64px;
}

/* ---------------------------------------------------------------
   MODO CLARO
   Gris muy claro de fondo, NO blanco puro: sobre blanco puro las
   tarjetas blancas desaparecen y no hay forma de dar profundidad.
   Las sombras son de azul apagado, no grises: el gris puro ensucia.
   --------------------------------------------------------------- */
html[data-tema="claro"] {
  --bg:          #F5F6F8;
  --superficie:  #FFFFFF;
  --superficie2: #EFF1F4;
  --superficie3: #E1E5EA;
  --linea:       rgba(16,24,40,.09);
  --texto:       #11151C;
  --dim:         #5A6472;

  --verde: #12A150;
  --rojo:  #D93A3A;
  --azul:  #2A6FD6;

  --sombra-s: 0 1px 2px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.05);
  --sombra-m: 0 2px 4px rgba(16,24,40,.04), 0 10px 24px -8px rgba(16,24,40,.12);
  --sombra-l: 0 4px 8px rgba(16,24,40,.05), 0 24px 48px -16px rgba(16,24,40,.18);

  /* Sobre claro, la barra de arriba y la de abajo van en blanco */
  --cabecera:       #FFFFFF;
  --sobre-cabecera: #11151C;
}

/* En claro los halos van más suaves: sobre fondo claro, el mismo
   amarillo canta mucho más que sobre grafito. */
html[data-tema="claro"] body {
  background-image:
    radial-gradient(120% 55% at 50% -10%,
      color-mix(in srgb, var(--club) 22%, transparent) 0%, transparent 62%),
    radial-gradient(80% 45% at 100% 100%,
      color-mix(in srgb, var(--club) 10%, transparent) 0%, transparent 55%); }

/* ---------------------------------------------------------------------
   LA FRANJA DE ABAJO EN EL IPHONE
   ---------------------------------------------------------------------
   Safari en iPhone esconde su barra de abajo cuando la pagina no se
   desliza, y al esconderla la pantalla se hace mas alta PERO la medida
   de "100dvh" no se entera. Resultado: la app se queda mas corta que la
   pantalla y por debajo de la barra de navegacion asoma una franja.
   Lo mismo pasa con "position: fixed", que se agarra al alto viejo.

   No se puede tapar con un elemento, porque queda fuera de la pagina.
   Lo que si pinta ahi es el fondo de <html>, que el navegador extiende
   por toda la pantalla. Poniendolo del color de la barra, la franja
   sigue existiendo pero es del mismo blanco que la barra y no se ve.
   --------------------------------------------------------------------- */
html { background: var(--cabecera); }

html, body { height: 100%; }
/* ---------------------------------------------------------------------
   NADA DE ZOOM AL DAR DOS TOQUES
   ---------------------------------------------------------------------
   El movil entiende dos toques seguidos como "acercame esto". En una
   pagina de leer tiene sentido; aqui no, porque lo que hay son botones,
   y quien da dos toques a un boton no quiere acercarlo: es que ha
   pulsado dos veces. Se quedaba la pantalla ampliada y torcida sin que
   el socio supiera por que ni como deshacerlo.

   "manipulation" quita ESO y solo eso. Pellizcar con dos dedos para
   agrandar sigue funcionando, que es de lo que depende quien no ve bien
   y no se le puede quitar.

   De paso se va el medio segundo que el navegador esperaba antes de
   hacer caso a cada toque, por si acaso llegaba el segundo. Los botones
   responden al momento.
   --------------------------------------------------------------------- */
body {
  margin: 0;
  touch-action: manipulation;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  /* Dos halos de color muy tenues: no se ven como manchas, pero
     quitan de golpe la sensación de "pantalla apagada". */
  background-image:
    radial-gradient(120% 60% at 50% -10%,
      color-mix(in srgb, var(--club) 13%, transparent) 0%, transparent 60%),
    radial-gradient(90% 50% at 100% 100%,
      color-mix(in srgb, var(--club) 7%, transparent) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* Y explicito en lo que se pulsa. "touch-action" no se hereda: el
   navegador mira tambien a los padres, asi que con ponerlo en el body
   deberia bastar, pero eso es fiarse de como lo interprete cada uno.
   Puesto aqui no hay nada que interpretar. */
button, a, input, select, textarea, label, summary {
  touch-action: manipulation;
}

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img { display: block; }
[hidden] { display: none !important; }


/* =====================================================================
   BIENVENIDA  ·  escudo del club + patrocinador principal
   ===================================================================== */
#bienvenida {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bienvenida);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); padding: var(--s6);
  transition: opacity .45s ease, visibility .45s;
}
#bienvenida.fuera { opacity: 0; visibility: hidden; }
#bienvenida .escudo img { width: clamp(90px, 30vw, 140px); height: auto; object-fit: contain; }
#bienvenida .escudo     { font-size: clamp(64px, 22vw, 100px); line-height: 1; }
#bienvenida .club {
  font-size: var(--t-l); font-weight: 800; letter-spacing: -.3px;
  color: var(--sobre-bienvenida); text-align: center; }
#bienvenida .temporada { font-size: var(--t-s); color: var(--sobre-bienvenida); opacity: .5; margin-top: 2px; }

#bienvenida .patro {
  position: absolute; bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  animation: aparecer .6s .3s both; }
#bienvenida .patro small {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--sobre-bienvenida); opacity: .45; }
#bienvenida .patro img {
  width: min(210px, 62vw); height: 62px; object-fit: contain;
  background: #fff; border-radius: var(--r-s); padding: 9px 14px; }
#bienvenida .patro img[data-forma="panoramico"] { height: 54px; }
#bienvenida .patro img[data-forma="apaisado"]   { height: 64px; }
#bienvenida .patro img[data-forma="cuadrado"]   { height: 82px; }
#bienvenida .patro img[data-forma="vertical"]   { height: 92px; }
#bienvenida .patro b { font-size: var(--t-m); color: var(--sobre-bienvenida); }

@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }

/* Barra de carga */
#bienvenida .barra {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--s6) + env(safe-area-inset-bottom) + 120px);
  width: 90px; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,.12); overflow: hidden; }
#bienvenida .barra i {
  display: block; height: 100%; width: 40%; border-radius: 99px;
  background: var(--club); animation: correr 1.1s ease-in-out infinite; }
@keyframes correr { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }


/* =====================================================================
   PANTALLA DE ERROR
   ===================================================================== */
#pantalla-error {
  position: fixed; inset: 0; z-index: 150; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s6); gap: var(--s3); overflow-y: auto; }

/* Centrado esta bien para un mensaje de dos lineas, pero cuando el
   contenido es mas alto que la pantalla el centrado se come la parte de
   arriba Y ADEMAS no deja subir hasta ella: el titulo queda fuera para
   siempre. En esas pantallas se empieza por arriba y se baja como en
   cualquier pagina. */
#pantalla-error.largo { justify-content: flex-start; }
#pantalla-error .escudo { font-size: 56px; }
#pantalla-error .escudo img { width: 78px; height: 78px; object-fit: contain; }
#pantalla-error h1 { font-size: var(--t-l); font-weight: 800; }
#pantalla-error p  { font-size: var(--t-m); color: var(--dim); line-height: 1.55; max-width: 330px; }

.caja-codigo { width: 100%; max-width: 330px; margin-top: var(--s4); }
.caja-codigo label { display: block; font-size: var(--t-s); color: var(--dim); margin-bottom: var(--s2); }
.caja-codigo input {
  width: 100%; padding: 14px; font-size: var(--t-m); text-align: center; font-family: inherit;
  border-radius: var(--r-s); border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); }
.caja-codigo input:focus { outline: 2px solid var(--club); outline-offset: -1px; }
#codigo-error { color: var(--rojo); font-size: var(--t-s); margin-top: var(--s2); min-height: 18px; }


/* =====================================================================
   ARMAZÓN  ·  cabecera fija + vista + navegación fija
   ===================================================================== */
#app { height: 100dvh; display: flex; flex-direction: column; }

#cabecera {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: max(var(--s3), env(safe-area-inset-top)) var(--s4) var(--s3);
  background: var(--cabecera); color: var(--sobre-cabecera);
}
#cabecera .escudo img { width: 34px; height: 34px; object-fit: contain; }
#cabecera .escudo { font-size: 26px; line-height: 1; }
#cabecera .titulo { font-size: var(--t-m); font-weight: 700; letter-spacing: -.2px; }
#cabecera .sub    { font-size: var(--t-xs); opacity: .5; }

main { flex: 1; min-height: 0; position: relative; }

/* Cada vista ocupa el hueco que queda. Si el contenido no cabe, se
   puede deslizar: mas vale deslizar que perder informacion. */
.vista {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* Abajo menos que arriba: lo de arriba es aire y lo de abajo era hueco
     muerto entre el ultimo bloque y el menu. */
  padding: var(--s4) var(--s4) var(--s3); gap: var(--s3);
  overflow-y: auto; overflow-x: clip;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  animation: entrar .25s ease-out;
}
.vista::-webkit-scrollbar { display: none; }
/* Aire al final: sin esto, la última línea queda pegada a la barra */
.vista > *:last-child { margin-bottom: var(--s2); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* Bloque que se lleva el espacio sobrante y, si hace falta, scrollea */
.crece { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll-suave { overflow-y: auto; overflow-x: clip;
                scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-suave::-webkit-scrollbar { display: none; }


/* =====================================================================
   PIEZAS COMUNES
   ===================================================================== */
.rotulo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--dim); font-weight: 700; }

.tarjeta {
  background: var(--superficie); border-radius: var(--r-m); padding: var(--s4);
  border: 1px solid var(--linea); box-shadow: var(--sombra-m);
  /* Un brillo finísimo arriba: simula luz cayendo sobre la tarjeta */
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%); }
html[data-tema="claro"] .tarjeta { background-image: none; }

.vacio { color: var(--dim); font-size: var(--t-s); text-align: center;
         padding: var(--s5) var(--s3); line-height: 1.5; }

/* ---- Botones ---- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; padding: 18px; border-radius: var(--r-s); min-height: 56px;
  font-size: var(--t-m); font-weight: 700;
  background: var(--club); color: var(--sobre-club);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--club) 55%, transparent);
  transition: transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .14s ease; }
/* Al pulsar se hunde: el dedo "nota" que ha funcionado */
.btn:active { transform: scale(.965) translateY(1px); box-shadow: none; }
.btn.fantasma { box-shadow: none; }
.btn.fantasma { background: var(--superficie2); color: var(--texto); }
.btn:disabled { opacity: .4; }

/* ---- Chips y mensajes ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 700; background: var(--superficie2); color: var(--dim); }
.chip.vivo { background: color-mix(in srgb, var(--acento) 20%, transparent); color: var(--acento-texto); }
.chip.ok   { background: color-mix(in srgb, var(--verde) 18%, transparent);  color: var(--verde); }

.mensaje { padding: 13px 15px; border-radius: var(--r-s); font-size: var(--t-s);
           font-weight: 600; line-height: 1.45; }
.mensaje.ok     { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.mensaje.err    { background: color-mix(in srgb, var(--rojo) 15%, transparent);  color: var(--rojo); }
.mensaje.neutro { background: var(--superficie2); color: var(--dim); }


/* =====================================================================
   ICONOS  ·  SVG dibujados a mano, nada de emojis
   ===================================================================== */
.ico { flex: 0 0 auto; }
#nav button i { display: flex; align-items: center; justify-content: center;
                font-style: normal; opacity: .55; }
#nav button.on i { opacity: 1; }


/* =====================================================================
   PORTADA
   ===================================================================== */
.saludo { display: flex; align-items: center; justify-content: space-between;
          gap: var(--s3); flex: 0 0 auto; }
.saludo .txt b     { display: block; font-size: var(--t-l); font-weight: 800; letter-spacing: -.3px; }
.saludo .txt small { display: block; font-size: var(--t-xs); color: var(--dim); margin-top: 1px; }

/* La zona central respira y, si el móvil es pequeño, se desliza */
.crece.scroll-suave { gap: var(--s3); }

/* ---- Carriles horizontales (partidos y noticias) ----
   Meten cuatro cosas en el alto de una. Se paran solos en cada tarjeta. */
.carril {
  display: flex; gap: var(--s2); overflow-x: auto; flex: 0 0 auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 2px;
  /* NADA de márgenes negativos aquí: al llevar la vista scroll
     vertical, el navegador activa también el horizontal y el margen
     negativo desplazaba y recortaba TODO lo demás de la pantalla. */ }
.carril::-webkit-scrollbar { display: none; }
.carril-item { scroll-snap-align: start; flex: 0 0 auto; }

.partido.carril-item { width: 100%; }
.carril > .partido.carril-item:not(:only-child) { width: 91%; }

/* ---- Partidos siguientes (tarjeta compacta) ---- */
.partido-mini { width: 74%; max-width: 250px; display: flex; flex-direction: column;
                gap: var(--s3); text-align: left; }
.mini-eqs { display: flex; flex-direction: column; gap: 7px; }
.mini-eq { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s);
           font-weight: 600; min-width: 0; }
.mini-eq img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.mini-eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-eq.mio span {
  background: var(--club); color: var(--sobre-club);
  font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.mini-fecha { font-size: var(--t-xs); color: var(--dim); }

/* ---- Tres cifras del socio ---- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: var(--s2); flex: 0 0 auto; }
.stats div { background: var(--superficie); border-radius: var(--r-s);
             padding: var(--s3) var(--s2); text-align: center;
             border: 1px solid var(--linea); box-shadow: var(--sombra-s); }
.stats b    { display: block; font-size: var(--t-l); font-weight: 900; letter-spacing: -.5px; }
.stats div:nth-child(1) b { color: var(--verde); }
.stats div:nth-child(3) b { color: var(--acento-texto); }
.stats span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase;
              letter-spacing: .8px; margin-top: 2px; }

/* ---- Las dos cajas de resumen: porra y MVP ---- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: var(--s2); flex: 0 0 auto; }
.mini-caja { background: var(--superficie); border-radius: var(--r-m); padding: var(--s3);
             text-align: left; display: flex; flex-direction: column; gap: 7px; }
.mini-caja { transition: transform .14s cubic-bezier(.2,.9,.3,1), background .14s ease; }
.mini-caja:active { background: var(--superficie2); transform: scale(.975); }
.mini-caja.destacada { background: color-mix(in srgb, var(--acento) 16%, var(--superficie)); }
.mini-cab { display: flex; align-items: center; gap: 6px; color: var(--dim);
            font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.mini-fila { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); }
.mini-fila .pos { color: var(--dim); font-weight: 800; min-width: 18px; }
.mini-fila .nom { flex: 1; min-width: 0; font-weight: 600;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-fila .pts { font-weight: 900; }
.mini-fila.yo { color: var(--acento-texto); }
.mini-grande { font-size: var(--t-s); font-weight: 800; }
.mini-nota   { font-size: var(--t-xs); color: var(--dim); line-height: 1.3;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Rótulo con enlace a la derecha ---- */
.rotulo-fila { display: flex; align-items: center; justify-content: space-between;
               flex: 0 0 auto; }
.verpiu { display: flex; align-items: center; gap: 3px; color: var(--acento-texto);
          font-size: var(--t-xs); font-weight: 700; }

/* ---- Noticia en tarjeta (carril de la portada) ---- */
.noticia-card { width: 168px; background: var(--superficie); border-radius: var(--r-m);
                overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.noticia-card { transition: transform .14s cubic-bezier(.2,.9,.3,1); }
.noticia-card:active { background: var(--superficie2); transform: scale(.975); }
.noticia-card img,
.noticia-card .sin { width: 100%; height: 92px; object-fit: cover; flex: 0 0 auto; }
.noticia-card .sin { background: var(--superficie2); color: var(--dim);
                     display: flex; align-items: center; justify-content: center; }
.noticia-card .cuerpo { padding: var(--s2) var(--s3) var(--s3); }
.noticia-card .fecha { font-size: 11px; color: var(--dim); text-transform: uppercase;
                       letter-spacing: 1px; }
.noticia-card .tit { font-size: var(--t-xs); font-weight: 700; line-height: 1.32; margin-top: 3px;
                     display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                     overflow: hidden; }

/* ---- Aviso bajo el carné ---- */
.aviso-qr { background: var(--superficie); border-radius: var(--r-s); padding: 11px var(--s3);
            font-size: var(--t-xs); color: var(--dim); line-height: 1.45; flex: 0 0 auto; }


/* =====================================================================
   EL PARTIDO  ·  pieza principal de la portada
   ===================================================================== */
.partido { display: flex; flex-direction: column; gap: var(--s4); }

.partido-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--dim); font-weight: 700; }

.enfrentamiento { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
                  align-items: center; gap: var(--s2); }
.lado { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.lado img {
  width: clamp(46px, 15vw, 70px); height: clamp(46px, 15vw, 70px);
  object-fit: contain;
  /* Círculo de fondo: ordena el conjunto aunque los escudos vengan a
     tamaños distintos, y ayuda a que se lean los muy oscuros. */
  background: var(--superficie2); border-radius: 50%; padding: 7px;
  border: 1px solid var(--linea); }
.lado span { font-size: var(--t-s); font-weight: 700; line-height: 1.2;
             overflow-wrap: break-word; max-width: 100%; }
/* ---------------------------------------------------------------------
   NUESTRO EQUIPO, MARCADO CON EL AMARILLO DEL CLUB
   ---------------------------------------------------------------------
   El amarillo del club como color de LETRA sobre fondo blanco no se lee:
   por eso hasta ahora salia apagado, en un dorado que no parecia el
   color del club. De FONDO, con la letra oscura encima, se ve amarillo
   de verdad y se lee perfectamente. Ademas funciona igual en modo claro
   y en oscuro, sin depender del fondo que haya detras.
   --------------------------------------------------------------------- */
.lado.nuestro span {
  background: var(--club); color: var(--sobre-club);
  font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.versus { font-size: var(--t-xs); color: var(--dim); font-weight: 800; }
.versus.marcador { font-size: var(--t-xl); color: var(--texto); font-weight: 900; letter-spacing: -1px; }

.cuando { text-align: center; font-size: var(--t-s); color: var(--dim); }

.reloj { display: flex; justify-content: center; gap: var(--s2); }
.reloj div { text-align: center; background: var(--superficie2);
             border-radius: var(--r-s); padding: var(--s2) 0; flex: 1; max-width: 76px;
             border: 1px solid var(--linea); }
.reloj div:last-child b { color: var(--acento-texto); }
.reloj b    { display: block; font-size: var(--t-l); font-weight: 900; line-height: 1; letter-spacing: -.5px; }
.reloj span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase;
              letter-spacing: .8px; margin-top: 3px; }


/* =====================================================================
   PATROCINADORES  ·  solo el logo, y cada uno a su tamaño
   ---------------------------------------------------------------------
   Van sobre BLANCO a propósito: los logos vienen de mil sitios y con
   mil colores; sobre blanco se leen todos. Sobre el fondo oscuro de la
   app, la mitad de las marcas desaparecerían.

   El tamaño NO es fijo. app.js mide cada imagen al cargarla y le pone
   data-forma; aquí se le da el alto que le corresponde para que todos
   los logos ocupen visualmente lo mismo:

     · panoramico (muy alargado)  -> alto pequeño, ya se estira de ancho
     · apaisado                   -> alto medio
     · cuadrado                   -> alto grande
     · vertical (más alto que ancho) -> el alto máximo

   Mientras la imagen no se ha medido todavía, vale el alto base: así
   nunca hay un salto feo al cargar.
   ===================================================================== */

/* ---------- Banner: portada, carné y pestaña Juega ---------- */
/* El patrocinador paga por estar ahi, asi que tiene que verse bien. Lo
   que no puede es dejar un desierto debajo: el sitio que se le da es
   suyo, pero el hueco muerto entre el y el menu no le sirve a nadie.
   Por eso la franja va holgada y lo que se recorta es lo de despues.
   El logo se escala segun su forma para que uno panoramico y uno
   cuadrado ocupen parecido. */
.patro-banner {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--r-m);
  padding: var(--s2) var(--s4); min-height: 60px;
  text-decoration: none; flex: 0 0 auto; overflow: hidden; }
.patro-banner:active { opacity: .82; }
html[data-tema="claro"] .patro-banner,
html[data-tema="claro"] .patro-caja { border: 1px solid var(--linea); }
.patro-banner img {
  width: 100%; height: 40px; object-fit: contain; }
.patro-banner img[data-forma="panoramico"] { height: 34px; }
.patro-banner img[data-forma="apaisado"]   { height: 40px; }
.patro-banner img[data-forma="cuadrado"]   { height: 50px; }
.patro-banner img[data-forma="vertical"]   { height: 56px; }
.patro-banner .solo-nombre { color: #111; font-size: var(--t-l); font-weight: 800;
                             text-align: center; }

/* ---------- Rejilla de logos (sección del Club) ---------- */
.patro-rejilla { display: grid; gap: var(--s2);
                 grid-template-columns: repeat(2, minmax(0, 1fr)); }
.patro-caja {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--r-s); padding: var(--s3);
  min-height: 92px; text-decoration: none; overflow: hidden; }
.patro-caja img { width: 100%; height: 52px; object-fit: contain; }
.patro-caja img[data-forma="panoramico"] { height: 40px; }
.patro-caja img[data-forma="apaisado"]   { height: 50px; }
.patro-caja img[data-forma="cuadrado"]   { height: 64px; }
.patro-caja img[data-forma="vertical"]   { height: 70px; }
.patro-caja span { color: #111; font-size: var(--t-m); font-weight: 800; text-align: center; }

/* El principal ocupa las dos columnas y va más grande */
.patro-caja.ancha { grid-column: 1 / -1; min-height: 116px; }
.patro-caja.ancha img { height: 66px; }
.patro-caja.ancha img[data-forma="panoramico"] { height: 52px; }
.patro-caja.ancha img[data-forma="apaisado"]   { height: 64px; }
.patro-caja.ancha img[data-forma="cuadrado"]   { height: 82px; }
.patro-caja.ancha img[data-forma="vertical"]   { height: 90px; }

/* =====================================================================
   EL CARNÉ
   ===================================================================== */
.carnet {
  /* Se estira si hay sitio, pero nunca por debajo de esto: el QR tiene
     que verse grande sí o sí, es lo que se enseña en la puerta. */
  flex: 1 1 auto; min-height: 400px;
  display: flex; flex-direction: column; gap: var(--s4);
  background: var(--club);
  background: linear-gradient(155deg, var(--club), color-mix(in srgb, var(--club) 78%, #000));
  color: var(--sobre-club);
  border-radius: var(--r-l); padding: var(--s5) var(--s4);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.75); }

.carnet-cab { display: flex; justify-content: space-between; align-items: flex-start;
              gap: var(--s3); flex: 0 0 auto; }
.carnet-cab .club { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; }
.carnet-cab .temp { font-size: var(--t-xs); opacity: .65; margin-top: 1px; }
.carnet-cab .num  { text-align: right; font-size: 9px; text-transform: uppercase;
                    letter-spacing: 1px; opacity: .7; }
.carnet-cab .num b { display: block; font-size: var(--t-xl); line-height: 1; letter-spacing: -1px; }

.carnet-qr {
  background: #fff; border-radius: var(--r-m); padding: var(--s3);
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-height: 230px; }
.carnet-qr canvas { max-width: 100%; max-height: 100%; width: auto; height: auto;
                    image-rendering: pixelated; }

.carnet-pie { flex: 0 0 auto; }
.carnet-pie .nombre { font-size: var(--t-l); font-weight: 800; letter-spacing: -.3px; line-height: 1.15; }
.carnet-pie .tipo   { font-size: var(--t-s); opacity: .7; text-transform: capitalize; margin-top: 2px; }

/* QR a pantalla completa (para enseñarlo en la puerta) */
#qr-pleno {
  position: fixed; inset: 0; z-index: 190; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); }
#qr-pleno canvas { width: min(84vw, 70vh); height: auto; image-rendering: pixelated; }
#qr-pleno .num { color: #000; font-size: var(--t-xl); font-weight: 900; letter-spacing: -1px; }
#qr-pleno .nom { color: #555; font-size: var(--t-m); }
#qr-pleno .cerrar {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px;
  width: 44px; height: 44px; border-radius: 50%; background: #eaeaee; color: #111; font-size: 20px; }


/* =====================================================================
   JUEGA  ·  porra y MVP en la misma pestaña
   ===================================================================== */
.marcador-porra { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
                  gap: var(--s3); align-items: start; }
.gol { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.gol img { width: 40px; height: 40px; object-fit: contain; }
.gol input {
  width: 100%; text-align: center; font-family: inherit;
  font-size: var(--t-2xl); font-weight: 900; letter-spacing: -2px;
  padding: var(--s2) 0; border-radius: var(--r-s); border: none;
  background: var(--superficie2); color: var(--texto); -moz-appearance: textfield; }
.gol input::-webkit-outer-spin-button,
.gol input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gol input:focus { outline: 2px solid var(--club); }
.gol .masmenos { display: flex; gap: var(--s2); }
.gol .masmenos button {
  width: 40px; height: 40px; border-radius: 50%; background: var(--superficie2);
  color: var(--texto); font-size: 20px; font-weight: 700; line-height: 1; }
.gol .masmenos button:active { background: var(--club); color: var(--sobre-club); }
.gol .eq { font-size: var(--t-xs); color: var(--dim); font-weight: 700; text-align: center; }
.guion { font-size: var(--t-xl); color: var(--dim); font-weight: 900; padding-top: 46px; }

/* Rejilla de jugadores para votar */
.jugadores {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--s2); align-content: start; }
.jugador {
  display: flex; flex-direction: column; gap: 6px; padding: 0;
  border-radius: var(--r-s); overflow: hidden;
  background: var(--superficie); text-align: center; }
.jugador { transition: transform .14s cubic-bezier(.2,.9,.3,1); }
.jugador:active { transform: scale(.955); }
.jugador.elegido {
  outline: 2.5px solid var(--acento); outline-offset: -2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 18%, transparent);
  animation: elegido .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes elegido { 40% { transform: scale(1.05); } }
.jug-foto { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--superficie2); }
.jug-foto img { width: 100%; height: 100%; object-fit: cover; }
.jug-sinfoto { position: absolute; inset: 0; display: flex; align-items: center;
               justify-content: center; font-size: var(--t-xl); font-weight: 900; color: var(--dim); }
.jug-dorsal {
  position: absolute; left: 5px; bottom: 5px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 7px; background: rgba(0,0,0,.72); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
.jug-lupa {
  position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; }
.jugador .nom { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; padding: 0 4px; }
.jugador .pos { font-size: var(--t-xs); color: var(--dim); text-transform: capitalize; padding: 0 4px 8px; }

.mvp-ganador { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.mvp-ganador img { width: clamp(84px, 26vw, 116px); aspect-ratio: 1; border-radius: 50%;
                   object-fit: cover; border: 3px solid var(--acento); }

.barra-voto { height: 6px; background: var(--superficie2); border-radius: 99px;
              overflow: hidden; margin-top: 5px; }
.barra-voto i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }


/* =====================================================================
   CLUB  ·  accesos grandes
   ===================================================================== */
/* OJO con las rejillas: "1fr" NO impide que el contenido desborde.
   Hay que usar minmax(0, 1fr), o una palabra larga como
   "Patrocinadores" revienta la columna y se corta por la derecha. */
.accesos { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); }

/* Dos columnas, con el icono arriba y el texto debajo: en media
   pantalla no caben icono y texto en horizontal sin cortarse. */
.accesos.rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.accesos.rejilla .acceso {
  flex-direction: column; align-items: flex-start;
  gap: var(--s2); padding: var(--s3); }
.accesos.rejilla .acceso .flecha { display: none; }

.acceso {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--superficie); border-radius: var(--r-m); padding: var(--s4);
  text-align: left; width: 100%; min-width: 0; overflow: hidden; }
.acceso.ancho { flex: 0 0 auto; }
.acceso { transition: transform .14s cubic-bezier(.2,.9,.3,1), background .14s ease; }
.acceso:active { background: var(--superficie2); transform: scale(.985); }
.acceso .ico { font-size: 24px; width: 44px; height: 44px; border-radius: var(--r-s);
               background: var(--superficie2); display: flex; align-items: center;
               justify-content: center; flex: 0 0 auto; }
.acceso .txt { flex: 1; min-width: 0; }
.acceso b     { display: block; font-size: var(--t-m); font-weight: 700;
                overflow-wrap: break-word; }
.acceso small { display: block; font-size: var(--t-s); color: var(--dim);
                margin-top: 1px; overflow-wrap: break-word; }
.acceso .flecha { color: var(--dim); font-size: 18px; }


/* =====================================================================
   PIEZAS QUE SUSTITUYEN A LOS EMOJIS
   ===================================================================== */
/* Mensaje con icono al lado del texto */
.mensaje.con-ico { display: flex; align-items: flex-start; gap: var(--s2); }
.mensaje.con-ico .ico { margin-top: 1px; }

/* Podio de la clasificación: se marca con color, no con medallas */
.podio { display: inline-flex; align-items: center; justify-content: center;
         min-width: 24px; height: 24px; padding: 0 5px; border-radius: 7px;
         font-size: var(--t-xs); font-weight: 900; color: #101010; }
.podio.p1 { background: #f4c430; }
.podio.p2 { background: #c8ccd4; }
.podio.p3 { background: #cd8b62; }

/* Sí / no del historial de partidos */
.puesto .si { color: var(--verde); display: inline-flex; }
.puesto .no { color: var(--dim);   display: inline-flex; }

/* Ganador del MVP */
.sin-foto-mvp { color: var(--acento-texto); display: flex; align-items: center; justify-content: center;
                width: clamp(84px, 26vw, 116px); aspect-ratio: 1; border-radius: 50%;
                background: var(--superficie2); }
.nombre-ganador { display: flex; align-items: center; justify-content: center; gap: 7px;
                  font-size: var(--t-l); font-weight: 800; letter-spacing: -.3px;
                  text-align: center; }
.nombre-ganador .ico { color: var(--acento-texto); }

/* Valor numérico con icono (los MVPs de la temporada) */
.valor.con-ico { display: flex; align-items: center; gap: 4px; }
.valor.con-ico .ico { color: var(--acento-texto); }


/* =====================================================================
   LISTAS  (viven dentro de hojas, ahí sí hay scroll)
   ===================================================================== */
.fila { display: flex; align-items: center; gap: var(--s3);
        padding: 12px var(--s3); border-radius: var(--r-s); }
.fila + .fila { margin-top: 2px; }
.fila.yo { background: color-mix(in srgb, var(--acento) 14%, transparent); }
.fila .puesto { width: 26px; text-align: center; font-weight: 800; color: var(--dim); flex: 0 0 auto; }
.fila.yo .puesto { color: var(--acento-texto); }
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .cuerpo b { display: block; font-size: var(--t-s); font-weight: 700;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .cuerpo small { display: block; font-size: var(--t-xs); color: var(--dim); margin-top: 1px; }
.fila .valor { font-size: var(--t-m); font-weight: 800; flex: 0 0 auto; }
.fila img.esc { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }

/* Noticias */
.noticia { display: flex; gap: var(--s3); align-items: center; width: 100%;
           text-align: left; padding: 10px; border-radius: var(--r-s); }
.noticia:active { background: var(--superficie2); }
.noticia .foto { width: 58px; height: 58px; border-radius: var(--r-s); object-fit: cover;
                 flex: 0 0 auto; background: var(--superficie2); }
.noticia .foto.sin { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.noticia .txt { min-width: 0; flex: 1; }
.noticia .fecha { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.noticia .tit { font-size: var(--t-s); font-weight: 700; line-height: 1.3; margin: 2px 0; }
.noticia .ent { font-size: var(--t-xs); color: var(--dim); line-height: 1.35;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Calendario */
.cal-mes { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
           color: var(--acento-texto); margin: var(--s4) 0 var(--s2); }
.cal-mes:first-child { margin-top: 0; }
.cal-fila { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3);
            border-radius: var(--r-s); background: var(--superficie2); margin-bottom: 4px; }
.cal-fila.proximo { background: color-mix(in srgb, var(--acento) 12%, var(--superficie2)); }
.cal-dia { text-align: center; min-width: 30px; flex: 0 0 auto; }
.cal-dia b { display: block; font-size: var(--t-m); font-weight: 900; line-height: 1; }
.cal-dia span { font-size: 11px; color: var(--dim); text-transform: uppercase; }
.cal-eqs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cal-eq { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 600; }
.cal-eq img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.cal-eq.mio span {
  background: var(--club); color: var(--sobre-club);
  font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.cal-eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-res { font-size: var(--t-m); font-weight: 900; flex: 0 0 auto; text-align: right; }
.cal-res.gana { color: var(--verde); }
.cal-res.pierde { color: var(--rojo); }
.cal-res.empata, .cal-res.hora { color: var(--dim); font-weight: 700; font-size: var(--t-s); }
/* "por confirmar" ocupa mas que "18:00": va en dos lineas y mas pequeno
   para que no empuje al nombre del rival. */
.cal-res.hora.sin-hora { font-size: var(--t-xs); line-height: 1.25; font-weight: 600;
                         opacity: .85; }
.cal-chips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }


/* =====================================================================
   HOJAS  ·  aquí es donde vive el scroll
   ===================================================================== */
.hoja-fondo {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.65);
  display: flex; align-items: flex-end; animation: fundir .2s ease; }
@keyframes fundir { from { opacity: 0; } }

.hoja {
  width: 100%; max-height: 88dvh; background: var(--superficie);
  border-radius: var(--r-l) var(--r-l) 0 0;
  display: flex; flex-direction: column; min-height: 0;
  animation: subir .28s cubic-bezier(.2,.9,.3,1); }
@keyframes subir { from { transform: translateY(100%); } }

.hoja-cab { flex: 0 0 auto; padding: var(--s3) var(--s4) var(--s2);
             text-align: center; position: relative; }
/* Botón de cerrar bien visible: tocar fuera para cerrar no lo adivina
   nadie que no esté acostumbrado al móvil. */
.hoja-cerrar {
  position: absolute; top: var(--s2); right: var(--s3);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--superficie2); color: var(--texto);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.hoja-cerrar:active { background: var(--club); color: var(--sobre-club); }
.hoja-cab .asa { width: 38px; height: 4px; border-radius: 99px;
                 background: var(--linea); margin: 0 auto var(--s3); }
.hoja-cab h3 { font-size: var(--t-l); font-weight: 800; letter-spacing: -.3px; }
.hoja-cab p  { font-size: var(--t-xs); color: var(--dim); margin-top: 3px; }

.hoja-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s2) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));
  scrollbar-width: none; }
.hoja-cuerpo::-webkit-scrollbar { display: none; }
.hoja-cuerpo img.portada { width: 100%; border-radius: var(--r-m); margin-bottom: var(--s3); }
.hoja-cuerpo .cuerpo-texto { font-size: var(--t-m); line-height: 1.65;
                             white-space: pre-wrap; padding: 0 var(--s2); }


/* =====================================================================
   NAVEGACIÓN INFERIOR
   ===================================================================== */
#nav {
  flex: 0 0 auto; display: flex;
  background: var(--cabecera);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--linea); }
#nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px; color: var(--dim); font-size: 12px; font-weight: 700;
  min-height: var(--nav-h); position: relative; }
#nav button i { font-style: normal; font-size: 21px; line-height: 1; opacity: .55; }
#nav button.on { color: var(--acento-texto); }
#nav button.on i { opacity: 1; }
#nav button .punto {
  position: absolute; top: 7px; right: 50%; margin-right: -16px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
  border: 2px solid var(--cabecera); }


/* =====================================================================
   VISOR DE FOTOS
   ===================================================================== */
.visor { position: fixed; inset: 0; z-index: 180; background: rgba(0,0,0,.96);
         display: flex; flex-direction: column; }
.visor .lienzo { flex: 1; min-height: 0; overflow: auto; padding: var(--s4);
                 display: flex; align-items: center; justify-content: center; }
.visor img { max-width: 94vw; max-height: 100%; object-fit: contain; border-radius: var(--r-s); }
.visor.zoom .lienzo { align-items: flex-start; justify-content: flex-start; }
.visor.zoom img { max-width: none; max-height: none; width: 220vw; }
.visor .cerrar { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px;
                 width: 42px; height: 42px; border-radius: 50%;
                 background: rgba(255,255,255,.15); color: #fff; font-size: 19px; }
.visor .pie { flex: 0 0 auto; text-align: center; color: #fff; font-size: var(--t-m);
              padding: 0 var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); }
.visor .pie small { display: block; font-size: var(--t-xs); opacity: .5; margin-top: 4px; }


/* =====================================================================
   PANTALLAS ANCHAS  ·  en tablet u ordenador se centra como un móvil
   ===================================================================== */
@media (min-width: 620px) {
  #app  { max-width: 560px; margin: 0 auto; box-shadow: 0 0 60px rgba(16,24,40,.12); }
  .hoja { max-width: 560px; margin: 0 auto; }
}

/* Móviles bajitos (iPhone SE y similares): se aprieta todo un poco */
@media (max-height: 640px) {
  :root { --s4: 12px; --s5: 16px; --nav-h: 52px; }
  .reloj div { padding: 6px 0; }
  .carnet { padding: var(--s4) var(--s3); }
}


/* Version cargada, discreta al pie de la pestana Club.
   Sirve para comprobar si el movil tiene la ultima version. */
.pie-version { text-align: center; font-size: 10px; color: var(--dim);
               opacity: .55; letter-spacing: .4px; flex: 0 0 auto; }


/* ---------- Pasos numerados (instrucciones del iPhone) ---------- */
.pasos { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2); }
.paso { display: flex; align-items: flex-start; gap: var(--s3); }
/* OJO con el selector: tiene que ser ">" (hijo directo). Con ".paso b"
   a secas, las palabras en negrita del texto tambien se pintaban como
   circulos amarillos y se cortaban. */
.paso > b {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--club); color: var(--sobre-club);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-s); font-weight: 900; }
.paso span { font-size: var(--t-s); line-height: 1.5; padding-top: 4px; }
.paso span b { font-weight: 800; color: var(--texto); }


/* ---------- Invitación a instalar (portada) ---------- */
.invita {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: color-mix(in srgb, var(--acento) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 38%, transparent);
  border-radius: var(--r-m); padding: var(--s3) var(--s4); flex: 0 0 auto; }
.invita-ico { color: var(--acento-texto); flex: 0 0 auto; }
.invita-txt { flex: 1; min-width: 130px; }
.invita-txt b { display: block; font-size: var(--t-s); font-weight: 800; }
.invita-txt small { display: block; font-size: var(--t-xs); color: var(--dim);
                    margin-top: 2px; line-height: 1.35; }
.invita-btns { display: flex; align-items: center; gap: var(--s2); }
.invita-btns .btn { width: auto; padding: 11px 18px; font-size: var(--t-s); margin: 0; }
.btn-texto { color: var(--dim); font-size: var(--t-xs); font-weight: 600; padding: 8px 4px; }


/* ---------- Pista de "hay más, desliza" ----------
   Sin esto, quien no está acostumbrado ni se entera de que a la derecha
   hay más partidos o más noticias. */
.pista-desliza {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--t-xs); color: var(--dim); padding: 2px 0 0; flex: 0 0 auto; }
.pista-desliza .ico { animation: vaiven 1.6s ease-in-out infinite; }
@keyframes vaiven { 50% { transform: translateX(4px); } }

/* ---------- Ayuda ---------- */
.ayuda-bloque { margin-bottom: var(--s4); }
.ayuda-bloque h4 { display: flex; align-items: center; gap: var(--s2);
                   font-size: var(--t-m); font-weight: 800; margin-bottom: 6px; }
.ayuda-bloque h4 .ico { color: var(--acento-texto); }
.ayuda-bloque p { font-size: var(--t-s); color: var(--dim); line-height: 1.6; }


/* ---------- Aviso de version nueva ----------
   Sale flotando encima de la barra de abajo si el club ha publicado
   cambios mientras el socio tenia la app abierta. */
#aviso-version {
  position: fixed; left: var(--s3); right: var(--s3);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s3));
  z-index: 90; display: flex; align-items: center; gap: var(--s3);
  background: var(--club); color: var(--sobre-club);
  border-radius: var(--r-s); padding: 12px var(--s4);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.7);
  animation: subir .3s ease-out; }
#aviso-version span { flex: 1; font-size: var(--t-s); font-weight: 700; }
#aviso-version button {
  background: rgba(0,0,0,.18); color: inherit; font-size: var(--t-s);
  font-weight: 800; padding: 9px 16px; border-radius: 9px; white-space: nowrap; }
@media (min-width: 620px) { #aviso-version { max-width: 536px; margin: 0 auto; } }


/* =====================================================================
   CLASIFICACIÓN DE LA PORRA
   ===================================================================== */
/* Resumen de dónde va el socio: lo primero que quiere saber */
.mi-puesto {
  display: flex; align-items: center; gap: var(--s3);
  background: color-mix(in srgb, var(--acento) 16%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  border-radius: var(--r-m); padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.mi-puesto-num { font-size: var(--t-xl); font-weight: 900; color: var(--acento-texto);
                 letter-spacing: -1px; }
.mi-puesto b { display: block; font-size: var(--t-m); font-weight: 800; }
.mi-puesto small { display: block; font-size: var(--t-xs); color: var(--dim); margin-top: 2px; }

.clasi { display: flex; flex-direction: column; gap: 6px; }
.clasi-fila {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-radius: var(--r-s);
  background: var(--superficie2);
  animation: entrarFila .3s ease-out both; }
@keyframes entrarFila { from { opacity: 0; transform: translateX(-8px); } }
.clasi-fila.yo {
  background: color-mix(in srgb, var(--acento) 18%, var(--superficie2));
  outline: 2px solid var(--acento); outline-offset: -2px; }

.clasi-pos { width: 26px; text-align: center; font-size: var(--t-s);
             font-weight: 900; color: var(--dim); flex: 0 0 auto; }
.clasi-pos.p1 { color: #f4c430; font-size: var(--t-m); }
.clasi-pos.p2 { color: #cbd0d8; font-size: var(--t-m); }
.clasi-pos.p3 { color: #d69463; font-size: var(--t-m); }

.clasi-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--t-xs); font-weight: 800; letter-spacing: .5px; }

.clasi-datos { flex: 1; min-width: 0; }
.clasi-datos b { display: block; font-size: var(--t-s); font-weight: 700;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clasi-datos small { display: block; font-size: 11px; color: var(--dim); margin-top: 3px; }
.clasi-barra { height: 5px; background: var(--superficie3); border-radius: 99px;
               overflow: hidden; margin-top: 5px; }
.clasi-barra i { display: block; height: 100%; border-radius: 99px;
                 background: var(--acento); animation: crecer .5s ease-out; }
@keyframes crecer { from { width: 0 !important; } }
/* OJO con el nombre: ".podio" a secas es la chapita de 24px de la lista
   de MVPs. Si una fila de la clasificacion la lleva, hereda esa altura y
   se aplasta con el texto encima. Por eso aqui va con nombre propio. */
.clasi-fila.clasi-podio .clasi-barra i { background: #f4c430; }

.clasi-pts { flex: 0 0 auto; text-align: right; font-size: var(--t-l);
             font-weight: 900; letter-spacing: -.5px; }
.clasi-pts span { display: block; font-size: 10px; font-weight: 700;
                  color: var(--dim); letter-spacing: .5px; }

/* Cuando todavia juega uno solo, la lista de una fila se queda coja.
   Esta nota explica que no falta nada: es que aun no hay con quien
   compararse. */
.clasi-solo { font-size: var(--t-xs); color: var(--dim); text-align: center;
              line-height: 1.5; margin: var(--s3) var(--s2) 0; }

.clasi-pie { display: flex; align-items: center; justify-content: center; gap: 6px;
             font-size: var(--t-xs); color: var(--dim); text-align: center;
             margin-top: var(--s4); line-height: 1.4; }
.clasi-pie .ico { color: var(--acento-texto); flex: 0 0 auto; }


/* =====================================================================
   ANILLO DE PORCENTAJE  ·  un número frío convertido en algo visual
   ===================================================================== */
.anillo { width: 100%; max-width: 58px; height: auto; display: block;
          margin: 0 auto; aspect-ratio: 1; }
.anillo .pista { fill: none; stroke: var(--superficie3); stroke-width: 6; }
.anillo .valor {
  fill: none; stroke: var(--verde); stroke-width: 6; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s cubic-bezier(.2,.9,.3,1); }
.anillo text { fill: var(--texto); font-size: 17px; font-weight: 900;
               font-family: inherit; }

/* =====================================================================
   FOTO DE FONDO EN LA PORTADA
   ---------------------------------------------------------------------
   Se coge la foto de la última noticia (o la que ponga el club en
   config.js). Va muy difuminada y desvaneciéndose hacia abajo: da
   ambiente sin robarle protagonismo a nada.
   ===================================================================== */
.portada-foto {
  position: absolute; top: 0; left: 0; right: 0; height: 46%;
  background-size: cover; background-position: center;
  opacity: .17; filter: blur(2px) saturate(1.2); }
html[data-tema="claro"] .portada-foto { opacity: .11; filter: blur(3px) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  pointer-events: none; z-index: 0; }
#v-inicio > *:not(.portada-foto) { position: relative; z-index: 1; }

/* Barra inferior y cabecera, con el mismo aire de profundidad */
#cabecera { box-shadow: var(--sombra-s); }
#nav { box-shadow: 0 -4px 20px -6px rgba(16,24,40,.1); }
html[data-tema="claro"] #cabecera { border-bottom: 1px solid var(--linea); }


/* ---------- Aviso del club en la portada ----------
   Lo escribe el club desde el panel: un cambio de hora, una
   convocatoria... Va arriba del todo porque es lo urgente. */
.aviso-club {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: color-mix(in srgb, var(--acento) 15%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 42%, transparent);
  border-radius: var(--r-m); padding: var(--s3) var(--s4); flex: 0 0 auto; }
.aviso-club .ico { color: var(--acento-texto); flex: 0 0 auto; margin-top: 1px; }
.aviso-club span { font-size: var(--t-s); font-weight: 600; line-height: 1.45; }


/* =====================================================================
   TEXTOS LEGALES Y "MIS DATOS"
   ===================================================================== */
/* El texto legal viene con saltos de línea de verdad: se respetan.
   Las líneas EN MAYÚSCULAS hacen de títulos. */
.texto-legal {
  font-size: var(--t-s); line-height: 1.7; color: var(--dim);
  white-space: pre-wrap; padding: 0 var(--s2); }

.datos-caja { background: var(--superficie2); border-radius: var(--r-s);
              overflow: hidden; }
.dato { display: flex; align-items: baseline; gap: var(--s3);
        padding: 11px var(--s3); border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: none; }
.dato span { flex: 1; min-width: 0; font-size: var(--t-xs); color: var(--dim); }
.dato b { font-size: var(--t-s); font-weight: 700; text-align: right;
          max-width: 55%; overflow-wrap: break-word; }


/* Los escudos, siempre lo más nítidos posible dentro de su hueco */
img[data-escudo] { image-rendering: auto; }
.mini-eq img, .cal-eq img { background: var(--superficie); border-radius: 50%;
                            padding: 3px; }


/* =====================================================================
   LA FRANJA DE ABAJO DEL IPHONE
   ---------------------------------------------------------------------
   Los iPhone reservan una banda abajo para la rayita de inicio. Si no
   se pinta, se ve el fondo de la pagina por debajo de la barra de
   navegacion y queda una franja de otro color.
   ===================================================================== */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0;
  height: env(safe-area-inset-bottom);
  background: var(--cabecera); z-index: 31; pointer-events: none; }

/* Un desvanecido al final de la zona que se desliza: asi se entiende
   que hay mas contenido debajo y no parece cortado a lo bruto. */
.vista { position: absolute; }
/* El desvanecido no es contenido, es un efecto: no debe llevar el hueco
   de separacion que el resto de bloques llevan entre si. Por eso el
   margen negativo se come tambien ese hueco. */
.vista::after {
  content: ""; position: sticky; display: block; bottom: 0;
  height: 20px; margin-top: calc(-20px - var(--s3)); flex: 0 0 auto;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none; }


/* =====================================================================
   LA BANDA DE QUIEN ESTA PROBANDO LA APP
   ---------------------------------------------------------------------
   Una linea y pulsable entera. La primera version ocupaba tres lineas y
   un boton, y empujaba la tarjeta del partido fuera de la pantalla: lo
   que el socio viene a ver quedaba tapado por lo que el club quiere
   venderle. Mal negocio, porque quien no ve la app no se abona.
   ===================================================================== */
.banda-prueba {
  display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto;
  width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px 10px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--acento) 17%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 42%, transparent); }
.banda-prueba .bp-txt {
  flex: 1; min-width: 0; font-size: var(--t-xs); line-height: 1.35;
  color: var(--texto); }
.banda-prueba .bp-mas {
  flex: 0 0 auto; font-size: 19px; font-weight: 900;
  color: var(--acento-texto); line-height: 1; }

/* Cuando quedan tres dias o menos deja de ser un recordatorio */
.banda-prueba.urge {
  background: color-mix(in srgb, var(--rojo) 11%, var(--superficie));
  border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }
.banda-prueba.urge .bp-txt b { color: var(--rojo); }
.banda-prueba.urge .bp-mas { color: var(--rojo); }


/* =====================================================================
   PANTALLA "ABONATE"
   ---------------------------------------------------------------------
   La comparacion es el argumento: primero lo que ya tiene, para que se
   vea que no pierde nada, y despues lo que le falta. Lo que le falta es
   justo el abono en el movil, que es lo unico que no se puede tener sin
   pagar.
   ===================================================================== */
.ab-bloque { margin-bottom: var(--s3); padding: 14px 16px; border-radius: var(--r-m);
             background: var(--superficie2); }
.ab-bloque.destacado {
  background: color-mix(in srgb, var(--acento) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); }
.ab-tit { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase;
          letter-spacing: .06em; color: var(--dim); margin-bottom: 9px; }
.ab-bloque.destacado .ab-tit { color: var(--acento-texto); }

.ab-lista { list-style: none; margin: 0; padding: 0; }
.ab-lista li { position: relative; padding-left: 25px; margin: 7px 0;
               font-size: var(--t-s); line-height: 1.45; }
.ab-lista li::before { position: absolute; left: 0; top: -1px; font-weight: 900; }
.ab-lista.tiene li::before { content: "✓"; color: var(--verde); }
.ab-lista.gana  li::before { content: "+"; color: var(--acento-texto); font-size: 17px; top: -3px; }

.ab-precio {
  text-align: center; padding: 15px; margin-bottom: var(--s3);
  border-radius: var(--r-m); background: var(--club); color: var(--sobre-club);
  font-size: var(--t-m); font-weight: 800; line-height: 1.35; }

.ab-como { margin-bottom: var(--s3); padding: 14px 16px;
           border-radius: var(--r-m); background: var(--superficie2); }
.ab-como p { font-size: var(--t-s); line-height: 1.55; white-space: pre-wrap; }

.ab-btn {
  display: block; padding: 15px; border-radius: var(--r-m); text-align: center;
  background: #25D366; color: #062e13; text-decoration: none;
  font-size: var(--t-m); font-weight: 800; }

.ab-pie { margin-top: var(--s3); font-size: var(--t-xs); color: var(--dim);
          text-align: center; line-height: 1.5; }

/* El acceso a Abonate, en la pestana Club */
.acceso.destacado {
  background: color-mix(in srgb, var(--acento) 15%, var(--superficie));
  border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.acceso.destacado .ico { color: var(--acento-texto); }

/* Los botones de contacto llevan nombre a la izquierda y "WhatsApp" a la
   derecha: se pulsa el de la persona, no un numero suelto. */
.ab-btn { display: flex; align-items: center; justify-content: space-between;
          gap: var(--s2); margin-bottom: 9px; }
.ab-btn-nom { font-size: var(--t-m); font-weight: 800; }
.ab-btn-wa  { font-size: var(--t-xs); font-weight: 700; opacity: .72; }

/* ---------------------------------------------------------------------
   LA CUENTA
   ---------------------------------------------------------------------
   Va lo primero de la pantalla a proposito. Que entrar suelto a los
   partidos de casa salga mas caro que el abono no es una opinion ni una
   promesa: es una resta, y convence a gente a la que no convence ningun
   otro argumento.
   --------------------------------------------------------------------- */
.ab-cuentas { margin-bottom: var(--s3); padding: 15px 16px 13px;
              border-radius: var(--r-m); background: var(--superficie2); }
.ab-fila { display: flex; align-items: center; justify-content: space-between;
           gap: var(--s3); padding: 9px 0; font-size: var(--t-s); line-height: 1.3; }
.ab-fila + .ab-fila { border-top: 1px solid var(--linea); }
.ab-fila small { color: var(--dim); font-size: var(--t-xs); }
.ab-fila b { flex: 0 0 auto; font-size: var(--t-l); font-weight: 900;
             letter-spacing: -.5px; }
.ab-fila.abono b { color: var(--acento-texto); }

/* El remate de la cuenta. Un numero solo no dice nada: 25 euros puesto
   al lado de algo que se compra sin pensar deja de parecer un gasto. */
.ab-remate {
  margin-top: 11px; padding: 12px 11px; border-radius: var(--r-s); text-align: center;
  background: var(--club); color: var(--sobre-club);
  font-size: var(--t-m); font-weight: 900; line-height: 1.3; }
.ab-remate span { display: block; font-size: var(--t-xs); font-weight: 700;
                  opacity: .72; margin-top: 3px; }


/* ---------------------------------------------------------------------
   PASOS PARA INSTALAR, CON EL BOTON DIBUJADO
   ---------------------------------------------------------------------
   Decirle a alguien "el cuadrado con una flecha hacia arriba" le obliga
   a traducir palabras a dibujo, y ahi es donde se pierde quien no se
   maneja con el movil. Ensenandole el icono lo reconoce de un vistazo.
   --------------------------------------------------------------------- */
.pasos-ico { display: flex; flex-direction: column; gap: var(--s3); }
.pi {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-m);
  background: var(--superficie2); }
.pi-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--club); color: var(--sobre-club);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 900; }
.pi-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  color: var(--texto); }
.pi-txt { flex: 1; font-size: var(--t-s); line-height: 1.45; }
.pi-txt small { display: block; color: var(--dim); font-size: var(--t-xs);
                margin-top: 2px; }