feat(wizard): ciudad-select filtra por departamento desde geo json [4F]

- CiudadSelectField: autocomplete sobre Object.keys(geoData[depto]),
  mismo patrón que BarrioAutocompleteField (position:fixed, getBoundingClientRect,
  scroll listener, teclado ARIA). Reutiliza clases CSS .barrio-autocomplete-*.
- Limpia el valor de 2.2 via useEffect cuando cambia departamento (2.1),
  usando un ref estable para onChange para evitar dep cíclica.
- QuestionRenderer: branch code==='2.2' dentro del bloque single_choice;
  pasa answers['2.1:default'] como prop departamento.
- Sin cambios al seed, form-engine ni RPCs.

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

components/question-renderer.tsx

@@ -5,6 +5,7 @@ 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'
+import { CiudadSelectField } from './widgets/ciudad-select-field'
 
 interface QuestionRendererProps {
   question: Question
@@ -28,6 +29,19 @@ export function QuestionRenderer({ question, value, onChange, error, answers }:
   )
 
   if (type === 'single_choice' && options) {
+    if (code === '2.2') {
+      return (
+        <CiudadSelectField
+          name={code}
+          label={legend}
+          value={(value as string) ?? ''}
+          required={required}
+          departamento={(answers?.['2.1:default'] as string) ?? null}
+          onChange={onChange}
+          error={error}
+        />
+      )
+    }
     return (
       <RadioGroup
         name={code}

components/widgets/ciudad-select-field.tsx

@@ -0,0 +1,168 @@
+'use client'
+import { useState, useEffect, useRef, type CSSProperties, type ReactNode } from 'react'
+
+type GeoData = Record<string, Record<string, string[]>>
+
+interface CiudadSelectFieldProps {
+  name: string
+  label: ReactNode
+  value: string
+  required: boolean
+  departamento?: string | null
+  onChange: (value: string) => void
+  error?: string
+}
+
+export function CiudadSelectField({
+  name,
+  label,
+  value,
+  required,
+  departamento,
+  onChange,
+  error,
+}: CiudadSelectFieldProps) {
+  const [geoData, setGeoData] = useState<GeoData | null>(null)
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(-1)
+  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties>({})
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Stable ref to always call the latest onChange without it in effect deps
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  const prevDeptoRef = useRef(departamento)
+
+  useEffect(() => {
+    fetch('/data/geo_paraguay_full.json')
+      .then((r) => r.json())
+      .then(setGeoData)
+      .catch(() => {})
+  }, [])
+
+  // Clear city when departamento changes so no orphan value remains
+  useEffect(() => {
+    if (prevDeptoRef.current !== departamento) {
+      onChangeRef.current('')
+      setOpen(false)
+    }
+    prevDeptoRef.current = departamento
+  }, [departamento])
+
+  // Close fixed dropdown on any scroll (input moves, list stays)
+  useEffect(() => {
+    if (!open) return
+    const close = () => setOpen(false)
+    window.addEventListener('scroll', close, { passive: true, capture: true })
+    return () => window.removeEventListener('scroll', close, { capture: true })
+  }, [open])
+
+  function computeDropdownStyle() {
+    if (!inputRef.current) return
+    const rect = inputRef.current.getBoundingClientRect()
+    setDropdownStyle({ top: rect.bottom + 4, left: rect.left, width: rect.width })
+  }
+
+  const ciudades: string[] = (() => {
+    if (!geoData) return []
+    if (departamento) return Object.keys(geoData[departamento] ?? {})
+    return Object.values(geoData).flatMap((d) => Object.keys(d))
+  })()
+
+  const query = value.trim().toLowerCase()
+  const suggestions =
+    query.length >= 2
+      ? ciudades.filter((c) => c.toLowerCase().includes(query)).slice(0, 10)
+      : []
+
+  function handleInput(v: string) {
+    onChange(v)
+    computeDropdownStyle()
+    setOpen(true)
+    setActiveIdx(-1)
+  }
+
+  function select(ciudad: string) {
+    onChange(ciudad)
+    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"
+          ref={inputRef}
+          onChange={(e) => handleInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => { if (suggestions.length > 0) { computeDropdownStyle(); setOpen(true) } }}
+          onBlur={() => setTimeout(() => setOpen(false), 150)}
+        />
+        {open && suggestions.length > 0 && (
+          <ul
+            id={listId}
+            role="listbox"
+            className="barrio-autocomplete-list"
+            aria-label="Sugerencias de ciudades"
+            style={dropdownStyle}
+          >
+            {suggestions.map((ciudad, i) => (
+              <li
+                key={ciudad}
+                id={`${name}-opt-${i}`}
+                role="option"
+                aria-selected={i === activeIdx}
+                className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
+                onMouseDown={() => select(ciudad)}
+              >
+                {ciudad}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {error && (
+        <p role="alert" className="field-error" id={`${name}-error`}>
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}