# Mockups — E250-C0080 (Especificaciones: Historias + multi-ejemplo)

Mockups estáticos (NO producción) para validar la superficie visual del change antes de promover.
Ambos parten del shell real de `PanelSpecsView.vue` (header, filtros de área, búsqueda, tarjeta-regla
con badge de ID + tooltip de fecha) y aplican el tema DaisyUI `e250`.

Seed común (prueba todos los criterios visuales del contrato en una pantalla):

- **Área Panel — CON Historia:** cabecera de Historia (badge "Historia" + título + narrativa) que agrupa
  DOS reglas. La primera (`SPEC-PAN-04`) tiene **dos ejemplos**; la segunda (`SPEC-PAN-05`) tiene uno.
- **Área Reservas — SIN Historia:** una regla suelta (`SPEC-RES-01`) renderizada en **plano, como hoy**
  → demuestra la degradación con gracia.

## Eje que exploran las variantes: cómo evitar que varios ejemplos saturen la tarjeta (riesgo del contrato)

- **v1-collapse.html** — Primer ejemplo siempre visible; el resto detrás de un `collapse` DaisyUI
  ("Ver N ejemplo(s) más"). Tarjeta compacta por defecto, el operador expande bajo demanda. Una regla con
  un solo ejemplo no muestra ningún control de expansión.
- **v2-numbered-stack.html** — Todos los ejemplos siempre visibles, apilados y numerados ("Ejemplo 1 / 2")
  con un borde izquierdo sutil. Sin interacción: todo a la vista, a costa de tarjetas más altas cuando hay
  muchos ejemplos. Una regla con un solo ejemplo se renderiza como hoy (sin numeración).