ERP Kiitos · Prototipo completo

00Style guide

Sistema canónico: paleta 70/30 Protector + Mago, tipografías Open Sans · Merriweather · JetBrains Mono, primitives compartidos.

3 vistas

lg · 1440Kitchen Sink · catálogo completoVer vivo →

Tokens. Paleta · tipografía · pills · botones · inputs · cards.

xs · 375Kitchen Sink · mobileVer vivo →

Reflow. Mismos componentes apilados.

compactKitchen Sink · densidad compactVer vivo →

Compact activo · todas tablas/inputs/botones reducidos.

01Auth

Sin sidebar ni header. Fondo arena, card 400 px centrada, lema editorial. 3 flujos.

3 estados

A · LoginInicio de sesiónVer vivo →

Mantener sesión. Solo roles operativos.

B · 2FAVerificaciónVer vivo →

6 dígitos · auto-tab · reenvío.

C · RecoveryRecuperar contraseñaVer vivo →

Banner success post-envío.

02Shell

Header + Sidebar canónicos. Modo desktop, drawer mobile, command palette, modal cancelación destructiva.

6 estados

lg · masterApp Shell · TesoreríaVer vivo →

Sidebar 4 grupos · banner delegación · contexto .fiscal.

⌘K paletteCommand paletteVer vivo →

Buscador global · documentos · clientes · SKUs · acciones.

modal dangerCancelación de facturaVer vivo →

Motivo obligatorio · 10 chars min · botón danger destructivo.

collapsedSidebar colapsado · 64pxVer vivo →

Solo iconos · tooltip al hover · grupos sin label.

notificationsDropdown 🔔 · 5 eventos agrupadosVer vivo →

3 grupos · Inventario · Aprobaciones · Facturación.

xs · drawerApp Shell mobileVer vivo →

Drawer 280 px con backdrop · mismo sidebar.

03Operación · Dashboard

Vista del Gerente de sucursal · GDL-02 Tlaquepaque. KPIs, ventas por hora, top productos, equipo, alertas.

3 vistas

lg · gerenteDashboard Gerente · TlaquepaqueVer vivo →

Visibilidad filtrada por rol · 4 KPIs · gráfica horaria · piso + alertas.

xs · gerenteDashboard mobileVer vivo →

KPIs 2×2 · resto apilado · CTA "Cierre de caja".

loadingDashboard · skeletons turquesaVer vivo →

Pulse skeletons · banner sync FEM · segmented Hoy/Semana/Mes.

04Operación · POS

Cajero Luis Pérez · CDMX-01 Polanco · caja 1. Sin sidebar global. Header reducido, 60/40 catálogo/ticket.

5 estados

vacíoPOS · ticket vacíoVer vivo →

Tab Escaneo activo · cursor con focus.

3 líneasPOS · venta en cursoVer vivo →

Favoritos · ticket con 3 SKUs · CTA F12.

cobrarModal multimétodo + facturaVer vivo →

Tarjeta + efectivo · cambio en turquesa · CFDI inline.

offlineSin conexiónVer vivo →

Banner rojo · cola local · sync al volver.

aperturaApertura de cajaVer vivo →

Modal · fondo inicial · denominaciones · Luis Pérez 08:55.

md · 768POS tablet · touchVer vivo →

Hit targets ≥44 px · grid 3 cols · qty grandes.

05Operación · Ventas

Detalle de venta · folio mono · 3 status pills · tabs Líneas/Pagos/Factura/Comisión/Bitácora.

3 estados

defaultVTA-2026-04-00387 · pagada+timbradaVer vivo →

Doc header · 5 líneas · totales · tabs.

canceladaCFDI cancelado · acuse SATVer vivo →

Banner danger · pill Cancelada · sin botón cancelar.

FEMOrigen FEM móvilVer vivo →

Banner info · sincronizada hace 2 min.

pendienteCobrada sin facturarVer vivo →

CTA generar factura · vence fin de mes.

06Catálogos · Productos

Lista densa con sticky SKU · ficha completa con 7 tabs · candado de costo por rol.

9 estados

listaProductos · tablaVer vivo →

Chips rápidos · candado costo · popover stock.

filtrosDrawer Más filtrosVer vivo →

Drawer 400 px · categoría · fase · status.

selecciónSelección múltiple · bulk barVer vivo →

3 seleccionados · bulk acciones · color turquesa.

quickviewSide panel · vista rápida SKUVer vivo →

Panel 480px · KPIs · stock por sucursal · CTA ficha completa.

compactDensidad compact · 15 SKUsVer vivo →

Chip "Compact activo" · filas 36px · link a comfort.

generalesMAL-VAIN-30 · tab GeneralesVer vivo →

Ficha nutricional · uso · COFEPRIS · vida útil.

inventarioTab Inventario · lote cuarentenaVer vivo →

Stock x 11 sucursales · lote LOT-…-092 cuarentena.

costos · 🔒Tab Costos · candado gerenteVer vivo →

Rol gerente · costos enmascarados · chart oculto.

precios-inlineTab Precios · edición inlineVer vivo →

Valor tachado + nuevo · ✓/✕ · requiere aprobación Gerente.

07Compras · Recepción

OC-2026-04-022 de Distribuidora Alfa. 5 bloques numerados · costos importación con prorrateo en vivo · footer sticky.

5 estados

defaultRecepción totalVer vivo →

5 bloques · prorrateo activo · footer sticky.

parcialRecepción parcialVer vivo →

Banner warning · 60 pzs faltantes · motivo obligatorio.

modal-loteModal · crear loteVer vivo →

LOT-AAAA-MM-NNN · caducidad · pedimento · país.

importacionCostos importación · prorrateo en vivoVer vivo →

Bloque 3 expandido · flete/agente/aranceles · toggle ON · Δ por SKU.

confirmarModal confirmar · checkbox CxPVer vivo →

Resumen · generar CxP automático a 30 días.

08Tesorería · Aprobaciones

Master-detail · 7 pendientes · 4 tipos (descuento, ajuste, cancelación, vacaciones) · 2 vencidas.

4 estados

defaultBandeja · descuento activoVer vivo →

Lista 320 px · contexto · decisión · ⌘+↵.

overdueItem vencido · CFDIVer vivo →

Banner danger · SLA superado · escalable.

emptySin pendientes · KiikonVer vivo →

Estado vacío · Kiikon turquesa · CTA bandeja equipo.

xs · mobileAprobaciones mobile · cards verticalesVer vivo →

Lista a pantalla completa · detalle full-screen al tap.

09Análisis · Excepciones

Tablero Master · 8 excepciones abiertas, 2 críticas, 12 resueltas hoy. Chips de tipo, cards con borde por severidad.

4 estados

default8 excepcionesVer vivo →

Sync FEM · inventario neg · caducidades · CxC.

dead-letterSync FEM · cola dead-letterVer vivo →

540 px · 3 eventos fallidos · reintentar todos.

emptyTodo en orden · KiikonVer vivo →

Sin excepciones · lema editorial · 30 días.

xs · mobileExcepciones mobile · cardsVer vivo →

Sin side panel · tap card → detalle full-screen.

ERP Kiitos · Canvas