/* ══════════════════════════════════════════════════════════════════
   COP · EL RIEL DE LIGAS — UN SOLO ARCHIVO (27/08/2026)

   Franco: *«necesito que en la página de once ideal cambies el carrusel
   de arriba donde están las ligas… un carrusel de recuadros (botones)
   definidos que seleccionan la liga de los cuales mostrar los partidos.
   Están todas las tarjetas "apagadas" sin su diseño de color y cuando se
   selecciona se prende con su color específico. Las apagadas tienen que
   tener el color del fondo de la app adentro del recuadro, y la forma de
   su bandera sin color, en tonos de gris como si estuviera bloqueada…
   cuando se seleccione, el mismo fondo que las tarjetas de modos de
   juego de la página de inicio, pero con la bandera del país en lugar
   del escudo»*. Y: *«tanto en la página de once ideal como en la del
   menú de selección de partidos de la competencia modo carrera, que
   tiene el mismo carrusel»*.

   ⚠⚠ POR QUÉ ESTE ARCHIVO EXISTE. El riel estaba escrito DOS VECES —una
   en `futbol11.html` y otra en `carrera-partidos.html`, con su CSS y su
   `pintarTiras()` cada una—. El comentario de `carrera-partidos` ya lo
   decía: *«cuando haya un tercer lugar que la necesite, va a un archivo
   compartido y se acabó la copia»*. El rediseño era ese momento: el
   cambio de Franco tocaba las dos, y hacerlo dos veces habría dejado dos
   rieles que se parecen hasta que uno de los dos se toque.

   ⚠ UNA URL POR ARCHIVO. Los siete fondos se declaran acá con su sello y
   en ningún otro lado. El JS del componente sólo dice QUÉ fondo le toca
   a cada liga (`data-fondo`), nunca de dónde sale el archivo.
   ══════════════════════════════════════════════════════════════════ */

/* ── el riel ────────────────────────────────────────────────────────
   ⚠ TRES POR PANTALLA Y LA CUARTA ASOMANDO, como el carrusel de Modos
   de Juego de la portada: el pedacito que se ve es lo que dice que hay
   más para deslizar. Sin él, el riel parece que termina en la tercera. */
.cop-riel{
  --riel-hueco:.55rem;
  --riel-asoma:22px;
  display:flex;
  gap:var(--riel-hueco);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-left:1rem;
  padding:var(--gap-lg, 1rem) 1rem .5rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cop-riel::-webkit-scrollbar{display:none}

/* ── la tarjeta ─────────────────────────────────────────────────────
   ⚠ `min-height:0` VA CON EL `aspect-ratio`: cualquier piso de altura
   heredado le gana y deja la tarjeta más alta que ancha. */
.cop-liga{
  /* ⚠ `relative` para el candado de una liga bloqueada (18/09/2026),
     que va `absolute` encima de la bandera. Sin esto se posicionaría
     contra la pantalla y las seis tarjetas tendrían su candado en el
     mismo lugar. */
  position:relative;
  flex:0 0 calc((100% - 2 * var(--riel-hueco) - var(--riel-asoma)) / 3);
  scroll-snap-align:start;
  /* ⚠⚠ EL ALTO ES CUADRADO SALVO QUE LA PANTALLA DIGA OTRA COSA
     (21/09/2026). `aspect-ratio` ata el alto al ancho, y el ancho
     depende del teléfono: en Fútbol 11 la baldosa tiene que medir lo
     mismo que el recuadro de cabecera de Champions Clash en CUALQUIER
     pantalla, y eso es un alto fijo, no una proporción. La pantalla que
     lo necesita escribe `--riel-alto` y las demás no se enteran. */
  aspect-ratio:1/1;
  /* ⚠ EL ALTO EXPLÍCITO LE GANA A LA PROPORCIÓN y no la borra: la
     baldosa sigue siendo cuadrada donde nadie escriba `--riel-alto`. Y
     como el ANCHO lo fija el `flex` de arriba, la proporción no puede
     pelearle al alto: manda el alto, que es lo que se quiere. */
  height:var(--riel-alto, auto);
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.28rem;
  padding:var(--gap-sm, .5rem) var(--gap-xs, .3rem);
  border-radius:var(--r-card, 14px);
  /* apagada: el fondo de la app adentro del recuadro */
  background-color:var(--bg, #0b0e14);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  border:1.5px solid var(--card-border,#1e2330);
  color:rgba(255,255,255,.6);
  cursor:pointer;
  font-family:inherit;
  overflow:hidden;
  /* ⚠⚠ NO SE MUEVE NUNCA (Franco, 27/08/2026): *«esos recuadros de
     selección de liga en el carrusel no tienen que tener hover ni moverse
     de su posición para arriba cuando se los toca o scrollea, tienen que
     quedar siempre fijos en altura»*. En un teléfono no hay puntero: el
     navegador dispara el `:hover` al APOYAR el dedo para deslizar, así que
     el riel entero saltaba mientras se scrolleaba. Se va el `:hover` y se
     va `transform` de la transición: lo único que cambia al elegir es el
     color, que es lo que tiene que cambiar. */
  transition:border-color .2s, color .2s;
}

/* ── la bandera ─────────────────────────────────────────────────────
   ⚠ APAGADA = GRIS, NO ESCONDIDA. Franco: *«la forma de su bandera sin
   color, en los tonos de gris como si estuviera bloqueada»*. La forma
   se tiene que seguir reconociendo, así que baja el color y el brillo
   pero nunca la opacidad al punto de borrarla. */
.cop-liga .rl-bandera{
  width:58%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:5px;
  display:block;
  flex:0 0 auto;
  filter:grayscale(1) contrast(.9) brightness(.8);
  opacity:.8;
  transition:filter .25s, opacity .25s;
}
.cop-liga .rl-cp{ width:54%; aspect-ratio:3/2; object-fit:contain; display:block; flex:0 0 auto;
  filter:grayscale(1) brightness(.85); opacity:.85; transition:filter .25s, opacity .25s }
.cop-liga.on .rl-cp, .cop-rejilla--on .cop-liga .rl-cp{ filter:none; opacity:1 }
.cop-liga .rl-mundo{
  width:58%;
  aspect-ratio:3/2;
  display:grid;
  place-items:center;
  font-size:var(--fs-xl, 1.3rem);
  filter:grayscale(1);
  opacity:.8;
  transition:filter .25s, opacity .25s;
}

/* cuántos partidos tiene la liga hoy · sólo si la pantalla lo pasa */
.cop-liga .rl-cuenta{
  font:700 .64rem Inter,sans-serif;
  line-height:1;
  color:rgba(255,255,255,.5);
  transition:color .2s;
}

/* ── el nombre ──────────────────────────────────────────────────────
   ⚠ EL AIRE DE LA TILDE. Con `line-height` menor que 1 y `overflow:hidden`
   —que está para el «…»— el acento se corta: «LIGA ARGENTINA» no lo
   necesita, pero «BRASILEIRÃO» sí. Se agrega adentro y se descuenta por
   fuera, como en el resto de la app. */
.cop-liga .rl-nombre{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.3px;
  line-height:.95;
  text-transform:uppercase;
  text-align:center;
  color:inherit;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-top:.25em;
  margin-top:-.25em;
  transition:color .2s;
}

/* ── encendida ──────────────────────────────────────────────────────
   Franco: *«acordate que solamente se ve iluminada y con ese fondo los
   recuadros que están seleccionados»*. */
.cop-liga.on{
  background-image:var(--rl-fondo);
  border-color:rgba(255,255,255,.85);
  color:#fff;
}
.cop-liga.on .rl-bandera,
.cop-liga.on .rl-mundo{filter:none;opacity:1}
.cop-liga.on .rl-cuenta{color:rgba(255,255,255,.92)}

/* ── la tabla de los siete fondos ───────────────────────────────────
   ⚠ SON LOS MISMOS QUE LAS TARJETAS DE MODOS DE JUEGO DE LA PORTADA:
   fondo oscuro con la trama de hexágonos y el resplandor del color
   subiendo desde abajo. El JS elige cuál le toca a cada liga; el
   archivo y su sello se escriben una sola vez, acá. */
.cop-liga[data-fondo="violeta"] {--rl-fondo:url('fondo-recuadro-violeta.webp?v=268')}
.cop-liga[data-fondo="celeste"] {--rl-fondo:url('fondo-recuadro-celeste.webp?v=268')}
.cop-liga[data-fondo="azul"]    {--rl-fondo:url('fondo-recuadro-azul.webp?v=268')}
.cop-liga[data-fondo="rojo"]    {--rl-fondo:url('fondo-recuadro-rojo.webp?v=268')}
.cop-liga[data-fondo="verde"]   {--rl-fondo:url('fondo-recuadro-verde.webp?v=268')}
.cop-liga[data-fondo="dorado"]  {--rl-fondo:url('fondo-recuadro-dorado.webp?v=268')}
.cop-liga[data-fondo="plateado"]{--rl-fondo:url('fondo-recuadro-plateado.webp?v=268')}

/* ══════════════════════════════════════════════════════════════════
   LA REJILLA: LA MISMA BALDOSA, EN VARIAS FILAS  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   ⚠⚠ NO SIEMPRE ES UN CARRUSEL, Y AHORA SON TRES LUGARES. El riel se
   desliza cuando la liga es un FILTRO de lo que ya está en pantalla
   (once ideal, partidos de Carrera). Cuando la liga es una ELECCIÓN
   —el menú de «Elegir liga» de Carrera, el paso del flujo de entrada,
   el equipo del perfil— la lista tiene que verse ENTERA: nadie elige
   entre siete cosas de las que ve tres.

   Esto vivía escrito en el `<style>` de `carrera.html` con el ancho de
   la baldosa calculado a mano. Al aparecer el segundo y el tercer uso
   se muda acá, que es la regla: la baldosa ya era del componente y le
   faltaba su otra manera de acomodarse.

   ⚠⚠ ES `flex-wrap` Y NO `grid`, Y ES A PROPÓSITO. Con siete ligas en
   tres columnas la última fila tiene UNA baldosa: en una grilla queda
   pegada a la izquierda —se lee como que la lista se cortó— y con
   `flex-wrap` + `justify-content:center` queda centrada, que es como se
   ve hoy en Carrera. Ése es el único motivo; el día que las filas
   siempre estén completas, `grid` es más corto.

   ⚠ EL ANCHO SALE DE DOS PERILLAS Y NO DE UN `calc` A MANO. En Carrera
   estaba escrito `(100% - 1.4rem) / 3`, que es «tres columnas» y «hueco
   de .7rem» sumados en un solo número: cambiar el hueco dejaba el ancho
   mintiendo, sin avisar. Acá el hueco y las columnas son dos variables
   y el ancho se deduce de las dos.

   USO:
     <div class="cop-rejilla">…</div>                 tres por fila
     <div class="cop-rejilla cop-rejilla--2">…</div>  dos, más grandes
   ══════════════════════════════════════════════════════════════════ */
.cop-rejilla{
  --rejilla-cols:3;
  --rejilla-hueco:var(--gap-md, .7rem);
  box-sizing:border-box;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--rejilla-hueco);
  width:100%;
}
.cop-rejilla[hidden]{display:none}
/* ⚠ LA BALDOSA PIERDE EL `flex` DEL RIEL: el del riel le descuenta lo
   que asoma la cuarta tarjeta, y eso sólo tiene sentido cuando hay algo
   más para deslizar. Acá no asoma nada. */
.cop-rejilla > .cop-liga{
  flex:0 0 calc(
    (100% - (var(--rejilla-cols) - 1) * var(--rejilla-hueco))
    / var(--rejilla-cols));
  scroll-snap-align:none;
}

.cop-rejilla--2{ --rejilla-cols:2 }
.cop-rejilla--4{ --rejilla-cols:4 }

/* ⚠ LA CAMISETA NO ES UNA BANDERA. Franco, 07/09/2026: *«eligiendo las
   camisetas presentadas como se ven las ligas en el screen»*. Es la
   MISMA baldosa —caja, nombre, el fondo de color al elegir— con otra
   cosa adentro; lo único que cambia es la proporción, porque una
   bandera es 3:2 y una camiseta es cuadrada. Y no se apaga en gris: una
   camiseta sin su color no se reconoce, así que baja el brillo. */
.cop-liga .rl-camiseta{
  width:66%;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  filter:saturate(.55) brightness(.72);
  opacity:.9;
  transition:filter .25s, opacity .25s;
}
.cop-liga.on .rl-camiseta{ filter:none; opacity:1 }

/* ══ TODAS ENCENDIDAS — UNA VITRINA, NO UN SELECTOR ═══════════════════
   Franco, 10/09/2026: *«cuando oprimo el botón de ver equipos de una
   liga, tenés que mostrar las tarjetas de los equipos pero sin dar esa
   sensación de apagado, tienen que estar full visibles y en color como
   si estuvieran "prendidas"»*.

   ⚠⚠ Y NO SE ARREGLA MARCÁNDOLAS `.on`. `.on` significa ELEGIDA —lo dice
   la regla de arriba y lo dice `aria-pressed`—; encenderlas todas con esa
   clase le diría a un lector de pantalla que hay veinte equipos
   seleccionados a la vez. Acá no se elige nada: se mira. Por eso el
   estado encendido lo pone el CONTENEDOR y no cada baldosa.

   ⚠ EL APAGADO EXISTE POR UNA RAZÓN Y SIGUE VALIENDO en el riel de
   ligas, donde sí se elige una: ahí la diferencia entre la elegida y las
   otras es toda la información que da la fila. Lo que estaba mal era
   usar el mismo apagado en una lista donde no hay nada que elegir. */
.cop-rejilla--on .cop-liga{
  background-image:var(--rl-fondo);
  border-color:rgba(255,255,255,.85);
  color:#fff;
  cursor:default;
}
.cop-rejilla--on .cop-liga .rl-bandera,
.cop-rejilla--on .cop-liga .rl-mundo,
.cop-rejilla--on .cop-liga .rl-camiseta{ filter:none; opacity:1 }
.cop-rejilla--on .cop-liga .rl-cuenta{ color:rgba(255,255,255,.92) }
/* ⚠ SIN HUNDIDO AL APRETAR: la baldosa no lleva a ningún lado, y un
   `:active` que promete un salto que no existe es la regla 9 al revés. */
.cop-rejilla--on .cop-liga:active{ transform:none }

/* ── EL CANDADO DE UNA LIGA BLOQUEADA (Franco, 18/09/2026) ──────────
   *«las ligas bloqueadas muestran un escudo con candado y el “Jugar
   ahora” bloqueado»*.
   ⚠ LA TARJETA SE APAGA, NO SE ESCONDE (regla 9 del sistema): el
   jugador tiene que ver qué hay para desbloquear — es lo que hace que
   el pase se entienda. Por eso `opacity` y no `display:none`.
   ⚠ EL CANDADO VA ENCIMA DE LA BANDERA, centrado: así se lee «esta
   liga» y «está cerrada» en un solo golpe de vista, sin robarle lugar
   al nombre.
   ⚠ Y NO LLEVA FONDO PROPIO: el contraste lo da la sombra. Un disco
   oscuro detrás sería una caja más en una pantalla que el sistema
   quiere sin cajas. */
.cop-liga.bloqueada{ opacity:.55 }
.cop-liga.bloqueada .rl-bandera,
.cop-liga.bloqueada .rl-mundo{ filter:grayscale(1) }
.rl-candado{
  position:absolute; left:50%; top:38%; translate:-50% -50%;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  color:#fff; pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
}
.rl-candado svg{ width:26px; height:26px; display:block }
.rl-precio{
  font-family:'Inter',sans-serif; font-size:.62rem; font-weight:800;
  letter-spacing:.02em; color:var(--gold, #ffc233);
  white-space:nowrap;
}

/* ── EL ÍCONO DE LA BALDOSA (19/09/2026) ────────────────────────────
   ⚠ Ocupa el mismo hueco que la bandera y la camiseta, así que las tres
   variantes de baldosa miden igual y un riel de montos se alinea con un
   riel de ligas. Si midiera distinto, pasar de Fútbol 11 a Doble o Nada
   se sentiría como cambiar de app.
   ⚠ SE APAGA CON LA BALDOSA: hereda el mismo tratamiento en gris que la
   bandera cuando la tarjeta no está elegida, sin una regla propia. */
.cop-liga .rl-ico{
  display:grid; place-items:center;
  width:44%; aspect-ratio:1/1; flex:0 0 auto;
  /* ⚠ SE APAGA COMO LA CAMISETA Y NO COMO LA BANDERA: la moneda es un
     objeto con color propio, y en gris puro deja de reconocerse. Mismo
     tratamiento, mismos valores — copiar otros habría hecho que un riel
     de montos se apagara distinto de uno de camisetas. */
  filter:saturate(.55) brightness(.72);
  opacity:.9;
  transition:filter .25s, opacity .25s;
}
.cop-liga .rl-ico .cop-ico{ --cop-ico:100%; width:100%; height:100% }
.cop-liga.on .rl-ico{ filter:none; opacity:1 }

/* ── EL PUESTO DE UNA LIGA EN UN RANKING (Franco, 28/09/2026) ────────
   *«ponele número de posición a las ligas más jugadas, así se sabe el
   orden»*. Lo dibuja `COPRiel` sólo si la lista trae `pos`.
   ⚠ EN LA ESQUINA DE ARRIBA A LA IZQUIERDA, NO ENCIMA DE NADA: la
   bandera mide el 58 % del ancho y va centrada, así que la esquina queda
   libre en cualquier ancho de baldosa (medido a 320, 390 y 1280). Tapar
   la bandera o el nombre para decir el orden sería cambiar un dato por
   otro.
   ⚠ ANTON, COMO TODO NÚMERO DE DISPLAY DE LA APP, y blanco con sombra:
   se apoya sobre siete fondos distintos (del violeta al dorado) y sin
   sombra el «1» se perdía sobre el plateado.
   ⚠ SIN CAJA NI DISCO: el número solo, como en un podio. */
.cop-liga .rl-pos{
  position:absolute; top:.3rem; left:.45rem;
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:1.3rem; line-height:1; letter-spacing:0;
  color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 2px 6px rgba(0,0,0,.75);
  pointer-events:none;
}
/* apagada: el número se apaga con la baldosa, no desaparece */
.cop-liga:not(.on) .rl-pos{ color:rgba(255,255,255,.6) }
.cop-rejilla--on .cop-liga .rl-pos{ color:#fff }