/* ============================================================================
   PANTALLA DE CARGA — Gestión Gama
   Spinner base: Uiverse.io by PriyanshuGupta28 (adaptado)
   ----------------------------------------------------------------------------
   Superposición que cubre la pantalla mientras el sistema procesa una acción.
   Diez tornillos dispuestos en círculo se separan del centro por turnos,
   generando un movimiento continuo que recorre la rueda.

   Sobre la ausencia de porcentaje: el indicador es INDETERMINADO a propósito.
   El navegador no puede conocer de antemano cuánto tardará el servidor, así que
   una barra que fuera de 0 a 100 en un tiempo fijo estaría inventando ese dato:
   si la respuesta llegara antes daría un salto, y si tardara más quedaría llena
   y detenida, dando la impresión de que el sistema se colgó. Un indicador
   cíclico comunica "estoy trabajando" sin prometer un tiempo que no conoce.

   No declara colores literales: todos vienen de temas.css, de modo que la
   pantalla acompaña el cambio de tema.
   ============================================================================ */

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

   Cubre toda la ventana y bloquea la interacción con lo que hay detrás. Ese
   bloqueo es intencional: evita que el usuario vuelva a pulsar un botón cuya
   acción ya está en curso, algo especialmente delicado al registrar una venta
   o confirmar un pedido, donde un doble envío duplicaría la operación.
   --------------------------------------------------------------------------- */
.cargando-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cargando-fondo);
    backdrop-filter: blur(2px);

    /* Oculto por defecto. visibility además de opacity para que, cuando esté
       oculto, no intercepte clics ni sea alcanzable con el tabulador. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cargando-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* ---------------------------------------------------------------------------
   TARJETA

   Reutiliza el contenedor del login y los paneles de inventario: mismo fondo,
   mismo borde, misma franja dorada superior.
   --------------------------------------------------------------------------- */
.cargando-caja {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-sombra);
    position: relative;
    min-width: 230px;
    text-align: center;
}

.cargando-caja::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--acento-oscuro) 20%,
        var(--acento) 50%,
        var(--acento-oscuro) 80%,
        transparent 100%
    );
}

.cargando-contenido {
    padding: 30px 34px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

/* ---------------------------------------------------------------------------
   RUEDA DE TORNILLOS

   El contenedor tiene tamaño mínimo y sirve solo como punto de origen: cada
   tornillo se posiciona respecto de su centro mediante rotación y desplazamiento.
   --------------------------------------------------------------------------- */
.cargando-rueda {
    position: relative;
    width: 10px;
    height: 10px;
    /* Margen para que los tornillos, que se extienden fuera del contenedor,
       no queden recortados por el padding de la tarjeta. */
    margin: 34px 0 30px;
}

/* Cada tornillo se ubica con su centro sobre el del contenedor y desde ahí se
   rota y se desplaza hacia afuera. Los valores --rotacion y --distancia se
   definen por posición más abajo.

   Se anima transform y no propiedades de posición porque transform se resuelve
   en la tarjeta gráfica y no obliga al navegador a recalcular el diseño en cada
   fotograma: es notablemente más liviano en equipos modestos. */
.cargando-rueda .tornillo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 20px;
    margin: -10px 0 0 -3.5px;
    color: var(--acento);
    transform: rotate(calc(var(--rotacion) * 1deg)) translateY(calc(var(--distancia) * -1px));
    animation: tornillo-latir 1s calc(var(--retraso) * 1s) infinite ease-in-out;
}

.cargando-rueda .tornillo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* En el punto medio del ciclo el tornillo se aleja del centro y se ilumina.
   Los dos cambios juntos hacen que el recorrido se lea con claridad incluso a
   este tamaño, donde solo el desplazamiento pasaría desapercibido. */
@keyframes tornillo-latir {
    0%,
    100% {
        transform: rotate(calc(var(--rotacion) * 1deg))
                   translateY(calc(var(--distancia) * -1px));
        opacity: 0.35;
    }
    50% {
        transform: rotate(calc(var(--rotacion) * 1deg))
                   translateY(calc(var(--distancia) * -1.35px));
        opacity: 1;
    }
}

/* Diez posiciones a 36 grados de separación. El retraso escalonado es lo que
   produce la sensación de que el movimiento recorre la rueda en lugar de que
   todos los tornillos latan a la vez. */
.cargando-rueda .tornillo:nth-child(1)  { --rotacion: 0;   --distancia: 26; --retraso: 0;   }
.cargando-rueda .tornillo:nth-child(2)  { --rotacion: 36;  --distancia: 26; --retraso: 0.1; }
.cargando-rueda .tornillo:nth-child(3)  { --rotacion: 72;  --distancia: 26; --retraso: 0.2; }
.cargando-rueda .tornillo:nth-child(4)  { --rotacion: 108; --distancia: 26; --retraso: 0.3; }
.cargando-rueda .tornillo:nth-child(5)  { --rotacion: 144; --distancia: 26; --retraso: 0.4; }
.cargando-rueda .tornillo:nth-child(6)  { --rotacion: 180; --distancia: 26; --retraso: 0.5; }
.cargando-rueda .tornillo:nth-child(7)  { --rotacion: 216; --distancia: 26; --retraso: 0.6; }
.cargando-rueda .tornillo:nth-child(8)  { --rotacion: 252; --distancia: 26; --retraso: 0.7; }
.cargando-rueda .tornillo:nth-child(9)  { --rotacion: 288; --distancia: 26; --retraso: 0.8; }
.cargando-rueda .tornillo:nth-child(10) { --rotacion: 324; --distancia: 26; --retraso: 0.9; }

/* ---------------------------------------------------------------------------
   TEXTO
   --------------------------------------------------------------------------- */
.cargando-texto {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--texto-secundario);
    margin: 0;
}

/* Los tres puntos animados dan continuidad visual al texto mientras dura la
   espera, reforzando que el proceso sigue en curso. */
.cargando-texto::after {
    content: "";
    animation: puntos-suspensivos 1.4s steps(4, end) infinite;
}

@keyframes puntos-suspensivos {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

/* ---------------------------------------------------------------------------
   ACCESIBILIDAD

   Con las animaciones reducidas, los tornillos dejan de desplazarse y solo
   varían su opacidad. Se conserva ese cambio porque, sin ningún movimiento, la
   pantalla de carga sería indistinguible de una pantalla trabada.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cargando-rueda .tornillo {
        animation: tornillo-atenuar 1.4s calc(var(--retraso) * 1s) infinite ease-in-out;
    }

    @keyframes tornillo-atenuar {
        0%, 100% { opacity: 0.3; }
        50%      { opacity: 1; }
    }

    .cargando-texto::after {
        content: "...";
        animation: none;
    }
}