/**
 * TEMA LLIKA PARA SWEETALERT2 — solo diseño, ninguna llamada Swal.fire() se
 * modifica. Este archivo solo sobrescribe el aspecto visual (colores,
 * tipografía, bordes, botones) que SweetAlert2 ya usa en todo el sitio.
 *
 * Se usan seletores con prefijo "html body" y !important a propósito:
 * SweetAlert2 inyecta su propio CSS por JavaScript la primera vez que se
 * llama, lo que a veces ocurre DESPUÉS de que este archivo se cargó, y sin
 * esto sus estilos por defecto ganarían la pelea de especificidad/orden.
 *
 * No requiere ningún cambio en el JavaScript existente: todas las llamadas
 * Swal.fire({...}) ya en el sitio se ven con este diseño automáticamente.
 */

html body .swal2-popup {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    border-radius: 20px !important;
    padding: 30px 22px 22px !important;
    box-shadow: 0 18px 48px rgba(30, 27, 22, 0.22) !important;
    position: relative;
    overflow: hidden;
}

/* Acento dorado de marca en el borde superior, igual que el chat de Llika */
html body .swal2-popup::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #7A5407, #BF840B, #D6A227);
}

html body .swal2-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1E1B16 !important;
    padding: 4px 0 2px !important;
}

html body .swal2-html-container {
    font-size: 13.5px !important;
    color: #6E6558 !important;
    line-height: 1.5 !important;
}

/* ── Íconos (mismo significado de siempre: verde éxito, rojo error, dorado
   aviso/advertencia — solo se afina el trazo y el color de acento) ─────── */

html body .swal2-icon {
    border-width: 2.5px !important;
    margin: 14px auto 12px !important;
}

html body .swal2-icon.swal2-warning,
html body .swal2-icon.swal2-info {
    border-color: #F3E1B8 !important;
    color: #A2700A !important;
    background: #F3E1B8 !important;
}

html body .swal2-icon.swal2-success {
    border-color: #BBF7D0 !important;
    color: #16A34A !important;
}
html body .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #16A34A !important;
}
html body .swal2-icon.swal2-success .swal2-success-ring {
    border-color: #BBF7D0 !important;
}

html body .swal2-icon.swal2-error {
    border-color: #FEE2E2 !important;
    color: #DC2626 !important;
}
html body .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #DC2626 !important;
}

/* ── Botones ─────────────────────────────────────────────────────────── */

html body .swal2-actions {
    gap: 10px !important;
    margin-top: 20px !important;
}

html body button.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #D6A227 0%, #BF840B 100%) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    box-shadow: 0 4px 12px rgba(191, 132, 11, 0.3) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html body button.swal2-styled.swal2-confirm:hover { transform: translateY(-1px); }
html body button.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(191, 132, 11, 0.25) !important;
}

html body button.swal2-styled.swal2-cancel {
    background: #FAF8F4 !important;
    color: #1E1B16 !important;
    border: 1px solid #EFE7D6 !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    box-shadow: none !important;
}
html body button.swal2-styled.swal2-cancel:hover { background: #F1EDE3 !important; }
html body button.swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(191, 132, 11, 0.15) !important;
}

/* Botón "deny" (poco usado, pero por si acaso — acción destructiva en rojo) */
html body button.swal2-styled.swal2-deny {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* ── Loader ("Procesando...", "Enviando...") ────────────────────────── */

html body .swal2-loader {
    border-color: #BF840B transparent #BF840B transparent !important;
}

/* ── Barra de progreso de los toasts con timer (ej. "¡Gracias!", "¡Listo!") */

html body .swal2-timer-progress-bar {
    background: linear-gradient(90deg, #D6A227, #BF840B) !important;
}

/* ── Fondo detrás del modal ──────────────────────────────────────────── */

html body .swal2-backdrop-show,
html body .swal2-backdrop-hide {
    background: rgba(18, 14, 8, 0.65) !important;
}

/* ── Campos de texto (si alguna alerta usa swal2-input/textarea) ───────── */

html body .swal2-input,
html body .swal2-textarea {
    border: 1px solid #EFE7D6 !important;
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: none !important;
}
html body .swal2-input:focus,
html body .swal2-textarea:focus {
    border-color: #BF840B !important;
    box-shadow: 0 0 0 3px rgba(191, 132, 11, 0.15) !important;
}