/* ============================================================
   luzgasia — acceso.css
   FONDO COMPARTIDO de las tres puertas de acceso (área de cliente,
   área de colaborador y panel de administración): navy profundo con
   auroras que derivan, una malla de puntos y gotas de la marca
   flotando. El MISMO formato en las tres para unificarlas
   (petición 2026-08-09).

   Se pinta con el parcial `parciales/_fondo_acceso.html`. Solo usa
   tokens GLOBALES (tokens.css): funciona igual sobre area.css,
   colaborador.css y panel.css. Todo movimiento vive tras la puerta
   de reduced-motion; sin motion queda el cuadro estático.
   ============================================================ */

.acceso-fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--c-marino-800), transparent 60%),
    var(--c-marino-950);
}

/* Auroras: masas de luz difusa que dan profundidad sin dibujar nada. */
.acceso-fondo__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.acceso-fondo__aurora--a {
  width: 46rem;
  height: 30rem;
  left: -12%;
  top: -18%;
  background: radial-gradient(closest-side, rgba(27, 111, 224, 0.5), transparent 70%);
}
.acceso-fondo__aurora--b {
  width: 42rem;
  height: 34rem;
  right: -16%;
  bottom: -22%;
  background: radial-gradient(closest-side, rgba(18, 58, 117, 0.85), transparent 72%);
}
.acceso-fondo__aurora--c {
  width: 30rem;
  height: 22rem;
  left: 38%;
  top: 46%;
  background: radial-gradient(closest-side, rgba(255, 138, 30, 0.14), transparent 70%);
}

/* Malla de puntos, desvanecida hacia los bordes: textura, no dibujo. */
.acceso-fondo__malla {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%);
}

/* Un haz de luz diagonal MUY sutil que barre el fondo de tanto en tanto
   (sustituye a las gotas flotantes, que no gustaron — 2026-08-09). */
.acceso-fondo__haz {
  position: absolute;
  inset: -20% -30%;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(62, 160, 255, 0.05) 48%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(62, 160, 255, 0.05) 52%,
    transparent 58%
  );
  translate: -60% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .acceso-fondo__aurora--a { animation: acceso-aurora-a 26s ease-in-out infinite alternate; }
  .acceso-fondo__aurora--b { animation: acceso-aurora-b 32s ease-in-out infinite alternate; }
  .acceso-fondo__aurora--c { animation: acceso-aurora-c 22s ease-in-out infinite alternate; }
  @keyframes acceso-aurora-a { to { translate: 6% 8%; scale: 1.12; } }
  @keyframes acceso-aurora-b { to { translate: -5% -7%; scale: 1.08; } }
  @keyframes acceso-aurora-c { to { translate: -8% 10%; scale: 1.15; opacity: 0.7; } }

  .acceso-fondo__haz { animation: acceso-haz 18s ease-in-out infinite; }
  @keyframes acceso-haz {
    0%, 55% { translate: -60% 0; }
    100% { translate: 60% 0; }
  }
}

/* ============================================================
   CAPTCHA (Cloudflare Turnstile) integrado en las tres puertas de
   acceso (área de cliente, colaborador y panel). APAGADO POR DEFECTO:
   con `TURNSTILE_SITE_KEY` vacía el parcial `parciales/turnstile.html`
   no pinta este contenedor, así que estas reglas no tocan NADA hoy.

   Encendido, el iframe de Cloudflare mide 300×65 px fijo. Aquí solo se
   le da aire, se centra y se reserva su hueco para que el botón de
   enviar no salte cuando el widget monta. Solo tokens GLOBALES, como
   el resto de esta hoja. Los formularios en rejilla (login del área,
   registro del colaborador) añaden su `grid-column` en su propia hoja.
   ============================================================ */
.reto-captcha {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-block: var(--esp-1) 0;
  min-height: 66px;
}
/* `stretch` + width:100% para que el widget en modo `data-size="flexible"`
   (ver parciales/turnstile.html) LLENE el ancho del contenedor en vez de
   quedarse en su caja fija de 300px centrada. El contenedor ya va a lo ancho
   en cada puerta (grid-column 1/-1 en área login, registro y login de
   colaborador). Cloudflare renderiza su iframe al 100% del hueco disponible. */
.reto-captcha .cf-turnstile { align-self: stretch; width: 100%; }
.reto-captcha .campo__ayuda { text-align: center; margin: 0; }