/*
=================================================================
        ESTILOS PARA EL OVERLAY DE CARGA GLOBAL
=================================================================
*/

.app-overlay {
   /* --- Posicionamiento y Dimensiones --- */
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;

   /* IMPORTANTE: z-index MENOR que SweetAlert2 (1060) para evitar conflictos */
   z-index: 1040;

   /* --- Apariencia --- */
   background-color: rgba(20, 20, 20, 0.85);
   backdrop-filter: blur(2px);

   /* --- Contenido Centrado (Flexbox) --- */
   display: none;
   justify-content: center;
   align-items: center;

   /* --- Transición suave --- */
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0.2s ease;

   /* Prevenir interacción del usuario mientras está visible */
   pointer-events: none;
}

.app-overlay.show {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.app-overlay .loading-box {
   background-color: #ffffff;
   padding: 2rem;
   border-radius: 0.75rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   text-align: center;
   max-width: 400px;
   width: 90%;
   /* Animación sutil para la caja de carga */
   animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
   from {
      opacity: 0;
      transform: scale(0.9);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

/* Estilos para el spinner de Bootstrap */
.app-overlay .spinner-border {
   width: 3rem;
   height: 3rem;
   border-width: 0.3em;
}

/* Texto opcional dentro del loading-box */
.app-overlay .loading-box strong {
   display: block;
   margin-top: 1rem;
   color: #333;
   font-size: 1rem;
   font-weight: 500;
}