/* Loading Global Don Gestión - Solo sobre tablas DataTables */
.dongestion-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 150px !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 60px !important;
    z-index: 99999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
    pointer-events: all !important;
    backdrop-filter: blur(2px);
    border-radius: 4px;
    overflow: visible !important;
}

/* Fondo oscuro para modo oscuro */
body.dark-mode .dongestion-loading-overlay,
.dark-mode .dongestion-loading-overlay {
    background-color: rgba(38, 43, 72, 0.85) !important;
}

/* Hacer que el wrapper de DataTables sea relativo para posicionar el overlay */
.dataTables_wrapper,
div.dataTables_wrapper,
.dt-container {
    position: relative !important;
    overflow: visible !important;
}

/* Asegurar que los cards y contenedores también permitan el overlay */
.card,
.panel,
.widget {
    position: relative !important;
    overflow: visible !important;
}

/* Asegurar que el overlay siempre esté visible */
.dataTables_wrapper .dongestion-loading-overlay,
div.dataTables_wrapper .dongestion-loading-overlay,
.dt-container .dongestion-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ocultar completamente el procesamiento de DataTables */
.dataTables_processing,
div.dataTables_processing,
div.dataTables_wrapper div.dataTables_processing,
div.dt-processing,
.dataTables_wrapper .dataTables_processing,
table.dataTable + div.dataTables_processing {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Ocultar cualquier spinner o mensaje de procesamiento */
div.dt-processing > div,
div.dt-processing > span,
.dataTables_processing > span,
.dataTables_processing > * {
    display: none !important;
    visibility: hidden !important;
}

/* Ocultar el mensaje "Cargando..." que aparece en el tbody de la tabla */
/* Solo ocultar celdas con clases específicas de mensajes vacíos, NO los registros reales */
table.dataTable tbody tr td[class*="sRowEmpty"],
table.dataTable tbody tr td[class*="dataTables_empty"],
table.dataTable tbody tr td.dataTables_empty {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* IMPORTANTE: NO ocultar filas completas con :only-child porque oculta registros reales */
/* Las filas con datos reales deben mostrarse siempre, incluso si hay solo 1 registro */

/* Ocultar mensajes de carga en celdas específicas */
table.dataTable tbody td:contains("Cargando..."),
table.dataTable tbody td:contains("Loading..."),
table.dataTable tbody td:contains("Procesando...") {
    display: none !important;
    visibility: hidden !important;
}

.dongestion-loading-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Asegurar que el overlay se oculte cuando no tiene la clase active */
.dongestion-loading-overlay:not(.active) {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
}

/* Forzar visibilidad cuando está activo */
.dongestion-loading-overlay.active[style*="display"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dongestion-loading-container {
    text-align: center;
}

.dongestion-loading-logo {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dongestion-loading-logo svg {
    width: 100%;
    height: 100%;
    max-width: 150px;
    max-height: 150px;
}

/* Efecto de opacidad en tablas cuando está cargando - solo en la tabla específica */
.dataTables_wrapper:has(.dongestion-loading-overlay.active) table.dataTable,
.dataTables_wrapper:has(.dongestion-loading-overlay.active) {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Para navegadores que no soportan :has() */
.dataTables_wrapper.dongestion-loading-active table.dataTable,
.dataTables_wrapper.dongestion-loading-active {
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
}

/* Animación de las 3 líneas - movimiento coordinado y suave */
.dongestion-loading-logo .loading-bar-1 {
    animation: loadingWave1 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0s;
    transform: translate(223px, 187px);
}

.dongestion-loading-logo .loading-bar-2 {
    animation: loadingWave2 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.15s;
    transform: translate(223px, 187px);
}

.dongestion-loading-logo .loading-bar-3 {
    animation: loadingWave3 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.3s;
    transform: translate(182px, 210px);
}

@keyframes loadingWave1 {
    0%, 100% {
        transform: translate(223px, 187px);
    }
    50% {
        transform: translate(223px, 145px);
    }
}

@keyframes loadingWave2 {
    0%, 100% {
        transform: translate(223px, 187px);
    }
    50% {
        transform: translate(223px, 155px);
    }
}

@keyframes loadingWave3 {
    0%, 100% {
        transform: translate(182px, 210px);
    }
    50% {
        transform: translate(182px, 175px);
    }
}

/* Animación de color para la flecha de la D - sincronizada con las líneas */
.dongestion-loading-logo svg .d-shape-animated.d-shape-1,
.dongestion-loading-logo svg #d-shape-1.d-shape-animated {
    animation: colorChange1 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0s;
    filter: drop-shadow(0 0 3px rgba(109, 141, 224, 0.5));
}

.dongestion-loading-logo svg .d-shape-animated.d-shape-2,
.dongestion-loading-logo svg #d-shape-2.d-shape-animated {
    animation: colorChange2 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.15s;
    filter: drop-shadow(0 0 3px rgba(110, 142, 225, 0.5));
}

@keyframes colorChange1 {
    0%, 100% {
        fill: #506CCE;
        filter: drop-shadow(0 0 3px rgba(80, 108, 206, 0.5));
    }
    25% {
        fill: #7FA3FF;
        filter: drop-shadow(0 0 8px rgba(127, 163, 255, 0.8));
    }
    50% {
        fill: #9BB5FF;
        filter: drop-shadow(0 0 12px rgba(155, 181, 255, 1));
    }
    75% {
        fill: #7FA3FF;
        filter: drop-shadow(0 0 8px rgba(127, 163, 255, 0.8));
    }
}

@keyframes colorChange2 {
    0%, 100% {
        fill: #6D8DE0;
        filter: drop-shadow(0 0 3px rgba(109, 141, 224, 0.5));
    }
    25% {
        fill: #8FB0FF;
        filter: drop-shadow(0 0 8px rgba(143, 176, 255, 0.8));
    }
    50% {
        fill: #A8C4FF;
        filter: drop-shadow(0 0 12px rgba(168, 196, 255, 1));
    }
    75% {
        fill: #8FB0FF;
        filter: drop-shadow(0 0 8px rgba(143, 176, 255, 0.8));
    }
}

/* Versión más rápida para carga rápida */
.dongestion-loading-overlay.fast .loading-bar {
    animation-duration: 0.8s;
}

/* Versión más lenta para carga lenta */
.dongestion-loading-overlay.slow .loading-bar {
    animation-duration: 1.6s;
}