# E250-C0108 — Mockups del panel de operador responsive

Mockups estáticos (NO producción) para validar la superficie visual antes de promover el plan.
El shell reutiliza fielmente `PanelView.vue`: marca «El Cardón», grupos de navegación
**Operación / Plataforma / Desarrollo** (con sus mismos ítems e iconos), banda de staff-mode,
breadcrumb, y footer con email + «Cerrar sesión».

Ambas variantes muestran el **mismo comportamiento de navegación** — el eje que exploran es
distinto: **cómo se adapta una tabla densa en móvil**. La navegación responsive no está a debate;
la técnica de tabla, sí (el contrato exige «sin recorte», no una técnica concreta).

## Cómo leer los mockups

Cada `.html` es una sola página con **marcos de dispositivo de ancho fijo** (375 px móvil,
~520/768 px tablet, 1200 px escritorio). Cada marco es un viewport independiente, así el
revisor ve todos los estados responsive sin redimensionar la ventana. Los estados del drawer
(cerrado / abierto) se muestran en marcos separados porque ambos ocurren al mismo ancho.

## Variantes

- **v1-scroll-container.html** — Tabla densa que **conserva su forma de tabla** y se desplaza
  **horizontalmente dentro de su propio contenedor** (`overflow-x-auto`), con indicador visual de
  scroll. La página nunca hace scroll lateral. Ventaja: fidelidad 1:1 con el escritorio (mismas
  columnas); mínimo trabajo por vista. Coste: el operador desliza para ver columnas ocultas.

- **v2-stacked-cards.html** — En móvil cada fila se **reordena en una tarjeta apilada** con pares
  etiqueta/valor; **cero scroll horizontal** (ni de página ni de contenedor). En escritorio vuelve
  a ser tabla. Ventaja: lectura óptima en pulgar, jerarquía por tarjeta. Coste: markup específico
  por vista (dos presentaciones que mantener).

## Recorrido común a ambas (criterios cubiertos)

- **A · Móvil, drawer cerrado** — cabecera con hamburguesa + marca; contenido a ancho completo; sin scroll horizontal de página.
- **B · Móvil, drawer abierto** — navegación superpuesta con backdrop, grupos completos, banda staff-mode arriba, footer email+logout dentro del drawer.
- **C · Tabla densa a 375 px** — «Logs API» con la técnica propia de cada variante.
- **D · Escritorio ≥1024 px** — sidebar permanente, sin hamburguesa: regresión cero.
- Objetivos táctiles ≥40 px (`min-h-10`) en controles de móvil; barras de filtros/acciones que se reflujan (`flex-wrap`).

## Nota de decisión pendiente para el revisor

Es válido **mezclar** ambas técnicas por vista: p.ej. tarjetas apiladas (v2) para «Logs API»,
«Reservas» y «Email log» (muchas columnas), y scroll-en-contenedor (v1) para tablas más estrechas
como «Usuarios». `review-mockup` puede aprobar una variante como default y anotar excepciones por vista.