/* =========================================================
   BASE.CSS
   Estilos y variables COMPARTIDAS por todas las pantallas
   de la app (marcador, jugadores, configuración, etc).
   Cada pantalla nueva debe incluir este archivo primero,
   y luego su propio archivo de estilos específico.
   ========================================================= */

/* ---- Fuente Oswald, guardada localmente en /fonts ----
   La usamos para títulos, botones y números grandes,
   igual que en las imágenes de referencia.
   Al estar guardada en el proyecto, funciona sin internet. */
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fondos */
  --fondo: #12151b;
  --panel: #1c212b;
  --panel-2: #232936;
  --borde: #2a3038;

  /* Texto */
  --texto: #f5f4f0;
  --texto-tenue: #8b909c;

  /* Marca */
  --naranja: #f97316;
  --naranja-claro: #fb923c;
  --naranja-oscuro: #ea6a0c;
  --naranja-suave: rgba(249, 115, 22, 0.14);

  /* Estados */
  --peligro: #e5484d;
  --exito: #22c55e;

  /* Medidas */
  --radio: 16px;
  --radio-chico: 10px;
  --espacio: 16px;

  /* Tipografía */
  --fuente-display: "Oswald", "Arial Narrow", sans-serif;
  --fuente-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  -webkit-tap-highlight-color: transparent;
}

.pantalla {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* =========================================================
   BARRA SUPERIOR (logo Torneo Basket + botón de ajustes)
   Igual en todas las pantallas.
   ========================================================= */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--espacio);
  border-bottom: 1px solid var(--borde);
}

.top-nav .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-nav .logo-texto {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--naranja);
}

/* El logo oficial, en vectores (SVG): se ve nítido en cualquier
   pantalla y pesa 11 KB.

   Va con medida fija en píxeles (no en rem) para que se vea
   idéntico en todas las pantallas, sin importar el tamaño de
   letra que tenga puesto el celular.

   No necesita ninguna pastilla detrás: el propio logo lleva un
   contorno blanco que lo separa del fondo oscuro de la app. */
.top-nav .logo-icono {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.top-nav .icono-config {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* =========================================================
   TÍTULOS Y ETIQUETAS
   ========================================================= */
.titulo-pantalla {
  font-family: var(--fuente-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--naranja);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  margin: var(--espacio) var(--espacio) 4px;
}

.etiqueta {
  font-family: var(--fuente-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--texto-tenue);
}

/* =========================================================
   TARJETA / PANEL genérico
   ========================================================= */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* =========================================================
   BOTONES compartidos
   ========================================================= */
.btn {
  font-family: var(--fuente-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  border-radius: var(--radio-chico);
  padding: 15px;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:active {
  transform: scale(0.98);
}

/* Botón principal: naranja, texto oscuro (como "CONTINUAR") */
.btn-primario {
  background: linear-gradient(180deg, var(--naranja-claro), var(--naranja));
  color: #14171c;
}

/* Botón fantasma: borde gris, texto claro (como "Omitir por ahora") */
.btn-secundario {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto);
}

/* Botón de acción destructiva: borde y texto rojos ("Cerrar partido",
   "Borrar todos los datos", "Sí, empezar de cero") */
.btn-peligro {
  background: transparent;
  border: 1px solid var(--peligro);
  color: var(--peligro);
}

/* ---- Subtítulo de pantalla (reutilizable en varias pantallas) ---- */
.subtitulo-pantalla {
  margin: 0 var(--espacio) 20px;
  color: var(--texto-tenue);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* =========================================================
   AVISO FLOTANTE ("se guardó", "listo", etc.)
   Lo crea comun.js con mostrarAviso("texto").
   ========================================================= */
.aviso-flotante {
  position: fixed;
  left: 50%;
  /* Abajo del todo: el tablero ya no tiene barra fija, así que
     acá no tapa ningún botón */
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  z-index: 90;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 30px;
  background: var(--panel-2);
  border: 1px solid var(--exito);
  color: var(--exito);
  font-family: var(--fuente-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.aviso-flotante.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.aviso-flotante-error {
  border-color: var(--peligro);
  color: var(--peligro);
}

/* =========================================================
   CONFETI (festejo del ganador)
   Lo dispara comun.js con lanzarConfeti().
   ========================================================= */
.capa-confeti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 95;
}

.confeti {
  position: absolute;
  top: -24px;
  border-radius: 2px;
  animation-name: caer-confeti;
  animation-timing-function: cubic-bezier(0.25, 0.65, 0.5, 1);
  animation-fill-mode: forwards;
}

@keyframes caer-confeti {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--deriva, 0), 105vh) rotate(var(--giro, 360deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .capa-confeti { display: none; }
}

/* =========================================================
   FONDO CONGELADO MIENTRAS HAY UN POPUP ABIERTO
   Sin esto, el dedo arrastraba la pantalla de atrás en vez
   del contenido del popup (pasaba mucho en los cambios).
   Lo pone y lo saca comun.js con abrirModal() / cerrarModal().
   ========================================================= */
/* El fondo no se puede desplazar mientras hay un popup, PERO la
   página NO se mueve de lugar. Antes se usaba `position: fixed`
   con un `top` negativo y en el iPhone eso corría la pantalla un
   instante: el toque caía en el botón de abajo. */
body.modal-abierto {
  overflow: hidden;
}

/* ---- El popup en sí ----
   Estos estilos VIVEN ACÁ, no en el CSS de cada pantalla.
   Estaban copiados en index.css, reglas.css, resumen.css y
   tablero.css, y al agregar un popup nuevo en historial.html
   salió sin estilo, tirado al fondo de la página. Estando en
   base.css, cualquier pantalla que ponga un .modal-overlay lo
   hereda ya funcionando. */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: var(--espacio);
  /* Esto es lo que frena el fondo sin recolocar la página: el
     dedo no puede arrastrar nada apoyándose en el velo negro. */
  touch-action: none;
  overscroll-behavior: contain;
}

.modal-overlay.visible {
  display: flex;
}

/* Los primeros 300 ms el contenido del popup no acepta toques.
   Es lo que evita que el mismo toque que lo abrió active un botón
   que quedó justo debajo del dedo. El velo negro SÍ sigue
   recibiendo el toque, para que no se cuele a la pantalla de
   atrás; cerrarModal() lo ignora durante esa ventana. */
.modal-overlay.recien-abierto .modal-caja {
  pointer-events: none;
}

.modal-caja {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  width: 100%;
  max-width: 400px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* NUNCA puede ocupar toda la pantalla. Siempre tiene que
     quedar a la vista un pedazo de lo que hay detrás, por dos
     razones: para saber dónde estás, y porque tocar ese pedazo
     es como se cierra el popup. Al Registro le pasó: con muchas
     acciones crecía hacia arriba y abajo hasta que ya no se
     podía cerrar. */
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--peligro);
}

/* La ✕ medía 22 px de lado: con el dedo se fallaba, y justo
   debajo queda el bote de basura de la primera acción del
   Registro — por eso "cerrar" terminaba borrando acciones.
   44 px es el mínimo para un dedo. El margen negativo evita que
   el botón más grande empuje el encabezado. */
.modal-cerrar {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  width: 44px;
  height: 44px;
  margin: -10px -12px -10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
}

.modal-texto {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.modal-texto-suave {
  color: var(--texto-tenue);
  font-size: 0.82rem;
}

/* ---- Botón de regresar (junto al logo) ---- */
.nav-izquierda {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-atras {
  background: none;
  border: none;
  color: var(--texto);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 2px;
  touch-action: manipulation;
}

/* =========================================================
   BANNER DE PATROCINADORES
   Lo llena banner.js con lo que diga
   patrocinadores/banners.js. Se usa en el inicio y al fondo
   del resumen.

   Mientras no haya patrocinadores el bloque está vacío y no
   ocupa nada: la clase .banner-visible se la pone el propio
   banner.js recién cuando dibujó algo.
   ========================================================= */
/* =========================================================
   PATROCINADORES OFICIALES
   ---------------------------------------------------------
   Distintos del banner de abajo: éstos son los que además
   salen en el PDF y en la imagen para redes, así que aquí
   se les da su título y un trato de «placa», no de anuncio
   que pasa.

   Van sobre BLANCO a propósito, aunque la app sea casi
   negra: los logos se suben con fondo blanco —así lo pide
   `patrocinadores/banners.js`, porque el PDF se imprime en
   papel— y sueltos sobre el fondo oscuro cada uno se vería
   como un recuadro blanco flotando.
   ========================================================= */
.oficiales { display: none; }
.oficiales.oficiales-visible {
  display: block;
  margin: var(--espacio) 0 0;
}
.oficiales-titulo {
  margin: 0 0 8px;
  font-family: var(--fuente-titulo, inherit);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-tenue, #9aa0ac);
  text-align: center;
}
.oficiales-fila {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 8px;
}
.oficial-uno {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  /* 44 de alto: es un blanco de toque, no solo una imagen. */
  min-height: 44px;
}
.oficial-uno img {
  max-width: 100%; max-height: 40px;
  width: auto; height: auto; display: block;
}

/* =========================================================
   LA FRANJA DE AVISO DE ARRIBA
   ---------------------------------------------------------
   Nace escondida y la prende `banner.js` SOLO si el usuario
   la escribió. La ✕ va de 44x44 como todo lo que se toca en
   esta app: justo debajo queda el banner, y fallar el cierre
   sería abrirle la página a un patrocinador sin querer.
   ========================================================= */
.aviso-arriba {
  display: flex; align-items: center; gap: 6px;
  margin: var(--espacio) 0 0;
  padding: 0 0 0 14px;
  background: var(--panel-2, #1b1f28);
  border: 1px solid var(--borde, #2b3040);
  border-left: 3px solid var(--naranja, #F97316);
  border-radius: 10px;
}
.aviso-arriba[hidden] { display: none; }
.aviso-arriba-texto {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 0;
  font-size: .86rem; line-height: 1.35;
  color: var(--texto-suave, #c7cbd4); text-decoration: none;
  /* Una línea: lo que no cabe se recorta, nunca se dobla. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.aviso-arriba-texto { color: var(--naranja, #F97316); }
.aviso-arriba-cerrar {
  flex: none; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--texto-tenue, #9aa0ac);
  font-size: 1.4rem; line-height: 1;
}

.banner {
  display: none;
}

.banner.banner-visible {
  display: block;
  margin: var(--espacio) 0 0;
}

/* La pista es la que se desliza con el dedo. El scroll-snap
   hace que siempre quede una imagen centrada, sin librerías. */
.banner-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radio);
  scrollbar-width: none;
}

.banner-pista::-webkit-scrollbar {
  display: none;
}

.banner-hueco {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
}

/* El aspect-ratio 3/1 reserva el espacio ANTES de que baje la
   imagen: sin eso, la pantalla pega un salto cuando carga. */
.banner-imagen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--panel);
}

.banner-puntitos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.banner-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--borde);
  transition: width 0.2s ease, background 0.2s ease;
}

.banner-punto-activo {
  width: 16px;
  border-radius: 3px;
  background: var(--naranja);
}

/* =========================================================
   AVISO DE VERSIÓN A MEDIAS
   Lo crea comun.js si el número de la copia guardada no
   coincide con el de la app. Antes esto fallaba en silencio.
   ========================================================= */
.aviso-version-rota {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 92;
  max-width: calc(100% - 24px);
  padding: 12px 16px;
  border-radius: var(--radio-chico);
  background: var(--panel-2);
  border: 1px solid var(--peligro);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.aviso-version-rota strong {
  color: var(--peligro);
}

/* =========================================================
   TIRITA DE "AGREGA LA APP A TU PANTALLA"
   La dibuja instalar.js, solo en el inicio y solo si toca.
   ========================================================= */
.tirita-instalar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--espacio);
  padding: 11px 12px;
  border-radius: var(--radio-chico);
  background: var(--panel);
  border: 1px solid var(--borde);
}

.tirita-logo {
  flex: 0 0 auto;
  display: block;
}

.tirita-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tirita-titulo {
  font-family: var(--fuente-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--texto);
}

.tirita-nota {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--texto-tenue);
}

.tirita-btn {
  flex: 0 0 auto;
  background: var(--naranja-suave);
  border: 1px solid var(--naranja);
  color: var(--naranja);
  font-family: var(--fuente-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
  padding: 8px 11px;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

.tirita-cerrar {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 0.9rem;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- La salida al sitio de Torneo Basket ----------
   La pone comun.js en la barra de todas las pantallas. Va discreta a
   propósito: el marcador es lo que se viene a usar, esto es solo la
   forma de volver. Blanco de toque de 44 px, como todo lo demás. */
.salida-al-sitio {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--texto-tenue);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}
.salida-al-sitio::before { content: "\2190"; margin-right: 6px; }
.salida-al-sitio:hover,
.salida-al-sitio:focus-visible { color: var(--texto); }

/* Cuando ya hay un ⚙ u otro botón a la derecha, el link se va antes
   de él y deja de empujar. */
.top-nav .salida-al-sitio + * { margin-left: 10px; }