/* ==========================================================================
   fondo_sfe.css — Fondo global de Santa Fe en Casa (todas las vistas menos Tecnología)
   --------------------------------------------------------------------------
   Aurora ESTÁTICA (degradados radiales pintados una sola vez) + 30 motas de luz.
   Las motas solo animan `transform` y `opacity`: corren en el compositor (GPU),
   sin repintar la página. NO animar aquí `background-position`, `filter: blur`
   ni `box-shadow`: eso es lo que hacía el degradado anterior del <body>.

   Tecnología (`.ti-escenario`, oscuro) NO usa esta capa: sus plantillas vacían el
   bloque `fondo_global` de base.html.
   ========================================================================== */

.fondo-sfe {
    --fondo-base: #F4F4F4;
    /* Paleta de las motas. Sobre fondo claro se evita el verde neón (no se ve): marca oscura
       + naranja + morado, rojo y azul oscuros. En el tema oscuro vuelve el neón y los tonos suben. */
    --c1: #00443F; --c2: #FF6700; --c3: #14AA9B; --c4: #6A1B9A;
    --c5: #C62828; --c6: #1A237E; --c7: #E65100;
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background-color: var(--fondo-base);
    background-image:
        radial-gradient(circle 42vw at 10% 8%,  rgba(20, 170, 155, 0.24), transparent 100%),
        radial-gradient(circle 34vw at 95% 6%,  rgba(255, 103, 0, 0.15),  transparent 100%),
        radial-gradient(circle 34vw at 40% 100%, rgba(218, 255, 3, 0.26), transparent 100%),
        radial-gradient(circle 40vw at 92% 96%, rgba(20, 170, 155, 0.20), transparent 100%);
}

/* Motas de luz: cada una sube desde abajo y se desvanece. La posición (--x), el tamaño
   (--t), la duración (--d), el desfase (--r) y el color (--c) cambian en cada una para
   que no se vean sincronizadas. El desfase es negativo: ya están a mitad de camino al cargar. */
.fondo-sfe .mota {
    position: absolute; left: var(--x); bottom: -14px;
    width: var(--t); height: var(--t); border-radius: 50%;
    background: var(--c); color: var(--c);
    box-shadow: 0 0 6px 1px currentColor;   /* estático: se rasteriza una vez */
    opacity: 0; will-change: transform, opacity;
    animation: fondo-mota-sube var(--d) linear infinite; animation-delay: var(--r);
}
@keyframes fondo-mota-sube {
    0%   { transform: translate3d(0, 0, 0);               opacity: 0; }
    15%  { opacity: 0.85; }
    50%  { transform: translate3d(14px, -55vh, 0); }
    85%  { opacity: 0.85; }
    100% { transform: translate3d(-8px, -112vh, 0);       opacity: 0; }
}

/* Pestaña oculta: base.js pone la clase; no tiene sentido animar lo que nadie ve. */
.fondo-pausado .fondo-sfe .mota { animation-play-state: paused; }

/* Tema oscuro (interruptor de la barra): misma aurora, más tenue, sobre base oscura. */
[data-bs-theme="dark"] .fondo-sfe {
    --fondo-base: #121212;
    --c1: #DAFF03; --c2: #FF6700; --c3: #14AA9B; --c4: #B070E0;
    --c5: #FF5252; --c6: #5C7CFA; --c7: #DAFF03;
    background-image:
        radial-gradient(circle 42vw at 10% 8%,  rgba(20, 170, 155, 0.20), transparent 100%),
        radial-gradient(circle 34vw at 95% 6%,  rgba(255, 103, 0, 0.12),  transparent 100%),
        radial-gradient(circle 34vw at 40% 100%, rgba(218, 255, 3, 0.08), transparent 100%),
        radial-gradient(circle 40vw at 92% 96%, rgba(20, 170, 155, 0.16), transparent 100%);
}

/* Móvil y quien pide menos movimiento: se queda solo la aurora estática. */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .fondo-sfe .mota { display: none; }
}