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.md — se arregla por capas (tokens → theme →
átomos → patrones), no pantalla por pantalla.
Desviaciones intencionales: no toda diferencia es un defecto. Cuando la implementación difiere
del frame a propósito (mejor UX, o convención del design system / web) se registra en la fila
Desviación (propuesta) de la tabla y en intentional-deviations.md,
en vez de abrir un issue de ajuste. Una desviación aceptada convierte un ❌/⚠️ de Notas en un
✅ aceptado — por eso, antes de crear un draft de UI polish, revisá si la diferencia ya está
registrada como desviación. Una fila con — no tiene desviación: la diferencia (si la hay) debe
corregirse para coincidir con Figma.
Estado: 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 sistémica de color está firme; persisten overrides locales de tamaño y falta contenido del diseño.
Color: ✅ Azul canónico #0052CC en panel de marca, botón Entrar, focus ring y links; fondo #F5F7FA y heading #1F2933 coinciden; hairlines #E5E7EB.
Sombras: 👍 En la recaptura el botón Entrar se ve plano — ya no proyecta la sombra dura (#DFDFDF→#F2F2F2) que reportaba la nota previa; el override de PrimaryButton.tsx parece removido/neutralizado. La tarjeta conserva una sombra suave equivalente al Figma (reverificar el boxShadow del Paper en src/ui/templates/AuthSplit/index.tsx).
Espaciado: ❌ Sigue igual — campos ~56px de alto vs ~38px del Figma (src/ui/Inputs/TextInput.tsx hardcodea padding: '18px 22px'); botón Entrar ~70px vs 52px del Figma (PrimaryButton.tsx padding sm).
Tipografía: etiqueta del botón sobredimensionada vs 14px/600 del sistema (PrimaryButton.tsx fontSize sm 18).
Contenido: ❌ Sigue faltando el botón outlined “Acceso rápido con PIN” (existe en Figma con borde azul; sin rastro en LoginForm.tsx ni login.i18n.ts). El divisor “— o —” del Figma se reemplaza 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).
Layout: split 50/50 (AuthSplit flex '1 1 50%') vs ~43/57 del Figma; “¿Olvidaste tu contraseña?” alineado a la derecha en la app, a la izquierda en Figma.
Estados: la captura muestra el email en autofocus (ring 2px #0052CC), asteriscos rojos de requerido y toggle de visibilidad oscuro que el Figma no dibuja — decidir si se ocultan o se actualiza el diseño.
Sistémico: label estático sobre el campo, paradigma ya adoptado ✓.
Desviación (propuesta)
🔶 Propuesta — el campo de contraseña agrega un toggle de visibilidad (ojo) ausente en el frame. Figma: agregar el icono trailing mostrar/ocultar al frame 107:358. (El tamaño de campos/botón NO es desviación: es bug de overrides sx — va como ❌.) ver desviaciones
⚠️ 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 (recaptura sigue en esta rama).
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 y el fondo #F5F7FA coincide — el fix sistémico sí llegó a esta ruta, pero el residuo del formulario queda pendiente de verificar.
⚠️ Diferencias menores — recaptura post-#538: el panel de marca azul ya está presente y su tagline coincide con el Figma (“Cambia de cajero en segundos con un PIN.”).
Layout: 👍 Mejora frente a la nota previa — ahora es split con panel de marca (antes era columna única centrada). Persisten diferencias de composición: el Figma abre con avatar “JP” + “Juan Pérez” + “Cajero · Tienda Centro”; la app solo muestra el título “PIN de Cajero Demo” sin avatar ni rol. El link “Cambiar usuario” está arriba (bajo el título) en la app vs abajo del teclado en el Figma.
Teclado: la app dibuja cada tecla como caja con hairline y añade una tecla “C” (limpiar) + botón explícito “Entrar” (deshabilitado); el Figma usa numerales sin caja, sin “C” ni “Entrar”, solo backspace en chip tintado.
Dots de progreso: con el PIN vacío la app no muestra los 4 dots (aparecen al teclear) mientras el Figma los dibuja siempre; el estilo del ring vacío hereda del residuo de [PIN Dot].
Color: azul canónico #0052CC verificado en ambos paneles.
✅ Capturado (#614) · veredicto best-effort. Roster multi-tienda del harness (/select-store?mockStores=multi; el roster mock por defecto tiene una sola membresía y auto-salta al dashboard — seam mock-only en useMembershipStoreTeams). Divergencia estructural (no defecto de token): la app usa el shell AuthSplit y lista las tiendas como filas verticales sin dirección/estado ni botón «Continuar»; el frame las dibuja como tarjetas horizontales. El estado vacío M6 (node 559-3186) → blocked-report (sin export de Figma; MCP sin auth). Evidencia + notas por rúbrica: docs/ui-evidence/614/.
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 (“Registra el comercio y designa a su propietario.” vs “Configura tu organización y tu primera tienda.”) 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. No hay nodo exportado para /sign-out. Dato de la recaptura: la captura de la app es en realidad la pantalla de /login — el cierre de sesión redirige ahí (idéntica a W01), no tiene pantalla propia. Siguiente paso: confirmar que /sign-out es solo redirección; si es así, su paridad ya queda cubierta por W01 y no requiere frame propio. Si se espera una pantalla de transición/confirmación, exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity.
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.
⚠️ Diferencias menores (captura recapturada por PR #538; el existingNote de 2026-07-23 quedó parcialmente obsoleto)
Layout: El two-pane (catálogo izq. / carrito der.) coincide con Figma. ✓
Contenido (mejora post-#538): Los tabs de catálogo Productos / Servicios / TAE / Pines ahora SÍ están presentes (el existingNote los marcaba ausentes); “Productos” activo en azul con ícono de carrito, igual que el diseño. ✓
Color (residuo del Chip resuelto en esta pantalla): La chip de categoría seleccionada (“Todas”) ahora usa tinte suave #E6EEFA con texto azul, ya no sólida #0052CC con texto blanco — coincide con Figma; el residuo previo del componente [Chip] no aplica aquí.
Layout: El campo de búsqueda sigue siendo Paper blanco outlined (~40px) con botón de lupa azul a la derecha, vs Figma relleno #F0F4F8 sin borde — hereda del residuo de [Search Field] (picker/SearchInput.tsx).
Contenido: Las tarjetas de producto siguen sin badge de existencias (“24 pzs” verde / “Agotado” rojo del diseño) — picker/ProductGrid.tsx sólo renderiza nombre + precio.
Contenido / Header (cambiado por PR #538): El header de la app difiere del diseño: app = “Punto de venta” sin subtítulo + chip “Turno abierto” + nombre “Cajero Demo” con avatar CD + botón outlined “Bloquear ahora” (lock); Figma = “Punto de venta / Tienda Centro · Caja 1” + “Orden #1042” + avatar SR (sin nombre de cajero ni Bloquear). Divergencia de composición/producto, no de estilo.
Estados: Captura con carrito vacío (“El carrito está vacío / Agrega productos…”, Cobrar deshabilitado #E5E7EB+#9CA3AF, Subtotal/IVA/Total $0.00) vs Figma con venta activa (Venta actual, “Vaciar” rojo, 3 ítems con steppers −/+, Subtotal $372, Descuento, IVA $51, TOTAL $372, “Cobrar · $372.00” azul). Distinto estado: steppers de cantidad, totales y Cobrar activo quedan sin comparar; re-verificar con carrito poblado.
Extras de la app (no en Figma): FAB azul “+” abajo-izq., botón outlined “Asignar cliente”, bloque de estado de terminal (“En línea · WT-0001 · Terminal seleccionada automáticamente”), “Guardar en espera” y “Ventas en espera” — divergencias de producto conocidas/pendientes.
Color: Precios en #0052CC, disabled #E5E7EB+#9CA3AF, tarjetas planas blancas con hairline #E5E7EB — fixes sistémicos confirmados en la captura fresca.
Desviación (propuesta)
🔶 Aceptada — el FAB speed-dial abajo-izquierda (Movimiento de caja / Cerrar turno / Anular venta, solo con turno abierto) se reubicó fuera del header a propósito. Decisión de producto: se mantiene — no filar issue para quitarlo. Figma: documentar el FAB de navegación en el frame W10 (255:3399). ver desviaciones
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 (115:1234) existe pero el harness no capturó el diálogo de pago mixto. Siguiente paso: si la superficie existe, agregar su entrada en e2e/screenshots/targets.ts (estado del sheet de tender/split) y correr pnpm screenshots; si no está construida, es gap de implementación, no de paridad. Nota: cuando se capture, cotejar contra los residuos abiertos de POS — Tender Picker y POS — Discount Sheet del ledger.
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 (133:10777) existe pero no hay documento de impresión capturado (es un render de recibo, no una ruta navegable). Siguiente paso: si existe una vista/preview de recibo, agregar target en e2e/screenshots/targets.ts; si el recibo sólo se materializa al imprimir, documentar que la paridad de este artefacto no es auditable por screenshot.
⚠️ Falta captura — no existe pantalla/modal de confirmación
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño del modal de éxito (117:1417) existe pero el harness no alcanzó el estado post-cobro. Siguiente paso: agregar el target del modal de confirmación en e2e/screenshots/targets.ts (flujo que dispara la venta exitosa) y correr pnpm screenshots; si no está construido, es gap de implementación, no de paridad.
⚠️ Diferencias menores — misma pantalla; la captura fresca confirma que varios residuos ya cerraron y el remanente es la anatomía de una molécula más un bug de dato.
Estados (cerrado): 👍 “Reanudar venta” ahora es tonal soft (bg azul claro, etiqueta azul), igual que el diseño — se resolvió el variant="contained" sólido que se reportaba antes en HeldOrderCard.
Layout segmented (cerrado): 👍 el control “Mis carritos / Todos” ahora es pill blanco sobre track gris #F0F4F8 con texto oscuro, conforme a Figma; el patrón invertido (pill azul sólido) del atom SegmentedControl ya no aparece.
i18n (cerrado): 👍 el tiempo relativo ya sale en español (“hace un mes”), no en inglés — dayjs.locale('es') quedó activo. El texto “hace un mes” vs “Hace 4 min” del diseño es ahora dato viejo (heldAt de heldOrder.mocks.ts), no bug de i18n.
Layout (residuo real): composición de la tarjeta aún difiere del diseño — hereda del residuo de HeldOrderCard: id “H-2271” sin “#” (Figma “#H-2271”); tiempo y “En espera por…” como Chips outlined (Figma: texto gris con mini-avatar inline); avatar “SR” arriba-derecha (Figma: inline junto al holder); precio abajo-derecha bajo los chips (Figma: esquina superior derecha).
Contenido: ❌ importes ×100 persiste: $37,200.00 vs $372.00 del diseño para el mismo carrito — el mock guarda centavos y HeldOrdersList.tsx formatea el crudo (heldOrder.mocks.ts, aclarar unidad en types.ts). Bug de dato, no de estilo.
Estados: la app muestra “Todos” activo; Figma muestra “Mis carritos”. Default 'all' deliberado en HeldOrdersList.tsx — confirmar con producto.
Color: ✅ CTA/segmento activo miden azul canónico; borde de tarjeta hairline #E5E7EB; los avatares (“SR”, switcher “Tienda demo”) ahora leen en tinte de marca soft, sin el lighten(#0052CC,.2)=#3374D6 que antes pisaba el tinte canónico en superficies white-label — aparente remediación.
Nav (IA, registrar 1 vez): el sidebar vivo diverge del de Figma — bajo ADMINISTRACIÓN sólo aparecen Comercios + Notificaciones, mientras el diseño lista “Comercio y tiendas / Terminales / Ajustes”. Reorganización de nav post-#538 (src/components/AdminShell/adminNav.ts); Figma probablemente desactualizado (🎨). Shell compartido — no se re-lista en las demás pantallas /admin.
Contenido (menor): subtítulo “…de la sucursal en el turno abierto” vs “…compartidos por tienda en este turno” del diseño — copy, heldOrder.i18n.ts.
⚠️ Diferencias menores — variante en diálogo sobre el POS; la captura fresca confirma que los residuos de botón e i18n ya cerraron y sólo queda la anatomía de la tarjeta más un dato de mock.
Estados (cerrado): 👍 “Reanudar venta” se renderiza tonal soft (bg azul claro, etiqueta azul), conforme al diseño — resuelto el variant="contained" sólido que se flageaba en HeldOrderCard/index.tsx.
i18n (cerrado): 👍 el chip de tiempo ahora sale en español (“hace un mes”), no “17 days ago” — formatRelativeTime/dayjs ya usa locale es. El delta vs “Hace 4 min” del diseño es dato viejo (heldAt en heldOrder.mocks.ts), no i18n.
Layout (residuo real): anatomía de tarjeta distinta a Figma — hereda del residuo de HeldOrderCard: id “H-2271” sin “#”; tiempo y “En espera por Sofía R.” como Chips outlined (Figma: texto gris + mini-avatar inline); avatar “SR” arriba-derecha (Figma: inline); precio a la derecha de los chips (Figma: esquina superior derecha).
Contenido: montos $37,200.00 / $8,450.00 vs $372.00 del diseño — mismo bug ×100 de centavos crudos (mock), no defecto de paridad.
Bordes/Sombras: ✅ tarjetas planas con hairline #E5E7EB, radio del diálogo conforme; “Cerrar” como link azul abajo-derecha.
Decisión de producto (no se re-lista): diálogo-vs-página y ausencia de tabs “Mis carritos/Todos” en el terminal (sólo “mine”) es comportamiento documentado.
⚠️ Falta diseño — no hay render de Figma exportado — índice de navegación, sin frame
Notas
✅ Copy corregido en #548 (sin diseño Figma). La ruta /admin/pos sigue siendo un panel índice/scaffold (aún sin páginas de entidad montadas), pero el texto ya está en español: título “POS” y cuerpo “Panel de administración de POS. Las páginas de cada entidad (Sucursales, Productos, Terminales…) se mostrarán aquí en sus respectivos tickets.” — se eliminó el placeholder en inglés que antes era visible al usuario. Sin frame de Figma exportado: cuando exista, exportarlo a docs/design/web/ y re-correr pnpm docs:parity. La auditoría de paridad de layout queda pendiente hasta que se monten las páginas de entidad.
⚠️ Falta diseño — no hay render de Figma exportado — pantalla de diagnóstico, sin frame
Notas
✅ Corregido en #547 (sin diseño Figma). La pantalla migró de la tabla MUI cruda a la DataTable compartida. Verificado en la captura fresca:
StatusBadge soft-by-role: todos los estados ahora son suaves (fondo tenue + texto tintado): Aprobado verde, Requiere Captura ámbar, Procesando azul, Fallido rojo, Cancelado gris, Requiere Método de Pago gris — ya no son sólidos saturados; alineado con el fix del ledger.
Fechas es: columna “Fecha de Creación” en formato legible (20 jun 2026), ya no mm/dd/yyyy US.
Filtros: botón “Filtros” outlined 1px primary (los inputs Desde/Hasta nativos en formato US ya no se muestran inline; el residuo de date-range queda dentro del panel de filtros).
Tabla: header gris suave, montos con MXN, tarjeta enmascarada (•••• 4242), paginación “Mostrando 1–7 de 8”.
Sin frame de Figma: para veredicto formal de paridad, exportar el nodo a docs/design/web/ y re-correr pnpm docs:parity.
⚠️ Falta diseño — no hay render de Figma exportado — el diseño vive como organismo POS Approval Modal, no como pantalla
Notas
✅ Corregido en #548 (sin diseño Figma). Verificado en la captura fresca:
Fechas es: columna “Fecha” ahora legible (20 jun 2026, 21 jun 2026…), ya no ISO crudo (2026-06-20T15:12:00Z).
Sucursal: valores legibles (“Centro”, “Norte”, “Sur”), ya no slugs (store-centro / store-norte).
Estilos sistémicos conformes: “Filtros” es botón outlined 1px primary; chips de Acción en gris soft; header de tabla gris claro; paginación “Mostrando 1–7 de 7”.
Sin frame de Figma: para veredicto formal de paridad, exportar el nodo a docs/design/web/ y re-correr pnpm docs:parity.
Desviación (propuesta)
—
VENTAS / VOID — Historial de ventas, cancelación y reembolso
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 119:1820 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores(re-auditado con recaptura; gran build-out desde la nota previa — ya NO es una pantalla reducida)
Contenido (resuelto): la toolbar rica del diseño ya está implementada — subtítulo KPI (“6 ventas · $2,691.20”), botón Exportar, búsqueda local (“Buscar por folio o cliente…”), tabs Todas/Pagadas/Canceladas y select. Columnas ahora Folio/Cliente/Fecha/Total/Artículos/Estado + editar por fila, con avatar de cliente. Pager numerado (“Mostrando 1–6 de 6”).
Color/estilo (OK): badges de estado soft por rol (Pagada verde, Pago Parcial ámbar, Abierta info, Anulada/Cancelada rojo, Borrador neutro); nav “Ventas” en tinte #E6EEFA + texto azul; cabecera de tabla #F7F9FC.
Residuos menores: “Exportar” es outlined (borde azul + icono descarga) vs Figma primario sólido “+ Exportar”; tabs en patrón underline vs pill segmentado del diseño; avatares gris “M” (todos Mostrador — dato) vs iniciales de color; falta la columna checkbox de selección que Figma sí muestra.
Datos: cifras y folios distintos (mock A-100x vs #104x del diseño) — esperado.
⚠️ Diferencias menores(re-auditado; los bugs de la nota previa están CERRADOS) — el par compara distinto registro (app A-1001 vs Figma #1042), esperado por mocks.
Cerrado: ahora es página dedicada con breadcrumb (Ventas/Historial), no diálogo; layout de dos tarjetas (Artículos + Información) como el diseño; montos con “$” (formatCurrencyWithSymbol aplicado); badge “Pagada” en verde soft (ya no Chip sólido); iconos/labels sin literal negro.
Información (OK): Cliente/Cajero/Método/Recibido/Cambio/Folio fiscal — coincide con el diseño.
Residuo (acciones): el diseño muestra Reimprimir (azul outlined activo) + Cancelar / Reembolsar (rojo sólido); la app muestra Reimprimir deshabilitado + Asignar cliente (azul outlined) y no expone el botón rojo en la captura (el flujo sí existe — ver W31). Verificar gating de RefundAction con status PAID.
Artículos (👍 impl más rica): la app usa tabla con encabezados (Producto/Cant./Precio Unit./Importe) — más informativa que la lista simple del diseño; añade línea Descuento en el resumen.
Bordes: botón outlined hereda residuo de [Button] (azul ~50%) — no re-listar.
Desviación (propuesta)
🔶 Propuesta — la tabla de Artículos es más completa que el frame (columnas/totales extra), en el mismo layout de dos tarjetas. Figma: enriquecer la tabla de artículos del frame W30. ver desviaciones
⚠️ 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 (diálogo de filtros) pero no hay diseño exportado contra el cual compararla. Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y volver a correr pnpm docs:parity; si no existe frame, es decisión de diseño pendiente, no 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). Verificado en la recaptura del render de referencia.
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 (/playground, VentasVoidScreenShowcase): misma composición — detalle de Venta #1042 + modal de autorización con teclado numérico, icono de candado en tinte ámbar y Cancelar/Autorizar. Coincide.
Diferencias esperadas (estado + entorno): el render de playground no lleva el shell admin (sidebar + topbar) que sí muestra el frame; los puntos del PIN están vacíos (Autorizar deshabilitado) porque no hay dígitos capturados, vs los 2 puntos azules del frame (estado a media captura). El color del anillo del punto vacío hereda del residuo de [PIN Dot] — no re-listar.
Por qué playground y no la ruta: bajo los mocks del harness /terminal/voids sólo renderiza su estado vacío (pedidos anulables del turno abierto no coinciden con los fixtures) — mismo fallback de referencia del DS usado para W47/W57/W60.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 118:1529 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores(re-auditado; el bug de categoría y los gaps estructurales de la nota previa están RESUELTOS)
Cerrado (bug): la columna Categoría ya muestra el nombre (Bebidas, Alimentos, Limpieza…), no el ID numérico.
Cerrado (contenido/layout): subtítulo “6 productos · 7 categorías”; búsqueda + chips Todos/Activos/Bajo stock + Filtros + select; columnas ahora Producto (avatar iniciales en tinte) / SKU / Categoría / Precio / Stock / Estado + editar por fila; pager numerado; botón “+ Nuevo producto” con icono y texto completo.
Color (OK): tab/indicador y CTA #0052CC; nav “Productos” en tinte de marca #E6EEFA + azul (el pill gris ya no está); cabecera #F7F9FC; badges “Activo” verde soft (StatusBadge, ya no Chip sólido).
Residuos menores: tabs underline vs pill segmentado del diseño; fila seleccionada (checkbox azul + #E6EEFA) no ejercitada en la captura; Estado todo “Activo” por datos vs Bajo/Agotado del frame.
Veredicto de paridad (#613): match — ✅ Coincide. Evidencia: referencia Figma 120:2657 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
✅ Paridad alcanzada (#468) — confirmada en la recaptura.
Página completa: PageHeader (“Nuevo producto” + subtítulo) + tarjetas Paper + StickySaveBar, con grid de dos columnas (izquierda: Información — Nombre/SKU/Categoría select/Descripción/Precio de venta/Costo/Código de barras; derecha: Imagen dropzone + Inventario con Stock inicial, switch Alerta de stock bajo y Umbral).
Layout/Contenido: ✅ coincide con el contenedor full-page del frame; barra sticky “Tienes cambios sin guardar · Descartar/Guardar”.
Color: ✅ títulos/labels resuelven a tokens del tema (#1F2933); CTA Guardar #0052CC.
⚠️ Divergencias intencionales (marcar el frame, no fix): hint de Imagen “PNG o JPG · hasta 10 MB” (el frame dice “CSV, PNG o JPG”, inconsistente para una imagen); glyph del dropzone “+” + botón “Seleccionar archivos” vs glifo de compartir del frame — menor.
⚠️ Falta captura — no hay pantalla de detalle dedicada
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño (drawer de detalle de producto) existe pero no hay implementación capturada. 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 gap de implementación, no de paridad.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 122:2840 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores(re-auditado; avatar, badge soft, toolbar y pager ya llegaron) — datasets distintos (app 7 vs Figma 12 categorías), esperado.
Cerrado: encabezado dedicado “Categorías · 7 categorías” + CTA “+ Nueva categoría”; avatar de iniciales en tinte por fila; StatusBadge soft (Activa verde / Inactiva gris) — ya no el icono booleano monocromo; toolbar con Buscar + chips Todas/Activas/Vacías + Filtros; pager numerado (“Mostrando 1–7 de 7”).
Color (OK): CTA y elementos activos #0052CC; cabecera de tabla #F7F9FC; divisores #E5E7EB.
Residuo (contenido): el esquema del diseño trae columnas de analítica SKUs / Margen / Ventas mes además de Productos/Estado; la app sólo muestra Categoría/Productos/Estado — faltan las tres métricas y el select derecho.
Estado (semántica): Figma distingue Activa/Vacía; la app usa Activa/Inactiva (categorías con 0 productos siguen “Activa”) — taxonomía a alinear con producto.
❌ Las imágenes no corresponden a la misma pantalla (re-verificado contra recaptura fresca).
Panel FIGMA (figma-w23-categorias.png): pantalla de listado de Categorías — “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. No contiene formulario de alta.
Panel APP (admin-pos-catalog-categories--dialog-nueva-categoria.png): drawer lateral “Nueva categoría” abierto sobre el listado, con campos Categoría* (enfocado, “Ingrese el nombre de la categoría”), Identificador, Descripción, Categoría Padre, Sucursal, Orden, Color y acciones Cancelar/Guardar.
Causa probable: el manifest emparejó el frame del listado con la captura del formulario de alta; falta el frame Figma del formulario.
Acción: exportar/conseguir el frame “Nueva categoría” y re-auditar. Sin veredicto de paridad posible.
Informativo (medido): el azul canónico #0052CC sí llegó al drawer (botón Guardar y borde de foco del primer campo).
Desviación (propuesta)
🔶 Propuesta — el alta se resuelve como drawer lateral sobre el listado en vez de la página completa del frame, preservando tabla/filtros/scroll. Figma: documentar el patrón drawer-sobre-lista para altas (o confirmar la página completa caso por caso). ver desviaciones
Veredicto de paridad (#613): match — ✅ Coincide. Evidencia: referencia Figma 122:3134 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
✅ Coincide — la pantalla fue remediada respecto a la auditoría previa; la recaptura fresca ya alinea con Figma (la nota anterior estaba obsoleta).
Estado (bug resuelto): los estados ya renderizan como StatusBadge soft (Activa verde, Inactiva gris). El bug previo de iconos check/x forzados a #1F2933 quedó corregido.
Columnas: ahora coinciden con el diseño — Tasa (avatar+nombre), Tipo (IVA/IEPS), Porcentaje, Productos, Estado. Se eliminaron las columnas ajenas (Impuesto Incluido / Fecha de creación).
Toolbar: presentes búsqueda inline + chips Todas/Activas/Inactivas + Filtros; primario “+ Nueva tasa” con icono. Icono de lápiz de edición por fila (antes ausente).
Residuos menores: paginación/volumen difiere por datos (app “1–6 de 6” vs Figma “1–5 de 6 … 10”); Figma incluye una columna monetaria sin rótulo (“—”, valores $) que la app omite —la app queda más limpia. El nav lateral post-#538 diverge del Figma (se registra una sola vez fuera de este lote).
❌ Las imágenes no corresponden a la misma pantalla (re-verificado).
Panel FIGMA (figma-w24-impuestos.png): pantalla de lista de Impuestos (header, chips Todas/Activas/Inactivas, tabla y paginación, botón “Nueva tasa”). No hay formulario de alta.
Panel APP (admin-pos-tax-rates--dialog-nuevo-impuesto.png): drawer “Nuevo Impuesto” sobre la lista: campos Tasa* (enfocado, “Ingrese el nombre de la tasa”), Porcentaje*, Región, switches Impuesto Incluido (off) y Estado (on), acciones Cancelar/Guardar.
Causa probable: el manifest empareja el alta con el frame de la lista; falta exportar el frame Figma del formulario (si existe).
Informativo (medido): fixes sistémicos presentes — Guardar #0052CC, borde de campo enfocado #0052CC, track del switch en azul canónico. Decisión producto diálogo-vs-drawer conocida.
Acción: conseguir la referencia Figma del alta y re-auditar el par.
Desviación (propuesta)
🔶 Propuesta — el alta se resuelve como drawer lateral sobre el listado en vez de la página completa del frame, preservando tabla/filtros/scroll. Figma: documentar el patrón drawer-sobre-lista para altas (o confirmar la página completa caso por caso). ver desviaciones
Veredicto de paridad (#613): match — ✅ Coincide. Evidencia: referencia Figma 122:3426 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
✅ Coincide — reconstrucción completa: lo que la auditoría previa marcó como esqueleto/placeholder ya está implementado y alinea con Figma.
Estructura: título “Niveles de stock” + subtítulo “Existencias por tienda”, sub-tabs Niveles/Movimientos/Transferencias/Ajustar, búsqueda, chips Todos/Bajo stock/Agotados, Filtros + select. Todo presente.
Tabla: columnas Producto (avatar+nombre), SKU, Tienda, Costo, Existencias, Estado — coinciden con el diseño; datos reales (Coca-Cola 600ml, SKU 750105530, Tienda Centro) en vez de mock; checkbox de selección e icono de lápiz por fila.
Estados: badges soft En stock (verde) / Bajo (ámbar) / Agotado (rojo).
Componente: aunque el ledger marca StockLevelList como tabla MUI cruda, la recaptura renderiza alineada al sistema (cabecera tenue, hairlines, badges soft, avatares) — sin defecto visible. El bug previo del label del Select ya estaba corregido.
Residuo menor: paginación/volumen por datos (app “1–5 de 5” vs Figma “1–5 de 248 … 10”).
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 124:5630 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores — la composición fue remediada: el layout que la auditoría previa marcó como divergente ya coincide con Figma.
Layout (resuelto): ahora hay H1 “Ajuste de inventario”, botón superior “+ Guardar”, grid de 2 columnas (Producto full-width; Tienda|Tipo, Cantidad|Motivo) y barra sticky inferior con Descartar/Guardar. Antes era 1 sola columna sin header ni barra.
Controles: la app usa selects/dropdowns para Producto/Variante, Sucursal, Tipo y Motivo; Figma usa inputs de texto con placeholders — diferencia de control (comportamiento real de la app), no de estilo.
Rótulos: Producto→“Producto / Variante”, Tienda→“Sucursal”, Nota→“Notas”; subtítulo “Ajusta las existencias” vs Figma “Registra un ajuste de existencias”; card “Ajuste de inventario” vs “Ajuste”.
Barra sticky: falta el texto “Tienes cambios sin guardar” a la izquierda (Figma lo muestra); la app solo deja Descartar/Guardar.
Veredicto de paridad (#613): match — ✅ Coincide. Evidencia: referencia Figma 122:3717 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
✅ Coincide — reconstrucción completa; la vista incompleta/divergente de la auditoría previa ya está alineada con Figma.
Estructura: título “Movimientos de inventario” + subtítulo “Entradas y salidas (ledger)”, búsqueda, tabs Todos/Entradas/Salidas, Filtros + select y acción primaria única “+ Nuevo movimiento” (ya no aparecen los botones de transferencia previos montados en esta ruta).
Tabla: columnas [checkbox] Producto (avatar+nombre), Tipo, Motivo, Cantidad ($), Saldo, Fecha, lápiz de edición — coinciden con el diseño. Motivo ahora es texto (Compra/Venta/Merma), ya no pill sólido.
Fecha: pills soft por recencia (verde/ámbar/rojo) como en Figma.
Componente:StockMovementList figura en el ledger como tabla MUI cruda, pero la recaptura renderiza alineada al sistema — sin defecto visible.
Residuo menor: paginación/volumen por datos (app “1–5 de 5” vs Figma “1–5 de 1,024 … 10”); conviene verificar la semántica de color de las pills de Fecha vs el diseño.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 124:5847 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores — re-verificado; el bug de Fecha quedó corregido en #548.
Fecha (resuelto): ✅ ahora usa el date picker localizado del DS (placeholder es ‘DD MMMM YYYY’ + icono de calendario), en vez del <input type=date> nativo con ‘mm/dd/yyyy’ y calendario del navegador.
Controles: selects para Sucursal de origen/destino y Producto/Variante vs inputs de texto en Figma — diferencia de control, no de estilo.
Barra sticky: sigue faltando el texto ‘Tienes cambios sin guardar’ que muestra Figma; la app deja solo Descartar/Guardar.
Rótulo: app ‘Notas’ vs Figma ‘Nota’.
Layout: H1 + subtítulo, botón ‘+ Guardar’ superior, grid de 2 columnas y barra sticky inferior coinciden.
⚠️ 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.
APP (admin-pos-stock-movements-receive.png): tarjeta simple centrada “Recepción de transferencia” + subtítulo “Confirma la recepción de una transferencia entrante”, un único campo Referencia de la transferencia* y botón “Confirmar recepción” azul sólido (visualmente #0052CC) a todo el ancho de la tarjeta. Implementación mínima de un paso.
Siguiente paso: exportar el nodo del flujo de recepción a docs/design/web/ y re-correr pnpm docs:parity; si no existe frame, es decisión de diseño pendiente, no desviación de implementación.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 119:2117 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados). Decisión columna “Dif.” (AC8): el frame sí aplica tinte semántico — la varianza negativa (−$20 en el frame) se dibuja como píldora tintada, el resto queda texto plano. La app renderizaba todo en gris (incluido el faltante −$150.00), perdiendo ese realce → se restauró el StatusBadge en la lista reutilizando varianceStatusVariant (src/components/PosShifts/ShiftList.tsx), la misma regla que ya usa el detalle W33: success → texto muted, danger/warning → píldora soft. La captura fresca lo muestra (−$150.00 en badge danger). Residuo menor: el frame tiñe el faltante en ámbar mientras la app mapea negativo→danger (rojo) vía el helper compartido (fuente única de la semántica lista↔detalle); diferencia de matiz registrada en intentional-deviations.md. Test: ShiftList.test.tsx (tinte del faltante / texto plano del cuadrado).
⚠️ Diferencias menores
La pantalla se rehízo (post-#538) y ahora replica el diseño casi 1:1; la nota previa (tabla genérica de turnos por empleado) quedó obsoleta.
Estructura: ya presentes subtítulo “Historial de cortes de caja”, tabs (Turnos / Mov. efectivo / Cerrar turno), CTA azul Abrir turno, buscador, chips Todos/Abiertos/Cerrados y Filtros + select “Selecciona una opción”. Columnas alineadas al Figma: Turno (avatar+#) · Cajero · Apertura · Vendido · Dif. · Estado, con checkbox de selección e icono de editar por fila.
Paginación: ahora numerada custom (“Mostrando 1–5 de 7 · 1 2 ›”), coincide con el patrón Figma (ya no es TablePagination de MUI).
Estados: badge “Abierto” en verde soft y “Cerrado” en rojo soft, alineados al design system (se corrigió el azul sólido #3B82F6 anterior).
Residuo — chips de filtro: Todos/Abiertos/Cerrados se renderiza como control segmentado (contenedor gris, píldora blanca activa) en vez de las píldoras sueltas del Figma (Todos en azul-soft). Mismo patrón en W36/W37.
Residuo — select: hereda del residuo de [Select] (sin tinte de opción seleccionada, hairline en estado abierto).
Datos: columna Dif. en formato moneda ($0.00 / −$150.00) vs enteros del Figma; Apertura con fecha absoluta (“29 jun 2026”) vs relativa (“Hoy 08:00”). Solo datos.
Nav / topbar (sistémico, registrado aparte): la sidebar admin (grupo ADMINISTRACIÓN reducido a Comercios/Notificaciones) y el topbar (sin cluster de avatares JP MA LR, store “Tienda demo”) divergen del Figma por el cambio de nav-IA de #538; no se re-reporta en cada pantalla admin.
❌ Las imágenes no corresponden a la misma pantalla.
Re-verificado con la captura fresca (mismatch conocido).
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 en azul) y botón outline “Reimprimir corte”. Reporte Z ya emitido.
APP:diálogo de detalle de un turno abierto (Ana Gómez · Sucursal Centro·term-01, badge “Abierto”, Cierre “Pendiente de cierre”, Conciliación de Efectivo con Esperado/Contado en “—” y Diferencia “Pendiente de cierre”, Movimientos “Sin movimientos de efectivo”, Notas “Turno matutino en curso”).
Desajuste de flujo: turno de la app sigue abierto (no hay Corte Z que renderizar) y es diálogo, no página. Para auditar paridad hay que recapturar la vista de Corte Z de un turno cerrado (ver W58). No se listan diferencias de estilo por ser vistas distintas.
Misma pantalla (Abrir turno con keypad de fondo de caja). El Figma la maqueta como tarjeta dentro del chrome admin; la app la renderiza como página fullscreen de terminal (con “Bloquear ahora” y “Cancelar”) — decisión sistémica página-vs-tarjeta, pendiente de producto.
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 muestra input “Fondo de caja”, monto $0.00, enlace “Cancelar” y pie “Gerente Demo”.
Estados: “Abrir turno” deshabilitado en gris (bg #E5E7EB, texto #9CA3AF) por monto $0.00; en Figma aparece azul activo por tener $1,500.00 — diferencia de estado esperada. El azul de “Cancelar”/“Bloquear ahora”/foco del input lee consistente con el canónico #0052CC.
Tipografía / bordes: jerarquía correcta (título oscuro #1F2933 / subtítulo “Cuenta el fondo de caja inicial” gris) y hairlines #E5E7EB en input y teclas — fixes aplicados.
Iconos: teclas del keypad en cajas outlined redondeadas; en Figma los dígitos van planos (solo backspace enmarcado) — residuo menor del KeypadKey.
Layout: columna angosta centrada con mucho whitespace lateral, propio de la página fullscreen.
❌ Las imágenes no corresponden a la misma pantalla.
Mismatch conocido, re-verificado.
FIGMA: resumen “Cerrar turno · Corte Z” dentro del shell admin — tarjeta “Conteo de efectivo” (esperado $5,800.00 / 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 la vista de resumen/corte Z ya calculado.
APP: pantalla de terminal “Cerrar turno” / “Cuenta el efectivo por denominación”: desglose por denominación ($1,000→$0.50) con inputs en 0, Total contado $0.00, Efectivo esperado $2,300.00, Diferencia −$2,300.00, campo Notas y botón deshabilitado. Es el paso de captura por denominación, no el resumen — ese contenido corresponde a W65.
⚠️ Captura OBSOLETA (pre-#538): el harness no pudo refrescar este shot (testid nav-close-shift eliminado) — targets.ts necesita actualización de nav-testid; re-mapear W35 al resumen/corte Z correcto antes de auditar estilo.
Pantalla reconstruida (post-#538); la nota previa (falta CTA, toolbar recortada, columnas divergentes) quedó obsoleta — ahora coincide casi 1:1.
Estructura: ya presente el CTA azul relleno + Nuevo movimiento; toolbar con buscador, control Todos/Entradas/Salidas y Filtros. Columnas alineadas al Figma: checkbox · Movimiento (avatar+nombre) · Cajero · Motivo · Monto · Autoriza · Estado · editar.
Estados: StatusBadge de Estado presente (Registrado verde-soft / Autorizado ámbar-soft), coincide con el diseño.
Residuo — select: falta el select “Selecciona una opción” junto a Filtros que sí trae el Figma.
Residuo — chips: control segmentado vs píldoras sueltas del Figma (igual que W32).
Color / datos: montos coloreados verde/rojo (+$1,500.00 / −$2,000.00) — mejora semántica frente a los montos neutros del Figma; formato con decimales “.00” vs enteros del Figma. Solo criterio/datos.
❌ Las imágenes no corresponden a la misma pantalla.
Mismatch conocido, re-verificado.
FIGMA: página admin “Movimientos de caja” (la misma de W36; se reutilizó por falta de diseño del formulario de terminal): sidebar, tabla Movimiento · Cajero · Motivo · Monto · Autoriza · Estado y paginación.
APP:formulario de terminal “Movimiento de efectivo” / “Registra una entrada o salida de efectivo”: control segmentado Entrada/Salida/Depósito/Retiro, campo Monto ($0.00), teclado numérico, textarea “Motivo” (0/240), botón “Registrar” (deshabilitado) y enlace “Cancelar”.
⚠️ Captura OBSOLETA (pre-#538): shot no refrescado (deriva de nav de terminal) — targets.ts necesita actualización. Además no existe Figma del formulario de terminal: conseguir/generar el diseño de referencia o reasignar la captura antes de auditar color/tipografía/espaciado.
Misma pantalla; el fix principal llegó y los dos residuos previos están resueltos: el desglose ahora va en dos columnas compactas (antes una sola columna full-width) y el KPI “Efectivo esperado” se pinta en azul de realce.
KPIs: tres tarjetas Ventas brutas $12,450.00 / Efectivo esperado $4,500.00 (azul) / Pagos con tarjeta $7,950.00 coinciden con el Figma.
Totalizador: Total contado, Efectivo esperado y Diferencia (faltante), junto con el botón “Cerrar turno (Z-Report)”, ya son visibles; no quedan bajo el fold.
Residuo — color de diferencia: en el Figma la “Diferencia (faltante)” va en rojo (−$15.00); en la app (con conteo en cero) el faltante $4,500.00 se muestra en texto oscuro — verificar que el faltante aplique el rojo de error con datos reales.
Formato / datos: etiquetas de denominación con decimales “$1,000.00” vs “$1,000” del Figma; conteos prellenados del Figma vs ceros en la app son solo datos.
Título: app con título + subtítulo (“Cuenta el efectivo por denominación”) vs título unificado del Figma — reordenamiento menor, aceptable.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 119:2409 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores — la migración a DataTable ya aterrizó y el residuo de IDs crudos quedó resuelto; solo resta la terminología del nombre de tienda.
Encabezado: ✅ Coincide — título Personal + contador ‘5 empleados · 3 roles’.
CTA: ✅ Coincide — ‘Invitar usuario’ con icono + en el encabezado.
Toolbar: ✅ Coincide — buscador, segmentado Todos/Activos/Invitados, botón Filtros y select ‘Selecciona una opción’.
Filas: ✅ Coincide — checkbox de selección + acción editar (lápiz) por fila.
Estado: ✅ Coincide — badge de tinte suave 3-estados (Activo/Invitado/Inactivo).
Tienda: ⚠️ ya muestra un nombre legible (corregido: sin ‘store-1/store-2’), pero usa el prefijo ‘Sucursal …’ (Sucursal Centro/Norte) en lugar de ‘Tienda …’ como en Figma.
Veredicto de paridad (#613): blocked-report — ⛔ Bloqueado — el par actual no compara la misma pantalla/estado. Evidencia: referencia Figma 124:6018 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados). Bloqueo: la captura pareada es el drawer de alta rápida de la lista (admin-pos-employees--dialog-nuevo-empleado), no la página completa /admin/pos/employees/new que diseña el frame; existe una captura de página (admin-pos-employees-new.png) pero re-aparearla exige tocar la declaración del generador (scripts/build-design-parity-doc.mjs, fuera del alcance de este ticket). Seguimiento en todos.tasks.
❌ Las imágenes no corresponden a la misma pantalla. (Desajuste conocido W38.)
Panel FIGMA: página completa de edición. 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: 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… detrás). Campos: Sucursal, Usuario, Rol, PIN (todos con * requerido) más un switch Activo, con acciones Cancelar / Guardar al pie.
Desajuste de composición Y contenido: página vs. drawer, y además distinto set de campos — la app no tiene Nombre completo/Correo/Teléfono/Tienda/Estado, y añade Sucursal, Usuario (select) y el toggle Activo que la página Figma no muestra.
Tokens (medidos en el drawer, sí llegaron): azul de marca #0052CC en Guardar; switch activo azul; Cancelar como botón secundario blanco con borde 1px. Azul canónico correcto.
Acción: recapturar la página/empleados/nuevo (o /[id]/editar) que corresponde a este diseño, no el drawer de alta rápida de la lista. Sin esa captura no puede auditarse la paridad real de W38.
Desviación (propuesta)
🔶 Propuesta — el alta se resuelve como drawer lateral sobre el listado en vez de la página completa del frame, preservando tabla/filtros/scroll. Figma: documentar el patrón drawer-sobre-lista para altas (o confirmar la página completa caso por caso). ver desviaciones
✅ Paridad (FD-7 · #926) — 👍 la pantalla se rehízo y coincide con el diseño en lo esencial; los residuos que quedan son heredados (Search Field blanco+hairline) o divergencias de IA de navegación con Figma desactualizado (🎨), no bloqueantes y rastreados aparte. Comparo la página lista; el diálogo y sus estados se auditan en W39b.
Color: OK. Azul canónico #0052CC en Invitar usuario y Filtros; header de tabla #F7F9FC; status badges soft (Activo verde, Invitado ámbar, Inactivo rojo).
Layout — corregido:Invitar usuario es ahora un botón compacto en el header superior-derecho (antes banner full-width). Ya no compiten varios primarios rellenos: Filtros es outline.
Contenido — corregido: aparecen el page header (“Personal” + subtítulo “5 empleados · 4 roles”), los filter chips Todos/Activos/Invitados (segmented), y los avatares con iniciales (AL, BM, CN…) en la celda Empleado.
Estados — corregido: la columna Estado usa StatusBadge soft (Activo/Invitado/Inactivo), no los círculos negros anteriores.
Columnas: ahora Empleado/Rol/Tienda/Ventas/Turnos/Estado, alineadas con Figma. La sección “Invitaciones pendientes” es un añadido funcional válido no presente en Figma.
Residuos menores: campo Buscar blanco+hairline vs. soft-fill del diseño → hereda del residuo de [Search Field]; el select derecho trunca a “Selecciona una …”.
Nav lateral (registro único para todo el shell POS): el grupo ADMINISTRACIÓN de la app muestra solo Comercios / Notificaciones, mientras el Figma lista Comercio y tiendas / Terminales / Ajustes / Notificaciones. Divergencia de IA de navegación (probable reorganización post-#538); Figma parece desactualizado (🎨). No se repite en las demás pantallas admin de este lote.
✅ Paridad (FD-7 · #926) — el diálogo compone el Dialog DS + tokens y ahora construye todos los estados diseñados del frame W39: idle/vacío, cargando/enviando, éxito (invitación enviada), y los frames de error (correo duplicado, correo inválido en línea, error de red). Cada estado usa la copia es-MX verbatim de user.i18n y no expone marcas de proveedor. El showcase PersonalInvitarScreenShowcase refleja los seis frames lado a lado; specs InviteUserDialog.test + PersonalScreensShowcase.test en verde.
Color: OK. Borde de campos #E5E7EB, botón deshabilitado #E5E7EB / texto #9CA3AF, subtítulo #6B7280, título ~#1F2933. Scrim plano.
Bordes/Sombras: campos con hairline y radio suave; diálogo con esquinas redondeadas; sin halo de sombra dura.
Estados — construidos: además del formulario idle, el diálogo renderiza el panel cargando (spinner + “Enviando invitación…”), éxito (“Invitación enviada” + “Invitar a otra persona”/“Listo”), y error (correo ya con acceso · genérico/red · inválido en línea). Enviar invitación se deshabilita mientras el formulario está incompleto o en envío.
Layout (residuo de plantilla de diálogo): título centrado (Figma a la izquierda), sin botón X de cierre, y acciones como dos botones a todo el ancho en lugar de compactas a la derecha. Más aire vertical que el diálogo compacto de Figma → hereda del residuo de [Dialog / Modal].
Contenido: la app muestra un subtítulo (“Se enviará un correo…”) en vez del “Texto de ayuda” bajo cada campo; el campo Rol es un select con * requerido vs. campo de texto “Cajero” en Figma. Decisiones de producto.
Recomendación: alinear la plantilla del diálogo (título a la izquierda + X, acciones compactas a la derecha).
Veredicto de paridad (FD-7 · #926): ✅ — la matriz de solo lectura compone el DataTable DS + PageTemplate + tokens de tema, con las columnas rol (Cajero · Supervisor · Gerente), el check neutro de concesión, el guion de denegación y los chips de Ámbito (Tienda/Comercio) — todos derivados de src/components/PosRoles/posRoles.ts (concesiones acumulativas, verificadas por posRoles.spec). Permanece read-only y alcanzable W37→W40 vía PersonalTabs. Evidencia: referencia Figma 130:8533 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
✅ Paridad — 👍 mejora importante frente a la nota previa; varios faltantes ya resueltos.
Color: OK. Header #1F2933, subtítulo gris, header de tabla #F7F9FC, divisores #E5E7EB, botón Ver documentación azul #0052CC. Tab activo underline #0052CC.
Contenido — corregido: ahora existe la columna Ámbito con chips soft (Tienda verde, Comercio rojo), presente el Alert informativo “Matriz de solo lectura” completo (ya no reducido a subtítulo), y la paginación (“14 permisos · 3 roles”, 1 2 3).
Iconos/Estados — corregido: los checks son ahora neutros oscuros ✓ (antes verdes #32AE60), coincidiendo con el criterio del Figma; guion “—” para deshabilitado.
Residuo de toolbar: falta el botón Filtros y el select “Selecciona una opción” que Figma coloca a la derecha; la app deja solo Buscar + chips Todos/Cajero/Supervisor/Gerente.
Layout: la app añade tabs Empleados / Roles y permisos que el Figma no plantea; filas de permisos con distinto contenido (Ver catálogo, Editar catálogo, Ver inventario… vs Registrar venta, Aplicar descuento…) — decisión de datos, no de estilo.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 125:6381 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores — misma pantalla (Reportes → Resumen). Los fixes sistémicos llegaron.
Color: OK. Barras y glifo del icono KPI en #0052CC; tint de tab activa ≈#E6EEFA; deltas en verde. Cards planas con hairline #E5E7EB, sin sombra.
Layout (culpable — control de rango): el rango de fechas usa <input type=date> nativos (“08/01/2026 → 08/07/2026”, fuente del sistema + glifo de calendario del navegador) en lugar del dropdown único estilizado “1 Oct – 24 Oct, 2025” del diseño → rompe la paridad tipográfica → hereda del residuo de [Date-range Picker].
Contenido (KPIs): el set difiere — app: Venta bruta / Venta neta / Transacciones / Ticket promedio; Figma: Ventas del periodo / Transacciones / Ticket promedio / Comisiones. Falta la card Comisiones (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. El chevron del delta es fino → hereda del residuo de [KPI Stat Card] (Figma usa ▲/▼ macizos).
Gráficos: “Ventas por hora” (línea/área azul) y “Por método de pago” (barras azules) coinciden; esquinas de barra rectas → hereda del residuo de [Chart — Bar]. Tabla “Top productos” con columnas Producto/SKU/Categoría/Ingresos/Unidades/Tendencia alineadas.
Veredicto de paridad (#613): blocked-report — ⛔ Bloqueado — el par actual no compara la misma pantalla/estado. Evidencia: referencia Figma 130:7959 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados). Bloqueo: la captura pareada apunta a daily-sales (dashboard “Ventas del Día”), no al desglose por producto con tabs (Por producto/categoría/empleado/método) y Exportar que diseña el frame W56; re-aparear la ruta correcta exige tocar la declaración del generador (fuera de alcance). Seguimiento en todos.tasks.
❌ Las imágenes no corresponden a la misma pantalla. (Desajuste conocido W56; ruta daily-sales tocada por #538 — revisada, sigue siendo otro reporte.)
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: filtros Fecha (06/08/2026) / Sucursal (Centro), tarjetas KPI (Venta Bruta $16,826.22 · Venta Neta $13,961.95 · Transacciones 160 · Ticket Promedio $87.26), gráfico de barras Ventas por Hora y sección Productos Más Vendidos.
Ruta a corregir: la captura apunta al dashboard diario, no al desglose de ventas por producto que diseña W56. Recapturar la ruta correcta (tabla con tabs y Exportar) antes de auditar paridad de estilos.
No se listan diferencias de color/tipografía porque no hay pantalla equivalente que comparar.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 130:8242 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados).
⚠️ Diferencias menores — 👍 el hallazgo principal previo (chip Todas como botón sólido azul) está corregido.
Color: OK. Azul #0052CC en Exportar, checkbox de fila y select-all, tinte de avatar con inicial primary. Chips de estado soft reales (Activa verde #ECFDF5, ámbar, rojo) que coinciden con Figma.
Filtros — corregido:Todas / Servicios / Tarjeta es ahora un segmented control (Todas como segmento blanco elevado sobre contenedor gris; Servicios/Tarjeta en texto gris), en vez del botón sólido azul anterior. Figma usa tint #E6EEFA + texto azul para el activo y pills grises para el resto → diferencia menor de tono, ya no de patrón.
Estados: el checkbox de cabecera muestra indeterminado (correcto por la selección parcial de 1 fila); Figma lo dibuja vacío — la app es más correcta.
Bordes: header de tabla #F7F9FC, fila seleccionada azul muy claro, divisores hairline #E5E7EB — alineados.
Residuos menores: avatares de una sola letra (C/S/P/L/A) vs. dos letras (CO/SA/PA…) en Figma; el select derecho trunca a “Selecciona una …”; los botones de paginación van con borde azul (1 relleno, 2/3/10 outline) vs. números planos en Figma.
Layout: captura solo-contenido (sin sidebar/AppBar) — diferencia de captura conocida, no de pantalla. 5 filas, mismos importes y “Mostrando 1-5 de 18”.
❌ Las imágenes no corresponden a la misma pantalla. (Desajuste conocido W58.)
Panel FIGMA:Cortes de caja (Z) · Histórico de cortes Z — 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 — selector Turno 2 · cerrado 28 jun 2026, botón Imprimir, y una tarjeta con el desglose: Ventas (Venta Bruta $24,125.00 / Neta $20,243.39 / Impuestos / Descuentos), Formas de Pago, Cancelaciones y Conciliación de Efectivo (Diferencia −$20.25). No hay tabla ni listado.
Desajuste: la captura corresponde al reporte individual que se abre desde la lista, no al histórico que diseña el Figma. Recapturar la ruta de la lista de cortes Z para poder auditar paridad.
No se listan diferencias de color/tipografía porque no es la misma pantalla.
⚠️ 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 (dashboard de Reportes con KPIs, tarjetas de tipos de reporte y panel “Reportes Detallados”) 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.
❌ Diferencias importantes — la captura fresca no muestra la unificación de CTA de #548; el botón sigue divergiendo y persisten las brechas estructurales.
CTA: app ‘Continuar’ (deshabilitado) vs Figma ‘Agregar a la venta’ — la copia no coincide visualmente.
Layout: sigue faltando por completo la barra de pestañas del diseño (Servicios / Tiempo aire / Pines / Transferir / Depósitos / Wallet); la app va directa al contenido.
Contenido: la tarjeta izquierda mantiene otro paradigma: app = grid de proveedores (CFE, JMAS Juárez, Telmex, Gas Natural) con encabezado ‘Selecciona el proveedor’; Figma = chips de Categoría (Luz/Agua/Gas/Internet/Teléfono/TV, Luz seleccionada) + fila de Proveedor único (CFE). Es la mayor divergencia visible.
Estados: app en estado vacío (Importe ‘Consultar adeudo’, Total $0.00, Continuar disabled) vs Figma lleno ($688.00, botón activo).
Título: app ‘Pago de Servicios’ vs Figma ‘Pago de servicios’ (capitalización).
Color / nav: azul de marca correcto; item Servicios activo con tinte #E6EEFA — ya conforme.
Desviación (propuesta)
🔶 Propuesta — los servicios VAS son rutas del sidebar (grupo Finanzas), no una barra de pestañas in-page; la CTA está unificada en «Continuar» en todo VAS (#548). Probable Figma desactualizado. Figma: adoptar la navegación por sidebar en los frames VAS (o confirmar la barra in-page como canónica). ver desviaciones
❌ Las imágenes siguen mostrando pasos distintos del flujo — no procede auditoría de estilo lado a lado.
Panel FIGMA: página compuesta — subtítulo “Recargas de saldo”, sección Compañía con proveedores como chips pequeños con avatar de letra en color (Telcel, Movistar, AT&T, Unefon, Bait), grilla Monto ($10–$500) con $50 seleccionado, y panel derecho Captura (“Número de teléfono”, “Total (incl. comisión) $51.00”, botón “Agregar a la venta”).
Panel APP: solo el primer paso (selección de proveedor) — subtítulo “Telcel, AT&T, Movistar y más”, “Selecciona el proveedor” con grid de tarjetas grandes con tile de letra en gris (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.
Post-fix #548: el CTA de la app es “Continuar” (deshabilitado), ya unificado en todas las pantallas VAS. Es el mismo copy que W42 ya mostraba, así que no hubo cambio visible aquí — la divergencia de fondo persiste (lista de proveedores distinta, chips con avatar de color vs tarjetas grandes grises, montos/captura ausentes en la app). Azul de “Vaciar” #0052CC canónico.
Para re-auditar paridad hace falta recapturar la app en el mismo paso compuesto que diseña el Figma, o alinear el Figma con el asistente por pasos de la app.
Desviación (propuesta)
🔶 Propuesta — TAE usa un flujo por pasos (proveedor → monto/captura) en vez de la página compuesta del frame, reutilizando el patrón VAS compartido. Figma: documentar el flujo por pasos, o confirmar la página compuesta (implicaría rediseñar VasSaleScreen). ver desviaciones
⚠️ Diferencias menores — misma pantalla; los fixes sistémicos siguen presentes, el residuo es copy y estado de captura.
Etiqueta de botón (post-fix #548): el CTA de la app ahora es “Continuar” (antes “Agregar a la venta”), ya unificado con el resto de las pantallas VAS. Como efecto, ahora diverge del Figma (“Agregar a la venta”) pero gana consistencia interna entre W41/W42/W43. Divergencia intencional de producto, no defecto de estilo.
Color: azul de marca correcto (Vaciar #0052CC, Total (incl. comisión) #0052CC, deshabilitado bg gris). Glifos de marca (Netflix rojo, Spotify verde, GP azul) correctos.
Estados: la captura de la app está en estado vacío (ninguna marca, Total $0.00, CTA deshabilitado); el Figma muestra estado lleno (Netflix + $200). Estados distintos del mismo flujo, no defecto. Por eso la grilla “Denominación” no aparece en la app (se renderiza tras elegir marca).
Contenido: copy divergente — título “Tarjetas de Regalo” (app) vs “Tarjetas de regalo”; subtítulo “iTunes, Google Play, Spotify y más” vs “Pines digitales”. Decisión de producto.
Layout: estructura de dos columnas (selector izquierda + Captura derecha) coincide con el Figma.
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. Texto de etiquetas/heading oscuro #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. Coherente con el 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 — 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 “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 (comprobante “Transferencia exitosa” con check verde, monto, filas De/Para/Concepto/Folio y botones Compartir comprobante / Listo) 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 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 amarillo. Botón verde de acción #10B981 y “Rechazar” con outline rojo (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, tarjeta lateral “Comprobante” con carga de archivo (deshabilitada, “disponible próximamente”), y barra de acciones fija Cancelar/Continuar. Es la pantalla correcta del título.
Panel FIGMA: el frame que estaba pareado (123:4532) 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.
Confirmado en la captura fresca: el botón Continuar mide #0052CC (azul canónico llegó) y el select de “Canal de depósito” hereda del residuo de [Select] (hairline vs 2px azul). Sin diseño no hay auditoría de paridad.
Desviación (propuesta)
🔶 Propuesta — el alta se resuelve como drawer lateral sobre el listado en vez de la página completa del frame, preservando tabla/filtros/scroll. Figma: documentar el patrón drawer-sobre-lista para altas (o confirmar la página completa caso por caso). ver desviaciones
Flujo 14 (issues #571 · #570). Tab Conexiones + conectar + detalle (con Movimientos) + Agregar saldo (modal + comprobante). Las capturas son la referencia del design system en /playground: la superficie real vive bajo /admin/settings/connections (owner/admin) y es owner/admin-only.
⚠️ 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 (directorio de clientes: filtros, columnas Cliente / Teléfono / Correo / Compras / Total gastado / Última visita / Saldo, paginación “Mostrando 1–7 de 9”) y luce consistente con los tokens sistémicos, pero no hay diseño exportado (nodo 231:3 sin exportar) contra el cual medir paridad. 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 (detalle de cliente: cabecera con avatar + acciones Editar/Nueva venta, KPIs Total gastado / Compras / Ticket promedio / Saldo, pestañas Compras / Datos fiscales (CFDI) / Crédito · fiado, tabla de compras) y aplica los tokens sistémicos, pero no hay diseño exportado (nodo 232:157) contra el cual comparar. Siguiente paso: exportar el nodo a terminales-solution/docs/design/web/ y correr pnpm docs:parity; si no existe frame, es decisión de diseño pendiente, no desviación de 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 (drawer lateral “Nuevo cliente” con campos Nombre completo* / Teléfono / Correo (opcional) / RFC (opcional, para CFDI) y acciones Cancelar/Guardar) pero no hay diseño exportado (nodo 233:383) contra el cual medir paridad. Siguiente paso: exportar el nodo y correr pnpm docs:parity; si no existe frame, es decisión de diseño pendiente, no desviación de 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 (nodo 233:279) ni captura de la app, así que no hay nada que comparar. Primero hay que resolverlo (exportar el frame y/o construir/capturar 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 (nodo 233:383) ni captura de la app del modal de alta rápida en el POS. Primero hay que resolverlo (exportar el frame y/o capturar la pantalla); recién ahí tiene sentido auditar paridad.
Desviación (propuesta)
—
TERM / WL — Comercios, tiendas, terminales y white-label
Veredicto de paridad (#613): match — ✅ Coincide. Evidencia: referencia Figma 130:7665 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados). Chequeo de fixtures (filas 4–5): verificadas verbatim contra el frame — comerciosParityData.ts filas 4/5 (Leche Lala 1L · RFC 750100912 · Lácteos · $24.50 · 0 · Suspendido; Aceite 123 1L · RFC 750103345 · Abarrotes · $38.00 · 31 · Activo) reproducen 1:1 lo que dibuja el frame 130:7665 (el propio diseño usa esos nombres de producto como placeholders del roster de comercios). No divergen → sin cambio de datos. El showcase /playground?component=w48-comercios renderiza las mismas filas.
✅ Coincide — la composición ya reproduce el layout del Figma; los fixes de #547 aterrizaron íntegros.
Encabezado: ✅ título de página Comercios + subtítulo ‘Organizaciones que administras’ (corregido).
⚠️ Falta captura — formulario, requiere captura con un comercio abierto
Notas
⛔ Comparación no posible — falta la captura de la app. El diseño existe (Figma 124:6197: formulario “Perfil del comercio” / “Datos de tu organización” con secciones Comercio —Nombre comercial, RFC, Régimen fiscal, Dirección fiscal— y Contacto —Correo, Teléfono—, primario + Guardar y barra inferior “Tienes cambios sin guardar” · Descartar/Guardar) pero no hay implementación capturada. 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.
Layout: ✅ coincide — título Tiendas, subtítulo 6 tiendas · 2 comercios, tabs Todas/Abiertas/Cerradas, buscador, columnas Tienda (avatar) · Dirección · Terminales · Ventas mes · Empleados · Estado, edición por fila y paginación numerada.
Estados: ✅ StatusBadge soft por estado (Abierta verde, Sin turno ámbar, Cerrada gris).
Residuo menor: falta el Select de orden («Selecciona una opción») del frame; la CTA Nueva tienda va en la fila de toolbar en vez del encabezado; los nombres de fixture leen «Sucursal …» (dato del mock) vs «Tienda …» del diseño.
Nota de captura: la lista tarda ~500 ms (mock) en poblar; una captura anterior tomó el esqueleto vacío — la recaptura confirma 6 filas.
⚠️ 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.
⚠️ Diferencias menores — el texto del CTA y el residuo de IDs crudos ya se corrigieron; resta la terminología del nombre de tienda y detalles de toolbar.
Tienda: ⚠️ ya muestra nombre (corregido: sin ‘store-1/2/3’), pero usa el prefijo ‘Sucursal …’ (Sucursal Centro/Norte/Sur) en lugar de ‘Tienda …’ de Figma.
Toolbar: ⚠️ falta el select de orden (‘Selecciona una opción’) y el CTA queda en la fila del toolbar en lugar del encabezado top-right (menor).
✅ Paridad (FD-9 · #927). El overlay «Vincular terminal» (TerminalPairingDialog, /admin/pos/terminals) compone la tarjeta DS + tokens de tema y el chip de código mono azul-marca (PairingCodeChip, gap #24) — reemplazando el Box ad-hoc con relleno action.hover. Los estados inválido/expirado/éxito (E7/E8/S4, nodos 552-2758 / 553-2880 / 554-3002) — y los denied/not-found que comparten el mismo layout de feedback — están construidos por la máquina de estados TerminalPairingContent y se muestran lado a lado en el showcase w53-vincular-pairing del playground, cada uno con la copia es-MX verbatim de pos-terminal.i18n y sin marcas de proveedor. El código/cuenta varían por corrida. Sin cambio de comportamiento ni de contrato de pairing (US-TERM-2 sigue en verde). Evidencia: docs/ui-evidence/614/ + docs/design-parity/screenshots/playground/w53-vincular-pairing.png.
Re-auditoría del ThemeEditorForm tras PR #538. El layout base del editor (tarjeta Tema con Color primario / Color de acento + lápiz de edición, dropzone, select Tipografía: Inter, switch Tema oscuro disponible, y tarjeta Vista previa con banner ‘Tu Comercio’ + Saldo disponible + Cobrar) se mantiene fiel al diseño.
Color: Azul canónico verificado — Guardar / lápices de edición (en chip cuadrado tinte #E6EEFA) / swatch primario / banner ‘Tu Comercio’ / Cobrar = #0052CC. El acento diverge por dato de mock: Figma azul #1A73E8 vs app teal #00A3A3; no es defecto de estilo.
Layout (nuevo, PR #538): La app ahora añade en el header dos acciones extra que Figma no muestra: Restablecer estilos (botón outlined en rojo/coral) y Cancelar (botón de texto), junto al + Guardar. Figma solo trae + Guardar. Divergencia de composición nueva a validar contra el diseño (o actualizar Figma).
Estados: El switch ‘Tema oscuro disponible’ aparece OFF (gris) mientras Figma lo muestra ON (azul) — diferencia de dato/estado, ambos renderizan bien.
Dropzone: La app suma icono ‘+’ y botón outlined ‘Seleccionar archivos’ (Figma solo icono compartir); hint distinto (Figma ‘CSV, PNG o JPG · hasta 10 MB’ vs app ‘PNG, JPG, WEBP o GIF · hasta 10 MB’) y colocado bajo el dropzone. Composición menor.
Contenido extra (👍): La app incluye la sección ‘Recibo / Encabezado del recibo’ (parte ‘+ recibo’ del alcance) que el crop de Figma no muestra — contenido correcto de más.
Sistémico (1 línea): sidebar con chip ‘Tienda demo’ e ítem ‘Comercios’ vs ‘Tienda Centro’ / ‘Comercio y tiendas’ de Figma — cambio de nav-IA global (PR #538), no propio de la pantalla.
Residuo restante = dato de mock (acento/switch), composición menor del dropzone y las nuevas acciones de header (Restablecer/Cancelar) por conciliar con Figma.
Desviación (propuesta)
🔶 Propuesta — el encabezado del editor agrega Restablecer estilos (outlined) y Cancelar junto a Guardar. Figma: agregar esas acciones al encabezado del frame W54. ver desviaciones
Tipografía: Título/labels #212B35 ≈ #1F2933. Sin observaciones.
Bordes/Sombras: Hairline #E5E7EB en tarjetas y campos; Correo deshabilitado con relleno gris; tarjetas y AppBar planas. Correcto.
Iconos: El botón Figma trae glifo “+” (“+ Guardar”); la app muestra solo “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 — no existen en Figma. Contenido de más, no falta.
Estados: Figma muestra los campos como placeholders vacíos; la app muestra Nombre/Teléfono con valor y Correo deshabilitado. Diferencia de estado.
Layout: Las tarjetas de la app ocupan casi todo el ancho; 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 se miden en esta captura.
Color: Azul canónico verificado — FAB #0052CC, track del Switch 2FA #0052CC, botones outline Cambiar/Cambiar PIN con label/borde #0052CC y enlace Cerrar. Verde de éxito Esta sesión#10B981, igual que Figma.
Tipografía: Títulos de tarjeta y filas (Acceso, Contraseña, 2FA, PIN de cajero) en #1F2933; subtítulos/metadatos en gris secundario. Coincide.
Bordes/Sombras: Tarjetas planas blancas con hairline #E5E7EB sobre fondo #F5F7FA; divisor entre filas de sesiones presente; sin sombra en tarjetas ni FAB. Correcto.
Layout/Contenido: 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. Todos los textos correctos.
Único desajuste esperado y no imputable a la pantalla: el encuadre del playground recorta el sidebar y la AppBar (buscador, Turno abierto, Sincronizado, avatares) que sí figuran en Figma. Nada accionable.
⚠️ 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.
⚠️ Diferencias menores — re-verificado sobre la captura fresca; el H1 quedó corregido en #548.
H1 (resuelto): ✅ la app ya renderiza el título ‘Ajustes’ encima de las pestañas (General/Seguridad/Bitácora/Mi cuenta), como en Figma.
Layout: las tarjetas de formulario siguen ocupando todo el ancho del contenido; en Figma están constreñidas a una columna de lectura (~455px). Considerar maxWidth.
Color / Estados / Tipografía / Bordes: coinciden — switch encendido #0052CC con thumb blanco, select ‘Español (MX)’, botón Guardar azul de marca plano, tarjetas planas con hairline y jerarquía correcta.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 123:5114 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados). Suplantación (#440) — sin frame Figma propio: las filas de impersonación audit-7/audit-8no tienen frame Figma (se integran en la tabla W62 existente). Evidencia capturada aparte, en la página 2 (donde se ordenan a propósito para que la página 1 quede byte-a-byte comparable con el frame):
Se ve el badge Suplantación + doble atribución (operador Diego S. / en nombre de Ana P. en audit-7; audit-8 cae al id crudo del sujeto por no traer snapshot after). Fuente: AuditLogList.tsx (audit-log-impersonation-badge-*) + auditLog.impersonation.ts.
⚠️ Diferencias menores — re-verificado; el formato de Fecha quedó corregido en #548.
Fecha (resuelto): ✅ la columna muestra ahora fechas es-formateadas (‘18 jul 2026’, ‘17 jul 2026’), con la cabecera ‘Fecha’ limpia y sin el em-dash suelto.
Layout: persiste la omisión de toda la columna de selección del Figma (checkbox select-all, checkbox por fila y primera fila en estado seleccionado). Falta la selección masiva en AuditLogTable.
Iconos: el glifo de acción sigue como lápiz relleno azul primary vs lápiz-en-recuadro contorneado gris del Figma.
Estados/Contenido: ‘Editó precio’ muestra ‘Rechazado’ (rojo) en app vs ‘OK’ en Figma; conteos/páginas (8 / 2 vs 3,210 / 10) son datos mock.
Color / cabecera / toolbar: coinciden (Exportar y paginación activa #0052CC, cabecera #F7F9FC, Buscar + Todas/Hoy/Esta semana + Filtros).
⚠️ 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 (nodo sin exportar o frame sin diseñar; el motivo va en la celda izquierda). La app SÍ captura un drawer de filtros funcional y coherente: chips ‘Filtrar por Acción’ (Anulación de venta, Ajuste de descuento, Movimiento de efectivo, Cambio de rol, Reinicio de PIN, Reembolso, Actuó como usuario) y ‘Filtrar por Entidad’ (Venta, Pago, Movimiento de efectivo, Membresía, Empleado, Usuario), campo ‘Usuario’, ‘Rango de fechas’ y botones ‘Limpiar Todo’ (outlined) + ‘Aplicar’ (azul). Residuo heredado del [Date-range Picker]: ‘Rango de fechas’ usa dos inputs Desde/Hasta separados. Siguiente paso: exportar el nodo a docs/design/web/ y re-correr pnpm docs:parity; si no existe frame, es decisión de diseño pendiente.
⚠️ Diferencias menores — los dos fixes estructurales de #547 ya aparecen; solo restan diferencias finas de glifo.
Agrupación: ✅ Coincide — la lista ya se agrupa por día en secciones ‘Hoy’ y ‘Ayer’ con divisores (corregido; antes todo caía en ‘Anteriores’).
Badges de icono: ✅ Coincide — los glifos ya no van todos en círculo de tinte; solo la fila tipo avatar (‘Nuevo empleado’) conserva el círculo (corregido).
Color / Layout / Tipografía: ✅ botón #0052CC, tinte de fila no-leída ≈ #E6EEFA, tabs Todas/No leídas/Ventas/Stock con activo azul subrayado, hora a la derecha.
Glifos específicos: ⚠️ persisten diferencias de icono: venta = recibo en la app vs carrito en Figma; transferencia = flecha simple vs doble flecha; corte de caja = reloj vs documento. Residuo cosmético menor.
✅ Coincide — misma plantilla, confirmado sobre captura nueva. El contenido difiere solo por el mock (Figma: alerta de inventario ‘Stock bajo’; app: ‘Venta completada #1029’).
Color: Botón primario #0052CC; rol ‘Sistema’ y enlaces de acción en azul. Fondo #F5F7FA, tarjeta blanca.
Tipografía: Título 600 oscuro, meta gris, cuerpo #1F2933; etiquetas de campo (Tienda/total) en gris con valor oscuro. Jerarquía correcta.
Botones / Bordes: Ramp correcto — primario relleno (‘Ver detalle’) + outlined azul (‘Realizar ajuste’), sin sombra; enlaces de texto ‘Marcar como no leída’ / ‘Descartar’ a la derecha; breadcrumb con enlace azul + ‘Detalle’ oscuro; tarjeta plana con hairline.
Iconos: Glifo de tipo (recibo) azul dentro de contenedor en tinte claro; en el diseño el rol Inventario usa triángulo ámbar por ser otro tipo. Correcto.
Layout: Estructura idéntica; la fila de meta muestra 2 columnas (app) vs 4 (Figma) por el mock distinto, no es residuo.
Menor: la fecha se muestra ‘18 jul 2026, 9:32 am’ (mes es-abreviado OK; ‘am’ en minúscula) vs ‘Hoy · 10:42’ del Figma — dato mock.
⚠️ Diferencias menores — misma paleta global ⌘K. La app captura el estado vacío (‘Escribe al menos 2 caracteres para buscar’) mientras Figma muestra el estado poblado (query ‘coca’ con resultados agrupados), así que filas, section-headers y tint de fila activa no son auditables aquí.
Color: Fix sistémico CONFIRMADO — el anillo de foco del input mide #0052CC. Diálogo #FFFFFF, scrim gris detrás correcto.
Layout / Estados: Residuo propio — el buscador se renderiza como TextField MUI con caja redondeada y anillo de foco azul 2px, mientras Figma lo diseña como barra de comando sin borde (icono + texto con divisor a todo el ancho, sin caja). Alinear al estilo command-bar (ver residuo [Command Palette]).
Contenido: Falta el pill ‘ESC’ arriba a la derecha que sí trae Figma.
Espaciado: Diálogo anclado más alto (pisa el contenido) y algo más angosto que el diseño centrado.
Cobertura: para cerrar la paridad hace falta recapturar el estado poblado y validar allí tint de fila activa (#E6EEFA), tiles de icono en tinte y tipografía de títulos/subtítulos.
Veredicto de paridad (#613): best-effort — ⚠️ Mejor esfuerzo — diferencias menores medidas, ninguna bloqueante. Evidencia: referencia Figma 106:2 + captura de la app (arriba), rúbrica agentic-ui-parity (layout · spacing · tokens · tipografía · estados). Shell admin (AC6): esta captura (admin-dashboard.png) ES el shell montado (drawer + top bar sobre /admin/dashboard); su referencia de navegación no-Figma vive en docs/design/admin-shell/admin-shell-reference.png. Layout/spacing/tokens/tipografía coinciden; los estados activos del drawer (ítem “Inicio” resaltado, grupos OPERACIÓN/CATÁLOGO/ADMINISTRACIÓN) coinciden con la referencia. La única divergencia de nav es la IA reorganizada en #538 (Comercios/Tiendas/Apariencia), una desviación aceptada (Figma desactualizado) ya registrada en intentional-deviations.md. Residuos restantes = componentes compartidos (Date-range Picker, KPI Stat Card, Chart Donut), no propios de W07.
🎨 Figma desactualizado (navegación) — con una novedad importante de paridad.
Resuelto: la captura fresca YA corresponde a la misma pantalla que el Figma. El desajuste previo (‘pantalla equivocada’ — dashboard de billetera/pagos) quedó atrás: ahora ambos muestran el dashboard analítico de retail — saludo ‘Hola, Victoria’, 4 KPIs, gráfico ‘Ventas por hora’, donut ‘Categorías’ y tabla ‘Ventas recientes’. Contenido y layout coinciden (KPIs $8,450 +12.5% · 128 +6% · $66.01 −2% · 342 +9%; tabla con checkbox+avatar+SKU+badges Activo/Bajo y primera fila seleccionada con tinte).
Nav (motivo del marcador, registrado UNA sola vez aquí): el drawer real de AdminShell cambió con PR #538 (src/components/AdminShell/adminNav.ts). El grupo ADMINISTRACIÓN se reorganizó — split comercio↔tienda (Comercios / Tiendas), item white-label ‘Apariencia’ añadido, más Terminales / Ajustes. La app encabeza el grupo con ‘Comercios’ donde el Figma dibuja ‘Comercio y tiendas / Terminales / Ajustes’. Es un cambio de IA intencional; el Figma de navegación quedó desactualizado — actualizar el diseño, no el código. Esta barra aparece en TODAS las pantallas admin; no se repite en las demás.
Residuos de componente heredados (no recontar): selector de fecha = dos inputs nativos Desde/Hasta (08/01/2026–08/07/2026) vs el pill único combinado ‘Hoy / 1 Oct–24 Oct’ del Figma ([Date-range Picker]); delta de KPI con chevron fino ^/v vs triángulo ▲/▼ relleno ([KPI Stat Card]); donut con gaps de padAngle vs segmentos que se tocan ([Chart — Donut]).
Menor: el emoji 👋 del saludo se renderiza como caja (tofu) en la captura — probable falta de fuente de emoji en el entorno headless, no defecto de UI. Usuario/tienda (Sofía Ramírez/Tienda demo vs Ada Victoria/Tienda Centro) son mocks de nav.
Desviación (propuesta)
🔶 Propuesta — el nav lateral de admin se reorganizó en #538: Comercios / Tiendas / Apariencia / Terminales / Ajustes (se separó comercio↔tienda y se agregó white-label). Figma: actualizar la navegación del frame 97:35 a la IA nueva. ver desviaciones
⚠️ Falta diseño — no hay render de Figma exportado — bloque del dashboard W07 convertido en ruta; sin frame propio
Notas
✅ Coincide(vista implementada en #549 — antes stub «Hola Mundo»)
Layout: la ruta /admin/recent-activities ya renderiza la vista real: título «Actividades recientes» + subtítulo + DataTable compartida (Fecha · Actividad · Detalle · Monto · Estado) con paginación numerada («Mostrando 1–5 de 5»).
Estado: badges soft «Completado» (StatusBadge por rol), montes alineados a la derecha, fechas en español.
Nota: sin par de Figma (ruta operativa). Se captura con el flag recent_activities_web ON (añadido al playwright.screenshots.config.ts).
⚠️ Falta diseño — no hay render de Figma exportado — pantalla legacy sin frame
Notas
Herramienta interna, sin diseño Figma. La app renderiza correctamente la pantalla “Buscar Tickets”: columna izquierda con “Búsqueda Rápida” (Último ticket, Tickets de hoy / esta semana / del mes) y tarjeta “Estadísticas Rápidas” (127 / 892 / $45.2K); panel principal con toggle Por Número / Por Fecha, campo de número de ticket, botón “Buscar Ticket” y “Filtros Avanzados” (Estado, Tipo de operación, Monto mínimo/máximo). Se muestra dentro del AdminShell con el sidebar de tienda. Sin desviaciones que reportar; los inputs de rango de monto y los Select heredan del residuo de [Select] y [Search Field]. Sin diseño Figma (herramienta interna).
Desviación (propuesta)
—
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
Herramienta interna, sin diseño Figma. La captura muestra un estado de error: el contenido de /admin/playground falla con “Error: Failed to fetch” (solo se ve el sidebar del AdminShell). Es un fallo de carga de datos/entorno al capturar, no una desviación de diseño. Recapturar en un entorno con backend disponible. Sin diseño Figma (herramienta interna).
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
Herramienta interna de parity, sin diseño Figma. Renderiza correctamente el índice “Web Design System — Playground” con secciones ATOMS / MOLECULES / ORGANISMS y enlaces a cada componente y pantalla (W07, W25–W65, etc.). Es la página de navegación del catálogo de componentes; no aplica comparación visual. Sin diseño Figma (herramienta interna).
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
Herramienta interna de preview, sin diseño Figma. Muestra un componente aislado sobre scrim: el modal de cobro con tarjeta “Inserta, desliza o acerca la tarjeta” / “Esperando la tarjeta del cliente…”, ícono de tarjeta en círculo tinte #E6EEFA, bloque “Monto $372.00” y acción “Cancelar” en primary. Render correcto; sirve para inspección de un solo componente, no comparación de pantalla completa. Sin diseño Figma (herramienta interna).
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.
Desviación (propuesta)
🔶 Propuesta — dos campos explícitos Desde / Hasta en vez del pill combinado con chevron; se puede teclear cada extremo sin abrir el popover. Figma: decidir adoptar los dos campos o mantener el pill. ver desviaciones
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.
Bordes: Residuo cerrado — el anillo del dot vacío ya mide el gris frío #D1D5DB (corregido en #546, palette.grey[300]), igualando el anillo vacío de Figma. Mismo tono en la fila “PIN ROW”.
Color: Dot lleno en #0052CC (azul de marca) y estado error en #EF4444 en ambos paneles.
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. ✓
Bordes: App con radio redondeado y hairline #E5E7EB; alto ~40. ✓
Estados: DISABLED del app = relleno #E5E7EB (coincide con remediación). Botón limpiar (×) aparece al escribir. ✓
Layout: Icono a la izquierda + placeholder “Buscar cliente…” coinciden; el showcase añade TYPING y DISABLED (decisión de showcase, no defecto).
Desviación (propuesta)
🔶 Propuesta — relleno outlined blanco + hairline#E5E7EB (coherente con el resto de inputs del DS) en vez del soft-fill #F0F4F8 del frame. Figma: unificar el search field al tratamiento outlined, o marcar el soft-fill como excepción. ver desviaciones
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).
Estados (abierto): Residuo cerrado — el select ABIERTO ya dibuja el borde azul #0052CC ~2px (corregido en #546), igual que Figma. El campo cerrado conserva relleno blanco + hairline #E5E7EB.
Estados (opción seleccionada): Afordancia implementada — la fila “Manzana” muestra tinte #E6EEFA, etiqueta azul y check #0052CC a la derecha, replicando el patrón del Figma (“Bebidas”).
Color: Texto de opciones #1F2933, superficie del popper blanca con hairline; paridad de tokens.
Contenido: Los estados extra No-results/Loading (spinner) son del showcase, no 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 (acción): Residuo cerrado — la acción “Deshacer” ya se pinta en azul claro legible #7FB0FF sobre la superficie oscura (corregido en #546), igual que Figma; antes leía casi blanco (primary.light).
Color: Superficie del toast #1F2933 opaca y texto del mensaje blanco en ambos paneles.
Layout: Estructura idéntica — icono de estado + mensaje (flex-grow) + acción a la derecha.
Estados: Las 4 variantes (info/success/warning/danger) con sus roles de color correctos.
Iconos: Badges circulares por estado (decisión del showcase); colores de rol 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.
✅ Coincide(re-auditado — residuo de subtotal cerrado)
Color: El subtotal ahora coincide. En la captura fresca el $0.00 de la fila VACÍO se pinta en gris atenuado (~#6B7280, text.secondary), claramente más claro que el label $500.00 — igual que el gris del $0.00 de Figma. Los subtotales con valor ($4,000.00, etc.) van en oscuro #1F2933. Cerrada la diferencia que la auditoría 07-23 dejaba como residuo aceptado.
Iconos/Layout: Separadores × y = como glifos grises text.secondary, igual que Figma. ✅
Bordes: Input blanco con hairline #E5E7EB y esquinas redondeadas. ✅
Layout: Fila flex label · × · input · = · subtotal, subtotal alineado a la derecha (ml:auto), anchos de label e input consistentes. ✅
Tipografía:subtitle2 label/subtotal, body2 separadores. 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.
Iconos (delta): Residuo cerrado — el indicador de delta ya usa triángulo relleno ▲/▼ (corregido en #546), igualando el glifo de Figma; antes era un chevron fino.
Color: Contenedor de icono tintado #E6EEFA (primary.light), valor #1F2933, label gris de adorno; success verde ≈ #10B981 y danger #EF4444 con tinte -soft en el contenedor.
Layout: label + icono tintado arriba, valor grande tabular, delta con flecha+% abajo, tarjeta plana con hairline.
Salvedad: Las etiquetas/valores por variante 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.
Desviación (propuesta)
🔶 Propuesta — el estado Agotado atenúa la tarjeta a alpha 0.6 (y la vuelve no-interactiva). Figma: añadir un estado OutOfStock a 60% de opacidad a la variante. (Espejo de la desviación aceptada en móvil.) ver desviaciones
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.
Bordes: Residuo cerrado — las barras ya salen con radio superior redondeado (~8-10px, corregido en #546 vía borderRadius en la serie), igual que Figma; antes tenían esquinas rectas.
Color: Barras y swatch de leyenda en #0052CC (azul de marca), fondo de card blanco.
Layout: Ejes X/Y, gridlines, ticks y leyenda “Ventas” son la variante rotulada “BARRAS CON EJES Y LEYENDA” del showcase, no defecto.
Tipografía: Título #1F2933, labels de eje en gris tenue — consistente con los tokens.
Layout: Residuo cosmético cerrado — los arcos ya se tocan sin separación (padAngle eliminado, corregido en #546), igual que Figma. Dona con leyenda vertical a la derecha y grosor de anillo equivalente.
Color: Serie idéntica en ambos paneles — Bebidas #0052CC, Abarrotes #3B82F6, Botanas #10B981, Otros #F59E0B, en el mismo orden.
Tipografía: Título “Categorías” #1F2933, labels de leyenda en gris; total central “9,500” en bold + “Total” en gris.
Iconos: Marcadores de leyenda como puntos rellenos del color de serie.
Salvedad: El total central es la variante del showcase, no defecto.
✅ Coincide(re-auditado: relleno de área ahora presente)
Color: ✅ Trazo de serie #0052CC (marca) en ambos paneles. Relleno de área bajo la curva medido #E6EEFA (primary.light).
Layout: ✅ Residuo cerrado — la app ya renderiza el área rellena (#E6EEFA bajo la curva) igual que Figma; ya no es línea pura. LineChart activa el fill.
Iconos/Ejes: ✅ Ejes (8–16), gridlines (0–80) y leyenda “Ventas” son de la variante del showcase (“línea con ejes, gridlines y leyenda”), no defecto vs la miniatura de Figma.
Estados: ✅ Variantes Vacío (“Sin datos para mostrar”) y Cargando (skeleton #F0F4F8) presentes y correctas, sin equivalente en Figma.
Tipografía/Bordes: ✅ Título “Ventas por hora” #1F2933, tarjeta plana + hairline; eje/grid en tokens de texto/#E5E7EB.
Iconos: Residuo cerrado — cada icono de fila ya va dentro de un chip redondeado tintado #F0F4F8 (corregido en #546), igual que Figma; antes el icono quedaba desnudo sobre blanco.
Tipografía: Encabezados de sección ya en estilo overline (MAYÚSCULAS + tracking, gris): “PRODUCTOS/VENTAS/EMPLEADOS”; antes eran Title Case grandes.
Layout: Filas de dos líneas (título + metadata: “SKU 7501 · $18.00”, “12 ago · $540.00 · Pagado”), replicando Figma.
Estados:Chip ESC presente a la derecha del campo de búsqueda.
Color: Tint de selección #E5EDFA ≈ primary.light, tarjeta blanca + hairline, campo con foco azul.
Salvedad: El glifo de producto (etiqueta) y la consulta escrita son decisiones del showcase.
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.
Estados (selección masiva): Residuo cerrado — presente la columna de checkbox de selección con checkbox de encabezado (select-all + estado indeterminado ⊟), checkboxes por fila y BulkActionBar (“2 seleccionados” · Editar/Exportar/Eliminar) sobre las filas seleccionadas (corregido en #546). Checkbox seleccionado = relleno sólido #0052CC con check blanco.
Color: Fila seleccionada con tinte #E5EDFA ≈ #E6EEFA; divisores #E5E7EB; StatusBadges como píldoras tinte-soft (Activo verde, Bajo amarillo, Agotado rojo) coinciden en patrón y tono.
Layout: Columnas (avatar+iniciales / Producto / SKU / Categoría / Precio / Stock / Estado / acción) y header hairline coinciden; estados Cargando/skeleton y Vacío son composiciones del showcase.
Iconos: El icono de editar como IconButton outlined por fila es decisión del showcase, no defecto del organismo.
Layout: Residuo cerrado — el divisor sobre el footer (línea arriba de Cancelar/Guardar cambios) ya está presente (corregido en #546), además del divisor de header; ambos hairlines coinciden con Figma.
Color: Guardar cambios #0052CC sólido + texto blanco; Cancelar outlined con borde/texto azul; título #1F2933; ✕ gris; scrim gris.
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 menores(remediación estructural CERRADA — antes ❌)
El residuo estructural del ❌ previo está resuelto: el shot fresco ya no es una lista de navegación con chevron sino un selector de método idéntico en patrón al Figma.
Layout ✅: Presente el chip “Total a cobrar $406.00” con tinte #E6EEFA y monto azul bold, y el CTA “Continuar” relleno #0052CC al pie. Ambos coincidían faltando antes.
Estados ✅: Modelo de selección con radios — fila activa (Efectivo) con borde azul + tinte #E6EEFA + check relleno azul; filas inactivas con radio vacío. Coincide con Figma (ya no hay ChevronRight de drill-in).
Tipografía ✅: Subtítulos por opción presentes (“Pago en efectivo + cambio”, “Inserta, desliza o acerca”, “Saldo del comercio”, “Combina varios métodos”).
Iconos ⚠️ (residuo conocido, baja prioridad): Contenedor tintado #F0F4F8 sí aplicado (fix presente), pero los glifos y su color divergen — Figma usa iconos a color por método (billetera verde, tarjeta azul, flechas azules, +); la app usa glifos en gris frío de adorno (billete azul solo en el seleccionado; tarjeta/billetera/capas en gris). Iconografía divergente ya catalogada.
Color ✅: Canon respetado.
Culpable previo (src/ui/organisms/pos/TenderPicker/index.tsx, sin total/selección/subtítulo/CTA) remediado; residuo restante = solo iconografía.
⚠️ Falta diseño — no hay render de Figma exportado — sin render exportado en design/web/organisms/
Notas
ℹ️ Sin render de Figma — verificación del shot de la app. No hay diseño exportado contra el cual medir paridad de token (opacidad exacta no verificable).
Layout: El shot demuestra el patrón scrim+surface: overlay negro semitransparente (~55-60%) atenúa la página de productos, y la card modal “Editar producto” permanece nítida por encima. Comportamiento correcto y esperado del componente.
Siguiente paso: exportar el nodo de Figma para confirmar la opacidad canónica del scrim; si no existe frame, es decisión de diseño pendiente, no desviación de implementación.
⚠️ Falta diseño — no hay render de Figma exportado — sin render exportado en design/web/organisms/
Notas
ℹ️ Sin render de Figma — verificación del shot de la app. No hay diseño exportado contra el cual comparar paridad.
Color: Banner con tinte warning #FFFBEB; título “Estás actuando como X” en ámbar/naranja bold (~#F59E0B); texto secundario en gris; icono de usuarios en ámbar. Coherente con el rol warning del sistema.
Estados: 3 variantes en el showcase — sesión activa con comercio (incluye “Grupo Comercial MX”), sin comercio, y saliendo (spinner en el botón). Consistentes.
Botón: “Salir de la suplantación” outlined con borde y texto en azul de marca #0052CC.
Siguiente paso: exportar el frame de Figma para poder auditar paridad de tinte/tipografía/espaciado.
✅ Coincide(showcase vs Figma) — pero OJO con adminNav.ts (#538)
Color: Ítem activo con tinte de marca #E6EEFA + icono/texto #0052CC en los 3 estados (expandido Inicio, activo por módulo, riel colapsado). Encabezados de sección en gris neutro (~#9CA3AF); inactivos en neutro oscuro. Coincide.
Espaciado/Layout: Agrupación OPERACIÓN / CATÁLOGO / EQUIPO / FINANZAS / ADMINISTRACIÓN con el mismo orden e ítems que Figma. El showcase omite logo “Terminales”, selector de tienda y footer de usuario que Figma sí muestra — fuera del alcance del showcase.
Bordes/Tipografía: Píldora activa redondeada sin borde; encabezados en mayúsculas/tracking; label activo semibold azul. Coincide.
Iconos: Algunos glifos difieren de Figma (Punto de venta = caja registradora vs carrito; Productos = etiqueta vs regalo; Servicios = factura vs flechas; Reportes = línea vs barras) — íconos de ejemplo, no defecto. Sin cambios desde la nota previa.
⚠️ Nota #538 (fuera del par showcase↔Figma): El SideNav del /playground usa datos de ejemplo y sigue coincidiendo con este Figma. Pero PR #538 cambió el drawer REAL de la app (src/components/AdminShell/adminNav.ts): la sección ADMINISTRACIÓN ahora es Comercios / Tiendas / Apariencia / Terminales / Ajustes (antes “Comercio y tiendas”), es decir se separó el nivel comercio↔tienda y se añadió “Apariencia” (white-label). Ese drawer real diverge del Figma actual; conviene re-exportar el frame de la IA de admin y auditar AdminShell por separado. El organism SideNav en sí no cambió.
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.
Estados: Residuo cerrado — la pestaña activa ya usa el tratamiento de pill (relleno azul claro #E6EEFA con etiqueta azul #0052CC, corregido en #546), replicando el pill de Figma; visible en el showcase “PESTAÑA ACTIVA EN PILL PRIMARY”.
Color: Etiqueta activa en #0052CC, inactivas en gris neutro; jerarquía idéntica.
Layout: Las filas extra (activa / hover / disabled) son del showcase; hover destaca “Historial” y disabled atenúa, coherentes con los tokens.
Espaciado: El fondo del lienzo del playground (#F5F7FA) es del showcase, no del 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.
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
Vista de referencia del design system — sin par en Figma.
Notas
Showcase de composición — captura del design system en /playground (sin par de Figma en esta entrada del apéndice). Es una referencia de implementación de la pantalla, útil para inspeccionar la composición de átomos/moléculas/organismos aislada de datos reales. La auditoría de paridad Figma ↔ app de esta pantalla vive en su entrada principal del índice por historia de usuario (cuando existe frame de Figma).
