# review-mockup — E250-C0077

**Aprobada:** `v1-modal-dialog.html`
**Motivo:** el snippet de inserción es contenido secundario que se consulta puntualmente (copiar y pegar una vez), no algo que se compare lado a lado entre experiencias; el modal lo presenta enfocado y reutiliza el patrón `<dialog class="modal">` ya consolidado en `MappingEditorModal.vue` (consistencia de UX y de código a futuro). v2 (inline-expand) es correcto pero introduce un patrón nuevo de fila-detalle que hoy no existe en el panel y empuja la tabla hacia abajo; su ventaja —comparar varias a la vez— no la pide el contrato. Ambas variantes comparten un defecto de tema (ver findings) que debe corregirse en `build-frontend`, pero no es decisorio entre ellas.

## Fidelidad al panel real (ambas)

Verificado contra `PanelView.vue` y `PanelMappingView.vue`:

- Sidebar (marca «El Cardón» / «Panel de reservas», grupos «Operación» + «Desarrollo» con badge DEV, item activo `bg-primary text-primary-content`, footer con email + «Salir»), breadcrumb «Operación / Experiencias» y `<main class="flex-1 p-6 overflow-auto">` replicados con fidelidad alta.
- La tabla copia exactamente la estructura real: mismas columnas (`Producto Volcano Teide` / `Producto TuriTop` / `Opciones` / `Unidades` / `Estado`), `table table-sm`, filas `hover`, `VT · id` / `TT · id` en `font-mono`, `badge-sm` success/warning para Completo/Incompleto, y acciones `btn btn-ghost btn-xs` («Diagnosticar horas», «Editar») en `flex justify-end gap-1`. El botón nuevo se añade en la misma celda de acciones, coherente con el patrón existente.
- Rename a «Experiencias» reflejado en nav, breadcrumb, título, intro y CTA «Nueva experiencia». Correcto (la superficie i18n/ruta/`name` no es visual y va por TDD).

## Cobertura del contrato (ambas)

- Acción por experiencia para ver el código de inserción. ✅
- Snippet = `<div data-turitop-widget data-product-id="…" data-lang="es"></div>` + `<script src="…/embed.js" async>` con `data-product-id` = `vt_product_id` (715 / 902). ✅ Sólo variante embed.js (sin iframe ni selector de pestañas). ✅
- Origen `https://e250dev.turitop.net` — dominio dev real correcto (no `e250.turitopdev.es`). ✅
- Copiar con un gesto + feedback visual (botón vira a `btn-success` «Copiado ✓» 2 s). ✅
- Experiencia incompleta (sin `vt_product_id`): acción **deshabilitada** con tooltip explicativo, no genera snippet inválido. ✅
- Badge «MOCKUP — no producción» + comentario de cabecera presentes en ambas. ✅

## Findings por variante

### v1-modal-dialog.html (aprobada)
- [ ] **Bloqueante de tema (compartido con v2): el tema `e250` no se aplica.** El `primary` se renderiza con el morado por defecto de DaisyUI en lugar del verde de marca `#2eac66` (verificado por captura). Causa: el archivo carga el CSS **precompilado** `daisyui@4.12.10/dist/full.min.css` desde CDN, cuyos temas ya vienen horneados; el override `tailwind.config.daisyui.themes` inline sólo surte efecto con el CDN JIT de Tailwind compilando DaisyUI, no con un stylesheet prebuilt → `data-theme="e250"` no resuelve y cae al tema por defecto. Los `badge-success`/`badge-warning` sí salen verde/ámbar por casualidad de cercanía, pero el color de marca dominante es erróneo. Fix: o bien no es relevante para el código real (el SFC hereda el tema del proyecto vía el build de Vite, no del CDN), pero **el mockup debería verse con el verde e250 para validar la superficie** — usar el CDN JIT de Tailwind con el plugin DaisyUI configurable, o copiar el bloque `[data-theme=e250]{…}` como CSS inline con los tokens reales.
- [ ] Menor: línea 28 carga `full.min.css` por segunda vez como `<script src=…>` (ya está como `<link>` en línea 11). Inocuo pero sobra; quitar.
- [ ] Menor (no bloqueante, ya marcado en el propio mockup): el selector de idioma del widget (badges `es`/`en`) no está en el contrato. Es una decisión de producto pendiente; el snippet hardcodea `data-lang="es"`. Dejar fuera de alcance salvo confirmación, para no inflar el change.
- ✅ DaisyUI semántico (`modal`, `modal-box`, `modal-action`, `modal-backdrop`, `btn`, `card`, `badge`, `tooltip`), sin librería UI ajena ni CSS global improvisado. Patrón `<dialog class="modal">` idéntico al de `MappingEditorModal.vue`.

### v2-inline-expand.html
- [ ] **Mismo bloqueante de tema** que v1 (idéntica causa: `full.min.css` precompilado + override inline inerte).
- [ ] El patrón fila-detalle inline (`<tr><td colspan="6">…`) es nuevo en el panel: ningún otro listado lo usa hoy. No es incorrecto, pero diverge del repertorio actual (donde el detalle/edición vive en modal). Si se eligiera v2 habría que asumir esa novedad de UX conscientemente.
- ✅ DaisyUI semántico y cobertura de contrato equivalentes a v1; copia el bloque de código y el feedback de copiado por fila correctamente.

## Veredicto

**aprobado: `v1-modal-dialog.html`**, condicionado a corregir en `build-frontend` el render del tema `e250` (en el producto real el SFC hereda el tema del build de Vite, así que el verde de marca aplicará; el defecto es del andamiaje CDN del mockup, no del diseño). Findings menores (doble carga de CSS, selector de idioma fuera de alcance salvo confirmación) no bloquean la promoción.