/* css/alertas.css - Panel de la campana de alertas en el mapa */
#alertasPanel {
    position: absolute;
    top: 60px;
    right: 66px;
    width: min(300px, calc(100vw - 90px));
    max-height: 60%;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    z-index: 1200;
    overflow: hidden;
}
#alertasPanel[hidden] { display: none; }
.alertas-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
.alertas-head button { background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.alertas-filtro { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px 2px; }
.alertas-filtro input { flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 28px 7px 10px; border-radius: 8px; border: 1px solid var(--border-color, #e5e7eb); background: var(--bg-input, var(--bg-card)); color: var(--text-primary); font-size: 13px; text-transform: uppercase; }
.alertas-filtro input::placeholder { text-transform: none; }
.alertas-filtro-x { position: absolute; right: 56px; background: none; border: 0; color: var(--text-secondary); font-size: 14px; cursor: pointer; }
.alertas-filtro-x[hidden] { display: none; }
.alertas-cuenta { color: var(--text-secondary); font-size: 11px; min-width: 38px; text-align: right; }
.alertas-lista { overflow-y: auto; padding: 6px 10px 10px; }
.alerta-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 2px; border-bottom: 1px solid var(--border-color, #e5e7eb); font-size: 13px; }
.alerta-item span { color: var(--text-secondary); }
.alerta-item small { color: var(--text-secondary); font-size: 11px; }
.alertas-vacio { text-align: center; color: var(--text-secondary); font-size: 13px; margin: 14px 0; }

/* Campana con alerta nueva: titila en rojo hasta que se abre el panel */
#alertasBtn.alertas-nueva { animation: campanaTitila 0.9s ease-in-out infinite; color: #fff; background: #ef4444; }
#alertasBtn.alertas-nueva svg { animation: campanaSacude 0.9s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes campanaTitila { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); opacity: 1; } 50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); opacity: 0.55; } }
@keyframes campanaSacude { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }

/* Número de alertas sin ver sobre la campana */
#alertasBtn { position: relative; }
.alertas-num { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #fff; }
.alertas-num[hidden] { display: none; }

/* Celular obligatorio en Perfil */
#perfilTelefono.tel-falta { border: 2px solid #ef4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25); animation: telPulso 1.2s ease-in-out infinite; }
.tel-falta-msg { color: #ef4444 !important; font-weight: 700; font-size: 13px !important; }
#perfilTelefonoGuardar:disabled { opacity: 0.5; }
@keyframes telPulso { 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.05); } }