/* ============================================================
   Softmor Alert — Sistema global de alertas modales
   Stack: Bootstrap 5 | Colores: #24695c (primary) / #ba895d (secondary)
   ============================================================ */

/* ---- Variables de color del sistema ---- */
:root {
    --sm-primary   : #24695c;
    --sm-primary-dk: #1b4f45;
    --sm-secondary : #ba895d;
    --sm-success   : #24695c;
    --sm-success-lt: #e8f5f3;
    --sm-error     : #e05c5c;
    --sm-error-lt  : #fdf0f0;
    --sm-warning   : #f0a030;
    --sm-warning-lt: #fef8ee;
    --sm-info      : #3a86c8;
    --sm-info-lt   : #eef5fc;
    --sm-confirm   : #ba895d;
    --sm-confirm-lt: #fdf6ef;
    --sm-radius    : 14px;
    --sm-shadow    : 0 20px 60px rgba(0, 0, 0, 0.18);
    --sm-font      : 'Montserrat', sans-serif;
    --sm-stripe-h  : 5px;
}

/* ---- Overlay / backdrop ---- */
.softmor-alert-dialog {
    max-width: 440px;
}

/* ---- Contenedor modal ---- */
.softmor-alert-content {
    border: none;
    border-radius: var(--sm-radius) !important;
    box-shadow: var(--sm-shadow);
    overflow: hidden;
    font-family: var(--sm-font);
    animation: smAlertIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ---- Animación de entrada ---- */
@keyframes smAlertIn {
    from { opacity: 0; transform: scale(0.88) translateY(-16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Animación de salida via Bootstrap (fade) ya incluida */

/* ---- Banda de color superior ---- */
.softmor-alert-stripe {
    height: var(--sm-stripe-h);
    width: 100%;
}
.softmor-stripe-success { background: var(--sm-success); }
.softmor-stripe-error   { background: var(--sm-error); }
.softmor-stripe-warning { background: var(--sm-warning); }
.softmor-stripe-info    { background: var(--sm-info); }
.softmor-stripe-confirm { background: var(--sm-confirm); }

/* ---- Cuerpo ---- */
.softmor-alert-body {
    padding: 2rem 2rem 1.75rem;
    text-align: center;
}

/* ---- Icono envoltorio ---- */
.softmor-alert-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.softmor-icon-success { background: var(--sm-success-lt); color: var(--sm-success); }
.softmor-icon-error   { background: var(--sm-error-lt);   color: var(--sm-error);   }
.softmor-icon-warning { background: var(--sm-warning-lt); color: var(--sm-warning); }
.softmor-icon-info    { background: var(--sm-info-lt);    color: var(--sm-info);    }
.softmor-icon-confirm { background: var(--sm-confirm-lt); color: var(--sm-confirm); }

/* ---- Icono feather ---- */
.softmor-alert-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
}

/* ---- Título ---- */
.softmor-alert-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* ---- Mensaje ---- */
.softmor-alert-message {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1.75rem;
    line-height: 1.6;
}

/* ---- Acciones ---- */
.softmor-alert-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Botón primario base ---- */
.softmor-btn-primary {
    min-width: 120px;
    padding: 0.55rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    color: #fff !important;
    letter-spacing: 0.02em;
}
.softmor-btn-primary:focus-visible {
    outline: 3px solid rgba(36, 105, 92, 0.4);
    outline-offset: 2px;
}
.softmor-btn-primary:active { transform: scale(0.97); }

/* Variantes de botón primario */
.softmor-btn-primary-success {
    background-color: var(--sm-success);
    box-shadow: 0 4px 14px rgba(36, 105, 92, 0.3);
}
.softmor-btn-primary-success:hover:not(:disabled) {
    background-color: var(--sm-primary-dk);
    box-shadow: 0 6px 18px rgba(36, 105, 92, 0.4);
}

.softmor-btn-primary-error {
    background-color: var(--sm-error);
    box-shadow: 0 4px 14px rgba(224, 92, 92, 0.3);
}
.softmor-btn-primary-error:hover:not(:disabled) {
    background-color: #c94444;
    box-shadow: 0 6px 18px rgba(224, 92, 92, 0.4);
}

.softmor-btn-primary-warning {
    background-color: var(--sm-warning);
    box-shadow: 0 4px 14px rgba(240, 160, 48, 0.3);
}
.softmor-btn-primary-warning:hover:not(:disabled) {
    background-color: #d4891e;
    box-shadow: 0 6px 18px rgba(240, 160, 48, 0.4);
}

.softmor-btn-primary-info {
    background-color: var(--sm-info);
    box-shadow: 0 4px 14px rgba(58, 134, 200, 0.3);
}
.softmor-btn-primary-info:hover:not(:disabled) {
    background-color: #2d6da3;
    box-shadow: 0 6px 18px rgba(58, 134, 200, 0.4);
}

.softmor-btn-primary-confirm {
    background-color: var(--sm-confirm);
    box-shadow: 0 4px 14px rgba(186, 137, 93, 0.3);
}
.softmor-btn-primary-confirm:hover:not(:disabled) {
    background-color: #a0744a;
    box-shadow: 0 6px 18px rgba(186, 137, 93, 0.4);
}

/* ---- Botón secundario (cancelar) ---- */
.softmor-btn-secondary {
    min-width: 110px;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151 !important;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.softmor-btn-secondary:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.softmor-btn-secondary:focus-visible {
    outline: 3px solid rgba(36, 105, 92, 0.35);
    outline-offset: 2px;
}
.softmor-btn-secondary:active { transform: scale(0.97); }

/* ---- Overlay (backdrop) propio de Bootstrap ya tiene manejo;
        aquí reforzamos el blur suave si la plantilla lo soporta ---- */
.modal-backdrop.show { opacity: 0.55; }

/* ---- Responsive móvil ---- */
@media (max-width: 480px) {
    .softmor-alert-dialog { max-width: 95vw; margin: 0.75rem auto; }
    .softmor-alert-body   { padding: 1.5rem 1.25rem 1.25rem; }
    .softmor-alert-actions { flex-direction: column-reverse; gap: 0.5rem; }
    .softmor-btn-primary,
    .softmor-btn-secondary { width: 100%; min-width: unset; }
}