# Mockups — E250-C0109 · Widget de reserva responsive

Mockups estáticos (DaisyUI 4 vía CDN, tema `e250` en OKLCH), NO código de producción.
Abrir con doble clic en el navegador. Cada superficie se muestra a su ancho objetivo
(320 / 375 / 768 px) dentro del shell real del widget (`max-w-2xl · card · card-body`).

Las dos variantes son **idénticas salvo en el StepIndicator móvil** — ese es el único eje
de diseño con alternativas reales; el resto del trabajo responsive (calendario, steppers,
resumen, pago) es la misma solución en ambas.

| Variante | StepIndicator en móvil |
|---|---|
| `v1-reflow.html` | Conserva la fila de números DaisyUI y **envuelve** (`flex-wrap`) a dos filas; el paso activo lleva anillo. Cambio mínimo sobre el componente actual. |
| `v2-compact.html` | En móvil **colapsa** a una línea «Paso N de 8 · nombre» + barra `progress`; libera altura vertical y elimina todo riesgo de desbordamiento. En tablet reaparece la fila completa. |

## Qué demuestra cada mockup (común a ambas variantes)

1. **CalendarStep @ 320px** — rejilla `grid-cols-7 gap-1` sin desbordar; cada día deja
   `aspect-square` (que a 320px daría ~30px) por `min-h-[44px]` para tacto cómodo;
   `card-body` baja de `p-6` a `p-4` en móvil para recuperar ancho útil.
2. **ParticipantsStep / OptionStep @ 375px** — steppers `join` a `min-h-[40px]`, fila con
   `flex-wrap` (los controles bajan de línea antes de recortarse); tarjetas de opción con
   precio `whitespace-nowrap shrink-0` y título `min-w-0`.
3. **SummaryStep @ 375px** — desglose `flex justify-between` con `min-w-0 truncate` +
   importe `shrink-0 tabular-nums`; email largo con `break-all`. Sin scroll horizontal.
4. **PaymentStep @ 375px** — placeholder del iframe de Stripe en contenedor
   `w-full max-w-full` que no lo recorta; botón de confirmar `btn-block` alcanzable;
   contador ⏱ del header con `shrink-0` para no colisionar con el título.
5. **StepIndicator móvil** — la diferencia entre variantes (ver tabla).

## Decisión pendiente para `review-mockup`

Elegir entre reflow (v1, cambio mínimo) y compacto (v2, más limpio y a prueba de
desbordamiento pero introduce un patrón nuevo de progreso).