/* --- SUAVIZAR ENTRADA/SALIDA Y EVITAR DESTELLO --- */

/* 1) Desactiva animaciones por defecto de v9 */
body .swal2-container .swal2-popup.swal2-show,
body .swal2-container .swal2-popup.swal2-hide {
    animation: none !important;
}

/* 2) Backdrop con transición sutil */
body .swal2-container.swal2-backdrop-show {
    background: rgba(15,23,42,.32) !important; /* overlay suave */
    transition: background .14s ease-out;
}
body .swal2-container.swal2-backdrop-hide {
    background: rgba(15,23,42,0) !important;
    transition: background .10s ease-in;
}

/* 3) Popup: transición corta y 'will-change' para evitar parpadeo */
body .swal2-container .swal2-popup.my9 {
    opacity: 0;
    transform: translateY(2px) scale(.995);
    transition: opacity .14s ease-out, transform .14s ease-out;
    will-change: opacity, transform;
    /* Compactar tipografía y espacios */
    font-size: 0.92rem;                 /* ↓ tamaño base */
    line-height: 1.3;                    /* más cerrado */
    padding: 16px 18px !important;       /* ↓ padding */
    border-radius: 14px !important;      /* esquinas suaves */
}

/* Al mostrarse: sin salto, solo se desvanece/ajusta */
body .swal2-container .swal2-popup.my9.swal2-show {
    opacity: 1;
    transform: none;
}

/* Al ocultarse: fade corto */
body .swal2-container .swal2-popup.my9.swal2-hide {
    opacity: 0;
    transform: translateY(1px) scale(.998);
    transition: opacity .10s ease-in, transform .10s ease-in;
}

/* Título más compacto */
body .swal2-container .swal2-title.my9-title {
    font-size: 1.05rem !important;       /* ↓ tamaño título */
    margin: 0 0 8px !important;          /* ↓ separación */
    font-weight: 700;
}

/* Texto interno un poco más pequeño y con menos margen */
body .swal2-container .swal2-html-container {
    font-size: 0.92rem;
    margin: 0 4px 10px !important;
}

/* Botonera compacta */
body .swal2-container .swal2-actions {
    margin-top: 10px !important;
    gap: 8px !important;
}

/* Si usas botones por defecto (buttonsStyling:true) */
body .swal2-container .swal2-styled.swal2-confirm,
body .swal2-container .swal2-styled.swal2-cancel {
    border-radius: 7px !important;
    padding: 9px 14px !important;        /* ↓ padding botones */
    font-size: 12px !important;
    margin: 0 !important;
    text-transform: uppercase;
}

/* Colores (ajústalos si quieres) */
body .swal2-container .swal2-styled.swal2-confirm {
    background:#10b981 !important; color:#fff !important; border:0 !important;
}
body .swal2-container .swal2-styled.swal2-cancel {
    background:#e5e7eb !important; color:#111827 !important; border:0 !important;
}

/* Icono sin borde, más limpio */
body .swal2-container .swal2-icon {
    box-shadow: none !important;
    border: 0 !important;
    margin: 6px auto 8px !important;     /* ↓ espacios icono */
}

/* Clase simple para remarcar el campo con error */
.field-error {
    border-color: #ef4444 !important;         /* rojo */
    outline: 2px solid rgba(239,68,68,.45);   /* por si el control no tiene borde visible (radio/checkbox) */
    outline-offset: 1px;
}