FE-15 Superficies UI y chrome responsive

FE-15 — Superficies UI y chrome responsive

• Depende de: ARCH-03, ADR-15, FE-01, FE-05.

Objetivo

Anclar la plantilla visual de storefront y el chrome admin antes de checkout y de las FE de producto admin, para que no se copien layouts zinc improvisados.

Alcance

• Tokens OKLCH y fuentes autohospedadas por data-surface (storefront | admin) en frontend/src/styles.css.
• Chrome storefront sticky y responsive: sheet móvil, búsqueda en el header, cuenta, carrito; el visitante no ve «Ir al admin».
• Placeholders de producto (bloque aspect-square + icono Lucide) y grilla 1/2/3.
• CTA de compra sticky en móvil en el detalle.
• Sidebar Qhatu placeholder (Productos, Órdenes, Métricas) para que FE-08 no rediseñe el marco.

Fuera de alcance

• Login admin, guard ADMIN y 403 (FE-08).
• Checkout Mercado Pago Checkout Pro / Yape (FE-06).
• Fotos de producto, tema por tenant (ADR-17), Playwright (FE-12).

Criterios de aceptación

• Host con data-surface="storefront" | "admin"; tokens distintos por superficie.
• El visitante no ve «Ir al admin»; /admin se alcanza por URL.
• En viewport ~375px el chrome no desborda: menú en sheet, carrito visible, targets táctiles.
• En ~1280px: búsqueda en header, grilla de catálogo a 3 columnas, CTA de compra en el flujo del detalle.
• Placeholders de producto con nombre como texto accesible.
• Skip link al contenido; prefers-reduced-motion desactiva animaciones no esenciales.

Evidencia

Cerrado 2026-09-16. data-surface en ambos shells; tokens OKLCH y fuentes autohospedadas (Plus Jakarta Sans / IBM Plex Sans) en styles.css. El visitante ya no ve «Ir al admin». Header sticky con sheet móvil, búsqueda hacia /?q=, carrito y skip link. Catálogo 1/2/3 con placeholder aspect-square. CTA de agregar sticky bajo md. Sidebar Qhatu placeholder para FE-08. Verificado en http://localhost:4200 a 375px y 1280px (home, detalle, carrito, login, admin). 44 tests Vitest en verde.

• file: frontend/src/styles.css
• file: frontend/src/app/layouts/storefront-shell.ts
• file: frontend/src/app/layouts/admin-shell.ts
• file: frontend/src/app/features/catalog/catalog-home.ts
• file: frontend/src/app/features/catalog/product-detail.ts
• file: frontend/src/app/features/catalog/product-placeholder.ts
• file: frontend/src/app/app.config.ts
• test: frontend/src/app/layouts/storefront-shell.spec.ts
• test: frontend/src/app/features/catalog/catalog-home.spec.ts
• test: frontend/src/app/features/catalog/product-detail.spec.ts
• test: frontend/src/app/features/catalog/product-placeholder.spec.ts
• test: frontend/src/app/app.routes.spec.ts

Nota de revisión (2026-09-17)

La salida visual de FE-15 queda superada. ARCH-03 pasó a SUPERSEDED y la spec vigente es ARCH-07; FE-16 rehace la piel (tokens v2, chrome, home, detalle, carrito, auth y admin). FE-15 permanece DONE como historia: el código de FE-01..05 y sus tests siguen siendo la base lógica; FE-16 no reescribe lógica, solo la capa visual.