/* alertar.css: Modal institucional de alertas */
#modal-alertar {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
}
.alertar-modal { display: contents; }
.alertar-bg {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.alertar-box {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 640px;
    width: calc(100% - 32px);
    padding: 24px 22px 18px 22px;
    border-top: 5px solid #0dcaf0; /* default info */
    animation: fadein .18s ease-out;
}
.alertar-success { border-top-color: #198754; }
.alertar-info { border-top-color: #0dcaf0; }
.alertar-primary { border-top-color: #0aab93; }
.alertar-danger { border-top-color: #dc3545; }
.alertar-warning { border-top-color: #ffc107; }

.alertar-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: transparent;
    border: none; cursor: pointer;
}
.alertar-close-ico {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b8a 0%, #ff206e 100%);
    box-shadow: 0 6px 16px rgba(255,32,110,0.35);
    position: relative; display: block;
}
.alertar-close-ico::before,
.alertar-close-ico::after{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 2px;
    background: #fff; border-radius: 1px;
}
.alertar-close-ico::before{ transform: translate(-50%,-50%) rotate(45deg); }
.alertar-close-ico::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.alertar-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.alertar-icon { 
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; font-size: 22px; color: #0dcaf0;
    background: #eff9ff; box-shadow: inset 0 0 0 1px rgba(13,202,240,0.2);
}
.alertar-success .alertar-icon { color: #198754; background: #eefaf3; box-shadow: inset 0 0 0 1px rgba(25,135,84,0.15); }
.alertar-info .alertar-icon { color: #0dcaf0; background: #eff9ff; box-shadow: inset 0 0 0 1px rgba(13,202,240,0.15); }
.alertar-primary .alertar-icon { color: #0aab93; background: #e9fbf8; box-shadow: inset 0 0 0 1px rgba(10,171,147,0.15); }
.alertar-danger .alertar-icon { color: #dc3545; background: #fff1f2; box-shadow: inset 0 0 0 1px rgba(220,53,69,0.15); }
.alertar-warning .alertar-icon { color: #ffc107; background: #fff9e6; box-shadow: inset 0 0 0 1px rgba(255,193,7,0.25); }

.alertar-title { font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.alertar-body { margin-top: 6px; }
.alertar-mensaje { font-size: 1.05rem; color: #1f2937; margin-bottom: 8px; }
.alertar-detalle { font-size: .9rem; color: #6b7280; white-space: normal; word-break: break-word; }

.alertar-footer { margin-top: 16px; display: flex; justify-content: center; gap: 10px; }
.alertar-btn {
    display: inline-block; min-width: 110px; text-align: center;
    padding: 10px 18px; border-radius: 10px; font-size: .95rem; font-weight: 600;
    text-decoration: none; border: none; cursor: pointer; transition: all .15s ease;
}
.alertar-btn:hover { filter: brightness(1.02); transform: translateY(-1px); }
.alertar-btn-success { background: #198754; color: #fff; box-shadow: 0 6px 14px rgba(25,135,84,0.25); }
.alertar-btn-info { background: #0dcaf0; color: #fff; box-shadow: 0 6px 14px rgba(13,202,240,0.25); }
.alertar-btn-primary { background: #0aab93; color: #fff; box-shadow: 0 6px 14px rgba(10,171,147,0.25); }
.alertar-btn-danger { background: #dc3545; color: #fff; box-shadow: 0 6px 14px rgba(220,53,69,0.25); }
.alertar-btn-warning { background: #ffc107; color: #fff; box-shadow: 0 6px 14px rgba(255,193,7,0.25); }

@keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

/* Backdrop Bootstrap: fondo negro desvanecido consistente para todas las modales */
.modal-backdrop {
    --bs-backdrop-bg: #000; /* color base negro */
    --bs-backdrop-opacity: 0.45; /* opacidad suave, similar al resto de la app */
    background-color: rgba(0,0,0,0.45) !important; /* forzar color si las CSS vars no aplican */
}
.modal-backdrop.show {
    opacity: 0.45 !important; /* asegurar semitransparencia al mostrarse */
}