/**
 * SweetAlert2 - Personalización para Sistema de Enlaces
 * Versión: 3.0
 * 
 * Estilos personalizados para que SweetAlert2 se integre con el sistema de temas
 */

/* ============================================
   PERSONALIZAR COLORES DE SWEETALERT2
   ============================================ */

/* Botón de confirmación con color primario */
.swal2-confirm {
    background-color: var(--color-action-primary) !important;
    border-color: var(--color-action-primary) !important;
}

.swal2-confirm:hover {
    background-color: var(--color-action-hover) !important;
    border-color: var(--color-action-hover) !important;
}

/* Botón de cancelar */
.swal2-cancel {
    background-color: #6c757d !important;
}

/* Popup principal - Con border y shadow mejorado */
.swal2-popup {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    z-index: 10001 !important;
}

/* Popup en tema oscuro - Shadow más pronunciado */
[data-theme="dark"] .swal2-popup {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7) !important;
    border-color: var(--border-color) !important;
}

/* Título */
.swal2-title {
    color: var(--text-primary) !important;
}

/* Contenido de texto */
.swal2-html-container {
    color: var(--text-secondary) !important;
}

/* Icono de éxito */
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(28, 116, 132, 0.3) !important;
}

/* Icono de warning para confirmaciones críticas */
.swal2-icon.swal2-warning {
    border-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}

/* Toast notifications - Sin backdrop, solo shadow */
.swal2-toast {
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================
   BACKDROP - Fondo semi-oscuro SOLO para confirmaciones críticas
   ============================================ */

/* Por defecto - SIN backdrop */
.swal2-container {
    background: transparent !important;
}

/* Backdrop SOLO para diálogos con clase 'swal-critical' */
.swal2-container.swal-critical {
    background: rgba(0, 0, 0, 0.5) !important;
    animation: swalBackdropIn 0.3s ease-out;
}

/* Backdrop en tema oscuro - Más oscuro */
[data-theme="dark"] .swal2-container.swal-critical {
    background: rgba(0, 0, 0, 0.75) !important;
    animation: swalBackdropInDark 0.3s ease-out;
}

/* Animaciones del backdrop */
@keyframes swalBackdropIn {
    from { background: rgba(0, 0, 0, 0); }
    to { background: rgba(0, 0, 0, 0.5); }
}

@keyframes swalBackdropInDark {
    from { background: rgba(0, 0, 0, 0); }
    to { background: rgba(0, 0, 0, 0.75); }
}

/* Input fields dentro de SweetAlert */
.swal2-input,
.swal2-textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--input-border) !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 132, 165, 0.25) !important;
}

/* Progress bar del timer */
.swal2-timer-progress-bar {
    background-color: var(--color-action-primary) !important;
}