/* Oficinapp — Campana de avisos (topbar) y página /notificaciones. */

.notif { position: relative; }
.notif__dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--orange-500); color: #fff; border: 2px solid #fff;
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; box-sizing: border-box;
}
.notif__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 380px; max-width: calc(100vw - 24px);
  padding: 0; overflow: hidden; box-shadow: var(--shadow-elevated); display: flex; flex-direction: column; max-height: min(560px, 75vh);
}
.notif__panel[hidden] { display: none; }
.notif__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--gray-100); }
.notif__head strong { color: var(--navy-900); font-size: 15px; }
.notif__list { overflow-y: auto; flex: 1; }
.notif__item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
.notif__item:hover { background: var(--gray-50); }
.notif__item.is-unread { background: var(--orange-50); }
.notif__item.is-unread:hover { background: #FFE8D9; }
.notif__icon { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--orange-500); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-card); }
.notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.notif__text strong { color: var(--navy-900); font-weight: 600; }
.notif__text span { color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif__when { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.notif__empty { padding: 24px 16px; text-align: center; color: var(--gray-500); }
.notif__all { display: block; text-align: center; padding: 12px; font-weight: 600; font-size: 13px; color: var(--orange-600); border-top: 1px solid var(--gray-100); }

.notif-row.is-unread .list-row__title { color: var(--navy-900); }
.notif-row:not(.is-unread) { opacity: .75; }
.notif-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); flex: none; }

@media (max-width: 767px) {
  .notif__panel { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; max-width: none; }
}