# review-mockup — E250-C0110

**Aprobada:** `v2-stacked-cards.html`
**Motivo:** cubre todos los criterios de aceptación con superficie visual y, en los listados densos, reordena cada registro en tarjeta apilada — cero scroll lateral (ni de página ni de contenedor) y lectura de un vistazo en móvil. Es además coherente con el hermano E250-C0108 (panel de operador), cuyo `REVIEW.md` aprobó las tarjetas apiladas como default: misma decisión en las dos superficies con shell. v1 (scroll en contenedor) es una variante válida y cumple los criterios, pero al renderizar su tabla de «Usuarios y super-admins» a 375px las membresías/acciones quedan comprimidas y solapadas dentro del `overflow-x-auto` — precisamente la fricción que las tarjetas evitan.

Verificado con render real (tema `e250` servido por HTTP, capturas a 375px y ≥1024px): en ambas variantes los tokens DaisyUI del tema del cliente pintan correctamente (verde `primary`/`secondary`), idénticos al `tailwind.config.js` real del widget.

## Cobertura de criterios (comprobada en ambas variantes)

- ✅ **Shell coherente con el real** (`PanelIntranetView.vue`): marca `secondary` (verde `#02703c`) con escudo 🛡️, badge `STAFF-ONLY` (`bg-secondary/15 text-secondary`), enlace activo `bg-primary text-primary-content` + `aria-current="page"`, sidebar `w-60`, footer con email (`staff@turitop.com`) + «Cerrar sesión». Coincide 1:1 con el markup del SFC.
- ✅ **Drawer <1024px**: cabecera con hamburguesa (`aria-label`), drawer superpuesto con backdrop (`bg-black/40`, título indicando que clic/Escape cierra sin navegar), y botón ✕. Sidebar permanente ≥1024px (regresión cero, tabla clásica en escritorio).
- ✅ **Nav de dos ítems**: «Clientes» (🏢) y «Usuarios y super-admins» (👥), bajo el grupo «Plataforma».
- ✅ **Sin scroll horizontal de página** a 375px/≥1024px; contenido a ancho completo cuando la sidebar se colapsa.
- ✅ **Objetivos táctiles ≥40px** en móvil (`min-h-10 h-10` en hamburguesa, enlaces de nav, botones e inputs).
- ✅ **Formularios a ancho completo** (invitar/promover super-admin): en v2 `input`+`btn` con `w-full`; en v1 con `flex-1`.
- ✅ **DaisyUI semántico** (`btn`, `card`, `badge`, `alert`, `input`, `table`), sin librería UI ajena; tema `data-theme="e250"`.
- ✅ **Marca de mockup**: banner en comentario HTML + `badge badge-warning` «MOCKUP — no producción» visible arriba.

## Findings por variante

### v1-scroll-container.html
- [ ] Menor / motivo del descarte como default: la tabla de «Usuarios y super-admins» a 375px comprime la columna de membresías y las acciones dentro del `overflow-x-auto` (badges solapados). Válida para tablas de pocas columnas; para estos listados la técnica de tarjetas es más legible.
- ✅ Shell, tema, DaisyUI semántico, banner de mockup y objetivos táctiles correctos.

### v2-stacked-cards.html (aprobada)
- ✅ Tema real, DaisyUI semántico, banner de mockup, drawer+backdrop, marca `secondary`, dos ítems, email+logout, tarjetas apiladas sin scroll lateral, tabla clásica en escritorio.
- [ ] Menor (no bloqueante, para `build-frontend`): en la barra de acciones de la home a 375px (panel A) la etiqueta del botón «Usuarios / super-admins» envuelve a dos líneas por el `flex-1 min-w-[8rem]`; el implementador puede acortar el texto o dejar el botón a ancho completo para evitar el wrap.

## Veredicto
aprobado: `v2-stacked-cards.html` (con el ajuste menor del wrap del botón de acciones). v1 queda como referencia válida de la técnica de scroll-en-contenedor para tablas estrechas.