/* ==========================================================================
   ALERTAS
   Tema de SweetAlert2. Sobreescribe las variables `--swal2-*` del vendor, cargar después de 
   `sweetalert2.min.css`.
   ========================================================================== */


.swal2-container {
    /* Caja */
    --swal2-background: radial-gradient(120% 55% at 50% 0%, rgba(42, 167, 156, 0.06) 0%, rgba(42, 167, 156, 0) 70%), linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
    --swal2-border: 1px solid var(--epion-line);
    --swal2-border-radius: var(--epion-radius-lg);
    --swal2-color: var(--epion-text-soft);
    --swal2-width: 30em;
    --swal2-padding: 0;

    /* Fondo de la ventana */
    --swal2-backdrop: rgba(6, 22, 32, 0.58);

    /* Tipografia */
    --swal2-title-padding: 0 2rem;
    --swal2-html-container-padding: 0.45rem 2rem 0;
    --swal2-actions-margin: 1.75rem 2rem 1.9rem;
    --swal2-footer-border-color: var(--epion-line);
    --swal2-icon-zoom: 0.94;

    /* Inputs de Swal (prompts y validaciones) */
    --swal2-input-border: 1.5px solid var(--epion-line);
    --swal2-input-border-radius: var(--epion-radius);
    --swal2-input-background: var(--epion-surface);
    --swal2-input-focus-border: 1.5px solid var(--epion-brand);
    --swal2-input-focus-box-shadow: var(--epion-focus-ring);
    --swal2-validation-message-background: rgba(192, 57, 47, 0.10);
    --swal2-validation-message-color: var(--epion-danger);

    /* Varios */
    --swal2-close-button-color: #b3c0cb;
    --swal2-close-button-hover-transform: none;
    --swal2-timer-progress-bar-background: var(--epion-brand);
}

.swal2-popup {
    box-shadow: var(--epion-shadow-lg);
}

.swal2-backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Titulo */

.swal2-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--epion-text);
}

.swal2-popup:not(:has(.swal2-icon.swal2-icon-show)) .swal2-title {
    padding-top: 2.75rem;
}

.swal2-html-container {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--epion-text-soft);
}

/* Botones */

.swal2-actions {
    gap: 0.65rem;
}

.swal2-actions .epion-btn {
    min-width: 9.5rem;
}

/* Cargando. El spinner es .swal2-loader; .swal2-loading va en el popup. */

.swal2-loader {
    width: 2.6em;
    height: 2.6em;
    margin-bottom: 2.25rem;
    border-width: 0.22em;
    border-color: var(--epion-brand) rgba(0, 0, 0, 0) var(--epion-brand) rgba(0, 0, 0, 0);
}

/* Cerrar */

.swal2-close:focus-visible {
    outline: 2px solid var(--epion-accent);
    outline-offset: 2px;
}

/* ICONOS DE LAS ALERTAS */

.swal2-icon.swal2-success {
    border-color: var(--epion-brand);
    color: var(--epion-brand);
}

.swal2-icon.swal2-error {
    border-color: var(--epion-danger);
    color: var(--epion-danger);
}

.swal2-icon.swal2-warning {
    border-color: #c9821c;
    color: #c9821c;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: var(--epion-accent);
    color: var(--epion-accent);
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--epion-brand);
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--epion-danger);
}

@keyframes epion-alerta-giro-exito {
    0%,
    4% {
        transform: rotate(-45deg);
    }

    45%,
    100% {
        transform: rotate(-405deg);
    }
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
    animation: epion-alerta-giro-exito 1.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.swal2-icon.epion-alert-icon--danger {
    border-color: var(--epion-danger);
    color: var(--epion-danger);
}

.swal2-icon.epion-alert-icon--danger .swal2-icon-content {
    font-size: inherit;
}

.swal2-icon.epion-alert-icon--danger .epion-glyph {
    display: block;
    flex: none;
    width: 2.5em;
    height: 2.5em;
}

/* Animaciones */

@keyframes epion-alerta-sacudida {
    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    12% {
        transform: translateX(-0.3em) rotate(-10deg);
    }

    28% {
        transform: translateX(0.26em) rotate(9deg);
    }

    44% {
        transform: translateX(-0.2em) rotate(-6deg);
    }

    60% {
        transform: translateX(0.14em) rotate(5deg);
    }

    76% {
        transform: translateX(-0.08em) rotate(-3deg);
    }

    90% {
        transform: translateX(0.04em) rotate(1deg);
    }
}

.swal2-icon.epion-alert-icon--danger.swal2-icon-show {
    animation: swal2-animate-error-icon 0.5s;
}

.swal2-icon.epion-alert-icon--danger.swal2-icon-show .epion-glyph {
    animation: epion-alerta-sacudida 0.75s 0.18s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}