# review-mockup — E250-C0088

**Aprobada:** `v2-radio-cards.html`
**Motivo:** las dos tarjetas de radio autoexplicativas comunican que la elección de estrategia es **consecuente** (rige diagnóstico + reserva espejada real), no cosmética — exactamente lo que pide la historia del contrato; v1 (tabs segmentados) deja ambas opciones con peso compacto e igual y delega la explicación a un hint de una línea, que se queda corto para una decisión con efecto en la reserva real. Además v2 es la única que incluye el `alert-warning` del caso "minutos ausente/inválido", criterio de aceptación explícito.

> Nota de método: el browser del MCP de Playwright estaba ocupado por otra sesión ("Browser is already in use"), así que la review se hizo sobre el **HTML estático** comparado contra el SFC real `packages/widget/src/views/ExperienceEditorModal.vue`. La coherencia estructural se verificó clase a clase (ver más abajo); no hubo render visual en vivo.

## Coherencia con el shell real (ambas variantes)

Verificado contra `ExperienceEditorModal.vue`. Coinciden 1-a-1 con el modal real:
- `modal-box max-w-3xl`, cabecera `font-semibold text-lg` + botón cancelar `btn btn-sm btn-circle btn-ghost`, hint `text-xs text-base-content/50 mb-4`.
- Grid de productos `grid-cols-[1fr_auto_1fr] gap-4 items-start` con separador `↔` `text-base-content/30`, labels `text-[11px] font-semibold uppercase tracking-wider text-base-content/40`, `select select-bordered select-sm`.
- `divider my-2 text-xs text-base-content/40`, tarjeta de opción `rounded-lg border border-base-300 p-4`, `badge badge-ghost badge-sm`.
- Patrón de aviso inline `alert alert-warning py-2 px-3 text-sm mt-4` (idéntico al guard de incompleto real).
- `modal-action mt-4` con `btn btn-ghost btn-sm` + `btn btn-primary btn-sm`.
- Tema `e250` horneado inline con los tokens reales (`primary #2eac66`, etc.) y `data-theme="e250"`. ✅

Los tres estados del escalonado están bien modelados en ambas (progressive disclosure correcto): exacta → sólo la elección; cercanía → revela el toggle de tolerancia; tolerancia ON → revela el campo de minutos con `label-text-alt text-error` "obligatorio". El campo numérico no aparece con la tolerancia apagada, conforme al criterio.

## Findings por variante

### v1-segmented.html
- [ ] **Bloqueante de intención (menor de UX, no de marca):** la elección como `tabs tabs-boxed` da a las dos estrategias peso compacto e igual con sólo un hint de una línea. La historia del contrato insiste en que la decisión gobierna diagnóstico y reserva espejada real — v2 lo comunica mejor con descripción por opción. No descarta v1, pero es el motivo de no aprobarla.
- [ ] **DaisyUI redundante:** los tabs activos llevan `class="tab tab-active bg-primary text-primary-content"`. `tab-active` ya estiliza el tab activo en DaisyUI; el `bg-primary text-primary-content` crudo encima es duplicado y puede divergir del tema. Si se reusara v1, quitar el override manual.
- ✅ Banner/comentario de mockup presente; badge "MOCKUP — no producción" en el top.
- [ ] No incluye el estado de error de minutos inválido (sí lo tiene v2) — criterio de aceptación.

### v2-radio-cards.html (aprobada)
- ✅ Tema real `e250`, DaisyUI semántico (`radio radio-primary`, `toggle toggle-primary`, `input input-bordered`, `alert alert-warning`), banner + badge de mockup presentes en el top.
- ✅ Cada estrategia se autoexplica en su tarjeta → la decisión queda clara antes de elegir.
- ✅ Incluye el `alert-warning` "Indica una tolerancia máxima en minutos (entero positivo) para poder guardar." (criterio de minutos inválido).
- [ ] **Menor (para build-frontend, no bloqueante):** las tarjetas usan `rounded-lg border-2 border-primary bg-primary/5` para el seleccionado — patrón de tarjeta-radio no estándar de DaisyUI pero legítimo (Tailwind sobre tokens del tema, sin CSS global ajeno). Al implementar, considerar que el borde activo derive del estado `:has(:checked)` o del binding Vue, no hardcodeado por estado como en el mockup (que apila los tres estados para revisión).
- [ ] **Menor:** el `alert-warning` de error va asociado conceptualmente al estado 3, pero en el mockup cuelga al final del modal (tras apilar los tres estados). En producción debe renderizarse junto al campo de minutos del único estado visible. Aclaración de layout para build-frontend, no defecto del mockup.

## Veredicto
aprobado: `v2-radio-cards.html` — con los dos ajustes menores anotados para `build-frontend` (derivar el resaltado de tarjeta del estado checked; ubicar el alert de minutos junto al campo en el estado visible). Ningún finding bloqueante de marca ni de coherencia; v1 queda descartada por comunicar peor la consecuencia de la elección y por no cubrir el estado de error de minutos.