/* ══════════════════════════════════════════════════════════════════
   COP · LOS TORNEOS AGRUPADOS POR LIGA  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«la UI de torneos es con carruseles por liga, donde se crean
   las tarjetas de torneos por división: tenemos el título de Liga
   Italiana y abajo del título están estas tarjetas de torneos, pero en
   carrusel de 3 por carrusel, todas en la misma fila, en la que aparece
   Liga Italiana Div 5 y después Liga Italiana Div 8, y así, 3 por liga.
   Entonces tenemos listado de todas las ligas y después cada una tiene
   sus tarjetas»*. Y en el título: *«tiene que decir por ejemplo Liga
   Italiana y a su derecha “Div” con el logo de las 3 divisiones uno al
   lado del otro»*.

   ══ QUÉ DIBUJA Y QUÉ NO ═══════════════════════════════════════════
   ⚠ LA TARJETA NO ES DE ACÁ: es `cop-tarjeta-torneo.css`. Esta hoja
   pone el TÍTULO de la liga, la tira de divisiones y el riel. Si la
   tarjeta cambia, esto no se entera.
   ⚠ LOS ESCUDOS DE DIVISIÓN TAMPOCO: son `.cop-div` de `cop-iconos.css`,
   los mismos de la escalera, el perfil y el ranking. Acá va sólo su
   tamaño en este título.

   ⚠⚠ EL CARRUSEL ES A PROPÓSITO Y ES LA EXCEPCIÓN. El mismo día
   (07/09/2026) Franco sacó el carrusel de la pantalla del sobre —*«todo
   visible, ya que el carrusel no deja todo visible»*— y dejó éste:
   *«las ligas siguen siendo en carrusel, las 3»*. No es contradicción:
   ahí eran 3 cartas verticales que ENTRABAN en la pantalla, y acá son 3
   tarjetas horizontales de ~150 px de alto por liga, con diez ligas
   abajo. Puestas todas a la vista, la pantalla mide cuatro metros y la
   segunda liga no se ve nunca. El carrusel no está para ahorrar lugar
   dentro de una liga: está para que se vean LAS LIGAS.
   ══════════════════════════════════════════════════════════════════ */

.cop-tl{ display:flex; flex-direction:column; gap:var(--gap-2xl, 1.8rem) }
.cop-tl[hidden]{display:none}

.cop-tl-liga{ display:flex; flex-direction:column; gap:var(--gap-md, .7rem) }
.cop-tl-liga[hidden]{display:none}

/* ── EL TÍTULO ─────────────────────────────────────────────────────
   ⚠ SIN CAJA Y SIN FONDO (regla 1): el nombre se apoya sobre el fondo
   de la página, y lo que lo separa de las tarjetas es aire.
   ⚠ EL NOMBRE A LA IZQUIERDA Y LAS DIVISIONES A LA DERECHA, que es como
   lo pidió Franco. Con `space-between` y no con un `margin-left:auto`
   suelto: si mañana el título lleva un tercer elemento, esto sigue
   funcionando. */
.cop-tl-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-md, .7rem);
  min-width:0;
}
.cop-tl-nom{
  margin:0; min-width:0;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  /* ⚠ ES UN TÍTULO DE SECCIÓN, NO DE PANTALLA: techo en `--fs-xl`. */
  font-size:clamp(1rem, 4.2vw, var(--fs-xl, 1.3rem));
  line-height:var(--lh-tight, 1.1);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--text, #f4f6fb);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* (la tira «Div» con los escudos se borró el 24/09/2026: ver cop-torneos-ligas.js) */

/* ── EL RIEL ───────────────────────────────────────────────────────
   ⚠ UNA TARJETA POR PÁGINA CON UN ASOMO DE LA SIGUIENTE: la tarjeta de
   torneo es horizontal y lleva tres columnas de datos adentro; a media
   pantalla no se lee ninguna. El asomo del 8% es lo que dice «hay más»
   sin que haya que descubrirlo.
   ⚠⚠ Y `scroll-padding-inline` IGUAL AL RELLENO: sin él, el enganche
   tira de la primera tarjeta contra el filo de la pantalla apenas se
   dibuja el riel y se ve como un error de margen. Es la misma trampa
   que apareció en la revelación del sobre el mismo día.
   ⚠ EL AIRE LATERAL VIVE EN EL RIEL (margen negativo + relleno) para
   que la primera tarjeta arranque alineada con el resto de la pantalla
   y la última pueda llegar al borde. */
.cop-tl-riel{
  display:flex; flex-wrap:nowrap;
  gap:var(--gap-md, .7rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--aire-contenido, 16px);
  margin-inline:calc(-1 * var(--aire-contenido, 16px));
  padding-inline:var(--aire-contenido, 16px);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cop-tl-riel::-webkit-scrollbar{display:none}
/* ⚠ 100% (Franco, 13/10/2026): «todas deben tener el mismo tamaño» — al 92 %
   las del carrusel quedaban más chicas que las de Historial y Eventos.
   Que hay más lo dicen los puntitos de abajo. */
.cop-tl-riel > .cop-tl-item{
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:start;
}
/* con una sola tarjeta no hay carrusel: ocupa todo y no asoma nada */
.cop-tl-riel.una > .cop-tl-item{ flex-basis:100% }

/* ⚠ EN ESCRITORIO NO HAY ASOMO: hay lugar para la tarjeta entera y el
   recorte se leería como un error de maquetación. */
@media (min-width:761px){
  .cop-tl-riel > .cop-tl-item{ flex-basis:100% }
}

/* ── LOS PUNTOS ────────────────────────────────────────────────────
   ⚠ UNO POR TARJETA, porque acá el riel engancha de a una.
   ⚠ CON UNA SOLA TARJETA NO SE DIBUJAN: un indicador de un punto no
   indica nada. */
.cop-tl-puntos{ display:flex; justify-content:center; gap:var(--gap-xs, .3rem); margin-top:var(--gap-sm, .5rem) }
.cop-tl-puntos[hidden]{display:none}
.cop-tl-puntos i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .25s, transform .25s;
}
.cop-tl-puntos i.aca{
  background:rgb(var(--cop-acento-rgb, 12,149,235));
  transform:scale(1.25);
}

/* ── EL VACÍO ──────────────────────────────────────────────────────
   ⚠ SE DIBUJA Y NO SE ESCONDE (regla 9): una semana sin torneos de tu
   división es información, y es la que explica por qué la pantalla
   tiene menos cosas que la semana pasada. */
.cop-tl-vacio{
  margin:0; padding:var(--gap-xl, 1.2rem) 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);
}

/* ══ 08/10/2026 · BANDERA A LA IZQUIERDA, TORNEOS Y GENTE A LA DERECHA ══ */
.cop-tl-cab{ display:flex; align-items:center; gap:var(--gap-sm, .45rem); }
.cop-tl-band{ flex:none; width:24px; height:17px; border-radius:3px; overflow:hidden; display:grid; place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.cop-tl-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.cop-tl-band--cp{ box-shadow:none; border-radius:0; }
.cop-tl-band--cp img{ object-fit:contain; }
.cop-tl-cab .cop-tl-nom{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cop-tl-cuenta{ flex:none; display:inline-flex; align-items:center; gap:.3rem; font:500 var(--fs-sm, .8rem)/1 Inter, sans-serif;
  color:var(--text-dim, #9aa3b5); white-space:nowrap; }
.cop-tl-cuenta b{ font-weight:700; color:#fff; }
.cop-tl-cuenta > i{ width:1px; height:1em; background:rgba(255,255,255,.22); margin:0 .2rem; }
.cop-tl-cuenta .cop-rel{ width:16px; height:16px; }