/* =====================================================================
   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: #ffffff;
    --swal-text: #212529;
    --swal-text-strong: #2c3e50;
    --swal-text-muted: #6c757d;
    --swal-border: #e9ecef;

    border-radius: 18px;
    padding: 1.75rem 1.5rem 1.5rem;
    font-family: inherit;
    background: var(--swal-surface);
    color: var(--swal-text);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
    border: 1px solid var(--swal-border);
}

[data-bs-theme="dark"] .swal-app-popup {
    --swal-surface: #1f2937;
    --swal-text: #f3f4f6;
    --swal-text-strong: #f3f4f6;
    --swal-text-muted: #9ca3af;
    --swal-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: 700;
    font-size: 1.35rem;
    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: #0d6efd;
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .25);
}

.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: #0d6efd;
}

[data-bs-theme="dark"] .swal-app-popup .swal2-timer-progress-bar {
    background: #7cb0ff;
}

/* Toasts (position: top-end, toast: true) */
.swal2-popup.swal2-toast.swal-app-popup {
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    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: #0d6efd transparent #0d6efd transparent;
}