# Mockups E250-C0062 — Diagnóstico de coincidencia de horas

Mockups estáticos (HTML + DaisyUI por CDN, tema `e250`) para validar la superficie visual antes de promover el plan. NO son código de producción.

Ambas variantes cubren los mismos criterios con superficie visual del contrato (cabecera Experiencia combinada + back link, rango de días [1–180] default 30, filtro tri-estado default "ambas", desglose por par de opciones, horas VT/TT con estado coincide/no-coincide indicando el lado, y el caso explícito "no se pudo consultar TT" distinto de "sin horas"). El eje que exploran es la **densidad de presentación**:

- **v1-diagnostico-por-dia.html** — Tabla vertical por par de opciones (una `card` + `table table-sm` por par, igual que `PanelMappingView`). Día por fila, columnas Horas VT / Horas TT / Estado. Las horas son badges (verde=coincide, rojo=no-coincide con etiqueta "solo VT"/"solo TT"); el fallo de TT ocupa una fila completa con `alert alert-warning` + botón reintentar. Lectura detallada, lado a lado VT vs TT explícito.

- **v2-grid-calendario.html** — Grid tipo calendario (5 columnas) con el par de opciones activo seleccionado por tabs. Cada día es una celda compacta coloreada por estado global del día, con chips de hora abreviados (▸V / ▸T para el lado presente) y nota de fallo TT en la celda. Pensado para escanear de un vistazo un rango largo (30–180 días) y localizar los días-problema rápido; el detalle lado-a-lado se sacrifica por densidad.

- **v3-resumen-y-tabla.html** — Iteración sobre la base aprobada **v1** (conserva 1:1 el idiom del panel: `card` + `table table-sm` por par, columnas Horas VT / Horas TT / Estado separadas). Añade encima una capa de diagnóstico para rangos largos sin perder la lectura lado-a-lado: (1) una **card de resumen de salud por par de opciones** arriba —días OK / días con desajuste / TT no verificado + mini-barra de salud y atajo "Ver detalle"—, (2) **controles + leyenda pegajosos** (sticky) que no se pierden al hacer scroll, (3) un toggle **"Solo días con problema"** para colapsar el ruido de los días sanos, y (4) un **marcador (dot) de estado en la columna Día** para que los días-problema salten al escanear. Corrige además los hallazgos menores del review sobre v1: badges de leyenda con clases DaisyUI semánticas estables (`badge-warning badge-outline` en vez de la combinación ad-hoc), y la fila de fallo de TT ya **no usa `colspan`** que dejaba la columna Estado vacía —cada columna lleva su contenido y Estado muestra un badge "TT no consultado".

- **v4-tira-de-salud-y-semanas.html** — Iteración sobre **v3** (conserva 1:1 su idiom: card de resumen de salud por par, controles+leyenda sticky, toggle "solo días con problema", columnas Horas VT / Horas TT / Estado separadas, dot de estado en la columna Día, fila de fallo de TT sin colspan ambiguo). El eje que mejora es el **escaneo y la gobernabilidad de rangos largos (hasta 180 días)** más **accesibilidad**: (1) una **tira de salud** por par —una celda por día, color + glifo (✓/✕/?), cada celda enlaza al detalle de su día— que da la "vista de pájaro" de dónde se concentra el daño en todo el rango, algo que los contadores de v3 no localizan en el tiempo; escala a 180 días densificándose por columnas sin crecer en alto. (2) **Detalle agrupado por semana con `<details>`**: las semanas con problemas nacen abiertas y las sanas colapsadas (con su contador en el `summary`, para que no parezca que se oculta nada), haciendo navegable un rango que como tabla plana de 180 filas sería ingobernable; la lectura lado-a-lado VT vs TT se conserva intacta dentro de cada semana. (3) **No depender solo del color**: cada chip de hora y cada badge de estado lleva glifo (✓ coincide / ✕ no coincide / ? TT no consultado / · sin horas) además del color —relevante porque los tokens `success`/`error` del tema e250 no son muy contrastados entre sí. (4) **Navegación rápida entre pares** (chips de ancla en la barra sticky) para saltar directo al par con desajustes cuando hay varios. Jerarquía resumen↔detalle reforzada: el "Ver detalle" del resumen y los chips de navegación apuntan a las anclas de cada par y de cada día-problema.

Todas usan datos de ejemplo que ilustran un día limpio (todas coinciden), un día roto (desajustes en ambos lados), un día con TT sin horas, y un día con fallo de consulta TT.