/* public/assets/css/components/confirm.css
   Componente: dialogo de confirmacion propio (sustituye a confirm() nativo
   del navegador), mismo lenguaje visual que los toasts (components/toast.js)
   pero centrado en pantalla y bloqueante. Se pinta/controla desde
   components/confirm.js: window.appConfirm(mensaje, opciones) devuelve una
   Promise<boolean>, y cualquier <form data-confirm="mensaje"> lo dispara
   automaticamente antes de enviarse. */

.app-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-lg);
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .18s ease;
}
.app-confirm-overlay.app-confirm-overlay-visible { opacity: 1; }
.app-confirm-overlay.app-confirm-overlay-saliendo { opacity: 0; }

.app-confirm-modal {
    width: 100%;
    max-width: 380px;
    background: var(--app-surface);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-card);
    padding: var(--app-space-lg) var(--app-space-lg) var(--app-space-lg);
    text-align: center;
    transform: translateY(10px) scale(.97);
    transition: transform .18s ease;
}
.app-confirm-overlay-visible .app-confirm-modal { transform: translateY(0) scale(1); }

.app-confirm-icono {
    width: 46px;
    height: 46px;
    margin: 0 auto var(--app-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--app-danger-soft);
    color: var(--app-danger);
    font-size: var(--app-text-lg);
}
.app-confirm-modal.app-confirm-info .app-confirm-icono { background: var(--app-info-soft); color: var(--app-primary-dark); }

.app-confirm-titulo { margin: 0 0 var(--app-space-sm); font-size: var(--app-text-lg); font-weight: 700; color: var(--app-text); }
.app-confirm-mensaje { margin: 0; font-size: var(--app-text-sm); line-height: 1.5; color: var(--app-text-soft); }

.app-confirm-acciones {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: var(--app-space-sm);
    margin-top: var(--app-space-lg);
}
.app-confirm-acciones .app-button { flex: 1 1 0; }

/* Mobile-first: la base ya apila los botones (movil); a partir de 421px
   pasan a ir en fila. El padding del modal ya era el mismo en ambos casos
   una vez tokenizado, sin necesidad de un ajuste aparte por breakpoint. */
@media (min-width: 421px) {
    .app-confirm-acciones { flex-direction: row; }
}