/* Portal TERRA GAMING: colores del logo (amarillo de los audífonos, azul del mundo, verde azulado de los continentes, negro
   y blanco). Primero que se use bien: letra grande, mucho contraste y botones de al menos 52 px para el dedo. */
:root {
  --fondo: #0B0F14;
  --tarjeta: #161C24;
  --tarjeta2: #1D2530;
  --borde: #2A3442;
  --texto: #F5F7FA;
  --texto2: #AEB8C4;
  --amarillo: #FFE11B;
  --amarillo-oscuro: #3A3410;
  --azul: #1BA7DE;
  --verde: #0E6E78;
  --verde-claro: #12868F;
  --rojo: #FF8A80;
  --rojo-fondo: #3A1A1A;
  --radio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body {
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

.cabeza {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 480px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 18px 6px;
}
.marca { display: flex; align-items: center; gap: 8px; }
.marca-img { height: 44px; width: auto; }
.emblema { width: 40px; height: 40px; }
.em-mundo { fill: var(--azul); stroke: #000; stroke-width: 2; }
.em-tierra { fill: var(--verde); }
.em-diadema { fill: none; stroke: var(--amarillo); stroke-width: 5; stroke-linecap: round; }
.em-oreja { fill: var(--amarillo); stroke: #000; stroke-width: 1.5; }
.marca-texto { font-weight: 800; font-size: 20px; letter-spacing: .5px; }
.marca-texto b { color: #fff; }
.marca-texto span { color: var(--amarillo); }
.hora { color: var(--texto2); font-size: 14px; }

.aviso {
  width: calc(100% - 36px); max-width: 444px; margin: 6px auto 0; padding: 10px 14px; border-radius: var(--radio);
  background: var(--rojo-fondo); color: var(--rojo); font-size: 15px;
}
.aviso.bien { background: #12302A; color: #8FE3C8; }
.aviso.nueva { background: #0F2E3D; color: #CFEFFC; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.boton-chico {
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--azul); color: #06131A;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap;
}

main { max-width: 480px; margin: 0 auto; padding: 8px 18px 18px; }
h1 { font-size: 26px; margin: 10px 0 6px; font-weight: 700; }
.sub { color: var(--texto2); margin: 0 0 12px; font-size: 16px; }
.sub-chica { color: var(--texto2); font-size: 14px; font-weight: 400; }
.centro { text-align: center; }
.nota { color: var(--texto2); font-size: 15px; margin-top: 18px; }
.saludo { color: var(--texto2); margin: 8px 0 0; }
.usuario { margin-top: 0; word-break: break-all; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin: 0 0 12px; }
.fila { display: flex; align-items: baseline; justify-content: space-between; }
.etiqueta { color: var(--azul); font-size: 14px; font-weight: 600; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .6px; }
.numero { font-size: 34px; font-weight: 800; margin: 0; }
.grande { font-size: 20px; font-weight: 700; margin: 0 0 6px; word-break: break-all; }
.amarillo { color: var(--amarillo); }
.saldo { font-size: 22px; font-weight: 700; }
.titulo-seccion { font-weight: 700; margin: 18px 0 8px; }

.lista-zonas { list-style: none; margin: 0; padding: 0; }
.lista-zonas li { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.lista-zonas li + li { border-top: 1px solid var(--borde); }
.zona-nombre { font-size: 18px; }
.zona-tiempo { font-size: 28px; font-weight: 800; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; margin-bottom: 8px; }
.lista .linea { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lista .detalle { color: var(--texto2); font-size: 15px; margin-top: 2px; }
.marca-chica { border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.alcanza { background: var(--amarillo); color: #111; }
.falta { color: var(--texto2); font-size: 15px; white-space: nowrap; }
.regalo { background: var(--verde); color: #fff; }

.en-pc { background: var(--verde); border-color: var(--verde-claro); }
.en-pc-donde { margin: 0 0 2px; color: #D7F3F5; font-weight: 600; }

.instalar { border-color: var(--azul); }
.instalar-fila { display: flex; gap: 12px; align-items: center; }
.instalar-icono { width: 56px; height: 56px; border-radius: 13px; flex: none; }
.instalar-titulo { font-size: 18px; font-weight: 800; margin: 0 0 2px; }
.instalar .sub { margin: 0; }
.instalar .boton { margin-top: 14px; }

/* Publicidad en la app: se pasan deslizando (una por pantalla), sin moverse solas. */
.anuncios { margin: 8px 0 4px; }
.anuncios-pista { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; overflow-y: hidden; transition: height .2s; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.anuncios-pista::-webkit-scrollbar { display: none; }
.anuncio {
  flex: 0 0 100%; scroll-snap-align: center; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.anuncio img { display: block; width: 100%; max-height: 62vh; object-fit: cover; background: #000; cursor: zoom-in; }
.anuncio-texto { margin: 0; padding: 10px 14px 12px; font-size: 16px; }
.anuncio-texto.solo { background: var(--amarillo-oscuro); color: var(--amarillo); font-weight: 700; font-size: 18px; padding: 14px 16px; }
.anuncio .boton { margin: 0 14px 14px; width: calc(100% - 28px); }
.puntitos { display: flex; justify-content: center; gap: 6px; min-height: 8px; margin-top: 8px; }
.puntitos span { width: 8px; height: 8px; border-radius: 4px; background: var(--borde); transition: width .2s; }
.puntitos span.activo { width: 20px; background: var(--amarillo); }
.visor {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.visor img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.visor .boton { max-width: 320px; background: var(--tarjeta2); }
#negocio .boton { margin-top: 10px; }
#negocioDireccion { margin: 6px 0 0; }

.legal { color: var(--texto2); font-size: 14px; margin-top: 28px; text-align: center; }
.legal a, .documento a:not(.boton) { color: var(--azul); }
.docs a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; color: var(--texto); text-decoration: none; font-weight: 600; }
.docs a + a { border-top: 1px solid var(--borde); }
.docs a span { color: var(--azul); font-size: 22px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; margin: 14px 0 0; cursor: pointer; }
.casilla input { width: 26px; height: 26px; min-height: 0; flex: none; margin: 0; accent-color: var(--amarillo); }

/* Documentos (aviso, términos, reglamento): páginas aparte, letra cómoda para leer en el celular. */
.doc-pagina { padding-bottom: 24px; }
.doc-cabeza {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 5;
  background: var(--fondo); border-bottom: 1px solid var(--borde); padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
}
.doc-volver { color: var(--amarillo); font-weight: 800; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.doc-cabeza .marca-texto { font-size: 16px; }
.documento { max-width: 680px; line-height: 1.6; }
.documento h2 { font-size: 19px; color: var(--amarillo); margin: 26px 0 8px; }
.documento ul { padding-left: 22px; }
.documento li { margin: 6px 0; }
.doc-version { color: var(--texto2); font-size: 14px; margin-top: 0; }
.doc-fin { margin-top: 28px; }

.cumple { background: var(--amarillo-oscuro); color: var(--amarillo); border-radius: var(--radio); padding: 12px 16px; margin-bottom: 12px; font-weight: 600; }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
input {
  width: 100%; min-height: 54px; padding: 12px 14px; font: inherit; color: var(--texto);
  background: var(--tarjeta); border: 2px solid var(--borde); border-radius: 12px;
}
input:focus { outline: none; border-color: var(--azul); }
.error { color: var(--rojo); margin: 12px 0 0; font-weight: 600; }

.boton {
  display: block; width: 100%; min-height: 54px; margin-top: 18px; padding: 12px; border: 0; border-radius: 14px;
  background: var(--amarillo); color: #111; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
}
a.boton { text-align: center; text-decoration: none; }
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .55; }
.boton:focus-visible, .tab:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.boton.secundario { background: transparent; color: var(--texto); border: 2px solid var(--borde); font-weight: 700; margin-top: 10px; }
.boton.peligro { color: var(--rojo); border-color: #5A2C2C; margin-top: 18px; }

.camara { position: relative; border-radius: var(--radio); overflow: hidden; background: #000; aspect-ratio: 3 / 4; margin: 8px 0 10px; }
.camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La mira: un cuadrado al centro (lo que jsQR mira a resolución completa para leer de lejos). */
.mira {
  position: absolute; left: 50%; top: 50%; width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 4px solid var(--amarillo); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25);
}
.zoom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); min-height: 48px; padding: 10px 20px; }
.pasos { margin: 6px 0 0; padding-left: 22px; }
.pasos li { margin: 6px 0; }
.pasos-grandes { margin: 4px 0 6px; font-size: 18px; }
.pasos-grandes li { margin: 12px 0; }
.paso-icono { width: 26px; height: 26px; fill: var(--azul); vertical-align: -6px; }

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: flex-end;
  background: #0F141B; border-top: 1px solid var(--borde); padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; max-width: 120px; min-height: 60px; background: none; border: 0; color: var(--texto2); font: inherit; font-size: 13px;
  font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; cursor: pointer;
}
.tab svg { width: 26px; height: 26px; fill: currentColor; }
.tab.activa { color: var(--amarillo); }
.tab-qr-boton {
  width: 60px; height: 60px; margin-top: -26px; border-radius: 50%; background: var(--amarillo); color: #111;
  display: flex; align-items: center; justify-content: center; border: 4px solid var(--fondo);
}
.tab-qr-boton svg { width: 30px; height: 30px; }
.tab-qr.activa { color: var(--amarillo); }

.hoja-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.hoja {
  width: 100%; max-width: 480px; background: var(--tarjeta2); border-radius: 22px 22px 0 0; border-top: 3px solid var(--amarillo);
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
}
.hoja-titulo { font-size: 22px; font-weight: 800; margin: 0 0 6px; }

.cargando {
  position: fixed; inset: 0; background: rgba(11, 15, 20, .8); display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; z-index: 20; font-weight: 600;
}
.rueda { width: 44px; height: 44px; border-radius: 50%; border: 5px solid var(--borde); border-top-color: var(--amarillo); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rueda { animation-duration: 3s; } }