/*DESVANECIDO DE ALERTAS DE LOGIN*/
/* CSS para el efecto de desvanecimiento */
/* CSS para el efecto de desvanecimiento */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out; /* La transición de desvanecimiento */
}






::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.56);
    border-radius: 5px;
    transition: background-color 0.8s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #5e5e5e;
}



.bg-formulario {
    position: relative;
    height: 100vh; /* Altura completa de la ventana */
    width: 100%; /* Ancho completo */
    overflow: hidden; /* Evita desbordamientos */
}

.bg-formulario::before {
    content: ""; /* Necesario para los pseudo-elementos */
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('/app/utils/img/BANNER.png'); /* Fondo negro con opacidad + imagen */
    background-size: cover; /* Ajusta la imagen para cubrir */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repeticiones */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Coloca la imagen detrás del contenido */
}


.oscuridad {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url('/app/utils/img/mano.jpg');
    background-size: cover;
    background-position: 0% center;
    background-color: red;
    animation: moveBackground 200s linear infinite;
}

@keyframes moveBackground {
    0% {
        background-position: 0% center; /* Comienza desde la izquierda */
    }
    50% {
        background-position: 100% center; /* Se mueve a la derecha */
    }
    100% {
        background-position: 0% center; /* Vuelve a la izquierda */
    }
}


/* Estilo para la transición de las tarjetas */
.card-entry {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.card-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}


@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modal-exit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-fade-out { animation: fade-out 0.2s ease-out; }
.animate-modal-enter { animation: modal-enter 0.3s ease-out; }
.animate-modal-exit { animation: modal-exit 0.2s ease-out; }

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dataTables_wrapper {
    overflow-x: auto;
}

.dataTable {
    width: 100% !important;
    table-layout: auto;
}

.dataTable th,
.dataTable td {
    white-space: nowrap;
    min-width: 80px;
}