/* ============================================================================
   FONDO GLOBAL — Gestión Gama
   Diseño original: Uiverse.io by sunn_2633 (adaptado)
   ----------------------------------------------------------------------------
   Fondo animado que se renderiza detrás de TODAS las pantallas del sistema.
   Se declara una sola vez en base.html, por lo que cualquier pantalla que
   extienda ese template lo hereda automáticamente.

   Los colores vienen de las variables de temas.css, así que el fondo cambia
   junto con el resto de la interfaz cuando el usuario alterna el tema.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   CAPA DE FONDO

   Tres decisiones importantes respecto al código original:

   1. position: fixed + inset: 0 en lugar de width/height: 100%.
      El original dependía de que su contenedor padre tuviera altura definida;
      si no la tiene, el div colapsa a 0px y el fondo no se ve. Con fixed +
      inset: 0 siempre cubre exactamente el viewport, y al ser fixed no se
      desplaza al hacer scroll: el fondo queda quieto mientras el contenido se
      mueve por encima.

   2. z-index: -1 lo ubica detrás de todo el contenido de la página.

   3. pointer-events: none hace que el fondo sea completamente transparente a
      los clics: el mouse lo "atraviesa". Sin esta línea, al cubrir toda la
      pantalla el fondo interceptaría cada clic y ningún botón ni campo del
      sistema sería utilizable.
   --------------------------------------------------------------------------- */
.fondo-global {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-color: var(--fondo-base);

    /* Cinco capas apiladas. El orden importa: la primera se dibuja arriba.
       1. Viñeta: oscurece los bordes para concentrar la atención en el centro.
       2-3. Grilla primaria (60px): líneas horizontales y verticales.
       4-5. Grilla secundaria (20px): grilla más fina y más tenue. */
    background-image:
        radial-gradient(circle at center, transparent 30%, var(--fondo-vineta) 90%),
        linear-gradient(var(--fondo-grilla-primaria) 1px, transparent 1px),
        linear-gradient(90deg, var(--fondo-grilla-primaria) 1px, transparent 1px),
        linear-gradient(var(--fondo-grilla-secundaria) 1px, transparent 1px),
        linear-gradient(90deg, var(--fondo-grilla-secundaria) 1px, transparent 1px);

    /* Un valor de tamaño por capa, en el mismo orden que background-image */
    background-size:
        100% 100%,
        60px 60px,
        60px 60px,
        20px 20px,
        20px 20px;

    animation: fondo-desplazar 10s linear infinite;
}

/* ---------------------------------------------------------------------------
   ANIMACIÓN

   Desplaza las grillas en diagonal de forma continua.

   El bucle es imperceptible porque cada grilla se desplaza exactamente un
   múltiplo de su propio tamaño de celda: la primaria 60px (una celda) y la
   secundaria 40px (dos celdas de 20px). Al terminar el ciclo, el patrón
   coincide con su posición inicial, así que no hay salto visible.

   Como la secundaria recorre dos celdas en el mismo tiempo, se mueve al doble
   de velocidad relativa, generando el efecto de profundidad.

   La viñeta se mantiene en 0 0 en ambos fotogramas: es un degradado fijo que
   no debe desplazarse.
   --------------------------------------------------------------------------- */
@keyframes fondo-desplazar {
    0% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }
    100% {
        background-position:
            0 0,
            60px 60px,
            60px 60px,
            40px 40px,
            40px 40px;
    }
}

/* ---------------------------------------------------------------------------
   ACCESIBILIDAD Y RENDIMIENTO

   Si el sistema operativo del usuario tiene activada la preferencia de reducir
   animaciones, el fondo se muestra estático. El patrón sigue visible, solo deja
   de moverse.

   Esto también sirve como salida de emergencia si en el equipo del local la
   animación resulta costosa: alcanza con activar esa opción en Windows
   (Configuración → Accesibilidad → Efectos visuales) para detenerla sin tocar
   el código.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fondo-global {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   VARIANTE ESTÁTICA

   Clase opcional para pantallas donde conviene evitar el repintado continuo,
   como la de registrar venta: el RNF-09 exige tiempos de respuesta por debajo
   de 5 segundos y esa pantalla se usa con el cliente esperando en el mostrador.

   Uso: <div class="fondo-global fondo-estatico"></div>
   --------------------------------------------------------------------------- */
.fondo-global.fondo-estatico {
    animation: none;
}