Esta auditoría compara el sistema de color, tipografía y componentes del cliente .NET MAUI con el nuevo lenguaje visual bone / ink / moss / clay aplicado en la consola municipal. El veredicto, página por página, indica dónde la migración es un reemplazo de tokens, dónde requiere reestructurar el layout y dónde conviene no tocar nada.
El mobile hoy habla SaaS verde (Primary #1a7742, Open Sans, cards blancas con sombras suaves, chips emoji para estado). La consola municipal ya habla editorial agri-tech (papel hueso, tinta negra, contraste con moss y clay, Instrument Serif para números y titulares, Inter Tight para UI, JetBrains Mono para códigos). Son dos vocabularios distintos, y hoy el usuario que usa ambos siente que cambia de producto al cambiar de dispositivo.
Cards con CornerRadius=12 y sombra, fondos pastel saturados (WarningBgAlt #FFF8E1, InfoBgAlt #E6F1FB), emojis como iconografía (📄 ✏️ 📢 🔔 🚜). Paleta semántica muy amplia (6 grises, 12 verdes, 14 azules…).
Radios pequeños (3–4px), cero sombras, bordes en --line #d9d3c1, numerología tabular en serif, acentos clay sólo para lo urgente / destacado. Iconografía SVG mono-línea.
Tomo la pantalla más visible (Views/Home/HomePage.xaml) y la re-skineo con los tokens del municipio sin tocar la estructura del ViewModel. Conserva las 3 acciones rápidas, los KPIs y las ejecuciones activas — solo cambia el look.
Tabla de correspondencia para sustituir en Resources/Styles/Colors.xaml. Los semantic tokens del mobile (ErrorBg, SuccessBg, InfoBg…) son hoy ~60 colores; el municipio los resuelve con ~20. Al migrar se pierden variantes que no se usan y gana consistencia.
| Rol semántico | Token actual (Colors.xaml) | Valor | Token nuevo (municipal) | Valor | |
|---|---|---|---|---|---|
| Fondo app | Background | #f8fafc | → | --m-surface | #f7f7f5 (casi blanco, no bone) |
| Card / superficie | Surface | #ffffff | → | --m-bg | #ffffff (se mantiene) |
| Divider | Divider | #e2e8f0 | → | --line | #d9d3c1 |
| Texto primario | TextPrimary | #1e293b | → | --ink | #1a1d17 |
| Texto secundario | TextSecondary | #64748b | → | --muted | #6b6d63 |
| Acción primaria | Primary | #1a7742 | → | --ink | #1a1d17 (sí, ink; moss para confirmación) |
| Acción confirm | PrimaryDark / Success | #059669 | → | --moss | #2d4a2b |
| Urgente / alerta | NotificationBadge / Accent | #FF8F00 | → | --clay | #b8593a |
| Status · Pendiente | StatusPending | #2563eb | → | --st-pendiente | #3d5a7a |
| Status · Aprobada | StatusApproved | #059669 | → | --st-aprobada | #4f7a3d |
| Status · Observada | StatusWarning | #f59e0b | → | --st-observada | #c79a2a |
| Status · Rechazada | StatusRejected | #dc2626 | → | --st-rechazada | #a13d2f |
| Toxicológico Ia | ToxIa | #9C27B0 | → | --tox-ia | #6e1e18 |
| EIQ bajo / medio / alto | RiskLow / Medium / High | saturados (emerald / amber / red) | → | --eiq-bajo / medio / alto | moss / amber / brick · tonos tierra |
| + 12 tokens semánticos adicionales (Warning/Info/Success Bg/Border/Dark/Light → se unifican en --sand / --paper-2 / --cream-accent + los 5 colores de status) | |||||
Recorrí cada vista en Views/ y las clasifiqué por tipo de intervención. El esfuerzo asume que Colors.xaml + Styles.xaml ya están migrados (paso 0) y mide el trabajo de cleanup adicional por página.
| Pantalla | Veredicto | Fit | Esf. | Qué hay que tocar |
|---|---|---|---|---|
Home Views/Home/HomePage.xaml |
Rediseño parcial | 2d | KPIs 2×2 con fondos pastel → KPIs serif con border-left accent. Header saludo → H1 Instrument Serif con italic clay. Quitar los 12 emojis; reemplazar por SVG. Card "Ejecuciones activas" y "Trabajos cerca" son reutilizables 1:1 con tokens nuevos. | |
Mi Campo (Recetas + Lotes) Views/Recipes/MiCampoPage.xaml |
Rediseño parcial | 2.5d | Segmented control Recetas/Lotes se mantiene. Chips de filtro (Todos · Abierta · Pendiente…) se traducen 1:1 a chip municipal. El badge municipio 🏛 se reemplaza por chip moss. Cambio grande: el card de receta-grupo con dots de estado debería usar risk-bar estilo municipal. | |
Ejecuciones · Lista Views/Execution/ExecutionListPage.xaml |
Solo tokens | 0.5d | Estructura perfecta para el sistema nuevo: barra lateral de color por estado (= tbody tr.urgent del municipio). Cambio: filtros pill (🔵 Activas) → .filters .tab.active (ink + bone). Badge "Falta reporte de vuelo" → chip amber. | |
Ejecución · Detalle Views/Execution/ExecutionPage.xaml + Checklist/Drone/Timeline |
Rediseño parcial | 2d | La state machine (PENDIENTE → ACEPTADA → EN_CAMINO → EN_CURSO → COMPLETADA) pide visualmente el componente .tline del municipio. Los 5 sub-tabs (Conditions/Contact/Drone/Products/Timeline) se mantienen. Las action-buttons grandes de transición deberían pasar a btn ink + btn clay en lugar de botones verdes sólidos. | |
Resultado deriva (DriftResult) Views/Execution/DriftResultPage.xaml |
Rediseño parcial | 1d | Pantalla crítica de advertencia. Hoy usa ErrorAccentBg / WarningBg. Traducción directa al patrón .warn-box municipal (border-left clay 3px + icon círculo). El gauge de riesgo se puede reusar tal cual (.eiq-gauge). | |
Trabajos · Lista (aplicador y productor) Views/Jobs/JobListPage.xaml + ProducerJobListPage.xaml |
Solo tokens | 1d | Cards de trabajo con distancia, surface ha, locality. Traducción casi literal a filas de table.rtab o a cards con numerología serif. Los chips de estado de postulación siguen el mapa de tokens. | |
Trabajo · Detalle + Crear Views/Jobs/JobDetailPage + CreateJobPage + ProducerJobDetailPage |
Solo tokens | 1d | Forms estándar. Cambian los FormEntry / FormInputBorder del sistema central y todo se alinea. | |
Review del aplicador Views/Jobs/ReviewApplicatorPage.xaml |
Solo tokens | 0.5d | Estrellas + textarea. Cuidar el rating: estrellas llenas en amber, no saturado. | |
Notificaciones Views/Notifications/NotificationsPage.xaml |
Solo tokens | 0.5d | Estructura ya replica el .notif-dropdown del municipio. UnreadNotificationBg #F0F7FF → #eef3f9. Bugs pendientes del CLAUDE.md (padding del badge) se resuelven en la misma pasada. | |
Perfil (productor / aplicador) Views/Profile/ProfilePage + ProducerProfilePage + EditApplicatorPage |
Rediseño parcial | 1.5d | Foto + nombre + badge ✅ Verificado → patrón .mun-card del sidebar municipal. Rating / Completion rate / Hectáreas piden KPIs serif grandes. Zonas de exclusión (aplicador) requieren un componente de mapa que hoy no existe en mobile — dejar placeholder. | |
Perfil público aplicador Views/Profile/ApplicatorPublicProfilePage.xaml |
Rediseño parcial | 1d | Se beneficia mucho del sistema nuevo: headline serif con nombre del aplicador, estrellas en amber, equipo en rtab-like list. Gran ganancia visual. | |
Operarios · Lista + Detalle + Crear Views/Profile/OperatorListPage + OperatorDetailPage + CreateOperatorPage |
Solo tokens | 1d | Listados CRUD simples. Migran con el paquete de tokens y el FormEntry global. | |
Crear receta manual (wizard) Views/Recipes/CreateManualRecipePage.xaml |
Rediseño mayor | 3d | Es el formulario más pesado (productos, dosis, lotes). Merece atención especial: el paralelo web (CreateManual ~984 líneas de JS inline) ya está flaggeado como deuda técnica. Migrar mobile es ocasión para dividir en sub-páginas (el CLAUDE.md ya lo recomienda por el anti-patrón de DisplayPromptAsync encadenado). | |
Detalle de lote Views/Recipes/LotDetailPage.xaml |
Rediseño parcial | 1.5d | Historial + polígono. El .tline municipal encaja perfectamente para el historial. El preview del polígono se mantiene como imagen. | |
Asignar municipio / Asignación directa Views/Recipes/AssignMunicipalityPage + DirectAssignPage |
Solo tokens | 0.5d | Pickers simples. Migran con tokens. | |
Admin · Home + Stats Views/Home/AdminHomePage + AdminStatsPage |
Esperar | — | Recomiendo no migrar ahora. El admin mobile duplica funciones que viven mejor en web. Si se migra, que sea a la vez que se redefine su alcance. Riesgo bajo de inconsistencia porque lo ve un usuario interno. | |
Login / Register / Onboarding Views/Account/LoginPage + RegisterPage + Profile/OnboardingPage + RoleSelectionPage |
Rediseño mayor | 2.5d | Son la first impression: hoy usan gradiente verde con tokens LoginSubtitle #a7f3d0 / LoginFooter #6ee7b7. En el nuevo sistema queda mucho mejor con fondo bone, headline Instrument Serif con italic clay ("Bienvenido a AgroConnect") y CTA ink. Merece rediseño dedicado, no sólo reemplazo de colores. | |
Loading / Cuenta operario / Change password Views/Account/LoadingPage + OperatorAccountPage + ChangePasswordPage |
Solo tokens | 0.5d | Pantallas utilitarias, cambio trivial. |
Esfuerzos estimados asumiendo 1 dev full-time. Cada paso es independientemente releaseable — se puede parar después de cualquiera y el producto queda consistente.
Sí, el mobile puede y debería pasarse al sistema municipal — con matices. La arquitectura MAUI lo facilita (todos los tokens viven en 2 archivos), pero no es un find-and-replace: hay decisiones de identidad que tomar, emojis que sacar, y 4 pantallas que merecen rediseño, no solo reskin.
La ganancia es doble: (1) coherencia visual entre el municipio aprobando una receta en web y el productor viéndola aprobada en mobile — ahora mismo, la misma receta cambia de lenguaje entre dispositivos; (2) oportunidad para limpiar deuda técnica listada en el CLAUDE.md del mobile (flicker de listas, wizards de DisplayPromptAsync, badges mal padded).
El riesgo principal no es técnico — es de contexto de uso. El mobile se usa al sol, con guantes, apurado. Antes de comprometernos al plan completo, propongo ejecutar el paso 00 (re-skin sólo del Home) y probarlo en campo real con un productor. Si funciona, seguimos. Si no, ajustamos tokens (más contraste, más peso) y volvemos a probar.