# Billetera de Carga — kit de handoff para desarrollo Todo lo necesario para pasar el diseño a una app funcional: el prototipo navegable, los tokens, las medidas de cada componente, la especificación de las 32 pantallas, los contratos de datos, las integraciones y lo que todavía falta decidir. **Versión 1.0.0 · 8 sep 2026 · agnóstico de stack** (React Native, Flutter, nativo o web — los tokens van en JSON y CSS, y las medidas en puntos lógicos). --- ## Abre esto primero ``` handoff/prototipo/index.html ``` Ábrelo con doble clic en cualquier navegador. **No necesita servidor ni conexión**: fuentes, iconos y Leaflet van empaquetados en `prototipo/vendor/`. Lo único que sale a internet son las teselas del mapa; sin conexión el mapa queda gris y el resto funciona igual. Dentro tienes: - Las **32 pantallas** en el rail izquierdo, agrupadas por flujo y con su código. - Las **cuatro marcas de ejemplo** para ver el whitelabel en vivo (GRC es la de producción). - Los **flujos completos** con sus transiciones: iniciar carga, detener con confirmación, reservar un conector, abonar saldo (el saldo sube de verdad), calificar y compartir el recibo. - El **mapa real** de Tijuana con los dos sitios de ejemplo. Pega una clave de Google Maps en el panel y cambia de motor sin recargar. - El **modo cotas**: toca cualquier elemento y obtén su tamaño, su posición respecto al marco, su padding, sus radios, su tipografía y de qué token sale cada uno de sus colores. Más las capas de safe areas, guías de margen y anatomía del layout. **Es la forma de sacar cualquier medida que no esté escrita.** El prototipo es la fuente de verdad visual: los estilos van en línea a propósito, así cada pantalla es también su propia hoja de medidas, y el modo cotas la vuelve medible sin abrir el código. --- ## Qué hay en el kit | Archivo | Para qué | |---|---| | **[01 · Layout y medidas](01-layout-y-medidas.md)** | **Empieza aquí.** Márgenes, posiciones, safe areas, anatomía de cada composición y ritmo vertical — lo necesario para hacer el diseño espejo | | **[Sistema de diseño](tokens/)** — `tokens.json`, `tokens.css` | Los 6 tokens por marca + 3 derivados, tipografía, radios, medidas, sombras y movimiento | | **[02 · Componentes](02-componentes.md)** | Cada pieza reutilizable con sus medidas y estados exactos | | **[03 · Pantallas](03-pantallas.md)** | Las 32 pantallas: estructura, datos, salidas, y la equivalencia con el documento original | | **[04 · Navegación y animación](04-navegacion-y-animacion.md)** | Mapa de flujos, jerarquía, las cuatro transiciones y el patrón de procesos | | **[05 · Datos y contratos](05-datos-y-contratos.md)** | Qué necesita cada pantalla, las entidades y las reglas de negocio | | **[06 · Integraciones](06-integraciones.md)** | Mapas, cargadores (CitrineOS), pagos, correo, push y dependencias | | **[07 · Assets](07-assets.md)** | Los archivos que hay, los tres slots de logo, y las fotos que faltan | | **[08 · Pendientes](08-pendientes.md)** | Lo que el mockup no resuelve, con números medidos y preguntas concretas | | `specs/` | Las láminas anotadas: anatomía, safe areas, márgenes y cotas | | `assets/` | Logo, pin del mapa, ilustraciones de bienvenida, foto del cargador | | `prototipo/` | El prototipo navegable, sin dependencias externas | | `mapa-de-pantallas-original.md` | El documento del cliente que originó el diseño | --- ## El sistema en un párrafo Cuatro colores por marca gobiernan toda la interfaz — **Marca**, **Profundo**, **Tinta** y **Fondo**, más dos de apoyo (Superficie y Sobre-marca). Los demás colores no existen: bordes, textos secundarios y fondos de acento se **derivan por mezcla** de esos seis. Cambiar de marca es cambiar seis valores. La tipografía es Inter (con IBM Plex Mono para etiquetas micro), los iconos son Phosphor en tres pesos, y hay una sola curva de animación (`cubic-bezier(.32,.72,0,1)`, 300 ms) para las cuatro transiciones del sistema. El layout sigue el patrón de zona del pulgar de Uber, Rappi y Airbnb: el contenido scrollea y la acción principal vive anclada al fondo, separada por una línea. Cuatro pantallas raíz con barra de pestañas; todo lo demás se apila encima con header y regreso. --- ## Por dónde empezar a construir El orden que recomienda el documento del cliente, y que sigue siendo el de menor riesgo: 1. **Lo que ya funciona en el backend** — A3, C1, C2, D1, D2, E1, E2, F1 ya corren en `everest.caseops.pro/panel/app`. Ábrelas con datos reales: el comportamiento está probado, lo que falta es la capa visual. Aquí también entra el sistema de tokens y componentes, porque estas ocho pantallas ya usan más de la mitad del inventario. 2. **Lo que tiene datos pero no pantalla** — C3 Reservar: toda la lógica ya está en el servidor. 3. **Lo puramente nuevo** — bloque B (mapa, lista, detalle, favoritos) y bloque G (soporte). Son los que más dependen de decisiones abiertas. **Antes de la primera línea de código**, lee `08-pendientes.md`: hay cinco decisiones que bloquean (qué variante de login, los estados de red, si los legales van en una pantalla o dos, qué muestra el anillo sin auto guardado, y si existe versión oscura de la marca) y siete preguntas concretas para el cliente al final. --- ## Antes de dar por terminada una pantalla - [ ] Ningún color escrito a mano: todo sale de los seis tokens y sus derivados. - [ ] Los cuatro estados de red resueltos si la pantalla tiene datos en vivo (`05-datos-y-contratos.md` §3). - [ ] Safe areas del sistema, no los valores fijos del mockup. - [ ] Área de toque de 44 × 44 pt como mínimo. - [ ] Etiquetas de accesibilidad en todo icono sin texto. - [ ] Los textos salen de archivos de idioma, no del código. - [ ] Importes, fechas y números con la configuración regional. - [ ] Se ve bien con el tamaño de texto del sistema en grande. - [ ] Las acciones destructivas piden confirmación, y la opción segura es la destacada. --- ## Contexto El diseño salió de un mockup hecho en Claude Design a partir del documento **Mapa de Pantallas — Billetera de Carga** del cliente (incluido aquí como `mapa-de-pantallas-original.md`). El mockup original vive en `../project/Billetera de Carga.dc.html`; **no hace falta abrirlo**: el prototipo de este kit lo reproduce sin depender del editor de diseño y con la navegación ya resuelta. Diferencias respecto al mockup original, todas deliberadas y documentadas: las hojas inferiores se dibujan sobre la pantalla que las abre (antes quedaban sobre un fondo vacío), las zonas de foto pendientes se ven marcadas como tales, y las librerías van empaquetadas en vez de venir de CDN.