/**
 * notificacoes.css
 * Sino FIXO no canto superior direito (#notif-fab, preso ao <body>) + painel
 * que abre por cima da tela, com largura que cabe no celular.
 */
#notif-fab {
  position: fixed; top: 10px; right: 10px; z-index: 9000;
}
.notif-wrap { position: static; }

.notif-bell {
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(245, 242, 231, 0.4);
  color: var(--branco);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.notif-bell:hover { border-color: var(--amarelo); }
.notif-count {
  position: absolute; top: -7px; right: -7px;
  background: var(--vermelho); color: var(--branco);
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  border-radius: 999px; padding: 2px 6px; line-height: 1;
  border: 2px solid var(--campo-escuro);
}

.notif-panel {
  display: none;
  position: fixed; top: 58px; right: 8px;
  width: min(360px, calc(100vw - 16px));
  max-height: min(72vh, 480px); overflow-y: auto;
  background: var(--giz); color: var(--preto);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 9001;
}
.notif-panel.open { display: block; }

.notif-panel-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid rgba(23, 21, 18, 0.12);
  font-family: 'Bebas Neue'; letter-spacing: 0.03em; font-size: 1.05rem;
  background: var(--giz);
}
.notif-panel-foot {
  padding: 10px 14px; border-top: 1px solid rgba(23, 21, 18, 0.1); text-align: center;
}
.notif-link {
  background: none; border: none; cursor: pointer;
  font-family: 'Inter'; font-size: 0.72rem; font-weight: 700;
  color: var(--terra); text-decoration: underline; letter-spacing: normal;
  padding: 0;
}

.notif-list { list-style: none; margin: 0; padding: 4px 0; }
.notif-list li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 14px; font-size: 0.84rem; line-height: 1.4;
  border-bottom: 1px dotted rgba(23, 21, 18, 0.12);
}
.notif-list li.unread {
  background: rgba(232, 185, 59, 0.14);
  border-left: 3px solid var(--amarelo);
  font-weight: 600;
}
.notif-list li time {
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  color: rgba(23, 21, 18, 0.45); flex-shrink: 0; white-space: nowrap; padding-top: 2px;
}
.notif-empty { color: rgba(23, 21, 18, 0.45); text-align: center; padding: 22px 14px !important; }