/* ========================================
   SINPROESEMMA — Notificações push
   ======================================== */

/* O botão começa oculto (hidden) e o JS o exibe quando há suporte/configuração.
   Regra explícita para vencer display:flex/flex de .header-icon e do dock. */
.push-toggle[hidden]{display:none!important}

.push-toggle-icons{position:relative;width:20px;height:20px;display:grid;place-items:center}
.push-toggle-icons .icon{position:absolute;width:19px;height:19px;transition:opacity .2s ease,transform .25s ease}
.push-icon-off{opacity:0;transform:scale(.55)}
.push-toggle.is-active .push-icon-on{opacity:0;transform:scale(.55)}
.push-toggle.is-active .push-icon-off{opacity:1;transform:none}

/* Sino ativo ganha destaque de estado (mantém o visual circular do header). */
.push-toggle.is-active{background:#eaf9fd;border-color:#0077b6;color:#0077b6}
html[data-theme="dark"] .push-toggle.is-active{background:#023047;border-color:#48cae4;color:#90e0ef}

/* Toast de confirmação */
.push-toast{
  position:fixed;
  z-index:32000;
  left:50%;
  bottom:calc(86px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);
  max-width:min(92vw,430px);
  padding:13px 19px;
  border-radius:14px;
  background:#03045e;
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  box-shadow:0 18px 50px rgba(3,4,94,.38);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.push-toast.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

@media (max-width: 980px) {
  /* No mobile o sino vive no mobile-dock; não repetir no header. */
  .header-actions .push-toggle{display:none}
}
@media (min-width: 981px) {
  .push-toast{bottom:34px}
}

/* Ícones dentro do dock (posição absoluta relativa ao wrapper). */
.mobile-dock .push-toggle-icons{width:20px;height:20px}
.mobile-dock .push-toggle.is-active{background:#0077b6;color:#fff}