From ca3af1a750db59b22fce403dc4f0ddd97bf370d6 Mon Sep 17 00:00:00 2001
From: markosbenitez <msebem@gmail.com>
Date: Sat, 27 Jun 2026 15:25:16 -0300
Subject: [PATCH] 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.
---
 app/globals.css                               | 16 ++++++----
 .../widgets/barrio-autocomplete-field.tsx     |  1 +
 components/widgets/ciudad-select-field.tsx    |  1 +
 components/wizard-form.tsx                    | 29 ++++++++++++-------
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 90907e1..a876072 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -316,7 +316,7 @@ body {
 .barrio-autocomplete-item:hover,
 .barrio-autocomplete-item--active {
   background: var(--color-primary-light);
-  color: var(--color-primary);
+  color: #494F4F;
 }
 
 /* ── Textarea ── */
@@ -377,7 +377,7 @@ body {
 .btn-primary:hover { background: var(--color-primary-hover); }
 .btn-secondary {
   background: transparent;
-  color: var(--color-primary);
+  color: #494F4F;
   border-color: var(--color-primary);
 }
 .btn-secondary:hover { background: var(--color-primary-light); }
@@ -428,7 +428,7 @@ body {
 }
 .summary-code {
   font-weight: 700;
-  color: var(--color-primary);
+  color: #494F4F;
   margin-right: 4px;
 }
 .summary-answer {
@@ -487,7 +487,7 @@ body {
 .consent-checkbox-label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
 .consent-checkbox-input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
 .consent-checkbox-text { flex: 1; }
-.consent-required-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-light); padding: 1px 6px; border-radius: 4px; }
+.consent-required-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #494F4F; background: var(--color-primary-light); padding: 1px 6px; border-radius: 4px; }
 .consent-optional-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }
 .consent-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
 .consent-required-hint { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
@@ -566,7 +566,7 @@ body {
 .wizard-section-number {
   font-size: 0.9375rem;
   font-weight: 700;
-  color: var(--color-primary);
+  color: #494F4F;
   margin: 0 0 8px;
 }
 .wizard-section-title {
@@ -659,6 +659,7 @@ body {
   padding: 16px 0;
   margin-top: 16px;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
@@ -673,6 +674,11 @@ body {
   .wizard-prompt-text { font-size: 1.1875rem; }
   .wizard-section-title { font-size: 1.5rem; }
   .wizard-answer-area { max-height: 400px; }
+  /* column-reverse: el botón primario (Siguiente/Enviar) queda arriba —
+     el pulgar llega más fácil al centro de la pantalla que a la base. */
+  .wizard-bottombar { flex-direction: column-reverse; }
+  .wizard-bottombar .btn { width: 100%; }
+  .wizard-bottombar-hint { order: 3; }
 }
 
 /* ── Loading skeleton ── */
diff --git a/components/widgets/barrio-autocomplete-field.tsx b/components/widgets/barrio-autocomplete-field.tsx
index 69b1e80..caf3dd8 100644
--- a/components/widgets/barrio-autocomplete-field.tsx
+++ b/components/widgets/barrio-autocomplete-field.tsx
@@ -147,6 +147,7 @@ export function BarrioAutocompleteField({
                 aria-selected={i === activeIdx}
                 className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
                 onMouseDown={() => select(barrio)}
+                onTouchEnd={(e) => { e.preventDefault(); select(barrio) }}
               >
                 {barrio}
               </li>
diff --git a/components/widgets/ciudad-select-field.tsx b/components/widgets/ciudad-select-field.tsx
index d150c48..ec2b7ec 100644
--- a/components/widgets/ciudad-select-field.tsx
+++ b/components/widgets/ciudad-select-field.tsx
@@ -151,6 +151,7 @@ export function CiudadSelectField({
                 aria-selected={i === activeIdx}
                 className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
                 onMouseDown={() => select(ciudad)}
+                onTouchEnd={(e) => { e.preventDefault(); select(ciudad) }}
               >
                 {ciudad}
               </li>
diff --git a/components/wizard-form.tsx b/components/wizard-form.tsx
index 12ab0b5..7810d44 100644
--- a/components/wizard-form.tsx
+++ b/components/wizard-form.tsx
@@ -210,17 +210,24 @@ export function WizardForm({ survey, schema }: WizardFormProps) {
     })
 
     startTransition(async () => {
-      const result = await submitSurvey({
-        surveyId: survey.id,
-        answers,
-        consentOperativo,
-        consentMacroN1,
-      })
-      if (result.success) {
-        clearDraft(survey.id)
-        setStage('success')
-      } else {
-        setSubmitError(result.error)
+      try {
+        const result = await submitSurvey({
+          surveyId: survey.id,
+          answers,
+          consentOperativo,
+          consentMacroN1,
+        })
+        if (result.success) {
+          clearDraft(survey.id)
+          setStage('success')
+        } else {
+          setSubmitError(result.error)
+          setStage('error')
+        }
+      } catch {
+        // Falla de red al invocar el Server Action (fetch failed) — no es un
+        // error que submitSurvey pueda devolver como result, hay que capturarlo acá.
+        setSubmitError('No pudimos enviar tu respuesta. Verificá tu conexión e intentá de nuevo.')
         setStage('error')
       }
     })