/* ===============================================================
   Mina Loto — Estilos
   Paleta: negro · azul · morado · naranja   |   Tipografía: Arial Black
   =============================================================== */

:root {
  --negro:        #07070A;
  --negro-carta:  #101219;
  --negro-campo:  #171A24;
  --borde:        #262B3A;

  --azul:         #00A3E0;
  --azul-claro:   #3CD2FF;
  --morado:       #6C2BD9;
  --morado-claro: #A855F7;
  --naranja:      #FF7A18;
  --naranja-claro:#FFA347;

  --blanco:       #F4F6FB;
  --gris:         #8B93A7;
  --rojo:         #FF4D4D;

  --negra: "Arial Black", "Arial Bold", "Helvetica Bold", Gadget, sans-serif;
  --normal: Arial, Helvetica, sans-serif;

  --radio: 16px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

/* --- Evitar el zoom automático del teléfono ---------------------
   1. El navegador no reescala el texto solo.
   2. Los campos van a 16px (menos que eso, iPhone hace zoom al escribir).
   3. touch-action: manipulation quita el zoom por doble toque.        */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
input, select, textarea, button { font-size: 16px; touch-action: manipulation; }
a, label, .item, .boton, .ojo, .casilla { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--normal);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- Fondo con luces de color ---------------- */
.escena {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
}

.brillo {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  pointer-events: none;
  animation: flotar 16s ease-in-out infinite alternate;
}
.brillo--azul   { width: 46vmax; height: 46vmax; top: -14vmax; left: -12vmax; background: var(--azul); }
.brillo { opacity: .42; }
.brillo--morado { width: 42vmax; height: 42vmax; bottom: -16vmax; right: -10vmax; background: var(--morado); animation-delay: -5s; }
.brillo--naranja{ width: 26vmax; height: 26vmax; bottom: 8vmax; left: 12vmax; background: var(--naranja); opacity: .3; animation-delay: -9s; }

@keyframes flotar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vmax, -3vmax, 0) scale(1.12); }
}

/* ---------------- Tarjeta ---------------- */
.tarjeta {
  position: relative;
  width: 100%;
  /* Caja más pequeña: antes ocupaba casi toda la pantalla del portátil
     y quedaba desproporcionada. */
  max-width: 340px;
  padding: 22px 20px 18px;
  border-radius: var(--radio);
  background: rgba(16, 18, 25, .82);
  border: 1px solid var(--borde);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  overflow: hidden;
  text-align: center;
  animation: subir .5s ease-out both;
}
@media (min-width: 560px) { .tarjeta { padding: 26px 26px 20px; } }

@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Línea tricolor superior */
.tarjeta__borde {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azul), var(--morado) 55%, var(--naranja));
}

/* ---------------- Marca ---------------- */
.marca { text-align: center; margin-bottom: 22px; }
.marca > * { margin-inline: auto; }
.marca__logo {
  display: block;
  margin: 0 auto;
  width: 86px;
  height: 86px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .55))
          drop-shadow(0 0 26px rgba(0, 163, 224, .32));
}
.marca__linea {
  margin: 10px 0 0;
  font-family: var(--negra);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------------- Textos ---------------- */
.titulo {
  font-family: var(--negra);
  font-size: clamp(18px, 4.4vw, 21px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.texto {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gris);
}

/* ---------------- Aviso de error ---------------- */
.aviso {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 18px;
  padding: 11px 13px;
  border-radius: 10px;
  border-left: 3px solid var(--rojo);
  background: rgba(255, 77, 77, .12);
  font-size: 13.5px;
  line-height: 1.45;
}
.aviso[hidden] { display: none; }
.aviso__icono {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  font-family: var(--negra);
  font-size: 12px;
  display: grid; place-items: center;
}

/* ---------------- Campos ---------------- */
.campo { margin-bottom: 16px; }

.campo__etiqueta {
  display: block;
  text-align: center;
  margin-bottom: 8px;
  font-family: var(--negra);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

.campo__grupo { position: relative; display: flex; }

.campo__control {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid var(--borde);
  background: var(--negro-campo);
  color: var(--blanco);
  font-family: var(--normal);
  font-size: 16px; /* evita el zoom automático en iPhone */
  text-align: center;
  transition: border-color .18s, box-shadow .18s;
}
.campo__control--conBoton { padding-right: 66px; padding-left: 66px; }
.campo__control::placeholder { color: #596074; }
.campo__control:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 163, 224, .25);
}
.campo__control.malo {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(255, 77, 77, .18);
}

.ojo {
  position: absolute;
  right: 5px; top: 5px; bottom: 5px;
  width: 56px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gris);
  font-family: var(--negra);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s, background .16s;
}
.ojo:hover { color: var(--naranja); background: rgba(255, 122, 24, .1); }
.ojo:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* ---------------- Fila recordar / enlace ---------------- */
.fila {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin: 20px 0 24px;
}
.casilla {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--gris);
  cursor: pointer;
}
.casilla input {
  width: 18px; height: 18px;
  accent-color: var(--naranja);
  cursor: pointer;
}
.enlace {
  font-size: 13px;
  color: var(--azul-claro);
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 210, 255, .35);
}
.enlace:hover { color: var(--naranja); border-color: var(--naranja); }

/* ---------------- Botón principal ---------------- */
.boton {
  position: relative;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #14060A;
  background: linear-gradient(120deg, var(--naranja) 0%, var(--naranja-claro) 50%, var(--morado-claro) 130%);
  background-size: 180% 100%;
  font-family: var(--negra);
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(255, 122, 24, .22);
  transition: background-position .35s, transform .08s, box-shadow .2s;
}
.boton:hover { background-position: 100% 0; box-shadow: 0 12px 28px rgba(168, 85, 247, .28); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }

.boton__girador {
  display: none;
  width: 18px; height: 18px;
  margin-left: 10px;
  border: 3px solid rgba(20, 6, 10, .35);
  border-top-color: #14060A;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  vertical-align: -4px;
}
@keyframes girar { to { transform: rotate(360deg); } }

.boton.ocupado { cursor: progress; opacity: .85; }
.boton.ocupado .boton__girador { display: inline-block; }

/* ===============================================================
   Panel (pantalla de bienvenida tras entrar)
   =============================================================== */
.panel { max-width: 760px; }
.panel__cinta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 163, 224, .45);
  font-family: var(--negra);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azul-claro);
}
.punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 0 rgba(0, 163, 224, .6);
  animation: latir 2.4s ease-out infinite;
}
@keyframes latir {
  0%        { box-shadow: 0 0 0 0 rgba(0, 163, 224, .55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(0, 163, 224, 0); }
}

.modulos { list-style: none; padding: 0; margin: 22px 0 26px; }
.modulos li {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--borde);
  font-size: 14.5px;
}
.modulos li:last-child { border-bottom: 1px solid var(--borde); }
.modulos b {
  flex: none;
  font-family: var(--negra);
  font-size: 12px;
  color: var(--naranja);
}

.boton--linea {
  display: inline-block;
  width: auto;
  padding: 0 24px;
  min-height: 48px;
  line-height: 48px;
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--blanco);
  text-decoration: none;
  box-shadow: none;
  font-size: 15px;
  text-align: center;
}
.boton--linea:hover { border-color: var(--naranja); color: var(--naranja); background: transparent; box-shadow: none; }

/* ---------------- Accesibilidad ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}