/* TINTIN — normalización de la superficie global de notificaciones.
   La bandeja comparte capa, fondo sólido y contrato visual con las demás
   superficies del header; su geometría y transición por dispositivo siguen en
   css/components/notifications/notificaciones-sociales.css. */
#notifications-drawer {
  /* Keep Alerts in the same top-level layer as the other shared surfaces. */
  z-index: 1460 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

@media (max-width: 767px) {
  #notifications-drawer {
    top: max(12px, env(safe-area-inset-top)) !important;
    bottom: 0 !important;
    height: calc(100dvh - max(12px, env(safe-area-inset-top))) !important;
    width: 100vw !important;
    border-radius: 24px 24px 0 0;
    border-left: 0 !important;
  }
}