/* Notificaciones — campanita, historial y preferencias */

/* ---- Campanita del topbar ---------------------------------------- */
/* El enlace era display:block y el ícono se alineaba por línea base, así que
   quedaba 3px más alto que el avatar de al lado. Con flex centrado, ambos
   comparten el mismo eje. */
#n-campanita .nav-link {
    display: flex;
    align-items: center;
    height: 30px;          /* el mismo alto que el avatar del perfil */
}
#n-campanita .n-campanita-icono { line-height: 0; }

/* El topbar es oscuro: el ícono no puede heredar el color del texto o
   queda negro sobre negro (solo se veía el globo del conteo). */
#n-campanita .nav-link svg {
    width: 20px; height: 20px;
    color: rgba(255, 255, 255, .85);
    stroke: currentColor;
}
#n-campanita .nav-link:hover svg,
#n-campanita .nav-link[aria-expanded="true"] svg { color: #fff; }
#n-campanita .nav-link::after { display: none; }   /* sin la flechita del dropdown */

/* El globo se ancla al ÍCONO, no al enlace: anclado al enlace caía sobre la
   campana por el relleno del <a>. Así se posa en la esquina superior derecha
   y solo la roza. El borde del color de la barra lo despega del ícono. */
.n-campanita-icono { position: relative; display: inline-flex; }
.n-campanita-badge {
    position: absolute;
    top: -7px; right: -9px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--h-danger);
    border: 2px solid #000;
    color: #fff;
    font-size: 9px; font-weight: 700; line-height: 13px;
    text-align: center;
    border-radius: 20px;
}
/* Campanada cuando hay pendientes: se agita ~1 s y descansa 5. Una animación
   continua acaba siendo ruido de fondo que el ojo aprende a ignorar; una
   intermitente vuelve a llamar la atención cada vez. */
@keyframes hCampanada {
      0%, 65%, 100% { transform: rotate(0); }
    68%             { transform: rotate(14deg); }
    72%             { transform: rotate(-12deg); }
    76%             { transform: rotate(9deg); }
    80%             { transform: rotate(-7deg); }
    84%             { transform: rotate(4deg); }
    88%             { transform: rotate(-2deg); }
}
@keyframes hBadgePulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 84, 85, .55); }
    60%      { box-shadow: 0 0 0 6px rgba(234, 84, 85, 0); }
}
#n-campanita.tiene-pendientes .nav-link svg {
    transform-origin: 50% 15%;      /* pivota desde el asa, como una campana real */
    animation: hCampanada 6s ease-in-out infinite;
}
#n-campanita.tiene-pendientes .n-campanita-badge {
    animation: hBadgePulso 6s ease-in-out infinite;
}
/* Se detiene mientras el menú está abierto: ya tiene tu atención. */
#n-campanita .nav-link[aria-expanded="true"] svg,
#n-campanita .nav-link[aria-expanded="true"] ~ * .n-campanita-badge { animation: none; }

/* Quien pidió menos movimiento en su sistema no debe sufrir esto. */
@media (prefers-reduced-motion: reduce) {
    #n-campanita.tiene-pendientes .nav-link svg,
    #n-campanita.tiene-pendientes .n-campanita-badge { animation: none; }
}

.n-campanita-menu { width: 340px; max-width: 92vw; }
/* La lista se desplaza dentro del menú: así el enlace "Ver todas" del pie
   siempre queda visible, aunque la pantalla sea corta. */
#n-campanita-lista { max-height: min(52vh, 420px); overflow-y: auto; }

.n-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f2f4;
    text-decoration: none;
    transition: background .12s ease;
}
.n-item:last-of-type { border-bottom: 0; }
.n-item:hover { background: var(--h-gray-grad-3); }
/* Las no leídas se distinguen con fondo tintado y una barra a la izquierda */
.n-item-nueva { background: var(--h-primary-grad-3); box-shadow: inset 3px 0 0 var(--h-primary); }
.n-item-nueva:hover { background: var(--h-primary-grad-2); }

.n-item-icono {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
}
.n-item-icono svg { width: 15px; height: 15px; }

.n-item-texto { display: flex; flex-direction: column; min-width: 0; }
.n-item-titulo { font-size: 13px; font-weight: 600; color: var(--h-black); }
.n-item-msg {
    font-size: 12px; color: var(--h-gray);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.n-item-tiempo { font-size: 11px; color: var(--h-gray-grad-1); margin-top: 2px; }

/* ---- Historial ---------------------------------------------------- */
.n-hist-fila { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #eef0f2; }
.n-hist-fila:last-child { border-bottom: 0; }
.n-hist-fila.is-nueva { background: var(--h-primary-grad-3); box-shadow: inset 3px 0 0 var(--h-primary); }
.n-hist-icono {
    flex-shrink: 0; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
}
.n-hist-icono svg { width: 16px; height: 16px; }

/* ---- Preferencias -------------------------------------------------- */
.form-switch .form-check-input:checked { background-color: var(--h-primary); border-color: var(--h-primary); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 .15rem rgba(118, 188, 33, .25); }