/* =====================================================================
   SweetAlert2: mismo lenguaje visual que el resto del sistema
   (superficie/tarjetas redondeadas, tipografía y botones .btn del
   proyecto) con soporte de tema claro/oscuro vía [data-bs-theme="dark"],
   igual que Roles, Autorizar venta y Chat.
   ===================================================================== */

.swal-app-popup {
    --swal-surface: var(--brand-surface, #ffffff);
    --swal-text: var(--brand-text, #212529);
    --swal-text-strong: var(--brand-text, #2c3e50);
    --swal-text-muted: var(--brand-text-muted, #6c757d);
    --swal-border: var(--brand-border, #e9ecef);
    --swal-accent: var(--v2-solid-primary, #0d6efd);

    border-radius: 22px;
    padding: 1.75rem 1.5rem 1.5rem;
    font-family: inherit;
    background: var(--swal-surface);
    color: var(--swal-text);
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, .35);
    border: 1px solid var(--swal-border);
}

/* Barra de color superior en los diálogos (no en los toasts) */
.swal2-popup.swal-app-popup:not(.swal2-toast) {
    position: relative;
    overflow: hidden;
}

.swal2-popup.swal-app-popup:not(.swal2-toast)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899, #F59E0B, #10B981);
}

.swal2-container.swal2-backdrop-show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-bs-theme="dark"] .swal-app-popup {
    --swal-surface: var(--brand-surface, #1f2937);
    --swal-text: var(--brand-text, #f3f4f6);
    --swal-text-strong: var(--brand-text, #f3f4f6);
    --swal-text-muted: var(--brand-text-muted, #9ca3af);
    --swal-border: var(--brand-border, rgba(255, 255, 255, .08));

    box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
}

.swal-app-title {
    color: var(--swal-text-strong);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.02em;
    padding-top: .25rem;
}

.swal-app-html {
    color: var(--swal-text-muted);
}

.swal-app-actions {
    gap: .6rem;
    margin-top: 1.25rem;
}

.swal-app-actions .btn {
    min-width: 100px;
}

.swal-app-input,
.swal2-textarea.swal-app-input {
    /* Bootstrap's .form-control fuerza width:100%, pero swal2 ya reserva el
       espacio lateral del input con margin:1em 2em (ver .swal2-textarea /
       .swal2-input en sweetalert2.css) esperando que el ancho sea "auto" y
       lo complete el stretch del grid del popup. Sumar 100% + esos márgenes
       hace que el input se salga del popup. Al regresar a "auto" el input
       vuelve a ocupar exactamente el espacio entre esos márgenes. */
    width: auto;
    background: var(--swal-surface);
    color: var(--swal-text);
    border-color: var(--swal-border);
    box-shadow: none;
}

.swal-app-input:focus {
    border-color: var(--swal-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--swal-accent) 20%, transparent);
}

.swal-app-validation {
    background: rgba(220, 53, 69, .12);
    color: #dc3545;
    border-radius: 8px;
    font-weight: 600;
}

/* Botón de cerrar (X) */
.swal-app-popup .swal2-close {
    color: var(--swal-text-muted);
}

.swal-app-popup .swal2-close:hover {
    color: var(--swal-text);
    background: transparent;
}

/* Separador superior del ícono (footer/línea que trae swal2 por defecto) */
.swal-app-popup .swal2-footer {
    border-top-color: var(--swal-border);
    color: var(--swal-text-muted);
}

/* Barra de progreso de los timers (Swal con timer: 1500, etc.) */
.swal-app-popup .swal2-timer-progress-bar {
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
}

/* Toasts (position: top-end, toast: true) */
.swal2-popup.swal2-toast.swal-app-popup {
    border-radius: 14px;
    padding: .75rem 1rem;
    box-shadow: 0 14px 30px -10px rgba(15, 23, 42, .35);
    background: var(--swal-surface);
    color: var(--swal-text);
    border: 1px solid var(--swal-border);
}

.swal2-popup.swal2-toast.swal-app-popup .swal-app-title {
    font-size: 1rem;
}

/* El loader (Swal.showLoading()) usa el azul de acento en vez del gris genérico */
.swal-app-popup .swal2-loader {
    border-color: var(--swal-accent) transparent var(--swal-accent) transparent;
}