/* =========================================================
   NOTIFICATIONS MODAL — Notificaciones + badge
   ========================================================= */

.notif-card {
  width: min(720px, 92vw);
  max-height: calc(100vh - var(--topbar-h, 56px) - var(--app-bottomnav-h, 78px) - var(--web3-disc-h, 22px) - 24px);
  margin-bottom: 8px;
}
.notif-body {
  padding: 14px 16px;
  overflow-y: auto;
  max-height: calc(100vh - var(--topbar-h, 56px) - var(--app-bottomnav-h, 78px) - var(--web3-disc-h, 22px) - 16px - 56px);
}
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-timeline { display: flex; flex-direction: column; gap: 8px; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}

.notif-item .ico { width: 26px; text-align: center; flex-shrink:0; margin-top:2px; }
.notif-item .txt { flex: 1; font-weight: 700; font-size: 13px; line-height:1.4; }
.notif-item .n {
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  flex-shrink:0;
}

.notif-item.clickable { cursor: pointer; }
.notif-item.clickable:hover { box-shadow: 0 0 0 1px rgba(0,255,213,.2) inset, 0 8px 18px rgba(0,0,0,.15); }

.notif-ts { display: inline-block; font-size: 10px; font-weight: 600; opacity: .5; margin-left: 6px; white-space:nowrap; flex-shrink:0; }
.notif-snippet { font-size: 11px; font-weight: 500; opacity: .65; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Badge del icono 🔔 ===== */
.icon-btn { position: relative; }
.icon-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #08101a;
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(0,255,213,.18);
}