# review-mockup — E250-C0095

**Aprobada:** `v2-lista-rica-estados.html`
**Motivo:** es la única variante que cubre la superficie visual completa de SPEC-PAN-10 — los tres estados que el contrato exige (sin selección → invitación; experiencia seleccionada y resaltada → formulario inline; sin experiencias creadas → listado vacío legible). Su listado «rico» (badge Completa/Incompleta + conteo de opciones/tarifas) no inventa nada: reproduce campos reales del store de Experiencias (`summary.complete`, `optionCount`, `unitCount`), así que da continuidad con la pestaña Experiencias actual sin salirse de alcance. v1 es correcta y más limpia, pero sólo muestra el caso nominal (selección activa) y omite los estados vacío/invitación, que son criterios de aceptación con superficie visual, no opcionales.

## Findings por variante

### v1-lista-simple.html
- ✅ Tema `e250` (tokens idénticos a `tailwind.config.js`), shell fiel a `PanelView.vue` (aside nav + header breadcrumb), detail fiel a `PanelBookingView.vue` (ProductHeader + `steps steps-horizontal` + card-body + footer ghost/primary). DaisyUI semántico (`menu`, `card`, `steps`, `btn`, `badge`). Banner de mockup en comentario HTML + badge «MOCKUP — no producción» en el header.
- ✅ Accesibilidad del listado: `role="listbox"`/`role="option"`, `aria-selected`, `tabindex="0"`, ítem activo resaltado en `bg-primary`.
- [ ] Bloqueante para aprobarla como referencia: no muestra el estado «sin selección» (invitación a elegir) ni el «sin experiencias creadas». Quedan sin cobertura visual dos criterios de aceptación. Sirve como referencia del listado minimalista, no como variante completa.

### v2-lista-rica-estados.html (aprobada)
- ✅ Mismo tema, mismo shell fiel y mismo detail fiel que v1; DaisyUI semántico (`card`, `badge badge-success`/`badge-warning`, `alert`, `join`, `steps`, `btn`). Banner de mockup + badge presentes.
- ✅ Cubre los tres estados de SPEC-PAN-10 apilados (A: invitación sin selección; B: seleccionada+resaltada con formulario inline en paso «Participantes»; C: listado vacío legible vía `alert` + invitación a la derecha).
- ✅ Listado rico anclado en datos reales (completitud + conteos del store de mappings), coherente con la tabla de la pestaña Experiencias (SPEC-PAN-06).
- ✅ Accesibilidad: `role="listbox"`/`role="option"`, `aria-selected`, `tabindex="0"`; ítem activo en `bg-primary` con badge invertido (`bg-primary-content/20`) legible sobre fondo primario.
- [ ] Menor (para build-frontend, no bloqueante): el badge «MOCKUP — no producción» va en el header, que en el mockup queda fijo arriba — ok; verificar que al implementar el listado lateral conviva con el `<main>` real (`p-6 overflow-auto`) sin doble scroll. El listado debe permanecer visible al cambiar de experiencia (criterio del contrato): el mockup lo insinúa pero es estático; el comportamiento «recarga sin volver atrás» es responsabilidad del store en implementación.
- [ ] Menor: el ancho del master pasa de `w-72` (v1) a `w-80` (v2) por el contenido extra; razonable, validar que no comprime el detail en viewports estrechos.

## Veredicto
aprobado: `v2-lista-rica-estados.html` (con los ajustes menores anotados, todos para la fase de build-frontend; ninguno bloquea la promoción).