.balao-notif {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 500;
  width: min(560px, calc(100vw - 32px)); max-width: 90vw;
  background: var(--surface-color, #fff); color: var(--text-color, #333); border:1px solid var(--border-color, #ddd);
  border-left:5px solid var(--primary-color, #2d9fa3); border-radius: var(--radius, 18px);
  box-shadow: var(--shadow-forte, 0 18px 50px rgba(0,0,0,.22)); padding: 18px 22px;
  display: flex; flex-direction:row; align-items:center; justify-content:space-between; gap:18px; text-align:left; cursor: pointer;
  animation: balao-entra .25s ease-out;
}
.balao-notif-texto { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.balao-notif strong { font-size: 18px; }
.balao-notif span { color: var(--muted, #6b7280); }
.balao-notif-icone { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:color-mix(in srgb,var(--primary-color,#2d9fa3) 12%,transparent); color:var(--primary-color,#2d9fa3); font-size:17px; }
.balao-notif.saindo { opacity: 0; transition: opacity .25s; }
@keyframes balao-entra {
  from { opacity: 0; transform: translate(-50%, -12px) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 639px) {
  .balao-notif { top: calc(12px + env(safe-area-inset-top, 0px)); width: calc(100vw - 24px); padding: 16px 17px; gap:12px; }
  .balao-notif-icone { width:36px; height:36px; }
}
.botao-som-notif {
  position: fixed; top: 14px; right: 16px; z-index: 150; border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px; padding: 10px 15px; background: var(--surface-color, #fff);
  color: var(--text-color, #333); box-shadow: 0 5px 18px rgba(0,0,0,.15); cursor: pointer;
  font: 600 14px system-ui, sans-serif;
}
.botao-som-notif:hover { filter: brightness(.96); }