feat(wizard): autocomplete barrios desde geo_paraguay_full.json [4F]

- BarrioAutocompleteField: carga JSON estático, filtra por depto/ciudad (2.1/2.2), mín 2 chars, máx 10 sugerencias, texto libre permitido, teclado (↑↓ Enter Escape), ARIA listbox
- QuestionRenderer: branch code === '2.3' → BarrioAutocompleteField; prop answers? pasado desde WizardForm para contexto depto/ciudad
- globals.css: clases .barrio-autocomplete-* (wrapper, list, item, item--active)
- Incluye public/data/geo_paraguay_full.json (202 KB, sin commitear hasta ahora)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -289,6 +289,37 @@ body {
   box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
 }
 
+/* ── Barrio autocomplete ── */
+.barrio-autocomplete-wrapper { position: relative; }
+.barrio-autocomplete-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--color-surface);
+  border: 1.5px solid var(--color-border-focus);
+  border-radius: var(--radius);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  max-height: 220px;
+  overflow-y: auto;
+  z-index: 20;
+}
+.barrio-autocomplete-item {
+  padding: 9px 12px;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: var(--color-text);
+  transition: background 0.1s;
+}
+.barrio-autocomplete-item:hover,
+.barrio-autocomplete-item--active {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
 /* ── Textarea ── */
 .text-area {
   display: block;

components/question-renderer.tsx

@@ -1,15 +1,17 @@
 'use client'
-import type { AnswerValue, Question, QuestionOption } from '@/lib/form-engine.types'
+import type { AnswerValue, FormAnswers, Question, QuestionOption } from '@/lib/form-engine.types'
 import { RadioGroup } from './widgets/radio-group'
 import { CheckboxGroup } from './widgets/checkbox-group'
 import { TextAreaField } from './widgets/text-area-field'
 import { TextShortField } from './widgets/text-short-field'
+import { BarrioAutocompleteField } from './widgets/barrio-autocomplete-field'
 
 interface QuestionRendererProps {
   question: Question
   value: AnswerValue
   onChange: (value: AnswerValue) => void
   error?: string
+  answers?: FormAnswers
 }
 
 const YES_NO_OPTIONS: QuestionOption[] = [
@@ -17,7 +19,7 @@ const YES_NO_OPTIONS: QuestionOption[] = [
   { value: 'false', label: 'No' },
 ]
 
-export function QuestionRenderer({ question, value, onChange, error }: QuestionRendererProps) {
+export function QuestionRenderer({ question, value, onChange, error, answers }: QuestionRendererProps) {
   const { code, type, prompt, required, max_select, options } = question
   const legend = (
     <>
@@ -70,6 +72,20 @@ export function QuestionRenderer({ question, value, onChange, error }: QuestionR
   }
 
   if (type === 'text_short') {
+    if (code === '2.3') {
+      return (
+        <BarrioAutocompleteField
+          name={code}
+          label={legend}
+          value={(value as string) ?? ''}
+          required={required}
+          departamento={(answers?.['2.1:default'] as string) ?? null}
+          ciudad={(answers?.['2.2:default'] as string) ?? null}
+          onChange={onChange}
+          error={error}
+        />
+      )
+    }
     return (
       <TextShortField
         name={code}

components/widgets/barrio-autocomplete-field.tsx

@@ -0,0 +1,141 @@
+'use client'
+import { useState, useEffect, useRef, type ReactNode } from 'react'
+
+type GeoData = Record<string, Record<string, string[]>>
+
+interface BarrioAutocompleteFieldProps {
+  name: string
+  label: ReactNode
+  value: string
+  required: boolean
+  departamento?: string | null
+  ciudad?: string | null
+  onChange: (value: string) => void
+  error?: string
+}
+
+export function BarrioAutocompleteField({
+  name,
+  label,
+  value,
+  required,
+  departamento,
+  ciudad,
+  onChange,
+  error,
+}: BarrioAutocompleteFieldProps) {
+  const [geoData, setGeoData] = useState<GeoData | null>(null)
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(-1)
+
+  useEffect(() => {
+    fetch('/data/geo_paraguay_full.json')
+      .then((r) => r.json())
+      .then(setGeoData)
+      .catch(() => {})
+  }, [])
+
+  const barrios: string[] = (() => {
+    if (!geoData) return []
+    if (departamento && ciudad) {
+      return geoData[departamento]?.[ciudad] ?? []
+    }
+    if (departamento) {
+      return Object.values(geoData[departamento] ?? {}).flat()
+    }
+    return Object.values(geoData).flatMap((d) => Object.values(d).flat())
+  })()
+
+  const query = value.trim().toLowerCase()
+  const suggestions =
+    query.length >= 2
+      ? barrios.filter((b) => b.toLowerCase().includes(query)).slice(0, 10)
+      : []
+
+  function handleInput(v: string) {
+    onChange(v)
+    setOpen(true)
+    setActiveIdx(-1)
+  }
+
+  function select(barrio: string) {
+    onChange(barrio)
+    setOpen(false)
+    setActiveIdx(-1)
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (!open || suggestions.length === 0) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, suggestions.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, -1))
+    } else if (e.key === 'Enter' && activeIdx >= 0) {
+      e.preventDefault()
+      select(suggestions[activeIdx])
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+    }
+  }
+
+  const listId = `${name}-suggestions`
+
+  return (
+    <div className="question-fieldset">
+      <label className="question-legend" htmlFor={name}>
+        {label}
+        {required && <span className="required-mark" aria-hidden="true"> *</span>}
+        {required && <span className="sr-only"> (obligatorio)</span>}
+      </label>
+      <div className="barrio-autocomplete-wrapper">
+        <input
+          type="text"
+          id={name}
+          name={name}
+          value={value}
+          required={required}
+          aria-required={required}
+          aria-describedby={error ? `${name}-error` : undefined}
+          aria-invalid={!!error}
+          aria-autocomplete="list"
+          aria-controls={open && suggestions.length > 0 ? listId : undefined}
+          aria-activedescendant={activeIdx >= 0 ? `${name}-opt-${activeIdx}` : undefined}
+          autoComplete="off"
+          className="text-short-input"
+          onChange={(e) => handleInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => { if (suggestions.length > 0) setOpen(true) }}
+          onBlur={() => setTimeout(() => setOpen(false), 150)}
+        />
+        {open && suggestions.length > 0 && (
+          <ul
+            id={listId}
+            role="listbox"
+            className="barrio-autocomplete-list"
+            aria-label="Sugerencias de barrios"
+          >
+            {suggestions.map((barrio, i) => (
+              <li
+                key={barrio}
+                id={`${name}-opt-${i}`}
+                role="option"
+                aria-selected={i === activeIdx}
+                className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
+                onMouseDown={() => select(barrio)}
+              >
+                {barrio}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {error && (
+        <p role="alert" className="field-error" id={`${name}-error`}>
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}

components/wizard-form.tsx

@@ -277,6 +277,7 @@ export function WizardForm({ survey, schema }: WizardFormProps) {
                 value={currentValue}
                 onChange={handleChange}
                 error={errors[screen.question.code]}
+                answers={state.answers}
               />
             </div>
           </>