Notificaciones

El componente de notificaciones está diseñado para mantener al usuario informado sobre el estado de sus trámites, citas, infracciones u otras actualizaciones relevantes.

Funciona como una capa sobrepuesta (popover) que se despliega al interactuar con el ícono de campana en la interfaz.

Anatomía del componente

Encabezado: Contiene el título "Alertas Informativas" y un contador de notificaciones no leídas (ej. "7")
Contenedor de lista: Espacio donde se agrupan las tarjetas individuales
Card de notificación
Cuerpo del mensaje: Texto descriptivo con la información del trámite o evento
Antigüedad: Tiempo transcurrido desde la notificación (ej. "1 d", "6 Sem")
Acción individual: "Marcar como leído" (enlace de texto) y "X" (ícono de cerrar/eliminar)
Pie de página: Botones de "Marcar todo como leído" y "Limpiar todo"

Estados y comportamientos

Al hacer clic en el ícono de la campana, se despliega el listado. El ícono de la campana muestra un badge (insignia roja).

Para garantizar una experiencia intuitiva, el componente de notificaciones diferencia visual y funcionalmente las alertas que requieren atención (no leídas) de aquellas que ya han sido procesadas (leídas).

Alerta no leída

Este estado indica que el usuario aún no ha interactuado con la alerta.

La card cuenta con un fondo de color secondary con opacidad del 50% (#D1E7D3 o equivalente según la paleta) que la resalta sobre el contenedor principal.
Incluye el enlace de texto "Marcar como leído" en la esquina inferior derecha. Al hacer clic, esta acción debe cambiar el estado del ítem a "leído".

Alerta leída

Este estado indica que la notificación ya fue vista o marcada manualmente por el usuario.

La tarjeta tiene un fondo blanco (#FFFFFF), integrándose visualmente con el fondo del panel. Esto reduce la carga cognitiva y permite que el usuario se enfoque en lo que aún tiene pendiente.
El enlace "Marcar como leído" desaparece. Se mantiene únicamente el ícono de cerrar ("X") para eliminar la alerta si el usuario lo desea.

Nota

El usuario puede cerrar alertas individuales (usando la “X”) o gestionar el grupo completo mediante las acciones del pie de página.

Buenas prácticas

Claridad en el mensaje: El texto debe ser directo. Si el usuario debe realizar una acción (como pagar un trámite), el mensaje debe incluir un enlace claro (tipo “Páguelo AQUÍ”) para reducir la fricción.
Jerarquía: Las alertas más recientes deben aparecer siempre en la parte superior.
Accesibilidad: Asegurar que los íconos de acción (“X”, papelera, sobre) tengan etiquetas ARIA descriptivas para lectores de pantalla. El contraste de color en los textos (especialmente los enlaces) debe cumplir con los estándares de accesibilidad WCAG.