Parity Figma ↔ App (móvil)
Galería lado a lado del diseño en Figma y la implementación real en la app Android (Jetpack Compose), capturada con Maestro en el Playground. Método: el
design-parity-playbook.mddel repoterminales-solution. Las notas se miden (muestreo de píxel), no se estiman a ojo; la columna Notas es escrita a mano y se preserva entre regeneraciones. Desviaciones intencionales (donde la app mejora al diseño) se registran enintentional-deviations.md.
Veredicto: ✅ 40 · ⚠️ 15 · ❌ 0 · Actualizado desde los assets en disco.
Átomos
Section titled “Átomos”✅ Button
Section titled “✅ Button”Nodo Figma 21:50 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/TerminalesButton.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Corregido. El contenedor Tonal ahora usa primary-soft #E6EEFA (TerminalesColors.PrimarySubtle) con contenido azul #0052CC, igual que el frame 21:50 (antes SecondaryContainer #E3F2FD). Filled #0052CC, disabled #E5E7EB y radio md correctos. El estado Pressed se comunica con ripple/state-layer de M3 (no intercambia a #003D99) — ver desviación. | 🔶 Propuesta — El Pressed no oscurece a #003D99; usa el state-layer/ripple de Material 3. Figma: n/a platform ver desviaciones |
✅ Icon Button
Section titled “✅ Icon Button”Nodo Figma 34:73 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/TerminalesIconButton.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
| ✅ Corregido. Las tres variantes (Standard/Outlined/Ghost) pintan el glifo en azul primary #0052CC por defecto, igual que el frame 34:73 (antes Outlined/Ghost usaban TextPrimary oscuro). Standard = squircle con relleno tonal; Outlined/Ghost mantienen la forma circular de M3 por convención de plataforma — ver desviación. Callers sobre fondos de color pasan contentColor explícito. | 🔶 Propuesta — Outlined/Ghost usan la forma circular de M3 (OutlinedIconButton/IconButton) en vez del squircle del frame; Standard sí es squircle. Figma: decidir: aceptar circular (plataforma) o unificar Standard a circular en el frame 34:73. ver desviaciones |
✅ Text Field
Section titled “✅ Text Field”Nodo Figma 36:35 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/TerminalesTextField.kt
✅ Search Field
Section titled “✅ Search Field”Nodo Figma 37:35 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/TerminalesSearchField.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Estado Active verificado con FOCO REAL (Maestro tap): borde y lupa azules (#2196F3 InputBorderFocused ≈ primary), relleno blanco #FFFFFF, texto Telcel y botón limpiar ✕ — coincide con el frame 37:35. Default gris #F7F9FC también coincide. La ❌ previa era una limitación de captura estática (el seed programático no dispara el visual de foco de M3), no un defecto del componente. | 🔶 Propuesta — El campo agrega un botón limpiar (✕) con área táctil ~48dp cuando hay texto, ausente en el Figma Active. Figma: Agregar un icono trailing de limpiar (✕) al variant Active del nodo 37:35 para reflejar el affordance implementado. ver desviaciones |
✅ Status Badge
Section titled “✅ Status Badge”Nodo Figma 33:26 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/StatusBadge.kt
✅ Category Chip
Section titled “✅ Category Chip”Nodo Figma 35:31 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/CategoryChip.kt
✅ PIN Dot
Section titled “✅ PIN Dot”Nodo Figma 47:52 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/PinDots.kt
✅ Keypad Key
Section titled “✅ Keypad Key”Nodo Figma 37:45 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/KeypadKey.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Paridad correcta en el estado base. Tecla dígito Default: fondo blanco app #FFFFFF (TerminalesColors.KeypadKey) + dígito #1F2933 (TextPrimary), coincide con el Figma (tecla blanca + dígito oscuro #304040). Radio RoundedCornerShape(TerminalesRadius.md=12dp). El estado Presionado del Figma (fondo lavanda #E0E0F0 + dígito azul) se entrega en la app vía ripple de Material sobre la .clickable() en vez de reproducir el fill lavanda estático — decisión idiomática de Android (ver deviation_candidate). Nota: la tecla de Acción del screenshot se renderiza en azul (icono #1762D0 sobre fondo #F0F4F8), mientras el código actual usa tokens danger rojos (KeypadDelete #FEE2E2 / KeypadDeleteIcon #EF4444) en KeypadKey.kt — el screenshot parece anterior a ese cambio de token; el nodo Figma 37:45 no muestra tecla de acción, así que no es verificable contra el frame. | 🔶 Propuesta — La tecla usa ripple de Material (.clickable) y target táctil ≥48dp en lugar del fill lavanda estático del estado Pressed del Figma. Figma: Actualizar el nodo 37:45: documentar el estado Pressed como ripple/overlay de Material (no un fill lavanda fijo) y anotar el target táctil mínimo de 48dp para las teclas. ver desviaciones |
✅ Avatar
Section titled “✅ Avatar”Nodo Figma 45:90 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/TerminalesAvatar.kt
✅ Inline Alert
Section titled “✅ Inline Alert”Nodo Figma 47:78 · código app/src/main/java/com/axios/terminales/ui/components/terminales/atoms/InlineAlert.kt
Moléculas
Section titled “Moléculas”✅ Card
Section titled “✅ Card”Nodo Figma 43:44 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/TerminalesCards.kt
✅ Product Card
Section titled “✅ Product Card”Nodo Figma 44:50 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/ProductCard.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Paridad de color y estructura. Placeholder de imagen medido #F0F4F8 en ambos lados (token SurfaceVariant exacto); nombre #1F2933 (TextPrimary exacto); precio medido #0D5BCF ≈ Primary #0052CC (aclarado por antialias); pill de stock verde-suave fondo #ECFCF5 con texto verde #43C99C, y pill ‘Agotado’ rojo-suave fondo #FEF7F7 con texto #FCD8D8 (danger #EF4444). Ambos estados Default / OutOfStock presentes y ProductCard.kt los cablea (badge success ‘N en stock’ vs danger ‘Agotado’, umbral low-stock). Diferencia medible: el estado OutOfStock de la app baja toda la tarjeta a alpha 0.6 (nombre/precio atenuados), mientras que en Figma la tarjeta agotada mantiene opacidad plena; se trata como mejora de UX (ver deviation_candidate). | 🔶 Propuesta — OutOfStock atenúa la tarjeta completa a alpha 0.6 y la vuelve no-clickable; Figma la deja a opacidad plena. Figma: Añadir un estado OutOfStock con 60% de opacidad (y aspecto no-interactivo) a la variante del componente en Figma para reflejar el comportamiento del código. ver desviaciones |
✅ KPI Tile
Section titled “✅ KPI Tile”Nodo Figma 43:57 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/KpiTile.kt
✅ List Row
Section titled “✅ List Row”Nodo Figma 41:60 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/ListRow.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Corregido. El contenedor del icono guía ahora es círculo (CircleShape) con tinte primary-soft #E6EEFA e icono azul, igual que el frame 41:60 (antes cuadro redondeado + SurfaceVariant). El chevron se conserva gris (text-tertiary) como convención de plataforma — ver desviación. Título/subtítulo/badge correctos. | 🔶 Propuesta — Chevron gris (text.tertiary) en lugar del azul primary de Figma Figma: Re-tintar el chevron del frame list-row a text.tertiary gris (#9CA3AF) para alinear con la convención de Android; el azul se reserva para acciones. ver desviaciones |
✅ Summary Row
Section titled “✅ Summary Row”Nodo Figma 43:66 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/SummaryRow.kt
✅ Receipt Row
Section titled “✅ Receipt Row”Nodo Figma 47:60 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/ReceiptRow.kt
✅ Cart Bar
Section titled “✅ Cart Bar”Nodo Figma 44:80 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/CartBar.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Corregido. El glifo del badge ahora es un carrito (TerminalesIcons.Cart) en vez de tarjeta de crédito, igual que Figma; barra azul #0052CC y badge translúcido correctos. La CTA Ver carrito se conserva como píldora blanca (afordancia mejor) — ver desviación. | 🔶 Propuesta — La app dibuja ‘Ver carrito’ como píldora blanca (#FFFFFF) con chevron en vez del texto blanco plano del Figma. Figma: Actualizar el frame 44:80 para renderizar ‘Ver carrito’ como botón/píldora blanca con chevron, o confirmar el texto plano como canónico. ver desviaciones |
✅ Quantity Stepper
Section titled “✅ Quantity Stepper”Nodo Figma 44:69 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/QuantityStepper.kt
✅ Provider Tile
Section titled “✅ Provider Tile”Nodo Figma 48:63 · código app/src/main/java/com/axios/terminales/ui/components/terminales/molecules/ProviderTile.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Bug de label invisible CORREGIDO (label seleccionado azul #0052CC, visible). El badge usa el color de marca del proveedor (Telcel azul, AT&T, Movistar) con la inicial — DESVIACIÓN INTENCIONAL ACEPTADA (2026-07-26): el color de marca ayuda al reconocimiento rápido en la cuadrícula. El aro de selección va en el badge. | ✅ Aceptada — Badge con color de marca del proveedor (Telcel azul, etc.) + inicial, en vez del badge gris/soft genérico del frame. Figma: actualizar el nodo 48:63 a la variante con color de marca. ver desviaciones |
Organismos
Section titled “Organismos”⚠️ Top App Bar
Section titled “⚠️ Top App Bar”Nodo Figma 40:45 · código app/src/main/java/com/axios/terminales/ui/components/terminales/organisms/TerminalesTopBars.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Re-auditado 2026-08-05: el componente TerminalesTopBar sigue correcto (barra blanca #FFFFFF, título oscuro #1F2933, divisor hairline; igual a 40:45) y se usa aún en pantallas secundarias/auth. CAMBIO de esta iteración: las top bars fueron REMOVIDAS de las 5 pantallas principales del shell (Inicio/Vender/Carrito/Reportes/Cuenta) — ahora sin barra; las notificaciones se movieron al FAB de navegación. Ver desviación. | 🔶 Propuesta — Top bars removidas de las 5 pantallas principales del shell; notificaciones movidas al FAB de navegación. Figma: En los frames M06/M11/M13/M24/M25 quitar la top bar; documentar notificaciones en el FAB. Conservar 40:45 para pantallas secundarias. ver desviaciones |
⚠️ Bottom Nav Item
Section titled “⚠️ Bottom Nav Item”Nodo Figma 45:53 · código app/src/main/java/com/axios/terminales/ui/components/terminales/organisms/BottomNav.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Re-auditado 2026-08-05 (online, sin banner). El item conserva paridad de estados (activo #0052CC / inactivo #9CA3AF), pero su contenedor (Bottom Nav Bar) fue reemplazado por el FAB de navegación en el shell. Se mantiene solo como referencia del DS. Ver desviación (bottom-nav → FAB). | 🔶 Propuesta — El item de bottom-nav queda como referencia del DS; su contenedor fue reemplazado por el FAB de navegación global. Figma: Deprecar el item 45:53 junto con el bottom-nav 45:56; mapear sus estados al FAB de navegación. ver desviaciones |
⚠️ Bottom Nav Bar
Section titled “⚠️ Bottom Nav Bar”Nodo Figma 45:56 · código app/src/main/java/com/axios/terminales/ui/components/terminales/organisms/BottomNav.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Re-auditado 2026-08-05 (online, sin banner). El componente BottomNav sigue en el DS (ahora con 6 destinos incl. «Más…») pero fue REEMPLAZADO en el shell por el FAB de navegación global (abajo-izquierda) — la bottom-nav ya NO se monta en producción. La captura muestra el showcase del DS. Ver desviación. | 🔶 Propuesta — La bottom-nav fue reemplazada por un FAB de navegación global speed-dial (Inicio/Vender/Carrito/Reportes/Cuenta/Más/Notificaciones). Figma: Deprecar el bottom-nav 45:56 en el diseño y crear el componente «FAB de navegación (speed-dial)». ver desviaciones |
✅ Bottom Sheet
Section titled “✅ Bottom Sheet”Nodo Figma 48:66 · código app/src/main/java/com/axios/terminales/ui/components/terminales/organisms/BottomSheetHost.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Tokens núcleo correctos (superficie #FFFFFF, radio superior ~24, título #1F2933, CTA #0052CC, scrim oscuro #626364). El drag handle y la ✕ usan tonos M3/oscuros más VISIBLES que el gris muy claro de Figma (#E3E6E9/#A6ACB7, bajo contraste) — se conservan por afordancia/contraste (ver desviación). Presencia de scrim + drag handle + cierre por gesto = convención M3. | 🔶 Propuesta — Hoja modal M3: scrim oscuro, drag handle y ✕ con tono más visible que el gris muy claro de Figma; cierre por gesto. Figma: actualizar el prototipo 48:66 para mostrar scrim + handle/✕ con tono representativo de M3. ver desviaciones |
Pantallas
Section titled “Pantallas”⚠️ M01 · Iniciar sesión
Section titled “⚠️ M01 · Iniciar sesión”Nodo Figma 52:27 · código app/src/main/java/com/axios/terminales/auth/LoginScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Misma pantalla de login: layout, proporción y tokens base coinciden — fondo #F5F7FA en ambos, tile de marca + wordmark bold + tagline gris, campos con relleno claro (#F5F7FA/#F7F9FC) y borde #E5E7EB, enlace ¿Olvidaste tu contraseña? azul #1862D1≈#0052CC, y el botón Entrar es el DS primario #0052CC en el frame. Único gap de STYLE: el botón secundario ‘Acceso rápido con PIN’ se renderiza con borde gris #E5E7EB + texto oscuro #1F2933 (variante DS Outlined neutral), mientras el frame lo dibuja como botón azul (borde + label #0052CC). No cuentan contra parity: el Entrar en gris #E5E7EB y el ‘Enviar enlace mágico’ en gris #9CA3AF son artefactos de captura del estado vacío/deshabilitado (formulario sin datos) — el frame muestra el estado activo; el wordmark ‘terminales’ vs ‘Terminales’ es copy/branding (feature) del recurso app_name; y el ojo de mostrar/ocultar contraseña es un extra del app. | 🔶 Propuesta — El secundario ‘Acceso rápido con PIN’ usa la variante DS Outlined neutral (borde #E5E7EB + texto #1F2933) en vez del outline azul del frame (#0052CC). Figma: Actualizar el frame 52:27 para que el botón secundario adopte el outline neutro (borde #E5E7EB + label #1F2933) en lugar del azul #0052CC. ver desviaciones |
⚠️ M02 · Acceso rápido (PIN)
Section titled “⚠️ M02 · Acceso rápido (PIN)”Nodo Figma 300:4256 · código app/src/main/java/com/axios/terminales/auth/PinLoginScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Backspace CORREGIDO: la tecla de acción ahora usa soft-primary (#E6EEFA + icono #0052CC) en vez del token danger rojo — intención neutra igual que el frame 300:4256. Barra blanca + título a la izquierda confirmados; perfiles (JP/AM/LR), PIN dots y teclas de dígito coinciden. Residual menor de STYLE: el gap vertical entre teclas está colapsado (las teclas se leen como columnas conectadas) vs celdas separadas del frame — ajuste de spacing del teclado pendiente. El botón Desbloquear explícito es una desviación propuesta (submit accesible). (Nota: la tecla de borrar del teclado ya se corrigió a neutro soft-primary.) | 🔶 Propuesta — La app añade un botón primario ‘Desbloquear’ bajo el teclado (submit explícito) que el frame 300:4256 no incluye. Figma: Añadir un botón primario ‘Desbloquear’ entre el teclado y el enlace ‘Cambiar usuario’ en el frame 300:4256, con estados enabled/disabled/loading. ver desviaciones |
✅ M03 · Verificación 2FA
Section titled “✅ M03 · Verificación 2FA”Nodo Figma 55:59 · código app/src/main/java/com/axios/terminales/auth/MfaScreen.kt
✅ M04 · Recuperar contraseña
Section titled “✅ M04 · Recuperar contraseña”Nodo Figma 56:88 · código app/src/main/java/com/axios/terminales/auth/RecoveryScreens.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Mismo screen (recuperar contraseña) y los tokens coinciden medidos. TOP BAR: confirmado el flip a blanco — barra #FFFFFF con título oscuro alineado a la izquierda “Recuperar contraseña” (≈ #1F2933) y flecha de regreso; igual que el Figma. Tile de ayuda azul claro + círculo de interrogación azul sólido #0052CC (idéntico Figma), headline bold oscuro “¿Olvidaste tu contraseña?”, subtítulo gris, label “Correo Electrónico” y TextField DS con borde claro (#E5E7EB ≈ Figma #F3F5F8) y valor oscuro. STYLE: paleta correcta, no hay tokens mal aplicados. Residuales, todos de ESTADO/captura (no defectos): (1) el CTA “Enviar enlace” aparece en estado DESHABILITADO — relleno gris medido #E5E7EB con texto #B7BBC3 — porque canSendRecovery=false al capturar; el Figma lo dibuja activo azul #0052CC, que es el token correcto del TerminalesButton cuando está enabled; (2) el banner informativo azul “Si el correo existe…” del Figma no aparece en la captura porque recoverySent=false, pero el código sí lo implementa (InlineAlert Info). FEATURE: el Figma incluye una campana de notificaciones al extremo derecho de la top bar que la app omite (AuthTopBar sólo lleva back+título); omisión deliberada y correcta en un flujo pre-login → ver deviation_candidate. Sin culpable de token. | 🔶 Propuesta — La app omite la campana de notificaciones que el Figma dibuja en la top bar de recuperar contraseña Figma: Eliminar el icono de campana del trailing de la top bar en el frame 56:88 (y demás frames del flujo auth) para reflejar una barra auth con solo flecha de regreso + título. ver desviaciones |
✅ M05 · Seleccionar tienda/terminal
Section titled “✅ M05 · Seleccionar tienda/terminal”Nodo Figma 57:85 · código app/src/main/java/com/axios/terminales/auth/StoreSelectionScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Misma pantalla (selección de tienda/terminal). Layout idéntico: header con back + título “Selecciona tu tienda”, subtítulo, tres tarjetas de tienda (glifo circular + nombre/dirección + badge de estado) y CTA “Continuar”. Tokens medidos coinciden: CTA #0052CC en ambos (Figma #0052CC / app #0052CC), borde de tarjeta seleccionada = primary #0052CC, superficie de tarjeta #FFFFFF, fondo #F5F7FA idéntico, círculo del glifo seleccionado con tinte primary (Figma #A0BFEC / app #AAC5EE) y badges verde (Abierta) / ámbar (Sin turno). Afordancia de selección correcta: borde 2dp primary + relleno primary-subtle. STYLE: sin desviaciones de token/componente. FEATURE: única diferencia — el header de Figma lleva un icono de campana (notificaciones) arriba a la derecha que la app no renderiza; es una omisión menor en una pantalla pre-sesión, no rompe la paridad. | 🔶 Propuesta — La app omite el icono de campana (notificaciones) del header que sí aparece en el frame de Figma. Figma: Eliminar el icono de campana del header del frame 57:85 para alinearlo con el AuthTopBar (solo back + título). ver desviaciones |
✅ M06 · Inicio (Dashboard)
Section titled “✅ M06 · Inicio (Dashboard)”Nodo Figma 300:4317 · código app/src/main/java/com/axios/terminales/ui/screens/home/HomeScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Re-auditado 2026-08-07 (online + sembrado, N86 720×1280). RESUELTO (#322/F1): AppShell reserva inset inferior = alto del nav-FAB; al hacer scroll al fondo la última fila de «Actividad reciente» ($89.00 · 01:40 p.m.) queda completamente por encima del FAB de navegación — ya no se recorta contenido. Saludo inline «Hola, Ana Cajera» + fecha, KPIs sembrados (Ventas hoy $184,320.00 · Transacciones 1284), CTA «Nueva venta» y grid de accesos. La divergencia vs el frame 300:4317 (top bar + bottom-nav) sigue siendo intencional → ver desviación. (Artefacto de harness, no defecto: FAB llave inglesa «Playground (dev)» abajo-derecha, gated a dashboard bajo startPlayground.) |
🔶 Propuesta — Dashboard sin top bar (saludo inline) y sin bottom-nav: navegación global vía FAB speed-dial (Inicio/Vender/Carrito/Reportes/Cuenta/Más/Notificaciones). Figma: Rehacer M06 300:4317 sin top bar (encabezado inline «Hola, {nombre}») y sin bottom-nav; documentar el FAB de navegación global. ver desviaciones |
⚠️ M11 · Terminal POS / Catálogo
Section titled “⚠️ M11 · Terminal POS / Catálogo”Nodo Figma 67:303 · código app/src/main/java/com/axios/terminales/ui/screens/pos/CatalogScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Re-auditado 2026-08-07 (online + sembrado, N86). RESUELTO (#324/F5): el FAB de caja (kiosco) ya NO colisiona con la barra CTA inferior — el «+» abajo-izquierda queda despejado del bloque azul «$77.00 · Ver carrito». Encabezado ligero «Punto de venta» presente (#323/S10) y campo de búsqueda con lupa inline (F2). Residual (se conserva ⚠️): (a) la fila de chips de categoría sigue clippeando «Tiempo A…» al borde derecho sin afordancia de fade (S12, no aterrizado); (b) CAPTURA — bajo el harness de seed actual el grid de productos aparece VACÍO (el carrito sí siembra 4 artículos $77.00, pero el listado del catálogo no); es una regresión de siembra del catálogo revelada por la recaptura, NO un defecto de estilo → seguimiento en #350 (no se arregla en esta barrera). | 🔶 Propuesta — POS en modo kiosco: sin top bar y sin FAB de navegación; FAB de operaciones de caja (Nueva venta/En espera/Mov. de caja/Asignar cliente/Cerrar turno/Anular venta), espejo del terminal/home web. Figma: Actualizar M11 67:303 a layout kiosco (sin top bar, sin bottom-nav) con el FAB de caja; reconciliar el set de acciones con M35 300:4289. ver desviaciones |
✅ M13 · Carrito / Venta actual
Section titled “✅ M13 · Carrito / Venta actual”Nodo Figma 300:4196 · código app/src/main/java/com/axios/terminales/ui/screens/pos/CartScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Re-auditado 2026-08-07 (online + sembrado, N86). RESUELTO (#324/F5): el FAB de caja ya no colisiona con la barra «Cobrar · $77.00» — el «+» abajo-izquierda queda despejado. Carrito sembrado (Coca-Cola ×2, Sabritas ×1, Leche Lala ×1), stepper de cantidad soft-blue, resumen Subtotal/Descuento/IVA/TOTAL $77.00 con TOTAL en primary. Encabezado «Venta actual» presente (#323/S10). Paridad con el frame 300:4196 en modo kiosco. | 🔶 Propuesta — Carrito en modo kiosco: sin top bar y sin FAB de navegación; FAB de operaciones de caja. Figma: Actualizar M13 300:4196 a layout kiosco (sin top bar, sin bottom-nav) con el FAB de caja. ver desviaciones |
✅ M20 · Pago de servicio
Section titled “✅ M20 · Pago de servicio”Nodo Figma 76:503 · código app/src/main/java/com/axios/terminales/ui/screens/vas/VasServicePaymentScreen.kt
✅ M24 · Mi cuenta
Section titled “✅ M24 · Mi cuenta”Nodo Figma 83:647 · código app/src/main/java/com/axios/terminales/account/MyAccountScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Re-auditado 2026-08-07 (online + sembrado, N86). RESUELTO (#329/S9): las filas (Datos personales, Dispositivos y terminales, Seguridad, Apariencia, Soporte) se renderizan habilitadas con contraste adecuado — título en TextPrimary oscuro + subtítulo secundario gris + chevron, con ícono en círculo soft; ya no se leen como «cargando». Card de perfil (AC · Ana Cajera · Empleado). «Cerrar sesión» en outline danger. «Sin tienda asignada» es gap de seed, no defecto. | 🔶 Propuesta — Mi cuenta sin top bar: el encabezado es la ProfileCard; navegación y notificaciones viven en el FAB global. Figma: Quitar la top bar (y su campana) del frame 24 83:647; el encabezado pasa a ser la ProfileCard. ver desviaciones |
✅ M25 · Reportes
Section titled “✅ M25 · Reportes”Nodo Figma 85:699 · código app/src/main/java/com/axios/terminales/reporting/ReportsScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Re-auditado 2026-08-07 (online + sembrado, N86). RESUELTO (#322/F1 + #323/S10): encabezado ligero «Reportes» presente y el inset inferior del nav-FAB aplica — al hacer scroll al fondo, «Corte Z», «Ventas del día» y el botón «Exportar / Compartir» quedan por encima del FAB. Sembrado: «Ventas del periodo $184,320.00», Transacciones 1284, Ventas por método (Efectivo $92,160 · Tarjeta $80,160 · Saldo $12,000). «Comisiones —» es gap de seed. La divergencia por top-bar removida es intencional → desviación. | 🔶 Propuesta — Reportes sin top bar: título omitido; navegación en el FAB global. Figma: Quitar la top bar del frame 25 85:699; opcionalmente añadir un encabezado inline «Reportes». ver desviaciones |
✅ M30 · Clientes — Lista
Section titled “✅ M30 · Clientes — Lista”Nodo Figma 300:4041 · código app/src/main/java/com/axios/terminales/ui/screens/customers/ClientesListaScreen.kt
✅ M31 · Clientes — Detalle
Section titled “✅ M31 · Clientes — Detalle”Nodo Figma 300:4052 · código app/src/main/java/com/axios/terminales/ui/screens/customers/ClienteDetalleScreen.kt
⚠️ M07 · Notificaciones
Section titled “⚠️ M07 · Notificaciones”Nodo Figma 60:177 · código app/src/main/java/com/axios/terminales/notifications/NotificationsScreen.kt
⚠️ M08 · Abrir turno
Section titled “⚠️ M08 · Abrir turno”Nodo Figma 61:212 · código app/src/main/java/com/axios/terminales/shifts/ (grep-confirm)
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Misma pantalla (encabezado resumen + keypad numérico + monto + botón ‘Abrir turno’). STYLE: (1) el encabezado ShiftSummaryCard renderiza SummaryRow apiladas a sangre completa sobre Surface blanco sin card/radio (Terminal —, Cajero —, y una fila extra Fondo de caja $0.00) en vez de la Card blanca insertada de DOS columnas Terminal | 🔶 Propuesta — Tecla borrar del keypad en rojo (#F58181, token KeypadDelete + ícono X) en vez del neutro azul del Figma (#F0F4F8 / ⌫ #83AAE4). Figma: Actualizar el keypad del DS en Figma para que la tecla borrar use el fondo/ícono danger, alineando el diseño con NumericKeypad.KeypadDeleteButton. ver desviaciones |
⚠️ M09 · Cerrar turno (Corte Z)
Section titled “⚠️ M09 · Cerrar turno (Corte Z)”Nodo Figma 300:4229 · código app/src/main/java/com/axios/terminales/shifts/ (grep-confirm)
✅ M10 · Movimientos de efectivo
Section titled “✅ M10 · Movimientos de efectivo”Nodo Figma 63:258 · código app/src/main/java/com/axios/terminales/shifts/ (grep-confirm)
⚠️ M12 · Detalle de producto
Section titled “⚠️ M12 · Detalle de producto”Nodo Figma 68:344 · código app/src/main/java/com/axios/terminales/ui/screens/pos/ProductDetailScreen.kt
✅ M14 · Cobrar / Método de pago
Section titled “✅ M14 · Cobrar / Método de pago”Nodo Figma 70:389 · código app/src/main/java/com/axios/terminales/ui/screens/pos/CheckoutScreens.kt
⚠️ M15 · Cobro manual con tarjeta
Section titled “⚠️ M15 · Cobro manual con tarjeta”Nodo Figma 71:403 · código app/src/main/java/com/axios/terminales/ui/screens/pos/ (grep-confirm CardCheckoutScreens.kt)
✅ M23 · Transferir saldo
Section titled “✅ M23 · Transferir saldo”Nodo Figma 82:631 · código app/src/main/java/com/axios/terminales/ (grep-confirm terminales_transfer)
✅ M26 · Historial / Buscar ticket
Section titled “✅ M26 · Historial / Buscar ticket”Nodo Figma 86:740 · código app/src/main/java/com/axios/terminales/reporting/ (grep-confirm)
✅ M29 · Agregar movimiento de caja
Section titled “✅ M29 · Agregar movimiento de caja”Nodo Figma 291:951 · código app/src/main/java/com/axios/terminales/ (grep-confirm terminales_shift_add_movement)
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Re-auditado 2026-08-07 (online + sembrado, N86). RESUELTO (#326/S3): control segmentado «Entrada | 🔶 Propuesta — La app captura el monto con un NumericKeypad bajo el display en lugar del campo de texto ‘Monto’ de Figma. Figma: Actualizar el frame 291:951 para colocar el NumericKeypad del DS bajo el display de monto, conservando el campo Monto solo como display de solo lectura. ver desviaciones |
✅ M34 · Ventas en espera
Section titled “✅ M34 · Ventas en espera”Nodo Figma 300:4185 · código app/src/main/java/com/axios/terminales/ui/screens/customers/VentasEnEsperaScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Re-auditado 2026-08-07 (online + sembrado, N86). Sembrado (#335): tabs «Mis carritos | — |
⚠️ M19 · Detalle de ticket
Section titled “⚠️ M19 · Detalle de ticket”Nodo Figma 75:475 · código app/src/main/java/com/axios/terminales/reporting/TicketDetailScreen.kt (grep-confirm)
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Misma pantalla, AHORA POBLADA (ticket o-1 / Folio A-1042). Alta paridad estructural: Card con SummaryRows, StatusBadge ‘Pagado’ verde (fondo medido #A7E7D0, success), divisor punteado, ‘Total’ en negrita, InlineAlert ámbar ‘Cancelar o reembolsar requiere autorización de un supervisor’ (fondo medido #FFFBEB, warning) y botón outline DANGER ‘Cancelar / Reembolsar’ con texto/borde rojo (medido #F18A8B) — todos correctos vs Figma. Divergencia de ESTILO medida: los botones secundarios ‘Reimprimir’ / ‘Compartir’ usan outline NEUTRO (texto gris medido #60676F, borde gris claro) en lugar del outline PRIMARIO azul del Figma (texto azul, medido antialias #74A0E2). Divergencia de COPY: la app bar dice ‘Detalle de ticket’ vs ‘Ticket #1029’ del Figma (además sin campana). La app AGREGA fila ‘Subtotal’ y línea de tienda ‘Tienda Demo’ que el Figma no muestra (más detalle → candidato de desviación). Culpable del ⚠️: la variante de botón secundario neutro donde el DS/Figma pide primario-outline azul. | 🔶 Propuesta — La app muestra desglose ‘Subtotal’ + ‘IVA’ + ‘Total’ y una línea de tienda (‘Tienda Demo’) en el detalle de ticket; el Figma sólo lista ‘IVA incluido’ + ‘TOTAL’ sin subtotal ni tienda. Figma: Actualizar el frame 75:475 para incluir un SummaryRow ‘Subtotal’ y una línea de tienda emisora en el encabezado del ticket. ver desviaciones |
⚠️ M28 · Detalle de notificación
Section titled “⚠️ M28 · Detalle de notificación”Nodo Figma 164:937 · código app/src/main/java/com/axios/terminales/notifications/NotificationDetailScreen.kt
⚠️ M18 · Confirmar transferencia
Section titled “⚠️ M18 · Confirmar transferencia”Nodo Figma 74:456 · código app/src/main/java/com/axios/terminales/ui/screens/terminales/TransferReceiptScreen.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Same-screen OK: ambos muestran el comprobante de transferencia exitosa. Layout, copy y estructura idénticos: check verde (figma #68D3AF ≈ app #81DABD), título ‘Transferencia exitosa’, monto en azul (app #0052CC), tarjeta con De/Para/Concepto/Folio/Monto y botón primario ‘Listo’ (figma #3E7CD8 ≈ app #3C7BD8, ambos primary #0052CC). STYLE: el botón secundario ‘Compartir comprobante’ difiere — Figma usa variante outlined con texto y borde AZUL (#0052CC, scan #82AAE4), mientras la app usa TerminalesButtonVariant.Outlined con texto neutro oscuro (scan #A8ADB3) + borde gris claro y AGREGA un ícono Share (leadingIcon = TerminalesIcons.Share). No hay diferencia de FEATURE: mismos campos y textos. Diferencia menor de token en un botón. | 🔶 Propuesta — El botón ‘Compartir comprobante’ incluye un ícono Share que refuerza el affordance de compartir. Figma: Agregar un ícono Share como leadingIcon al botón secundario ‘Compartir comprobante’ en el frame 74:456. ver desviaciones |
⚠️ M35 · FAB · Acciones rápidas
Section titled “⚠️ M35 · FAB · Acciones rápidas”Nodo Figma 300:4289 · código app/src/main/java/com/axios/terminales/ui/screens/customers/PosQuickActionsScaffold.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
⚠️ Re-auditado 2026-08-07 (online + sembrado, N86). Speed-dial del FAB de caja (kiosco) con el set actualizado: Nueva venta · En espera · Mov. de caja · Asignar cliente · Cerrar turno · Anular venta — espejo del terminal/home web. Divergencia intencional vs M35 300:4289 (set de caja del rediseño de navegación) → ver desviación; no es defecto. |
🔶 Propuesta — El FAB de caja añade «Cerrar turno» y «Anular venta» y quita «Abrir menú» respecto al set previo; íconos distintivos por acción. Figma: Actualizar M35 300:4289 al set de 6 acciones (Nueva venta/En espera/Mov. de caja/Asignar cliente/Cerrar turno/Anular venta) con íconos por acción. ver desviaciones |
✅ M32 · Asignar cliente (sheet)
Section titled “✅ M32 · Asignar cliente (sheet)”Nodo Figma 300:4086 · código app/src/main/java/com/axios/terminales/ui/screens/customers/AssignCustomerSheet.kt
✅ M33 · Alta rápida cliente (sheet)
Section titled “✅ M33 · Alta rápida cliente (sheet)”Nodo Figma 300:4129 · código app/src/main/java/com/axios/terminales/ui/screens/customers/QuickAddCustomerSheet.kt
| Figma | App | Notas | Desviación (propuesta) |
|---|---|---|---|
![]() |
![]() |
✅ Same-screen OK: ambos son el bottom-sheet ‘Nuevo cliente’ sobre la ‘Venta actual’. FEATURE completo y en paridad: título ‘Nuevo cliente’, los 4 mismos campos en el mismo orden (Nombre completo, Teléfono, Correo (opcional), RFC (opcional, CFDI)) con idénticos placeholders (María González, 55 0000 0000, correo@ejemplo.com, XAXX010101000) y la fila de botones Cancelar (outlined azul, figma texto #83ABE6) + Guardar (primary #3B7AD8), confirmados en QuickAddCustomerSheet.kt:57-111 (los botones quedan bajo el fold en el screenshot de la app pero existen en código). App usa drag handle DS (#374151). STYLE menor: el fondo de los campos es un relleno gris claro estándar de la app (#F7F9FC) vs blanco del Figma (#FFFFFF), y la app añade asterisco rojo de requerido (scan #F9BBBB) en Nombre y Teléfono que el Figma no muestra — mejora, no regresión. | 🔶 Propuesta — La app marca los campos obligatorios (Nombre completo, Teléfono) con un asterisco rojo de requerido. Figma: Agregar el marcador de requerido (asterisco) a las etiquetas ‘Nombre completo’ y ‘Teléfono’ del frame 300:4129. ver desviaciones |
✅ M21 · Tiempo Aire (TAE)
Section titled “✅ M21 · Tiempo Aire (TAE)”Nodo Figma 80:545 · código app/src/main/java/com/axios/terminales/ui/screens/vas/VasCaptureComponents.kt (grep-confirm VasAirtimeRoute)
✅ M22 · Tarjeta de regalo / Pines
Section titled “✅ M22 · Tarjeta de regalo / Pines”Nodo Figma 81:589 · código app/src/main/java/com/axios/terminales/ui/screens/vas/ (grep-confirm VasGiftCardRoute)









































































































