/* ==========================================================================
   Alertas
   ========================================================================== */

.alert {
    border-radius: 8px;
    border: none;
    font-weight: 500;
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--success-color);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
    /* Side-stripe banneado — usar background tint + ícono inline en el
       contenido. El borde lateral coloreado es un AI-tell por default. */
}

.alert-danger .alert-heading {
    color: var(--danger-color);
}

.alert-danger .btn-outline-light {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.alert-danger .btn-outline-light:hover {
    background-color: var(--danger-color);
    color: #ffffff;
    border-color: var(--danger-color);
}

/* Mejoras para alertas en dark mode */
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
}

[data-bs-theme="dark"] .alert-danger .btn-outline-light {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

[data-bs-theme="dark"] .alert-danger .btn-outline-light:hover {
    background-color: var(--danger-color);
    color: #ffffff;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #5ac898;
}