[UI / PRESENTATION] F-01.4 — Indicador Visual de Severidad por Colores
Épica: EPIC-01 — Dashboard Principal (Vista en Tiempo Real)
🏷️ Categoría
Categoría: UI / PresentationImpacta en: Equipo Frontend (Livewire/Blade)
📦 Dependencias
Backlogs que deben estar completados antes de implementar esta feature.
| Backlog | Motivo |
|---|---|
| F-01.1 | Cards del dashboard donde se aplica el componente Blade x-badge-severity |
Prioridad: Should
Descripción: Como administrador del sistema Quiero que cada card de tipo de error tenga un color diferenciado según su severidad Para percibir visualmente el nivel de urgencia sin necesidad de leer el texto
Criterios de Aceptación (Checklist):
- [ ] Escenario 1 (Happy Path): Dado que cargo el dashboard, cuando visualizo las cards, entonces Critical es rojo, High es naranja, Medium es amarillo, Low es verde y Others es gris.
- [ ] Escenario 2 (Accesibilidad): Dado que el color no es el único diferenciador, cuando visualizo las cards, entonces cada card incluye también el texto del tipo (no solo color) para cumplir WCAG AA.
- [ ] Requisito Técnico: Colores definidos como constantes en el componente Blade
x-badge-severity. No hardcoded inline en CSS.