/* ==========================================================================
   El Camino DT — el partido de una selección
   --------------------------------------------------------------------------
   Sólo lo que agrega `partido-seleccion-vivo.js`: la franja de lo que está en
   juego y la fecha en vivo. Todo cuelga de `.en-partido-seleccion`, que ese
   guion pone en la raíz y sólo dirigiendo una selección: el partido de un
   club no cambia.
   ========================================================================== */

/* LO QUE ESTÁ EN JUEGO, entre el marcador y la cancha. */
.psel-enjuego {
  display: flex; align-items: baseline; justify-content: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill); background: var(--bg-raised);
  font-size: var(--fs-sm); color: var(--text-secondary);
  transition: background-color var(--dur) var(--ease);
}
.psel-enjuego__rot { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.psel-enjuego b { font-size: var(--fs-lg); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.psel-enjuego--adentro { background: color-mix(in srgb, var(--verde-400) 16%, var(--bg-raised)); }
.psel-enjuego--adentro b { color: var(--verde-300); }
.psel-enjuego--afuera { background: color-mix(in srgb, var(--warn) 16%, var(--bg-raised)); }
.psel-enjuego--afuera b { color: var(--warn); }
.psel-enjuego__flecha { font-style: normal; font-size: var(--fs-xs); color: var(--text-secondary); }

/* LA FECHA EN VIVO, arriba de las estadísticas. La columna es una grilla de
   seis filas escritas a mano en `partido.css`; con la fecha adelante suma
   una, y la cronología sigue siendo la que se estira. */
.en-partido-seleccion .match__rival { grid-template-rows: auto auto auto auto minmax(58px, 1fr) auto minmax(0, auto); }
.psel-fecha { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-hairline); }
.psel-cruces { display: grid; gap: 2px; max-height: 8.6rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.psel-cruces li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2);
  padding: 2px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-secondary);
  transition: background-color 600ms var(--ease);
}
.psel-cruces b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.psel-eq { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.psel-eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psel-eq--v { justify-content: flex-end; text-align: right; }
.psel-eq img, .psel-tabla img { flex: none; width: 20px; height: 14px; object-fit: cover; border-radius: var(--r-xs); }
.psel-gol { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.psel-gol b { color: var(--accent-texto, var(--accent)); }
.psel-tabla { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.psel-tabla li { display: grid; grid-template-columns: 1.2rem auto minmax(0, 1fr) 1.6rem 0.9rem; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.psel-tabla b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.psel-tabla strong { text-align: right; color: var(--text-primary); }
.psel-tabla i { font-style: normal; font-size: var(--fs-2xs); color: var(--text-muted); }
.psel-tabla--entra { box-shadow: inset 2px 0 0 var(--accent); }
.psel-tabla--mia { background: var(--accent-wash, rgb(255 255 255 / 0.06)); color: var(--text-primary); }
.psel-tabla--mia b { font-weight: 700; }
.psel-raya { display: flex !important; align-items: center; gap: var(--sp-2); padding: 0 !important; color: var(--accent-texto, var(--accent)) !important; font-size: var(--fs-2xs) !important; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.psel-raya::before, .psel-raya::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }

/* EL NOMBRE DEL PAÍS EN LA BARRA, donde el club lleva su escudo. Es la pieza
   de `seleccion.css` —que esta pantalla no carga: es la hoja entera del modo,
   con su paleta— reducida a lo que la barra necesita. La pone
   `ajustarChromeAlModo()` en el partido y el entretiempo. */
.en-chrome-prestado .chrome__seleccion {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-3xl); font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: var(--tracking-tight);
  color: var(--seleccion-tinta, var(--nav-aqui));
  white-space: nowrap;
}
.en-chrome-prestado .chrome__bandera {
  display: block; width: 57px; height: 38px; flex: none; object-fit: contain;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--ink-800);
}
.en-chrome-prestado .chrome__escudo { height: 54px; width: auto; flex: none; object-fit: contain; vertical-align: middle; }
.en-chrome-prestado .chrome__row--primary { position: relative; overflow: hidden; }
.en-chrome-prestado .chrome__row--primary > :not(.chrome__halo) { position: relative; z-index: 1; }
.en-chrome-prestado .chrome__halo--modo {
  left: 0; width: 230px; height: 230px;
  -webkit-mask-image: radial-gradient(closest-side, var(--ink-1000) 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, var(--ink-1000) 45%, transparent 100%);
}

/* ANTES DEL SAQUE, las tres salidas en la misma franja. */
.psel-enjuego--antes { gap: var(--sp-5); }
.psel-enjuego__si { color: var(--text-secondary); }
.psel-enjuego__si b { font-size: var(--fs-md); }
.psel-enjuego__si--adentro b { color: var(--verde-300); }
.psel-enjuego__si--afuera b { color: var(--warn); }

/* LA CEREMONIA, sobre el lienzo. El lienzo mueve a los veintidós; esta capa
   sólo lleva el pie con los pasos y el relato, el cartel del himno y el
   destello de la foto. No atrapa el puntero salvo en su botón: debajo sigue
   la cancha. */
.psel-cer { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.psel-cer--fuera { opacity: 0; }
.psel-cer__pie {
  position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--sp-2);
  width: min(92%, 40rem); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); background: color-mix(in srgb, var(--bg-chrome) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-align: center;
}
.psel-cer__pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.psel-cer__pasos li { transition: color var(--dur-fast) var(--ease); }
.psel-cer__hecho { color: var(--text-secondary); }
.psel-cer__ahora { color: var(--accent-texto, var(--accent)); }
.psel-cer__dice { margin: 0; min-height: 1.4em; font-size: var(--fs-sm); color: var(--text-primary); }
.psel-cer__pie .action { pointer-events: auto; }
.psel-cer__canta {
  position: absolute; left: 50%; top: var(--sp-5); transform: translateX(-50%);
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-chrome) 82%, transparent);
  animation: psel-canta-entra 500ms var(--ease-entrada, var(--ease)) both;
}
.psel-cer__canta img { grid-row: 1 / 3; width: 54px; height: 36px; object-fit: cover; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--line-strong); }
.psel-cer__canta span { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.psel-cer__canta b { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); }
@keyframes psel-canta-entra { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.psel-cer__flash { position: absolute; inset: 0; background: var(--ink-100); opacity: 0; }
.psel-cer__flash--ya { animation: psel-flash 700ms ease-out; }
@keyframes psel-flash { 0% { opacity: 0; } 8% { opacity: 0.75; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .psel-cer__canta { animation: none; } .psel-cer__flash--ya { animation: none; } }

/* LAS INSIGNIAS DEL MARCADOR, en el hueco del escudo del club. */
.psel-escudo { display: block; width: 44px; height: 44px; object-fit: contain; }
.psel-bandera { display: block; width: 48px; height: 32px; object-fit: cover; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--line-strong); }

/* EL ONCE RIVAL, PLEGADO: la cabecera es el botón. */
.psel-rival-cabeza { cursor: pointer; border-radius: var(--r-sm); transition: background-color var(--dur-fast) var(--ease); }
.psel-rival-cabeza:hover { background: var(--bg-raised); }
.psel-rival-cabeza:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.psel-rival-cabeza [data-f="rival-formacion"]::after { content: ' ▾'; }
.psel-rival-plegado .psel-rival-cabeza [data-f="rival-formacion"]::after { content: ' ▸'; }
.psel-rival-plegado [data-f="rival-once"] { display: none; }

/* TODO LISTO, abajo de la cancha, hasta el saque. */
.psel-listo {
  position: absolute; left: 50%; bottom: var(--sp-4); z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-5);
  width: max-content; max-width: 92%; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); background: color-mix(in srgb, var(--bg-chrome) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: psel-listo-entra 420ms var(--ease-entrada) both;
  transition: opacity var(--dur) var(--ease);
}
.psel-listo--fuera { opacity: 0; }
.psel-listo__dice { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.psel-listo__dice b { color: var(--text-primary); }
.psel-listo .action { flex: none; }
@keyframes psel-listo-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .psel-listo { animation: none; } }

/* VEINTITRÉS Y NO DIECIOCHO. La lista de una selección trae doce suplentes y
   la columna de la alineación está medida para el banco de un club: a 768 de
   alto el banco quedaba con su propia rueda. En pantallas bajas las filas se
   aprietan lo justo para que entren los veintitrés. */
@media (min-width: 981px) and (max-height: 860px) {
  .en-partido-seleccion .match__once .lineup { gap: 1px; }
  .en-partido-seleccion .match__once .lineup__row { height: 19px; }
}

/* ==========================================================================
   EL ENTRETIEMPO DE UNA SELECCIÓN — la sala del analista
   `entretiempo-seleccion.js` pone `.en-entretiempo-seleccion` en la raíz, la
   sección `.ets` debajo del marcador y el conmutador de vistas en el centro
   del marcador. «El análisis» muestra sólo el marcador y la sala; «Tus
   decisiones», la pantalla de siempre.
   ========================================================================== */
.en-entretiempo-seleccion .et[data-ets-vista="analisis"] {
  grid-template-areas: 'marcador marcador marcador' 'ets ets ets';
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(var(--alto-ventana) - var(--chrome-h) - var(--subnav-h) - 27px);
}
.en-entretiempo-seleccion .et[data-ets-vista="analisis"] > .band:not(.et__marcador):not(.ets) { display: none; }
.en-entretiempo-seleccion .et[data-ets-vista="decisiones"] > .ets { display: none; }
/* En las decisiones, la columna del primer tiempo se va: sus números están en
   el análisis. La del plan gana ese ancho, y con él baja de alto. */
.en-entretiempo-seleccion .et[data-ets-vista="decisiones"] {
  grid-template-columns: minmax(0, 1fr) 296px;
  grid-template-rows: auto auto minmax(0, 1fr);
  /* El plantel sube hasta la fila de la forma: es la lista más larga de la
     pantalla, y a todo el alto no necesita rueda más que en el banco. */
  grid-template-areas: 'marcador marcador' 'decision gente' 'plan gente';
}
.en-entretiempo-seleccion .et[data-ets-vista="decisiones"] > .et__pasado { display: none; }

/* TUS DECISIONES, EN COLUMNAS (1/10/2026, «que no quede todo tan
   amontonado»). El panel del plan deja de ser una caja con tres bloques
   adentro y pasa a ser la fila: arriba el veredicto en su franja, y abajo la
   intención, la charla y el plan de enfrente, cada uno en su tarjeta y a todo
   el alto. Al lado, el plantel, que ya era columna. */
.en-entretiempo-seleccion .et[data-ets-vista="decisiones"] > .et__plan {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-4); align-content: stretch;
  padding: 0; background: none; border: 0;
}
.en-entretiempo-seleccion .et__plan .et__cabeza {
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: var(--sp-6); text-align: left;
  padding: var(--sp-4) var(--sp-6); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--bg-panel);
}
.en-entretiempo-seleccion .et__plan .et__veredicto { margin: 0; white-space: nowrap; }
.en-entretiempo-seleccion .et__plan .et__veredicto-nota { margin: 0; max-width: none; }
.en-entretiempo-seleccion .et__plan .et__palancas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; min-height: 0; }
.en-entretiempo-seleccion .et__plan .et__palancas > .et__bloque {
  align-content: start; gap: var(--sp-4); min-height: 0; overflow-y: auto;
  padding: var(--sp-5); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--bg-panel);
}
.en-entretiempo-seleccion .et__marcador { padding-block: var(--sp-2); }
.en-entretiempo-seleccion .et { gap: var(--sp-4); }

/* El conmutador, debajo del «Descanso · 45'». */
.ets-vistas { display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-2); padding: 3px; border-radius: var(--r-pill); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.ets-vistas button, .ets-lecturas button, .ets-quien button {
  border: 0; background: none; cursor: pointer; font: inherit; color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* DOS SECCIONES Y NO DOS FILTROS: botones grandes, con su ícono, que se lean
   como las dos puertas del vestuario (1/10/2026, «que se vea que son
   diferentes secciones»). */
.ets-vistas button { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 11rem; justify-content: center; padding: var(--sp-2) var(--sp-6); border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 700; }
.ets-vistas .i { width: 18px; height: 18px; }
.ets-vistas button[aria-selected="true"] { background: var(--accent); color: var(--ink-950); }
.ets-vistas button:not([aria-selected="true"]):hover { color: var(--text-primary); }
.ets-vistas button:focus-visible, .ets-lecturas button:focus-visible, .ets-quien button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.et > .ets { grid-area: ets; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); gap: var(--sp-5); min-height: 0; background: none; padding: 0; border: 0; box-shadow: none; }
.ets-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-panel); animation: pre-entra var(--dur-escena, 420ms) var(--ease-entrada) both; }
.ets-col--dice { animation-delay: 70ms; }
.ets-col--gente { animation-delay: 140ms; }

/* LA PIZARRA */
.ets-quien { display: inline-flex; gap: var(--sp-1); }
.ets-quien button { padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.ets-quien button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-primary); }
.ets-lecturas { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line-hairline); }
.ets-lecturas button { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; box-shadow: inset 0 -2px 0 transparent; }
.ets-lecturas button[aria-selected="true"] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.ets-lecturas button:not([aria-selected="true"]):hover { color: var(--text-primary); }
.ets-lienzo { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; }
.ets-pizarra { display: block; width: min(100cqw, calc(100cqh * 105 / 68)); height: auto; aspect-ratio: 105 / 68; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--verde-400) 9%, var(--bg-raised)); }
.ets-cal { fill: none; stroke: var(--line-strong); stroke-width: 0.3; }
.ets-flecha { fill: none; stroke: var(--text-muted); stroke-width: 0.35; }
.ets-pie { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.ets-zona { opacity: var(--a); }
.ets-zona--nos { fill: var(--accent); }
.ets-zona--riv { fill: var(--clay-400); }
.ets-zona-txt { font-weight: 700; text-anchor: middle; fill: var(--text-primary); paint-order: stroke; stroke: var(--bg-panel); stroke-width: 0.6px; }
.ets-remate { stroke-width: 0.4; fill: none; }
.ets-remate--nos { stroke: var(--accent); }
.ets-remate--riv { stroke: var(--clay-400); }
.ets-remate--nos.ets-remate--arco { fill: var(--accent); }
.ets-remate--riv.ets-remate--arco { fill: var(--clay-400); }
.ets-remate--gol { stroke: var(--text-primary); stroke-width: 0.5; }
.ets-rec { opacity: 0.85; }
.ets-rec--nos { fill: var(--accent); }
.ets-rec--riv { fill: var(--clay-400); }
.ets-altura { stroke-width: 0.45; stroke-dasharray: 1.2 1; }
.ets-altura--nos { stroke: var(--accent); }
.ets-altura--riv { stroke: var(--clay-400); }
.ets-desvio { stroke: var(--text-muted); stroke-width: 0.3; stroke-dasharray: 0.8 0.6; }
.ets-hueco { fill: none; stroke: var(--text-muted); stroke-width: 0.3; }
.ets-media circle { stroke: var(--bg-panel); stroke-width: 0.3; }
.ets-media--nos circle { fill: var(--accent); }
.ets-media--riv circle { fill: var(--clay-400); opacity: 0.6; }
.ets-media text { font-weight: 800; text-anchor: middle; fill: var(--ink-950); }

/* LO QUE DICE EL ANÁLISIS */
.ets-obs { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ets-ob { display: grid; gap: 2px; justify-items: start; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised);
  animation: pre-entra 360ms var(--ease-entrada) both; animation-delay: calc(160ms + var(--i, 0) * 60ms); }
.ets-ob b { font-size: var(--fs-md); color: var(--text-primary); }
.ets-ob p { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-secondary); }
.ets-ob .action { margin-top: var(--sp-1); }
.ets-tag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); }
.ets-aplicado { margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--verde-300); }

/* JUGADOR POR JUGADOR */
.ets-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ets-tabla th { padding: 0 var(--sp-1) var(--sp-2); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); text-align: right; border-bottom: 1px solid var(--line-hairline); }
.ets-tabla th:nth-child(-n+2) { text-align: left; }
.ets-tabla td { padding: 3px var(--sp-1); color: var(--text-secondary); border-bottom: 1px solid var(--line-hairline); }
.ets-pos { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); }
.ets-nombre { color: var(--text-primary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
/* EN EL TELÉFONO EL NOMBRE SE LLEVA LO QUE SOBRA, y no 9rem fijos (8/10/2026):
   con seis columnas la tabla medía 381–389 px en una pantalla de 375 y
   estiraba el entretiempo entero. `max-width: 0` + `width: 100%` es la forma
   de decirle a una celda «el resto, con elipsis». Lo encontró el recorrido
   del modo con `ANCHO=375 MEDIR=1`. */
@media (max-width: 560px) {
  .ets-nombre { max-width: 0; width: 100%; }
  .ets-tabla th, .ets-tabla td { padding-inline: 2px; }
  .ets-tabla th { letter-spacing: 0.04em; }
}
.ets-num, .ets-puesto { text-align: right; white-space: nowrap; }
.ets-num--aviso { color: var(--warn) !important; }
.ets-calif { display: inline-block; min-width: 2.2rem; padding: 0 var(--sp-1); border-radius: var(--r-sm); text-align: center; font-weight: 700; background: var(--bg-raised); color: var(--text-primary); }
.ets-calif--alta { background: color-mix(in srgb, var(--verde-400) 26%, var(--bg-raised)); }
.ets-calif--baja { background: color-mix(in srgb, var(--clay-400) 24%, var(--bg-raised)); }
.ets-col--gente .band__sub { margin-top: var(--sp-4); }
.ets-numeros { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.ets-numeros li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem; align-items: center; row-gap: 2px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ets-numeros b { color: var(--text-primary); }
.ets-numeros li b:last-of-type { text-align: right; }
.ets-numeros span { text-align: center; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.ets-numeros i { grid-column: 1 / -1; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) var(--a), var(--clay-400) var(--a)); opacity: 0.8; }
.ets-peligro { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.ets-peligro li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.ets-peligro b { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ets-col, .ets-ob { animation: none; } }
@media (max-width: 1100px) {
  .en-entretiempo-seleccion .et[data-ets-vista="analisis"] { height: auto; }
  .et > .ets { grid-template-columns: minmax(0, 1fr); }
  .ets-lienzo { container-type: normal; }
  .ets-pizarra { width: 100%; }
}
/* En pantallas bajas la columna de la gente aprieta sus renglones y el
   peligro de enfrente queda en dos: entra sin rueda a 768 de alto. */
@media (max-height: 820px) {
  .ets-tabla td { padding-block: 1px; }
  .ets-numeros { gap: 2px; }
  .ets-numeros li { row-gap: 0; }
  .ets-peligro li:nth-child(n+3) { display: none; }
  .ets-col--gente .band__sub { margin-top: var(--sp-2); }
}
/* Con el plantel al lado las tarjetas de la forma se angostan: el eco va en
   un renglón. */
.en-entretiempo-seleccion .forma__eco { white-space: nowrap; letter-spacing: 0.04em; }

/* EL LOGO DE TU CONFEDERACIÓN (1/10/2026), en blanco: en la marca del torneo
   de arriba y al principio de la franja de lo que está en juego. Los
   emblemas altos —Conmebol y Concacaf traen el nombre abajo— van más altos
   para leerse igual. */
.psel-conf-logo { display: block; flex: none; height: 18px; width: auto; max-width: 4.5rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; }
.psel-conf-logo--conmebol, .psel-conf-logo--concacaf { height: 28px; margin-block: -5px; }
.psel-conf-logo--caf { height: 12px; }
/* La franja alinea por la línea de base, y una imagen «se para» en su borde de
   abajo: el logo subía y se salía de la franja. Va centrado y entero adentro. */
.psel-enjuego .psel-conf-logo { align-self: center; margin: 0 var(--sp-2) 0 0; height: 22px; }
.psel-enjuego .psel-conf-logo--caf { height: 11px; }
.chrome__logo.psel-conf-logo { height: 22px; max-width: 5rem; }
.chrome__logo.psel-conf-logo--conmebol, .chrome__logo.psel-conf-logo--concacaf { height: 32px; }
.chrome__logo.psel-conf-logo--caf { height: 14px; }


/* EL CHROME DEL MODO TAMBIÉN EN EL PARTIDO Y EL ENTRETIEMPO (2/10/2026,
   «cuando entro al partido, el menú de arriba tiene estilos distintos al
   general»). Son pantallas del club prestadas y no cargan `seleccion.css`:
   las reglas del menú se repiten acá con la marca del partido. Si cambian
   allá, cambian acá. */
.en-chrome-prestado .marcadores,
.en-chrome-prestado [data-f="tira-marcadores"],
.en-chrome-prestado [data-f="elegir-marcadores"],
.en-chrome-prestado [data-f="alternar-marcadores"] { display: none; }
.en-chrome-prestado .nav-sub { gap: var(--sp-3); }
.en-chrome-prestado .nav-sub__item {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.en-chrome-prestado .nav-sub__item[aria-current="page"] {
  color: var(--text-primary);
  isolation: isolate;
}
.en-chrome-prestado .nav-sub__item[aria-current="page"]::after {
  inset: -1px; height: auto; z-index: -1;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
}
@media (hover: hover) {
  .en-chrome-prestado .nav-sub__item:hover {
    background: var(--bg-hover); border-color: var(--line-strong); color: var(--text-primary);
  }
}
.en-chrome-prestado .history__btn { width: 34px; height: 34px; }
.en-chrome-prestado .breadcrumb { font-size: var(--fs-sm); }
.en-chrome-prestado .breadcrumb .i { width: 12px; height: 12px; }
.en-chrome-prestado .chrome__util { width: 38px; height: 38px; }
.en-chrome-prestado .chrome__util .i { width: 22px; height: 22px; }
.en-chrome-prestado .nav-sub__item:active { color: var(--nav-aqui); transition-duration: 0s; }
.en-chrome-prestado .nav-sub { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.en-chrome-prestado .nav-sub::-webkit-scrollbar { display: none; }
.en-chrome-prestado .nav-sub__item { flex: none; }

/* EL PARTIDO COMO LA PREVIA (2/10/2026, «aplicarle estilos al partido tal
   como ya lo tenemos en todo el modo»): las mismas columnas de la Previa,
   el dorsal en disco —amarillo el que está en cancha, vacío el del banco— y
   el puesto en la pastilla del color de su línea. Y la foto de la sección. */
@media (min-width: 1101px) {
  .en-partido-seleccion main.match { grid-template-columns: clamp(19.5rem, 19vw, 25rem) minmax(0, 1fr) 23rem; }
}
:is(.en-partido-seleccion, .en-partido-club) .lineup__row { border-radius: 8px; }
:is(.en-partido-seleccion, .en-partido-club) .lineup__pos {
  justify-self: start; padding: 2px 5px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2;
  color: var(--fam, var(--text-muted)); background: color-mix(in srgb, var(--fam, var(--text-muted)) 16%, transparent);
}
:is(.en-partido-seleccion, .en-partido-club) .lineup__row[data-fam='POR'] { --fam: #f5b942; }
:is(.en-partido-seleccion, .en-partido-club) .lineup__row[data-fam='DEF'] { --fam: #5ab0ff; }
:is(.en-partido-seleccion, .en-partido-club) .lineup__row[data-fam='MED'] { --fam: #3eda7f; }
:is(.en-partido-seleccion, .en-partido-club) .lineup__row[data-fam='DEL'] { --fam: #ff8a65; }
:is(.en-partido-seleccion, .en-partido-club) .lineup__num {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center;
  background: var(--accent); color: var(--text-on-accent);
}
:is(.en-partido-seleccion, .en-partido-club) .lineup--banquillo .lineup__num { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
:is(.en-partido-seleccion, .en-partido-club) .lineup__name { font-weight: 600; }
/* La foto del Día de partido detrás, como en las pantallas del modo. */
html:is(.en-partido-seleccion, .en-partido-club) body {
  background:
    linear-gradient(180deg, rgb(10 12 16 / 0.6) 0%, rgb(10 12 16 / 0.8) 50%, rgb(10 12 16 / 0.9) 100%),
    url('/assets/fotos/fondo-dia-de-partido.jpg') center 30% / cover fixed,
    var(--bg-page, #0e1014);
}
:is(.en-partido-seleccion, .en-partido-club) .lineup__name { padding-left: 8px; }

/* LAS PESTAÑAS COMO PASTILLAS (2/10/2026, «en general se pisa, hagamos un
   poco más grandes los botones del menú y un hover bueno»; «me gustan los
   botones con ese estilo redondo»): la fila crece lo que crecen ellas —antes
   la pestaña de 34 px vivía en una fila de 32 y se cortaba—, la elegida va
   llena del amarillo del modo y el hover se levanta y se enciende. */
html:is(.en-modo-seleccion, .en-chrome-prestado) { --subnav-h: 50px; --alto-pantalla-sel: calc(100vh / var(--escala-sitio, 1) - 9.8rem - 18px); }
:is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub { gap: 6px; padding-block: 6px; }
:is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item {
  height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(255 255 255 / 0.04); font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
}
:is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item[aria-current="page"] { color: var(--text-on-accent); font-weight: 800; }
:is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item[aria-current="page"]::after {
  inset: -1px; height: auto; z-index: -1; border-radius: 999px;
  background: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (hover: hover) {
  :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item:not([aria-current="page"]):hover {
    background: rgb(255 255 255 / 0.1); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text-primary); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
  }
}
:is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item:active { transform: translateY(0) scale(0.97); }
/* El reloj de arriba con la fecha, centrado, como en el modo. */
.clock--modo { justify-items: center; text-align: center; }
.clock--modo .clock__comp, .clock--modo .clock__date { text-align: center; }
/* La alarma del partido trabado. */
.traba-aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; max-width: min(560px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: 14px 18px; border-radius: var(--r-tarjeta); background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--sombra-modal); }
.traba-aviso p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.traba-aviso div { display: flex; gap: 8px; flex-wrap: wrap; }
/* SIN MIGAS DE PAN Y SIN EL LOGO DE CLUB (3/10/2026, «saquemos estos
   breadcrumbs»; «saquemos el logo este en el entretiempo»): esta hoja es la
   que cargan el partido y el entretiempo —`seleccion.css` no viaja acá—. En
   el partido queda la marca de tu confederación; en el entretiempo, ninguna. */
.en-chrome-prestado .breadcrumb { display: none; }
html.en-chrome-prestado:not(.en-partido-seleccion) .comp-marca { display: none; }
/* Las solapas del entretiempo, debajo del marcador en el teléfono. */
.ets-vistas-fila { display: flex; justify-content: center; padding: var(--sp-2) var(--sp-3) 0; }
.ets-vistas-fila .ets-vistas { margin-top: 0; }
@media (max-width: 640px) {
  .ets-vistas button { min-width: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); gap: var(--sp-2); }
}
/* EL ENTRETIEMPO EN EL TELÉFONO Y LA TABLET (3/10/2026, barrido de
   resoluciones): las dos vistas del modo traían su grilla de escritorio
   —«Tus decisiones» en dos columnas con 296 px fijos, las palancas de a tres y
   el veredicto sin cortar— y le ganaban a la de una columna de
   `entretiempo.css`. A 390 px las formaciones quedaban en 160 px y «Vas
   ganando» se cortaba. Debajo de 900, una columna; debajo de 640 las solapas
   van en su fila (`vistas`), entre el marcador y lo demás. */
@media (max-width: 900px) {
  .en-entretiempo-seleccion .et[data-ets-vista="analisis"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'marcador' 'ets'; }
  .en-entretiempo-seleccion .et[data-ets-vista="decisiones"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'marcador' 'decision' 'plan' 'gente'; }
  .en-entretiempo-seleccion .et__plan .et__palancas { grid-template-columns: minmax(0, 1fr); }
  .en-entretiempo-seleccion .et__plan .et__cabeza { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); padding: var(--sp-4); }
  .en-entretiempo-seleccion .et__plan .et__veredicto { white-space: normal; }
  .en-entretiempo-seleccion .et__plan .et__palancas > .et__bloque { overflow: visible; }
}
.ets-vistas-fila { grid-area: vistas; }
@media (max-width: 640px) {
  .en-entretiempo-seleccion .et[data-ets-vista="analisis"] { grid-template-areas: 'marcador' 'vistas' 'ets'; }
  .en-entretiempo-seleccion .et[data-ets-vista="decisiones"] { grid-template-areas: 'marcador' 'vistas' 'decision' 'plan' 'gente'; }
}
/* EL AMISTOSO EN VIVO (5/10/2026): se mira, no se dirige. Sin botón de saque,
   pausa ni velocidad —el reloj es el de los dos—; la cuenta regresiva y el
   final van encima de la cancha. */
[data-amistoso-vivo] [data-f="accion"], [data-amistoso-vivo] .transport [data-f="pausa"], [data-amistoso-vivo] .transport .segmented:has([data-vel]) { display: none !important; }
.amv-cuenta { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); padding: var(--sp-5); background: rgb(6 8 11 / 0.72); backdrop-filter: blur(3px); text-align: center; color: var(--text-primary); }
.amv-cuenta__quienes { margin: 0; font-size: var(--fs-xl); font-weight: 800; }
.amv-cuenta__quienes span { margin: 0 var(--sp-2); color: var(--text-muted); font-weight: 600; }
.amv-cuenta__num { margin: 0; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; font-weight: 800; color: var(--accent-texto); font-variant-numeric: tabular-nums; }
.amv-cuenta__pie { margin: 0; color: var(--text-secondary); }
.amv-final { position: fixed; left: 50%; bottom: var(--sp-6); z-index: 60; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-5); width: min(36rem, calc(100vw - 32px)); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--bg-panel); box-shadow: var(--sombra-modal); outline: 1px solid var(--accent); animation: agv-sube 320ms cubic-bezier(.2,.8,.2,1) both; }
.amv-final p { margin: 0; color: var(--text-secondary); }
.amv-final b { color: var(--text-primary); }
[data-amistoso-vivo] [data-f="ayuda-cambio"] { display: none; }

/* LOS DOS NOMBRES DEL TÍTULO DE «LOS NÚMEROS» SE PARTEN (8/10/2026): con dos
   clubes largos —«Atlético de Madrid · Real Sociedad»— el rótulo iba en un
   renglón y corría la pantalla a 399 en un teléfono de 390. */
.band__sub { flex-wrap: wrap; gap: 2px var(--sp-3); }
.band__sub > .label:not(:first-child), .band__sub .label { white-space: normal; min-width: 0; overflow-wrap: anywhere; }

/* A 320 (8/10/2026, barrido del modo clubes en el teléfono): las cuatro
   lecturas de la pizarra no entran en un renglón —con los botones sin partir,
   «El dibujo real» se salía— y la tabla de «Tus decisiones» pedía 349 en 298.
   Las lecturas ruedan de costado y la tabla se aprieta una letra. */
@media (max-width: 360px) {
  .ets-lecturas { overflow-x: auto; scrollbar-width: none; }
  .ets-lecturas::-webkit-scrollbar { display: none; }
  .ets-lecturas button { flex: none; }
  .ets-tabla { font-size: var(--fs-xs); }
  .ets-tabla th { letter-spacing: 0; }
  .ets-tabla th, .ets-tabla td { padding-inline: 1px; }
}

/* EL MAPA DE CALOR de «Territorio» (9/10/2026). La cancha oscura para que el
   color hable; las líneas por encima del calor; los dos equipos dibujados y
   uno visible, con un fundido al cambiar; y debajo la escala y los números
   por tercio y por carril. */
.ets-pizarra--calor { background: radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--verde-400) 16%, #0b1410), #070c0a); }
.ets-pizarra--calor .ets-cal { stroke: rgb(255 255 255 / 0.55); stroke-width: 0.32; }
.ets-pizarra--calor .ets-flecha { stroke: rgb(255 255 255 / 0.6); }
.ets-calor-capa { opacity: 0; transition: opacity 420ms cubic-bezier(.2,.7,.2,1); }
.ets-pizarra--calor[data-quien="nos"] .ets-calor-capa[data-calor="nos"],
.ets-pizarra--calor[data-quien="riv"] .ets-calor-capa[data-calor="riv"] { opacity: 1; }
.ets-calor-respira > g { transform-box: fill-box; transform-origin: center; animation: ets-calor-entra 700ms cubic-bezier(.16,1,.3,1) both; }
@keyframes ets-calor-entra { from { opacity: 0; transform: scale(0.94); } }
.ets-casilla { fill: transparent; stroke: none; display: none; }
.ets-pizarra--calor[data-quien="nos"] .ets-casilla[data-calor="nos"],
.ets-pizarra--calor[data-quien="riv"] .ets-casilla[data-calor="riv"] { display: inline; }
.ets-casilla:hover { fill: rgb(255 255 255 / 0.07); stroke: rgb(255 255 255 / 0.35); stroke-width: 0.25; stroke-dasharray: 1 0.8; }
.ets-pie[data-quien] span { display: none; }
.ets-pie[data-quien="nos"] span[data-calor="nos"], .ets-pie[data-quien="riv"] span[data-calor="riv"] { display: inline; animation: ets-calor-texto 300ms ease both; }
@keyframes ets-calor-texto { from { opacity: 0; } }

.ets-calor-pie { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.ets-calor-escala { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.ets-calor-escala i { width: min(220px, 40%); height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgb(56 99 235 / .5), rgb(34 197 94 / .8), rgb(234 200 8 / .9), rgb(249 115 22), rgb(239 48 56)); }
.ets-calor-res { display: none; gap: var(--sp-2); }
.ets-calor-pie[data-quien="nos"] .ets-calor-res[data-calor="nos"], .ets-calor-pie[data-quien="riv"] .ets-calor-res[data-calor="riv"] { display: grid; animation: ets-calor-texto 300ms ease both; }
.ets-calor-fila { display: grid; grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--sp-2); }
.ets-calor-fila .label { color: var(--text-muted); }
.ets-calor-fila > div { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 6px var(--sp-2); border-radius: 12px; background: color-mix(in srgb, var(--bg-raised) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.ets-calor-fila b { font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ets-calor-fila small { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
@media (max-width: 640px) {
  .ets-calor-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ets-calor-fila .label { grid-column: 1 / -1; text-align: center; }
  .ets-calor-fila > div { flex-direction: column; align-items: center; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .ets-calor-capa, .ets-calor-respira > g { transition: none; animation: none; } }

/* EL LATIDO DEL MAPA DE CALOR (9/10/2026): el calor respira —se aviva y se
   calma— y en la zona más caliente late un anillo, como un pulso. */
.ets-calor-respira { transform-box: fill-box; transform-origin: center; animation: ets-calor-respira 2.8s ease-in-out 700ms infinite; }
@keyframes ets-calor-respira { 0%, 100% { opacity: 0.86; transform: scale(1); } 50% { opacity: 1; transform: scale(1.012); } }
.ets-calor-pulso circle { fill: none; stroke: rgb(255 214 120 / 0.9); stroke-width: 0.35; transform-box: fill-box; transform-origin: center; animation: ets-calor-anillo 2.8s cubic-bezier(.2,.6,.3,1) 700ms infinite; opacity: 0; }
.ets-calor-pulso circle:nth-child(2) { animation-delay: 2.1s; }
.ets-calor-pulso .ets-calor-nucleo { fill: rgb(255 236 190); stroke: none; opacity: 0.9; animation: ets-calor-nucleo 1.4s ease-in-out infinite; }
@keyframes ets-calor-anillo { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes ets-calor-nucleo { 0%, 100% { opacity: 0.55; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ets-calor-respira, .ets-calor-pulso circle { animation: none; } .ets-calor-pulso circle:not(.ets-calor-nucleo) { display: none; } }