/* ==========================================================================
   El Camino DT — las páginas de clubes (las que lee Google)
   --------------------------------------------------------------------------
   Las escribe `herramientas/paginas-clubes.mjs`. Son las únicas páginas del
   sitio que un desconocido puede abrir sin partida guardada, así que son la
   primera impresión del juego para el que llega del buscador — y por eso usan
   los tokens del sistema y no una paleta propia: quien entre acá y después
   apriete «Dirigir» tiene que reconocer el mismo juego.

   NO HEREDAN `camino.css`. Esa hoja da por hecho el chrome del juego —la barra
   de dos pisos, la acción principal fija, el alto de fila— y acá no hay nada de
   eso: es un documento largo que se lee de arriba abajo, no una pantalla densa
   que se escanea. Lo único compartido son `tokens.css` y `fonts.css`.

   EL ANCHO ES DE LECTURA Y LA GRILLA ES FLUIDA, y las dos cosas son a
   propósito. El texto se corta en 68ch porque un renglón de sesenta caracteres
   se lee y uno de ciento sesenta se saltea; la grilla de clubes usa
   `auto-fill` con un mínimo de 132px porque el peor caso —Italia, cien
   clubes— tiene que seguir siendo una cuadrícula en un teléfono y no una
   columna de cien filas.
   ========================================================================== */

.pagina-clubes {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  /* El zoom del sitio: `--escala-sitio` la fija el juego y estas páginas la
     respetan, así que quien lo tenga en 110 % no encuentra acá una isla en
     100 %. Ver [[zoom-y-el-alto-de-la-ventana]]. */
  zoom: var(--escala-sitio, 1);
}

.pagina-clubes a { color: var(--accent-texto, var(--accent)); }
.pagina-clubes a:hover { color: var(--accent-strong, var(--accent)); }

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
/* LA CABECERA MIDE LO MISMO QUE EL CUERPO Y EL TEXTO SE CORTA ADENTRO. Medía
   68ch y se centraba sola, así que a 1280 la miga arrancaba en el píxel 172
   mientras «Serie A» arrancaba en el 28: dos bordes izquierdos distintos en la
   misma página, que es de esas cosas que no se saben nombrar y se ven. El
   ancho de lectura no se perdió —se lo mudé a los hijos de texto, que son los
   que lo necesitan—; una rejilla de escudos no tiene por qué medir 68ch. */
.cl-cabecera {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
}

.cl-cabecera > * { max-width: 68ch; }

.cl-miga {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}

.cl-titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.cl-bajada {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.cl-bajada strong { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   EL BOTÓN DE ENTRAR
   --------------------------------------------------------------------------
   Es la única acción de la página y lleva al selector. Alto mínimo 44px: es la
   medida del dedo, y estas páginas se abren en el teléfono tanto como en la
   compu. Ver [[con-el-dedo-no-se-arrastra]].
   -------------------------------------------------------------------------- */
.cl-jugar { margin: var(--sp-5) 0 0; }

/* SE ESCRIBE CON EL PADRE DELANTE Y NO ES ADORNO DE ESPECIFICIDAD. La regla
   general de arriba —`.pagina-clubes a`— pesa (0,1,1) y `.cl-boton` sola pesa
   (0,1,0), así que le ganaba y le pintaba el texto del color de los enlaces:
   violeta claro sobre violeta, contraste MEDIDO 2,04 contra el 4,5 que hay que
   dar. No se veía roto —se veía apagado—, que es justo como se ve una regla
   tapada. Ver [[reglas-dobles]] y [[barrido-de-contraste]]. */
.pagina-clubes .cl-boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.pagina-clubes .cl-boton:hover { background: var(--accent-strong); color: var(--text-on-accent); }
.pagina-clubes .cl-boton:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   CUERPO Y DIVISIONES
   -------------------------------------------------------------------------- */
.cl-cuerpo {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-5);
}

.cl-division { margin: 0 0 var(--sp-7); }

.cl-division__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.cl-division__n {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   LA GRILLA DE CLUBES
   --------------------------------------------------------------------------
   `auto-fill` y no `auto-fit`: con `auto-fit`, una división de tres clubes
   estira las tres tarjetas a un tercio de pantalla cada una y quedan enormes
   al lado de las de la división de al lado. `auto-fill` las deja del tamaño de
   siempre y llena con huecos, que es lo que se quiere cuando la misma página
   tiene una división de 3 y otra de 100.
   -------------------------------------------------------------------------- */
.cl-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-club {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  overflow: hidden;
}

/* La franja de los dos colores del club, arriba de la tarjeta. Es lo único que
   distingue de un vistazo a un club de otro cuando el escudo no llega. */
.cl-club::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--uno) 0 50%, var(--dos) 50% 100%);
}

.cl-club__escudo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.cl-club__nombre {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--text-primary);
  /* Dos renglones y después puntos suspensivos: «Borussia Mönchengladbach» no
     puede estirar la fila entera de la grilla. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cl-club__plantel {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}
.cl-club__plantel::after { content: ' jugadores'; }

/* --------------------------------------------------------------------------
   EL ÍNDICE: LOS PAÍSES POR CONFEDERACIÓN
   -------------------------------------------------------------------------- */
.cl-conf { margin: 0 0 var(--sp-7); }

.cl-conf h2 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.cl-paises {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-paises a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease);
}
.cl-paises a:hover { background: var(--bg-hover); color: var(--text-primary); }

.cl-paises__nombre { font-weight: 500; }
.cl-paises__n {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   EL PIE Y EL ENLAZADO INTERNO
   --------------------------------------------------------------------------
   La lista de los otros países no es decoración: es lo que hace que un
   rastreador que entra por una página salga con las sesenta. Va chica y
   apagada porque es para el que busca, no para el que ya está leyendo.
   -------------------------------------------------------------------------- */
.cl-pie {
  max-width: 1100px;
  margin: var(--sp-7) auto 0;
  padding: var(--sp-5);
  border-top: 1px solid var(--line);
}

.cl-otros h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.cl-otros ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.cl-pie__marca {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   EL TELÉFONO
   --------------------------------------------------------------------------
   Un solo quiebre, y no dos: entre 480 y 768 no pasa nada que necesite una
   regla propia —la grilla ya es fluida— y una media query de más es una franja
   más donde algo se puede desalinear sin que nadie la mire.
   Ver [[medir-en-la-ventana-chica]].
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .cl-cabecera { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .cl-cuerpo, .cl-pie { padding: var(--sp-4); }
  .cl-titulo { font-size: var(--fs-2xl); }
  .cl-bajada { font-size: var(--fs-md); }
  .cl-grilla { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .cl-club__escudo { width: 36px; height: 36px; }
}

/* ACÁ HABÍA UNA REGLA QUE BORRABA « jugadores» EN EL TELÉFONO, y estaba de
   más. La escribí suponiendo que no entraba en una tarjeta de 104px y suponí
   mal: medido a 375px, la etiqueta más ancha mide 97,4px dentro de una tarjeta
   de 115,3px, cero desbordes y sin barra horizontal. Lo que dejaba era un «36»
   pelado debajo de un escudo, que no se entiende solo — el número sin la
   palabra puede ser cualquier cosa. Queda escrito para que nadie la vuelva a
   poner por las dudas: la vara es medir la etiqueta, no imaginarla. */