/* ==========================================================================
     FONDO ANIMADO "AURORA" — acceso y panel (index.html)
     ==========================================================================
     Tres manchas de luz grandes y difuminadas (rosa del logo, violeta y azul)
     que se desplazan muy despacio detrás del contenido, como luces de
     escenario. Los colores, en oper1-theme.css (--aurora-1 a --aurora-3).

     Cómo está hecho, pensando en el móvil:
       - una capa fija (<div class="aurora">, la primera del <body>) detrás de
         todo, que no recibe clics y recorta lo que se sale: ni scroll
         horizontal ni reflow;
       - cada mancha es un radial-gradient que ya se difumina solo (sin
         filter: blur) y solo se animan transform y opacity, que el navegador
         mueve en la GPU sin volver a pintar;
       - con "reducir movimiento", quieta y con el mismo aspecto.

     Las tarjetas, tablas, formularios y la cabecera pasan a un velo casi
     opaco (--velo-panel, --velo-cabecera) para que la luz se intuya sin
     restar contraste. La etiqueta de OPER1 y los recuadros de los gráficos
     siguen opacos. Para quitarlo todo: el <link> y el <div class="aurora">. */

/* El color de fondo de la página queda en <html>; el <body>, transparente,
   para que la aurora se vea entre el fondo y el contenido. */
html { background: var(--fondo); }
body { background: transparent; }

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.aurora span {
  position: absolute;
  width: var(--aurora-tam);
  height: var(--aurora-tam);
  border-radius: 50%;
  will-change: transform, opacity;
  animation: var(--aurora-ritmo) ease-in-out infinite alternate both;
}

.aurora {
  --aurora-tam: min(72vmax, 1100px);
}

/* Rosa fucsia del logo, arriba a la izquierda. */
.aurora span:nth-child(1) {
  top: -28%;
  left: -18%;
  background: radial-gradient(closest-side, var(--aurora-1), transparent);
  --aurora-ritmo: 28s;
  animation-name: aurora-1;
}
/* Violeta, a la derecha. */
.aurora span:nth-child(2) {
  top: 18%;
  right: -26%;
  background: radial-gradient(closest-side, var(--aurora-2), transparent);
  --aurora-ritmo: 36s;
  animation-name: aurora-2;
}
/* Azul eléctrico, abajo. */
.aurora span:nth-child(3) {
  bottom: -34%;
  left: 12%;
  background: radial-gradient(closest-side, var(--aurora-3), transparent);
  --aurora-ritmo: 40s;
  animation-name: aurora-3;
}

@keyframes aurora-1 {
  from { transform: translate3d(0, 0, 0) scale(1);         opacity: 0.85; }
  to   { transform: translate3d(28%, 18%, 0) scale(1.12);  opacity: 1; }
}
@keyframes aurora-2 {
  from { transform: translate3d(0, 0, 0) scale(1.05);      opacity: 1; }
  to   { transform: translate3d(-30%, 14%, 0) scale(0.92); opacity: 0.75; }
}
@keyframes aurora-3 {
  from { transform: translate3d(0, 0, 0) scale(0.95);      opacity: 0.8; }
  to   { transform: translate3d(18%, -24%, 0) scale(1.1);  opacity: 1; }
}

/* Móvil: manchas más pequeñas y algo más lentas. */
@media (max-width: 600px) {
  .aurora { --aurora-tam: 115vw; }
  .aurora span:nth-child(1) { top: -12%; left: -40%; --aurora-ritmo: 38s; }
  .aurora span:nth-child(2) { top: 34%; right: -50%; --aurora-ritmo: 48s; }
  .aurora span:nth-child(3) { bottom: -22%; left: -10%; --aurora-ritmo: 54s; }
}

/* Reducir movimiento: quieta, con el mismo aspecto. */
@media (prefers-reduced-motion: reduce) {
  .aurora span:nth-child(n) { animation: none; will-change: auto; }
}

/* --- Superficies sobre la aurora: velo casi opaco ---------------------------- */

header { background: var(--velo-cabecera); }

.acceso,
.tarjeta,
.grafico,
.barras,
.marco,
.tramos-lista {
  background: var(--velo-panel);
}