/* ============================================================
   LOBBY — torneos, mesas públicas y salas privadas

   El cartel del código privado es el mismo del tablero y tiene su hoja,
   `sala-privada.css`. Acá va lo que es sólo de esta página.
   ============================================================ */

.subtitulo {
  margin-bottom: 18px;
}

.aviso-salas {
  min-height: 1.4em;
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--texto-tenue);
}

.aviso-salas.error {
  color: #fca5a5;
}

/* La puerta al entrenamiento: un botón, no una sección. La configuración está
   en el tablero. */
.lobby-ia {
  margin: 0 0 20px;
}

.lobby-ia .accion {
  text-decoration: none;
}

.panel-lobby + .panel-lobby {
  margin-top: 22px;
}

.nota-lobby {
  margin: -4px 0 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

.vacio-simple {
  padding: 14px 4px;
  font-size: 0.9rem;
  color: var(--texto-tenue);
}

/* ------------------------------------------------ cartelera de torneos */

.aviso-tienda {
  min-height: 0;
  font-size: 0.85rem;
  color: var(--oro-claro);
}

.aviso-tienda.error {
  color: #fca5a5;
}

.fila-torneo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde-suave);
}

.fila-torneo + .fila-torneo {
  margin-top: 8px;
}

.datos-torneo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* `min-width: 0` para que un nombre largo se corte en vez de empujar al
     botón fuera de la fila. Sin esto, en un teléfono el botón se sale. */
  min-width: 0;
  flex: 1 1 200px;
}

.datos-torneo b {
  color: var(--texto);
  font-size: 0.95rem;
}

.datos-torneo span {
  font-size: 0.78rem;
  color: var(--texto-tenue);
}

.fila-torneo .accion {
  flex: 0 0 auto;
  /* 44px de alto mínimo: es el objetivo táctil por debajo del cual el dedo
     falla, y este botón cobra Leyendas. */
  min-height: 44px;
}

/* ------------------------------------------------ mesas públicas */

.juego-bloque + .juego-bloque {
  margin-top: 18px;
}

.juego-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-size: 1.1rem;
  color: var(--oro-claro);
}

.juego-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: none;
}

.mesa-publica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde-suave);
}

.mesa-publica + .mesa-publica {
  margin-top: 8px;
}

.mesa-nombre {
  flex: 1 1 140px;
  min-width: 0;
  font-weight: 700;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.mesa-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  flex: 2 1 240px;
  font-size: 0.8rem;
  color: var(--texto-tenue);
}

.mesa-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.accion.chica {
  min-height: 40px;
  padding: 8px 15px;
  font-size: 0.74rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 9px;
}

/* -------------------------------------------- la administración de mesas */

.admin-publicas {
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(212, 168, 67, 0.45);
  background: rgba(212, 168, 67, 0.05);
}

/* `hidden` tiene que ganarle al `display` de arriba. */
.admin-publicas[hidden] {
  display: none;
}

.admin-publicas h3 {
  margin: 0 0 10px;
  font-size: 0.8rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--oro);
}

.admin-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.admin-botones {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.admin-botones > [hidden] {
  display: none;
}

/* ------------------------------------------------ salas privadas */

.privadas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: start;
}

.privadas-crear,
.privadas-entrar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.campo-lobby {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--texto-tenue);
}

/* El campo del código: mayúsculas y letra de máquina, como el código mismo.
   El nombre de una mesa, en el formulario de la administración, no. */
.privadas-entrar .campo-lobby input {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.ayuda-lobby {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.privadas .ayuda-privada {
  text-align: left;
  margin: 0;
}

/* ------------------------------------- cuadro de inscripción a un torneo */
/*
 * Reemplaza al `window.confirm` que había antes. El marcado lo arma
 * `cartelera-torneos.js`; acá sólo está cómo se ve.
 *
 * Es un `<dialog>` nativo: el fondo, el foco atrapado adentro y el cierre con
 * Escape los da el navegador. Sin librería y sin JavaScript para nada de eso.
 */
.cuadro-torneo {
  /* El navegador centra un `<dialog>` modal con `margin: auto`, pero
     `app.css` abre con `* { margin: 0 }` y se lo lleva puesto: sin esta
     línea el cuadro aparece pegado arriba a la izquierda. Se vio en
     pantalla, no se dedujo. */
  margin: auto;
  max-width: 420px;
  width: calc(100% - 32px);
  padding: 22px;
  border: 1px solid var(--borde-suave);
  border-radius: 14px;
  background: var(--panel-alto);
  color: var(--texto);
}

.cuadro-torneo::backdrop {
  background: rgba(0, 0, 0, 0.66);
}

.cuadro-torneo h3 {
  margin: 0 0 12px;
  color: var(--oro-claro);
  font-size: 1.05rem;
  /* Un nombre de torneo largo se corta, no estira el cuadro. */
  overflow-wrap: anywhere;
}

.cuadro-torneo p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.cuadro-torneo .ct-nota {
  color: var(--texto-tenue);
  font-size: 0.82rem;
}

.cuadro-torneo .ct-acepto {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 18px;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  line-height: 1.4;
  text-align: left;
}

.cuadro-torneo .ct-acepto input {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}

.cuadro-torneo .ct-acepto span {
  min-width: 0;
  flex: 1;
}

.cuadro-torneo .ct-acepto a {
  color: var(--oro);
}

.cuadro-torneo .ct-botones {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/*
 * En el teléfono los dos no entran en una fila: con el relleno de `.accion`
 * suman unos 325px y adentro del cuadro hay 299. Envolvían, y quedaban dos
 * botones sueltos alineados a la derecha, uno debajo del otro.
 *
 * Apilados a lo ancho se leen como lo que son. `column-reverse` deja arriba
 * el de inscribirse, que es el principal, sin cambiar el orden del marcado:
 * en el HTML Cancelar va primero, que es lo que conviene para quien navega
 * con teclado.
 */
@media (max-width: 420px) {
  .cuadro-torneo .ct-botones {
    flex-direction: column-reverse;
  }

  .cuadro-torneo .ct-botones button {
    width: 100%;
  }
}

/*
 * Los dos botones no llevan estilo propio, y es a propósito.
 *
 * Son `.accion` y `.accion.sobria`, que es el par primario/secundario que
 * `app.css` ya define para todo el sitio —el dorado acuñado y el de cuero y
 * bronce—, con sus 44px de alto táctil y su estado deshabilitado en
 * `button.accion:disabled`. El primer intento les puso padding, radio y
 * `font: inherit` acá: lo único que logró fue pelearse con `app.css` y dejar
 * la letra en peso 400 en vez de 800. Se vio en pantalla.
 */