/* === Bootstrap-like Alerts (solo estilos) === */
:root {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .75rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-border-radius: .375rem;
    --bs-alert-border-width: 1px;
    --bs-alert-link-weight: 600;

    /* Colores base (puedes ajustar a tu paleta) */
    --bs-primary: #0d6efd;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* Base */
.alert {
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    border: var(--bs-alert-border-width) solid transparent;
    border-radius: var(--bs-alert-border-radius);
}

/* Links */
.alert a,
.alert .alert-link {
    font-weight: var(--bs-alert-link-weight);
    text-decoration: underline;
}

/* Dismissible (solo estilos; el cierre lo haces con JS si quieres animar) */
.alert-dismissible {
    padding-right: 3rem;
    /* espacio para el botón */
}

.alert-dismissible .btn-close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    padding: .5rem;
    border: 0;
    background: transparent;
    opacity: .5;
    line-height: 1;
    font-size: 1.25rem;
    cursor: pointer;
}

.alert-dismissible .btn-close:hover {
    opacity: .75;
}

/* Variantes */
.alert-primary {
    color: #084298;
    background-color: rgba(13, 110, 253, .1);
    border-color: rgba(13, 110, 253, .25);
}

.alert-success {
    color: #0f5132;
    background-color: rgba(25, 135, 84, .1);
    border-color: rgba(25, 135, 84, .25);
}

.alert-danger {
    color: #842029;
    background-color: rgba(220, 53, 69, .1);
    border-color: rgba(220, 53, 69, .25);
}

.alert-warning {
    color: #664d03;
    background-color: rgba(255, 193, 7, .15);
    border-color: rgba(255, 193, 7, .3);
}

.alert-info {
    color: #055160;
    background-color: rgba(13, 202, 240, .1);
    border-color: rgba(13, 202, 240, .25);
}

.alert-light {
    color: #636464;
    background-color: #fefefe;
    border-color: #f1f1f1;
}

.alert-dark {
    color: #141619;
    background-color: rgba(33, 37, 41, .1);
    border-color: rgba(33, 37, 41, .25);
}

/* Títulos y separadores (opcional) */
.alert h4 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 600;
}

.alert hr {
    margin: .75rem 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .15;
}