/* Estilos personalizados para SweetAlert2 - Estilo DevExpress */

/* Overlay de fondo - más sutil como DevExpress */
/*.swal2-container {
    background-color: rgba(0, 0, 0, 0.4) !important;
}*/

/* Modal principal - estilo más corporativo */
/*.swal2-popup {
    border-radius: 7px !important;*/ /* Menos redondeado como DevExpress */
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    max-width: 440px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}*/

/* Crear header falso usando ::before en el título */
/*.swal2-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    background-color: #F2F2F2 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 4px 4px 0 0 !important;
    z-index: -1;
}*/

/* Título - estilo DevExpress con posición para crear header */
/*.swal2-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: rgb(33, 37, 41) !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin: 0 !important;
    text-align: left !important;
    padding: 10px 20px 8px 12px !important;
    position: relative !important;
    background-color: #F2F2F2 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: -30px !important;
}*/

/* Contenido del texto - estilo más sobrio */
/*.swal2-html-container {
    color: #000000cf !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: left !important;
    margin: 40px 0px 10px 0 !important;
    padding: 10px 12px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}*/

/* Remover el icono completamente */
/*.swal2-icon {
    display: none !important;
}*/

/* Contenedor de botones - alineación DevExpress */
/*.swal2-actions {
    justify-content: flex-end !important;
    gap: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}*/

/* Estilos de botones - estilo DevExpress */
/*.swal2-confirm, .swal2-cancel {
    border-radius: 3px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: rgb(255, 255, 255) !important;
    min-width: 70px !important;
    border: -4px solid !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    
}*/

/* Botón Cancelar - estilo DevExpress verde */
/*.swal2-cancel {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: rgb(255, 255, 255) !important;
    order: 1 !important;
    padding: 4px 8px !important;
}

    .swal2-cancel:hover {
        background-color: #218838 !important;
        border-color: #1e7e34 !important;
    }*/

/* Botón Confirmar - estilo DevExpress rojo suave */
/*.swal2-confirm {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: rgb(255, 255, 255) !important;
    order: 2 !important;
    padding: 4px 8px !important;
}

    .swal2-confirm:hover {
        background-color: #c82333 !important;
        border-color: #bd2130 !important;
    }*/

/* Botón de cerrar (X) - estilo DevExpress */
/*.swal2-close {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    font-size: 18px !important;
    color: #999999 !important;
    background: transparent !important;
    border: none !important;
    width: 24px !important;
    height: 24px !important;
}

    .swal2-close:hover {
        color: #666666 !important;
    }*/

/* Animaciones más suaves */
/*.swal2-show {
    animation: none !important;
}

.swal2-hide {
    animation: none !important;
}*/

/* =================================================================== */
/* Estilos personalizados para SweetAlert2 - Estilo DevExpress TEMÁTICO */
/* =================================================================== */

/* Variables para el tema claro (por defecto) */
:root {
    --swal-bg: #ffffff;
    --swal-border-color: #e0e0e0;
    --swal-title-bg: #F2F2F2;
    --swal-title-text: rgb(33, 37, 41);
    --swal-content-text: #000000cf;
    --swal-close-button: #999999;
}

/* Variables para el tema oscuro */
[data-bs-theme="dark"] {
    --swal-bg: #2b3035; /* Un gris oscuro para el fondo del popup */
    --swal-border-color: #4a4f54;
    --swal-title-bg: #343a40; /* Un gris un poco más oscuro para el header */
    --swal-title-text: #dee2e6; /* Texto claro */
    --swal-content-text: #adb5bd; /* Texto secundario claro */
    --swal-close-button: #adb5bd;
}

/* Overlay de fondo */
.swal2-container {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Modal principal */
.swal2-popup {
    background: var(--swal-bg) !important;
    border: 1px solid var(--swal-border-color) !important;
    border-radius: 7px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    max-width: 440px !important;
}

/* Título (Header) */
.swal2-title {
    background-color: var(--swal-title-bg) !important;
    border-bottom: 1px solid var(--swal-border-color) !important;
    color: var(--swal-title-text) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin: 0 !important;
    text-align: left !important;
    padding: 10px 20px 8px 12px !important;
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: -30px !important;
}

/* Contenido del texto */
.swal2-html-container {
    color: var(--swal-content-text) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: left !important;
    margin: 40px 0px 10px 0 !important;
    padding: 10px 12px !important;
}

/* Icono (lo mantenemos oculto) */
.swal2-icon {
    display: none !important;
}

/* Contenedor de botones */
.swal2-actions {
    justify-content: flex-end !important;
    padding: 0 12px 12px !important; /* Añadido padding para separar del borde */
    margin: 0 !important;
}

/* Estilos comunes de botones */
.swal2-confirm, .swal2-cancel {
    border-radius: 3px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #ffffff !important;
    min-width: 70px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 6px 12px !important;
}

/* Botón Cancelar (Verde) */
.swal2-cancel {
    background-color: #28a745 !important;
}

    .swal2-cancel:hover {
        background-color: #218838 !important;
    }

/* Botón Confirmar (Rojo) */
.swal2-confirm {
    background-color: #dc3545 !important;
}

    .swal2-confirm:hover {
        background-color: #c82333 !important;
    }

/* Botón de cerrar (X) */
.swal2-close {
    color: var(--swal-close-button) !important;
    font-size: 24px !important;
    border: none !important;
    background: transparent !important;
}

    .swal2-close:hover {
        color: var(--swal-title-text) !important;
    }

/* Animaciones (las mantenemos suaves) */
.swal2-show, .swal2-hide {
    animation: none !important;
}