16 — Especificaciones de interacción — RELE
1. Convenciones
| Parámetro | Valor |
|---|
| Duración hover | ~150ms CSS default |
| Feedback crítico | Inmediato al response HTTP |
| Navegación | Angular router, sin full reload |
| Toasts | No en v1; UI actualiza in-place |
2. Home
| Interacción | Comportamiento |
|---|
| Hover CTA sea | hover:bg-sea-strong |
| Hover CTA outline | border/ink enfatizado |
| Click CTAs rol | → /login |
| Sticky header | sticky top-0 + surface/95 |
| Hero image | object-cover, no zoom interaction |
3. Login
| Interacción | Comportamiento |
|---|
| Prefill | email residente demo |
| Submit | disable visual no; espera HTTP |
| Error | muestra coral bajo form; no limpia password |
| Success | navigate /lecturas |
| Link ← Inicio | / |
4. Lista lecturas
| Interacción | Comportamiento |
|---|
| Load | paralelo list + stats (subscribe independientes) |
| Click card | → /lecturas/:id |
| Hover card | hover:border-sea |
| Nueva lectura (RESIDENT) | → /lecturas/nueva |
| Salir | logout + clear storage |
| Reintentar | re-ejecuta load() |
| Empty CTA | → nueva lectura |
Badges
| Status | Clase orientativa (impl.) |
|---|
| SUBMITTED | soft navy |
| REVIEWED | sea-soft |
| FLAGGED | coral-soft |
| DRAFT | muted |
5. Nueva lectura
| Interacción | Comportamiento |
|---|
| Campos | two-way ngModel |
| Submit | POST; on success volver a lista (o stay — según page impl.) |
| Validación | HTML required en period/kwh; server refuerza |
| Cancel / back | link a lista |
6. Detalle
| Interacción | Comportamiento |
|---|
| Load | GET by id; 403/404 → vacío o redirect futuro |
| RESIDENT view | sin botones patch |
| ADVISOR note | textarea bindeada |
| Marcar REVIEWED | PATCH status REVIEWED + note |
| Marcar FLAGGED | PATCH status FLAGGED + note |
| Success patch | item = response in-place; sin toast |
7. Estados de superficie
Loading
| Superficie | v1 |
|---|
| Lista | loading=true evita empty flash hasta respuesta |
| Detalle | no skeleton; aparece al next |
Empty
| Condición | UI |
|---|
| items.length===0 && !error && !loading | panel centrado + copy |
Error
| Condición | UI |
|---|
| HTTP error list | panel coral-soft + Reintentar |
| Login error | texto coral |
8. Responsive
| Viewport | Ajuste |
|---|
| < md | hero 1 col; login stack (form abajo); stats wrap |
| ≥ md | hero 2 col; login split; stats row |
| Touch | botones full/rounded-full con padding ≥ 10px vertical |
9. Teclado
| Atajo implícito | Resultado |
|---|
| Enter en login | submit form |
| Tab order | ver doc 10 |
| Esc | no cierra modales (no hay modal v1) |
10. Movimiento y reduced motion
v1 no define animaciones custom largas.
L2+: respetar prefers-reduced-motion si se añaden transitions de lista.
11. Edge cases de interacción
| Caso | Comportamiento esperado |
|---|
| Doble click submit create | posible double POST; L2+ debounce |
| Patch concurrente | last write wins |
| Token expira mid-session | próximo GET falla → error/relogin |
| Deep link detalle sin token | redirect login |
12. Criterios de aceptación interacción
- Card hover visible.
- Patch actualiza badge sin reload full page.
- Error lista recuperable con Reintentar.
- Empty no muestra lista fantasma.
- ADVISOR no ve botón “Nueva lectura”.
