FE-16 Reset visual storefront y admin

FE-16 — Reset visual storefront y admin

• Depende de: ADR-21, ARCH-07, FE-15.

Objetivo

Rehacer la capa visual de la SPA sobre ARCH-07, reutilizando la lógica de FE-01..05. Sustituye la salida visual de FE-15. Las rutas de descubrimiento (/ vs /catalogo) las gobiernan US-01 y ARCH-05; esta tarea no las inventa, las pinta.

Alcance hecho (2026-09-20)

• Theme Engine y preset modern: data-surface en storefront y admin; data-store en el shell de tienda.
• Tokens v2 en frontend/src/styles.css por superficie.
• Chrome storefront (header, panel de carrito) y admin shell (home /admin) sobre esa piel.
• Home, catálogo /catalogo, detalle, carrito, login y registro ya no usan la piel zinc como sistema vigente.

Alcance pendiente

• Cerrar criterios de viewport (~375px / ~1280px), skip link, prefers-reduced-motion y evidencia formal de tests, con el bucle de Playwright MCP de abajo.
• Admin: solo la home está cableada; login/guard (FE-08) y pantallas de catálogo/órdenes/métricas no entran aquí.

Fuera de alcance

• Checkout Mercado Pago Checkout Pro (FE-06): esta tarea no pinta /pago.
• Login admin, guard y 403 (FE-08).
• Fotos de producto, variantes y tema por tenant persistido (MVP_1).
• Constructor de bloques y CMS (MVP_2/MVP_3).
• Cambios de lógica de carrito, auth y API: se reutilizan (CartData, AuthSession, guards, signals). La separación home/catálogo es evidencia de FE-03, no un restyle.
• El spec E2E del flujo de compra (FE-12). Esta tarea fija la piel, no el camino hasta PAID.

Criterios de aceptación

• data-surface en ambos shells; tokens v2 distintos por superficie; el preset se aplica por data-store.
• Home, detalle, carrito, login y admin usan el sistema v2; sin restos de la piel zinc anterior.
• En ~375px el chrome no desborda; targets táctiles; foco visible; skip link.
• En ~1280px: búsqueda en header, catálogo a 3 columnas, CTA de compra en flujo.
• prefers-reduced-motion desactiva animaciones no esenciales.
• Los tests existentes de FE-03/04/05/15 quedan en verde (ajustar solo lo que dependa de la piel).

Revisión con Playwright MCP

La práctica vive en TEST-01. Aquí se aplica a la piel vigente.

Por superficie (/, /catalogo, /productos/:id, panel de carrito, login, registro, home /admin) y por viewport (~375px y ~1280px):

1. El snapshot de accesibilidad comprueba nombres, roles, skip link y foco. prefers-reduced-motion se comprueba en el árbol y en los estilos, porque una captura estática no lo muestra.
2. La captura comprueba composición contra ARCH-07: aire de tienda, CTA protagonista, densidad distinta en admin, sin desborde y sin piel zinc.
3. El criterio sigue abierto si falla cualquiera de las dos. La sesión MCP no es la evidencia de DONE; lo son estos criterios y los tests en verde.

Orden de trabajo (2026-09-17)

• Primera FE tras el reset; habilita FE-06 (checkout) y FE-08 (admin), que ya dependen de ella.
• No reabre FE-03/04/05/15: su lógica y evidencia siguen válidas; solo reemplaza la capa visual. FE-03 documenta /catalogo.
• Fotos de producto y variantes siguen en MVP_1 (ADR+DS); aquí solo placeholders.

Evidencia

Parcial: Theme Engine, data-surface/data-store y specs de shells. Falta el cierre de viewport, motion y el paquete de tests como DoD.