/**
 * Hoja de estilos específica para la página de gestión de empleados.
 * Contiene estilos para la superposición de carga y el contenedor de notificaciones.
 */

/* --- Superposición de Carga (Loading Overlay) --- */
/* Se aplica a un contenedor (ej. una card) para indicar que su contenido se está cargando. */
.loading-overlay {
    position: relative;
    z-index: 1; /* Mantener bajo para no interferir con navbar dropdowns (z-index: 9999) */
}

/* El pseudo-elemento ::after crea la capa visual de la superposición. */
.loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
    display: none; /* Oculto por defecto */
    z-index: 5; /* Se asegura de que esté por encima del contenido del contenedor pero debajo de dropdowns */
}

/* Cuando el contenedor tiene la clase '.loading', la superposición se hace visible. */
.loading-overlay.loading::after {
    display: block;
}

/* --- Contenedor de Notificaciones (Toasts) --- */
/* Define la posición fija para las notificaciones emergentes. */
.toast-container {
    position: fixed;
    top: 20px; /* Espacio desde la parte superior */
    right: 20px; /* Espacio desde la derecha */
    z-index: 2100; /* Un z-index alto para que aparezca sobre otros elementos incluyendo dropdowns. */
}