Sistema de Notificaciones

Un toast debe permanecer visible minimo 4 segundos para mensajes cortos (menos de 10 palabras) y hasta 7 segundos para mensajes largos. Formula: base 3s + 1s por cada 3 palabras. Los toasts con accion requerida nunca deben auto-cerrarse en menos de 5 segundos. WCAG 2.2 SC 2.2.1 exige que el temporizador se pause al hacer hover y sea configurable.

Los badges de notificacion deben mostrar el conteo exacto hasta 99; cualquier numero mayor se colapsa a "99+". Cuando el conteo llega a cero, el elemento badge debe eliminarse del DOM por completo, nunca renderizarse con "0" o un circulo vacio. Usa aria-label para exponer el conteo exacto a lectores de pantalla.

iOS 15+ define cuatro niveles: Passive (silencioso al Centro de Notificaciones), Active (sonido, vibracion, activa pantalla), Time-Sensitive (interrumpe el modo Enfoque) y Critical (anula el modo silencio; requiere permiso de Apple). Usa Time-Sensitive solo para notificaciones que deben verse en menos de 60 minutos. Critical es exclusivo para emergencias o salud.

En desktop (viewport mayor a 768px), ancla los toasts a la esquina superior derecha con margen minimo de 16px desde el borde, apilados con 8px de separacion. En movil, los toasts cubren el ancho completo de la pantalla y se anclan al borde inferior con 16px de margen inferior, con zona de 90px libre para dispositivos con notch. Nunca posiciones toasts en la esquina inferior derecha si los CTAs primarios estan en esa zona.

La pantalla de configuracion de notificaciones debe presentar categorias (filas) cruzadas con canales de entrega (columnas): in-app, push, email, SMS. Un toggle global unico sin control por categoria o canal conduce a opt-outs binarios de todo o nada. Limita la matriz a un maximo de 8 filas para evitar fatiga. Pre-selecciona Transaccional y deja sin seleccionar Marketing.

Cada notificacion inyectada programaticamente debe tener el ARIA role correcto: role="status" (aria-live="polite") para mensajes de exito e informativos que esperan a que el lector termine de hablar; y role="alert" (aria-live="assertive") para errores y confirmaciones destructivas que interrumpen inmediatamente. El patron correcto es pre-montar dos contenedores vacios al cargar la pagina y poblarlos via JS cuando se dispara una notificacion.

Cuando 3 o mas notificaciones llegan del mismo origen (mismo emisor, mismo tipo de evento, mismo hilo) dentro de una ventana de 60 segundos, colapsalas en una notificacion agrupada mostrando el conteo y un resumen. El grupo debe ser expandible al tocarlo para revelar los items individuales. Incluye siempre un control "Marcar todo como leido" en el encabezado del grupo.

Nunca solicites permiso de notificaciones push en el primer lanzamiento de la app o en la primera vista de pagina. Usa un flujo de dos pasos: primero muestra una pantalla de pre-permiso con valor claro y especifico, luego dispara el dialogo del SO solo si el usuario confirma. Las apps que piden permiso en el lanzamiento tienen una tasa de aceptacion del 43.9%; los prompts contextuales logran hasta un 40% mas de consentimiento.

Todo producto que envie notificaciones push o in-app debe ofrecer un horario de No Molestar (DND) con granularidad por dia y una ventana minima configurable de 8 horas. El valor por defecto debe ser 10 pm - 8 am en la zona horaria del dispositivo. Las notificaciones en cola durante DND deben entregarse como un resumen agrupado al terminar la ventana, no como una rafaga de alertas individuales.

Cuando todas las notificaciones han sido leidas o eliminadas, el panel del centro de notificaciones debe mostrar un estado vacio no en blanco: un icono o ilustracion, un titular (ej. "Al dia con todo") y una sublinea de una oracion explicando que aparecera aqui. El area del estado vacio debe tener minimo 200px de altura para ser visualmente reconocible como estado intencional.

Aplica un tope de frecuencia de maximo 3 notificaciones push por usuario en una ventana de 24 horas para tipos no transaccionales (marketing, re-engagement, consejos). Las notificaciones transaccionales (actualizaciones de pedido, alertas de seguridad, mensajes directos) estan exentas de este tope. Si multiples notificaciones no transaccionales estan en cola y solo queda un slot, envia la mas reciente o la de mayor tasa de apertura predicha.

Para cualquier accion de un solo paso que sea destructiva o dificil de revertir (eliminar, archivar, desuscribirse, abandonar grupo), ejecuta la accion despues de un retraso de 5 segundos y muestra un toast con el boton "Deshacer" durante ese tiempo. La accion NO debe ejecutarse de inmediato al hacer clic. El boton "Deshacer" debe ser el unico elemento interactivo en el toast. Si la accion no puede retrasarse en el servidor, usa un dialogo de confirmacion en su lugar.