ETAPA_CALIDAD: Nota de discrepancia: las 5 clases de P1 usan var(--color-primary), no var(--color-re-teal) como decía el prompt — ambas resuelven al mismo hex #43BBC8. Hice el reemplazo por nombre de clase (igual intención: texto teal → carbón), no por el literal del grep.

sprints/sprint-5/ETAPA_CALIDAD_PROMPT.md

@@ -0,0 +1,123 @@
+# ETAPA CALIDAD — Contraste, mobile, conectividad, touch (Sprint 5)
+
+## 1. Objetivo
+Resolver los 4 problemas de calidad identificados en la auditoría del 27 jun 2026,
+en orden de impacto. Un solo commit al terminar todo.
+
+## 2. Contexto
+Diagnóstico base: auditoría de solidez/usabilidad (27 jun 2026, sin modificaciones).
+Todos los problemas tienen archivo y línea exacta identificados.
+
+## 3. DECISIONES YA TOMADAS — no consultar
+- **Contraste teal:** Opción B — `#43BBC8` queda SOLO para decoración (fondos,
+  bordes, barras, elementos gráficos). Cuando se usa como COLOR DE TEXTO, reemplazar
+  por `#494F4F` (carbón de marca). No crear variante oscura del teal.
+- **Mobile bottombar:** flex-wrap en el contenedor, no width fijo en los botones.
+- **Submit sin try/catch:** agregar manejo de error de red que muestre el estado
+  'error' propio del wizard, no la pantalla cruda de React.
+- **Autocomplete touch:** agregar `onTouchEnd` como fallback junto al `onMouseDown`
+  existente — no reemplazarlo.
+- Sin librerías nuevas en ningún fix.
+
+## 4. Tareas en orden
+
+### P1 — Contraste teal como texto (CRÍTICO — sistemático)
+En `app/globals.css`, reemplazar `color: var(--color-re-teal)` por
+`color: #494F4F` en estas clases específicas:
+- `.btn-secondary` (botón "Anterior") — línea ~380
+- `.wizard-section-number` ("Sección X de Y") — línea ~569
+- `.summary-code` — línea ~431
+- `.barrio-autocomplete-item--active` (texto del ítem activo) — línea ~319
+- `.consent-required-badge` — línea ~490
+
+NO tocar usos de `var(--color-re-teal)` como `background-color`, `border-color`,
+`fill`, o en las clases `.db-*` del dashboard — esos son usos decorativos correctos.
+
+Verificar después del cambio que no quedó ningún `color: var(--color-re-teal)` en
+clases del wizard (grep en globals.css sección wizard):
+```bash
+grep -n "color: var(--color-re-teal)" app/globals.css
+```
+Los únicos resultados aceptables son en sección `.db-*` del dashboard.
+
+### P2 — Submit sin try/catch (red se cae al enviar)
+En `components/wizard-form.tsx`, función `handleSubmit` (líneas ~212-226):
+Envolver el `await submitSurvey(...)` en try/catch. Si el catch recibe un error
+de red (fetch failed, network error), setear el estado del wizard a 'error' con
+mensaje accionable: "No pudimos enviar tu respuesta. Verificá tu conexión e
+intentá de nuevo." El botón de reintento ya existe en el estado 'error'
+(wizard-form.tsx:136-152) — solo hay que llegar a ese estado correctamente.
+No crear `app/error.tsx` — el estado de error propio del wizard es suficiente.
+
+### P3 — Botones bottombar en mobile ≤480px
+En `app/globals.css`, sección `.wizard-bottombar` (~línea 653):
+Agregar `flex-wrap: wrap` al contenedor `.wizard-bottombar`.
+En el breakpoint `@media (max-width: 480px)`:
+- `.wizard-bottombar` → `flex-direction: column-reverse` (Siguiente arriba, Anterior abajo)
+- `.btn` dentro del bottombar → `width: 100%`
+- El span hint entre los botones → `order: 3` para que quede al final
+`column-reverse` porque el botón primario (Siguiente/Enviar) debe estar arriba
+en mobile — el pulgar llega más fácil al centro que a la base.
+
+### P4 — Autocomplete touch frágil
+En `components/widgets/barrio-autocomplete-field.tsx` y
+`components/widgets/ciudad-select-field.tsx`:
+En el handler de selección de ítem del dropdown, agregar `onTouchEnd` junto
+al `onMouseDown` existente (no reemplazarlo). El `onTouchEnd` debe llamar
+`e.preventDefault()` antes de ejecutar la selección para evitar el blur
+sintético que cierra la lista antes de que se procese la selección.
+
+## 5. DoD antes de reportar
+- [ ] `git log --name-only -1` — listar todos los archivos tocados
+- [ ] grep de verificación P1:
+  ```bash
+  grep -n "color: var(--color-re-teal)" app/globals.css
+  ```
+  Solo resultados en sección `.db-*`
+- [ ] Build sin errores: `npm run build`
+- [ ] P2 verificado: en `handleSubmit`, el catch existe y setea estado 'error'
+  con mensaje accionable (pegar el bloque try/catch completo en el reporte)
+- [ ] P3 verificado: describir el CSS resultante del bottombar en mobile
+- [ ] P4 verificado: describir el handler resultante de selección en autocomplete
+- [ ] Commit: `fix(quality): contraste teal, submit red, bottombar mobile, autocomplete touch`
+- [ ] Push a Gitea
+
+## 6. Qué reportar
+```
+P1 — Contraste:
+- Clases modificadas: [lista con línea antes → después]
+- grep verificación: [output]
+
+P2 — Submit try/catch:
+- Bloque handleSubmit completo después del fix: [código]
+
+P3 — Bottombar mobile:
+- CSS resultante de .wizard-bottombar y el breakpoint: [código]
+
+P4 — Autocomplete touch:
+- Handler de selección resultante (onMouseDown + onTouchEnd): [código]
+
+Verificado:
+- Build: ✓/✗
+- git log --name-only -1: [lista]
+- Commit: [hash]
+```
+
+## 7. Qué NO hacer
+- ❌ No tocar `var(--color-re-teal)` en usos decorativos (background, border, fill)
+- ❌ No tocar clases `.db-*` del dashboard
+- ❌ No crear `app/error.tsx`
+- ❌ No reemplazar `onMouseDown` — agregar `onTouchEnd` junto a él
+- ❌ No agregar librerías nuevas
+- ❌ No hacer deploy — solo commit y push a Gitea
+- ❌ No mezclar con los fixes rápidos de la etapa anterior
+
+## 8. Versionado
+```
+fix(quality): contraste teal, submit red, bottombar mobile, autocomplete touch
+
+P1: color de texto teal → #494F4F en 5 clases del wizard (WCAG AA).
+P2: try/catch en handleSubmit — error de red muestra estado error del wizard.
+P3: flex-wrap + column-reverse en bottombar ≤480px.
+P4: onTouchEnd fallback en autocomplete barrio y ciudad.
+```