.swal2-popup-small {
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
}

.swal2-title-small {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.swal2-content-small {
    font-size: 0.875rem !important;
    margin: 0.5rem 0 !important;
}

.swal2-toast {
    padding: 0.75rem !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
}

.swal2-toast .swal2-title {
    font-size: 1rem !important;
    margin: 0 0 0.5rem 0 !important;
}

.swal2-toast .swal2-content {
    font-size: 0.875rem !important;
    margin: 0.5rem 0 !important;
}

.swal2-toast .swal2-actions {
    margin: 0.5rem 0 0 0 !important;
}

.swal2-toast .swal2-confirm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}

/* Posicionar alertas por debajo del navbar */
.swal2-container {
    padding-top: 70px !important;
    z-index: 40 !important; /* Por debajo del navbar (z-50) y dropdowns (z-60) */
}

/* Asegurar que todas las alertas de SweetAlert estén por debajo del navbar */
.swal2-popup {
    z-index: 41 !important;
    position: relative !important;
}

.swal2-toast {
    z-index: 41 !important;
    position: relative !important;
}

.swal2-backdrop-show {
    z-index: 39 !important;
}

/* Asegurar que el contenedor de SweetAlert esté por debajo del navbar */
.swal2-container {
    z-index: 40 !important;
    position: fixed !important;
}

/* Estilos específicos para alertas por debajo del navbar */
.swal2-container.swal2-shown {
    z-index: 40 !important;
}

.swal2-container.swal2-backdrop-show {
    z-index: 40 !important;
}

/* Estilos personalizados para SweetAlert con color #a02d2d */

/* Contenedor principal */
.swal2-custom-popup {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(160, 45, 45, 0.15) !important;
    border: 1px solid rgba(160, 45, 45, 0.1) !important;
}

/* Título personalizado */
.swal2-custom-title {
    color: #a02d2d !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
}

/* Contenido HTML personalizado */
.swal2-custom-html {
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Toast personalizado */
.swal2-toast.swal2-custom-popup {
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(160, 45, 45, 0.2) !important;
    border-radius: 8px !important;
    border-left: 4px solid #a02d2d !important;
    max-width: 400px !important;
}

.swal2-toast .swal2-custom-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    color: #a02d2d !important;
    font-weight: 600 !important;
}

.swal2-toast .swal2-custom-html {
    font-size: 14px !important;
    margin: 0 !important;
    color: #333 !important;
}

/* Iconos personalizados */
.swal2-icon {
    border-color: #a02d2d !important;
}

.swal2-icon.swal2-success {
    border-color: #a02d2d !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #a02d2d !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: #a02d2d !important;
}

.swal2-icon.swal2-error {
    border-color: #a02d2d !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #a02d2d !important;
}

.swal2-icon.swal2-warning {
    border-color: #a02d2d !important;
    color: #a02d2d !important;
}

.swal2-icon.swal2-info {
    border-color: #a02d2d !important;
    color: #a02d2d !important;
}

/* Barra de progreso personalizada */
.swal2-timer-progress-bar {
    background: #a02d2d !important;
}

/* Animación personalizada */
.swal2-toast.swal2-show {
    animation: slideInRight 0.3s ease-out !important;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Hover effects */
.swal2-toast:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(160, 45, 45, 0.25) !important;
    transition: all 0.2s ease !important;
}

/* Responsive */
@media (max-width: 768px) {
    header,
    header *,
    nav,
    nav * {
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Menú móvil completo */
    #navbar-collapse-with-animation,
    #navbar-collapse-with-animation * {
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Desplegables dentro del menú móvil */
    #navbar-collapse-with-animation [class*="z-[60]"],
    #navbar-collapse-with-animation .z-\[60\] {
        z-index: 9999 !important;
    }



    /* Z-index específico para que las alertas estén por debajo del navbar en móvil */
.swal2-container {
    z-index: 40 !important;
}

.swal2-popup,
.swal2-toast {
    z-index: 41 !important;
}

.swal2-toast-container {
    z-index: 41 !important;
}

.swal2-backdrop-show {
    z-index: 39 !important;
}

.swal2-shown {
    z-index: 40 !important;
}



/* Asegurar que el navbar esté siempre por encima en todos los dispositivos */
header,
nav,
#navbar-collapse-with-animation {
    z-index: 50 !important;
    position: relative !important;
}

/* Asegurar que los dropdowns del navbar estén por encima de las alertas */
.z-\[60\] {
    z-index: 60 !important;
}



    .swal2-toast.swal2-custom-popup {
        z-index: 41 !important;
        max-width: 320px !important;
        margin: 10px !important;
    }



    .swal2-toast .swal2-custom-title {
        z-index: 41 !important;
        font-size: 14px !important;
    }

    .swal2-toast .swal2-custom-html {
        z-index: 41 !important;
        font-size: 13px !important;
    }

    /* Deshabilitar animación del check en móviles */
    .swal2-icon.swal2-success .swal2-success-line-tip {
        animation: none !important;
    }

    .swal2-icon.swal2-success .swal2-success-line-long {
        animation: none !important;
    }

    .swal2-icon.swal2-success .swal2-success-fix {
        animation: none !important;
    }

    .swal2-icon.swal2-success .swal2-success-ring {
        animation: none !important;
    }

    /* Mostrar el check completo sin animación */
    .swal2-icon.swal2-success .swal2-success-line-tip {
        transform: rotate(45deg) !important;
        opacity: 1 !important;
    }

    .swal2-icon.swal2-success .swal2-success-line-long {
        transform: rotate(-45deg) !important;
        opacity: 1 !important;
    }

    .swal2-icon.swal2-success .swal2-success-fix {
        transform: rotate(45deg) !important;
        opacity: 1 !important;
    }

    .swal2-icon.swal2-success .swal2-success-ring {
        transform: rotate(45deg) !important;
        opacity: 1 !important;
    }
}