/* ==========================================================================
   El Camino DT — TUS TORNEOS DEL CLUB (5/10/2026)
   --------------------------------------------------------------------------
   La pantalla usa las clases del modo selección (`seleccion.css`). Acá va
   sólo lo que el club tiene y la selección no: escudos en vez de banderas,
   las zonas de la liga, el destino de cada puesto y la lista de rondas.
   ========================================================================== */

/* LOS ESCUDOS: cuadrados y enteros, donde el modo pone banderas. */
.torneos-club .tor__esc { object-fit: contain; box-shadow: none; border-radius: 0; flex: none; }
.torneos-club .copa__sel .tor__esc, .torneos-club .copa__res .tor__esc { display: inline-block; vertical-align: middle; }
.torneos-club .mundo__tabs button > b { font-size: var(--fs-md); white-space: nowrap; }
.torneos-club .mundo__tabs button span { white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }

/* LAS ZONAS, a la derecha de los pasos del año. */
.tor__zonas { flex: none; align-self: center; }

/* La fecha libre de la zona impar. */
.tor__libre { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }


/* LAS RONDAS DE LA COPA, en el costado. */
.tor__rondas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tor__rondas li { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.2rem; gap: var(--sp-2); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); }
.tor__rondas b { font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tor__rondas small { color: var(--text-muted); font-size: var(--fs-xs); }
.tor__rondas span { text-align: right; color: var(--text-secondary); font-size: var(--fs-xs); }

/* El cuadro entero ocupa el ancho de la tarjeta y se corre por dentro si no entra. */
.tor__conf--cuadro .mundo__cuerpo { overflow-x: auto; }


/* LA TABLA DE LA LIGA tiene quince renglones y no diez: más apretada, para
   que entre entera en la tarjeta como la de la eliminatoria. */
.torneos-club .mun__copa .mundo__grupos--uno .copa__tabla td { padding-block: 6px; }

/* LA SOLAPA DE UN TORNEO: su logo chico al lado del nombre, como la del
   repechaje en la eliminatoria, y abajo en qué anda. */
.torneos-club .tor__tab-logo { display: block; height: 26px; width: auto; max-width: 3rem; object-fit: contain; flex: none; }
.torneos-club .mundo__tabs button:not([aria-selected="true"]) .tor__tab-logo { opacity: 0.7; }

/* A dónde va cada puesto de un grupo, abajo de su tabla. */
.tor__leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.tor__leyenda b { color: var(--text-secondary); font-weight: 700; }

/* En el costado, la ronda va donde la selección pone el día. */
.torneos-club .mun2__riel .mun2__cruce { grid-template-columns: 4.4rem 22px minmax(0, 1fr) auto 3rem; }

/* LOS QUE VAN AL PLAYOFF en la fase liga de Europa: una raya del color de
   aviso, al lado de la amarilla de los que pasan derecho. */
.torneos-club .copa .copa__tabla tr.tor__cae td:first-child { box-shadow: inset 3px 0 0 var(--warn); color: var(--warn); }

/* Las solapas no se aprietan: con nombres de torneo en vez de siglas, en
   el teléfono se pisaban. La fila se corre de costado, como en el modo. */
.torneos-club .mun2__tabs button { flex: none; }

/* LOS CRUCES DE UNA RONDA GRANDE —los treintaidosavos son treinta y dos—
   van de a dos en la computadora y de a uno en el teléfono. */
@media (max-width: 720px) {
  .torneos-club .mundo__cruces { grid-template-columns: minmax(0, 1fr) !important; }
}

/* El torneo de un partido del costado, abajo de su día. */
.tor__que { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* LA TABLA Y LA FECHA LADO A LADO piden ancho: con quince clubes y sus
   nombres enteros, debajo de 1300 px la tabla se comía los nombres. Ahí la
   fecha va abajo de la tabla. */
@media (max-width: 1300px) {
  .torneos-club .mun__copa .mundo__grupos--uno .copa__grupo-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* UN CRUCE EN EL TELÉFONO: sin el rótulo de la llave y con el marcador más
   angosto, para que entren los nombres. */
@media (max-width: 720px) {
  .torneos-club .mundo__cruce { grid-template-columns: minmax(0, 1fr) 4.4rem minmax(0, 1fr); gap: var(--sp-2); padding: 0 var(--sp-3); }
  .torneos-club .mundo__cruce-n { display: none; }
  .torneos-club .mundo__cruce-eq { font-size: var(--fs-sm); gap: var(--sp-2); }
  .torneos-club .mundo__cruce-eq .tor__esc { width: 28px !important; height: 28px !important; }
  .torneos-club .mundo__cruces { grid-auto-rows: minmax(3.4rem, auto); gap: var(--sp-2); }
}

/* UNA TABLA SOLA —la fase liga de Europa, una copa de un grupo— no tiene
   fecha al lado: ocupa todo el ancho. */
.tor__solo .copa__grupo-cuerpo { grid-template-columns: minmax(0, 1fr) !important; }

/* El rótulo de la ronda, en el costado, se corta antes de pisar el escudo. */
.torneos-club .mun2__cruce-dia { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El lugar de un escudo que todavía no se sabe: un hueco, no un bloque. */
.torneos-club .mundo__pano--sin.tor__esc { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--r-sm); }
/* La copa sin sortear: apagada, con la fecha del sorteo, y un sacudón si se
   la toca (9/10/2026). */
.torneos-club .mundo__tabs button[data-cerrada] { cursor: not-allowed; opacity: 0.5; }
.torneos-club .mundo__tabs button[data-cerrada] span { color: var(--warn); }
.tor__tab--no { animation: tor-no 360ms ease; }
@keyframes tor-no { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .tor__tab--no { animation: none; } }

/* LAS REFERENCIAS DE LA TABLA (9/10/2026, «Pongamos las referencias»): la
   franja en el borde del puesto, con los colores del `.zone-chip` de
   `app.css` — los mismos de la tabla del Portal y de «Las ligas». */
.torneos-club .copa .copa__tabla tr[data-zona] td:first-child {
  background-image: linear-gradient(var(--zona-c), var(--zona-c));
  background-repeat: no-repeat; background-position: left center; background-size: 3px var(--zona-h, 100%);
  color: var(--zona-c); font-weight: 700;
}
.torneos-club .copa__tabla tr[data-zona="champions"] { --zona-c: var(--good); }
.torneos-club .copa__tabla tr[data-zona="previa"] { --zona-c: var(--good); --zona-h: 50%; }
.torneos-club .copa__tabla tr[data-zona="europa"] { --zona-c: var(--verde-600); }
.torneos-club .copa__tabla tr[data-zona="conference"] { --zona-c: var(--verde-600); --zona-h: 50%; }
.torneos-club .copa__tabla tr[data-zona="playoff"] { --zona-c: var(--verde-600); --zona-h: 25%; }
.torneos-club .copa__tabla tr[data-zona="descenso"] { --zona-c: var(--danger); }
.torneos-club .copa__tabla tr[data-zona="repechaje"] { --zona-c: var(--danger); --zona-h: 50%; }
.tor__leyenda--zonas { gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); color: var(--text-secondary); padding: var(--sp-3) var(--sp-4) var(--sp-2); border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08)); }
.tor__leyenda--zonas span { display: inline-flex; align-items: center; gap: 8px; }
.tor__leyenda--zonas .zone-chip { flex: none; }

/* LAS FASES PREVIAS de la Libertadores (9/10/2026, ordenadas): el recorrido
   arriba, como cinco estaciones con flecha, y una fase por vez abajo. */
.tor__pv { display: grid; gap: var(--sp-4); }
.tor__pv-ruta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.tor__pv-ruta > li { position: relative; display: grid; }
.tor__pv-ruta > li + li::before { content: '›'; position: absolute; left: calc(-1 * var(--sp-3)); top: 50%; translate: -15% -50%; font-size: var(--fs-xl); color: var(--text-muted); }
.tor__pv-est { display: grid; gap: 2px; align-content: start; text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: 16px; border: 0; font: inherit; color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-raised) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-hairline); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tor__pv-est:hover { background: color-mix(in srgb, var(--bg-raised) 85%, transparent); }
.tor__pv-est[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.tor__pv-est--fin { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px dashed var(--line-hairline); border: 1px dashed var(--line-strong); }
.tor__pv-n { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); }
.tor__pv-n small { font-weight: 700; color: var(--text-muted); }
.tor__pv-est b { font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); }
.tor__pv-est small { font-size: var(--fs-xs); color: var(--text-secondary); }
.tor__pv-est em { margin-top: 4px; font-style: normal; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.tor__pv-est--lista em { color: var(--good); }
.tor__pv-est--juega em { color: var(--accent-texto); }
.tor__pv-est--mia { box-shadow: inset 0 0 0 1px var(--line-hairline), inset 4px 0 0 var(--accent); }
.tor__pv-sub { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); }
.tor__pv-sub small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.tor__pv-cuerpo { display: grid; gap: var(--sp-3); }
.tor__pv-llaves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); margin: 0; padding: 0; list-style: none; }
.tor__pv-llaves--tuya { grid-template-columns: minmax(0, 1fr); }
.tor__pv-llave { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 45%, transparent); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.tor__pv-llave--mia { box-shadow: inset 0 0 0 1.5px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tor__pv-llave--grande { padding: var(--sp-4) var(--sp-5); }
.tor__pv-eq { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text-primary); }
.tor__pv-eq:first-child { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
.tor__pv-eq b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tor__pv-llave--grande .tor__pv-eq b { font-size: var(--fs-lg); }
.tor__pv-eq--fuera { opacity: 0.5; }
.tor__pv-eq--gana b { font-weight: 800; }
.tor__pv-eq--mia b { color: var(--accent-texto); }
.tor__pv-marc { display: grid; justify-items: center; gap: 2px; text-align: center; }
.tor__pv-marc strong { padding: 2px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bg-base, #000) 50%, transparent); font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.tor__pv-llave--grande .tor__pv-marc strong { font-size: var(--fs-2xl); }
.tor__pv-marc small { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .tor__pv-ruta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tor__pv-ruta > li + li::before { content: none; }
  .tor__pv-llaves { grid-template-columns: minmax(0, 1fr); }
}

/* EL PASE SIN RIVAL (11/10/2026): una confederación sin campeón no es un
   club por definir; se dice en gris y sin escudo. */
.mundo__cruce-eq--vacio .mundo__cruce-nom { color: var(--text-muted); font-style: italic; font-weight: 500; }