/* Liga — la liga por dentro. Móvil primero, 430px, misma marca que Draft y Jornada.
   Los colores salen de app/css/marca.css; aquí no se define ninguno.

   ⚠️ Verde/naranja/rojo NO se usan aquí. Están reservados a la química (Draft/Jornada) y
   un mismo color no puede significar dos cosas en dos pantallas. El movimiento de puestos
   se dice con FLECHAS y con oro/crema. */

* { 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-size: 15px;
}

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

/* ── Carga ────────────────────────────────────────────────────────────────── */



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


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





/* ── Cabecera con selector de liga ────────────────────────────────────────── */

.selector-liga {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--crema);
  font: inherit;
  cursor: pointer;
}
.selector-liga.solo-una { cursor: default; }
.selector-liga.solo-una .selector-flecha { display: none; }
/* Bebas para el nombre de la liga: es el título de la pantalla, y es la tipografía con la
   que el Mundial escribía los rótulos grandes. Barlow queda para lo que se lee en párrafo. */
.liga-nombre { font-family: "Bebas Neue", Impact, sans-serif; font-size: 23px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.05; }
.selector-flecha { font-size: 12px; color: var(--oro); }
.liga-sub { font-size: 12px; color: var(--crema-suave); letter-spacing: 0.5px; }

.ligas-lista { margin: 0 12px 8px; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.liga-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--panel);
  color: var(--crema);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.liga-item:last-child { border-bottom: none; }
.liga-item.activa { color: var(--oro-claro); }
.liga-item-nombre { font-size: 15px; font-weight: 600; text-transform: uppercase; }
.liga-item-gente { font-size: 12px; color: var(--crema-suave); }

/* ── Avisos ───────────────────────────────────────────────────────────────── */





/* ── Navegador de jornadas ────────────────────────────────────────────────── */
/* Aquí vivían `.jornada-nav`, `.jornada-flecha`, `.jornada-actual`, `.jornada-nombre` y
   `.jornada-estado`: el navegador `‹ Jornada 1 ›`. Se fueron con él el 14-ago-2026 — la Liga es
   la clasificación general de la temporada, no la de un fin de semana. El motivo largo está en
   `liga.html`, donde estaba el marcado.

   Cuidado si vuelves a usar esos nombres: `.jornada-nombre` EXISTE en draft-ui.css y en
   jornada-ui.css, con otro tamaño y otra familia. Son pantallas distintas y cada una carga su
   hoja, así que no chocan; pero un nombre repetido en tres sitios es una trampa para el que
   busque en grep y crea que ha encontrado el único. */

/* ── La tabla ─────────────────────────────────────────────────────────────── */
.tabla { padding: 0 12px; }
.tabla-cabecera,
.clasif-fila {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tabla-cabecera {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.col-rank { width: 26px; text-align: center; flex-shrink: 0; }
.col-nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.col-jornada { width: 42px; text-align: right; flex-shrink: 0; }
.col-total { width: 52px; text-align: right; flex-shrink: 0; }

.clasif-fila {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
/* Puestos y puntos en BEBAS: son cifras que se comparan y sus dígitos tienen el mismo ancho,
   así que la columna se lee de un vistazo. Iban en la monoespaciada de la marca, que se retiró
   el 14-ago-2026 de toda la app por fea. Las columnas llevan ancho fijo y van alineadas a la
   derecha, que es lo que de verdad cuadra un 111 con un 88.
   El nombre del mánager sigue en Barlow: eso es una palabra, no un dato. */
.clasif-fila .col-rank { font-family: "Bebas Neue", Impact, sans-serif; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.5); }
.clasif-nombre { font-size: 15px; font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clasif-fila .col-jornada { font-family: "Bebas Neue", Impact, sans-serif; font-size: 12px; color: var(--crema-suave); }
.clasif-fila .col-total { font-family: "Bebas Neue", Impact, sans-serif; font-size: 16px; font-weight: 700; color: var(--crema); }

/* Tu fila: se distingue sin colores de química. */
.clasif-fila.yo { background: color-mix(in srgb, var(--oro) 8%, transparent); }
.clasif-fila.yo .col-rank,
.clasif-fila.yo .clasif-nombre,
.clasif-fila.yo .col-total { color: var(--oro-claro); }

/* Movimiento: FLECHAS. El verde/naranja/rojo es de la química y no se toca. */
.mov { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; }
.mov.sube { color: var(--oro-claro); }
.mov.baja { color: var(--crema-suave); }
.mov.igual, .mov.nuevo { color: rgba(255, 255, 255, 0.25); }

.clasif-detalle {
  padding: 2px 0 12px 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  color: var(--crema-suave);
  line-height: 1.6;
}
.detalle-nota { margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.35); }



/* ── Accesos a las otras pantallas de la sección ──────────────────────────── */
.accesos { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 0; }
.acceso {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: var(--crema);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
/* EL DESTACADO VA AL PRIMERO QUE SE VE Y SE PUEDE PULSAR, no al primero del HTML.
   Antes era `.acceso:first-child`, y `:first-child` es estructural: no mira `hidden`. Como
   "Ir al torneo" está oculto casi siempre, el dorado se lo llevaba un botón invisible y
   ninguno de los visibles destacaba — justo en el caso normal.

   Se resuelve al revés: se destacan todos los candidatos y se le quita el destacado a
   cualquiera que tenga otro candidato por delante. Al primero no le precede ninguno, así
   que se lo queda él. Los ocultos no cuentan porque no son candidatos. */
.acceso:not([hidden]):not(:disabled) { border-color: color-mix(in srgb, var(--oro) 40%, transparent); color: var(--oro-claro); }
.acceso:not([hidden]):not(:disabled) ~ .acceso:not([hidden]):not(:disabled) {
  border-color: var(--borde);
  color: var(--crema);
}

/* El segundo grupo son las ligas OTRAS: se separa y se apaga, para que no compita con lo
   que se hace dentro de esta. Aquí nunca hay destacado. */
/* ── LA BURBUJA ────────────────────────────────────────────────────────────────────
   Aquí vivía `.accesos.otras-ligas`, el grupo de "Crear otra liga / Unirme con un código" con
   su filete separador. Se fue entero: esas dos acciones están ahora en la burbuja, y dejar su
   CSS sería dejar reglas apuntando a un bloque que ya no se monta.

   La burbuja va fija sobre la pantalla, ANCLADA A LA BARRA: su hueco sale de las mismas
   variables (`--alto-barra` + `--colchon-barra`), así que el día que la barra cambie de alto
   —como pasó hoy— la burbuja se mueve con ella sola. Escrito a mano, se quedaría flotando
   encima o debajo. */
.burbuja {
  position: fixed;
  right: max(16px, calc(50vw - var(--ancho-app) / 2 + 16px));
  bottom: calc(var(--alto-barra) + var(--colchon-barra) + 16px);
  z-index: 290; /* por debajo de la barra (300): la navegación manda sobre un atajo */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--oro);
  background: var(--negro);
  color: var(--oro);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.burbuja:hover { background: color-mix(in srgb, var(--oro) 12%, transparent); }
.burbuja:focus { outline: none; }
.burbuja:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.burbuja-mas {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
/* Abierta, la cruz gira: dice "esto ahora cierra" sin cambiar el icono ni añadir otro. */
.burbuja[aria-expanded="true"] .burbuja-mas { transform: rotate(45deg); }
.burbuja-mas { transition: transform 0.15s ease; }
@media (prefers-reduced-motion: reduce) { .burbuja-mas { transition: none; } }

.burbuja-fuera { position: fixed; inset: 0; z-index: 288; }
.burbuja-menu {
  position: fixed;
  right: max(16px, calc(50vw - var(--ancho-app) / 2 + 16px));
  bottom: calc(var(--alto-barra) + var(--colchon-barra) + 78px);
  z-index: 291;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 6px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.burbuja-item {
  padding: 11px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--crema);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
/* ── LAS OPCIONES DE TORNEO ────────────────────────────────────────────────────────
   Botones y no un desplegable: son pocas y hay que poder COMPARARLAS —lo que decide es cuántas
   jornadas cuesta cada una—, y para comparar hay que verlas a la vez. */
.torneo-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}
.torneo-opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: none;
  color: var(--crema);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.torneo-opcion.elegida { border-color: var(--oro); color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, transparent); }
.torneo-opcion:focus { outline: none; }
.torneo-opcion:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
/* La que no cabe se VE, y se ve que no cabe. Esconderla dejaría al admin preguntándose por qué
   no puede montar el torneo de ocho que tenía en la cabeza. */
.torneo-opcion.no-cabe { opacity: 0.4; cursor: default; border-style: dashed; }
.torneo-opcion-que { font-weight: 600; }
.torneo-opcion-coste { font-size: 11px; color: var(--crema-suave); }

/* Parte las dos ideas del menú: arriba lo que se hace SOBRE esta liga, abajo lo que te lleva a
   OTRA. Un filete, no un título: nombrar los dos grupos sería más ruido que la separación. */
.burbuja-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--borde);
}
.burbuja-item:hover { background: color-mix(in srgb, var(--oro) 10%, transparent); }
.burbuja-item:focus { outline: none; }
.burbuja-item:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }

/* ── LA BURBUJA ALARGADA: ESTADÍSTICAS ─────────────────────────────────────────────
   Pedida así por Jepi el 14-ago-2026: *"una burbuja alargada que ponga estadísticas y el
   símbolo de una fluctuación subiendo"*.

   VA A LA IZQUIERDA, enfrente del `+`, y la diferencia no es de sitio sino de significado: el
   redondo de la derecha CREA algo (otra liga, entrar en una); este LLEVA a otro sitio. Por eso
   uno es un círculo con un icono y este es una pastilla con su nombre escrito — un destino se
   anuncia, una acción se reconoce.

   ALINEADAS POR EL CENTRO, no por abajo. El círculo mide 52 y esta 46, así que compartir el
   mismo `bottom` las dejaría con 6px de desnivel: poco para parecer intencionado y suficiente
   para parecer descuidado. Los 3px de más son la mitad de esa diferencia. Si un día cambia el
   alto de una, hay que rehacer la cuenta de la otra. */
.burbuja-stats {
  position: fixed;
  left: max(16px, calc(50vw - var(--ancho-app) / 2 + 16px));
  bottom: calc(var(--alto-barra) + var(--colchon-barra) + 19px);
  z-index: 290; /* igual que el `+`: por debajo de la barra (300), que es la navegación */
  height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 23px;
  border: 1px solid var(--oro);
  background: var(--negro);
  color: var(--oro);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.burbuja-stats:hover { background: color-mix(in srgb, var(--oro) 12%, transparent); }
.burbuja-stats:focus { outline: none; }
.burbuja-stats:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
/* Trazo, como los iconos de la barra: así `currentColor` lo tiñe y no hace falta un segundo
   dibujo para el estado sobre el que se pasa el dedo. */
.burbuja-stats-icono {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Formato de torneo que todavía no existe: se ve que está, y se ve que no se puede abrir. */
.acceso.no-disponible { opacity: 0.45; cursor: default; border-style: dashed; color: var(--crema-suave); }
.acceso:disabled { cursor: default; }

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

/* ── MODALES: crear / unirse / invitar ─────────────────────────────────────
   Lo único de esta sección que escribe. Van en caja aparte porque las tres
   acciones tienen consecuencias que no se deshacen. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-caja {
  width: 100%;
  max-width: 430px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px 14px 0 0;
  padding: 14px 14px 22px;
}
.modal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-titulo { font-family: "Bebas Neue", Impact, sans-serif; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--oro-claro); }
.modal-cerrar { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 20px; cursor: pointer; padding: 0 0 0 12px; }
.modal-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.modal-texto { font-size: 13px; line-height: 1.45; color: var(--crema); }
.modal-aviso { font-size: 12px; line-height: 1.45; color: var(--oro); }
.modal-pie { margin-top: 14px; }

/* El código, cuando existe: grande, porque hay que copiarlo AHORA o se pierde.
   Aquí ponía que iba en monoespaciada porque en una condensada `I/l/1` y `O/0` se confunden, y
   que un código mal leído es alguien que no entra en la liga. El razonamiento era bueno; la
   solución, del sitio equivocado. El 14-ago-2026 se atacó el problema donde estaba: el código
   se genera ahora con el alfabeto de Crockford, **que no tiene ni I ni L ni O ni U**, así que no
   hay nada que confundir por muy condensada que sea la letra. Y encima tiene botón de copiar.
   Con la ambigüedad resuelta en el dato, la tipografía puede ser la de la marca. */
.codigo-grande {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 6px;
  text-align: center;
  color: var(--oro-claro);
  padding: 14px 0;
  border: 1px dashed color-mix(in srgb, var(--oro) 50%, transparent);
  border-radius: 10px;
  /* `all` y no `text`: una pulsación larga selecciona el código ENTERO, no la palabra que hay
     debajo del dedo. Sigue estando aunque haya botón de copiar — es la salida cuando el
     portapapeles no está disponible. */
  user-select: all;
}

/* ── EL CÓDIGO Y SU BOTÓN ──────────────────────────────────────────────────────────
   El código son ahora 8 caracteres y cabe holgado, así que el botón va DEBAJO y a lo ancho:
   en un móvil, un botón a la derecha del código dejaría los dos estrechos y el dedo justo
   encima del texto que hay que poder seleccionar. */
.codigo-caja { display: flex; flex-direction: column; gap: 10px; }
.codigo-caja .codigo-grande { margin: 0; }
.codigo-copiar {
  padding: 11px;
  border: 1px solid var(--oro);
  border-radius: 8px;
  background: none;
  color: var(--oro);
  font: inherit;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.codigo-copiar:hover { background: color-mix(in srgb, var(--oro) 12%, transparent); }
.codigo-copiar:focus { outline: none; }
.codigo-copiar:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
/* Copiado: verde, que es "hecho" en toda la app, y sin borde de acción pendiente. */
.codigo-copiar.hecho { color: var(--quimica-verde); border-color: var(--quimica-verde); }
.codigo-copiar:disabled { opacity: 0.5; cursor: default; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-etiqueta { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crema-suave); }
.campo input {
  padding: 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--negro);
  color: var(--crema);
  font: inherit;
  font-size: 16px; /* 16px o iOS hace zoom al enfocar */
}

/* .btn-principal vive en marca.css: lo usan Liga, Admin y la pantalla de acceso. */

/* ── TORNEOS EN PARALELO ───────────────────────────────────────────────────
   Una liga puede tener varios a la vez. Se listan todos los que traiga el
   contrato; ni se filtran ni se ordenan aquí. */
.torneo {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.torneo:last-child { border-bottom: none; }
.torneo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.torneo-nombre { font-size: 15px; font-weight: 600; text-transform: uppercase; }
.torneo-estado { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crema-suave); }
/* Un build a medias o roto se ve distinto, pero sin colores de química. */
.torneo.estado-building .torneo-estado,
.torneo.estado-failed .torneo-estado { color: var(--oro); }
.torneo-formato { font-size: 12px; color: var(--crema-suave); margin-top: 2px; }

.torneo-datos { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--crema); }
.torneo-dato.apagado { color: rgba(255, 255, 255, 0.35); }
.torneo-progreso { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--oro-claro); }
/* Sin dato NO es cero: se dice que no se sabe. */
.torneo-progreso.sin-dato { color: rgba(255, 255, 255, 0.35); font-weight: 400; font-style: italic; }
.torneo-calendario { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; }

.torneo-acciones { display: flex; gap: 8px; margin-top: 10px; }
.torneo-accion {
  padding: 7px 14px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: var(--negro);
  color: var(--crema);
  font: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.torneo-accion.principal { border-color: color-mix(in srgb, var(--oro) 50%, transparent); color: var(--oro-claro); }
.torneo-accion:disabled { opacity: 0.45; cursor: default; }