/* ==========================================================================
   El Camino DT — El cuadro de la copa
   --------------------------------------------------------------------------
   Cero tokens nuevos. Cinco columnas, una por ronda, y una llave es dos filas
   de club pegadas por un hairline. La forma del torneo se lee de un vistazo
   porque las columnas se van vaciando: dieciséis llaves, ocho, cuatro, dos,
   una. Ese estrechamiento ES el dibujo — no hace falta trazar las líneas del
   cuadro clásico, que a esta densidad serían ruido.
   ========================================================================== */

/* EL MOLDE DE PANTALLA, QUE ESTA HOJA NO TENÍA. Las demás pantallas de alto
   fijo lo declaran —`plantel`, `mercado`, `vestuario`— y acá faltaba, así que
   `main` crecía con su contenido y la página entera scrolleaba. Sin él, todo lo
   que sigue abajo —`flex: 1 1 0`, `min-height: 0`, `overflow: auto`— era letra
   muerta: un `flex` sin contenedor flexible no reparte nada, y por eso el cuadro
   de 2.063 px empujaba el recorrido al píxel 2.382 aunque la hoja dijera lo
   contrario. Medido el 21 de agosto de 2026: `body` daba `display: block` acá y
   `display: flex` en `plantel`.

   `--alto-ventana` y no `100dvh` por lo de siempre: `dvh` no sabe del zoom del
   sitio y se come el 8 % de abajo. */
body {
  display: flex;
  flex-direction: column;
  height: var(--alto-ventana);
  overflow: hidden;
}

.copa {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
  overflow: auto;
}

/* EL TILE MIDE LO QUE MIDE SU RESUMEN, no lo que mida el cuadro.

   Acá había otra intención escrita —«la tarjeta se lleva el alto que sobra y
   scrollea por dentro… lo que no puede pasar es que empuje al recorrido fuera
   de la pantalla»— y no se cumplía: para que `.bracket` scrollee por dentro,
   su padre tiene que ser una columna flexible con alto acotado, y `.tarjeta` es
   un bloque. Con alto automático, un cuadro de 2.161 px empujaba el recorrido
   al píxel 2.382 de una ventana de 800. Medido, no supuesto.

   Se arregló por el otro lado, que además es el del norte: el cuadro se fue a
   su card y lo que queda es el resumen. Sin nada que empujar, el tile no
   necesita ni acotarse ni scrollear. */
/* El resumen mide lo que mide y el cuadro se lleva lo que sobra, scrolleando por
   dentro. Ése era el reparto que esta hoja decía tener y ahora tiene. */
.copa__resumen { flex: 0 0 auto; }
.copa__cuadro { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Y DENTRO, NINGUNO DE LOS DOS SE DEJA APLASTAR. `.tarjeta` es columna
   flexible, así que al acotarle el alto, las ocho tablas de grupo se encogían
   de 373 px a 159 y quedaban cortadas por la mitad — medido en la Libertadores
   a 1280×800. Las tablas miden lo que miden, el árbol se lleva lo que sobra y
   no baja de 260 px, que es lo que necesita una ronda para entrar entera. El
   día que entre los dos no entren, el que rueda es el contenedor. */
.grupos { flex: 0 0 auto; }
.grupos + .bracket { margin-top: var(--sp-5); }

/* Tu recorrido, dentro de la tarjeta de resumen. El aire de arriba lo pone el
   hairline: son dos bloques distintos de una misma tarjeta —qué torneo es, y
   cómo te fue— y sin la línea el segundo se leía como continuación del primero. */
.copa__ruta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* LAS TRES ZONAS SE DOBLAN, y hasta el 21 de agosto de 2026 no lo hacían.

   Era una fila de flex `nowrap` con una pieza que no cede: la tira de torneos
   pide 651 px —«Copa Argentina», «Apertura», «Clausura», «Copa Libertadores»,
   «Copa Sudamericana»— y los pide SIEMPRE, porque sus botones son `nowrap` y
   la tira no doblaba: su mínimo medido era 651, el mismo que su natural. Así
   que lo que se encogía era el título, que trae `min-width: 0` de `app.css`
   (576) y por eso no se recortaba con puntos suspensivos sino que colapsaba a
   CERO, con «Copa Argentina» pintándose por debajo de los botones.

   MEDIDO, con las animaciones terminadas y en una carrera de Boca:

     ancho ventana        800   900  1000  1024  1100  1200  1440
     desborde de página   123    23     0     0     0     0     0
     ancho del título       0     0    55    66    88   116   178

   O sea que el `<h1>` de la tarjeta no estaba a 800 y a 900, y estaba recortado
   hasta 1400. Y el rótulo de la ronda —«Treintaidosavos de final · 34 del
   ascenso»— se iba 123 px fuera de la ventana con su `margin-left: auto`.

   Y el ancho de la tira DEPENDE DEL CLUB: son entre uno y cinco botones según
   qué torneos juegue, con los nombres de sus torneos (`cuadro.js:776`). Por eso
   no hay número acá: la tira dobla y la cabecera dobla, y lo que decide es lo
   que MIDEN. `app.css` ya lo dice para este control —«antes que cortarlo, el
   control se dobla o se estrecha»—; lo único que faltaba era dejarlo doblar.

   La excepción se queda en esta hoja: el segmentado del resto del juego son
   dos o tres botones cortos que entran en un renglón, y ahí doblar no aporta. */
.copa__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.copa__head .segmented { flex-wrap: wrap; }

/* El título no se aplasta: se lleva lo que mide y empuja al resto al renglón
   siguiente. `min-content` y no un ancho: el nombre del torneo lo pone el país
   del club. */
.copa__head .tabla-marca { min-width: min-content; }

/* El eco se va al extremo; el selector queda pegado al título, que es de donde
   depende. */
.copa__head .label { margin-left: auto; }

/* Un cuadro que todavía puede cambiar se dibuja más apagado. La etiqueta del
   encabezado ya lo dice con palabras —"Proyección · la zona sigue"—; esto es
   la misma información en el único canal que se lee sin leer. */
.bracket[data-proyeccion='true'] .tie { opacity: 0.72; }

/* Las columnas se cuentan solas. Con `repeat(5, …)` clavado, el día que la copa
   pasó de 32 equipos a 64 apareció una sexta ronda y la final se quedó fuera de
   la pantalla sin que nada avisara. El número de rondas es del torneo, no de la
   hoja de estilos. */
/* `minmax(min-content, …)` Y NO `minmax(0, …)`, y esto es lo que arreglaba la
   otra mitad del defecto del 21/8/2026. Con el cero, las columnas se encogían
   sin suelo y las cabeceras de ronda se imprimían UNAS SOBRE OTRAS —58 px de
   solape entre «Treintaidosavos» y «Dieciseisavos» a 800, 41 a 900, 25 a 1000,
   21 a 1024, 8 a 1100— sin que el `overflow: auto` de acá abajo llegara a
   dispararse nunca: no había desborde que desplazar, porque la columna cedía
   primero y el texto salía por encima de la de al lado.

   El suelo es `min-content` y no un número porque lo que una ronda necesita lo
   dice su nombre, y los nombres cambian con el torneo y con el país: medidos
   acá son 168, 154, 108, 103, 127 y 72 px —el peor es «Treintaidosavos» con su
   fecha—. Un número escrito acá sería el de la Copa Argentina.

   Y a partir del suelo manda el `overflow: auto`: el cuadro se desplaza, que
   es lo que un cuadro puede hacer —es un diagrama ancho, no una tarjeta de
   texto— y que además ya estaba previsto. A 2000 las seis columnas piden 732
   de suelo contra 1794 de sitio, así que ahí no cambia nada. */
.bracket {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min-content, 1fr);
  gap: var(--sp-6);
  align-items: start;
  /* Se lleva el alto que sobra y no baja de 260 px, que es lo que necesita una
     ronda para entrar entera. Estas dos líneas vivían más arriba y no servían:
     las pisaba este mismo bloque con `min-height: 0`, porque a igual peso gana
     el que viene después. El árbol quedaba en 22 px con la Libertadores. */
  flex: 1 1 auto;
  min-height: 260px;
  overflow: auto;
}

.round { display: grid; align-content: start; gap: var(--sp-4); min-width: 0; }

.round__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-hairline);
}

/* La fecha de la ronda es un dato de segunda: se apaga, no se achica más. */
.round__when { font-size: var(--fs-xs); color: var(--text-muted); }

.round__ties { display: grid; align-content: start; gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   EL ÁRBOL
   --------------------------------------------------------------------------
   Acá arriba decía que el estrechamiento de las columnas ERA el dibujo y que
   las líneas del cuadro clásico serían ruido. No alcanza: con las llaves
   apiladas al principio de cada columna, la de cuartos no queda a la altura de
   las dos de octavos que la alimentan y hay que seguir con el dedo quién sale
   de dónde. El estrechamiento dice CUÁNTAS quedan; no dice QUIÉN se cruza con
   quién, que es la pregunta que un cuadro contesta.

   TRES PIEZAS Y NADA MÁS:

     · el CASILLERO (`.slot`) ocupa `--tramo` renglones de los `--filas` en que
       la primera ronda parte la altura, y se estira. Es la unidad de la
       geometría: 1, 2, 4, 8 renglones según la ronda.
     · la TARJETA se centra adentro del casillero. Así cae sola sobre el punto
       medio de las dos que la alimentan, sin que nadie mida nada.
     · las LÍNEAS se cuelgan del casillero y no de la tarjeta, que es la
       corrección que hizo falta: un `50 %` sobre la tarjeta es la mitad de dos
       renglones de texto; sobre el casillero es media casilla, que es
       exactamente lo que hay que recorrer para encontrarse con la hermana.

   Los dos números los pone `cuadro.js`, que es quien sabe cuántas rondas tiene
   el torneo — y también quien decide NO dibujar el árbol cuando el cuadro no
   se parte al medio, como la Copa Argentina con sus 34 clubes. Ahí la pantalla
   queda como estaba, que sigue siendo legible, en vez de dibujar un árbol
   torcido que miente sobre los cruces.
   -------------------------------------------------------------------------- */

.bracket[data-arbol='true'] { align-items: stretch; }
.bracket[data-arbol='true'] .round { min-height: 0; }

.bracket[data-arbol='true'] .round__ties {
  /* Alto FIJO por renglón —lo mide `cuadro.js` sobre una llave de verdad— y no
     `1fr`: un `1fr` sin alto definitivo arriba se achica al contenido y el
     casillero de dos renglones deja de medir el doble que el de uno. */
  grid-template-rows: repeat(var(--filas), var(--alto-fila, 58px));
  align-content: start;
  gap: 0;
}

.slot {
  grid-row: span var(--tramo);
  position: relative;
  display: grid;
  align-content: center;
  /* El aire entre llaves hermanas vive ACÁ y no en un `gap`: el gap movería el
     punto medio y el árbol dejaría de apuntar donde apunta. */
  padding-block: var(--sp-2);
}

/* EL CODO QUE SALE. Medio hueco de columna hacia la derecha, a la altura del
   centro del casillero — que es la altura de la tarjeta. */
.bracket[data-arbol='true'] .round:not([data-ultima='true']) .slot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(var(--sp-6) / 2);
  border-top: 1px solid var(--line-hairline);
}

/* EL CODO ENTERO, en UN pseudoelemento por casillero. Es una caja de medio
   hueco de ancho y media casilla de alto, colgada del punto medio del hueco,
   de la que sólo se pintan dos bordes:

     · el IZQUIERDO es el tramo vertical que va a buscar a la hermana;
     · el de ABAJO, en la de arriba del par, es el tramo horizontal que entra
       en la llave que se está formando.

   La de abajo del par no dibuja el horizontal: ya lo dibujó su hermana y en la
   misma altura — el punto de encuentro es el centro de la llave siguiente.

   Se hace así y no con un pseudoelemento sobre la tarjeta porque `.tie` lleva
   `overflow: hidden` para redondearse las esquinas, y ahí adentro cualquier
   línea que salga hacia afuera se recorta. */
.bracket[data-arbol='true'] .round:not([data-ultima='true']) .slot::before {
  content: '';
  position: absolute;
  left: calc(100% + var(--sp-6) / 2);
  width: calc(var(--sp-6) / 2);
  height: 50%;
  border-left: 1px solid var(--line-hairline);
}

.bracket[data-arbol='true'] .round:not([data-ultima='true']) .slot:nth-child(odd)::before {
  top: 50%;
  border-bottom: 1px solid var(--line-hairline);
}

.bracket[data-arbol='true'] .round:not([data-ultima='true']) .slot:nth-child(even)::before {
  bottom: 50%;
}

/* Un cuadro que todavía es proyección apaga sus líneas junto con sus llaves:
   dibujar el árbol firme sobre cruces que pueden cambiar sería el único trazo
   de la pantalla que promete más de lo que sabe. */
.bracket[data-proyeccion='true'][data-arbol='true'] .slot::before,
.bracket[data-proyeccion='true'][data-arbol='true'] .slot::after { opacity: 0.72; }

/* --------------------------------------------------------------------------
   LA LLAVE
   -------------------------------------------------------------------------- */

/* `minmax(0, 1fr)` y no la columna implícita: `auto` como mínimo es
   min-content, y el min-content de la fila de adentro incluye la etiqueta de
   división y el marcador, que son `flex: 0 0 auto` y no ceden. O sea que la
   fila pedía 287px dentro de una caja de 242 y el `overflow: hidden` de acá
   abajo se comía la diferencia sin decir nada. Medido a 1600x1000 antes de
   tocar: de 63 llaves, 50 con hijos afuera de la caja —la peor por 102px— y
   32 cortadas tambien en vertical. Lo que se perdia era la etiqueta de
   division y el «—» de la llave por jugar, que es justo lo que el comentario
   de `.tie__name` dice que NO se puede perder. */
.tie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-panel);
}

/* La tuya se marca con el acento en el borde izquierdo y nada más. Un fondo
   distinto la habría separado del torneo; el DT tiene que verse DENTRO del
   cuadro, no al lado. */
.tie[data-mia='true'] { border-left: 2px solid var(--accent); }

/* Flex y no rejilla: la etiqueta de división aparece en unos clubes y en otros
   no, y con columnas fijas el que no la lleva arrastraba un hueco. Acá el
   nombre es lo único que cede — "San Martín de Tucumán" se recorta antes que
   desaparezca el dato de que viene del ascenso, que es la mitad de la historia
   de una llave de copa. */
.tie__side {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tie__side > .crest { flex: 0 0 auto; }

.tie__side + .tie__side { border-top: 1px solid var(--line-hairline); }

/* Quien pasó se lee entero; quien quedó fuera se apaga. La ausencia de brillo
   ES la eliminación, igual que en la rampa de atributos un valor flojo no se
   pinta de rojo: se apaga. */
.tie__side[data-paso='true'] { color: var(--text-primary); font-weight: 600; }

/* Y LLEVA `title`, que es la mitad que faltaba de esa decisión. MEDIDO: trece
   de los ciento veintisiete nombres del cuadro se recortan a 1600 —«Comunicaci…»,
   «Argentino de Monte…»— y ninguno se podía recuperar de ninguna manera. Si el
   nombre es lo que cede, tiene que quedar en algún lado; si no, la decisión no
   es «la categoría vale más», es «el nombre se pierde». Se comprobó que no
   sobra espacio: el cuadro llena su ancho, y los 114px que parecían libres eran
   el `zoom` del sitio —1538 de pantalla son 1424 de maquetación—. */
.tie__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El club de ascenso lleva su división escrita, porque el batacazo no se
   entiende si no se sabe de dónde viene el que lo dio. */
.tie__div {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tie__goles { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tie__side[data-paso='true'] .tie__goles { color: var(--text-primary); }

/* Los penales van entre paréntesis y en pequeño, colgados del marcador: son
   un desempate, no un resultado. Escribirlos del mismo tamaño diría que el
   0-0 no pasó. */
.tie__pen { font-size: var(--fs-xs); color: var(--text-muted); margin-left: 2px; }

/* Una llave que todavía no se jugó no muestra un 0-0: muestra que no se jugó. */
.tie__pendiente { font-size: var(--fs-xs); color: var(--text-muted); }

/* Un hueco del cuadro que espera a un ganador de la ronda anterior. */
/* «Por definir» es un DATO —dice que esa llave todavía no tiene rival— y no un
   control deshabilitado, así que no está exento: en apagado daba 2,87:1. La
   itálica ya lo distingue de un nombre de club sin necesidad de borrarlo. */
.tie__side--vacio { color: var(--text-muted); font-style: italic; }

/* --------------------------------------------------------------------------
   EL CAMPEÓN
   -------------------------------------------------------------------------- */

.champ {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
}

.champ__name { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.champ__label { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   TU RECORRIDO
   -------------------------------------------------------------------------- */

.ruta__grid { display: grid; gap: var(--sp-3); max-width: 720px; }

.ruta__row {
  display: grid;
  grid-template-columns: 96px 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.ruta__fase { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   LA FASE DE GRUPOS
   --------------------------------------------------------------------------
   Ocho tablas de cuatro, y sólo las dibujan las dos copas de CONMEBOL. Cero
   tokens nuevos: la tabla es `.data-table` del sistema, la franja de la
   izquierda es el canalón compartido y la única regla propia es cuántas
   columnas de grupos entran.

   Cuatro columnas fijas y no `auto-fill`, que fue el primer intento y se veía
   mal: a 1585px entraban seis, y ocho grupos en filas de seis y dos dejan la
   segunda fila coja. Ocho es un número que se reparte bien —dos filas de
   cuatro— y el reparto de una retícula de ocho cosas iguales lo decide cuántas
   son, no cuánto mide la ventana. La respuesta a pantalla es estructural: se
   bajan columnas en los quiebres del sistema, no se dejan flotar.
   -------------------------------------------------------------------------- */

.grupos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* La fase liga de Europa es UNA tabla de treinta y seis, no ocho de cuatro:
   ocupa las cuatro columnas en vez de encogerse en la primera y dejar tres
   cuartos de la placa vacíos. Comparte todo lo demás con `.grupo` porque es la
   misma tabla con otro corte. */
.grupo--liga { grid-column: 1 / -1; }
.grupo--liga .grupo__head { justify-content: space-between; }

/* A lo ancho, el nombre tiene que quedar pegado al escudo. En una tabla de
   cuatro filas la columna es angosta y no se nota; en una de treinta y seis
   que ocupa la placa entera, el nombre se iba al otro extremo y quedaba a un
   palmo de su propio escudo. */
.grupo--liga .tie__name { flex: 0 1 auto; text-align: left; }
.grupo--liga .grupo__club { justify-content: flex-start; }

@media (max-width: 1080px) { .grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grupos { grid-template-columns: minmax(0, 1fr); } }

.grupo { background: var(--bg-panel); padding: var(--sp-4) var(--sp-5) var(--sp-3); }

/* El grupo propio se marca en el borde izquierdo y nada más, igual que la
   llave propia del cuadro: el DT tiene que verse DENTRO del torneo, no al
   lado. Un fondo distinto lo habría separado de los otros siete. */
.grupo[data-nuestro='true'] { box-shadow: inset 2px 0 0 var(--accent); }

.grupo__head { margin-bottom: var(--sp-2); }

/* El nombre del club cede antes que ningún número: en una tabla de grupo lo
   que se escanea son las tres columnas de la derecha. */
.grupo__club { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

/* EL ESCUDO DE ESTA TABLA ES MÁS GRANDE QUE EL DE LAS OTRAS, y es la única
   excepción al tamaño de tabla del sistema. El motivo es que acá el escudo no
   acompaña al nombre: lo reemplaza. En la fase de grupos del Mundial hay
   treinta y dos clubes de veinticinco países y ninguno se conoce de memoria
   como se conocen los veintiocho de la Primera; el nombre se lee, el escudo se
   RECONOCE, y a 17px un escudo ajeno es una mancha de dos colores.

   Veinticuatro y no más, con dos números medidos detrás:

   · A lo ANCHO no cuesta nada. La celda del club es la elástica de la tabla,
     así que se ensancha con el escudo en vez de comerse el nombre: a 1090px
     —el ancho más angosto en el que todavía hay cuatro columnas de grupos, que
     es donde esto se rompería primero— ninguno de los treinta y dos nombres se
     corta, ni siquiera Independiente del Valle.

   · A lo ALTO cuesta 3,5px por fila: 28px en las ocho tablas. Los paga la
     `.copa`, que scrollea por dentro a propósito, así que la tira de rondas de
     abajo no se va de la pantalla — se llega a ella un poco antes.

   ALCANZA TAMBIÉN A LA FASE LIGA de treinta y seis, que son 126px más de una
   tabla que ya medía 1355 y ya scrolleaba. Es a propósito: es la misma tabla
   con otro corte, y dos tamaños de escudo en dos solapas de la misma pantalla
   se notan aunque nunca se vean juntos.

   El halo va acá y no lo hereda de `.crest--sm` porque el radio es ~1,8 % del
   lado y no un valor fijo: es la regla de CADA tamaño la que lo declara, y ésta
   ahora es una. Sin esta línea los cinco escudos que llevan halo en esta
   pantalla —Urawa, Persépolis, Al Ahly, Alajuelense, Auckland FC— lo
   dibujarían con el grosor de un escudo un 40 % más chico. */
.grupo__club .crest { flex: 0 0 auto; width: 24px; height: 24px; --halo: 0.43px; }

/* La cabecera de una tabla de cuatro filas no se gana una línea de texto: PJ,
   Dif y Pts se leen igual sin rótulo cuando son tres columnas de números en el
   mismo orden en las ocho tablas. Los rótulos siguen ahí para quien lee con
   lector de pantalla, que es donde sí hacen falta. */
.grupo__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Y LA SALIDA DE EMERGENCIA, la misma que `plantel`, `mercado` y `vestuario`: en
   una ventana angosta el reparto de alto fijo aprieta más de lo que ayuda, así
   que la página vuelve a rodar y cada bloque mide lo que necesita. */
@media (max-width: 900px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .copa { overflow: visible; }
  .copa__cuadro { flex: 0 0 auto; overflow: visible; }
}


/* --------------------------------------------------------------------------
   EL RÓTULO DE LA CABECERA, EN EL TELÉFONO
   --------------------------------------------------------------------------
   `app.css` le pone `white-space: nowrap` a lo que acompaña al título de un
   panel, y tiene razón para lo que esa regla protege: ahí suele haber una
   medida corta —«4-3-1-2», «5 CAMBIOS»— y «4-3-1-2» partido en dos renglones
   deja de ser una formación.

   Esta pantalla no pone una medida, pone UNA FRASE: «Jugando treintaidosavos de final»
   —310 px—, y una frase con `nowrap` en una ventana de teléfono no se
   estrecha ni dobla: se sale, y empuja la página entera.

   Así que acá el rótulo dobla. Va en esta hoja y no en `app.css` porque la
   regla compartida sigue siendo la correcta para las pantallas que ponen una
   medida; lo que hay son tres excepciones —ésta, `entrenamiento` e `inferiores`— y es el
   número que hay que mirar el día que aparezca una cuarta.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .panel__head > .label:not(:first-child) { white-space: normal; }
}