📸 Snapshot congelado del 2026-08-07. Copia de solo lectura de la galería de paridad en esa fecha: las capturas de la app están congeladas; los frames de Figma se comparten con la galería viva. La versión que evoluciona está en /design/parity/.
Qué es esto: una galería lado a lado del diseño en Figma y la pantalla real de
terminales-web, organizada por historia de usuario
y, al final, por capa del design system (átomos · moléculas · organismos).
Para qué sirve:
Ver de un vistazo en qué difiere la app del diseño, para poder priorizar los ajustes.
Mostrar avance al cliente — cada historia de usuario con sus pantallas reales.
Tener un lugar donde anotar observaciones por pantalla y por componente.
Plan de remediación: el orden de ataque para cerrar estos gaps con el mínimo de trabajo
está en remediation-plan — se arregla por capas (tokens → theme →
átomos → patrones), no pantalla por pantalla.
Estado: las columnas Notas están vacías a propósito — la anotación de diferencias es el
siguiente paso. Las celdas marcadas ⚠️ Falta … señalan trabajo pendiente: o falta exportar el
render de Figma, o falta capturar la pantalla.
Nombre de captura = la ruta del App Router con / → -, sin route-groups ni corchetes.
src/app/admin/pos/stock-levels/adjust/screenshot.png → screenshots/admin-pos-stock-levels-adjust.png.
Nombre de render = figma-<slug>.png, tal como se exporta desde design/web/.
⚠️ Falta diseño = no hay render de Figma exportado para ese frame.
⚠️ Falta captura = la pantalla no se capturó (es un modal/estado, o la ruta no existe).
pnpmdocs:parity# reconstruye este README con lo que haya en disco
pnpm screenshots levanta su propio servidor de producción en el puerto 4000
(next build && next start sobre un distDir propio, .next-screenshots), con
NEXT_PUBLIC_USE_MOCKS=true y todos los feature flags en ON. Eso significa que:
no pisa un pnpm dev que ya tengas abierto en el 3000;
ninguna ruta cae en notFound() por un flag apagado, así que la galería no tiene huecos;
los datos son los fixtures mock, iguales en cada corrida.
Subconjuntos: pnpm screenshots --grep admin-pos (el filtro matchea el nombre del archivo).
Para reusar un servidor que ya levantaste: E2E_BASE_URL=http://localhost:4000 pnpm screenshots.
La sección Notas de cada pantalla es para escribir a mano — es el objetivo del documento.
Hay dos formas de hacerlo, y las dos terminan en el mismo markdown:
En este archivo, editando la celda directamente.
Desde el navegador, con el sitio de documentación corriendo en local
(cd terminales-solution/docs-site && pnpm dev): cada bloque de Notas muestra un botón
✏️ Editar nota que abre un textarea y, al guardar, escribe en este archivo. Es la forma
cómoda de anotar, porque tenés las capturas a tamaño grande al lado mientras escribís.
Sólo existe en pnpm dev — el sitio publicado es estático y de sólo lectura.
En ambos casos pnpm docs:parityconserva lo que escribas: antes de reescribir lee este
archivo y recupera toda nota que no sea el placeholder, reinsertándola bajo el mismo encabezado.
El ciclo es:
pnpm screenshots → cambian las imágenes
editás la celda Notas → tu observación, en markdown
pnpm docs:parity → se reconstruyen las tablas, tus notas sobreviven
Una nota se identifica por su encabezado ####. Si renombrás un encabezado, su nota queda
huérfana: el script la imprime en consola al terminar en vez de perderla en silencio.
Este documento se publica en el sitio Starlight (terminales-solution/docs-site) como
/design/parity/. El sitio lo lee desde este repo —no hay copia— vía externalSources en
docs-site/publish.config.mjs: copia el markdown y sus imágenes a public/design/parity/ y
reescribe las rutas relativas a absolutas. O sea que el markdown de acá sigue siendo la única
fuente de verdad, y las notas que escribas aparecen en el HTML en el próximo pnpm build del
sitio.
Para ver las capturas en grande en el sitio hay dos ayudas:
⛶ Modo amplio — un botón arriba del todo que oculta la navegación y el panel derecho; las
imágenes pasan de ~345 px a ~610 px de ancho. La preferencia se recuerda.
Click en cualquier captura — abre el PNG original a tamaño completo (también funciona en
GitHub).
Qué captura — la lista vive en e2e/screenshots/targets.ts, una entrada por ruta más un
array dialogs para los modales de cada pantalla (varios frames de Figma —W21, W30, W33, W39— son
diálogos en la app, no páginas, y un barrido solo-de-rutas los dejaría siempre vacíos). Los
componentes del design system salen de /playground vía e2e/screenshots/playground.spec.ts,
que lee el registro de showcases, así que agregar un showcase lo captura solo.
Agregar una pantalla = agregar una entrada en targets.ts; nada más hay que tocar.
Sobre el determinismo: en dos corridas independientes, 157 de 167 capturas salieron
byte-idénticas. Las demás cambian unos pocos bytes con las mismas dimensiones (el showcase de
Skeleton anima con animation="wave" de MUI, cuyos keyframes CSS ignoran la emulación de
prefers-reduced-motion; el resto es antialiasing de fuentes). O sea: git diff sobre esta
carpeta es buena señal, pero antes de concluir que la UI cambió, mirá la imagen.
Auditoría automatizada que comparó cada render de Figma contra su captura de la app, midiendo los
colores con un muestreador de píxeles. Son defectos de sistema: se arreglan una vez en el token
o en el componente base y desaparecen de decenas de pantallas.
Estado (2026-07-23) — remediación fases 0–2 aplicada y re-auditada. Se cableó DESIGN.md como
fuente de verdad (`scripts/generate-tokens.mjs`), se reescribió el theme MUI con ~15 overrides,
se corrigieron los átomos y se promovieron a props reales los hacks `sx` de los showcases
(BalanceCard tone, IconButton, ProviderTile, ListRow, SummaryRow, Toast, geometría del Checkbox,
default del Icon). La re-auditoría contra las capturas nuevas mueve el veredicto de
96 ❌ / 7 ⚠️ / 0 ✅ (pre-fix) a 37 ❌ / 58 ⚠️ / 6 ✅ — la mayoría de
las pantallas pasó de “importante” a “menor”. Las notas por pantalla de abajo YA reflejan el
estado post-remediación.
Residuo tras la remediación (backlog para la próxima pasada)
Estado (2026-07-23, re-verificado contra el código). La lista original de 11 residuos sistémicos está casi toda resuelta: la remediación de fases 0–2 más los batches atómicos cablearon los fixes en el theme/átomos y cascadearon a las pantallas. Cada ítem se re-verificó con grep del archivo culpable citado (ver playbook §7, las notas caducan entre batches). Estado real, con evidencia:
✅ Resueltos y verificados en código
Patrón de selección — Chip activo = tinte primary.light #E6EEFA + texto primary.main (src/ui/atoms/Chip/index.tsx:58-61); SegmentedControl usa thumb blanco background.paper sobre track (SegmentedControl/index.tsx:83-89), patrón correcto del diseño. Cerrado.
Badges de estado — StatusBadge (soft por rol) adoptado en 37 puntos de src/app; los culpables citados ya migraron: SalesOrderDetail.tsx:86-87 y ProductList.tsx:95-96 usan StatusBadge (los Chip restantes en ProductList son contadores numéricos). Cerrado.
Nav/lista seleccionado — theme.ts:84 fija action.selected = primary.soft (#E6EEFA) y SideNav lo consume en su estado Mui-selected. Cerrado.
Borde del Button outlined — el slot outlined existe en MuiButton (theme.ts:225), 1px sólido primary.main. Cerrado.
Paradigma de etiqueta — FormField renderiza label estático arriba (Typography como label, FormField/index.tsx:36-49) + placeholder gris, no floating label. Cerrado.
CTA tonal/soft — HeldOrderCard usa Button variant tonal (HeldOrderCard/index.tsx:118-119), no contained sólido. Cerrado.
Fecha en español — src/core/utils.ts:20 llama dayjs.locale(es) y el formateo per-fecha usa .locale(es) (utils.ts:307). Cerrado.
Iconos de adorno — theme.ts:74-76 apunta action.active al gris frío #9CA3AF, no al #757575 default. Cerrado.
White-label del avatar — WhiteLabelThemeProvider pasa light = lighten(main, 0.9) explícito a augmentColor, que para #0052CC resuelve a #E6EEFA (WhiteLabelThemeProvider.tsx:58-62). Cerrado.
Abierto (residuo real)
Migración de tablas admin — ~90% hecho: 31 pantallas ya usan el DataTable compartido (toolbar FilterBar + Pagination numerada + selección por fila) y 0 usan ya TablePagination de MUI. Quedan 4 archivos con tabla MUI cruda: PosStock/StockLevelList.tsx, PosStock/StockMovementList.tsx, Reports/ZHistoryTable.tsx, Reports/ReportView.tsx — candidatos a migrar (algunas vistas de reporte pueden querer layout propio; evaluar caso por caso).
Iconografía divergente (cosmético) — glifos outlined de MUI y chevrons donde el diseño usa glifos rellenos/triángulos, y glifos desnudos donde el diseño los envuelve en contenedor cuadrado tintado #F0F4F8/#E6EEFA — Banner, Toast, KPI Stat Card, Empty State, FAB, TenderPicker. Baja prioridad.
Implicación: varias notas por pantalla de abajo se escribieron antes de que estos fixes sistémicos cascadearan y pueden estar sobre-estimadas. Al re-auditar una pantalla, verificar primero contra este estado antes de re-reportar un residuo ya cerrado.
Azul canónico #0052CC medido exacto en fills, links, focus rings e iconos activos (con hover/pressed #003D99, disabled #E5E7EB+#9CA3AF) en casi todos los pares.
Tinte de marca #E6EEFA (palette.primary.light) ahora existe y se usa en Avatar, IconButton, Pagination, Balance Card CTA, Customer Row, chip de BulkActionBar, fila activa de Command Palette y filas no-leídas de Notificaciones.
Fondos soft por rol confirmados en Alert/Banner/StatusBadge/Toast: info #EFF6FF, success #ECFDF5, warning #FFFBEB, danger #FEF2F2, con textos #3B82F6/#10B981/#F59E0B/#EF4444.
Campos de formulario: relleno blanco, borde hairline #E5E7EB, focus #0052CC 2px, error #EF4444, disabled bg #E5E7EB, alto ~40px — medidos en FormField, Textarea, Select, Denomination Row y campos POS.
Controles de selección: unchecked #D1D5DB, checked/indeterminate #0052CC en Checkbox y Radio; PIN Dot lleno #0052CC; Switch track ON #0052CC / OFF #D1D5DB con thumb blanco y geometría 44×24/thumb18/inset3.
Superficies de tabla y tarjeta: cabecera #F7F9FC, divisores/hairline #E5E7EB, cards planas sin sombra.
Colores de chart: serie 1 #0052CC, serie 2 #3B82F6 (info), serie 3 #10B981, serie 4 #F59E0B (useChartColors.ts).
Superficie dark de Toast y Tooltip medida #1F2933 opaca, igual al asset de Figma.
Tokens de texto: primario #1F2933, secundario #6B7280, disabled #9CA3AF — consistentes en títulos, labels y valores.
La auditoría verifica primero que cada par muestre la misma pantalla. En estos 12
casos no coinciden, así que su celda de Notas describe el desajuste en vez de listar
diferencias de estilo. El patrón dominante: el frame de Figma diseña una pantalla completa y la
app la resuelve como diálogo sobre el listado, o la captura tomó otro paso del flujo — son
decisiones de producto (diálogo-vs-página) o gaps de implementación, no desviaciones de estilo.
W03b · Nueva contraseña — La captura de la app muestra el estado de error “enlace inválido” de /reset-password (sin query params userId/secret), no el formulario de nueva contraseña que diseña el Figma.
Categoría — alta — El frame de Figma (figma-w23-categorias.png) es el LISTADO de Categorías (tabla + filtros + paginación, sin ningún formulario), mientras que la captura de la app muestra el drawer “Nueva categoría” (formulario de alta) abierto sobre el listado. No existe en el par un frame de Figma del formulario de
Impuesto — alta — La captura de Figma emparejada (figma-w24-impuestos.png) es la pantalla de LISTA de Impuestos (tabla de tasas + botón “Nueva tasa”); no contiene ningún formulario de alta. La app sí muestra el drawer “Nuevo Impuesto”. Falta exportar/emparejar el frame de Figma del formulario de alta (si existe), o e
W33 · Detalle de turno / Corte Z — El panel FIGMA diseña una PÁGINA completa de “Corte Z” de un turno CERRADO; el panel APP muestra un DIÁLOGO de detalle de un turno ABIERTO (sin corte todavía). Distinto paso del flujo, distinta composición (página vs diálogo) y distinto estado del turno.
W35 · Cerrar turno — El Figma diseña una página de resumen “Cerrar turno · Corte Z” dentro del shell admin (sidebar + topbar), mientras que la app captura una pantalla de terminal (shell POS, sin sidebar) de conteo de efectivo por denominación. Son pasos distintos del flujo de cierre.
W36b · Movimiento de caja (terminal) — El manifest reutiliza el Figma de W36 (página admin de administración) para W36b, pero la captura de la app es la pantalla de terminal (formulario de entrada con teclado numérico). Son dos pantallas distintas: lista/tabla admin vs. formulario de captura de un movimiento en terminal.
W38 · Empleado crear / editar — Figma = pagina completa “Empleado” (header + secciones Datos personales/Acceso + sticky save bar). App = drawer lateral derecho sobre la lista de Empleados, con set de campos distinto.
W56 · Reporte de ventas — El panel APP no muestra la pantalla del diseño. FIGMA dibuja el “Reporte de ventas · Desglose del periodo” (tabs Por producto/categoría/empleado/método + tabla de líneas Producto·SKU·Categoría·Ingresos·Unidades·Tendencia con checkboxes, botón Exportar y paginación 1–5 de 248). La captura APP muestra
W58 · Cortes de caja (Z) — El Figma diseña el HISTÓRICO/lista de cortes Z (tabla con filas Z-088…Z-084); la app captura el DETALLE de un solo corte Z (tarjeta con desglose Ventas/Formas de Pago/Conciliación). Son dos vistas distintas del mismo flujo.
W42 · Tiempo Aire (TAE) — Figma diseña la página compuesta de recarga (proveedor como chips + grilla de montos + captura de teléfono/total); la app muestra solo el paso “Selecciona el proveedor” con tarjetas grandes y un “Resumen de compra” vacío, sin montos ni campo de teléfono.
W46b · Registrar depósito — El frame que estaba pareado era la lista de depósitos (W46), no el formulario que captura la app; se despareó la lista para no comparar dos pantallas distintas. Falta exportar el frame del formulario «Registrar depósito» de Figma (ver TODO en la celda de Figma de W46b) para tener un par comparable.
W07 · Dashboard — El sidebar coincide (misma app, ruta “Inicio” activa), pero el panel de contenido principal es un diseño completamente distinto. Figma diseña un dashboard analítico de retail: saludo “Hola, Victoria”, 4 KPIs (Ventas hoy $8,450, Transacciones 128, Ticket promedio $66.01, Productos vendidos 342), gráf
❌ Diferencias importantes — la capa de color sistémica llegó, pero overrides locales de sx anulan los fixes de tamaño/sombra y falta contenido del diseño.
Color: ✅ Resuelto — azul canónico #0052CC medido en panel de marca, botón Entrar, focus ring y links (ambos paneles); fondo #F5F7FA y heading #1F2933 coinciden; hairlines de campos y botón secundario = #E5E7EB exacto.
Sombras: ❌ El botón Entrar proyecta sombra visible (gradiente #DFDFDF→#F2F2F2 medido bajo el botón); en Figma no hay ninguna. Culpable: src/ui/Buttons/PrimaryButton.tsx hardcodea boxShadow: '0px 10px 15px…' en sx, pisando el fix del theme. La tarjeta también lleva sombra explícita (src/ui/templates/AuthSplit/index.tsx, boxShadow en el Paper) mientras el Figma muestra borde nítido sin sombra.
Espaciado: ❌ Campos de ~60px de alto (borde 406→468 medido) vs ~38px en Figma — src/ui/Inputs/TextInput.tsx hardcodea padding: '18px 22px', anulando el fix de campos ~40px. Botón Entrar ~67px (526→593) vs 52px del Figma — PrimaryButton.tsx hardcodea padding: sm '20px'.
Tipografía: Etiqueta del botón a 18px (fontSize: {sm: 18} en PrimaryButton.tsx) vs 14px/600 del sistema.
Contenido: ❌ Falta el botón outlined “Acceso rápido con PIN” (existe en Figma con borde azul #0052CC; sin rastro en LoginForm.tsx ni login.i18n.ts). El divisor “— o —” del Figma se reemplazó por el texto “O recibe un enlace de acceso por correo”. “Enviar enlace mágico” es link de texto azul en Figma pero botón outlined neutro en la app (SecondaryButton en LoginForm.tsx:256).
Layout: Split 50/50 (flex: '1 1 50%' en AuthSplit/index.tsx) vs ~43/57 medido en Figma (azul termina en x≈616/1440 vs x≈720). “¿Olvidaste tu contraseña?” alineado a la derecha en app, a la izquierda en Figma.
Estados: La captura muestra el email con autofocus (ring azul 2px #0052CC) y asteriscos rojos de requerido (~#D84F4F medido) que el Figma no dibuja; el campo contraseña muestra toggle de visibilidad oscuro sin equivalente en Figma — decidir si se ocultan asteriscos/adorno o se actualiza el diseño.
Verificar: si “Acceso rápido con PIN” quedó fuera por decisión de producto, documentarlo; si no, es contenido faltante.
⚠️ Falta captura — es un estado dentro de /login, no una ruta propia; hay que capturarlo con Playwright forzando el reto MFA
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⚠️ Diferencias menores (recaptura post-remediación; misma pantalla, split W03 con card centrada)
Color: Fixes sistémicos confirmados por medición: panel izquierdo, botón, badge y focus ring del campo todos en #0052CC canónico; título #1F2933; subtítulo #6B7280. Residuo: el link “Volver a iniciar sesión” renderiza #232D37 (texto plano) en vez del azul de marca semibold del diseño — es un next/link desnudo en src/app/forgot-password/ForgotPasswordForm.tsx:182-187.
Iconos: El badge del “?” es un cuadrado sólido #0052CC con glifo blanco; Figma lo diseña como cuadrado en tinte #E6EEFA (medido) con círculo azul — ForgotPasswordForm.tsx:89-104 usa bgcolor: 'primary.main' en lugar de primary.light.
Contenido: Falta el hint informativo persistente de Figma (“Si el correo existe, recibirás un enlace en unos minutos.”, tinte #EFF6FF verificado en el diseño); la app solo muestra un Banner después de enviar y con otro copy (ForgotPasswordForm.tsx:132-136). Copys divergentes en recovery.i18n.ts: subtítulo recortado (“Te enviaremos…” vs “Ingresa tu correo y te enviaremos…”), botón “Enviar enlace de recuperación” vs “Enviar enlace”, placeholder “tu@correo.com” vs “usuario@comercio.com”.
Contenido: El panel de marca reutiliza LoginBrand con el tagline genérico del login; Figma W03 pide el tagline propio “Recupera el acceso a tu cuenta en unos pasos.” (src/app/forgot-password/page.tsx:22).
Layout: CTA medido a ~40px (ramp medium) donde Figma usa el botón grande ~52px; falta size en el Button del form.
Estados: La captura tiene el campo con autoFocus (ring azul 2px #0052CC correcto); el borde hairline #E5E7EB en reposo queda como “verificar”.
Bordes/Sombras: Card radio y sombra suave equivalentes en ambos paneles; botón sin sombra ✓.
Sistémico conocido (una línea): label flotante MUI con asterisco vs label estático sobre el campo del diseño — patrón de formulario pendiente de decisión de producto.
❌ Las imágenes no corresponden a la misma pantalla.
Panel FIGMA: el paso de formulario del flujo de recuperación — icono de candado en tinte, título “Crea tu nueva contraseña”, campos “Nueva contraseña” y “Confirmar contraseña”, checklist de requisitos y botón “Guardar contraseña”.
Panel APP: el estado de error de la misma ruta — card “Restablecer contraseña” con alerta “El enlace de recuperación es inválido o expiró.” y link “Volver a iniciar sesión”, sin ningún campo.
Causa:src/app/reset-password/ResetPasswordForm.tsx exige ?userId=…&secret=… en la URL (hasParams, líneas 54–56/121); la captura se tomó sin esos params y cayó en la rama de enlace inválido.
Acción de captura: recapturar con /reset-password?userId=dummy&secret=dummy (o mockeando useSearchParams) para renderizar el formulario y poder auditar la paridad.
Dato aprovechable: el azul de marca ya mide #0052CC en la captura (dominante 47.7%, igual al Figma) y el fondo #F5F7FA coincide — el fix sistémico sí llegó a esta ruta, pero el residuo del formulario queda pendiente de verificar.
FIGMA: layout dividido — panel de marca azul “Terminales / Cambia de cajero en segundos con un PIN” a la izquierda y tarjeta de PIN a la derecha (avatar “JP”, “Juan Pérez / Cajero · Tienda Centro”, “Ingresa tu PIN”, 4 dots de progreso, teclado 1–9/0 + backspace y link “Cambiar usuario”).
APP: teclado PIN de “Cajero Demo” tras seleccionar el usuario — “Terminal bloqueado / PIN de Cajero Demo / Cambiar usuario / Ingresa tu PIN para iniciar sesión”, teclado 1–9 + C/0/backspace y botón “Entrar”. El setup de terminal-lock ahora hace clic en el perfil de cajero antes de capturar (helper revealPinKeypad en e2e/screenshots/targets.ts).
Diferencias reales (no de estado): la app es una sola columna centrada (sin el panel de marca azul del diseño); su teclado añade una tecla “C” (limpiar) y un botón explícito “Entrar”; los 4 dots de progreso de la app aparecen al teclear (aquí el PIN está vacío).
Dato medido: el azul canónico #0052CC se midió en ambos paneles — el fix sistémico de azul llegó a esta ruta.
⚠️ Falta captura — la app salta esta pantalla: SelectStoreView auto-selecciona cuando el usuario tiene una sola membresía (“AC2 — a single membership needs no click”), y el roster mock tiene exactamente una. Para capturar el selector hace falta un fixture con ≥2 tiendas.
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
Color: Azul canónico verificado: botón Continuar y paso activo del stepper = #0052CC en ambos paneles; título #1F2933, subtítulo #6B7280 — fixes sistémicos presentes en esta captura.
Bordes: Campos con hairline #E5E7EB y relleno blanco en app y Figma (medido en el primer campo).
Espaciado: Alturas idénticas medidas: campos ~40px (app 341→380 vs Figma 339→378), botón grande ~52px (app 655→706 vs Figma 657→708). Composición, radios y densidad de la tarjeta equivalentes.
Layout: Misma estructura: stepper 1-2-3 + “Paso 1 de 3”, título, subtítulo, 4 campos, CTA full-width.
Contenido: Divergencia intencional y documentada (comentario en src/app/onboarding/onboarding.i18n.ts): el alcance US-ACC-6 es merchant-create only, así que “Nombre de la tienda” del Figma se reemplaza por “Usuario propietario (ID)” + helper, el subtítulo cambia y “Dirección” pasa a “(opcional)”. Es el Figma el que quedó desactualizado respecto al contrato — actualizar el frame, no el código.
⚠️ Falta diseño — no hay render de Figma exportado — pantalla técnica sin frame en Figma
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Ruta:/login/callback · Historia: — (sin frame de diseño)
Diseño Figma
Captura de la app
⚠️ Falta diseño — no hay render de Figma exportado — pantalla técnica sin frame en Figma
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Color: Azul canónico verificado por medición: chip activa #0052CC, precios #0052CC, texto “Asignar cliente” #0052CC; Cobrar deshabilitado #E5E7EB bg + #9CA3AF texto — los fixes sistémicos sí llegaron a esta pantalla.
Color: La chip de categoría seleccionada difiere del diseño: app = sólida #0052CC con texto blanco; Figma = tinte #E6EEFA con texto #0052CC (medido). El tinte ya está en palette.primary.light; culpable: src/ui/atoms/Chip/index.tsx (líneas 50–56, selected ? primary.main : …).
Bordes: Hairline #E5E7EB medido en campo de búsqueda y en tarjetas de producto; tarjetas planas blancas ✓.
Layout: Campo de búsqueda: Figma lo diseña relleno #F0F4F8 sin borde (~40px de alto); la app usa Paper outlined blanco (~45px) — src/app/terminal/home/picker/SearchInput.tsx.
Contenido: Faltan los tabs de catálogo del diseño (Productos / Servicios / TAE / Pines) — el picker solo muestra productos.
Contenido: Las tarjetas de producto no muestran el badge de existencias (“24 pzs” verde / “Agotado” rojo, texto ~#1EBE89 medido en Figma) — picker/ProductGrid.tsx solo renderiza nombre + precio.
Estados: Captura con carrito vacío vs venta activa en Figma: mismo screen y layout two-pane, pero steppers de cantidad, “Vaciar”, IVA incluido y Cobrar activo quedan sin comparar; re-verificar con carrito poblado.
Estados: Switch “Escáner”: track off #D1D5DB, alto 24px, thumb blanco ✓ (el color de track no estaba especificado en el fix; verificar contra token).
Layout: Composición del header (AppBar de marca con Orden #/chip de turno/avatar vs saludo + acciones de turno) y extras del carrito (Asignar cliente, estado de terminal, Guardar en espera): divergencias de producto conocidas/pendientes, no de estilo.
Ruta:/terminal/home (estado de búsqueda) · Figma:131:8968 · Historia: US-POS-1
Diseño Figma
Captura de la app
Notas
✅ Recapturado — la búsqueda ahora se ejecuta y el grid queda filtrado.
FIGMA: “4 resultados para ‘coca’”, grid con 4 variantes de Coca-Cola (600 ml, 2 L, Light 600 ml, Sin Azúcar 2 L) con badge de stock (24/18/12/9 pzs), carrito con 3 ítems y “Cobrar · $372.00” en #0052CC. Chips de tipo: Todos/Productos/Servicios/Tiempo Aire/Tarjetas.
APP: “coca” ejecutado (ENTER) → grid filtrado. El open del diálogo terminal-home--busqueda ahora confirma la búsqueda y espera a que el grid quede filtrado antes de capturar; la captura anterior disparaba antes del useDebounce (500 ms) del hook de la lista y congelaba el catálogo completo de W10.
Diferencia de contenido (no de estado): el catálogo mock sólo tiene un producto “coca” (Coca-Cola 600 ml), así que la app muestra 1 resultado frente a los 4 del diseño.
Pendiente verificado en código (no cambia al recapturar): no existe label “N resultados para …” en src/app/terminal/home/picker/; los chips de la app son categorías (CategoryRail: Todas/Bebidas/Alimentos/…) y no el filtro por tipo del diseño; ProductGrid.tsx no muestra badge de stock; el carrito está vacío (el diseño lo muestra con 3 ítems).
Fixes sistémicos medidos (OK): azul canónico #0052CC en chip seleccionado y precios; disabled #E5E7EB; tarjetas blancas con hairline #E5E7EB.
⚠️ Falta diseño — no hay render de Figma exportado — el nodo existe pero no se exportó a design/web/screens/
⚠️ Falta captura — no hay ruta VAS dentro del POS del terminal
Notas
⛔ Comparación no posible — faltan las dos imágenes. No hay render de Figma exportado ni captura de la app, así que no hay nada que comparar. El motivo de cada gap está en las celdas de arriba. Primero hay que resolverlo (exportar el frame y/o construir la pantalla); recién ahí tiene sentido auditar paridad.
⚠️ Falta captura — la hoja de descuento no está cableada en el POS
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⚠️ Falta captura — diálogo (TenderMethodDialog), requiere captura con carrito activo
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⚠️ Falta captura — diálogo (RemoteCardTenderDialog)
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
Ruta:— (documento de impresión) · Figma:133:10777 · Historia: US-POS-7
Diseño Figma
Captura de la app
⚠️ Falta captura — el recibo es solo impresión (ReceiptDocument.tsx), no hay pantalla
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⚠️ Falta captura — no existe pantalla/modal de confirmación
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
❌ Diferencias importantes — misma pantalla; los fixes sistémicos de color SÍ llegaron (medidos), pero hay una regresión de tema, dos bugs de contenido visibles y la tarjeta difiere en composición.
Color: ✅ verificado: CTA y segmento activo #0052CC exacto, texto principal #1F2933, borde de tarjeta hairline #E5E7EB, fondo #F5F7FA. ❌ Avatar de tarjeta y header: bg medido #3374D6 = lighten(#0052CC, .2) — mergeMerchantTheme pasa por augmentColor y recalcula primary.light, pisando el tinte canónico #E6EEFA del fix de Avatar en superficies white-label (src/ui/theme/WhiteLabelThemeProvider.tsx; derivar ahí el soft como en theme.ts en vez del lighten de MUI).
Contenido: ❌ importes ×100: el mock guarda centavos (total: 37200) y HeldOrdersList.tsx:167 formatea el valor crudo → “$37,200.00” vs “$372.00” del diseño para el mismo carrito (heldOrder.mocks.ts, aclarar unidad en types.ts:22).
Contenido: ❌ “17 days ago” en inglés: src/core/utils.ts importa dayjs/locale/es pero nunca activa dayjs.locale('es') (Figma: “Hace 4 min”). Los heldAt del mock (2026-07-06) además envejecen la demo — refrescarlos a offsets relativos.
Estados: app captura “Todos” activo; Figma muestra “Mis carritos”. El default 'all' es deliberado en código (HeldOrdersList.tsx:55) — confirmar con producto cuál es el default correcto.
Layout: patrón del segmented invertido: Figma = pill blanco sobre track gris #F0F4F8 con texto oscuro; app = pill azul sólido sobre track blanco (src/ui/atoms/SegmentedControl/index.tsx, atom compartido — afecta otras pantallas).
Layout: composición de HeldOrderCard distinta al diseño: Figma pone id azul “#H-2271” + precio arriba-derecha, “Hace X min” como caption bajo el nombre y holder como avatar chico inline + texto plano; app pone “H-2271” oscuro sin “#”, avatar sólido arriba-derecha, tiempo/holder como chips outlined y precio abajo (src/ui/molecules/HeldOrderCard/index.tsx).
Bordes/Sombras: ✅ tarjeta plana con hairline, sin sombra; botón sin sombra, label 14/600.
Estados: CTA “Reanudar venta” es contained sólido; Figma lo diseña tonal soft (bg #E6EEFA medido, label primary) — requiere variante tonal de Button o ButtonProps en la tarjeta (HeldOrderCard/index.tsx:115).
Contenido: copy del subtítulo difiere (“compartidos por tienda en este turno” vs “de la sucursal en el turno abierto”) — menor, heldOrder.i18n.ts; “Pantalla completa” arriba-derecha no existe en el diseño (shell compartido, una línea: igual que el resto de /admin).
La captura nueva confirma que la remediación sistémica llegó: azul canónico, hairlines y tinte de marca medidos. El residuo es propio de la tarjeta (variante de botón, anatomía) más un bug de i18n en el tiempo relativo.
Color: ✅ Verificado — “Reanudar venta” y “Cerrar” miden #0052CC; borde de tarjeta #E5E7EB; avatar SR en tinte de marca (~#E1EAF9) con iniciales azules.
Estados: Figma usa botón tonal para “Reanudar venta” (fill medido exactamente #E6EEFA, etiqueta azul); la app renderiza variant="contained" sólido #0052CC → jerarquía más pesada que el diseño. Culpable: src/ui/molecules/HeldOrderCard/index.tsx:115.
Contenido: chip “17 days ago” en inglés dentro de UI en español (Figma: “Hace 4 min”). HeldOrdersDialog.tsx:142 llama formatRelativeTime → dayjs .fromNow() sin locale es (src/core/utils.ts:401). Bug de i18n real, no de estilo.
Layout: anatomía de tarjeta distinta al Figma: id “#H-2271” azul vs “H-2271” oscuro sin “#”; tiempo y “En espera por…” como Chips outlined en vez de texto gris con mini-avatar inline; precio junto a los chips (Figma: esquina superior derecha); avatar arriba a la derecha (Figma: inline). Todo en HeldOrderCard.
Tipografía: jerarquía interna invertida vs Figma (Figma: nombre en bold, id secundario azul; app: id en bold, nombre gris) — mismo culpable.
Bordes/Sombras: ✅ tarjetas planas con hairline #E5E7EB, sin sombra; radio del diálogo conforme.
Contenido (dato): montos/fechas difieren por mock data ($37,200 vs $372; “17 days” por heldAt viejo en heldOrder.mocks.ts) — no es defecto de paridad.
Diálogo-vs-página y tabs “Mis carritos/Todos” ausentes: decisión de producto conocida y documentada (el terminal sólo muestra “mine”; “Todos” es superficie admin) — no se re-lista.
⚠️ Falta diseño — no hay render de Figma exportado — índice de navegación, sin frame
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
⚠️ Falta diseño — no hay render de Figma exportado — pantalla de diagnóstico, sin frame
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
⚠️ Falta diseño — no hay render de Figma exportado — el diseño vive como organismo POS Approval Modal, no como pantalla
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
VENTAS / VOID — Historial de ventas, cancelación y reembolso
❌ Diferencias importantes (de contenido/feature, NO de estilo)(re-auditado 2026-07-23 con recaptura) — los tokens sistémicos se confirman todos en la recaptura; el residuo es una implementación reducida de la pantalla.
Color (fix-gaps CERRADOS en la recaptura): los badges de estado ya son soft por rol — Pagada verde soft, Pago Parcial ámbar soft, Abierta info soft, Anulada/Cancelada rojo soft, Borrador neutro (StatusBadge, no <Chip> crudo). El ítem de nav activo (“Ventas”) ya va en tinte de marca #E6EEFA + texto azul (no gris). La paginación es el pager numerado (“Mostrando 1–6 de 6” + chip “1” azul), no TablePagination. Los tres residuos de estilo que esta nota marcaba están cerrados.
Color (OK): azul canónico #0052CC en Filtros/nav; cabecera de tabla #F7F9FC, divisores #E5E7EB, título #1F2933, chip “Turno abierto” soft #ECFDF5 — coinciden.
Contenido (residuo real): falta la toolbar rica del diseño: subtítulo KPI (“1,284 ventas · $184,320 este mes”), botón primario Exportar, búsqueda local, tabs segmentadas Todas/Pagadas/Canceladas y el select. La app añade un botón “Pantalla completa” que no está en Figma.
Layout (residuo real): esquema de tabla distinto — Figma: checkbox de selección + avatar de cliente + Folio/Cliente/Fecha/Total/Artículos/Estado + editar por fila; app: Ticket/Estado/Sucursal/Empleado/Fecha/Total/Por Cobrar, sin selección ni acción por fila. Definir con producto el esquema vigente.
Tipografía: encabezado “Órdenes de Venta” en jerarquía menor que el H grande “Ventas” de Figma, y sin subtítulo.
Conclusión: estilo/tokens alineados (badges soft, nav tint, pager numerado, header, azul). El ❌ restante es alcance de feature — columnas/toolbar/selección/métricas y datos reales — no desviación de estilo. Tratarlo como build-out de pantalla, no como pulido de paridad.
Contenedor: diálogo sobre la lista vs página dedicada del diseño — gap conocido #240 (pendiente de producto); la versión fiel existe solo en parity/VentasDetailScreen.tsx (playground). No se re-lista como defecto.
Color: azul canónico OK — etiqueta de “Asignar cliente” medida #0052CC ✓; cabecera de tabla #F7F9FC ✓; divisor bajo cabecera #E5E7EB ✓; valores #1F2933 ✓, labels ≈#6B7280 ✓.
Color: badge “Pagada” es Chip sólido #10B981 con texto blanco; Figma usa tinte soft (#ECFCF5 + texto verde). El fix “StatusBadge sobre tokens *-soft” NO llegó: SalesOrderDetail.tsx:87 usa Chip color="success" crudo en vez de atoms/StatusBadge.
Iconos: el icono de “Asignar cliente” es negro junto a etiqueta azul: src/ui/FontAwesomeIcon.tsx:25 (default color='black') + AssignCustomerButton.tsx:57 no pasa color — debería heredar currentColor.
Contenido: montos sin “$” (“540.00” vs “$372.00” del diseño): formatCurrency (src/core/utils.ts:49) no antepone símbolo; existe formatCurrencyWithSymbol sin usar en SalesOrderDetail.tsx.
Contenido: faltan “Reimprimir” (solo existe en el showcase), “Folio fiscal”, “Recibido”/“Cambio” (la tabla de pagos solo trae Método/Tarjeta/Estado/Importe) y el nombre del Cliente (solo botón de asignar). “Cancelar / Reembolsar” (RefundAction) existe en código pero no es visible en la captura — verificar gating con status PAID.
Layout: summary como pila vertical de 8 pares label/valor a ancho completo — densidad muy inferior a las dos cards (“Artículos” + “Información”) en dos columnas del diseño; el contenido desborda el viewport y la tabla queda cortada.
Bordes: borde del botón outlined = azul al ~50% (medido #7FA8E5, default MUI) vs borde sólido #0052CC del diseño — menor.
Tipografía/Contenido: título “A-1001” (ticketNumber crudo) vs “Venta #1042” formateado — menor, dato de mock.
⚠️ Falta diseño — no hay render de Figma exportado — el diseño vive como organismo Filter Bar, no como pantalla
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Ruta:/terminal/voids (modal · render de referencia en /playground) · Figma:131:8774 · Historia: US-VOID-1 / US-VOID-2
Diseño Figma
Captura de la app
Notas
✅ Re-emparejado — el par compara el mismo estado (modal de autorización).
FIGMA: modal “Autorización requerida” con PIN-pad de 4 dígitos (Cancelar / Autorizar) sobre el detalle de Venta #1042, con sidebar y topbar del back office.
APP (render de referencia): la misma composición desde /playground (VentasVoidScreenShowcase, screenshots/playground/w31-cancelar-reembolsar.png) — detalle de Venta #1042 + modal de autorización con teclado numérico y Cancelar/Autorizar.
Por qué el render de playground y no la ruta: bajo los mocks del harness /terminal/voids sólo puede renderizar su estado vacío — selectVoidableOrders conserva pedidos del turno abierto (shift_001, 2026-06-29) de la tienda del cajero, pero los pedidos mock son de junio 20–24 y de otra tienda, así que la lista de anulables queda vacía y no hay venta sobre la cual abrir el modal. Sembrar un pedido anulable del día exige tocar fixtures de producto (fuera de alcance de este ticket). Es el mismo fallback de referencia del DS que la galería ya usa para W47/W57/W60.
Diferencia esperada: el render de playground no lleva el shell admin (sidebar + topbar) que sí muestra el frame.
❌ Diferencias importantes — los fixes sistémicos de color sí llegaron; el residuo es estructural y de contenido, más un bug de datos.
Color: ✅ Azul canónico verificado: tab activa + indicador #0052CC, botón «Nuevo» #0052CC, «Filtros» y «Pantalla completa» #0052CC; título #1F2933, cabecera de tabla #F7F9FC, divisores #E5E7EB. ❌ Chip «Activo» sólido #10B981 con texto blanco; Figma usa StatusBadge soft (bg #D0F4E6, texto verde) — ProductList.tsx usa Chip color="success" en vez de StatusBadge.
Color: Ítem seleccionado del sidebar con pill gris #EBEBEB; en Figma es tinte de marca #E6EEFA (el tinte primary.light no llegó al nav del AppShell).
Contenido (bug): La columna Categoría muestra el ID numérico («1», «3», «5») en vez del nombre («Bebidas», «Panadería»…) — src/app/components/PosCatalog/ProductList.tsx (render de field: 'category' devuelve row.category crudo; falta resolver el nombre).
Contenido: Faltan del diseño: subtítulo «248 productos · 12 categorías», búsqueda dentro de la tab, chips segmentados Todos/Activos/Bajo stock y el select; solo existe el botón «Filtros» (además a la izquierda; en Figma va a la derecha).
Layout: Set de columnas distinto: Figma = avatar iniciales + Producto, SKU, Categoría, Precio, Stock, Estado, editar por fila; app = Nombre, Categoría, Precio, Variantes, Códigos de barras, Activo — sin SKU, sin Stock, sin acción de edición ni avatar (el Avatar tinte+iniciales promovido no llegó a esta tabla).
Layout: Paginación MUI («Filas por página», «1–6 de 6») vs paginación numerada del diseño («Mostrando 1–5 de 248», páginas 1…10).
Estados: Figma muestra fila seleccionada (checkbox azul + bg #E6EEFA); estado no ejercitado en la captura — verificar hover/selección de fila.
Tipografía: Botón dice «Nuevo» sin icono; Figma «+ Nuevo producto». Texto de filas renderiza oscuro (px medidos ~#0D1823–#28313B, consistente con #1F2933) ✅.
Bordes: Tabla con contenedor hairline y radios correctos ✅; tabs con patrón underline MUI vs pill segmentado con tinte del diseño (decisión de patrón pendiente, una línea y sigo).
Iconos: «Pantalla completa» no existe en el diseño (affordance de la app); topbar difiere del diseño (grupo de avatares JP/MJ/LR ausente) — sistémico del shell, no propio de esta pantalla.
W21 migrado de diálogo a página completa: PageHeader + tarjetas Paper + StickySaveBar, coincidiendo con el contenedor full-page del frame. Grid de dos columnas (izquierda: información + variantes; derecha: imagen + inventario).
Layout: ✅ página completa (antes diálogo lateral) — resuelve la decisión producto diálogo-vs-página a favor de la página, como el frame.
Contenido: ✅ añadidos SKU de producto, Costo, dropzone de Imagen, sección Inventario (stock inicial, alerta de stock bajo, umbral) y Descripción con placeholder (“Escribe una descripción del producto…”).
Contenido: ✅ Categoría ahora es select con opciones del catálogo (antes input de texto libre).
Variantes: ✅ opt-in con switch “Tiene variantes” (antes siempre visibles), y reconstruida como la tabla del frame: campo Eje de variante + columnas Valor · SKU · Código de barras · Precio · Stock, una fila por variante. El código primario se edita en la fila; un expansor revela el sub-editor multi-código (simbología/Principal) para no perder capacidad. Código de barras único a nivel producto en modo sin variantes.
Barra sticky: ✅ “Tienes cambios sin guardar · Descartar/Guardar” (antes footer de diálogo Cancelar/Guardar).
Color: ✅ literales color="black" eliminados de ProductForm.tsx — títulos y labels ahora resuelven a tokens del tema (#1F2933).
⚠️ Divergencia intencional (bug del diseño): el hint de Imagen es “PNG o JPG · hasta 10 MB”; el frame dice “CSV, PNG o JPG” pero un CSV no puede ser la imagen de un producto. Se mantiene la corrección y se marca el frame para actualizar.
⚠️ Divergencia intencional (función > frame): el frame no dibuja un control de estado, pero la lista filtra/insigna por isActive y ningún otro punto de la UI puede cambiarlo; se mantiene el switch “Estado/Activo” en la tarjeta de información. Marcar el frame para añadir el control.
Seguimiento (no bloquea el merge): la imagen seleccionada no se persiste a storage aún; initialStock/minStocky el Stock por variante se recogen en el payload pero su escritura a StockLevels es diferida (mismo patrón documentado).
⚠️ Falta captura — no hay pantalla de detalle dedicada
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
❌ Diferencias importantes — el estilo (post-fix) ya coincide; el residuo es de composición y contenido propio de la pantalla.
Color: Fixes verificados en esta captura: botón primario “Nuevo” #0052CC (medido, = Figma), indicador y label de tab activa #0052CC, botón “Filtros” con icono #0052CC, cabecera de tabla #F7F9FC, divisores #E5E7EB, checkbox con trazo #D1D5DB y esquinas redondeadas, fondo #F5F7FA. El azul canónico llegó a toda la pantalla.
Contenido: El esquema de la tabla no es el del diseño: Figma pide Categoría (avatar de iniciales en tinte) / SKUs / Margen / Ventas mes / Productos / Estado + acción de edición; la app muestra Nombre+slug / Descripción / Orden / Activa / Fecha de Creación, sin columna de acciones ni avatar (el fix “Avatar en tinte + iniciales” no llegó aquí).
Contenido: Falta la toolbar de filtrado del diseño: campo “Buscar…”, chips segmentados Todas/Activas/Vacías y select “Selecciona una opción”; la app sólo tiene “Filtros”.
Estados: “Estado” en Figma es badge soft verde/rojo (Activa/Vacía); la app usa icono booleano monocromo #1F2933 — el StatusBadge sobre tokens *-soft no se aplicó a esta tabla.
Layout: Paginación distinta: Figma numerada con “Mostrando 1–5 de 12”; app usa TablePagination estándar (“Filas por página / 1–7 de 7”). Botón “Pantalla completa” extra en la app, ausente en Figma.
Layout: (sistémico conocido, 1 línea) tab “Categorías” dentro de Productos/Categorías/Impuestos vs página dedicada con encabezado “Categorías · 12 categorías” y CTA “+ Nueva categoría” — decisión de producto pendiente; la etiqueta “Nuevo” sin icono + deriva de esto.
Estados: Fila seleccionada con tinte #E6EEFA del diseño: sin fila seleccionada en la captura — verificar (el tinte existe en palette.primary.light).
Tipografía / Bordes / Sombras: Sin hallazgos: jerarquía nombre 600 + slug secundario, tarjeta plana con hairline, sin sombras — conforme.
❌ Las imágenes no corresponden a la misma pantalla.
Panel FIGMA (figma/screens/figma-w23-categorias.png): pantalla de listado de Categorías — título “Categorías / 12 categorías”, botón “+ Nueva categoría”, buscador, chips Todas/Activas/Vacías, tabla (Categoría, SKUs, Margen, Ventas mes, Productos, Estado) y paginación. El frame no contiene ningún formulario de alta (ni modal ni drawer).
Panel APP (screenshots/admin-pos-catalog-categories--dialog-nueva-categoria.png): drawer lateral “Nueva categoría” abierto sobre el listado, con campos Nombre*, Identificador, Descripción, Categoría Padre, Sucursal, Orden, Color y acciones Cancelar/Guardar.
Causa probable: el manifest emparejó el frame del listado (que corresponde al heading de listado de categorías) con la captura del formulario de alta. No hay frame de Figma del formulario en este par.
Acción: conseguir/exportar el frame de Figma del formulario “Nueva categoría” y re-auditar; mientras tanto no se puede emitir veredicto de paridad para esta pantalla.
Dato informativo (medido, no un veredicto): el azul canónico #0052CC sí llegó al drawer (botón Guardar y borde de foco de Nombre).
❌ Diferencias importantes — los tokens sistémicos llegaron (azul, bordes, textos, cabecera de tabla medidos y correctos), pero el residuo propio de la pantalla es sustancial: la columna Estado está rota de color y faltan piezas de la toolbar y del modelo de columnas.
Color: verificado en captura: botón “Nuevo”, tab activa e indicador = #0052CC ✓; cabecera de tabla #F7F9FC ✓; bordes/divisores #E5E7EB ✓; texto primario #1F2933 / secundario ~#6B7280 ✓; checkbox con trazo #D1D5DB y geometría redondeada ✓.
Estados (bug): los iconos de “Activa” renderizan ambos en #1F2933 (medido en check y en x) aunque el código pide color="success"/"error" — src/app/components/PosTaxRates/PosTaxRateList.tsx:75 pasa claves de palette a src/ui/FontAwesomeIcon.tsx:47, que las reenvía como color CSS inválido y el SVG hereda currentColor. Figma pide chips soft (Activa #10B981 sobre #ECFCF5, Inactiva roja): reemplazar el icono por StatusBadge (*-soft), que ya existe promovido.
Contenido: faltan columnas del diseño: Tipo (IVA/IEPS), monto ($) y conteo de Productos; el app muestra en cambio Impuesto Incluido y Fecha de Creación. Verificar contra el modelo de datos real.
Contenido: Figma trae búsqueda inline + chips rápidos Todas/Activas/Inactivas + select en la toolbar; el app solo tiene “Filtros” (búsqueda escondida en el diálogo). Falta el filtro rápido de estado (FilterBar en PosTaxRateList.tsx:177).
Iconos: sin acción de edición visible por fila (Figma tiene icono de lápiz); el app depende de onRowClick, affordance invisible.
Iconos: el botón primario dice “Nuevo” sin icono +; Figma: “Nueva tasa” con +.
Layout: Figma no incluye avatar de iniciales en app (CO/SA…) — el app usa nombre + región secundaria; menor.
Layout: paginación “Filas por página 7” + flechas vs numerada del diseño (sistémico de DataTable; el default 7 es raro).
Contenido: título “Tasas de Impuesto” (i18n) + subnav de catálogo vs página standalone “Impuestos” con subtítulo — composición en tabs es decisión de producto (#408), y el botón “Pantalla completa” no existe en el diseño; una línea, no se re-audita.
❌ Las imágenes no corresponden a la misma pantalla.
Panel FIGMA: muestra la pantalla de lista de Impuestos (header “Impuestos”, filtros Todas/Activas/Inactivas, tabla de 5 tasas, paginación, botón “Nueva tasa”). No hay formulario de alta en ninguna parte del frame (figma/screens/figma-w24-impuestos.png, 1440×900 completo verificado).
Panel APP: muestra el drawer “Nuevo Impuesto” abierto sobre la lista: campos Nombre (enfocado), Tasa, Región, switches “Impuesto Incluido” (off) y “Activa” (on), acciones Cancelar/Guardar (screenshots/admin-pos-tax-rates--dialog-nuevo-impuesto.png).
Causa probable: el manifest empareja el alta con el frame de la lista — falta exportar el frame Figma del formulario de alta (si existe en el archivo) o corregir el pairing.
Informativo (medido, no es auditoría de estilo): los fixes sistémicos sí llegaron a esta captura — Guardar #0052CC, borde de campo enfocado #0052CC, track del switch Activa #0051CA (≈ azul canónico). Queda pendiente la decisión de producto diálogo-vs-drawer ya conocida.
Acción: conseguir la referencia Figma del alta y re-auditar el par.
Misma pantalla conceptual (Inventario / niveles de stock), pero la app es una implementación mínima tipo placeholder que omite casi toda la estructura y el contenido del diseño. No es redirect ni otro paso del flujo. (No pude medir hex: el clasificador de Bash estuvo caído toda la sesión — los juicios de color van por lectura visual y marcados como verificar.)
Contenido: Faltan casi todos los bloques diseñados: título “Niveles de stock” + subtítulo “Existencias por tienda”, sub-tabs (Niveles / Movimientos / Transferencias / Ajustar), campo de búsqueda, chips de filtro (Todos / Bajo stock / Agotados), botón Filtros, badges de Estado (En stock / Bajo / Agotado), columnas SKU y Costo, avatares de producto con iniciales, checkboxes de selección de fila y paginación (“Mostrando 1–5 de 248”). Ninguno aparece en la app.
Contenido/Datos: La app muestra datos mock (var-1001, store-1) en vez de nombres/SKU reales; agrega una columna Variante (vacía) que no existe en Figma, y le faltan Tienda, Costo y Estado del diseño.
Layout: Figma coloca la tabla dentro de una card con borde redondeado; la app la deja casi a sangre con una columna de acción sin encabezado (botón Ajustar por fila). El header de la app sí lleva el tinte claro (~#F7F9FC visual) y separadores hairline — consistentes con el sistema.
Estados / Bug propio de pantalla:El select “Todas las sucursales” renderiza el label superpuestoCorregido — se fijó inputLabel.shrink en el filtro (StockLevelList.tsx), el label “Sucursal” ahora va estático arriba y el valor debajo, sin superposición. Queda menor: el placeholder del buscador global aparece recortado (“Buscar productos, venta…”).
Color (verificar): El botón primario “Ajuste de inventario” se ve como azul de marca sólido, aparentemente el canónico #0052CC; “Ajustar”/“Pantalla completa” son outlined con texto azul sobre blanco y borde hairline — visualmente alineado con la remediación. Sin medición por Bash caído.
Tipografía: Etiqueta de botón bold blanca ~14/600 y encabezados de tabla en gris — consistentes con los fixes sistémicos.
Conclusión (re-auditado 2026-07-23): los fixes sistémicos se confirman en la recaptura — SideNav con item activo en tinte de marca #E6EEFA + texto azul, header de tabla #F7F9FC + hairlines, CTA azul sólido y botones outlined con borde azul. El bug del label del Select está corregido. El residuo restante es de alcance funcional, no de estilo: la pantalla es un esqueleto frente al diseño (faltan sub-tabs Niveles/Movimientos/Transferencias, toolbar de filtros con chips, columnas SKU/Costo/Estado, avatares, selección por fila y paginación, además de datos reales en vez de mock). Recomendación: tratarlo como épica de feature (build-out de columnas/filtros + adaptador de datos), no como pulido de paridad — el theme y los átomos ya están alineados.
Misma pantalla (formulario “Ajuste de inventario”), y la remediación sistémica se ve reflejada: el azul de marca (nav activo “Inventario” sobre tinte, botón “Pantalla completa”, chip “Tienda demo”, logo) es visualmente consistente con #0052CC; textos #1F2933/#6B7280, bordes hairline #E5E7EB y campos de relleno blanco con alto ~40px. El residuo es propio de la pantalla, en composición y contenido:
Layout: Figma organiza los campos en una card con grid de 2 columnas (Tienda+Tipo, Cantidad+Motivo); la app los apila en 1 sola columna full-width. Divergencia estructural fuerte.
Contenido/Controles: Figma usa inputs de texto con placeholders (Coca-Cola 600ml, Tienda Centro, Entrada, +24, Compra a proveedor, Recepción #4521); la app usa selects/dropdowns para Producto/Variante, Sucursal, Tipo y Motivo — cambia el tipo de campo, no solo el estilo.
Jerarquía/Layout: la app no tiene el H1 de página “Ajuste de inventario” + subtítulo “Registra un ajuste de existencias”, ni el botón azul “+ Guardar” superior, ni la barra sticky inferior “Tienes cambios sin guardar” con Descartar/Guardar. En su lugar el título vive dentro de la card y arriba a la derecha hay “Pantalla completa”.
Contenido: etiquetas divergentes — Producto→“Producto / Variante”, Tienda→“Sucursal”, Nota→“Notas”; la app añade asteriscos rojos de requerido ausentes en Figma.
Color: hex exacto de los azules quedó por verificar (herramienta de muestreo caída durante la auditoría); visualmente coincide con el canónico.
Culpable probable: pantalla admin/pos/stock-levels/adjust (composición del form) — falta el header de página con acción Guardar y la barra de cambios sin guardar; alinear grid a 2 columnas y revisar labels/controles vs. diseño.
Misma pantalla conceptual (movimientos de inventario), pero la app implementa una vista muy distinta y más incompleta que el diseño. Los fixes sistémicos parecen presentes (botón azul de marca sólido sin sombra, cabecera de tabla en tinte claro, badges con tono), pero el residuo propio de la pantalla es grande.
Layout: Falta el encabezado de página completo — no hay título “Movimientos de inventario” ni subtítulo “Entradas y salidas (ledger)”. La app arranca directo en la tabla.
Contenido: Ausente toda la barra de herramientas del diseño: buscador, tabs Todos/Entradas/Salidas, botón Filtros y dropdown “Selecciona una opción”. La app no ofrece ninguna de estas.
Contenido: Acción primaria distinta. Figma: un único “+ Nuevo movimiento”. App: “Recibir transferencia” + “Transferencia” + “Pantalla completa” — es otra intención de flujo (transferencias) montada sobre esta ruta.
Contenido: Columnas divergentes. Figma = [✓] Producto (avatar+nombre) · Tipo · Motivo · Cantidad ($) · Saldo · Fecha · editar. App = Fecha · Producto (var-1001) · Variante (vacía) · Motivo · Ajuste (+50/-1/…). Sin checkbox de selección, sin avatar de producto y sin icono de editar por fila.
Estados: Sin fila seleccionada resaltada (en Figma la primera fila va marcada con check azul y fondo tenue).
Contenido: Sin paginación. Figma muestra “Mostrando 1–5 de 1,024” con paginador 1 2 3 … 10.
Color/Estados: El “Motivo” se renderiza como badge sólido (verde Recepción, rojo Venta/Ajuste/Traspaso). El diseño usa etiquetas de texto para Tipo (Entrada/Salida) y Motivo (Compra/Venta/Merma), no pills de color. Revisar el mapeo StatusBadge para esta tabla.
Color: El azul del botón “Transferencia” y de la cabecera de tabla se leen sobre tokens de marca (no se pudo medir en pixel este run: el clasificador de Bash estaba caído; verificar #0052CC exacto).
Fixes sistémicos: botón plano 14px/600, cabecera de tabla en tinte claro y separadores hairline se ven aplicados; el grueso del hallazgo es composición y contenido faltante propios de W27, no residuo de tokens.
Ambos paneles son el formulario de transferencia entre tiendas (misma pantalla). Los arreglos sistémicos SÍ llegaron aquí (medidos), pero la composición y el contenido divergen del diseño.
Color: Correcto y sobre token. Botón primario “Registrar transferencia” = #0052CC exacto (etiqueta blanca); relleno de campo #FFFFFF; borde hairline #E5E7EB; label #1F2933; lienzo #F5F7FA. Asterisco de requerido en rojo (#D74A4A), aceptable.
Layout: Divergencia principal. La app es una sola tarjeta angosta centrada con el título dentro; Figma es página ancha con título H1 “Transferencia entre tiendas” + subtítulo “Mueve existencias entre tiendas” y la tarjeta rotulada “Transferencia”. La app no tiene el encabezado de página.
Layout: Figma dispone los campos en rejilla de 2 columnas (Origen|Destino, Cantidad|Fecha); la app los apila en una sola columna.
Contenido: Falta el campo Fecha en la app. Renombres: Origen/Destino → “Sucursal de origen/destino”, Producto → “Producto / Variante”, Nota → “Notas”.
Estados: Figma usa inputs de texto con placeholders (Tienda Centro, Coca-Cola 600ml, 12, 24 Oct 2025); la app usa selects/dropdowns para producto y sucursales y campos vacíos con asterisco de requerido. Divergencia de control, no solo de estilo.
Contenido: Patrón de guardado distinto. Figma tiene “+ Guardar” arriba-derecha y barra sticky inferior (“Tienes cambios sin guardar” + Descartar + Guardar); la app tiene un único botón full-width “Registrar transferencia” dentro de la tarjeta y arriba-derecha muestra “Pantalla completa”. Falta la barra de acción persistente.
Nota: la elección tarjeta-angosta-vs-página y el patrón de acción son decisiones de composición/producto; el residuo accionable propio de la pantalla es la ausencia del campo Fecha, la falta del encabezado de página y la falta de la barra sticky de guardado.
⚠️ Falta diseño — no hay render de Figma exportado — el flujo de recepción está sin diseñar (gap #16)
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Es la misma pantalla (ruta Turnos), no un redirect ni un diálogo, pero la implementación está muy por debajo del diseño: la app es una tabla genérica de turnos por empleado mientras el Figma es el historial de cortes de caja con toda su barra de acciones.
Contenido: faltan subtítulo “Historial de cortes de caja”, tabs (Turnos / Mov. efectivo / Cerrar turno), CTA primario Abrir turno, buscador, chips de filtro (Todos / Abiertos / Cerrados) y el dropdown “Selecciona una opción”. La app solo trae el botón Filtros (y un Pantalla completa que no está en el diseño).
Layout / tabla: el Figma tiene columna de selección (checkbox), avatares por fila y acción de editar; la app no tiene ninguna. Columnas distintas: Figma = Turno# / Cajero / Apertura / Vendido / Dif. / Estado; app = Empleado / Sucursal / Estado / Apertura / Diferencia. Distinto modelo de datos (corte por turno vs turno por empleado).
Estados: badge “Abierto” diverge en color y estilo — Figma = chip verde soft (#70D6B4 sobre tinte); app = relleno azul sólido #3B82F6 (rol info). Convendría alinear “Abierto” al tratamiento soft del design system.
Color (marca): el azul primario del Figma es #0052CC; en la app los controles outline (Filtros / Pantalla completa) leen un azul más brillante (~#3978D6/#5288DB antialias), no el #0052CC canónico. Verificar que el botón use primary.main.
Bien resuelto: título #1F2933, cabecera de tabla #F7F9FC, divisores hairline #E5E7EB, badge neutro #EBEBEB y badges de diferencia con tokens *-soft correctos (success #10B981, warning #F59E0B, error #EF4444) — los fixes sistémicos llegaron.
Paginación: Figma usa paginación numerada custom (“Mostrando 1–5 de 96”, 1 2 3 … 10); la app usa el TablePagination de MUI (“Filas por página / 1–7 de 7”). Diferencia de patrón, probablemente decisión de producto.
❌ Las imágenes no corresponden a la misma pantalla.
FIGMA: página completa “Turno #88 · Corte Z” de un turno cerrado — tarjeta Resumen (Cajero Sofía Ramírez, Apertura Hoy 08:00, Cierre Hoy 16:00, Fondo inicial $1,500, Ventas efectivo $4,200, Retiros −$2,000, Efectivo esperado $3,700, Diferencia $0.00) y botón “Reimprimir corte”. Es el reporte Z ya emitido.
APP:diálogo/panel de detalle de un turno abierto (badge “Abierto”, “Pendiente de cierre”) superpuesto a la tabla de turnos — Ana Gómez · Sucursal Centro·term-01, Conciliación de Efectivo con Efectivo Esperado/Contado en “—” y Diferencia “Pendiente de cierre”, Movimientos “Sin movimientos”, Notas “Turno matutino en curso”.
Desajuste de flujo: el turno de la app sigue abierto, por lo que no existe un Corte Z que renderizar; además es diálogo, no página. Para auditar paridad hay que recapturar un turno cerrado abriendo su vista de Corte Z (la página con Resumen + Reimprimir corte).
No listo diferencias de estilo por tratarse de pantallas distintas. Nota lateral: el azul de marca sí aparece aplicado en la app (badge, “Pantalla completa”, nav activo), pero no es comparable aquí.
Ambos paneles muestran el flujo Abrir turno con el teclado de fondo de caja: es la misma pantalla. El Figma la maqueta como tarjeta centrada dentro del chrome admin (sidebar + top bar); la app la renderiza como página fullscreen de terminal (sin sidebar, con “Bloquear ahora” y “Cancelar”). Es la conocida decisión sistémica página-vs-card embebida — pendiente de producto, no la repito como defecto de estilo.
Color: El azul de “Cancelar”, “Bloquear ahora” y el borde de foco del input se ve consistente con el canónico #0052CC; no pude medir el pixel (herramienta de muestreo caída por outage del clasificador) — dejar como verificar medición.
Tipografía: Título “Abrir turno” en gris oscuro (#1F2933) y subtítulo “Cuenta el fondo de caja inicial” en gris medio (#6B7280): jerarquía correcta, fix aplicado.
Bordes: Teclas del keypad y el input con hairline claro (~#E5E7EB): coincide con el fix de bordes/campos.
Estados: Botón “Abrir turno” deshabilitado en gris (bg #E5E7EB + texto #9CA3AF) porque el monto es $0.00 — el fix de disabled se ve aplicado; en Figma aparece activo/azul por estar con $1,500.00 (diferencia de estado, esperada).
Contenido: La app omite el bloque de identidad Terminal POS-01 / Cajero Sofía R. que el Figma coloca bajo el título; en su lugar la app muestra input editable “Fondo de caja”, enlace “Cancelar” y pie “Gerente Demo”. Evaluar si se agrega la meta Terminal/Cajero en la vista de terminal (terminal-shift-open).
Iconos: Teclas del keypad en la app van en cajas outlined redondeadas; en Figma los dígitos son planos (solo backspace enmarcado). Residuo menor de estilo del KeypadKey en esta pantalla.
Layout: Columna de contenido angosta centrada en viewport muy ancho (mucho whitespace lateral); propio de la página fullscreen de terminal, no de la tarjeta compacta del Figma.
❌ Las imágenes no corresponden a la misma pantalla.
Panel FIGMA: página “Cerrar turno · Corte Z” renderizada dentro del shell administrativo completo (sidebar “Terminales” + topbar con búsqueda y perfil). Contenido: tarjeta “Conteo de efectivo” (Efectivo esperado $5,800.00 / Efectivo contado $5,780.00 / Diferencia −$20.00), tarjeta “Ventas por método” (Efectivo, Tarjeta, Saldo, Total vendido $8,250.00) y acciones “Imprimir corte (Z)” (outline) + “Cerrar turno” (primario). Es una vista de resumen / corte Z ya calculado.
Panel APP: pantalla de terminal (shell POS, sin sidebar; botón “Bloquear ahora” arriba a la derecha) titulada “Cerrar turno” con subtítulo “Cuenta el efectivo por denominación”. Contenido: “Desglose de efectivo contado” con tabla de denominaciones ($1,000 → $0.50), cada una con input en 0 y subtotal $0.00; Total contado $0.00, Efectivo esperado $2,300.00, Diferencia −$2,300.00; campo “Notas (opcional)” y botón “Cerrar turno” deshabilitado. Es el paso de captura por denominación, no el resumen.
Causa: el par asocia el diseño de resumen Corte Z (admin) con la captura screenshots/terminal-shift-close.png (terminal, conteo por denominación). Ese contenido de denominaciones corresponde más bien a W65 (admin-pos-shifts-close). Para re-auditar W35 hay que recapturar la vista de resumen/corte Z equivalente, o re-mapear W35 a la pantalla de terminal correcta. No se listan diferencias de estilo porque los paneles no muestran la misma vista.
Es la misma pantalla (tabla admin de Movimientos de caja), no hay redirect ni paso distinto del flujo. Los fixes sistémicos SÍ llegaron a esta captura, el residuo es de composición/contenido propio de la pantalla.
Color: Verificado en la captura: azul de marca #0555CD (≈#0052CC) en badge de campana y botón Filtros; verde éxito #10B981 y rojo error en montos; cabecera de tabla #F7F9FC. Sin residuo de color.
Contenido: Falta el CTA primario azul relleno ‘+ Nuevo movimiento’ (la app solo tiene ‘Pantalla completa’ outline) — no hay acción de crear movimiento.
Contenido: Toolbar recortada: faltan campo de búsqueda, control segmentado Todos/Entradas/Salidas y el select ‘Selecciona una opción’; solo queda ‘Filtros’.
Layout: Columnas divergentes. Figma: checkbox · Movimiento (avatar+nombre) · Cajero · Motivo · Monto · Autoriza · Estado · editar. App: Tipo · Turno (+emp) · Monto · Motivo · Fecha. Faltan selección por fila, avatar, columna Cajero, columna Autoriza e icono de editar.
Estados: Sin StatusBadge de Estado (Registrado/Autorizado soft) en la app; el chip ‘Tipo’ es un pill neutro outline (#C3C3C3), no un status badge tintado.
Componentes: Paginación distinta — Figma numerada custom (‘1–5 de 42’, 1 2 3 … 10) vs TablePagination de MUI (‘Filas por página 7’, ‘1–7 de 7’). Decisión de componente pendiente.
Color: Montos coloreados verde/rojo en la app (mejora semántica razonable) frente a montos en negro con +/- en Figma; alinear criterio.
Resumen: tokens sistémicos correctos; el gap es de paridad estructural/funcional (CTA, filtros, columnas de estado/cajero, paginación).
❌ Las imágenes no corresponden a la misma pantalla.
Panel Figma: es la página admin de “Movimientos de caja” (la misma usada en W36): sidebar de navegación a la izquierda, barra de búsqueda superior, título “Movimientos de caja / Entradas y salidas del turno”, botón “Nuevo movimiento”, chips Todos/Entradas/Salidas + Filtros, y una tabla (Movimiento · Cajero · Motivo · Monto · Autoriza · Estado) con badges de estado y paginación “Mostrando 1-5 de 42”.
Panel App: es el formulario de terminal “Movimiento de efectivo”: subtítulo “Registra una entrada o salida de efectivo”, control segmentado Entrada/Salida/Depósito/Retiro, campo Monto ($0.00), teclado numérico, textarea “Motivo”, botón “Registrar” (deshabilitado) y enlace “Cancelar”.
Causa: el manifest empareja figma-w36-movimientos-caja.png (diseño admin) con screenshots/terminal-shift-cash-movement.png (pantalla de terminal). No hay un diseño Figma del formulario de terminal; se reutilizó el de W36. Sin diseño de referencia correcto, no procede auditar color/tipografía/espaciado.
Acción: conseguir/generar el Figma del formulario de terminal (teclado + Monto) para W36b, o reasignar esta captura. La verificación de los fixes sistémicos queda pendiente hasta tener el par correcto.
Nota: no se pudieron tomar mediciones de color (bash bloqueado por clasificador no disponible); el veredicto se apoya en la estructura del composite, que es inequívoca.
Misma pantalla (Cerrar turno / Corte Z, desglose por denominación). Los tres KPIs coinciden en valores ($12,450.00 / $4,500.00 / $7,950.00) y los fixes sistémicos de color llegaron a esta vista.
Color: Azul de marca correcto en nav activo (“Turnos y caja”), chip “Tienda demo” y botón “Pantalla completa” (#0052CC). Residuo: el valor “Efectivo esperado” va en azul de realce en Figma pero la app lo pinta en texto oscuro #1F2933 como los otros KPIs — falta el tinte.
Layout: Diferencia principal — Figma empaqueta las 11 denominaciones en dos columnas compactas; la app las apila en una sola columna full-width, lo que baja mucho la densidad y empuja el totalizador y el botón fuera de pantalla. Revisar el grid del componente de cierre de turno.
Espaciado / Composición: Cada fila de denominación en la app se extiende a todo el ancho (monto izq. · input centro · resultado $0.00 extremo derecho) con divisor hairline; Figma usa el formato inline compacto “$1,000 × 2 = $2,000.00”.
Contenido: Título unificado en Figma (“Cerrar turno · Corte Z”) vs. título + subtítulo en la app (“Cuenta el efectivo por denominación (Corte Z)”) — reordenamiento menor, aceptable. Los conteos prellenados de Figma vs. ceros en la app son solo datos.
Verificar: Total contado / Diferencia (−$15.00) y botón “Cerrar turno (Z-Report)” quedaron bajo el fold en la captura; no auditables aquí. Recapturar a mayor alto.
Nota herramientas: imgtool/Bash no disponibles esta sesión; colores evaluados por lectura visual de ambos paneles, no muestreados en px.
Color: Fix sistémico confirmado — medí #0052CC en el botón “Nuevo”, en el subrayado del tab activo y en los chips de rol; sin rastro del azul viejo (#0057B8).
Contenido (título): App titula “Empleados” sin subtítulo; Figma titula “Personal” con contador “8 empleados · 3 roles”. Falta el contador.
Contenido (toolbar): Faltan el campo de búsqueda, el control segmentado Todos/Activos/Invitados y el select “Selecciona una opción”; la app solo expone “Filtros”.
Contenido (CTA): App “Nuevo” vs Figma “Invitar usuario” con icono +. Falta el glifo y la etiqueta correcta.
Contenido (columnas): App = Usuario/Sucursal/Rol/Activo/Fecha de Creación; Figma = Empleado/Rol/Tienda/Ventas/Turnos/Estado. Faltan Ventas y Turnos; el Estado (StatusBadge Activo/Invitado/Inactivo) se reemplazó por un icono booleano “Activo”; se añadió “Fecha de Creación” que no está en el diseño.
Iconos (filas): Faltan los avatares con iniciales por fila y la acción de editar (lápiz) por fila que sí aparecen en Figma.
Estados: El Rol se pinta como chip azul (Gerente/Supervisor) en la app; en Figma es texto plano — decoración de más respecto al diseño.
Contenido (datos): Sucursal muestra IDs crudos “store-1/store-2” en lugar de nombres legibles (“Tienda Centro/Norte/Sur”); mock por revisar.
Layout (paginación): App usa TablePagination de MUI (“Filas por página 7 · 1–5 de 5”) frente a la paginación numerada del diseño (“Mostrando 1–5 de 8 · 1 2 3 … 10”); además “7 filas/página” con solo 5 filas y total 5 es inconsistente.
Bordes: Cabecera de tabla medida en blanco (#FFFFFF) en vez del gris tokenizado #F7F9FC; los hairlines #E5E7EB de separación sí están presentes.
❌ Las imágenes no corresponden a la misma pantalla.
Panel FIGMA: página completa de edición de empleado. Header “Empleado / Datos, rol y acceso” con botón Guardar superior; dos tarjetas planas — Datos personales (Nombre completo, Correo, Teléfono) y Acceso (Rol, Tienda, PIN, Estado) — y una sticky save bar inferior (“Tienes cambios sin guardar” · Descartar · Guardar).
Panel APP: la captura no es esa página, sino un drawer lateral derecho montado sobre la lista de Empleados (se ven Filtros y las filas Ana López, Bruno Martínez, etc. detrás). Sus campos son Sucursal, Usuario, Rol, PIN más un switch Activo, con acciones Cancelar / Guardar al pie del drawer.
Desajuste de composición: página vs. drawer. No es solo el conocido debate diálogo-vs-página: además difiere el contenido — la app no tiene Nombre completo, Correo, Teléfono, Tienda ni Estado, y añade Sucursal, Usuario (select) y el toggle Activo que la página Figma no muestra.
Fixes sistémicos (medidos en el drawer, sí llegaron): azul de marca #0052CC en Guardar; switch activo #0051CA; Cancelar como botón secundario blanco con borde. El azul canónico está aplicado.
Acción: recapturar la página/empleados/nuevo (o /[id]/editar) que corresponde a este diseño Figma, en vez del drawer de alta rápida de la lista de Empleados. Sin esa captura no puede auditarse la paridad real de la pantalla W38.
El fix sistémico de color SÍ llegó a esta pantalla; el residuo es de composición/jerarquía propio de la lista de usuarios. (El diálogo de invitación que diseña el Figma se audita en W39b — aquí comparo la página lista.)
Color: Verificado OK — azul canónico #0052CC en botón Invitar usuario, Filtrar, Nuevo y pills Propietario/Administrador; pill gris #EBEBEB, lápiz #757575, papelera #EF4444, header de tabla #F7F9FC. Sin residuo de color.
Layout: El botón Invitar usuario es un banner azul full-width enorme, mientras Figma lo tiene como botón compacto en el header superior-derecho. Rehacer como acción de header.
Jerarquía: Tres primarios azules rellenos compiten en la misma vista (Invitar usuario + Filtrar + Nuevo). Figma tiene UN solo primario; “Filtros” es un botón secundario/outline. Degradar Filtrar/Nuevo a secundario.
Contenido: Falta el page header (título de página + subtítulo con conteo, p.ej. “8 empleados · 3 roles”) que abre la pantalla en Figma; la app salta del top bar directo al banner.
Contenido: Faltan los filter chips (Todos / Activos / Invitados) que Figma coloca sobre la tabla.
Espaciado: El bloque “Buscar” (label + campo vacío) queda desconectado a la izquierda mientras Filtrar/Nuevo viven al extremo derecho; Figma integra búsqueda y filtros en una sola toolbar.
Estados: La columna Activo usa círculos negros rellenos (check/x) — muy pesados y fuera del lenguaje; Figma usa status chips soft (Activo/Invitado/Inactivo). Migrar a StatusBadge sobre tokens *-soft.
Iconos: Las filas no muestran avatar/iniciales en la celda Nombre; Figma sí (CO, SA, PA…). Añadir Avatar en tinte con iniciales primary.
Contenido: Columnas distintas (app: Nombre/Correo/Rol/Sucursal/Activo/Fecha/Acciones vs Figma: Empleado/Rol/Tienda/Ventas/Turnos/Estado) — decisión de modelo de datos; la sección “Invitaciones pendientes” es un añadido funcional válido no presente en Figma.
Los fixes sistémicos llegaron y los medí en esta captura: nada de regresiones de token.
Color: OK. Borde de campos #E5E7EB, fondo del botón deshabilitado #E5E7EB (exacto), subtítulo #6B7280, título ~#1F2933. El banner azul de fondo mide #002966 = #0052CC atenuado por el scrim → azul de marca canónico correcto.
Bordes: OK. Campos con hairline #E5E7EB y radio suave; diálogo con esquinas redondeadas (radio 16 aparente).
Sombras: OK. Scrim plano #7F7F7F sin halo de sombra dura en el borde del diálogo.
Estados: El botón Enviar invitación está deshabilitado (#E5E7EB / texto #9CA3AF) porque la captura es con el formulario vacío; en Figma aparece habilitado (azul, con “Cajero” cargado). Es la diferencia de estado por el momento de captura, no un defecto de estilo.
Layout: Residuo propio de la pantalla — la app usa una plantilla de diálogo distinta a la de Figma: título centrado (Figma lo alinea a la izquierda), sin botón X de cierre, y acciones como dos botones a todo el ancho en lugar de compactas alineadas a la derecha. El diálogo es bastante más grande y con más aire vertical que el compacto de Figma.
Contenido: La app muestra un subtítulo (“Se enviará un correo…”) en lugar de los “Texto de ayuda” bajo cada campo del diseño. El campo Rol es un select con asterisco requerido *; en Figma es un campo de texto con valor “Cajero” y sin marca de requerido.
Tipografía / Espaciado: Sin regresiones de token; el mayor aire vertical viene de la plantilla de diálogo genérica (padding de acciones amplio), no de un valor roto.
Recomendación: alinear la plantilla del diálogo (título a la izquierda + X, acciones compactas a la derecha) y decidir a nivel producto helper-text vs subtítulo y select-vs-texto para Rol.
Misma pantalla (matriz de roles Cajero/Supervisor/Gerente). Los tokens sistémicos están correctos; el residuo es de composición y contenido faltante propio de esta vista.
Color: Fixes confirmados por muestreo — tab activo y underline #0052CC (450,228), icono de nav activo #0052CC, título #1F2933 (292,144), subtítulo ~#767D8B, cabecera de tabla #F7F9FC, borde/divisor #E5E7EB. Nada que corregir aquí.
Contenido: Falta la columna Ámbito del diseño (etiquetas Tienda/Comercio con color) — pérdida semántica real, no solo estética.
Contenido: Falta toda la barra de herramientas del diseño: buscador, chips de filtro (Todos/Cajero/Supervisor), botón Filtros y el select “Selecciona una opción”.
Contenido: Falta el Alert informativo “Matriz de solo lectura” (la app lo reduce al subtítulo “Solo lectura”) y la paginación (“12 permisos · 3 roles”, páginas 1…10).
Contenido: El botón primario “Ver documentación” del diseño se sustituyó por “Pantalla completa”; la app además introduce tabs Empleados/Roles que el Figma no plantea.
Iconos/Estados: Los checks de la app son verdes #32AE60 (854,328) frente a los checks neutros del Figma; el guion “—” (deshabilitado) coincide en gris. Diferencia de criterio, probablemente aceptable pero no fiel al diseño.
Layout: La app muestra más filas de capacidades (lista larga con scroll) en lugar de la tabla paginada de 5 permisos del diseño; densidad y jerarquía de tabla por lo demás consistentes con los tokens.
Misma pantalla (Reportes → Resumen): tabs Resumen/Ventas/Comisiones/Cortes Z, subtabs Ventas/Productos/Empleados, 4 KPI cards, gráfico “Ventas por hora” (línea), “Por método de pago” (barras) y tabla “Top productos”. Los fixes sistémicos llegaron a esta pantalla.
Color: Azul canónico verificado — barras y glifo del icono KPI en #0052CC; tint de tab activa #E1E9F6 (≈ #E6EEFA); delta en verde. Correcto.
Tipografía: Label KPI en gris #6B7280, valor en #1F2933 oscuro. OK.
Bordes: Cards planas con hairline #E5E7EB, sin sombra. OK.
Contenido (KPIs): El set de métricas difiere del diseño — app muestra Venta bruta / Venta neta / Transacciones / Ticket promedio; Figma diseña Ventas del periodo / Transacciones / Ticket promedio / Comisiones. Falta la card Comisiones. Dato/config de reporte.
Contenido (delta): Figma muestra el % real (“▲ 8% vs periodo”); la app muestra el placeholder “▲ Periodo seleccionado” sin porcentaje en las 4 cards.
Layout/Estados: El control de rango de fechas usa inputs <input type=date> nativos (dígitos en fuente del sistema + glifo de calendario del navegador) dentro de un pill, en vez del dropdown único estilizado “1 Oct – 24 Oct, 2025” del diseño → rompe la paridad tipográfica del control. Culpable: componente de rango de fechas de Reportes.
Layout: La app agrega un selector “Sucursal Centro” y un botón outlined “Pantalla completa” que no están en el Figma (adiciones de la implementación, no defecto de estilo).
Iconos: El cuadro del icono KPI va en tint de marca con glifo #0052CC; en Figma se ve más neutro/gris. Diferencia mínima.
❌ Las imágenes no corresponden a la misma pantalla.
FIGMA (diseño): “Reporte de ventas · Desglose del periodo” — tabla de líneas de producto con tabs (Por producto / Por categoría / Por empleado / Por método), columnas Producto · SKU · Categoría · Ingresos · Unidades · Tendencia, selección por checkbox, botón Exportar y paginación (Mostrando 1–5 de 248).
APP (implementación): “Ventas del Día · Resumen diario del punto de venta” — otro reporte del módulo: filtros Fecha / Sucursal, tarjetas KPI (Venta Bruta $22,691.98 · Venta Neta $18,494.51 · Transacciones 179 · Ticket Promedio $103.32), gráfico de barras Ventas por Hora y sección Productos Más Vendidos. Incluye botón “Pantalla completa”.
Ruta a corregir: la captura apunta a la vista de dashboard diario, no al desglose de ventas por producto que diseña W56. Hay que recapturar la ruta correcta (tabla con tabs y Exportar) antes de poder auditar paridad de estilos.
No se listan diferencias de color/tipografía/bordes porque no hay pantalla equivalente que comparar.
Los fixes sistémicos llegaron a esta pantalla (medidos sobre la captura nueva). El único residuo real es el estilo del control de filtros.
Color: azul de marca correcto en todo — Exportar #0052CC, checkbox de fila y select-all #0052CC, tinte de avatar con inicial primary. Chips de estado en pills soft reales (verde #ECFDF5, ámbar, rojo) que coinciden con Figma.
Estados: tabs de filtro divergen. Figma → chip activo en tinte #E6EEFA + texto azul, y Servicios/Tarjeta como pills grises #F0F4F8. App → Todas como botón sólido #0052CC con texto blanco, y Servicios/Tarjeta como texto pelado sin pill. Es el hallazgo principal; probable ToggleButtonGroup/Tabs con variante equivocada.
Estados: el checkbox select-all de la cabecera muestra indeterminado (correcto por la selección parcial de 1 fila); Figma lo dibuja vacío. Matiz menor, la app es más correcta.
Bordes: cabecera de tabla #F7F9FC, fila seleccionada #EBF1FB, divisores hairline #E5E7EB — todo alineado.
Contenido: el dropdown derecho trunca a “Selecciona una …” vs. el placeholder completo en Figma; el ícono de editar va dentro de un icon-button con borde sutil vs. glifo pelado en Figma. Ambos menores.
Layout: 5 filas, mismos importes, “Mostrando 1-5 de 18” y paginación 1 2 3 … 10 idénticos. La app se captura solo-contenido (sin sidebar/AppBar) — diferencia de captura conocida, no de pantalla.
❌ Las imágenes no corresponden a la misma pantalla.
Panel Figma: vista Cortes de caja (Z) — “Histórico de cortes Z”. Es una lista/tabla con columnas Corte · Cajero · Fecha · Vendido · Diferencia · Estado, chips de filtro (Todos / Cuadrados / Con diferencia), buscador, botón Filtros, botón Exportar, fila seleccionada con checkbox, StatusBadges (Cuadrado/Diferencia), avatares con iniciales y paginación “Mostrando 1–5 de 96”.
Panel App: vista de detalle de un único corte Z — cabecera con selector Turno 2 · cerrado, botones Imprimir y Pantalla completa, y una tarjeta con el desglose del reporte: Ventas (Venta Bruta/Neta, Impuestos, Descuentos), Formas de Pago, Cancelaciones y Conciliación de Efectivo. No hay tabla ni listado.
Desajuste: la captura corresponde a un paso distinto del flujo (el reporte individual que se abre desde la lista), no al histórico que diseña el Figma. Hay que recapturar la ruta de la lista de cortes Z (probablemente Reportes → Cortes de caja Z) para poder auditar paridad.
No listo diferencias de color/tipografía/espaciado porque no son la misma pantalla; cualquier medición sería engañosa.
⚠️ Falta diseño — no hay render de Figma exportado — ruta legacy duplicada de W55; decidir si se retira
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Misma pantalla (Pago de servicios), no es captura equivocada. Los arreglos de estilo llegaron bien; el residuo es de composición/contenido.
Color: Azul de marca correcto y medido: botón Vaciar y Total = #0052CC exacto; ícono JMAS en info #3B82F6; disabled del botón Continuar #E5E7EB bg + #9CA3AF texto. Todo conforme a la remediación.
Estados: El item de nav Servicios activo usa gris neutro #EBEBEB en lugar del tinte de marca #E6EEFA de Figma — el palette.primary.light no llegó al selected del ListItem del shell (sidebar compartido). Finding real aunque sea shell-level.
Layout: Falta por completo la barra de pestañas del diseño (Servicios / Tiempo aire / Pines / Transferir / Depósitos / Wallet). La app va directa al contenido de Servicios.
Contenido: La tarjeta izquierda difiere de paradigma: Figma = Categoría (chips Luz/Agua/Gas/Internet/Teléfono/TV) + fila de Proveedor único (CFE); la app = grid de proveedores (CFE, JMAS Juárez, Telmex, Gas Natural) con íconos de color, sin chips de categoría. Decisión de producto pendiente, pero es la mayor divergencia visible.
Estados (captura): La app está en estado vacío (Importe placeholder “Consultar adeudo”, Total $0.00, Continuar disabled) mientras Figma muestra estado lleno ($688.00, botón activo “Agregar a la venta”). Diferencia de estado + etiqueta de botón (Continuar vs Agregar a la venta).
Bordes/Sombras: Tarjetas y campos con hairline #E5E7EB y sin sombra — coincide.
Tipografía: Título oscuro y subtítulo ~#6B7280 — coincide; misma jerarquía de encabezado.
❌ Las imágenes no corresponden a la misma pantalla.
Ambos paneles son la ruta “Tiempo Aire”, pero muestran pasos distintos del flujo, así que no procede una auditoría de estilo lado a lado.
Panel FIGMA: página única de recarga ya compuesta — subtítulo “Recargas de saldo”, sección Compañia con proveedores como chips cuadrados pequeños con avatar de letra (Telcel, Movistar, AT&T, Unefon, Bait), grilla Monto ($10–$500) con $50 seleccionado, y panel derecho Captura con “Número de teléfono”, “Total (incl. comisión) $51.00” y botón “Agregar a la venta”.
Panel APP: solo el primer paso del asistente — subtítulo “Telcel, AT&T, Movistar y más”, encabezado “Selecciona el proveedor” con tarjetas grandes con ícono de teléfono y subtítulo “México” (Telcel, AT&T, Movistar, Unefon, Virgin Mobile, OXXO Cel), y panel derecho Resumen de compra con Monto/Comisión/Total a cobrar en $0.00 y botón “Continuar” (deshabilitado). No hay grilla de montos ni captura de teléfono en esta vista — presumiblemente aparecen en un paso posterior.
Diferencias de fondo (no de estilo): lista de proveedores distinta (Bait vs Virgin Mobile/OXXO Cel), proveedor como chip vs tarjeta, montos y captura presentes en Figma pero ausentes en la app, “Captura/Agregar a la venta” vs “Resumen de compra/Continuar”.
Fix sistémico verificado en esta captura: el azul de marca del botón “Vaciar” mide #0052CC (canónico) — la remediación llegó a esta pantalla.
Para re-auditar paridad hace falta recapturar la app en el mismo paso que diseña el Figma (proveedor + monto + captura en una sola vista) o alinear el diseño de Figma con el asistente por pasos de la app.
⚠️ Diferencias menores — misma pantalla; los fixes sistémicos llegaron, el residuo es copy y estado de captura.
Color: Azul de marca correcto y medido: botón Vaciar #0052CC, texto Total (incl. comisión) #0052CC, deshabilitado bg #E5E7EB. Glifos de marca (Netflix #E50914, Spotify verde, GP azul) son tintes propios de cada brand, correctos.
Estados: La captura de la app está en estado vacío por defecto (ninguna marca seleccionada, Total $0.00, botón “Agregar a la venta” deshabilitado). El Figma muestra estado lleno (Netflix + $200 seleccionados). No es un defecto, son estados distintos del mismo flujo.
Contenido: La grilla “Denominación” ($100–$1,500) NO está ausente por bug: VasSaleScreen.tsx:720 la renderiza solo tras elegir marca. Como la captura no tiene marca seleccionada, no aparece — verificar su estilo/selección requiere una captura con marca elegida.
Tipografía/Contenido: Copy divergente vs Figma — título “Tarjetas de Regalo” (app) vs “Tarjetas de regalo”; subtítulo “iTunes, Google Play, Spotify y más” vs “Pines digitales” del mock. Definido en vas.i18n.ts:118-119; parece decisión de producto, no defecto de estilo.
Bordes/Sombras: Tarjetas Marca y Captura planas con hairline, sin sombra pesada; coincide con la remediación.
Layout: Estructura de dos columnas (selector izquierda + panel Captura derecha) coincide con el Figma. La fila “Total” usa un contenedor gris suave #F9FAFB (el Figma lo deja sobre blanco) — diferencia mínima de énfasis, aceptable.
Misma pantalla: formulario “Transferir saldo” (Destinatario / Monto / Concepto / Saldo disponible / Continuar) en ambos paneles. La remediación sistémica llegó bien a esta vista.
Color: Azul de marca canónico confirmado — el valor del saldo mide #0052CC (sample 935,505). Texto de etiquetas/heading #1F2933. Todo correcto.
Estados: Único residuo real. En Figma el botón Continuar aparece como CTA azul primario (estado de reposo del diseño); en la app está deshabilitado — bg #E5E7EB + texto #9CA3AF (sample 760,577/595). Es coherente con el nuevo estilo disabled del sistema y con la regla de negocio (form vacío), pero la captura no muestra el CTA azul del diseño. Diferencia de estado, no de estilo.
Bordes: Campos con hairline #E5E7EB y relleno blanco, alto tipo size small — coincide con el fix de form fields. La tarjeta contenedora muestra una sombra suave en la esquina inferior en vez del hairline plano puro del diseño; residuo menor de elevación.
Contenido: El placeholder de Destinatario difiere: Figma usa el ejemplo “Comercio Norte”, la app “ID del comercio”. Wording, no estructura.
Color (tinte): La tarjeta “Saldo disponible” mide #EBF1FB, un pelín más saturada que el info-soft #EFF6FF de la spec; diferencia imperceptible.
Layout / Tipografía: Composición, orden de campos, jerarquía y densidad coinciden. Sin sombra en botones. Sin hallazgos.
Nota: la geometría diálogo-vs-página no aplica aquí (ambas son página completa).
Ruta:— (paso dentro de /admin/transfers) · Figma:132:10125 · Historia: US-VAS-5
Diseño Figma
Captura de la app
⚠️ Falta captura — paso de confirmación, requiere captura del flujo completo
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
⚠️ Diferencias menores — misma pantalla (Saldo del comercio, layout de dos columnas + lista de movimientos). Los fixes sistémicos llegaron y están medidos; el residuo es de contenido/composición, probablemente ligado al modelo de datos real.
Color: Azul de marca #0052CC confirmado por muestreo en las tres tarjetas de saldo (default/cargando/vacío). Botón Depositar en clara #EBF1FB con texto azul, igual que Figma. Página #F5F7FA, tarjetas blancas con hairline. Sin regresiones de tema.
Contenido (principal): Figma muestra “Cuentas bancarias” — lista de bancos vinculados (BBVA ••••4821, Santander ••••9930) con filas de navegación (chevron). La app la reemplaza por “Resumen de la cuenta” (Total abonado / Total retirado / Saldo pendiente). Es una sección/feature distinta; la de cuentas bancarias no está presente. Verificar con producto si es intencional.
Estados: La captura es un showcase con tres estados (con datos, cargando con skeleton #F0F4F8, y vacío “Aún no hay movimientos”). Todos correctos; Figma solo diagrama el estado con datos.
Color (montos): Los importes de la lista se pintan con verde/rojo semántico en la app; en Figma los montos (−$2,000.00 / +$10,000.00) son neutros #1F2933. Divergencia menor de criterio — decidir si el color semántico se adopta como estándar.
Contenido (tarjeta de saldo): La app agrega el enlace secundario “Retirar · Próximamente” bajo Depositar, ausente en Figma.
Tipografía/Bordes: Jerarquía y hairlines #E5E7EB consistentes; encabezado de resumen y filas con divisores correctos.
Misma pantalla; los fixes sistémicos llegaron. El residuo es propio de la tabla (columna de acciones extra y densidad).
Color: Azul de marca canónico verificado — #0052CC medido en botón “Nuevo depósito”, tab activo “Todos” y outline de “Filtros”. Badge “Pendiente” sobre tinte soft #FFFBEB (rol success/warning suave presente). Botón verde de acción #10B981 y “Rechazar” con outline rojo #F48282 (tokens de éxito/error, no comparables contra Figma porque el diseño no tiene esos botones).
Estados: Tratamiento de la columna Estado inconsistente: solo “Pendiente” es badge con tinte; “Disponible/Aplicado/Rechazado” salen como texto plano de color. Figma usa texto de color plano para todos. Unificar a StatusBadge sobre tokens *-soft en la celda Estado del listado.
Contenido: La app agrega una columna “Acciones” con botones “Marcar disponible” / “Rechazar” para filas pendientes, ausente en Figma (que solo tiene el lápiz de edición). Es una función de producto; confirmar si debe vivir en la tabla o migrar a menú/acciones por fila para no romper la paridad.
Layout: La columna extra comprime el ancho y hace que el Folio se parta en dos líneas (“DEP-\n1042”) como link azul; Figma lo muestra en una línea, texto oscuro. Ajustar min-width de la columna Folio y/o whiteSpace: nowrap.
Bordes: Card plana con hairline, header de tabla #F7F9FC/#F5F7FA y botones-icono con borde #E5E7EB — coinciden con el diseño.
Estados (fila): Figma muestra la primera fila seleccionada (checkbox + realce); la app no. Diferencia de estado de captura, no de estilo.
Diferencias de datos (fechas “01 feb 2024” vs “24 Oct”, paginación “de 5” vs “de 84”, avatar en tinte azul vs iniciales neutras) no son defectos.
⚠️ Falta diseño — no hay render de Figma exportado — el frame que estaba pareado (123:4532, figma-w46-depositos.png) es la lista de depósitos (W46), no el formulario de alta. Falta exportar el frame del formulario «Registrar depósito».
Notas
⚠️ Falta el frame de Figma del formulario — se despareó la lista.
Panel APP: pantalla de formulario “Registrar Depósito” (W46b) — alerta informativa, campos Canal de depósito, Banco de Depósito, Fecha, Número de Referencia, Monto Depositado (MXN), Cuenta de Origen y Notas Adicionales, columna “Comprobante” con carga de archivo, y barra de acciones Cancelar/Continuar. Es la pantalla correcta del título.
Panel FIGMA: el frame que estaba pareado (123:4532, figma/screens/figma-w46-depositos.png) es la lista de depósitos (W46), no el formulario. Se despareó para no comparar dos pantallas distintas; la celda de Figma queda como hueco documentado con un TODO(human) para exportar el frame del formulario «Registrar depósito» y volver a emparejarlo.
Nota lateral (no bloqueante): el botón Continuar de la app mide #0052CC, confirmando que el azul canónico llegó a esta pantalla.
⚠️ Falta diseño — no hay render de Figma exportado — el nodo 231:3 existe en Figma pero no se exportó a design/web/screens/
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
⚠️ Falta diseño — no hay render de Figma exportado — nodo 232:157 sin exportar
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
⚠️ Falta diseño — no hay render de Figma exportado — nodo 233:383 sin exportar
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Ruta:— (modal en el POS) · Figma:233:279 · Historia: US-CLI-1
Diseño Figma
Captura de la app
⚠️ Falta diseño — no hay render de Figma exportado — nodo 233:279 sin exportar
⚠️ Falta captura — modal, requiere captura desde el POS
Notas
⛔ Comparación no posible — faltan las dos imágenes. No hay render de Figma exportado ni captura de la app, así que no hay nada que comparar. El motivo de cada gap está en las celdas de arriba. Primero hay que resolverlo (exportar el frame y/o construir la pantalla); recién ahí tiene sentido auditar paridad.
Ruta:— (modal en el POS) · Figma:233:383 · Historia: US-CLI-1
Diseño Figma
Captura de la app
⚠️ Falta diseño — no hay render de Figma exportado — nodo 233:383 sin exportar
⚠️ Falta captura — modal, requiere captura desde el POS
Notas
⛔ Comparación no posible — faltan las dos imágenes. No hay render de Figma exportado ni captura de la app, así que no hay nada que comparar. El motivo de cada gap está en las celdas de arriba. Primero hay que resolverlo (exportar el frame y/o construir la pantalla); recién ahí tiene sentido auditar paridad.
TERM / WL — Comercios, tiendas, terminales y white-label
Misma pantalla (listado de Comercios). Los fixes de color sistémicos llegaron, pero queda residuo de composición y un badge sin tokenizar.
Color: Azul de marca correcto — botones medidos en #0052CC (1050,135 / 1250,135). Cabecera de tabla #F7F9FC y grises tokenizados presentes. ✓
Estados: Los badges de Estado son píldoras de relleno sólido saturado con texto blanco (verde #10B981, ámbar #F59E0B, rojo Suspendido). El fix de StatusBadge sobre tokens *-soft NO alcanzó esta columna; deberían ser tinte suave, no fill pleno. Culpable probable: el badge del listado de merchants no usa StatusBadge/tokens soft.
Espaciado/Bordes: Botones sobredimensionados — miden ~70px de alto (y≈110→180), muy por encima del ramp canónico (~52 large). Además hay dos botones grandes (Filtrar + Nuevo) donde Figma lleva un único primario compacto + Nuevo comercio.
Layout: Falta el encabezado de página Comercios + subtítulo “Organizaciones que administras” (la app solo muestra el label “Buscar”). Faltan las sub-tabs Comercios / Tiendas / Apariencia y la fila de pills de filtro Todos / Activos / Suspendidos con botón Filtros.
Contenido: Faltan checkboxes de selección de fila, el icono de editar por fila y el estado de fila seleccionada (tinte azul) que sí trae el Figma; tampoco aparece el pie de paginación (“Mostrando 1–3 de 3” + pager).
Contenido (dato/producto): Columnas distintas — app: Nombre / Razón Social / Estado / Categoría / Balance / Fecha de Creación; Figma: Comercio / RFC / Tiendas / Saldo / Empleados / Estado. Probable decisión de modelo de datos, no de estilo; se señala pero no bloquea. Los chips de Categoría (outlined) están correctos.
⚠️ Falta captura — formulario, requiere captura con un comercio abierto
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
Es la misma ruta (Administración › Comercio y tiendas), y los fixes sistémicos SÍ llegaron a esta pantalla — el residuo es de contenido/composición, no de tokens.
Color: Correcto. Botón primario medido #0052CC; cabecera de tabla #F7F9FC; título de fila #1F2933; página #F5F7FA. Coincide con la remediación.
Bordes: Chips (MXN/USD) y contenedores con hairline limpio; sin sombras. OK.
Contenido: El modelo de tabla es otro. Figma lista Tienda · Dirección · Terminales · Ventas mes · Empleados · Estado; la app lista Nombre · Moneda · Zona Horaria · Fecha de Creación. Faltan por completo las métricas de negocio (terminales, ventas, empleados) y la acción de editar por fila.
Layout: Faltan controles del diseño: tabs Todas/Abiertas/Cerradas, buscador inline y el Select de la barra de filtros (la app solo tiene “Filtros”). Falta el subtítulo contador (“3 tiendas · 1 comercio”). Aparece un botón Pantalla completa que no está en Figma.
Iconos: Faltan los avatares con iniciales por fila (CO/SA/PA…) que el Figma usa como columna Tienda.
Estados: Faltan los StatusBadge de estado (Abierta verde / Sin turno rojo). La app no expresa el estado de la tienda.
Tipografía: Terminología divergente: la app dice Sucursales / Crear Sucursal; Figma dice Tiendas / Nueva tienda.
Espaciado: Paginación estilo MUI (“Filas por página · 1–6 de 6” con flechas) en vez de la paginación numerada (1 2 3 … 10) del diseño.
La mayor parte de este residuo es decisión de producto/datos (qué columnas y controles expone la vista de tiendas), no de estilo; conviene alinear el modelo de tabla y los controles con el Figma.
⚠️ Falta captura — formulario, requiere captura con una tienda abierta
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
Misma pantalla (listado Terminales), pero la composición de la app se aleja bastante del diseño. Los tokens sistémicos sí llegaron; el residuo es propio de esta pantalla (estructura y contenido).
Color: Verificado — botón Nuevo de la app = #0052CC, idéntico al Vincular terminal de Figma (#0052CC). Tinte de cabecera de tabla presente (~#F7F9FC). El azul de marca canónico está bien cableado aquí.
Contenido: El modelo de datos difiere fuerte. Figma: Terminal (nombre POS-01 + avatar iniciales), Tienda, Última conexión, Versión, Estado. App: Número de Serie (+ modelo), Tipo, Sucursal, Activa, Última Conexión, Vincular terminal. Faltan avatares de iniciales por fila y el subtítulo “5 terminales vinculadas”.
Layout: Toolbar de filtros incompleta — la app solo renderiza Filtros. Faltan el input Buscar..., los tabs segmentados (Todas / En línea / Fuera de línea) y el select Selecciona una opción.
Estados: Falta la columna Estado con StatusBadge sobre tinte suave (Figma: En línea #ECFCF5 verde, Fuera de línea rojo, amarillo). La app la sustituye por un único icono check/x en Activa, perdiendo la semántica de color por estado.
Layout (CTA): Composición distinta — Figma pone Vincular terminal como CTA principal arriba; la app usa Nuevo arriba y mueve Vincular terminal a un botón outlined por fila. Además la app añade un botón extra Pantalla completa que no está en el diseño.
Layout (paginación): Figma usa paginador numerado (Mostrando 1–5 de 5 + 1 2 3 … 10, página activa en azul relleno). La app usa TablePagination de MUI (Filas por página 7 · 1–5 de 5 · flechas) — patrón diferente al diseñado.
Acción de fila: Figma tiene icono de edición por fila; la app tiene botón Vincular terminal outlined por fila.
Nota: la disyuntiva componente-MUI-vs-diseño-custom (paginación, chips de estado) es en parte decisión de producto; el residuo accionable aquí es reponer el buscador + tabs de estado + columna Estado con badges de tinte suave y los avatares/subtítulo.
⛔ Comparación no posible — falta la captura de la app. El diseño existe pero no hay implementación capturada; el motivo está en la celda de la derecha (pantalla no construida, estado/modal que el harness no alcanza, o ruta inexistente). Siguiente paso: si la pantalla existe y el harness no llega, agregar su entrada en e2e/screenshots/targets.ts y correr pnpm screenshots; si no está construida, es un gap de implementación, no de paridad.
Color: Azul de marca canónico verificado en esta captura — Guardar/icon-buttons/swatch primario/banner ‘Tu Comercio’ = #0052CC, Cobrar #0354CC (≈ igual). Acento diverge por dato de mock: Figma azul #1A73E8 vs app teal #00A3A3; no es defecto de estilo.
Tipografía: $12,450.00 en #1F2933, ‘Saldo disponible’ en gris secundario. Sin residuo.
Bordes: Hairline de tarjetas #E5E7EB confirmado; campos y dropzone con borde correcto.
Estados: Switch ‘Tema oscuro disponible’ aparece OFF (gris, thumb blanco 18px) mientras Figma lo muestra ON (azul) — diferencia de estado/dato, ambos renderizan bien.
Layout/Contenido: Dropzone: la app suma icono ‘+’ y botón outlined ‘Seleccionar archivos’ (Figma sólo icono compartir); hint distinto (Figma ‘CSV, PNG o JPG · hasta 10 MB’ vs app ‘PNG, JPG, WEBP o GIF’). Composición menor. La app además incluye la sección ‘Recibo / Encabezado del recibo’ (parte ‘+ recibo’ del alcance) que el crop de Figma no muestra — contenido extra correcto.
Sistémico (1 línea): sidebar con chip ‘Tienda demo’ vs selector ‘Tienda Centro’ de Figma — patrón global, no propio de la pantalla.
Los fixes de la remediación llegaron a esta pantalla; el residuo restante es sobre todo dato de mock (acento/switch) y composición menor del dropzone.
Misma pantalla (perfil “Mi cuenta”). Los fixes sistémicos están presentes y medidos en esta captura; el residuo es propio de contenido/estado, no de estilo.
Tipografía: Título/labels #212B35 ≈ #1F2933 canónico. Sin observaciones.
Bordes: Hairline #E5E7EB en tarjetas y campos; campo Correo deshabilitado con relleno #E5E7EB. Correcto.
Sombras: Tarjetas y AppBar planas. Correcto.
Iconos: El botón Figma trae glifo “+” (“+ Guardar”); la app solo muestra “Guardar” sin icono.
Contenido: La app añade “Sesiones activas” (2 tarjetas Chrome/Safari con IP y fecha) y la línea “Miembro desde: ene 2026” en la tarjeta de perfil — ninguno existe en Figma. Es contenido de más, no falta.
Estados: Figma muestra los tres campos como placeholders vacíos; la app muestra Nombre/Teléfono con valor y Correo deshabilitado (gris). Diferencia de estado, no de token.
Layout: Las tarjetas de la app ocupan casi todo el ancho del contenido; en Figma la tarjeta “Datos personales” es más angosta. Diferencia de anchura contenida, aceptable.
Re-auditoría post-remediación: la pantalla de Seguridad quedó alineada con el diseño. Los fixes sistémicos llegaron y se miden en esta captura.
Color: Azul canónico verificado — FAB #0052CC, track del Switch 2FA #0052CC, botones outline y enlace Cerrar con label/borde #0052CC. Verde de éxito Esta sesión#10B981, igual que Figma. Sin rastro del viejo #0057B8.
Tipografía: Títulos de tarjeta y filas (Acceso, Contraseña, PIN de cajero) en #1F2933; subtítulos/metadatos en gris secundario. Coincide con Figma.
Bordes: Tarjetas planas blancas con hairline #E5E7EB/#EAECEF sobre fondo #F5F7FA; divisor entre filas de sesiones presente. Correcto.
Sombras: Sin sombra en tarjetas ni FAB — coincide.
Estados: Switch 2FA activo (thumb blanco 18px sobre track azul), geometría 44×24 correcta.
Layout: Composición idéntica — header + subtítulo, tarjeta Acceso (Contraseña/2FA/PIN) y tarjeta Sesiones activas con las dos sesiones y sus acciones. FAB + arriba a la derecha.
Contenido: Todos los textos presentes y correctos.
Único desajuste, esperado y no imputable a la pantalla: el panel APP muestra solo el área de contenido y recorta el sidebar de navegación y la AppBar (buscador, Turno abierto, Sincronizado, avatares) que sí figuran en Figma — es el encuadre del playground, no un residuo de estilo. Nada accionable en esta pantalla.
⚠️ Falta diseño — no hay render de Figma exportado — sin frame; es un requisito de Appwrite (cambiar teléfono exige contraseña)
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Los fixes sistémicos llegaron a esta pantalla y están medidos, no supuestos.
Color: Switch encendido = #0052CC, thumb blanco; switch apagado con track gris y thumb blanco. Botón Guardar azul de marca plano. Todo coincide con la remediación.
Tipografía: Encabezados de tarjeta (‘Preferencias’, ‘Impresión’) y filas en #1F2933; subtítulos en gris. Pestaña activa ‘General’ en azul con subrayado. Coincide.
Sombras: Botón y tarjetas sin sombra dura; tarjetas planas con hairline. Coincide.
Contenido: APP no renderiza el título de página ‘Ajustes’ (H1) que el Figma coloca encima de las pestañas — va directo de la AppBar a las tabs. Añadir el heading.
Layout: Las tarjetas de formulario en APP ocupan todo el ancho del contenido; en Figma están constreñidas a una columna de lectura angosta (~455px), lo que separa mucho el control (switch/select) de su etiqueta. Considerar un maxWidth en el contenedor del formulario para acercar la densidad.
Bordes: Radio de esquina de las tarjetas en APP se ve algo más redondeado (~16) que el casi recto del Figma; residuo menor.
Estados: Campo ‘Idioma’ → select ‘Español (MX)’ presente y alineado a la derecha; coincide en función, con leve diferencia de tratamiento vs. el campo de Figma.
Iconos: El botón Guardar aparece en APP y no se ve en el recorte de Figma (posible fuera de encuadre en el diseño); no es defecto de estilo.
Nota: diferencias de la barra lateral (items/usuario, chip ‘Tienda demo’ vs dropdown ‘Tienda Centro’) son de la nav/mocks, no propias de esta pantalla.
Color: Fixes sistémicos confirmados por muestreo — Exportar y paginación activa #0052CC, cabecera de tabla #F7F9FC, divisores #E5E7EB, avatar en tinte #E5EDFA con iniciales primary. Todo canónico.
Estados: Badges soft reales y correctos — Autorizado #ECFDF5 (verde), Rechazado #FEF0F0 (rojo), Creó producto #FFFBEB (ámbar). StatusBadge sobre tokens *-soft OK.
Layout: La app omite por completo la columna de selección que el Figma diseña: checkbox de encabezado (select-all), checkbox por fila y la primera fila en estado seleccionado (checkbox azul + tinte de fila). Es la diferencia estructural principal — falta la selección masiva (AuditLogTable).
Iconos: El glifo de acción difiere: Figma usa un lápiz-en-recuadro contorneado en gris neutro; la app usa lápiz relleno en azul primary. Alinear glifo y tono.
Contenido: Menores — la columna Fecha del Figma prefija con em-dash “— Hoy 09:31” (app sin él); “Editó precio” muestra “Rechazado” en app vs “OK” en Figma (el texto de la app es más coherente). Conteo y páginas (8 / 2 vs 3,210 / 10) son datos mock, esperado.
Nota sistémica ya conocida: acciones de fila como ícono suelto en vez de botón etiquetado — decisión de producto pendiente, no se recuenta aquí.
⚠️ Falta diseño — no hay render de Figma exportado — organismo Filter Bar, sin frame de pantalla
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Color: Botón primario medido en #0052CC exacto — el fix sistémico del azul llegó a esta pantalla. Tinte de fila no-leída #E5EDFA ≈ #E6EEFA de Figma; filas leídas en blanco; fondo de página #F5F7FA idéntico. Punto/dot de no-leído en azul de marca. Sin residuo de color.
Iconos: Residuo propio. La app envuelve todos los glifos en un badge circular de tinte suave; en Figma solo la fila de avatar (‘Nuevo empleado’) lleva círculo y las de venta/stock muestran el icono desnudo sobre la fila. Además hay glifos distintos: venta carrito→recibo, transferencia doble-flecha→flecha simple, corte de caja documento→reloj. Revisar el mapa icono↔tipo de notificación de la pantalla.
Contenido: Figma agrupa por ‘Hoy’ / ‘Ayer’ (dos secciones con divisor); la app colapsa todo en una sola sección ‘Anteriores’. Es diferencia de datos/timestamps del mock, no de layout — verificar que la lógica de agrupación por día se ejerza con datos reales.
Layout / Tipografía / Bordes: Coinciden — título + subtítulo, tabs ‘Todas/No leídas/Ventas/Stock’ con activo azul y subrayado, filas con badge+título+subtítulo y hora alineada a la derecha, hairline #E5E7EB entre filas y tarjeta plana. Sin sombras espurias.
Estados: El destacado de no-leído (tinte + dot) se reproduce en las dos primeras filas tal como en Figma.
Misma pantalla (detalle de notificación) y remediación sistémica confirmada sobre la captura nueva. El contenido difiere solo por el mock (Figma muestra una alerta de inventario “Stock bajo”, la app una “Venta completada #1029”): es la misma plantilla, no un desajuste de paridad.
Color: Botón primario medido #0052CC (canónico). Rol “Sistema” y enlaces de acción en azul (#0857CD/#0052CC). Fondo de página #F5F7FA, tarjeta blanca. Todo dentro del sistema.
Tipografía: Título 600 oscuro, meta gris, cuerpo #1F2933; etiquetas de campo (Tienda/total) en gris con valor en oscuro. Jerarquía correcta.
Bordes: Tarjeta plana con hairline; breadcrumb con enlace azul + “Detalle” en oscuro. Botón outlined con borde azul y relleno blanco.
Botones: Ramp y estilo correctos — primario relleno + outlined con etiqueta 600, sin sombra; enlaces de texto (“Marcar como no leída”, “Descartar”) a la derecha, como en el diseño.
Iconos: Glifo de tipo (recibo) azul dentro de un avatar en tinte claro; en el diseño el rol Inventario usa un triángulo ámbar (por ser otro tipo de notificación). El contenedor del avatar se ve ligeramente ovalado en el crop — verificar que sea círculo perfecto.
Layout / Contenido: Estructura idéntica (breadcrumb → tarjeta con icono+título+meta+cuerpo → fila de meta → acciones). La fila de meta muestra 2 columnas vs 4 en Figma por el mock distinto; no es residuo de la pantalla.
⚠️ Diferencias menores — misma pantalla (paleta global ⌘K). Figma muestra el estado con consulta escrita (“coca”) y resultados agrupados; la app captura el estado vacío (“Escribe al menos 2 caracteres para buscar”), así que las filas de resultado, section-headers y el tint de fila activa no son auditables aquí.
Color: Fix sistémico CONFIRMADO en esta captura — el anillo de foco del input mide #0052CC exacto (canónico). Fondo del diálogo #FFFFFF, scrim de dim gris detrás correcto.
Bordes: El divisor hairline bajo el input y el radio del diálogo están presentes. OK.
Layout / Estados: Residuo propio de la pantalla — el buscador se renderiza como TextField MUI con caja redondeada y anillo de foco azul de 2px, mientras que Figma lo diseña como barra de comando sin borde (solo icono + texto con divisor a todo el ancho debajo, sin caja ni anillo). Alinear el input de la paleta al estilo command-bar.
Contenido: Falta el pill “ESC” arriba a la derecha del input que sí trae Figma.
Espaciado: Diálogo anclado más alto (pisa el banner de promo) y algo más angosto que el diseño, que lo centra y le da más ancho. Ajuste menor de posición/ancho.
Nota de cobertura: para cerrar la paridad hace falta recapturar el estado poblado (con query) y validar ahí el tint de fila activa (#E6EEFA), los tiles de icono en tinte y la tipografía de títulos/subtítulos.
❌ Las imágenes no corresponden a la misma pantalla.
Figma (diseño): dashboard analítico de retail/POS — saludo “Hola, Victoria 👋”, selector de fecha “Hoy”, 4 tarjetas KPI (Ventas hoy $8,450.00, Transacciones 128, Ticket promedio $66.01, Productos vendidos 342 con deltas vs ayer), gráfico de línea “Ventas por hora”, donut “Categorías” y tabla “Ventas recientes” con checkboxes, SKU, precio, stock y badges de estado.
App (implementación): dashboard de pagos/billetera — banner promocional azul “0% Comisión en Pagos”, sección “Acciones Rápidas” (Tiempo Aire, Tarjetas de Regalo, Pago de Servicios, Transferir saldo), tarjeta lateral “Saldo Disponible $24,567.50 MXN” con Retirar Saldo, “Resumen Semanal” y “Más Opciones”.
Comparten únicamente el sidebar (misma app, ítem “Inicio” activo, mismos grupos OPERACIÓN/CATÁLOGO/EQUIPO/FINANZAS/ADMINISTRACIÓN). El área de contenido no tiene correspondencia alguna.
No listo diferencias de color/tipografía/espaciado: al ser pantallas distintas, cualquier comparación de estilo sería ruido. Se necesita recapturar la ruta correcta del dashboard analítico (o confirmar qué pantalla debe vivir en “Inicio”).
⚠️ Falta diseño — no hay render de Figma exportado — bloque del dashboard W07 convertido en ruta; sin frame propio
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
⚠️ Falta diseño — no hay render de Figma exportado — pantalla legacy sin frame
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Sin historia de usuario — rutas técnicas y de desarrollo
Ruta:/admin/playground · Historia: — (herramienta de parity)
Diseño Figma
Captura de la app
⚠️ Falta diseño — no hay render de Figma exportado — herramienta interna; es la superficie desde la que se capturan los átomos/moléculas/organismos de abajo
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Ruta:/playground · Historia: — (herramienta de parity)
Diseño Figma
Captura de la app
⚠️ Falta diseño — no hay render de Figma exportado — herramienta interna
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Ruta:/ui-preview · Historia: — (herramienta de parity)
Diseño Figma
Captura de la app
⚠️ Falta diseño — no hay render de Figma exportado — herramienta interna
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Los renders de Figma vienen de design/web/{atomic,molecules,organisms}/. Las capturas reales
todavía no existen: la superficie para tomarlas es /admin/playground (dev-only, mock data),
que renderiza cada componente del DS en todos sus estados. Ese es el mismo enfoque bottom-up que se
usó en móvil (átomos → moléculas → organismos → pantallas) antes de auditar las pantallas.
Color: Tinte del avatar de iniciales #E6EEFA medido en la app — idéntico al de Figma (#E6EEFA). Iniciales “JP” en azul de marca (núcleo ~#1761D1→#0052CC sobre el tinte); coincide con las iniciales primary del diseño.
Contenido: El avatar “con imagen” resuelve con círculo sólido #0052CC (azul canónico) + glifo de persona blanco — el fix de brand-blue llegó a esta pantalla.
Estados: La rampa de tamaños S/M/L está presente y crece proporcionalmente, como en Figma (que muestra tres tamaños de iniciales).
Tipografía: Iniciales centradas, peso alto, legibles en los tres tamaños; consistente con el diseño.
Layout: Figma solo muestra las tres variantes de iniciales; la app añade “con imagen” y “fallback” como showcase — no es un desajuste, es superset del catálogo.
Residuo: ninguno accionable. El avatar “con imagen” muestra placeholder de glifo en lugar de foto real, pero es contenido de showcase, no defecto de estilo.
Misma pantalla: los 4 banners (info / success / warning / danger) están en el mismo orden y con el mismo contenido en ambos paneles. Los fixes sistémicos de tinte llegaron a esta atom y están medidos.
Color: Tintes soft idénticos al hex — info #EFF6FF, success #ECFDF5 (Figma #ECFCF5), warning #FFFBEB, danger #FEF2F2. Coinciden con Figma píxel a píxel.
Iconos: Rol/color por variante correcto: info azul #3B82F6 (círculo relleno), success verde #25BF8C, warning ámbar #F5A720, danger rojo #F05454/#EF4444. Coincide con la paleta canónica.
Tipografía: Jerarquía correcta — título en el color del rol (peso semibold) + cuerpo en texto oscuro. Igual que Figma.
Layout: Estructura idéntica — icono a la izquierda, título+cuerpo, cierre arriba a la derecha. Estructura y densidad concuerdan (escalas distintas, no comparo px absolutos).
Residuo (menor, no bloqueante): El glifo de cierre difiere — Figma usa un icono estilo tecla “borrar/backspace” en gris redondeado; la app usa una × simple. Diferencia de icono trivial, misma posición/función.
Nota de captura: Las etiquetas en versalitas (INFO/SUCCESS/WARNING/DANGER) son del showcase/playground, no de la atom — no es defecto del componente.
Color: Filled #0052CC (default), #003D99 (hover y pressed) — medidos idénticos en Figma y app. Tonal #E6EEFA con texto #0052CC. Disabled #E5E7EB en ambos. Todo cableado por palette.primary.
Bordes: Outlined con borde azul 1px sólido; tarjetas/estados con radio redondeado consistente entre ambos.
Iconos: El showcase usa un ícono de caja registradora (POS) donde Figma muestra un carrito — diferencia de ejemplo del showcase, no defecto.
Estados: Las 4 variantes (Filled/Tonal/Outlined/Text) cubren default/hover/pressed/disabled/loading; el spinner de loading aparece en todas. Figma organiza loading como fila-variante y la app como columna-estado — decisión de layout del showcase, cobertura funcional equivalente.
Layout: Tonal pressed mide levemente más azulado en la app (#BAD0EF) que en Figma (tinte gris #E5E7EB); residuo menor de tinte de estado, dentro de tolerancia.
Color: Azul de marca canónico confirmado — el glifo indeterminate mide #0052CC exacto; el checked comparte el mismo relleno (muestreo #548BDD por la mezcla con el check blanco central). Figma también dominado por #0052CC. Sin residuo de azul.
Bordes: Unchecked con trazo hairline #D5D9DE (spec ~#D1D5DB) — variación despreciable. Geometría de esquina redondeada custom del checkbox presente en los tres estados, igual que Figma.
Iconos: Check blanco y guion (indeterminate) blancos, centrados, coinciden con el diseño.
Estados: La app añade disabled (relleno atenuado + texto #9CA3AF) y error (texto rojo de ayuda) que Figma no muestra — es un showcase superset; los tres estados canónicos del átomo casan.
Layout: Figma solo diseña los 3 glifos del checkbox; el panel app los expone dentro del playground junto a Radio/Switch. El átomo en sí coincide; sin acción pendiente propia de esta pantalla.
Color (activo): El chip activo está clavado — bg tinte de marca #E6EEFA y etiqueta #0052CC (azul canónico), idéntico a Figma. Fix sistémico verificado en esta captura.
Color (inactivo): bg medido ~#EBEDF0 (gris neutro MUI) vs #F0F4F8 de Figma (gris levemente más frío); diferencia de tinte imperceptible. Texto #6B7280 (secondary), correcto.
Bordes: Píldora totalmente redondeada, filled sin borde en ambos estados — coincide.
Estados: Se representan los dos estados que diseña Figma (inactivo/activo). La app los organiza con rótulos INACTIVO/ACTIVO; Figma los muestra lado a lado — mismo contenido y jerarquía.
Tipografía: Etiqueta “Categoría”, peso medio; consistente entre paneles.
Sombras: Plano en ambos — sin residuo.
Sin hallazgos accionables propios de la pantalla; el matiz del inactivo es opcional (alinear tinte a #F0F4F8 si se busca paridad exacta, pero es cosmético).
Color: Coincide. Campos blancos, texto de valor #1F2933, hairline medido #E5E7EB/#E6E8EC, icono de adorno de calendario #9CA3AF y estado disabled #E5E7EB — todos alineados con la paleta remediada.
Tipografía: Coincide. Label estático arriba (Desde/Hasta ~#666D75 ≈ secundario), secciones CLOSED/OPEN/DISABLED en gris; valores en dark. La única diferencia textual es el uso de ejemplo, no defecto.
Bordes: Coincide. Campos blanco + hairline redondeado, alto ~40. El pill de Figma usa radio mayor (pastilla), pero es consecuencia del patrón, no un token distinto.
Iconos: Coincide. Icono de calendario gris #9CA3AF (adorno); en Figma también aparece el chevron gris #9CA3AF que la app no muestra (ver Layout).
Estados: Coincide. Se muestran closed / open (placeholder DD/MM/YYYY) / disabled con el patrón de deshabilitado correcto (#E5E7EB + texto atenuado).
Layout: Residuo real. Figma define un único control combinado: [icono calendario] "1 Oct – 24 Oct, 2025" [chevron] que despliega el calendario. La app lo implementa como dos inputs de fecha nativos separados (Desde/Hasta) sin pill combinado, sin resumen de rango en una sola línea y sin chevron de despliegue. Es una diferencia de patrón/estructura, no de tokens. Verificar el componente de showcase en src/ui (playground DateRangePicker) si se desea converger al pill único de Figma.
El playground muestra el mismo átomo que diseña Figma: el FAB en sus dos estados (collapsed con glifo +, expanded con glifo ×), que son exactamente los dos círculos del panel Figma.
Color: medido #0052CC en los dos círculos Figma y en ambos FAB de la app (collapsed 985,278 → #0253CC; expanded × 1204,300 → #0152CB). Azul de marca canónico confirmado post-remediación; el mini-FAB de acción también en #0047C8/#0052CC.
Iconos: glifo blanco (+ / ×) centrado, proporción correcta (~20px); coincide con el spec.
Bordes: círculo perfecto, sin borde; correcto.
Sombras: el FAB lleva una sombra suave que se corresponde con el glow difuso del diseño Figma; sin residuo.
Estados: collapsed→expanded cablea la transición +→× tal como muestran los dos estados del diseño.
Contenido: el backdrop gris y las mini-acciones (Cobrar / Buscar producto / Imprimir) del estado expanded son composición del SpeedDial, no aparecen en el crop atómico de Figma; no es defecto de paridad.
Color: Contenedor circular del icono en #E6EEFA (palette.primary.light) medido igual en ambos paneles; glifo en azul de marca #0052CC (Figma y app). src/ui/atoms/FileUpload/index.tsx usa primary.light/primary.main. Coincide.
Tipografía: Título en negrita oscuro (subtitle2, text.primary) y subtítulo/hint en gris tenue (caption, text.disabled #9CA3AF) según diseño. Coincide.
Bordes: Zona con borde 2px dashed sobre theme.palette.divider (#E5E7EB); estado ERROR conmuta a error.main#EF4444 medido. Botón outlined 1px sólido de marca. Coincide.
Iconos: El glifo difiere (app usa Plus, Figma un icono de compartir), pero el contenedor tintado + color de marca coinciden — icono de adorno, no defecto. Papelera del chip en #0052CC como adorno.
Layout: El chip de archivo es plano con hairline (divider) y papelera a la derecha, como el patrón de tarjeta plana. El showcase expone estados EMPTY/HOVER-DRAG/WITH-FILE/ERROR.
Estados: El subtítulo de formatos/tamaño (“CSV, PNG o JPG · hasta 10 MB”) existe vía prop hint (text.disabled); el showcase simplemente no lo pasa — decisión del showcase, el componente lo soporta. Sin residuo real.
Color: Borde focus medido #0052CC en app = azul de marca de Figma. Relleno disabled #E5E7EB idéntico. Estado error en rojo en ambos (Figma ≈#EE3030, app #F05252 — misma familia, sin residuo real). Ayuda gris ~#6D7482 (≈#6B7280).
Tipografía: Label estático en negrita arriba del campo, ayuda y mensaje de error en tamaño menor, coincide en ambos paneles.
Bordes: Campos blancos con hairline y esquinas redondeadas en los cuatro estados; anillo/borde de focus y borde de error consistentes con Figma.
Layout: El showcase apila los estados en vertical con etiquetas DEFAULT/FOCUS/ERROR/DISABLED mientras Figma los muestra en fila horizontal — decisión del showcase, no defecto. Estructura interna del campo idéntica.
Color: Iconos medidos en #0052CC exacto en ambos paneles (Plus, Gear, Info, muestras de tamaño). Azul de marca canónico correcto.
Iconos: FontAwesome Solid, fill-based, ligados a Color, nombres = registro TerminalesIcons — paridad con Figma y con Kotlin/react-icons/fa6.
Espaciado: Grilla de registro con celdas uniformes y etiquetas centradas debajo; escala de tamaños sm 16 / md 20 / lg 24 / xl 32 / xxl 40 legible.
Estados: Swatches de la sección Colors mapean a tokens canónicos medidos: primary #0052CC, success #10B981, warning #F59E0B, error #EF4444, text #1F2933.
Layout: Las secciones Registry / Sizes / Colors son estructura del showcase de /playground; el set de iconos de ejemplo distinto respecto a Figma es decisión del showcase, no residuo.
Ambos paneles muestran el mismo átomo (IconButton con glifo de tienda) en sus tres variantes × tres estados. El Figma los presenta en una fila continua de 9 tiles; la app los organiza en una matriz etiquetada Standard / Outlined / Ghost × Default / Pressed / Disabled — misma cobertura semántica, solo cambia el andamiaje del showcase (no es defecto del componente).
Color: Todos los tokens post-remediación están presentes y medidos en la captura nueva:
Pressed sólido = #0052CC (idéntico al azul de marca del Figma, medido en ambos).
Tinte de fondo default/pressed-suave = #E6EEFA (coincide con el tinte del Figma).
Disabled: fondo #E5E7EB + glifo #9CA3AF (tokens de disabled correctos).
Icono activo azul en Outlined/Ghost default y pressed = #0052CC.
Estados: Standard=fondo tinte→sólido, Outlined=blanco con hairline→tinte, Ghost=transparente→tinte. La progresión default→pressed→disabled es consistente con las tres columnas del Figma.
Iconos: El glifo (store) coincide; en Standard pressed va en blanco sobre el sólido, igual que el tile azul del Figma.
Bordes: Outlined en la app usa hairline muy tenue (~#E5E7EB) sobre blanco; concuerda con el tile blanco-con-borde del Figma. Diferencia de contraste marginal, no accionable.
Layout: Único residuo — el Figma es una tira lineal y la app una grilla con headers; decisión de presentación del playground, no del átomo.
Sin hallazgos accionables; la remediación sistémica (azul #0052CC, tinte #E6EEFA, disabled #E5E7EB/#9CA3AF) llegó completa a esta pantalla.
Color: Estado pressed medido con tinte de selección #E6EEFA y glifo/dígito en azul de marca #0052CC — patrón de selección con tinte correcto (idéntico en fila Dígito y Acción). Default blanco #FFFFFF con dígito #1F2933; disabled con dígito #9CA3AF. Todo alineado con la remediación (palette.primary.light + azul marca).
Tipografía: Dígito en peso bold, coherente con Figma.
Bordes: Tecla con esquinas redondeadas suaves, igual que el diseño; default con hairline sutil sobre fondo claro.
Iconos: Fila Acción (backspace) replica los tres estados con el mismo esquema de color que la fila Dígito.
Estados: default / pressed / disabled presentes y consistentes con el patrón de tinte canónico.
Layout: El showcase agrega la fila Acción y etiquetas de estado (DEFAULT/PRESSED/DISABLED) — decisión del showcase, no defecto. Figma muestra las variantes en horizontal sin etiquetas; sin residuo del componente.
Color: El dot lleno mide #0052CC en ambos paneles — azul de marca correcto (verificado, no re-reportado). El estado error es #EF4444 (palette.error.main), consistente.
Bordes: Único residuo real — el borde del dot vacío mide #E5E7EB en la app (usa theme.palette.divider) vs #D1D5DB en Figma, un paso de gris más oscuro (el mismo tono que el borde de checkbox/radio sin marcar). Confirmado en src/ui/atoms/PinDot/index.tsx:54 (2px solid ${theme.palette.divider}). Cambiar a palette.grey[300]/#D1D5DB para paridad exacta del anillo vacío.
Color: Módulos medidos en #1F2933 (tinta oscura canónica), igual que el Figma (#1F2933 medido). Quiet zone blanco #FFFFFF en ambos. Sin negro puro fuera de token.
Layout: App muestra el atom en tres tamaños (S/M/L) sobre tarjeta blanca con esquinas redondeadas y fondo #F5F7FA del playground; el panel Figma es un crop ampliado de un solo código, por eso no se compara contenedor a escala.
Bordes: Tarjeta contenedora con radio redondeado y hairline suave, coherente con el patrón de tarjetas planas.
Iconos: El patrón de módulos difiere (dato codificado y estilo de módulo distinto) — es contenido de ejemplo del generador, no defecto.
Estados: N/A para este atom.
Sin residuo real; el componente cumple la paridad tras la remediación.
Color: Punto seleccionado medido #0052CC, idéntico al de Figma (#0052CC). Anillo no-seleccionado gris claro ~#D1D5DB, coincide con el ring canónico de Figma.
Bordes: Geometría redondeada correcta en ambos: no-seleccionado = anillo gris con relleno blanco; seleccionado = anillo azul + hueco blanco + punto azul central. Igual que Figma.
Estados: DEFAULT, SELECTED y DISABLED reproducen el patrón de Figma (disabled atenuado #9CA3AF). El estado ERROR (label roja + helper “Selecciona un método”) es un extra del showcase — Figma solo ilustra default/seleccionado; no es defecto.
Layout: Radio + label alineados, mismo patrón de selección con tinte/relleno de marca. Sin residuo.
Color: El único residuo medible es la superficie del campo. Figma muestra el search bar con relleno suave #F0F4F8 y sin borde (estilo filled); el app lo renderiza como #FFFFFF + hairline #E5E7EB (src/ui/atoms/SearchField/index.tsx usa TextField con el tema canónico). Esta es la decisión de campo-de-formulario blanco+hairline ya estandarizada en la remediación, por lo que probablemente el #F0F4F8 de Figma sea el lienzo/estilo filled y no un defecto; queda como diferencia de tratamiento (filled vs outlined), no de token.
Iconos: Lupa de adorno #9CA3AF en ambos paneles. ✓
Color: Track gris claro medido en app (#EBEDF0 / #F0F4F8) alineado con Figma (#F0F4F8). Thumb del segmento activo blanco puro (#FFFFFF) en ambos.
Bordes: Thumb con esquinas redondeadas sobre track redondeado — geometría de selección correcta tras la remediación.
Estados: Patrón de selección = thumb blanco (no relleno primary), tal como el canon. El estado DISABLED conserva thumb blanco en el activo y atenúa los labels inactivos; consistente con Figma.
Tipografía: Label seleccionado en tono oscuro y no-seleccionados en gris; jerarquía correcta.
Layout: Tres segmentos (Día/Semana/Mes) en fila dentro del contenedor tintado; misma estructura que el diseño.
Nota: el panel APP añade un segundo grupo DISABLED como showcase de /playground (decisión del showcase, no defecto).
Color: fixes sistémicos verificados en el campo cerrado: relleno blanco, borde hairline #E5E7EB (medido arriba/abajo), texto de opciones #1F2933 (medido). El tinte de selección del Figma es #E6EEFA con check #0052CC (medidos en el diseño).
Estados: el select ABIERTO de la captura conserva borde #E5E7EB mientras el Figma muestra borde azul #0052CC ~2px. El fix existe en código (src/ui/theme/theme.ts:260 → .Mui-focused = primary), pero SelectShowcase.tsx abre el popper con la prop open sin enfocar el input, así que la captura no lo ejercita — agregar foco (o un estado “Focused”) al showcase para poder verificarlo.
Estados: el showcase no tiene ejemplo con valor seleccionado; la afordancia de opción seleccionada del Figma (fila con tinte #E6EEFA + etiqueta azul + check #0052CC a la derecha) no está implementada: no hay override MuiAutocomplete en el theme ni renderOption con check en src/ui/atoms/Select/index.tsx (el default MUI daría solo tinte rgba primario 8%, sin check ni texto azul).
Iconos: chevron del campo en #757575 (action.active default de MUI, medido) vs. gris del sistema (#6B7280) del diseño — mapear el popupIcon al gris frío.
Tipografía: la etiqueta “Fruta” dentro del campo mide #6B7280 vs. placeholder del Figma más claro (#9CA3AF); además MUI usa label flotante en el borde al llenar el campo, patrón que el Figma no dibuja — verificar con un estado lleno.
Layout: en la captura el popper del ejemplo OPEN se solapa con el campo del ejemplo “No results” (los poppers portalan al body) — artefacto del showcase, no del atom.
Contenido: la app muestra además estados No-results y Loading (spinner visible, medido en captura) que el frame de Figma no dibuja — extra correcto, no es defecto.
Color: Relleno medido en app #F0F4F8 / #F1F5F8 / #F2F5F8 = surface-variant canónico #F0F4F8 de Figma. Cableado en theme.ts:407-410 (MuiSkeleton.root.backgroundColor = scheme.surface.variant), fix “Parity finding #16” verificado.
Bordes: Barras y avatar con esquinas redondeadas / círculo, igual que el diseño.
Layout: El showcase muestra las primitivas etiquetadas (LINE/BLOCK/ROW/CARD/TABLE); Figma muestra una composición de página (avatar+líneas, card+líneas). Es la misma primitiva de skeleton — la composición vs. catálogo es decisión del showcase, no defecto.
Estados: La app añade un shimmer/wave animado (gradiente #E8ECF0→#F2F5F8 en BLOCK); es la animación de carga por defecto de MUI, esperada en un skeleton; el screenshot de Figma es estático. Sin residuo.
Tipografía: Etiquetas de sección del showcase (#6B7280), no forman parte del componente.
Color: Tintes *-soft verificados por muestreo y coinciden con Figma: success #ECFDF5≈#ECFCF5, warning #FFFBEB, danger #FEF2F2, info #EFF6FF. Textos por rol correctos: success #10B981, warning #F59E0B, danger #EF4444, info azul. Fix de variantes soft confirmado.
Bordes: Pill totalmente redondeado con relleno tintado en las 4 variantes (sin borde duro), igual que Figma.
Layout: El showcase apila vertical con etiqueta de rol (SUCCESS/WARNING/DANGER/INFO) sobre cada badge; Figma los muestra en fila horizontal. Es organización del playground, no defecto del componente.
Estados: Este showcase no incluye la variante neutral gris (Figma tampoco la muestra aquí); nada que reportar.
Salvedad: el histograma global marca 99% fondo porque los badges ocupan <1% del canvas 1440×900; los recortes confirman los pills tintados.
Color: Track ON medido #0052CC en la app, idéntico al azul de marca del Figma; track OFF #D1D5DB en ambos paneles; thumb blanco #FFFFFF verificado. Sin desviación.
Bordes: Forma pill totalmente redondeada con thumb circular blanco, igual que el diseño.
Layout: Thumb a la izquierda en OFF y desplazado a la derecha sobre track azul en ON — reproduce ambos estados del Figma.
Estados: El panel Figma solo muestra OFF y ON; la app añade DISABLED (decisión del showcase), con track gris tenue + thumb azul claro medido #9EBDEB — atenuación coherente con el patrón disabled.
Tipografía: Etiquetas OFF/ON/DISABLED en caps grises y “Notificaciones” en texto oscuro, consistentes con el resto de átomos. Sin residuo real del componente.
Color: Fondo blanco #FFFFFF con borde hairline #E5E7EB medido en el estado default — coincide con el token canónico.
Bordes: Esquinas redondeadas y borde 1px sólido; radios consistentes con Figma.
Estados: Focus con borde azul de marca #0052CC (medido), error con borde #EF4444 + texto de ayuda rojo, disabled con tinte gris y texto atenuado — todos correctos.
Tipografía: Label estático arriba en tono oscuro, placeholder gris — patrón de campo de formulario correcto.
Layout: Figma solo muestra el estado default; el showcase de /playground agrega FOCUS/ERROR/DISABLED (decisión del showcase). El texto de ejemplo distinto es decisión del showcase, no defecto.
Color: Superficie del toast correcta y opaca: medí #1F2933 en Figma y en la app (rol text.primary, patrón “dark” verificado). Texto del mensaje blanco en ambos. ✅
Color (acción): Único residuo real. La acción “Deshacer” en Figma es azul claro medido #7FB0FF; la app la pinta en #E6EEFA (primary.light, src/ui/atoms/Toast/index.tsx → color: dark ? 'primary.light' : 'primary.main'). Ese tinte está pensado como relleno y sobre fondo oscuro lee casi blanco en vez de azul legible. Considerar un rol de azul claro (p. ej. primary.200/un token on-dark) para el CTA sobre superficie oscura.
Iconos: Figma muestra el check de éxito como glifo verde simple (sin círculo); la app usa badges circulares rellenos por estado (rojo/naranja/verde/azul). Es decisión del showcase (variantes de ejemplo), no defecto — colores de rol correctos.
Bordes: Ambos con esquinas redondeadas; el radio de Figma es algo más tipo píldora (~½ alto) y el de la app un rect redondeado un poco menos pronunciado. Diferencia de proporción menor, dentro de tolerancia.
Layout: Estructura idéntica — icono de estado + mensaje (flex-grow) + acción a la derecha. ✅
Estados: Las 4 variantes (info/success/warning/danger) presentes con sus roles de color correctos. ✅
Color: Fondo del tooltip #1F2933 medido en ambos paneles (Figma 66% del pixel-count; app muestreado en la píldora “Arriba” → #1F2933). Opaco, sin transparencia. Texto blanco. Fix de tooltip opaco confirmado.
Iconos: Caret/flecha direccional presente y correctamente orientado en las cuatro variantes (top/bottom/left/right).
Layout: El showcase de /playground demuestra las 4 posiciones alrededor de un botón “Objetivo” (outlined, borde primary) — decisión del showcase, no defecto. El Figma solo muestra un tooltip individual con texto de ejemplo “Editar”.
Tipografía/Espaciado/Bordes: Píldora redondeada con padding compacto, sin borde, coherente con el diseño. Sin residuo real detectado.
Color: Variante primary medida en #0052CC (fondo) con botón tonal #E6EEFA + texto azul — igual que la card azul de Figma. Cards planas blancas para el resto de variantes.
Bordes: Hairline de tarjeta plana en #E5E7EB, radios redondeados; sin sombras. Correcto.
Iconos: Botón “actualizar” con icono de refresco en brand #0052CC; adorno discreto arriba-derecha, coherente con Figma.
Tipografía: “Saldo disponible” en gris secundario, monto en jerarquía fuerte (#1F2933 en cards blancas / blanco sobre primary), sufijo MXN atenuado (#9CA3AF). Sin desvíos.
Estados: Skeleton “cargando” con barra pálida ~#F6F9FB (≈#F0F4F8); estado primary destacado. Todos presentes.
Layout: El panel APP muestra variantes extra de ejemplo (con moneda, crédito $8,000, cargando) que no aparecen en el contexto de Figma — decisión del showcase, no defecto. La estructura label→monto→acción replica la card de Figma.
Color: Barra medida #0052CC en ambos paneles (Figma 52.5% de píxeles, APP 5.5% por ser captura de página completa); azul de marca canónico correcto. Fondo del showcase #F5F7FA.
Tipografía: Bloque apilado “N artículos” (secundario, más claro) sobre “$monto” (blanco, peso fuerte) reproduce la jerarquía de Figma.
Bordes: Esquinas redondeadas (~8px) en ambos; barra plana sin sombra. Coincide.
Iconos: Carrito relleno blanco a la izquierda en ambos paneles. Coincide.
Layout: Icono + texto a la izquierda, CTA a la derecha. Estructura idéntica a Figma.
Estados: El CTA difiere por texto de ejemplo (“Ver carrito” en Figma vs “Cobrar” en la app) — decisión del showcase, no defecto. La app añade una variante “vacío · deshabilitado” (sin referencia en Figma) que atenúa el texto del CTA a gris pero mantiene la barra en azul pleno; comportamiento razonable para el estado, sin residuo del componente.
Color: Avatar con tinte #E6EEFA medido en ambos paneles (canónico palette.primary.light) e iniciales en azul de marca. Nombre #1F2933 (medido #454E56 en bordes por antialias), teléfono gris secundario, chevron #6B7280. Todo alineado.
Iconos: Chevron de acción en gris, coincide con Figma.
Layout: Avatar + bloque nombre/teléfono + chevron a la derecha; misma estructura y proporciones que el diseño.
Estados: El panel APP añade una variante SELECTED con fondo tintado (#E1E9F6, familia primary.light) y esquinas redondeadas — es un estado del showcase que sigue el patrón de selección con tinte, no un defecto. Figma solo muestra el estado default.
⚠️ Diferencias menores(re-auditado tras remediación)
Color: El subtotal difiere. En Figma el $0.00 se renderiza en gris atenuado (medido ~#62696F/#6B7280, tipo text.secondary), claramente más claro que el label $500. En la app el subtotal es oscuro #1F2933 (src/ui/molecules/DenominationRow/index.tsx:85 usa color="text.primary"). Diferencia real pero menor/ambigua (la única muestra en Figma es el estado cero). Se deja como residuo aceptado.
Iconos/Layout: Residuo de operadores cerrado — los separadores × (entre denom e input) y = (entre input y subtotal) ahora se renderizan como glifos text.secondary grises (index.tsx:51-58,74-81), igual que Figma.
Color: Resto coincide — label denominación text.primary oscuro, × y = en text.secondary gris, en ambos paneles.
Bordes: Input blanco con hairline #E5E7EB medido (canónico) y esquinas redondeadas — coincide.
Layout: Fila flex label · × · input · = · subtotal, subtotal alineado a la derecha (ml:auto), ancho de label e input ~96px en ambos.
Tipografía:subtitle2 para label/subtotal, body2 para separadores; coincide con Figma. La diferencia de formato $500 (Figma) vs $500.00 (app) es dato de ejemplo del showcase, no defecto.
Color: Tinte del contenedor de icono medido #F0F4F8 en Figma y app; glifo de adorno #9CA3AF en ambos. Título #1F2933, descripción gris medio (#6B7280, lectura clareada por antialias del texto fino). Botón relleno #0052CC idéntico en los dos paneles; botón outlined con borde y texto azul de marca.
Bordes: Contenedor de icono con esquinas redondeadas + botón outlined con borde sólido 1px; botón relleno sin borde. Coincide.
Iconos: Contenedor tintado con icono de adorno centrado, patrón correcto. El icono de ejemplo difiere (regalo en Figma / etiqueta en la variante “con acciones” del showcase) — decisión del showcase, no defecto.
Layout: Estructura vertical centrada contenedor-de-icono → título → descripción → fila de acciones (outlined + relleno), reproducida fielmente. Las variantes adicionales del showcase (búsqueda vacía, sin descripción) son ejemplos del playground.
Estados: Botones primario/outlined con el patrón cromático correcto; sin residuo detectable.
Color: Botón Reanudar venta tonal medido #E6EEFA con texto azul de marca #0052CC. Avatar SR fill #E6EEFA + iniciales #0052CC. Folio #H-2271 en azul de marca. Nombre/meta en grises canónicos, precio en negrita oscuro. Coincide.
Bordes: Tarjetas planas con hairline #E5E7EB y radio redondeado; chips (Hace 4 min, En espera por…) con borde neutro tipo StatusBadge. Sin sombras pesadas.
Estados: Variante Reanudar deshabilitado con fill/texto disabled gris (#E5E7EB/#9CA3AF) correctamente aplicada; variantes Default y Con artículos consistentes.
Layout: El showcase presenta tarjetas compactas (avatar arriba-derecha, chips en fila, meta como badges) frente a la tarjeta expandida de Figma; es la decisión de composición del showcase, no residuo del componente. Estructura, roles de color y patrón de botón tonal coinciden.
Iconos/Tipografía: Textos de ejemplo (Carlos Méndez, 6 art., LR) distintos por ser datos del showcase; no computa como defecto.
Color: Coincide. Contenedor de icono tintado medido en #E6EEFA en ambos paneles (primary.light). Valor en #1F2933, label gris de adorno (~#9499A4 ≈ #9CA3AF), divisor/borde hairline correcto.
Iconos: Único residuo real — el indicador de delta usa un chevron fino (^/v) en la app, mientras Figma dibuja un triángulo relleno ▲/▼. Diferencia de glifo, no de color. Culpable probable: el icono elegido en src/ui/** para el componente KPI (revisar el render del delta/trend).
Estados: success verde ≈ #17BB84 (app) vs #10B981 (Figma) — mismo rol, tono casi idéntico; danger #EF4444 con tinte *-soft en el contenedor de icono coincide.
Layout: Estructura correcta — label + icono tintado arriba, valor grande tabular, delta con flecha+% abajo. Tarjeta plana con hairline.
Salvedad: las etiquetas/valores de ejemplo distintos por variante (Órdenes hoy / Ingresos del mes / Devoluciones) son decisión del showcase, no defecto.
Color: Contenedor de icono con tinte #E6EEFA y glifo #0052CC medidos idénticos en ambos paneles. Badge Info con fill #EFF6FF (rol info) + texto azul, igual que Figma.
Iconos: Residuo del chevron cerrado — ahora se pinta en azul de marca (primary.main, src/ui/molecules/ListRow/index.tsx:145). En el showcase el chevron es de trazo algo más fino que el de Figma (grosor de icono), diferencia visual menor.
Estados: Pressed = tinte #E6EEFA; Selected = #E1E9F6 (tinte info algo más profundo para diferenciar del pressed) — patrón de selección con tinte redondeado correcto. Los estados pressed/selected extra y las etiquetas de sección son decisión del showcase.
Layout: Estructura icono-tintado + título/subtítulo + slot de trailing (chevron / valor / badge) consistente con el diseño. Las filas del showcase van sobre el fondo #F5F7FA en vez de tarjetas blancas con hairline; es el encuadre del playground, no del componente.
Tipografía: Título en oscuro, secundario en gris y valor $1,234.00 en oscuro — coinciden.
⚠️ Diferencias menores(re-auditado tras remediación — commit d515d29)
Color: Precio azul de marca correcto — medido #0052CC en ambos paneles. Título ≈#1F2933 y hairline #E5E7EB confirmados. Residuo de precio cerrado.
Estados (stock disponible): Residuo cerrado. “24 en stock” ahora se pinta como StatusBadge success (pill verde soft), en vez de caption gris plano (src/ui/molecules/ProductCard/index.tsx:106-118, <StatusBadge status={lowStock ? 'warning' : 'success'}>), reproduciendo la pill verde de Figma. Stock bajo cae a la variante warning (ámbar).
Estados (Agotado): Residuos remanentes (menores, no bloqueantes): la app resuelve “sin stock” con StatusBadge danger en la esquina superior-izquierda sobre la imagen (index.tsx:85-89) más card a opacity 0.6 (index.tsx:64), mientras Figma pone la pill roja debajo del precio a opacidad plena. La atenuación global lava el precio azul. Diferencia de tratamiento/posición, no de token; se deja como residuo aceptado.
Bordes/Layout: Tarjeta plana + hairline, placeholder 1:1 y título coinciden. El borde azul del estado “Seleccionado” es un estado extra del showcase (no en Figma), correcto.
Iconos: Botón “+” relleno sólido azul de marca #0052CC correcto (feature POS onAdd; Figma no lo dibuja); glifo placeholder #9CA3AF es decisión del showcase.
Residuo remanente (aceptado): posición de la pill Agotado (sobre imagen vs bajo precio) y opacity 0.6 de la tarjeta agotada.
Color: Avatar con tinte #E6EEFA e iniciales #0052CC (medido) — patrón avatar tinte+iniciales canónico. Nombre #1F2933, rol gris ~#6B7280 (medido). Tarjeta default blanca #FFFFFF.
Bordes: Estado selected con borde azul de marca #0052CC 1px (medido), sin relleno; default plano con hairline claro. Correcto.
Iconos: N/A — el avatar usa iniciales “AV”, no icono.
Layout: Avatar circular a la izquierda + bloque nombre/rol; dos estados (default / selected) en el showcase. Estructura coincide con el patrón de selección con borde.
Estados: default y selected verificados; el borde marca la selección (no tinte de fondo), consistente con list-row/tarjeta seleccionable.
Salvedad: la referencia Figma del par es la pantalla “Selecciona tu tienda” (tarjetas de tienda); el panel APP es el showcase del molecule ProfileCard con datos de ejemplo “Ana Vega / Gerente de tienda” — el contenido de ejemplo es decisión del showcase, no defecto. Sin residuo real del componente.
Color: Estado Activo medido en app — borde #004FCB ≈ #0052CC (primary.main, 2px sólido) y fondo #E6EEFA (palette.primary.light); Figma activo mide borde #0043C8 / fondo #E6EEFA. Glifo y label recoloreados a primary.main. Default = superficie blanca + hairline divider. Todo cableado por rol en src/ui/molecules/ProviderTile/index.tsx.
Layout: Estructura idéntica a Figma — contenedor de icono redondeado tintado (56×56, radius.md) apilado sobre label centrado; tile 112px min, radius.lg. No es una fila-badge horizontal.
Estados: Default (tinte neutral surface.variant en el contenedor, glifo text.secondary) y Activo (tinte primary.light + anillo 2px + recoloreado a primary) reproducen las variantes Figma “Default”/“Activo”.
Iconos: El showcase usa un glifo tipo tarjeta mientras Figma muestra un teléfono — decisión de icono de ejemplo del showcase, no defecto (icon es prop).
Bordes: Figma dibuja el tile Default con una sombra suave elevada; la app lo aplana a blanco + hairline, coherente con la remediación “tarjetas planas+hairline” — intención de DS, no residuo.
Color: Fondo de botones tintado #E6EEFA (palette.primary.light) e iconos −/+ en azul de marca #0052CC (primary.main), medidos en el panel APP; el dígito central va en tinta oscura. Coincide con el diseño. El origen src/ui/molecules/QuantityStepper/index.tsx cablea primary.light / primary.main correctamente.
Estados: Fila “editable” con ambos botones tintados y “en mínimo” con el − deshabilitado en gris (action.disabledBackground#E5E7EB + text.disabled#9CA3AF) y el + activo azul; replica exactamente las dos filas de Figma (habilitado / − deshabilitado en gris).
Layout: Estructura [−] [valor] [+] con separación uniforme; igual que Figma.
Nota de medición: La fuente Figma (176 px) diluye el azul al reescalar (lecturas ~#145FD0/#F0F4F8), pero es artefacto de resolución, no discrepancia; el APP usa los tokens canónicos correctos.
✅ Coincide(re-auditado tras remediación — commit d515d29)
Color: El TOTAL standalone mide exactamente #0052CC en ambos paneles (azul de marca canónico). El acento se aplica vía tone="primary" en el showcase — no vía emphasis. Decisión de API deliberada: emphasis controla solo peso/tamaño; el color lo decide tone (default = #1F2933, success = #10B981, primary = #0052CC). Así el mismo componente pinta el TOTAL en azul aquí pero oscuro en el POS Cash Tender (cuyo frame lo quiere en tinta oscura), sin regresión cruzada.
Tipografía: Coincide — TOTAL en negrita/mayor (h5) y label en subtitle1; Subtotal en body2/subtitle2. Jerarquía correcta.
Bordes: Coincide — divisor hairline #E5E7EB sobre la fila del total.
Layout: Coincide — label a la izquierda, valor a la derecha, alineación baseline, space-between.
Estados (showcase): La fila “Descuento” en verde #10B981 (tone="success") y el ejemplo negativo −$50.00 son ejemplos del showcase (no en el panel Figma); no son defecto.
Color: Enlaces intermedios #6B7280 (medido) = Figma #6B7280 ✓. Último nivel resaltado #1F2933 = Figma ✓. Fondo showcase #F5F7FA es la superficie del /playground, no defecto.
Iconos: Residuo del chevron cerrado — el separador ahora fija color: 'text.disabled' (#9CA3AF, gris de adorno) en src/ui/organisms/Breadcrumbs/Breadcrumbs.tsx:37, igual que Figma.
Tipografía: Último nivel en peso mayor (bold) tal como Figma; enlaces navegables en regular. Coincide.
Layout/Estados: Patrón trail con separador chevron, último nivel resaltado y aria-current="page" correcto. El showcase muestra dos ejemplos (ruta corta + ruta profunda), decisión del showcase.
✅ Coincide(re-auditado tras remediación — commit d515d29)
Color: Tint de fondo idéntico — Figma #E6EEFA vs App #E6EEFA (medido; theme.palette.action.selected en BulkActionBar.tsx:54). Editar/Exportar en primary #0052CC, Eliminar en rojo. Coincide.
Tipografía: El contador “3 seleccionados” ya se pinta en azul de marca + bold (primary.main, BulkActionBar.tsx:72), igual que Figma. Residuo cerrado.
Bordes: Residuo cerrado — se añadió border: 1px solid primary.main (#0052CC) alrededor de la barra tonal (BulkActionBar.tsx), reproduciendo el contorno azul de Figma en los cuatro cantos.
Iconos: El elemento líder difiere por diseño: Figma muestra un checkbox relleno azul con check (indicador de selección); la App muestra un icono X (afordancia onClear/Xmark, decisión de interacción del componente, no defecto de estilo).
Layout: Estructura coincide — líder + contador (flex:1) + acciones a la derecha, radio redondeado. La segunda fila (“selección amplia”, 12 seleccionados) es variante de demostración del showcase.
Neto: paridad de color, borde y estructura; el único delta es la afordancia líder (X de limpiar vs checkbox), decisión de interacción deliberada.
Color: Barras medidas en #0052CC (azul de marca) en Figma y app; el swatch de la leyenda también #0052CC. Fondo de card blanco. Serie primaria correcta — sin residuo de color.
Bordes: Único residuo real del componente: las barras de la app salen con esquinas superiores rectas, mientras Figma las dibuja con radio superior redondeado (~8-10px). BarChart/index.tsx usa @mui/x-charts sin pasar borderRadius a la serie; agregar borderRadius al <XBarChart> cerraría la brecha.
Layout: El panel Figma es un recorte mínimo (solo título + 5 barras). La app muestra ejes X/Y, gridlines horizontales, ticks y leyenda “Ventas” — pero el propio frame del showcase se rotula “BARRAS CON EJES Y LEYENDA”, así que esa estructura extra es decisión del showcase, no defecto.
Tipografía: Título “Por método de pago” en gris oscuro #1F2933, labels de eje en gris tenue — consistente con los tokens de texto.
Estados: No aplican estados interactivos en esta captura.
Color: Serie medida idéntica en ambos paneles — Bebidas #0052CC (primary de marca), Abarrotes #3B82F6 (info/serie2), Botanas #10B981, Otros #F59E0B. Paridad exacta en las 4 cuñas y en el mismo orden.
Tipografía: Título “Categorías” en gris tinta oscuro (#1F2933) y labels de leyenda en gris; total central “9,500” en bold + “Total” en gris secundario. Consistente con la escala tipográfica.
Layout: Dona (donut) con leyenda vertical a la derecha, marcador circular + etiqueta por serie; misma relación de grosor de anillo. Estructura equivalente.
Iconos: Marcadores de leyenda como puntos rellenos del color de serie — coincide.
Estados: N/A (chart estático).
Salvedad (no defecto): El total central “9,500” es la variante del showcase (su título es “Dona con leyenda y total central”); Figma muestra la dona sin total central. Decisión del showcase.
Residuo menor (cosmético): La app renderiza padAngle (pequeño gap entre arcos) mientras que en Figma los segmentos se tocan sin separación. Diferencia mínima de estilo del donut; no altera color, serie ni jerarquía.
Color: Trazo de la serie medido = #0052CC en ambos paneles (marca), coincide. Relleno de área en Figma medido = #E6EEFA (primary.light) ✅ como tinte, pero ausente en la app.
Layout: Único residuo real — Figma muestra la línea sobre un área rellena (#E6EEFA bajo la curva); la app renderiza línea pura sin relleno. src/ui/organisms/charts/LineChart/index.tsx no pasa area: true a la serie de @mui/x-charts. Fix: activar el relleno con el tinte de marca (alpha de primary.light).
Iconos/Ejes: Ejes (8–16), gridlines horizontales (0–80) y leyenda “Ventas” son de la variante del showcase (“línea con ejes, gridlines y leyenda”), no defecto vs Figma (que es una miniatura sin ejes).
Estados: Variantes Vacío (“Sin datos para mostrar”) y Cargando (skeleton #F0F4F8) presentes y correctas, sin equivalente en la miniatura de Figma.
Tipografía/Bordes: Título “Ventas por hora” #1F2933 y tarjeta plana + hairline coinciden; eje/grid usan text.secondary/#E5E7EB (tokens), OK.
Color: El tint de selección coincide — app #E5EDFA ≈ palette.primary.light#E6EEFA (Figma #E6EEFA). Scrim, tarjeta blanca plana + hairline divider y campo de búsqueda blanco con foco azul: OK.
Iconos: Residuo real — en Figma cada icono de fila va dentro de un contenedor redondeado tintado #F0F4F8; en la app el icono queda desnudo sobre blanco (#FFFFFF medido alrededor). Falta el chip de icono. Culpable: src/ui/organisms/CommandPalette/index.tsx L231–235 (ListItemIcon + Icon sin wrapper tintado). El adorno gris #9CA3AF sí está, pero sin el contenedor.
Tipografía: Los encabezados de sección difieren — Figma usa estilo overline (MAYÚSCULAS + tracking, ~11px, gris #8C9097: “PRODUCTOS”); la app los muestra en Title Case y más grandes (gris #7A7B7D: “Productos”). Causa: ListSubheader sin override (no hay MuiListSubheader en theme.ts; usa el default MUI ~16px sin text-transform). L217.
Layout: Filas de una sola línea en la app vs. dos líneas en Figma (título + metadata: “SKU 750105530 · $18.00”, “24 Oct · $406.00 · Pagado”). El tipo CommandItem no tiene campo secundario y ListItemText sólo pinta primary (L236) — limitación del componente, no sólo dato del showcase.
Estados: Falta el chip ESC dentro del campo de búsqueda (Figma lo muestra a la derecha); el SearchField no lleva ese endAdornment (L196–203). Afordancia menor.
Salvedad: El icono de producto (etiqueta en app vs. caja de regalo en Figma) y la consulta escrita “coca” vs. placeholder son decisiones del showcase, no defectos.
Color: Icono de peligro con contenedor tintado red-soft #FEF2F2 y triángulo #EF4444 medidos idénticos en ambos paneles. Botón Eliminar en relleno rojo sólido #EF4444 (app y Figma iguales). Botón Cancelar outlined con azul de marca (#0556CD app / #0153CC Figma ≈ #0052CC). Título oscuro y cuerpo gris coinciden.
Iconos: Patrón de contenedor tintado + glifo relleno (triángulo de advertencia) correcto y consistente con el resto de organismos remediados.
Bordes: Tarjeta plana blanca con esquinas redondeadas; Cancelar con borde 1px sólido azul, Eliminar sin borde. Coincide.
Layout: Dos botones a ancho completo lado a lado (~50/50), Cancelar izquierda / acción destructiva derecha. Estructura idéntica.
Estados: Botón destructivo en rol danger, secundario outlined — patrón correcto.
Salvedad: Los dos paneles están a escalas muy distintas (Figma 448×308 recorte; app dialog pequeño centrado sobre overlay). La sombra sutil del modal en la app es propia del componente overlay y no es defecto. Sin residuo real que reportar.
Color: Fila seleccionada con tinte #E6EEFA medido en Figma vs #E5EDFA en app (palette.primary.light) — coincide. Divisores #E5E7EB, textos muted grises — OK.
Estados: StatusBadges renderizados como píldoras con tinte-soft: Activo #ECFDF5 (Figma #ECFCF5), Agotado #FEF2F2, Bajo amarillo-soft — coinciden en patrón y tono. Checkbox seleccionado = relleno sólido #0052CC con check blanco y esquinas redondeadas.
Layout: Estructura de columnas (avatar+iniciales / Producto / SKU / Categoría / Precio / Stock / Estado / acción), header hairline y avatar con tinte+iniciales azules coinciden. Estados extra del panel app (Cargando/skeleton #F0F4F8, Vacío con contenedor de icono tintado, Filas seleccionadas + BulkActionBar) son composiciones del showcase, no en el frame de Figma.
Iconos: Salvedad de showcase — el icono de editar se pinta como IconButton variant="outlined" (caja redondeada con borde #E5E7EB) en cada fila, mientras Figma muestra el glyph sin contenedor (la caja sólo aparece en la fila seleccionada/hover). Es decisión del showcase (DataTableShowcase.tsx:150), no defecto del componente DataTable. Sin residuo real del organismo.
Color: Confirmado tras remediación — Guardar cambios #0052CC sólido + texto blanco; Cancelar outlined con borde y texto azul de marca sobre blanco; título #1F2933; ✕ gris (text.secondary); scrim gris. Coincide.
Bordes: Campos con relleno blanco + hairline #E5E7EB redondeado, alto ~40 con label estático arriba. Coincide.
Layout: Residuo real — Figma dibuja un divisor hairline bajo el header y otro sobre el footer; la app los omite (header/body/footer fluyen sin líneas). Culpable: src/ui/organisms/Dialog/index.tsx usa DialogTitle/DialogActions sin borderBottom/borderTop (dividers).
Estados: En Figma el 2º campo aparece enfocado (aro azul); en la app está sin foco con valor “Texto activo”. Es decisión de estado del showcase (DialogShowcase.tsx), no defecto.
Iconos: ✕ de cierre con size={18}, color gris, alineado a la derecha del título. Coincide.
Tipografía: Título bold, labels bold, helper y placeholder en gris. Coincide.
Estructura, tokens y botones ya conformes; único pendiente accionable = añadir los divisores de header/footer.
Color: Trigger “Filtros” medido en #0052CC (borde + texto + icono) en ambos paneles; enlace “Quitar todos” #0052CC. Coincide con azul de marca.
Bordes: Campo de búsqueda blanco #FFFFFF con hairline y botón outlined 1px sólido; dropdown “Selecciona una opción” con hairline. Alineado con canon.
Estados: Badge contador = círculo relleno SÓLIDO #0052CC + “2” blanco (excepción correcta de relleno para contadores). Chips de “Filtros aplicados” con outline hairline y close en gris adorno (~#9CA3AF).
Iconos: El showcase añade icono de hamburguesa antes de “Filtros” (Figma sin icono) — decisión del showcase, no defecto.
Layout: Figma muestra segmented (Todos/Activos/Bajo stock); el showcase lo sustituye por dos filas de búsqueda + fila de chips “Filtros aplicados” — contenido de showcase, no residuo del componente.
Color (nota, no defecto): El campo de búsqueda en Figma trae relleno tintado #F0F4F8; la app lo pinta blanco #FFFFFF, consistente con la decisión canónica de campos blancos+hairline (fix verificado).
Color: Botón primario medido #0052CC en Figma y app; fondo de sección #F5F7FA / #F5F5F5 (escalas distintas, equivalente); subtítulo gris ~#868C98 acorde a #6B7280. Azul de marca ya remediado y verificado.
Tipografía: Título en peso alto y color oscuro (navy ~#1F2933), subtítulo secundario en gris, eyebrow en gris tenue mayúsculas — jerarquía idéntica.
Layout: Patrón título + subtítulo + acción primaria alineada a la derecha coincide. El panel APP muestra además las variantes solo título y con breadcrumbs — decisión del showcase de /playground, no defecto del componente.
Bordes: Botón con esquinas redondeadas y texto blanco + Nuevo producto igual en ambos.
Iconos: Icono + de adorno dentro del botón presente en ambos paneles.
Color: Página activa con relleno SÓLIDO primary — medido #0052CC tanto en app (205,134) como en Figma (65,17), con texto blanco. Es la excepción al patrón de tinte y está bien aplicada.
Estados: Tiles inactivos planos blancos con hairline (#E5E7EB) y numeral oscuro; activo destaca por el relleno azul. Correcto.
Bordes: Esquinas redondeadas en los tiles coinciden; chevrons ‹ › como botones ghost sin relleno.
Layout: El showcase muestra 3 variantes (página actual / primera / última) — decisión del showcase, no defecto. Figma solo muestra el patrón base.
Tipografía: Numerales centrados, peso consistente entre ambos.
Color: Marca #0052CC verificado (PIN dots en Figma, glifo de backspace en ambos). Lock tile warning-soft #FFFBEB + glifo #F59E0B coinciden exacto. Error #EF4444 correcto.
Color (residuo): El tile de la tecla borrar usa theme.palette.action.hover → renderiza #F5F5F5, cuando el diseño pide surface-variant/skeleton #F0F4F8 (ligero tinte azulado). Diferencia casi imperceptible pero real. Culpable: src/ui/organisms/pos/ApprovalModal/index.tsx L253 (backgroundColor: theme.palette.action.hover) — el propio comentario dice --color-surface-variant; conviene cablearlo al token skeleton/surface-variant.
Layout: Figma muestra el par Cancelar (outlined) + Autorizar (filled); la app renderiza solo el link de texto Cancelar. No es defecto: el organismo soporta ese par vía requireConfirm; el showcase elige a propósito la variante auto-submit shipped (ApprovalModalShowcase.tsx L43-49, sin requireConfirm).
Iconos: Lock relleno naranja y glifo backspace primary coinciden.
Estados: Default (dots vacíos, sin PIN tecleado) y PIN incorrecto (dots rojos + mensaje) correctos; el default de Figma con 2 dots llenos es solo un estado de entrada distinto del showcase.
Tipografía/Bordes: Título, subtítulo y hairline de campos sin discrepancias medibles.
✅ Coincide(re-auditado tras remediación — commit d515d29)
Color: Residuo del Total cerrado. El monto “Total $406.00” ahora se pinta en tinta oscura bold (#1F2933), no azul — se desacopló el color de emphasis en SummaryRow (color lo decide tone, no el énfasis), así el POS conserva el total oscuro que muestra su frame mientras el SummaryRow standalone sigue en azul vía tone="primary".
Color: Callout Cambio con tinte de éxito correcto — app #ECFDF5 vs Figma #ECFCF5 (success.light), label + monto en success.main (CashTender/index.tsx). Coincide.
Color: Fondo de los chips de monto #F5F5F5 coincide con Figma.
Estados: El botón Confirmar disabled = #E5E7EB + texto #9CA3AF (input vacío en el showcase); al habilitarse usa variant="filled" (azul sólido, como Figma). Diferencia de estado, no defecto. Ningún chip aparece seleccionado (input vacío) — no evaluable en esta captura.
Bordes/Iconos: Input blanco + hairline + label estático arriba; ✕ de cierre gris en ambos. Coincide.
Datos del showcase (no defectos): título “Pago en efectivo”/label “Recibido” vs. “Efectivo”/“Monto recibido” del Figma, y chips $406/$500/$1000 — copy y props por defecto del showcase.
⚠️ Diferencias menores(re-auditado tras remediación)
Color: Verificado y coincide. Thumb del segmented blanco #FFFFFF sobre track #F5F5F5; banner de total con tinte verde #ECFDF5 + cifra esmeralda (residuo del highlight success cerrado); botón disabled #E5E7EB + texto #9CA3AF; texto principal #2D363F. Todos los fixes de la fase 2 se sostienen.
Layout (feature-gap): Falta el caption de autorización que Figma muestra bajo el campo (Máx. 20% sin autorización). El showcase no lo renderiza — verificar si el organism expone esa prop de límite/ayuda.
Layout (feature-gap): Falta el selector de Motivo (Figma: dropdown Motivo: Cliente frecuente). La app omite el campo de razón del descuento; es un elemento funcional del sheet, no solo texto de ejemplo.
Estados: El botón Aplicar descuento aparece en estado disabled (campo vacío en el showcase), por lo que no se compara directo el azul sólido del CTA de Figma; la geometría y el tono disabled sí coinciden.
Bordes/Iconos: Coinciden — card plana con hairline, campo blanco con borde suave, icono de cierre × en gris de adorno.
Tipografía: Coincide. Diferencias de etiqueta (%/Monto/Cupón vs Porcentaje/Monto fijo/Cupón, Nuevo total vs Total con descuento) son decisión del showcase, no defecto.
Residuos remanentes = feature-gaps (selector de Motivo + caption de autorización), no defectos de token/estilo; se difieren al flujo de checkout.
Color: Azul de marca del CTA “Nueva venta” medido #0052CC en Figma y app (idéntico). Check de éxito #10B981 en ambos. Halo/icono de error usan rol error #EF4444 + #FDE8E8 (tinte *-soft), correcto.
Tipografía: Título “¡Venta completada!” #1F2933 en los dos; subtítulo folio en gris secundario; pesos y jerarquía coinciden.
Espaciado: Estructura vertical (check → título → folio → bloque resumen → fila de acciones → CTA) idéntica en proporción.
Bordes: Tarjeta modal plana con esquinas redondeadas; botones outlined con borde 1px sólido azul; bloque-resumen tintado (#F7F9FC Figma / #F5F7FA app, equivalentes).
Iconos: Check relleno blanco sobre círculo verde igual; en la variante error, ! blanco sobre círculo rojo con halo tenue.
Layout: Tres botones outlined (Imprimir/Compartir/Email) en fila + CTA sólido a ancho completo debajo, igual que Figma.
Estados: El panel APP añade la variante ERROR — Reintentar que el contexto Figma no incluye (solo muestra éxito). Es decisión del showcase para exhibir el estado de error, no un defecto del componente.
⚠️ Diferencias menores(re-auditado tras remediación)
Todos los tokens remediados verifican; el residuo es de estado/composición del showcase, no de color.
Color: Sin defecto. Medido en ambos paneles: azul de marca #0052CC (Total / borde “Agregar pago”), banner Restante #FFFBEB + texto #F59E0B (idéntico Figma↔app), segmented thumb #FFFFFF sobre contenedor #F5F5F5, CTA deshabilitado gris. Coincide (el tinte warning del Restante ya está aplicado).
Layout: Los paneles renderizan estados distintos del organism: Figma muestra el estado lleno (lista de pagos Efectivo/Tarjeta con filas tintadas #F7F9FC, íconos y X por fila, botón outlined “Agregar pago”, CTA “Finalizar venta”); la app muestra el estado de entrada (Total + selector segmented + input Monto + botón “Agregar” + Restante). No es defecto de remediación: es otra pantalla del mismo flujo.
Estados: El botón “Confirmar”/“Agregar” aparece deshabilitado (Monto vacío) con relleno tonal gris, consistente con el “Finalizar venta” deshabilitado del Figma.
Tipografía: Título “Pago dividido” vs “Pago mixto” — texto de ejemplo del showcase, no defecto.
Pendiente de verificar: con el showcase en estado vacío no se confirma en esta captura el estilo de las filas de pago (fondo #F7F9FC, ícono, X de eliminar) ni el botón outlined “Agregar pago” (borde #0052CC 1px). Se recomienda una variante del showcase con pagos ya agregados para cerrar la paridad estructural.
❌ Diferencias importantes — el patrón del componente diverge del diseño. Figma es un selector de método de una sola pantalla (chip Total, radios de selección con estado activo, subtítulos, iconos en contenedor tintado, CTA Continuar); la app es una lista de navegación con chevron que solo emite intención y hace drill-in a subflujos. Los tokens que sí están presentes coinciden con el canon; el residuo es estructural.
Color: Lo medido coincide — Figma: chip Total y fila seleccionada #E6EEFA (primary.light), Continuar #0052CC, contenedor de icono #F0F4F8. App: card blanca, borde #E7E9EC≈#E5E7EB, texto oscuro. No hay defecto de color en lo renderizado.
Layout: Falta el chip “Total a cobrar” superior (tinte #E6EEFA + monto en primary bold). No existe en TenderPicker/index.tsx.
Layout: Falta el botón “Continuar” (relleno sólido #0052CC, texto blanco) al pie del diálogo.
Estados: No hay modelo de selección — Figma usa radios/checkbox con fila activa (borde primary + tinte #E6EEFA + check relleno); la app usa ChevronRight de drill-in y onSelect sin estado seleccionado (líneas 96–98).
Tipografía: Faltan los subtítulos por opción (“Pago en efectivo + cambio”, etc.); la app solo muestra label (línea 93–95).
Iconos: Iconos sin contenedor tintado — heredan text.primary (#1F2933) bare (línea 92), mientras Figma los envuelve en cuadro redondeado #F0F4F8 (y verde para Efectivo). El fix “contenedor tintado de iconos en ListRow” no está aplicado aquí.
Salvedad: el chevron vs radio no es “texto de ejemplo del showcase” sino un modelo de interacción distinto → residuo real del componente, no decisión del showcase.
Culpable:src/ui/organisms/pos/TenderPicker/index.tsx (no contempla total, subtítulo, selección ni CTA).
⚠️ Falta diseño — no hay render de Figma exportado — sin render exportado en design/web/organisms/
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
⚠️ Falta diseño — no hay render de Figma exportado — sin render exportado en design/web/organisms/
Notas
⛔ Comparación no posible — falta el render de Figma. La app está capturada pero no hay diseño exportado contra el cual compararla; el motivo está en la celda izquierda (nodo sin exportar, o pantalla sin frame diseñado). Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es una decisión de diseño pendiente, no una desviación de la implementación.
Color: Ítem activo con tinte de marca #E6EEFA e ícono/texto #0052CC (medido en los 3 estados del showcase). Riel colapsado reproduce el mismo par tinte+azul en el ítem activo. Encabezados de sección en gris neutro (~#9CA3AF). Ítems inactivos en neutro oscuro sobre blanco.
Tipografía: Encabezados de sección en mayúsculas/tracking; label de ítem activo en peso semibold azul; inactivos en neutro. Jerarquía equivalente al diseño.
Espaciado: Agrupación por secciones (OPERACIÓN, CATÁLOGO, EQUIPO, FINANZAS, ADMINISTRACIÓN) con el mismo orden y densidad de ítems que Figma.
Bordes: Píldora activa con esquinas redondeadas, sin borde; consistente con el patrón de selección tintado.
Iconos: Íconos de ítems inactivos en neutro oscuro (estilo relleno). Algunos glifos difieren respecto a Figma (p. ej. Punto de venta = caja registradora vs carrito; Productos = etiqueta vs regalo; Servicios = factura vs flechas de intercambio; Reportes = línea vs barras) — decisión del showcase (íconos de ejemplo), no defecto.
Layout: El showcase de /playground muestra 3 estados (expandido activo, activo por módulo, colapsado) y omite el logo “Terminales”, el selector de tienda y el footer de usuario que sí aparecen en Figma — fuera del alcance del showcase, no residuo del componente.
Estados: Activo, inactivo y colapsado-activo verificados con color medido; todos siguen el patrón canónico tinte #E6EEFA + #0052CC.
Color: Botón Guardar con relleno sólido #0052CC medido idéntico en Figma y app. Botón de texto Descartar en azul de marca (trazos medidos #4681DA/#82AAE6, antialiasing de texto primary) en ambos.
Iconos: El icono de información es un círculo relleno neutro #6B7280 en ambos paneles (medido exacto), con la “i” blanca.
Tipografía: Mensaje “Tienes cambios sin guardar” en gris neutro; jerarquía y peso equivalentes.
Layout: Barra plana con hairline; a la izquierda icono + mensaje, a la derecha Descartar (botón de texto) + Guardar (botón relleno primary). Orden y alineación coinciden.
Estados: El patrón de botón relleno primary (excepción de relleno sólido) se respeta en Guardar; Descartar como acción secundaria de texto.
Salvedad showcase: El contenedor con borde y el área de vista previa tenue por encima de la barra son marco del showcase de /playground, no defecto del componente.
Color: Pestaña activa medida en #0052CC tanto en Figma (texto 30,18) como en la app (texto 58,97); el indicador inferior también mide #0052CC en la app (80,118). Azul de marca correcto.
Bordes: Divisor/hairline bajo la tira de pestañas medido en #E5E7EB en ambos (70,120 app). Coincide.
Tipografía: Pestaña activa en semibold azul + inactivas en gris neutro; jerarquía idéntica a Figma.
Estados: El patrón de selección (texto primary + subrayado sólido primary) está correctamente aplicado; MUI Tabs con indicator en primary.
Layout: El panel APP es un showcase de /playground con tres filas extra (activa+indicador / hover / disabled) que Figma no muestra — decisión del showcase, no defecto. El estado hover destaca “Historial” y el disabled atenúa las pestañas, coherentes con los tokens.
Espaciado: Fondo del contenedor difiere (Figma #F5F5F5 neutro vs playground #F5F7FA) pero es el lienzo del showcase, no el componente.
Color: Marca #0052CC medido en el logo del row Punto de venta y en el ícono del avatar; tinte de avatar #E6EEFA (palette.primary.light) confirmado. Badge de notificación #EF4444 (error). Todo canónico.
Tipografía: Título #1F2933, secundario “Bienvenido” en gris, jerarquía correcta.
Iconos: Campana de adorno #6B7280/#9CA3AF (no azul), correcta; ícono de avatar relleno sobre contenedor tintado, patrón esperado.
Bordes: Tarjetas planas con hairline claro; divisor vertical sutil entre acciones y menú de usuario.
Layout: El panel APP es un showcase con 3 variantes (base sin badge / con logo+badge+menú / con navegación atrás), mientras Figma muestra una única barra con buscador + chips de estado (Turno abierto, Sincronizado) + grupo de avatares. Esa diferencia de contenido de ejemplo es decisión del showcase, no defecto — los tokens y estados subyacentes coinciden.
Estados: Menú de usuario con avatar tintado + iniciales/ícono y badge numérico correctos; sin residuo de paridad detectable.
El registro de /playground también incluye composiciones de pantalla hechas con el
design system y algunos tableros de flujo completo. Cuando la pantalla ya tiene ruta real,
arriba se muestra la captura de la app; estas son las que quedan. Sirven como referencia
de implementación — cómo se vería la pantalla armada solo con componentes del DS — y son
un buen punto de partida cuando toque construir la pantalla de verdad.
