16 — Especificaciones de interacción — VOLTA
1. Convenciones
| Token | Valor |
|---|
| Duración hover | ~150ms ease |
| Focus | ring 2px ink o lime |
| Disabled | opacity 0.5, cursor not-allowed |
| Touch min | 44×44 px |
2. Home
| Elemento | Interacción |
|---|
| Nav anchors | Smooth scroll opcional a #clases / #horarios |
| CTA “Quiero una plaza” | Navigate /apuntarme |
| CTA “Ver clases” | Scroll #clases |
| CTA “Apuntarme” header | Navigate /apuntarme |
| “Coach” | Navigate /login |
| Hero image | Estática; no lightbox v1 |
| Cards de clase | Informativas; CTA global a join |
Estados: solo estáticos (marketing).
| Paso | Comportamiento |
|---|
| Input focus | Border/ring énfasis |
| Validación | On submit (mínimo L1); campos required bloquean |
| Submit loading | Botón disabled + “Enviando…” opcional |
| Success path | Navigate /ok con code en state/query |
| Error path | Banner/texto error; form permanece |
| Campo | Input type / control |
|---|
| fullName | text |
| email | email |
| phone | tel |
| classType | select enum |
| preferredDay | date o text date |
| preferredSlot | text o select horas |
| notes | textarea |
4. Success
| Elemento | Interacción |
|---|
| Código | Seleccionable; copy-to-clipboard L1+ opcional |
| CTA home | Navigate / |
| Refresh | Debe seguir mostrando mensaje (state o re-fetch no aplica) |
5. Login
| Paso | Comportamiento |
|---|
| Submit | POST login |
| Success | Guardar token/user → /inbox |
| Error | Mensaje bajo form; password no se limpia necesariamente |
| Enter | Submit form |
6. Inbox
| Elemento | Interacción |
|---|
| Load | Parallel GET list + stats |
| Card click | Navigate /inbox/:id |
| Pull refresh | N/A web; botón reintentar en error |
| Empty | Mensaje centrado; sin CTA create (create es público) |
| Error | Mensaje + control reintentar (re-fetch) |
| Salir | Clear storage → /login |
Stats chips
Solo lectura en v1; click no filtra (filtro = L1+).
7. Request detail
| Elemento | Interacción |
|---|
| Volver | /inbox |
| Botones estado | PATCH inmediato; optimistic opcional; al 200 actualizar badge |
| Loading patch | Disable botones de acción |
| Error patch | Toast/texto; estado UI no miente |
| Email/tel | mailto: / tel: si se implementa (recomendado) |
Mapa de acciones sugerido
| Botón | Target status | Visible si |
|---|
| Marcar contactada | CONTACTED | status ≠ CONTACTED (o siempre) |
| Confirmar plaza | CONFIRMED | status ≠ CONFIRMED |
| Cancelar | CANCELLED | status ≠ CANCELLED |
[DECISIÓN DE DISEÑO]: L1 puede mostrar las tres acciones siempre; el PATCH acepta el enum completo.
8. Responsive
| Breakpoint | Comportamiento |
|---|
| < md | Nav colapsada; CTA header visible; grids 1 col |
| ≥ md | Nav links; home 2 col; inbox stats en fila |
9. Feedback y errores (copy interactivo)
| Situación | Feedback |
|---|
| Join OK | Navegación success (no solo alert) |
| Join fail | Inline error |
| Login fail | Inline error |
| Inbox fail | Panel error |
| Status OK | Badge actualiza |
10. Accesibilidad de interacción
- No usar solo hover para info crítica.
- Botones reales (
button / a), no div clickable sin role.
- Mantener orden de tab natural en form y detail.
