/* ══════════════════════════════════════════════════════════════════
   COP · ELEGIR LIGA ANTES DE ENTRAR AL MODO  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«quiero que agregues un menú previo a entrar al juego Fútbol
   11, en el cual se muestra una página de selección de liga que querés
   jugar. Podés jugar una liga y se van desbloqueando las otras, así que
   tenés que agregar la página de selección de liga previa. Tenés que
   poner esta imagen que te cargo con el estadio y arriba del mismo
   poner la bandera de una liga, y con botón para hacer scroll y pasar a
   la siguiente bandera directamente. Va esa imagen del estadio al
   medio, arriba va la bandera y abajo del estadio va "Jugar (nombre de
   la liga)" con nuestro diseño de botón»*.

   ══ POR QUÉ ES UNA A LA VEZ Y NO UNA GRILLA ═══════════════════════
   ⚠⚠ LA REJILLA DE BALDOSAS DEL FLUJO DE ENTRADA NO SIRVE ACÁ, Y NO ES
   una inconsistencia. Ahí la pregunta es «¿cuál de todas?» y la
   respuesta se compara de un vistazo: nueve baldosas chiquitas. Acá la
   pregunta es «¿entro a ÉSTA?», con un estadio de por medio y ligas
   bloqueadas — es una portada por liga, no una lista. Una liga por
   pantalla es lo que hace que la bloqueada se sienta bloqueada.

   ══ LO QUE ESTA HOJA NO DECIDE ═══════════════════════════════════
   ⚠ NO SABE CUÁLES ESTÁN DESBLOQUEADAS. Eso lo pone la pantalla, que
   es la que puede preguntárselo al servidor. Acá sólo está cómo se ve
   una bloqueada.
   ⚠ NO SABE A QUÉ MODO PERTENECE. Hoy la usa Fútbol 11; el día que
   Carrera o Torneos quieran la misma portada, cambian el destino del
   botón y nada más.

   ══ CÓMO SE USA ══════════════════════════════════════════════════
     <div class="cop-eleg" data-eleg>
       <div class="cop-eleg-cima">
         <button class="cop-eleg-flecha" data-eleg-antes>…</button>
         <div class="cop-eleg-bandera">…</div>
         <button class="cop-eleg-flecha" data-eleg-luego>…</button>
       </div>
       <h2 class="cop-eleg-nombre">…</h2>
       <p class="cop-eleg-dato">…</p>
       <div class="cop-eleg-estadio"><img …></div>
       <div class="cop-eleg-puntos" data-eleg-puntos></div>
       <button class="cop-b cop-b--lg cop-borde" data-eleg-jugar>…</button>
     </div>
   ══════════════════════════════════════════════════════════════════ */

.cop-eleg{
  box-sizing:border-box;
  /* ⚠ `dvh` Y NO `vh`: en el teléfono la barra del navegador aparece y
     desaparece al scrollear, y con `vh` el botón de jugar queda tapado
     justo cuando hay que apretarlo. */
  min-height:100dvh;
  display:flex; flex-direction:column;
  /* ⚠ SIN FONDO PROPIO (16/09/2026): decía `background:var(--bg)` y con
     eso el envoltorio tapaba el fondo fijo de la app. El color plano lo
     pone el `html`; ver la nota larga en `cop-onboarding.css`. */
  color:var(--text, #f4f6fb);
  font-family:var(--texto, 'Inter', system-ui, -apple-system, sans-serif);
  padding:var(--gap-lg, 1rem) var(--aire-contenido, 16px);
  padding-bottom:max(var(--gap-lg, 1rem), env(safe-area-inset-bottom));
  overflow-x:hidden;
}
.cop-eleg[hidden]{display:none}

/* ── EL CUERPO ─────────────────────────────────────────────────────
   ⚠ EL BOTÓN DE JUGAR ESTÁ SIEMPRE EN EL MISMO PÍXEL, igual que en el
   flujo de entrada: el `flex:1` del medio lo empuja al fondo, así que
   pasar de una liga con nombre corto a una con nombre largo no lo
   mueve. Un botón que salta entre pantallas hace fallar el dedo justo
   cuando ya aprendió dónde estaba. */
.cop-eleg-cuerpo{
  flex:1 1 auto;
  /* ⚠⚠ ARRIBA Y NO CENTRADO (Franco, 07/09/2026): *«tenés que poner la
     bandera de liga más arriba»*. Centrado a lo alto, la bandera
     quedaba a 430 px del borde en un teléfono de 844 —la mitad de la
     pantalla vacía antes de que empiece nada—. Arriba, el aire sobra
     abajo, que es donde no molesta.
     ⚠ Y EL ESTADIO SE ESTIRA PARA LLENARLO: `flex:1` en su caja, así el
     hueco que deja el centrado se lo come el escenario y no el vacío. */
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height:0;
  gap:var(--gap-sm, .5rem);
}

/* ── ARRIBA: la bandera entre las dos flechas ──────────────────────
   Franco: *«arriba va la bandera… y con botón para hacer scroll y pasar
   a la siguiente bandera directamente»*.
   ⚠ LAS FLECHAS SON DE LA FAMILIA «NAV», NO BOTONES. El sistema separa
   cinco familias y sólo la primera lleva `.cop-b`: esto es una flecha
   de carrusel, cuadrada y sin texto. Con el cuerpo del botón pesaría
   igual que «Jugar», que es la acción de la pantalla. */
.cop-eleg-cima{
  display:flex; align-items:center; justify-content:center;
  gap:var(--gap-lg, 1rem);
}
/* ⚠⚠ SIN CÍRCULO Y SIN FONDO (Franco, 07/09/2026): *«las flechas sin
   esos círculos alrededor ni otro color de fondo»*. Queda el glifo solo.
   ⚠ EL ÁREA TÁCTIL NO SE ACHICA CON EL DIBUJO: el botón sigue midiendo
   44 px aunque la flecha se vea de 22. Sin eso, sacarle el círculo lo
   convertía en un objetivo de 22 px que el dedo falla. */
.cop-eleg-flecha{
  box-sizing:border-box;
  width:44px; height:44px; flex:0 0 auto;
  border:0; border-radius:0;
  background:none;
  padding:0;
  color:var(--text-dim, #9aa3b5);
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s, transform 120ms cubic-bezier(.2,.8,.2,1);
}
.cop-eleg-flecha[hidden]{display:none}
.cop-eleg-flecha svg{width:22px;height:22px;display:block}
@media (hover:hover) and (pointer:fine){
  .cop-eleg-flecha:hover{ color:var(--text, #f4f6fb) }
}
.cop-eleg-flecha:active{ transform:scale(.92) }
.cop-eleg-flecha:focus{outline:none}
/* ⚠ SIN MARCO, EL FOCO DE TECLADO TIENE QUE DIBUJARSE SOLO: es lo único
   que le dice a quien navega con teclado dónde está parado, y no se
   saca nunca (regla del sistema). */
.cop-eleg-flecha:focus-visible{
  color:rgb(var(--cop-acento-rgb, 12,149,235));
  box-shadow:0 0 0 3px rgba(var(--cop-acento-rgb, 12,149,235), .22);
  border-radius:var(--r-card, 14px);
}
/* ⚠ EN LA PRIMERA Y EN LA ÚLTIMA SE APAGA, NO SE ESCONDE (regla 9). Si
   desapareciera, la bandera se correría de lugar al llegar a la punta y
   la pantalla se leería como si se hubiera roto. */
.cop-eleg-flecha:disabled{ opacity:.25; cursor:default; pointer-events:none }

/* ⚠ LA BANDERA MANDA EL TAMAÑO Y NO AL REVÉS: `--eleg-bandera` es la
   única medida de este bloque, para que el marco, el radio y el candado
   salgan todos de ella. */
.cop-eleg-bandera{
  --eleg-bandera:clamp(84px, 26vw, 116px);
  position:relative;
  width:var(--eleg-bandera);
  aspect-ratio:3/2;
  flex:0 0 auto;
  border-radius:calc(var(--eleg-bandera) / 14);
  overflow:hidden;
  border:1.5px solid rgba(255,255,255,.22);
  background:var(--bg, #0b0e14);
  display:grid; place-items:center;
}
.cop-eleg-bandera img{ width:100%; height:100%; object-fit:cover; display:block }
/* la General (y la Final): el logo de CP, sin recuadro (07/10/2026) */
.cop-eleg-bandera--cp{ border-color:transparent; background:none; overflow:visible }
.cop-eleg-bandera--cp img.cop-eleg-cp{ object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)) }
/* el globo, para una competencia sin país (Champions, por ejemplo) */
.cop-eleg-bandera .cop-eleg-mundo{ font-size:calc(var(--eleg-bandera) / 2.6); line-height:1 }

/* ── EL NOMBRE Y EL DATO ───────────────────────────────────────────
   ⚠ EL NOMBRE ESTÁ AUNQUE EL BOTÓN DE ABAJO YA LO DIGA. Una bandera
   sola no nombra una liga —la de Inglaterra puede ser la Premier o la
   Championship— y leer cuál es en el botón obliga a mirar al otro
   extremo de la pantalla. */
.cop-eleg-nombre{
  margin:0;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  font-size:clamp(1.25rem, 5.6vw, var(--fs-2xl, 1.5rem));
  line-height:var(--lh-tight, 1.1);
  text-transform:uppercase;
  letter-spacing:.01em;
  text-align:center;
  color:var(--text, #f4f6fb);
}
.cop-eleg-dato{
  margin:0 auto;
  max-width:32ch;
  font-size:var(--fs-sm, .8rem);
  font-weight:700;
  line-height:var(--lh-base, 1.3);
  text-align:center;
  color:var(--text-dim, #9aa3b5);
}
/* cuando la liga está bloqueada, el dato dice cómo se abre */
.cop-eleg[data-eleg-abierta="no"] .cop-eleg-dato{ color:var(--gold, #ffc233) }

/* ── EL MEDIO: el estadio ──────────────────────────────────────────
   ⚠⚠ NINGÚN MARCO Y NINGÚN FONDO (regla 1). El estadio ya viene
   recortado sobre transparente: apoyado directo sobre el fondo de la
   página se lee como si estuviera ahí. Metido en una caja se convierte
   en «una foto de un estadio».
   ⚠ EL ALTO LO PONE LA PROPORCIÓN DE LA IMAGEN, no un número: así el
   estadio nunca se estira, y en una pantalla baja se achica solo con el
   `max-height` en vez de empujar el botón fuera de la vista. */
.cop-eleg-estadio{
  display:flex; align-items:center; justify-content:center;
  margin-top:var(--gap-sm, .5rem);
  /* ⚠ SE COME EL AIRE QUE DEJÓ EL CONTENIDO ARRIBA: con el cuerpo
     alineado arriba, sin este `flex:1` el estadio quedaba pegado al
     texto y el hueco caía entre él y los botones. */
  flex:1 1 auto;
  min-height:0;
  /* ⚠⚠ EL ESTADIO YA NO SE SALE DE LOS MÁRGENES (Franco, 08/09/2026:
     *«tenés que hacerlos apenas más chicos para que no estén tan cerca
     de los bordes, tenés que hacer que entren en los márgenes de la
     app»*).

     Acá había un `margin-inline:calc(-1 * var(--aire-contenido))` que lo
     estiraba a ancho completo a propósito, con esta nota: *«encerrado en
     la columna de contenido se ve como una figurita en el medio de una
     pantalla vacía»*. Esa razón era buena y ya no aplica: cuando se
     escribió, el estadio era gris y competía con una pantalla vacía;
     ahora es de color y tiene banderas, nombre y botones alrededor.
     Pegado a los bordes, es la ÚNICA pieza de la app que no respeta el
     aire lateral — y eso se ve incluso sin saber por qué.

     ⚠⚠ SE BORRA EL MARGEN NEGATIVO Y NADA MÁS: el estadio queda al MISMO
     margen que el nombre, la bajada y el botón. Es lo que pidió Franco
     —«que entren en los márgenes de la app»— y además es lo único que se
     puede sostener: cualquier número propio acá sería un margen más que
     mantener, y el próximo cambio del aire lateral lo dejaría desalineado
     sin que nadie se entere.
     ⚠ LA PRIMERA PASADA LE PUSO UN 92 % Y UN `padding-inline` PROPIOS, y
     el estadio terminó a 38 px del borde contra los 16 de todo lo demás:
     no era «entrar en los márgenes», era inventarse otro. Se ve en la
     captura al lado del botón. */
}
.cop-eleg-estadio img{
  /* ⚠ EL `max-width` ES PARA EL ESCRITORIO: sin él, en 1280 el estadio se
     estira hasta el ancho de la columna y se ve desproporcionado contra
     el botón. En el teléfono no llega nunca a ese techo. */
  width:100%; max-width:560px; height:auto;
  /* ⚠ EL TECHO ES EN `dvh` PARA QUE EL BOTÓN NUNCA SE VAYA DE LA
     PANTALLA: en un teléfono bajo, un alto fijo empujaría «Jugar» abajo
     del borde. Con `dvh` el estadio se achica solo y el botón se queda. */
  max-height:min(42dvh, 340px);
  object-fit:contain;
  display:block;
  transition:filter .25s, opacity .25s;
}
/* ⚠ LA LIGA BLOQUEADA APAGA EL ESTADIO, no lo esconde: hay que ver que
   existe. Es lo mismo que hace el riel con la bandera en gris. */
.cop-eleg[data-eleg-abierta="no"] .cop-eleg-estadio img{
  filter:grayscale(1) brightness(.55);
  opacity:.85;
}
.cop-eleg[data-eleg-abierta="no"] .cop-eleg-bandera img{
  filter:grayscale(1) brightness(.75);
}

/* el candado, encima de la bandera de una liga cerrada */
.cop-eleg-candado{
  position:absolute; inset:0;
  display:none; place-items:center;
  background:rgba(6,8,12,.55);
  color:var(--gold, #ffc233);
}
.cop-eleg-candado svg{ width:40%; height:40%; display:block }
.cop-eleg[data-eleg-abierta="no"] .cop-eleg-candado{ display:grid }

/* ── LOS PUNTOS ────────────────────────────────────────────────────
   ⚠ PUNTOS Y NO BARRAS, al revés que en el flujo de entrada. Ahí la
   pregunta es «¿cuánto falta?» y la barra que se llena la contesta;
   acá no hay orden ni final —se da vueltas entre ligas— y lo único que
   hay que decir es «hay más y estás en ésta». */
.cop-eleg-puntos{
  display:flex; justify-content:center; gap:var(--gap-xs, .3rem);
  margin-top:var(--gap-md, .7rem);
}
.cop-eleg-puntos[hidden]{display:none}
.cop-eleg-puntos i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .25s, transform .25s;
}
.cop-eleg-puntos i.aca{
  background:rgb(var(--cop-acento-rgb, 12,149,235));
  transform:scale(1.25);
}
/* ⚠ LA CERRADA SE MARCA TAMBIÉN EN LOS PUNTOS: sin esto, deslizar por
   seis ligas para descubrir cuáles están abiertas obliga a pasar por
   todas. Con el punto hueco se ve de una. */
.cop-eleg-puntos i.cerrada{
  background:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
}

/* ── ABAJO: jugar ──────────────────────────────────────────────────
   ⚠ `.cop-b--lg` YA ES `width:100%`: no hace falta estirarlo. Y es la
   talla que el sistema define para «la acción principal de la
   pantalla», que es exactamente lo que es. */
.cop-eleg-pie{
  margin-top:var(--gap-xl, 1.2rem);
  display:flex; flex-direction:column; gap:var(--gap-md, .7rem);
}
.cop-eleg-pie[hidden]{display:none}

/* ── EL CAMBIO DE LIGA ─────────────────────────────────────────────
   ⚠ CORTO Y SIN DESLIZAMIENTO DE PANTALLA COMPLETA. Un carrusel que
   arrastra el estadio entero se siente lindo la primera vez y lento a
   partir de la tercera, y acá se pasan seis ligas seguidas buscando la
   que se quiere. Se respeta `prefers-reduced-motion`. */
@media (prefers-reduced-motion: no-preference){
  .cop-eleg-cuerpo.cambia .cop-eleg-bandera,
  .cop-eleg-cuerpo.cambia .cop-eleg-nombre,
  .cop-eleg-cuerpo.cambia .cop-eleg-dato,
  .cop-eleg-cuerpo.cambia .cop-eleg-estadio{
    animation:cop-eleg-entra 240ms cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes cop-eleg-entra{
  from{ opacity:0; transform:translateY(6px) }
  to  { opacity:1; transform:none }
}

/* ── PANTALLA GRANDE ───────────────────────────────────────────────
   ⚠ NO SE ESTIRA: en escritorio queda una columna centrada. Un estadio
   de 1500 px de ancho con una bandera de 116 arriba es una pantalla
   vacía con una figura en el medio. */
@media (min-width:761px){
  .cop-eleg{ max-width:var(--cop-lectura, 560px); margin-inline:auto }
}

/* ══════════════════════════════════════════════════════════════════
   LOS DOS ACCESOS DE LA LIGA  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«abajo tenés que poner “Ver Equipos” y poner un menú
   expandible desde abajo que abre un panel con los equipos de esa liga,
   con los recuadros como los de la página de onboarding. Y al lado de
   ese botón uno igual del mismo tamaño que diga “Mejores Jugadores”»*.

   ⚠⚠ SON SECUNDARIOS Y SE VEN SECUNDARIOS. «Jugar» es la acción de esta
   pantalla; estos dos son para mirar antes de entrar. El sistema ya
   tiene la respuesta y no hace falta inventar nada: `.cop-b--sec` es el
   MISMO cuerpo con el marco apagado. Si los tres botones se vieran
   igual, la pantalla dejaría de decir cuál es el camino.
   ⚠ LOS DOS DEL MISMO TAMAÑO, como pidió Franco: una grilla de dos
   columnas iguales, no dos botones que miden lo que mide su texto.
   ══════════════════════════════════════════════════════════════════ */
.cop-eleg-accesos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--gap-md, .7rem);
}
.cop-eleg-accesos[hidden]{display:none}
/* ⚠ `.cop-b` NO ES `width:100%` en su talla normal —sólo la grande lo
   es— así que adentro de la grilla hay que estirarlo. Y el texto no se
   recorta: «Mejores Jugadores» entra en dos líneas antes que en «…». */
.cop-eleg-accesos .cop-b{
  width:100%;
  white-space:normal;
  line-height:1.15;
  padding-inline:.7rem;
}

/* ── LO QUE VA ADENTRO DE LAS DOS HOJAS ────────────────────────────
   ⚠ EL MARCO ES `cop-ui-hoja.css`, la misma hoja de «Tus mercados», de
   los accesos y de la ficha del modo. Acá va sólo el contenido. */

/* la rejilla de equipos: las MISMAS baldosas del flujo de entrada */
.cop-eleg-equipos{ margin-top:.2rem }

/* ⚠⚠ LA TABLA DE MEJORES JUGADORES YA NO SE DIBUJA ACÁ (07/09/2026).
   Eran las reglas de `.cop-eleg-tabla` y sus cinco piezas. Franco pidió
   la MISMA tabla en la pantalla de Carrera —«de la misma forma que se
   muestran en Fútbol 11 con Mejores Jugadores»— y con la segunda
   pantalla dejó de ser algo de esta hoja: se mudó a
   `cop-ranking-carrera.css`, que es de quien era. Acá quedan sólo las
   dos líneas que sí son de esta pantalla: la nota y el hueco vacío de
   la hoja de equipos. */

/* la aclaración de una hoja: de dónde salen esos números */
.cop-eleg-nota{
  margin:var(--gap-md, .7rem) 0 0;
  font-size:var(--fs-xs, .72rem); font-weight:600;
  line-height:var(--lh-loose, 1.5);
  color:var(--text-faint, #5a6275);
}
.cop-eleg-vacio{
  margin:0; padding:var(--gap-lg, 1rem) 0;
  text-align:center;
  font-size:var(--fs-sm, .8rem); font-weight:600;
  line-height:var(--lh-loose, 1.5);
  color:var(--text-dim, #9aa3b5);
}