/* Draft — pantalla de trabajo. No es la pasada de diseño final, pero ya ocupa el sitio
   y las medidas de la real: móvil primero, 430px de ancho máximo, campo de una pieza.
   Medidas portadas del prototipo del Mundial (docs/DRAFT_MUNDIAL_ANATOMIA.md).

   La carta la pinta app/css/cartas.css: aquí solo se le da ancho y hueco.

   Regla dura de marca: verde/naranja/rojo/azul están RESERVADOS a semántica de juego.
   El césped va oscuro a propósito, para no competir con el verde de la química. */

/* Los colores viven en app/css/marca.css (fuente única). Aquí solo se usan. */

* { 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;
}

.app { width: 100%; max-width: 430px; padding-bottom: 40px; }

/* ── Carga: tapa TODO hasta tener el view model ────────────────────────────── */



/* `girar` vive en marca.css, con la tapa de carga que la usa. Estaba aquí, y en jornada-ui y en
   liga-ui, pero NO en la común: por eso el Inicio tenía el spinner parado. */


/* ── Carril: permanente, imposible de confundir ───────────────────────────── */






/* LA CABECERA (Jepi, 3-sep-2026: "esta fatal, hay que darle una vuelta"). Tipografía de impacto
   -la misma que el titular del hero de Inicio, "Bebas Neue"- en vez de la condensada de cuerpo
   que llevaba antes: es el sitio donde más se lee "qué estoy jugando", y hasta ahora no
   destacaba de una etiqueta de formulario. */
.jornada-titulo { display: flex; align-items: baseline; gap: 8px; }
.jornada-nombre {
  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);
}
/* LA JORNADA QUE ES DE DIVIETO, PEGADA AL TÍTULO (Jepi, 3-sep-2026: "J3... se tiene que poner
   seguido de superliga divieto"). Vacío -sin `.textContent`- cuando el paquete no la trae, y al
   estar vacío no ocupa hueco ni deja un gap huérfano junto al título. */
.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, DEBAJO: solo escudo y ronda (Jepi, 3-sep-2026: "no
   pondremos el nombre de la liga, en solo es escudo y el numero de jornada" -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. */
.jornada-ligas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.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; }

/* EL RELOJ PEQUEÑITO, al otro lado de la cabecera del título -mismo componente que el hero de
   Inicio (tres tarjetas, mismo cálculo en cuenta-atras.mjs), a menos de la mitad de su tamaño:
   aquí es contexto, no el titular de la pantalla. */
.mini-reloj { display: flex; align-items: flex-start; gap: 0; flex-shrink: 0; }
.mini-flip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini-flip-cara {
  width: 30px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: linear-gradient(180deg, #252525 0%, #101010 100%);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 13px;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.mini-flip-rotulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.mini-flip + .mini-flip { margin-left: 3px; }


/* ── Avisos ───────────────────────────────────────────────────────────────── */
/* `.aviso-box.ok` se fue a marca.css el 11-ago-2026, con `.aviso-box` y `.aviso-box.error`,
   que siempre vivieron alli. Estando aqui, el modificador de una pieza COMPARTIDA solo
   existia para el Draft: el aviso de exito de Admin salia en oro y el de aqui en verde. */

/* ── CAMPO ────────────────────────────────────────────────────────────────── */
/* El césped y los once huecos viven en `campo.css`: los usan el Draft Y la Jornada. Estaban
   aquí, y en cuanto la Jornada quiso el mismo campo se repitió el patrón de siempre — una pieza
   compartida en la hoja de una pantalla. Aquí se queda solo lo del Draft. */

/* Las lineas de quimica se fueron a campo.css el 13-ago-2026: las pintan el Draft y la
   Jornada, y viviendo aqui la Jornada las pedia a una hoja que no carga. */

/* El campo y los huecos viven en : los usan el Draft y la Jornada. Aqui se queda
   solo lo del Draft — que su hueco se toca, los halos de quimica y el arrastre. */
.slot { cursor: pointer; }
.slot.sucio::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dashed var(--oro);
  border-radius: 4px;
  pointer-events: none;
}
.slot[disabled] { cursor: default; }

/* Hueco vacío: la CARTA NEGRA del Mundial, no un rectángulo punteado. Late despacio para
   invitar a tocarla — es la diferencia entre un campo que espera y un campo roto. */
.slot-vacio {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: latido 2.4s ease-in-out infinite;
  pointer-events: none;
  display: block;
}
@keyframes latido {
  0%, 100% { opacity: 0.65; filter: drop-shadow(0 0 0 color-mix(in srgb, var(--oro) 0%, transparent)); }
  50% { opacity: 1; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--oro) 45%, transparent)); }
}

/* Sombreado de la carta por tramo: de un vistazo se ve quién está bien conectado.
   Los drop-shadow cortos apilados engordan el contorno, el largo hace el halo. */
.slot.quimica-verde .carta {
  filter:
    drop-shadow(0 0 2px var(--quimica-verde)) drop-shadow(0 0 2px var(--quimica-verde))
    drop-shadow(0 0 2px var(--quimica-verde)) drop-shadow(0 0 10px color-mix(in srgb, var(--quimica-verde) 80%, transparent));
}
.slot.quimica-naranja .carta {
  filter:
    drop-shadow(0 0 2px var(--quimica-naranja)) drop-shadow(0 0 2px var(--quimica-naranja))
    drop-shadow(0 0 2px var(--quimica-naranja)) drop-shadow(0 0 9px color-mix(in srgb, var(--quimica-naranja) 75%, transparent));
}
/* Tramo nulo: rojo apagado. Se ve que ese jugador no está enganchado a nada. */
.slot.quimica-rojo .carta {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--quimica-rojo) 85%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--quimica-rojo) 45%, transparent));
}

.slot-quimica {
  position: absolute;
  top: -5px;
  right: -4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
  background: var(--quimica-rojo);
  border-radius: 4px;
  padding: 0 4px;
  z-index: 4;
}
.slot-quimica.verde { background: var(--quimica-verde); }
.slot-quimica.naranja { background: var(--quimica-naranja); }

/* ── Mover cartas entre huecos de la MISMA posición ────────────────────────
   El draft es un puzzle: colocar la carta en el hueco correcto es media partida.
   Solo se permite dentro de la misma posición; los destinos válidos se marcan. */
.slot.drag-target { border-radius: 4px; animation: destino 0.8s ease-in-out infinite; }
@keyframes destino {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--oro-claro) 30%, transparent); }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--oro-claro) 85%, transparent), 0 0 8px color-mix(in srgb, var(--oro-claro) 35%, transparent); }
}
.slot.arrastrando { opacity: 0.35; }
#drag-ghost {
  position: fixed;
  z-index: 600;
  width: 65px;
  pointer-events: none;
  opacity: 0.88;
  transform: translate(-50%, -50%) scale(1.1);
}
#drag-ghost .carta { width: 65px; }
/* Sin esto `elementFromPoint` aterriza en la imagen y no en el hueco, y el arrastre suelta la
   carta en el sitio equivocado.
   El `-webkit-user-drag` que había aquí se fue el 14-ago-2026 a donde vive cada selector:
   `.slot img` a campo.css y `.carta img` a cartas.css. Estaba en la hoja del Draft, así que la
   pantalla de JORNADA —que carga campo.css y cartas.css pero NO esta— se quedaba sin él y allí
   también hay un campo lleno de cartas. Es el mismo patrón que vigila `estilos-completos`: una
   regla compartida guardada en la hoja de UNA pantalla. */
.slot img, #drag-ghost img { pointer-events: none; }

/* El marcador de overall se fue a campo.css el 13-ago-2026 y se llama .campo-overall*: lo
   pintan el Draft y la Jornada, y "marcador" a secas chocaba con el marcador de PUNTOS de la
   Jornada, que dice otra cosa distinta. */

.contador-once {
  position: absolute;
  left: 5%;
  bottom: 5%;
  z-index: 5;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ── Guardar ──────────────────────────────────────────────────────────────── */
.guardar-zona { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-guardar {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--tinta);
  background: var(--oro-claro);
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  cursor: pointer;
}
.btn-guardar:disabled { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.38); cursor: default; }

.btn-guardar.pendiente { animation: pulso 1.8s ease-out infinite; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro-claro) 55%, transparent); }
  60% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--oro-claro) 0%, transparent); }
}
.guardar-estado { font-size: 13px; letter-spacing: 1px; color: var(--crema-suave); text-transform: uppercase; }

/* ── ONCE / QUINIELA / REPARTOS, EN PESTAÑAS (Jepi, 3-sep-2026: "como en jornada... ahora
   tienes que scrollear mucho y el tema de que puedes guardar XI para ir haciendo pruebas esta
   muy escondido"). Mismo componente que `.caras` en jornada-ui.css -mismas clases, mismo
   aspecto- para que cambiar de pantalla no obligue a reaprenderlo. */
.caras { position: relative; }
.caras-mando { margin-bottom: 10px; }
.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;
  text-indent: 1px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.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 cada cuerpo sigue llevando el suyo -si no hay quiniela
   o no hay nada en la memoria, `[hidden]` los saca del todo, con o sin pestaña activa. */
.caras-cuerpo[data-activa="false"] { display: none; }
/* Cuando el rótulo del bloque se queda solo -la nota, sin el nombre que ya dice la pestaña de
   arriba- se lee mejor a la derecha, donde vivía antes de que el nombre se fuera al mando. */
.bloque-titulo--sola { justify-content: flex-end; }

/* ── Lista del once ─────────────────────────────────────────────────────────
   MARGEN ARRIBA (Jepi, 3-sep-2026): Pruebas de XI pasó a ir primero dentro de Vestuario, así que
   esta lista ya no es lo primero del bloque -antes no le hacía falta separación propia, la ponía
   quien viniera antes en el documento. */
.lista-once { padding: 0 12px; margin-top: 18px; }
.once-fila { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.once-pos { width: 24px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: rgba(255, 255, 255, 0.45); }

.once-club { font-size: 11px; color: var(--crema-suave); }
.once-ovr { font-size: 17px; font-weight: 700; color: var(--oro-claro); }
.once-enlaces { width: 30px; text-align: right; font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.once-tramo { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.once-tramo.verde { color: var(--quimica-verde); }
.once-tramo.naranja { color: var(--quimica-naranja); }
.once-tramo.rojo { color: var(--quimica-rojo); }
/* De DÓNDE le viene la química a ese jugador: escudo del club, logo de liga, bandera.
   Los factores los manda el contrato en connections[].factors. */
.once-fuentes { display: flex; align-items: center; gap: 3px; width: 54px; justify-content: flex-end; }
.once-fuentes img { width: 15px; height: 15px; object-fit: contain; }
.once-bonus { width: 24px; text-align: right; font-size: 12px; font-weight: 700; color: var(--oro); }
.once-bonus.verde { color: var(--quimica-verde); }
.once-bonus.naranja { color: var(--quimica-naranja); }

/* ── Picker: pantalla completa, cartas boca abajo ─────────────────────────── */
.picker {
  /* EL CARRUSEL SE DESLIZA CON EL DEDO, así que nada de aquí dentro se selecciona ni se arrastra
     por su cuenta: un deslizamiento horizontal sobre una carta es la forma más fácil de que el
     navegador crea que quieres seleccionar texto o llevarte la imagen. Se pone en el contenedor
     y no carta a carta para que cubra también la cabecera, el contador y el pie. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* El banquillo del Mundial: el picker no es una caja negra, es la zona de calentamiento. */
  background: var(--negro) url("/assets@f08561b48e/img/banquillo.webp") 0 bottom / 1300px auto no-repeat;
  position: fixed;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 500;
  background: var(--negro);
  display: none;
  flex-direction: column;
}
.picker.abierto { display: flex; }

/* CHAMPIONS — el picker pinta su PROPIO fondo solido (linea de arriba: `background: var(--negro)`,
   una capa fija a pantalla completa, z-index 500), y eso tapa el resplandor+lineas que pone
   `body.tema-champions` en marca.css — por eso en el picker no se veia nada (Jepi, 1-sep-2026).
   Se reutiliza la MISMA variable en vez de copiar el `data:` otra vez aqui. */
body.tema-champions .picker {
  background-image: var(--fondo-champions-imagen);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}
.picker-cab {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.picker-pos { font-size: 14px; letter-spacing: 3px; color: var(--oro-claro); }
.picker-contador { font-size: 13px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.65); }
.picker-cerrar { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 20px; cursor: pointer; padding: 0 0 0 12px; }

.picker-carrusel {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  touch-action: pan-y;
}
.picker-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.picker-item {
  flex-shrink: 0;
  width: 200px;
  perspective: 800px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  position: relative;
}
.picker-item .carta { width: 200px; }

/* Volteo: la carta empieza por la trasera y se gira al centrarse. */
.flipper { position: relative; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.flipper.revelada { transform: rotateY(-180deg); }
.cara { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara.frente { position: absolute; inset: 0; transform: rotateY(-180deg); }
.cara.dorso {
  aspect-ratio: 594 / 928;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 38%, #2a2318 0%, #0b0906 72%);
  border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cara.dorso img { width: 46%; opacity: 0.85; }

.picker-info {
  padding-top: 12px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.picker-info.revelada { opacity: 1; }
.picker-info-nombre { font-size: 24px; font-weight: 600; line-height: 1.05; }
/* De donde es: en oro y algo mayor que el club, porque es la mitad de la quimica y es lo
   que se mira al decidir si una carta engancha con las que ya estan puestas. */
.picker-info-origen { font-size: 15px; color: var(--oro-claro); letter-spacing: 1.5px; text-transform: uppercase; }
.picker-info-sub { font-size: 13px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.5px; }
.picker-info-ovr { font-size: 13px; color: var(--oro-claro); letter-spacing: 1px; }

/* LO QUE CUESTA DE VERDAD, que no es el numero de la esquina de la carta.
   El tope se aplica al total CON quimica: enganchar suma +1 o +2 al overall de cada jugador
   —naranja y verde— y eso tambien ocupa tope. Asi que aqui va la resta entre el once de ahora y
   el que quedaria: overall de la carta mas lo que mueva la quimica suya y la de sus vecinos.

   En Bebas porque son cifras que se comparan entre las cinco opciones: sus digitos tienen el
   mismo ancho, asi que las unidades caen unas debajo de otras. */
.picker-info-coste {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.coste-gasto { color: var(--crema); }
.coste-resto { color: var(--crema-suave); }
/* No cabe: se dice en ROJO y no se impide. El aviso es del admin al jugador —enseñar el numero y
   dejar decidir—; quien manda sobre el tope es el guardia del servidor, no esta linea. */
.picker-info-coste.no-cabe .coste-gasto,
.picker-info-coste.no-cabe .coste-resto { color: var(--rojo); }

.picker-pie { flex-shrink: 0; display: flex; justify-content: center; padding: 14px 0 26px; }
.btn-elegir {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--tinta);
  background: var(--oro-claro);
  border: none;
  border-radius: 6px;
  padding: 12px 48px;
  cursor: pointer;
}
/* El botón no existe hasta que la carta está revelada: no se elige a ciegas. */
.btn-elegir.oculto { visibility: hidden; }

/* ── 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;
}

@media (min-width: 480px) {
  .slot, .slot .carta { width: 78px; }
}

/* ── LA QUINIELA ───────────────────────────────────────────────────────────
   Debajo del campo y despues del guardado del once, por decision de
   DISEÑO_APP.md §1 y §3.

   DE MOMENTO SOLO OCUPA EL SITIO: los partidos son reales, pero el 1X2 esta
   apagado porque no hay donde guardar. Se ve que esta y se ve que aun no se
   puede tocar, igual que Analisis en la barra o el menu de la X. */
/* NOMBRE, ESCUDO, 1X2, ESCUDO, NOMBRE — local a la izquierda pegado a su escudo, visitante a
   la derecha pegado al suyo. Local con el texto alineado hacia el escudo (a la derecha) y
   visitante hacia el suyo (a la izquierda): los dos nombres "miran" a los signos del medio, que
   es lo que se está marcando. Sin esto quedaba ambiguo qué lado era cada nombre. */
.quiniela-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.quiniela-fila:last-child { border-bottom: none; }

.quiniela-equipo {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El local justifica hacia el escudo (a la derecha de su caja) y el visitante hacia el suyo (a
   la izquierda): cada nombre "mira" a su escudo, nunca a la linea de fuera. */
.quiniela-equipo--local { text-align: right; }
.quiniela-equipo--visitante { text-align: left; }

.quiniela-escudo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.quiniela-signos { display: flex; gap: 6px; flex-shrink: 0; }
.quiniela-signo {
  width: 38px;
  height: 38px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--negro);
  color: var(--crema);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
}
.quiniela-signo:disabled { opacity: 0.3; cursor: default; }

/* ── PORTADA: elegir formación ────────────────────────────────────────────────
   El primer estado del Draft. Ocupa el sitio del campo porque es lo mismo: sin formación no
   hay huecos que enseñar.

   El esquema se dibuja con PUNTOS a partir de los huecos que trae el contrato — nada de
   imágenes por formación, que habría que rehacer el día que se toque el grafo. */
.portada { padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 16px; }
.portada-cab { text-align: center; }
.portada-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--oro-claro);
}
.portada-aviso {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--crema-suave);
}
.portada-aviso strong { color: var(--crema); font-weight: 700; }

.portada-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portada-opcion {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 10px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  /* La tocada se marca con el oro de la casa, no solo con un borde: en el móvil, a la luz del
     sol, un borde de un pixel no se ve. */
  transition: border-color 0.15s ease, background 0.15s ease;
}
.portada-opcion.tocada {
  border-color: var(--oro-claro);
  background: color-mix(in srgb, var(--oro-claro) 10%, transparent);
}
.portada-opcion:disabled { opacity: 0.35; cursor: default; }
.portada-opcion-nombre {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--crema);
}
.portada-opcion.tocada .portada-opcion-nombre { color: var(--oro-claro); }

/* El campo en miniatura: las líneas de arriba abajo, como el campo de verdad (DL, MC, DF, PT). */
.esquema {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 2px;
}
.esquema-fila { display: flex; justify-content: center; gap: 5px; }
.esquema-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crema-suave);
}
.portada-opcion.tocada .esquema-punto { background: var(--oro-claro); }

.portada-pie { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.portada-elegida {
  min-height: 32px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--crema-suave);
}

/* ── Memoria de repartos ──────────────────────────────────────────────────────
   Varias formas de colocar las cartas de esta jornada. Va debajo del guardado del equipo:
   no es parte del flujo del carrusel, y quien no la use no la pisa.

   SE EXPLICA (Jepi, 3-sep-2026: "no se entiende la funcion"). Antes solo había un botón con un
   nombre de dominio ("GUARDAR ESTE REPARTO") y una lista de números sin más contexto: quien no
   supiera ya de memoria qué era un "reparto" no tenía manera de averiguarlo mirando la pantalla. */
.memoria-intro { padding: 2px 0 10px; }
.memoria-intro-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.memoria-intro-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema);
}
.memoria-intro-texto { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--crema-suave); }

.memoria-lista { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.memoria-fila {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
/* "Prueba 1", "Prueba 2"... (Jepi, 3-sep-2026: "un recorrido logico"): antes cada fila salía
   suelta, solo con sus cifras, sin nada que las hilara en una secuencia. */
.memoria-fila-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.memoria-fila-titulo { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--crema-suave); text-transform: uppercase; }
.memoria-fila-cuerpo { display: flex; align-items: center; gap: 10px; }
.memoria-cifras { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.memoria-ovr { font-size: 17px; font-weight: 700; color: var(--oro-claro); }
/* Un reparto puede pasarse del tope: es un borrador. Se ve, para que no sorprenda al guardarlo. */
.memoria-ovr.fuera { color: var(--rojo); }
/* El "+N" de química de un reparto guardado. Usaba `var(--verde, #6ec06e)` y `--verde` NO
   EXISTE —los tokens de química son `--quimica-*`—, así que caía siempre al respaldo y pintaba
   un verde que no era el del juego. Se ve bien y por eso nadie lo vio: un token inventado con
   respaldo no falla, miente. */
.memoria-quimica { font-size: 13px; font-weight: 700; color: var(--quimica-verde); }
.memoria-cartas { font-size: 12px; letter-spacing: 1px; color: var(--crema-suave); }
.memoria-aviso { font-size: 11px; letter-spacing: 0.5px; color: var(--rojo); }
.memoria-acciones { display: flex; align-items: center; gap: 6px; }
.memoria-cargar, .memoria-borrar {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--crema);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
}
.memoria-cargar { font-size: 11px; }
.memoria-borrar { font-size: 13px; padding: 7px 9px; }
.memoria-cargar:disabled, .memoria-borrar:disabled { opacity: 0.35; cursor: default; }
/* EL BOTÓN, EN DOS LÍNEAS (Jepi, 3-sep-2026: "guarda este XI y sigue construyendo, vuelve cuando
   quieras"). Arriba la ACCIÓN -qué pasa al pulsar-, debajo el PERMISO -que no hace falta
   decidirse ya, y que el campo se puede seguir tocando después-. Antes solo cabía la acción, y
   la parte que nadie entendía era justo la que no tenía sitio. */
.btn-memoria {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  color: var(--crema);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px 0;
  cursor: pointer;
}
.btn-memoria:disabled { opacity: 0.35; cursor: default; }
.btn-memoria-titulo { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.btn-memoria-sub { font-size: 10px; letter-spacing: 0.5px; color: var(--crema-suave); text-transform: none; }

/* El signo marcado de la quiniela: el oro de la casa, como la formacion tocada. */
.quiniela-signo.marcado {
  color: var(--tinta);
  background: var(--oro-claro);
  border-color: var(--oro-claro);
}
.quiniela-pie { padding: 10px 0 2px; }

/* EL BOTÓN DE REINICIAR, dentro del campo y en el lado contrario al overall — como en el Mundial
   (Jepi, 13-ago-2026). Solo lo monta el JS para los admins: si no lo eres, no está en el DOM.
   Va encima del contador de once, que ocupa la misma esquina. */
.btn-reiniciar {
  position: absolute;
  left: 5%;
  bottom: calc(5% + 26px);
  z-index: 6;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--crema);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.btn-reiniciar:active { background: rgba(0, 0, 0, 0.8); border-color: var(--oro); color: var(--oro); }
.btn-reiniciar:disabled { opacity: 0.4; cursor: default; }

/* ── "TE FALTA LA QUINIELA" ──────────────────────────────────────────────────────────
   Pegado al botón de guardar, que es donde se para el ojo al terminar el once.

   NO ES UN CARTEL, ES UN CEBO. Un aviso quieto se lee una vez y se ignora; lo que hace que
   alguien baje es ver LO QUE HAY abajo. Así que la tarjeta enseña el 1X2 de verdad, marcándose
   solo, y una flecha que bota señalando dónde está. Jepi lo pidió así el 15-ago-2026: "un 1X2 con
   una flecha abajo, medio dinámico, que no sea una cosa aburrida".

   La tarjeta ENTERA es el botón: el objetivo es que se pulse, así que la zona de toque es todo lo
   que se ve, no un botoncito en una esquina. */
.ir-quiniela { margin: 0 12px 4px; }

.ir-quiniela-carta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  font-family: inherit;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--oro) 34%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--oro) 7%, transparent);
  cursor: pointer;
}
.ir-quiniela-carta:active { background: color-mix(in srgb, var(--oro) 14%, transparent); }

/* EL 1X2, EN PEQUEÑO Y VIVO. Los tres signos son los mismos que hay abajo, así que además de
   llamar la atención explican qué es la quiniela sin gastar una línea de texto. */
.ir-quiniela-signos { display: flex; gap: 3px; flex: 0 0 auto; }
.ir-quiniela-signo {
  width: 22px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.05);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 14px;
  line-height: 1;
  color: var(--crema-suave);
  /* Los tres comparten una vuelta de 2,4s y entran escalonados: uno marcado cada 0,8s, como
     alguien rellenando el boleto. */
  animation: quiniela-marca 2.4s ease-in-out infinite;
}
.ir-quiniela-signo:nth-child(2) { animation-delay: 0.8s; }
.ir-quiniela-signo:nth-child(3) { animation-delay: 1.6s; }
@keyframes quiniela-marca {
  0%, 26% {
    background: var(--oro-claro);
    border-color: var(--oro-claro);
    color: var(--tinta);
    transform: translateY(-2px);
  }
  34%, 100% {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--borde);
    color: var(--crema-suave);
    transform: none;
  }
}

.ir-quiniela-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ir-quiniela-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oro-claro);
  line-height: 1.1;
}
.ir-quiniela-sub {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--crema-suave);
}

/* LA FLECHA DICE DÓNDE, que es la mitad del problema: no es que no quieran hacerla, es que no
   saben que hay algo más abajo. Bota despacio, sin llamar más que el 1X2. */
.ir-quiniela-flecha {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--oro-claro);
  color: var(--tinta);
  animation: quiniela-flecha 1.8s ease-in-out infinite;
}
@keyframes quiniela-flecha {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

/* Quien pide que las cosas no se muevan, no las mueve. Sigue viéndose todo: el 1X2 se queda con
   el primer signo marcado y la flecha quieta, que es lo que hay que entender. */
@media (prefers-reduced-motion: reduce) {
  .ir-quiniela-signo,
  .ir-quiniela-flecha { animation: none; }
  .ir-quiniela-signo:first-child {
    background: var(--oro-claro);
    border-color: var(--oro-claro);
    color: var(--tinta);
  }
}