La noche del operador
01 · TesisEl manual trae cuatro colores y el producto ya les dio papel: el marino es el ancla de todo, el celeste es la frescura que acentúa la noche, el rojo guarda el peligro y el punto de la «s», y la lima es un acento que se usa con cuentagotas.
El agente es un operador: entra a trabajar, como el admin. Por eso su portal no inventa una identidad nueva — hereda la noche del admin tal cual: riel marino, aurora celeste quieta, item activo con su barra de canto. Lo que sí es suyo es la moneda: Mogui se cuenta siempre en lima, y ese es el único lugar donde la lima aparece.
La disciplina: la lima es micro-acento, no superficie. Sale en el contador del riel, en la cifra del balance y en los montos ganados — texto, nunca fondos. Todo lo demás sigue la ley general: superficies hueso/paper, tinta marino, estados semánticos.
La puerta: la misma noche del admin
02 · AuthEl agente es un operador, no un visitante: entra por la noche completa, como el admin — no por el split claro del client. La aurora celeste arriba a la derecha, apenas insinuada abajo, y el botón de entrar en celeste con tinta marino. Misma puerta, otro rótulo: «Portal de agentes».
Al entrar, la placa «Importamos futuro» — el mismo momento del client y el admin, porque la sesión que se abre es la misma promesa. El acceso es por invitación (lo crea el admin con rol AGENT), y la puerta lo dice en voz propia en lugar de esconder un registro que no existe.
Portal de agentes
El acceso es por invitación. Si aún no tienes cuenta, tu contacto en Mogos te la crea.
Demo viva: pulsa «Entrar a trabajar» y entra la placa. Con prefers-reduced-motion la placa se salta y la sesión abre directo.
El riel: la empresa arriba
03 · ShellEl riel hereda el patrón del admin tal cual — degradado marino de admin-chrome.css, aurora celeste quieta de dos glows, cero keyframes — y el item activo lleva su barra de canto en celeste, la misma familia de la puerta. Nada que aprender dos veces: quien conoce el admin, reconoce el agent.
Arriba del todo, antes que la navegación, vive la empresa: su logo en placa clara y su nombre. Sin rótulos — la empresa se declara sola. Un agente pertenece a una sola empresa (CompanyUser, isDefault), así que no hay selector que estorbe, pero el contexto queda dicho en cada pantalla: todo lo que cargues, cae aquí. Si mañana un agente tiene dos, este mismo bloque se vuelve switcher.
Abajo, el pie de usuario: avatar en grad-fresh con iniciales en marino (blanco sobre celeste no se lee: 1.39:1), y debajo del nombre el saldo Mogui en lima — el único micro-acento lima del riel, la moneda siempre a un vistazo, 14.4:1 sobre marino.
| Cliente | Código | Registro | Estado |
|---|---|---|---|
| María Da Silva | VALEN10 | 22 ago | Activo |
| Jesús Contreras | VALEN10 | 21 ago | Primer envío |
| Corp. Andina 21 | ANDINA5 | 19 ago | Por verificar |
Inicio. El saludo arriba nombra a la persona; el hint debajo nombra a la empresa — las dos preguntas de «¿dónde estoy?» respondidas antes de leer nada más. El card de saldo Mogui es blanco como los demás: solo la cifra va en lima — la moneda se reconoce por su número, no por un fondo.
Las pantallas: la moneda como único acento
04 · ContenidoLas cinco pantallas comparten la misma ley que client y admin: fondo hueso, cards blancas con línea line-soft, tinta marino, rótulos Oswald en versalita, cifras tabulares. Los estados son los semánticos del sistema — el verde del botón de WhatsApp es state-success, no un verde inventado.
Mis Mogui es donde la moneda se cuenta: el hero del balance es la noche del riel en miniatura, con la cifra en lima sobre marino (14.4:1) — el micro-acento en su máxima expresión, un número encendido en la noche. Debajo, la actividad en el patrón de feed con los montos ganados en lima-ink — una lima oscurecida dos pasos, declarada en los tokens de esta pieza, porque la lima pura sobre blanco no se lee.
Mis Mogui. El hero es la noche del riel con la cifra en lima — el único lugar de la app donde la lima brilla en grande. Los meses «calientes» del chart van en celeste con borde celeste-deep; los montos ganados del feed en lima-ink y los canjes en tinta neutra con signo — el color no carga solo el significado.
| Código | Usos | Beneficio | Estado |
|---|---|---|---|
| VALEN10 | 36 | 10% primer envío | Activo |
| ANDINA5 | 9 | 5% permanente | Activo |
| FERIA24 | 18 | Envío gratis < 5 kg | Vence 31 ago |
| VERANO | 52 | 10% aéreo | Vencido |
Códigos y Compartir. La tarjeta que viaja por WhatsApp es la noche del riel en miniatura — aurora celeste, wordmark blanco, y el código sobre celeste como único bloque de color. El botón de WhatsApp usa el verde semántico del sistema, no un verde de marca.
El móvil: la misma noche en los tabs
05 · MóvilBajo lg el shell se vuelve top-bar + bottom-tabs, y el retinte los sigue: la barra alta lleva el wordmark y el nombre de la empresa; los tabs van sobre marino sólido con el activo en celeste y su hilo de 2px arriba — la misma firma del riel, girada 90 grados. Los hit areas de los tabs pasan de 44px de alto.
Decisiones e implementación
06 · Cierre| Decisión | Razón |
|---|---|
| La lima, solo micro-acento | Nada de superficies amarillas: la lima aparece únicamente donde se cuenta Mogui — el contador del riel, la cifra del balance y los montos ganados. Texto, nunca fondos. |
| Puerta noche, no split | El agente es un operador que entra a trabajar, como el admin. El split claro queda para el client. Misma noche, mismo celeste; solo cambia el rótulo «Portal de agentes». |
| La empresa en la cabecera del riel | Un agente pertenece a una sola Company (CompanyUser.isDefault): no hay selector ni rótulo, hay contexto declarado — logo + nombre, y ya. Todo lo cargado cae bajo la empresa visible. Con 2+ empresas el bloque se vuelve switcher. |
Riel = patrón admin-chrome | Degradado grad-rail (parada clara acotada a marino: el activo marino-soft no desaparece), aurora celeste quieta de dos glows, cero keyframes, barra activa celeste. Quien conoce el admin, reconoce el agent. |
| Lima nunca como texto sobre claro | Lima pura sobre blanco no llega a AA. Los montos sobre claro usan lima-ink #5A7326 (derivada en familia, declarada en tokens de la pieza, 5.4:1 sobre blanco). Sobre marino, lima directa: 14.4:1. |
| WhatsApp en verde semántico | state-success, no un verde de marca nueva. El color de la acción viene del sistema de estados, como manda la ley de tokens. |
Hoja agent-chrome.css | Hermana de admin-chrome.css, colgada de un ancla .mogos-agent-rail, importada desde un globals.css propio del agent (hoy importa solo el del workspace). Nunca <style> hijo: React 19 trunca. |
Logo de empresa: logoUrlInverse | Sobre el riel marino va la versión en tinta clara del schema; placa blanca con el monograma como fallback documentado cuando la empresa no tiene colorway invertida. |
packages/ui/src/styles/mogos-brand.css y aurora-auth.css tal como están; el trabajo nuevo es agent-chrome.css, el globals.css del agent, el bloque de empresa activa en agent-sidebar.tsx (hidratado de CompanyUser) y el retinte de los componentes de las 5 pantallas. Cero migraciones: el modelo Company ya existe.