/* Estilos compartidos por el panel, la vista del jugador y la transmisión. */

:root {
  /* Los colores del club son los de la escena de OBS: el azul #0a84ff manda,
     con #4da3ff como tono claro. Están tomados tal cual de
     K:\Trabajo\Proyectos\obs-escena-azul para que la app y la transmisión se
     vean como la misma cosa.

     La app va sobre fondo blanco. Para texto chico sobre blanco el azul fuerte
     no contrasta bien, así que ahí se usa --azul-hondo. */
  --azul: #0a84ff;
  --azul-claro: #4da3ff;
  --azul-hondo: #0055d4;
  --azul-noche: #012a66;

  --fondo: #ffffff;
  --panel: #f5f8fc;
  --panel-alto: #e9f0f8;
  --borde: #d2dee9;
  --texto: #0f1c2e;
  --tenue: #5b6b80;

  --acento: var(--azul);
  --sobre-acento: #ffffff;

  /* El cartón, con el formato de papel de siempre */
  --carton-papel: #ffffff;
  --carton-hueco: var(--azul);
  --carton-linea: #000000;
  --carton-tinta: #000000;
  --marca: #e02020;

  --ok: #1a8a54;
  --mal: #c8362c;
  --radio: 12px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 0.95rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

a { color: var(--azul-hondo); }

.contenedor { max-width: 1100px; margin: 0 auto; }
.angosto { max-width: 520px; }

/* --- Identidad del club --------------------------------------------------- */

.marca-club {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.marca-club img {
  width: 44px;
  height: 51px;
  flex: 0 0 auto;
}

.marca-club .nombre {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.marca-club .bajada {
  font-size: 0.78rem;
  color: var(--azul-hondo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Franja azul y blanca del club, para rematar la cabecera. */
.franja-club {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azul) 0 33%, #fff 33% 66%, var(--azul) 66% 100%);
  margin-bottom: 18px;
}

/*
 * Un enlace que se ve y se toca como un botón.
 *
 * Los estilos van repetidos y no heredados de .principal porque esas reglas
 * están atadas al selector `button`, y este tiene que ser un enlace de verdad:
 * lleva a otra página, y un botón que navega rompe el clic del medio y el
 * "abrir en pestaña nueva".
 */
.boton-enlace {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border-radius: 10px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.boton-enlace:hover { filter: brightness(1.1); }

/* El segundo en importancia: está ahí pero no compite con lo principal. */
.boton-enlace.segundo {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 0.95rem;
  padding: 10px 16px;
  margin-top: 4px;
}

details summary {
  cursor: pointer;
  color: var(--tenue);
  font-size: 0.9rem;
}

/*
 * El atajo al panel, solo para el organizador.
 *
 * Tiene tamaño de botón y no de etiqueta porque la primera versión era una
 * pastilla chiquita y pasó desapercibida: el dueño del bingo entró, no lo vio,
 * y creyó que el sistema no lo reconocía.
 */
.atajo-panel {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.atajo-panel:hover { filter: brightness(1.1); }

/* --- Páginas de texto (privacidad, condiciones) ---------------------------- */

.texto-largo { line-height: 1.65; }
.texto-largo h1 { margin-bottom: 4px; }
.texto-largo h2 {
  margin: 28px 0 8px;
  font-size: 1.15rem;
  color: var(--texto);
  text-transform: none;
  letter-spacing: 0;
}
.texto-largo p { margin-bottom: 12px; }
.texto-largo ul { margin: 0 0 12px 20px; }
.texto-largo li { margin-bottom: 8px; }

/* El pie con lo legal: chico, para que esté sin estorbar. */
.pie-legal {
  margin: 28px 0 8px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--tenue);
}

.pie-legal a { color: var(--tenue); }

/* --- Instalar la app ------------------------------------------------------- */

.instalar {
  border: 1px solid var(--azul);
  background: linear-gradient(170deg, rgba(10, 132, 255, 0.07), transparent 70%);
}

.instalar h3 { color: var(--azul-hondo); }
.instalar p { margin-top: 6px; }
.instalar button { margin-top: 14px; }

/* Los pasos del iPhone, que no tiene botón de instalar y hay que explicarlo. */
.instalar ol {
  margin: 10px 0 0 18px;
  padding: 0;
  color: var(--tenue);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- La transmisión dentro de la app --------------------------------------- */

/*
 * El que está en el club mira la tele; el que está en su casa sin tele mira
 * acá. El marco mantiene el 16:9 aunque el celular sea angosto, así el video
 * no queda con franjas negras arriba y abajo.
 */
.marco-transmision {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 12px 0 4px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.marco-transmision iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Cartel del ganador en el panel --------------------------------------- */

/*
 * Cuando alguien canta, el sorteo automático se frena y esto aparece arriba de
 * todo. Es lo único que el organizador tiene que mirar en ese momento: quién
 * ganó, cuánto, y a dónde transferirle.
 */
.cartel-ganador {
  border-radius: var(--radio);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-hondo) 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(10, 132, 255, 0.35);
  animation: festejo-entra 500ms cubic-bezier(.2,.9,.3,1.3) both;
}

.cartel-ganador-figura {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

.cartel-ganador-nombre {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
}

.cartel-ganador-monto {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cartel-ganador-cobro {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.85;
  margin: 10px 0;
}

.cartel-ganador input {
  background: rgba(255, 255, 255, 0.95);
  color: var(--texto);
  font-weight: 700;
  border-color: transparent;
}

.cartel-ganador button { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: transparent; }
.cartel-ganador button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.32); }
.cartel-ganador button.principal { background: #fff; color: var(--azul-hondo); }
.cartel-ganador #cg-listo { margin-top: 12px; }

/* --- Pestañas del panel --------------------------------------------------- */

/* Qué noche está abierta, siempre a la vista aunque se cambie de pestaña. */
.barra-noche {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.barra-noche-nombre {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
}

.pestanas {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--borde);
  margin-bottom: 18px;
  overflow-x: auto;
}

.pestana {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  color: var(--tenue);
  font-weight: 700;
  white-space: nowrap;
  margin-bottom: -2px;
}

.pestana:hover:not(.activa) { background: var(--panel); color: var(--texto); }

.pestana.activa {
  color: var(--azul-hondo);
  border-bottom-color: var(--azul);
}

/* El contador de reclamos sin mirar, para no tener que vivir en esa pestaña. */
.pastilla {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--mal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --- Bloques ------------------------------------------------------------- */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 16px;
}

/* El cartón sobre blanco necesita despegarse de la página. */
.carton-grilla { box-shadow: 0 2px 8px rgba(15, 28, 46, 0.18); }

.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fila.separada { justify-content: space-between; }
.crecer { flex: 1 1 200px; }

.grilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* --- Formularios --------------------------------------------------------- */

label { display: block; font-size: 0.85rem; color: var(--tenue); margin-bottom: 4px; }

input, select, button {
  font: inherit;
  border-radius: 8px;
  border: 1px solid var(--borde);
  padding: 10px 12px;
}

input, select {
  width: 100%;
  background: #fff;
  color: var(--texto);
}

input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

/*
 * Un renglón de premio: figura, nombre, cómo paga y cuánto, todo en una línea.
 * Los campos son 100% de ancho por defecto, que es lo que corresponde cuando
 * van uno abajo del otro, pero acá parten el renglón en pedazos.
 */
.premio-renglon { flex-wrap: nowrap; align-items: center; }
.premio-renglon select { width: auto; flex: 0 0 auto; }
.premio-renglon input[type="number"] { width: 7rem; flex: 0 0 auto; }

@media (max-width: 640px) {
  .premio-renglon { flex-wrap: wrap; }
}

.campo { margin-bottom: 12px; }

button {
  background: var(--panel-alto);
  color: var(--texto);
  border-color: var(--borde);
  cursor: pointer;
  font-weight: 600;
}

button:hover:not(:disabled) { background: var(--borde); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.principal { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
button.principal:hover:not(:disabled) { filter: brightness(1.1); }
button.grande { padding: 16px 24px; font-size: 1.1rem; width: 100%; }

/* --- Avisos -------------------------------------------------------------- */

.aviso { border-radius: 8px; padding: 10px 12px; margin: 12px 0; font-size: 0.92rem; }
.aviso.ok { background: rgba(26, 138, 84, 0.08); color: var(--ok); border: 1px solid rgba(26, 138, 84, 0.3); }
.aviso.mal { background: rgba(200, 54, 44, 0.07); color: var(--mal); border: 1px solid rgba(200, 54, 44, 0.3); }
.aviso.neutro { background: var(--panel-alto); color: var(--tenue); border: 1px solid var(--borde); }
.aviso:empty { display: none; }

.etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-alto);
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.etiqueta.verde { background: rgba(26, 138, 84, 0.12); color: var(--ok); }
.etiqueta.roja  { background: rgba(200, 54, 44, 0.12); color: var(--mal); }
.etiqueta.azul { background: rgba(10, 132, 255, 0.12); color: var(--azul-hondo); }

/* --- Números y bolillas -------------------------------------------------- */

.dato { display: flex; flex-direction: column; gap: 2px; }
.dato .valor { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dato .rotulo { font-size: 0.78rem; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.04em; }

.bolilla {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bolilla.destacada {
  background: var(--acento);
  color: var(--sobre-acento);
  border-color: var(--acento);
}

.bolilla.gigante {
  width: clamp(120px, 26vw, 200px);
  height: clamp(120px, 26vw, 200px);
  font-size: clamp(3.5rem, 12vw, 6rem);
  box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.18);
}

.tira-bolillas { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tablero de las 90 bolillas */
.tablero {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

.tablero span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--borde);
  font-size: 0.8rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.tablero span.salio { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); font-weight: 700; }

/* Renglón de lista: algo a la izquierda, su estado a la derecha. */
.renglon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.9rem;
}

.renglon:last-child { border-bottom: none; }

/* --- Cartón --------------------------------------------------------------- */

/*
 * El cartón de toda la vida: casillas blancas con el número en negro grande,
 * los huecos en el azul del club y líneas negras separando todo. Es la única parte clara
 * de la app, a propósito — un cartón oscuro no se lee como un cartón.
 */

.carton { margin-bottom: 18px; }

/* Renglón de arriba, fuera del cartón: número a la izquierda, club a la derecha. */
.carton-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto);
}

.carton-cabecera .club {
  font-weight: 600;
  color: var(--tenue);
}

/* El gap de 2px sobre el fondo negro es lo que dibuja las líneas de la grilla. */
.carton-grilla {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--carton-linea);
  border: 2px solid var(--carton-linea);
  border-radius: 3px;
}

.casilla {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--carton-papel);
  color: var(--carton-tinta);
  font-weight: 800;
  font-size: clamp(0.95rem, 4vw, 1.3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Los huecos del cartón van en el azul del club. */
.casilla.vacia { background: var(--carton-hueco); }

/* La marca del marcador, debajo del número. */
.casilla.marcada::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--marca);
}

/* El número siempre va arriba de la marca. */
.casilla span { position: relative; }
.casilla.marcada span { color: #fff; }

.carton.linea-completa .carton-grilla {
  outline: 3px solid var(--ok);
  outline-offset: 2px;
}

/* --- Quién ganó, para los que no ganaron ---------------------------------- */

/*
 * No es un cartel de derrota: es el resultado de la figura. Va en gris y no en
 * rojo a propósito — con la línea cantada todavía queda el bingo, y al que no
 * ganó no hay por qué bajarle el ánimo.
 */
.resultado {
  text-align: center;
  padding: 14px 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radio);
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  animation: festejo-entra 500ms cubic-bezier(.2,.9,.3,1.3) both;
}

.resultado-rotulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tenue);
}

.resultado-nombre {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 2px;
}

.resultado-monto {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--azul-hondo);
  font-variant-numeric: tabular-nums;
}

.resultado-sigue {
  font-size: 0.9rem;
  color: var(--tenue);
  margin-top: 6px;
}

.oculto { display: none !important; }

/* --- Festejo del ganador --------------------------------------------------- */

/* El confeti tapa toda la pantalla pero deja pasar los toques: el jugador tiene
   que poder confirmar su alias mientras cae el papel picado. */
#confeti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

.festejo {
  text-align: center;
  padding: 18px 12px 22px;
  margin-bottom: 18px;
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-hondo) 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(10, 132, 255, 0.35);
  animation: festejo-entra 600ms cubic-bezier(.2,.9,.3,1.35) both;
}

@keyframes festejo-entra {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.festejo-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.festejo-figura {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
  margin-top: 6px;
}

.festejo-monto {
  font-size: 2.9rem;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.festejo-nombre {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.9;
}

/* --- Tablas -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
th { color: var(--tenue); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
td.numerico, th.numerico { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }

.lista-registro { max-height: 320px; overflow-y: auto; }

/* La lista de los que están a una bolilla puede hacerse larga: se le da más
   alto que a las otras, porque es lo que el organizador mira todo el tiempo. */
#lista-al-filo { max-height: 420px; }

#lista-al-filo .renglon { align-items: flex-start; gap: 16px; }
#lista-al-filo .renglon strong { flex: 0 0 auto; white-space: nowrap; }
#lista-al-filo .renglon span { text-align: right; }

.vacio { color: var(--tenue); font-size: 0.9rem; padding: 12px 0; }

/* --- Transmisión (pantalla para OBS) ------------------------------------- */

body.transmision {
  /* La transmisión queda oscura a propósito: va de fondo detrás de los
     overlays en OBS, no puede ser blanca. */
  color: #eef3fa;
  padding: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #070b14;
}

/* Dentro de la transmisión los tokens se dan vuelta: fondo oscuro, piezas
   oscuras. La app es blanca, el stream no. */
body.transmision .tablero span { background: #0d1524; }

body.transmision {
  --fondo: #070b14;
  --panel: #0d1524;
  --panel-alto: #131d2e;
  --borde: #1e2c44;
  --texto: #eef3fa;
  --tenue: #8ea0bb;
}

.escenario { width: min(1280px, 100vw); padding: 32px; text-align: center; }
.escenario h1 { font-size: clamp(1.4rem, 4vw, 2.4rem); }

.cartel-premio {
  background: var(--acento);
  color: var(--sobre-acento);
  border-radius: var(--radio);
  padding: 20px;
  margin: 20px 0;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 800;
}