# Mockups — E250-C0086 (Una experiencia por producto de TuriTop)

Una sola variante: las dos superficies del change (listado + modal) son un concepto
visual conectado y el contrato prescribe la orientación exacta, así que no hay un eje
de diseño alternativo que explorar.

## `v1-tt-primary.html`

Reproduce el shell real de `/panel/experiences` (theme `e250`, mismas clases DaisyUI que
`PanelExperiencesView.vue` y `ExperienceEditorModal.vue`) mostrando los dos cambios:

- **Listado:** N experiencias, una por producto de TuriTop. El **nombre primario de cada
  fila es el producto de TuriTop**; el producto de Volcano Teide pasa a columna secundaria.
  Estado realista: **dos experiencias completas respaldadas por el mismo VT "Camino de Masca"**
  (`vt_masca_01`) + una tercera incompleta (badge warning, sin botón de embed). Columnas como
  hoy: nombre (TT) · VT (secundario) · opciones · unidades · estado · acciones (embed /
  diagnosticar / editar).
- **Modal:** orden **invertido** — TuriTop a la **izquierda** (fuente del nombre), Volcano
  Teide a la **derecha**, `↔` en medio. El selector de TuriTop sugiere un **catálogo de ~50
  productos** de los que sólo 3 están integrados. Las filas de emparejado opción/unidad siguen
  la misma orientación (opción/unidad TT a la izquierda, VT a la derecha). Incluye el **aviso de
  identidad duplicada** (producto TT ya usado por otra experiencia) que pide el criterio de
  unicidad por producto de TuriTop.