/* Jornada — en vivo y cerrada. Móvil primero, 430px, misma marca que el draft.
   Los colores salen de app/css/marca.css; aquí no se define ni uno.

   Todo lo que se ve aquí es un número que ya viene sumado del cierre: esta pantalla
   NO suma puntos ni ordena la clasificación. Si algo no cuadra, cuadra en el motor. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  /* La disposición (columna, centrada) y el fondo salen de marca.css. */
  background: var(--negro);
  color: var(--crema);
  font-family: "Barlow Condensed", ui-monospace, Consolas, sans-serif;
  font-size: 15px;
  /* EL DESLIZAR DE MÁNAGER EN MÁNAGER YA ESCUCHA EN TODO EL `body` (Jepi, 3-sep-2026: "toda la
     pantalla"), pero esto se quedó sin decir: sin `touch-action`, el móvil trata cualquier
     gesto que empieza sobre `body` como candidato a scroll y a veces se lo queda ANTES de que
     el JS reciba un `pointerup` limpio con el que medir el desplazamiento -por eso "cada vez que
     deslizas no desliza" (Jepi, 3-sep-2026): el gesto no llegaba a completarse, no es que
     completara y no navegara. `pan-y` le dice al navegador "el vertical es tuyo, el horizontal
     es de JS" en TODA la pantalla, no solo en la franja vieja del marcador (`.marcador-cuerpo`,
     más abajo, que se queda con su propio `pan-y` por si algún día vuelve a moverse sola). */
  touch-action: pan-y;
}

.app { width: 100%; max-width: 430px; padding-bottom: 40px; transition: opacity 120ms ease; }

/* EL PRIMER INSTANTE DEL TOQUE, no solo el resultado final (Jepi, 3-sep-2026, sobre cambiar de
   mánager: "va bastante trabado... aun no es fluido"). `refrescar()` ya evita la tapa de
   "cargando" al volver a esta pestaña o al saltar de mánager, y con razón —la pantalla ya tiene
   algo que enseñar—, pero sin ningún aviso mientras dura la petición un toque parecía no haber
   hecho nada hasta que, de golpe, cambiaban los datos: la lentitud de la red se sentía como si el
   gesto no hubiera funcionado. `aria-busy` ya lo pone `render()` en el mismo instante que arranca
   la carga, así que atenuar la pantalla en cuanto se marca es feedback INMEDIATO, no hay que
   esperar a nada. `pointer-events: none` de paso evita un segundo toque mientras el primero
   todavía está en camino. */
body[aria-busy="true"] .app { opacity: 0.55; pointer-events: none; }

/* ── Carga: tapa hasta tener el view model, como en el draft ──────────────── */



/* `girar` vive en marca.css, con la tapa de carga que la usa. */


/* ── Carril ───────────────────────────────────────────────────────────────── */






/* EL NOMBRE DE LA COMPETICIÓN CON SU ESCUDO. En línea y alineados por el centro: el escudo es del
   alto de la mayúscula, no del bloque, para que no empuje la fila hacia abajo.
   TODO EN LA MISMA FILA (Jepi, 3-sep-2026: "lo quiero todo en la misma fila, no hace falta en
   dos") — nombre, ronda de DIVIETO Y las ligas de origen, los tres juntos; `flex-wrap` es solo la
   red de seguridad para un ancho tan estrecho que de verdad no quepa, no el diseño por defecto. */
.jornada-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.jornada-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  /* MISMA TIPOGRAFÍA QUE EL TÍTULO DEL DRAFT (Jepi, 3-sep-2026: "tiene que estar en la misma
     fuente que está el título de draft") — Bebas Neue a 24px, no la Barlow Condensed en negrita
     que llevaba antes: ahí es donde más se lee "qué estoy jugando" en las dos pantallas, y
     tenían dos pesos distintos para decir lo mismo. */
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--crema);
}
.jornada-escudo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.jornada-nombre-txt { min-width: 0; }
/* LA JORNADA QUE ES DE DIVIETO, PEGADA AL TÍTULO (Jepi, 3-sep-2026: mismo tratamiento que el
   draft). Vacío -sin `.textContent`- cuando el paquete no la trae, y al estar vacío no deja un
   gap huérfano junto al título. Mismo tamaño que en el draft (18px), no el más pequeño de antes. */
.jornada-ronda {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--oro-claro);
}

/* DE QUÉ COMPETICIONES SALE LA JORNADA: solo escudo y ronda -mismo motivo que el draft: con
   varias ligas, el nombre de cada una desbordaba la fila a una segunda línea en móvil-. El nombre
   sigue viajando en el `alt` del escudo para quien use lector de pantalla.
   AL OTRO LADO DE LA FILA (Jepi, 3-sep-2026: "pegado al otro lado, justificado al otro lado"):
   `margin-left: auto` la empuja hasta el borde derecho, dejando nombre+ronda a la izquierda,
   mientras quede hueco que repartir -en un móvil tan estrecho que no quepa nada, `flex-wrap` en
   `.jornada-titulo` la manda a su propia línea antes que encogerla. */
.jornada-ligas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.jornada-liga {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--crema-suave);
}
.jornada-liga-escudo { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.jornada-liga-nombre { white-space: nowrap; }







/* ── MIS PUNTOS ─────────────────────────────────────────────────────────────────────
   Reorganizado entero el 17-ago-2026 a peticion de Jepi. Antes era una banda con la cifra, tres
   numeros sueltos al lado y una linea de texto debajo; la cifra que se viene a mirar competia con
   todo lo demas y el "8/11" no lo entendia nadie sin que se lo contaran.

   Ahora: el rotulo, LA CIFRA sola y centrada, y debajo dos espacios —uno por concepto— que dicen
   de donde sale su numero. */
/* SIN CAJA (Jepi, 31-ago-2026: "no me gusta que sea un cuadrado, ahora mismo está muy sucio").
   Pasó por dos formas antes de esta: primero una tarjeta con título arriba, cifra centrada y dos
   cajas con borde para el desglose (17-ago), luego una franja con borde y fondo propios en dos
   filas (mismo 31-ago, más temprano). Las dos seguían siendo UN BLOQUE, con su contorno separando
   "esto" del resto de la pantalla. Ahora no hay contorno: el rótulo arriba, sin fondo ni borde, y
   debajo tres columnas sueltas que solo se separan por un filete fino entre cada una — respira con
   la pantalla en vez de leerse como una tarjeta aparte. */
.marcador-jornada {
  position: relative;
  margin: 4px 12px 10px;
  padding: 8px 4px 4px;
}
/* EL NOMBRE, A TODO EL ANCHO Y MÁS GRANDE (Jepi, 31-ago-2026: primero "que ocupe todo el espacio
   lineal el nombre", luego "tiene que crecer de tamaño"). Antes compartía fila con los puntos y
   se quedaba en 150px a 10px de letra: un nombre de rival un poco largo —"Puntos de Mitusinho"—
   no cabía ni recortado con "…" se entendía quién era. Con su propia franja arriba y más grande,
   un nombre normal cabe entero y se lee de un vistazo, con las flechas de saltar de rival en los
   extremos. */
.marcador-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 20px;
  letter-spacing: 1.5px;
  color: var(--crema-suave);
  text-transform: uppercase;
}
/* El rótulo en sí, centrado entre las flechas cuando las hay. RECORTA CON "…" en vez de estirar
   la banda: incluso a todo el ancho, un nombre extremo no puede empujar las flechas fuera de la
   pantalla. */
.marcador-label-txt {
  letter-spacing: inherit;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
/* LAS FLECHAS PARA SALTAR DE RIVAL EN RIVAL (Jepi, 17-ago-2026), en la misma linea que el nombre
   al que se refieren. Son enlaces de verdad —misma pantalla, otro managerId— igual que las filas
   de la clasificacion: se abren en otra pestaña, el boton de atras deshace el salto, y funcionan
   aunque el modulo de la pantalla no llegue a montarse.

   34x28 de área de toque: por debajo de eso el dedo falla. Llevan su propio icono (Jepi,
   31-ago-2026): los caracteres "◀"/"▶" sueltos no llevaban el trazo de nada más en esta pantalla.
   Sin caja alrededor (Jepi, 31-ago-2026: "sin el cuadro exterior") — el icono solo, con un aviso
   suave al pulsar para que el toque no quede mudo. */
.marcador-flecha {
  flex-shrink: 0;
  width: 34px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--oro);
  text-decoration: none;
}
.marcador-flecha:active { background: color-mix(in srgb, var(--oro) 15%, transparent); }
/* LA PUERTA DE VUELTA, debajo de las tres columnas. Desde el equipo de un rival no hay otra forma
   de volver al tuyo que el boton de atras del navegador, asi que tiene que estar; pero es lo
   ultimo que se busca, no lo primero que se lee, y por eso va centrada y en pequeño. */
.marcador-volver-fila { text-align: center; }
.marcador-volver {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--crema-suave);
  text-decoration: underline;
}
/* TRES COLUMNAS, CON FILETES ENTRE ELLAS Y NO ALREDEDOR (Jepi, 31-ago-2026). Girado por peticion
   suya: quiniela a la izquierda, cuanto de tu once ha jugado en el medio, el total a la derecha.
   El total en dorado desde siempre; las otras dos cifras tambien en dorado ("dejar claro que los
   numeros en amarillo son los puntos") aunque no sean puntos en si, para que las tres se lean
   como parte del mismo marcador. Se desliza con el dedo hacia los lados para saltar de rival en
   rival —`configurarDeslizarMarcador` en el JS—, ademas de las flechas de arriba. */
.marcador-cuerpo {
  display: flex;
  align-items: stretch;
  padding: 14px 4px;
  touch-action: pan-y;
}
/* `flex-end`, NO `center` (Jepi, 3-sep-2026: "tiene que estar alineado independientemente de si
   hay numeros o el tamaño"). Las cuatro columnas llevan letras de tamaño distinto A PROPÓSITO
   (32px la jornada, 18px la quiniela...), y centrar cada bloque valor+etiqueta por su cuenta deja
   la etiqueta de la columna alta más abajo que la de la columna baja: cada una se centra sobre su
   propia altura, no sobre la de sus vecinas. Ancladas al final, las cuatro etiquetas caen siempre
   en la misma línea de abajo pase lo que pase por encima -un número de un dígito o de tres, el
   tamaño de letra que sea. */
.marcador-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 8px;
  min-width: 0;
}
.marcador-col + .marcador-col { border-left: 1px solid rgba(255, 255, 255, 0.14); }
/* POR IMPORTANCIA, no las cuatro con su propio tamaño Y color sueltos (Jepi, 3-sep-2026: "ahora
   cada uno tiene un tamaño y un color... queda raro"). Antes cada columna llevaba su propia
   talla -18/22/28/32px- sin que dijeran nada entre sí; ahora las TRES de contexto (quiniela,
   general, en campo) comparten tamaño y color -la misma pregunta de fondo, "cómo vas"-, y la
   jornada, que es la pregunta de esta pantalla -dónde estás ahora-, es la única más grande y en
   dorado. Una jerarquía con dos niveles, no cuatro números que compiten entre sí. */
.marcador-valor {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.marcador-col--jornada .marcador-valor { font-size: 32px; color: var(--oro-claro); }
.marcador-etq {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
/* LA COLUMNA DE EN CAMPO, CUANDO HAY UN PARTIDO RODANDO (Jepi, 31-ago-2026: "cuando esté un
   partido en juego se puede poner a parpadear o de un color especial"). El punto verde y el
   parpadeo son deliberadamente discretos —esto no es una alarma, es "esto se está moviendo"— y
   respetan a quien pide menos movimiento en pantalla. */
.marcador-col.en-vivo .marcador-valor {
  text-shadow: 0 0 12px color-mix(in srgb, var(--oro-claro) 55%, transparent);
  animation: marcador-pulso 1.6s ease-in-out infinite;
}
.marcador-col.en-vivo .marcador-etq { color: var(--oro-claro); }
.marcador-col.en-vivo .marcador-etq::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 5px;
  vertical-align: middle;
  animation: marcador-punto 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marcador-col.en-vivo .marcador-valor,
  .marcador-col.en-vivo .marcador-etq::before { animation: none; }
}
@keyframes marcador-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes marcador-punto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}

/* Los bloques (.bloque / .bloque-titulo / .bloque-nota) viven en marca.css: los usan
   Jornada, Liga y Admin, y estando aquí eran invisibles para las otras dos. */

/* Aquí vivía el aspecto de la lista "Mi once". La lista se retiró el 12-ago-2026: el campo
   de arriba ya enseña los mismos once con sus puntos y su desglose. */

/* ── CLASIFICACIÓN DE LA JORNADA ──────────────────────────────────────────── */
.clasif-fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* DOS MITADES: quién es (ancho libre) y los tres números que se pueden ordenar (ancho fijo,
   ver `.clasif-col--*` más abajo). Solo la segunda tiene que alinear con la leyenda de arriba. */
.clasif-fila-izq { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.clasif-fila-datos { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.clasif-rank {
  width: 22px;
  text-align: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.clasif-nombre { flex: 1; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.clasif-puntos {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 18px;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: center;
}

/* TU FILA: una franja dorada a la izquierda y un fondo degradado, en vez de una etiqueta suelta
   pegada al nombre — se lee de reojo, sin tener que buscar la palabra "TÚ" entre las demás filas. */
.clasif-fila.yo {
  border: 1px solid color-mix(in srgb, var(--oro) 40%, transparent);
  border-bottom-color: color-mix(in srgb, var(--oro) 40%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 16%, transparent), color-mix(in srgb, var(--oro) 3%, transparent) 70%);
}
.clasif-fila.yo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
}
.clasif-fila.yo .clasif-rank,
.clasif-fila.yo .clasif-nombre,
.clasif-fila.yo .clasif-puntos { color: var(--oro-claro); }
.clasif-yo-marca {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--tinta);
  background: var(--oro-claro);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Desempate provisional: se dice, no se disimula. */


/* ── Procedencia del resultado. Vive dentro de "herramientas de desarrollo" (Jepi,
   3-sep-2026): es trazabilidad para depurar un cierre, no algo que necesite ver quien juega. ── */
.origen { margin: 4px 0 0; font-size: 10px; line-height: 1.6; color: rgba(255, 255, 255, 0.35); word-break: break-all; }
.origen b { color: rgba(255, 255, 255, 0.55); font-weight: 600; }

/* ── Herramientas de desarrollo ───────────────────────────────────────────── */
/* La caja de herramientas vive entera en marca.css: la usan todas las pantallas. */



.pista { font-size: 11px; color: var(--crema-suave); margin: 8px 0 0; line-height: 1.4; }
pre {
  margin: 6px 0 0;
  max-height: 260px;
  overflow: auto;
  /* Sin `font-family`: un `<pre>` YA es monoespaciado por defecto en todo navegador, y aqui
     eso es justo lo que hace falta —es el view model crudo de las herramientas de
     desarrollo, que se lee mejor alineado—. Declararla seria elegir una fuente que no es
     de la marca para no cambiar nada. */
  font-size: 10px;
  color: var(--crema-suave);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── EL DESGLOSE DE UN JUGADOR ─────────────────────────────────────────────────────────
   Se abre al pulsar su carta en el campo (Jepi, 12-ago-2026; en el Mundial se abría igual). En la
   carta cabe una cifra; aquí cabe DE DÓNDE sale: la nota, los eventos, las penalizaciones y con
   qué química jugó. Es la respuesta a "¿por qué este me ha dado 24 y este otro 3?". */
/* ── LA FICHA DE UN JUGADOR ─────────────────────────────────────────────────────────
   Sube desde abajo, como en el Mundial (Jepi, 18-ago-2026). Estaba en línea debajo del campo, y al
   pulsar una carta de la fila de arriba el desglose salía fuera de la pantalla: parecía que la
   carta no respondía. Un panel que sube tapa eso por construcción, se mire la carta que se mire.

   `[hidden]` lo apaga entero —lo garantiza la regla única de marca.css, con su `!important`—, así
   que aquí no hace falta ni una clase `.abierta` ni un `.ficha[hidden]` propio. Escribirlo sería
   volver a poner el parche que ese fichero se quitó de encima. */
.ficha {
  position: fixed;
  inset: 0;
  /* Por encima de la barra de abajo (.dv-barra, z-index 300) y no por debajo: con 60 la barra
     —z-index 300, marca.css— se pintaba ENCIMA del panel, y su fondo opaco tapaba lo último que
     hubiera dentro (la línea de EVENTOS, el TOTAL) aunque el panel cupiera de sobra dentro de su
     88dvh — no era el `vh`/`dvh` de nuevo, era esto: el panel nunca supo que la barra existía.
     500 es el mismo z-index que ya usa su hermana de Análisis (`.an-ficha`, analisis-ui.css) y el
     resto de fichas a pantalla completa del Draft y Liga — aquí no era la excepción a propósito,
     era la única que se había quedado atrás. */
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ficha-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.ficha-panel {
  position: relative;
  width: 100%;
  max-width: 430px;
  /* `vh` en un móvil de verdad se calcula sobre una pantalla que no siempre ves entera: la barra
     de direcciones aparece y desaparece, y `vh` no se entera —mide como si estuviera siempre
     escondida—. El resultado (Jepi, 31-ago-2026: "queda medio cortado en pantalla") es un panel
     que se cree más bajo de lo que la pantalla visible permite, y el contenido de abajo —el
     total— se sale sin que el scroll llegue a notarse. `dvh` sí mide la altura visible de verdad;
     `vh` se queda como red para el navegador que no conozca `dvh` todavía. */
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background: var(--tinta);
  /* El colchón de abajo respeta la barra del sistema en el móvil, que si no tapa el total. */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 14px);
  animation: ficha-sube 0.26s cubic-bezier(0.32, 1.01, 0.65, 1);
}
@keyframes ficha-sube { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Quien haya pedido menos movimiento no lo recibe: el panel aparece y ya está. */
@media (prefers-reduced-motion: reduce) { .ficha-panel { animation: none; } }
/* El asa: no se puede arrastrar, pero dice "esto es un panel que sube" antes de tocarlo. */
.ficha-asa {
  display: block;
  width: 36px;
  height: 4px;
  margin: 9px auto 2px;
  border-radius: 2px;
  background: var(--crema-apenas);
}
.ficha-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ficha-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ficha-pos {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema-tenue);
}
/* Contra quién juega. Vacío desaparece: un "vs —" parece que algo no ha cargado. */
.ficha-rival:empty { display: none; }
.ficha-rival {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.ficha-club:empty { display: none; }
.ficha-club {
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--crema-tenue);
}
/* EL TOTAL, fuera del cuerpo: es la conclusión de la lista, no una línea más de ella. */
.ficha-total:empty { display: none; }
.ficha-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 12px 0;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
}
.ficha-total-lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.ficha-total-val {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.ficha-total-val.negativo { color: var(--pts-negativo); }
.ficha-total-val.alto { color: var(--pts-alto); }
.ficha-total-val.bueno { color: var(--pts-bueno); }
.ficha-total-val.algo { color: var(--pts-algo); }
.ficha-total-val.cero { color: var(--pts-cero); }

.detalle-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}

.detalle-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--crema);
}

.detalle-cerrar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--negro);
  color: var(--crema);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.detalle-cuerpo { padding: 4px 12px 10px; }

/* `.detalle-linea` se fue a marca.css: la usa Liga también. Aquí quedan sus variantes. */

.detalle-etiqueta { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--crema-suave); }
/* DE DÓNDE SALE ESE NÚMERO, debajo de su etiqueta y en pequeño. Es la pieza que hacía que la ficha
   del Mundial se entendiera sin haberse leído el reglamento, y cuesta una línea de texto. */
.detalle-porque {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--crema-apenas);
}
/* Las cifras en Bebas: son datos que se comparan entre líneas, y sus dígitos van a la par. */
.detalle-valor {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--crema);
}
.detalle-valor.negativo { color: var(--pts-negativo); }
.detalle-valor.alto { color: var(--pts-alto); }
.detalle-valor.bueno { color: var(--pts-bueno); }
.detalle-valor.algo { color: var(--pts-algo); }
.detalle-valor.cero { color: var(--pts-cero); }

/* La química se separa: no es un sumando, es un MULTIPLICADOR sobre la nota. */
.detalle-linea.quimica .detalle-valor { color: var(--oro-claro); }
.detalle-linea.total .detalle-etiqueta { color: var(--crema); font-weight: 700; }
.detalle-linea.total .detalle-valor { font-size: 20px; }

.detalle-vacio { padding: 10px 0; font-size: 12px; line-height: 1.5; color: var(--crema-suave); }

/* ORDENAR POR CATEGORÍA (Jepi, 2-sep-2026): "por tipo, no todos los 3 juntos" -puntos de la
   jornada, acumulado general, o aciertos de 1X2, cada una con su propia flecha. Reordena la
   tabla ya recibida por uno de los tres números que cada fila ya trae; nunca calcula uno nuevo.
   A la derecha y pequeño porque es un ajuste de cómo se mira, no una segunda pregunta como el
   mando de las dos caras. */
/* LA LEYENDA ES EL MANDO: los mismos tres botones que reordenan la tabla hacen de cabecera de
   columna, cada uno con el mismo ancho fijo -`.clasif-col--*`- que el número que tiene debajo
   (Jepi, 2-sep-2026: "que este alineado lo que marca el orden con la clasificacion"). El mismo
   padding derecho que `.clasif-fila` (10px) para que el botón de la derecha y el número de
   PUNTOS de cada fila terminen en el mismo borde. */
.clasif-orden { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 8px; padding-right: 10px; }
.clasif-orden-boton {
  padding: 5px 2px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--crema-suave);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
}
.clasif-orden-boton:active { background: rgba(255, 255, 255, 0.06); }
.clasif-orden-boton.activo { border-color: var(--oro); color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, transparent); }

/* LOS TRES ANCHOS COMPARTIDOS entre el botón de arriba y el número de cada fila -es la MISMA
   regla la que fija los dos, para que no se puedan desalinear cambiando uno y no el otro. */
.clasif-col--1x2 { width: 40px; }
.clasif-col--general { width: 46px; }
.clasif-col--puntos { width: 42px; }

/* Cada fila de la clasificación es un ENLACE al once de ese mánager (Jepi, 12-ago-2026). Solo
   desde el deadline: antes, el servidor se niega y la fila no se pinta como enlace. */
a.clasif-fila { text-decoration: none; color: inherit; cursor: pointer; }
a.clasif-fila:active { opacity: 0.7; }
/* Cuántos de sus once han jugado ya: dos mánagers con los mismos puntos no están igual si a uno
   le quedan nueve por jugar. */
.clasif-jugados {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  color: var(--crema-suave);
  flex-shrink: 0;
}
.clasif-puntos.sin-datos { color: rgba(255, 255, 255, 0.3); }

/* SUS ACIERTOS DE 1X2, para ti y cada rival (Jepi, 2-sep-2026). Mismo peso visual que
   `.clasif-jugados` -es la misma clase de dato, "cuánto lleva de lo suyo"- y no el del marcador
   de puntos, que es lo que importa de verdad en esta fila. */
.clasif-aciertos {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  color: var(--crema-suave);
  flex-shrink: 0;
  text-align: center;
}

/* EL ACUMULADO DE LA LIGA, al lado de los puntos de la jornada.
   Va deliberadamente MÁS PEQUEÑO Y MÁS TENUE: la pregunta de esta pantalla sigue siendo la
   jornada, y el acumulado es el contexto. Con los dos números al mismo peso no se sabría cuál
   se está mirando, que es peor que no enseñar el segundo.
   Tabular para que las cifras queden en columna aunque tengan distintos dígitos. */
.clasif-acumulado {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 12px;
  color: var(--crema-suave);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: center;
  /* Nada de `margin-left: auto`: quien empuja `.clasif-fila-datos` a la derecha es
     `.clasif-fila-izq` con su `flex: 1`, y dos elementos disputándose ese papel dejan un hueco
     donde no toca. */
}

/* JORNADA DIVIDIDA: la jornada se partió en dos tandas y todavía le quedan partidos.
   Se monta llenándolo y se esconde con `:empty`, nunca con `[hidden]`, que lo pierde
   cualquier clase con `display`. En azul y no en oro para que no se confunda con el
   marcador, que es de quien es el oro en esta pantalla. */
.dividida:empty { display: none; }
.dividida {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--aviso-borde);
  border-radius: 10px;
  background: var(--aviso-fondo);
}
.dividida-titulo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aviso);
}
.dividida-txt {
  font-size: 13px;
  color: var(--crema);
}
/* ── ESPERANDO: la siguiente jornada todavía no tiene onces ──────────────────
   Sale en vez de un resultado cuando `paraJornada` (jornadas-vivas.mjs) no encuentra ninguna
   jornada con onces congelados -el primer día de la temporada, con el draft recién abierto y
   nada por detrás. Centrado, sin campo ni clasificación debajo: no hay nada de eso que pintar
   todavía. */
.esperando-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 40px 12px;
  padding: 28px 16px;
  text-align: center;
  border: 1px solid var(--aviso-borde);
  border-radius: 12px;
  background: var(--aviso-fondo);
}
.esperando-reloj { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.esperando-nombre {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oro);
}
.esperando-cuando { font-size: 13px; color: var(--crema-suave); }

/* La fila en la que estás parado: en la jornada de un rival, si no se marca, la tabla no dice
   cuál de las once filas estás mirando. */
.clasif-fila.mirando {
  outline: 1px solid var(--oro);
  outline-offset: -1px;
}

/* ── UN BLOQUE, DOS CARAS ──────────────────────────────────────────────────
   La clasificación de tu liga y tu quiniela comparten sitio y se cambian con las flechas
   (Jepi, 13-ago-2026). La cara dormida se VACÍA desde el JS; aquí solo se apaga la caja para
   que no deje su hueco en blanco. */
/* El bloque de dos caras. Hereda de .bloque (marca.css) y solo añade que su cabecera es un
   mando: flecha, rótulo, flecha. */
.caras { position: relative; }
.caras-mando { margin-bottom: 10px; }
/* LAS DOS CARAS, COMO PESTAÑAS. Antes aquí iba el nombre de la cara actual y, al otro extremo, una
   nota con la liga y cuántos mánagers; la otra cara solo se adivinaba por las flechas. Ahora se ven
   las dos: la de al lado, apagada, dice que existe y lleva a ella de un toque. */
/* PASTILLA SEGMENTADA, A TODO EL ANCHO (Jepi, 31-ago-2026): las dos flechas sueltas se leían como
   "ir de mánager en mánager" —no es lo que hacen, cambian de CARA— porque nada en su forma decía
   otra cosa. Un mando segmentado con las dos opciones dentro no deja sitio a esa lectura: se ve que
   son dos vistas del mismo bloque, y cualquiera de las dos se pulsa directamente, sin flechas que
   rodear. Ocupa todo el ancho del bloque —nada de encogerse a la izquierda— para que las dos mitades
   se lean como dos opciones igual de válidas, no como un botón perdido en una esquina. */
.caras-titulo {
  display: flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.caras-tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  /* Sin sangrar el último espaciado, el texto se centra un pelín hacia la izquierda: el
     `letter-spacing` añade el hueco DETRÁS de cada letra, también de la última. */
  text-indent: 1px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  cursor: pointer;
}
/* La activa se ve activa: rellena de oro, con la tinta oscura encima para que el contraste no
   dependa de un color de texto claro sobre un fondo también claro. */
.caras-tab.activa {
  color: var(--tinta);
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  cursor: default;
}
/* La cara dormida no ocupa. Se apaga por el dato que pone el JS, no por `hidden`: `hidden` lo
   pierde cualquier regla con `display`, y esta app ya pagó una pantalla entera por eso. */
.caras-cuerpo[data-activa="false"] { display: none; }

/* ── LA QUINIELA ───────────────────────────────────────────────────────────
   Una fila por partido: los dos equipos, tu signo y el que salió. */
.quiniela-marcador {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--borde);
}
.quiniela-label { font-size: 10px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.45); }
/* NUMEROS EN BEBAS (Jepi, 31-ago-2026: "esta tipografia no me suena"). Se quedaron en la fuente
   del texto corrido cuando el resto de cifras de la pantalla ya usaban Bebas Neue —el mismo fallo
   que ya se corrigio una vez en `.clasif-puntos` (17-ago-2026)—; aqui se les habia escapado. */
.quiniela-total { font-family: "Bebas Neue", Impact, sans-serif; font-size: 24px; color: var(--crema); font-variant-numeric: tabular-nums; }
.quiniela-puntos { font-family: "Bebas Neue", Impact, sans-serif; font-size: 14px; color: var(--pts-bueno); font-variant-numeric: tabular-nums; }
/* Lo que todavía no ha pasado se dice en voz baja: no es un resultado. */
.quiniela-puntos.pendiente { color: var(--crema-suave); font-weight: 400; }
.quiniela-vacia { font-size: 13px; color: var(--crema-suave); }

/* TARJETA CON BORDE DE COLOR (Jepi, 2-sep-2026, con foto del Mundial de referencia): verde si
   acertaste, roja si fallaste, neutra mientras no se sabe o si no marcaste nada. El borde entero
   es la marca, no un detalle suelto -es lo primero que se lee al pasar la vista por la lista. */
.quiniela-partido {
  margin-bottom: 8px;
  padding: 10px 10px 8px;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.quiniela-partido.acertado { border-color: var(--pts-bueno); background: color-mix(in srgb, var(--pts-bueno) 8%, transparent); }
.quiniela-partido.fallado { border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 8%, transparent); }

/* ARRIBA: el resultado. Escudo-nombre a cada lado, el signo que salió en medio -grande, es el
   dato que más importa- y un guion mientras no se sabe, nunca una X que se confunda con el
   empate.
   CENTRADO DE VERDAD, dos veces (Jepi, 3-sep-2026: "tendria que tener un punto central y que
   todas esten alineadas"):
     1) `justify-content: center` centra el bloque entero en la tarjeta -antes dependía de
        `margin: auto` en los dos nombres, que solo centra si YA hay hueco libre que repartir;
        con nombres largos que llenaban su caja no quedaba hueco que centrar nada.
     2) Los dos nombres miden LO MISMO siempre (ver `.quiniela-nombre` debajo) -si no, el bloque
        entero puede estar centrado en la tarjeta y el marcador, dentro de él, seguir cayendo a
        un lado porque "ELCHE" ocupa menos que "ATHLETIC CLUB". */
.quiniela-partido-resultado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.quiniela-nombre {
  flex: 0 1 100px;
  width: 100px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--crema);
}
.quiniela-nombre--local { text-align: right; }
.quiniela-nombre--visitante { text-align: left; }
.quiniela-escudo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.quiniela-signo-real {
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--oro-claro);
}
.quiniela-signo-real.pendiente { color: rgba(255, 255, 255, 0.25); font-weight: 400; font-size: 18px; }

/* ABAJO: tu apuesta, en una píldora del mismo color que el borde -llena si acertaste o
   fallaste, hueca -solo el contorno- mientras no se sabe o si no marcaste nada: un partido por
   jugar no es un fallo, y no marcar no es lo mismo que fallar. */
.quiniela-apuesta {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--borde);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
}
.quiniela-apuesta.acertado { background: var(--pts-bueno); border-color: var(--pts-bueno); color: var(--tinta); }
.quiniela-apuesta.fallado { background: var(--rojo); border-color: var(--rojo); color: var(--tinta); }

/* ── LO QUE SE ESTÁ JUGANDO AHORA MISMO ────────────────────────────────────
   Entre el once y la clasificación. Es un AVISO, no un bloque fijo: cuando no rueda nada no está,
   y por eso desaparece con `:empty` en vez de quedarse como un hueco que nadie lee. */
.en-juego:empty { display: none; }
.en-juego {
  margin: 0 12px 12px;
  padding: 10px 12px;
  border: 1px solid var(--quimica-verde);
  border-radius: 12px;
  background: color-mix(in srgb, var(--quimica-verde) 8%, var(--panel));
}
.en-juego-titulo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--quimica-verde);
  margin-bottom: 8px;
}
.en-juego-partido + .en-juego-partido {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.en-juego-equipo { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.en-juego-escudo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.en-juego-club {
  flex: 1;
  font-size: 13px;
  color: var(--crema);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.en-juego-goles {
  flex-shrink: 0;
  min-width: 18px;
  text-align: right;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--crema);
}
.en-juego-pie {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--crema-suave);
  text-transform: uppercase;
}
/* EL MINUTO ES EL DATO VIVO del pie, y hasta hoy no tenía regla: heredaba el gris del pie y se
   leía igual que "tu quiniela: 1", que es una nota. Se distingue en crema, que es lo que cambia
   cada vez que se mira. Lo encontró el test de estilos el 15-ago-2026, no una captura. */
.en-juego-minuto { color: var(--crema); font-weight: 700; }
/* Tu signo, sin decir si va bien: el partido no ha terminado. */
.en-juego-quiniela { color: var(--oro-claro); font-weight: 700; }

/* LOS PARTIDOS FUERA DE LA QUINIELA: mismo molde que `.en-juego` (bloque que solo ocupa cuando
   trae algo), pero neutro -sin el borde verde de "en juego ahora mismo", porque esto es solo un
   marcador de consulta, no una señal de "esto está pasando ya". */
.otros-partidos:empty { display: none; }
.otros-partidos {
  margin: 0 12px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: var(--panel);
}
.otros-partidos-titulo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--crema-suave);
  margin-bottom: 8px;
}
.otros-partidos-partido {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
}
.otros-partidos-partido + .otros-partidos-partido {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.otros-partidos-escudo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.otros-partidos-nombre {
  flex: 1;
  font-size: 13px;
  color: var(--crema);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.otros-partidos-nombre--local { text-align: right; }
.otros-partidos-nombre--visitante { text-align: left; }
.otros-partidos-marcador {
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--crema);
}