/* Usado por Components/UI/NotificationHost.razor */
.notif-host {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
  display: flex; flex-direction: column-reverse; gap: 8px;
  max-width: 360px;
}
.notif {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--surface); border: var(--border-w) solid var(--line-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: var(--fs-sm); color: var(--ink);
  border-left: 3px solid var(--ink-3);
}
.notif.success { border-left-color: var(--ok); }
.notif.error { border-left-color: var(--bad); }
.notif.warning { border-left-color: var(--warn); }
.notif .msg { flex: 1; }
.notif .close {
  background: none; border: none; cursor: pointer; color: var(--ink-3);
  font-size: var(--fs-xs); line-height: 1; padding: 2px;
}
.notif .close:hover { color: var(--ink); }