# 03 · Las 32 pantallas Cada pantalla con su estructura, sus datos y sus salidas. Ábrela en paralelo en el prototipo (`prototipo/index.html`): el rail izquierdo tiene el mismo orden. --- ## Mapa de códigos: diseño ↔ documento El mockup renumeró parte del bloque B respecto al documento original (`mapa-de-pantallas-original.md`). **Esta tabla manda**: es la equivalencia real. | Código en el diseño | Pantalla | Código en el documento | Estado según el documento | |---|---|---|---| | A1 | Splash | A1 | ⚪ Por construir | | A2 | Bienvenida | A2 | ⚪ Por construir | | A3 | Registro | A3 | ✅ Listo — **pero cambia de celular a correo** | | A4 | Confirmar correo | A4 (era "Verificar SMS") | ⚪ Por construir — **cambió de OTP SMS a enlace por correo** | | A5 / A6 | Legales (una pantalla, dos pestañas) | A5 y A6 (dos pantallas) | ⚪ Por construir — ver aviso abajo | | A7 | Inicio de sesión | A7 | ⚪ Por construir | | A8 | Recuperar acceso | A8 | ⚪ Por construir | | B1 | Inicio · Mapa | **B2** en el documento | ⚪ Por construir — Google Maps SDK | | B2 | Sitios cercanos (lista) | **B3** | ⚪ Por construir | | B3 | Detalle de sitio | **B4** | ⚪ Por construir | | B5 | Favoritos | B5 | ⚪ Por construir | | — | *(el "Inicio" B1 del documento no existe como pantalla)* | B1 | ✅ Listo — su contenido se repartió entre B1 mapa y E1 wallet | | C1 | Cargar aquí | C1 | ✅ Listo | | C2 | Sesión en vivo | C2 | ✅ Listo | | C3 | Reservar conector | C3 | 🟡 Backend listo, faltaba pantalla | | C4 | Calificar la carga | C4 | ⚪ Por construir | | D1 | Historial | D1 | ✅ Listo | | D2 | Recibo | D2 | ✅ Listo | | D3 | Compartir recibo | D3 | ⚪ Por construir | | D4 | Actividad | **no existe en el documento** | ⚪ Por construir — cubre la función "gráfica de gasto mensual" | | E1 | Wallet | E1 | ✅ Listo | | E2 | Abonar saldo | E2 | ✅ Listo (pago simulado) | | E3 | Métodos de pago | E3 | ⚪ Por construir | | E4 | Agregar tarjeta | E4 | ⚪ Por construir | | F1 | Perfil | F1 | ✅ Listo (básico) | | F2 | Editar perfil | F2 | ⚪ Por construir | | F3 | Mis autos | F3 | ⛔ Retirada por el cliente (12 sep 2026) — la app no gestiona vehículos por ahora | | F4 | Notificaciones | F4 | ⚪ Por construir | | F5 | Configuración | F5 | ⚪ Por construir | | F6 | Eliminar cuenta | F6 | ⚪ Por construir | | G1 | Ayuda y FAQ | G1 | ⚪ Por construir | | G2 | Contactar soporte | G2 | ⚪ Por construir | | G3 | Reportar problema | G3 | ⚪ Por construir | | G4 | Acerca de y legal | G4 | ⚪ Por construir | > **Aviso legal sobre A5/A6:** el mockup junta Términos y Aviso de Privacidad en una sola pantalla con dos pestañas. El documento pide explícitamente **dos pantallas separadas** porque son consentimientos de naturaleza distinta y mezclarlos es lo que más señalan INAI/Condusef. La decisión es de quien lleve el tema legal, no del desarrollo. Ver `08-pendientes.md` §3. --- ## Bloque A · Acceso ### A1 · Splash Logo centrado a 210 px de ancho sobre `paper`, leyenda mono 10.5 px "revisando sesión…" a 56 px del borde inferior. Avanza sola a los 1900 ms; también avanza al tocar. En producción no es un temporizador: la pantalla dura lo que tarde la comprobación del token de sesión, con un mínimo de ~600 ms para que no parpadee. Con sesión válida va directo a B1; sin sesión, a A2. **Salidas:** → A2 (fade) ### A2 · Bienvenida Tres pasos con imagen propia, centrados verticalmente. Área de imagen 270 px de alto, la imagen se muestra completa (`contain`, nunca recortada; los PNG traen fondo transparente y funcionan igual en tema claro u oscuro). Título 25 px 600, cuerpo 14 px `muted`, puntos de 8 px (el activo se estira a 22 px). Animación al cambiar de paso: la imagen entra con `translateY(14px) scale(.97)` en 420 ms y el texto con `translateX(16px)` en 480 ms. **Los dos entran por separado, no como bloque.** Textos: (1) "Encuentra un cargador libre, no uno cualquiera" · (2) "Abona saldo una vez, carga cuando quieras" · (3) "Cada sesión con su recibo". **Salidas:** "Crear cuenta" → A3 · "Ya tengo cuenta" → A7 ### A3 · Registro Header "Crear cuenta". Tres campos: nombre completo, correo (identificador de cuenta) y contraseña con ayuda "Mínimo 8 caracteres". Bloque de consentimiento con casilla y enlaces a Términos y a Aviso de Privacidad. CTA "Continuar" en barra fija. **Cambio respecto al documento:** el alta es por **correo electrónico**, no por celular con OTP. El celular queda como campo opcional en F2. **Datos:** crea la cuenta y su identificador virtual ante el cargador. Debe registrar fecha, hora y versión del documento legal aceptado. **Estados que faltan diseñar:** error de validación por campo, correo ya registrado, contraseña débil. **Salidas:** → A4 · enlaces → A5/A6 · header ← A7 ### A4 · Confirmar correo Contenido centrado verticalmente: icono en contenedor 72 px, título 20 px, explicación con el correo resaltado, aviso "el enlace vence en 30 minutos". Barra fija con "Ya confirmé mi correo" + fila de reenvío ("Reenviar en 0:42") y "Cambiar correo". **Estados que faltan:** enlace vencido, límite de reenvíos, confirmación fallida. **Salidas:** "Ya confirmé" → A5 · "Cambiar correo" ← A3 ### A5 / A6 · Legales Control segmentado Términos / Privacidad, versión y fecha en mono 10.5 px, cuerpo con scroll propio dentro de una tarjeta, y al pie la casilla de consentimiento + "Continuar". El consentimiento cambia con la pestaña: Términos es obligatorio ("He leído y acepto…"); Privacidad ofrece el consentimiento **opcional** de finalidades secundarias, y nunca viene premarcado. **Falta:** el botón debe habilitarse sólo al llegar al final del texto (lo pide el documento). El texto completo lo redacta el área legal; el índice de secciones obligatorias está en `mapa-de-pantallas-original.md` §3 y §4. **Salidas:** → B1 ### A7 · Inicio de sesión **Slot 1 del logo.** Hay tres direcciones en el prototipo; la activa y la que se implementa es **Tarjeta**: - **Tarjeta (A7c, activa)** — cabecera de 252 px sobre `paper` con dos formas orgánicas de marca (círculos al 10 % y 7 %), logo a 124 px alineado a la izquierda y la foto del cargador a 196 px de alto, alineada a la derecha, con la base metida detrás de la tarjeta. Debajo, hoja `surface` de radio 30 px con el formulario: correo, contraseña, "Recordarme" + "Olvidé mi contraseña" en una línea, CTA, y tres botones sociales cuadrados de 52 px. - **Portada (A7b)** — foto a sangre de 238 px bajo la barra de estado, hoja montada con `-30 px`, Google y Apple lado a lado. - **Tipografía (A7)** — sin foto, logo a 132 px y titular a 27 px. En temas oscuros el logo se invierte a blanco monocromático (`brightness(0) invert(1)`). **Salidas:** CTA y sociales → B1 (fade) · "Regístrate" → A3 · "Olvidé mi contraseña" → A8 ### A8 · Recuperar acceso Explicación, correo prellenado con borde de marca, enlace "No tengo acceso a este correo" → G2, y CTA "Enviar enlace" en barra fija. Al enviar corre el proceso y vuelve a A7 con toast. --- ## Bloque B · Descubrir ### B1 · Inicio · Mapa Pantalla raíz de la app. El mapa ocupa todo; encima flotan tres cosas: 1. **Buscador** a 60 px del borde superior (alto 48 px) + botón de filtros de 48 px. Ambos llevan a B2. 2. **Tarjeta del sitio seleccionado** a `bottom: 112` — nombre, dirección, horario con "Abierto" en `brand`, distancia en píldora `tint`, resumen de conectores en tres columnas y CTA "Ver detalle del sitio". 3. **Barra de pestañas**. Al tocar un pin, la tarjeta cambia al sitio de ese pin (el componente emite `site-pick`). **Sitios de ejemplo:** Plaza Río Tijuana (32.52833, −117.01972) y Costco Tijuana Río (32.52620, −117.00930, **coordenada aproximada por dirección, sin geocodificar**). **Estados que faltan:** sin permiso de ubicación, sin GPS, sin sitios en la zona, mapa sin conexión. **Ver:** `06-integraciones.md` para el motor de mapa y su estilo. ### B2 · Sitios cercanos Header "Sitios cercanos". Fila de chips de filtro con scroll horizontal (Todos · Disponibles · DC rápida · AC) y tarjetas de sitio con miniatura de 78 px. **Falta:** ordenar por distancia/precio (lo pide el documento) y el estado "sin resultados con estos filtros". ### B3 · Detalle de sitio Hero de 216 px (zona de foto pendiente) con botón de regreso y de favorito flotando a 62 px del borde superior. Debajo: nombre 21 px, dirección, horario; fila con "Cómo llegar" y "Reservar" (46 px); lista de conectores con tipo, potencia, tarifa e insignia de estado. Barra fija con el precio a la izquierda y "Cargar aquí" a la derecha (patrón Airbnb). Cada conector es tocable y lleva a C1. **Falta:** reseñas (las pide el documento), fotos reales, estado "fuera de servicio". **Salidas:** conector o CTA → C1 · "Reservar" → C3 · corazón → B5 · regreso → B1 ### B5 · Favoritos Misma tarjeta que B2 con el corazón lleno en lugar de la distancia, y una línea de ayuda al pie. **Falta el estado vacío** ("todavía no guardas ninguno"), que es el más probable al inicio. --- ## Bloque C · Cargar ### C1 · Cargar aquí Header "Cargar aquí". Tres bloques: tarjeta del conector (tipo, potencia, identificador del cargador, insignia), tarifa y saldo lado a lado; tarjeta con los tres pasos numerados; aviso en `tint` sobre la ventana de 30 segundos. Abajo, el deslizador de autorización. **Regla de negocio:** si el saldo no alcanza para una carga mínima, el inicio se bloquea (ya existe en el backend). **Falta diseñar ese estado**, con salida directa a E2. **Salidas:** deslizar → proceso "Autorizando en el cargador…" → C2 ### C2 · Sesión en vivo Header "Sesión en vivo". Tarjeta principal con la píldora pulsante "Cargando", el anillo de 212 px con la batería estimada al centro y los kWh debajo, y la fila de métricas (tiempo · potencia · costo). Segunda tarjeta con sitio, conector, "Llega al 80 % en" y saldo restante. Barra fija con "Detener carga" (secundario) y "Reportar un problema". **La batería estimada necesita la capacidad del vehículo, y la app ya no la captura** (F3 · Mis autos se retiró el 12 sep 2026). Hay que decidir qué se muestra al centro del anillo — probablemente los kWh entregados. Ver `08-pendientes.md` §4. "Detener carga" **siempre** abre confirmación: muestra kWh y costo acumulado, con "Seguir cargando" en primario y "Sí, detener" en neutro. Un toque accidental no puede cortar la sesión. **Estados que faltan:** pausada por el auto, pausada por el cargador, sin conexión, terminada por retiro del cable. **Salidas:** confirmar → "Liquidando importe…" → C4 · "Reportar" → G3 ### C3 · Reservar conector Header "Reservar conector". Dos estados en la misma pantalla: - **Pendiente** — tarjeta del sitio, "1. Elige el conector" (radios; los ocupados no se pueden apartar) y "2. Cuánto lo apartas" (10 o 20 min). CTA "Reservar N min". - **Activa** — anillo de 212 px con la cuenta regresiva, métricas (conector · potencia · tarifa), tarjeta de ruta con distancia y ETA y botón "Ruta". Barra fija con "Cancelar reserva" y "Ya llegué". Aviso permanente: si no llegas antes de que termine la cuenta, se libera solo y sin costo. **Salidas:** "Ya llegué" → C1 · cancelar → vuelve al estado pendiente ### C4 · Calificar la carga Hoja inferior **sobre el recibo**. Título, sitio y kWh, cinco estrellas de 32 px, campo de comentario opcional (mínimo 78 px) y "Enviar reseña". "Omitir" cierra hacia D2. --- ## Bloque D · Historial y recibos ### D1 · Historial Header "Historial". Sesiones agrupadas por mes: encabezado mono en mayúsculas con el total del periodo a la derecha, y filas con icono `lightning`, sitio, metadatos (fecha · kWh · duración) e importe. **Falta:** estado vacío y paginación/scroll infinito. ### D2 · Recibo Header "Recibo". Tarjeta de resultado con check en círculo `tint`, importe a 40 px y rango horario. Tarjeta de desglose con siete líneas: sitio, conector, energía, duración, tarifa, cómo terminó y saldo restante. Barra fija con Compartir / Factura y "Listo". **Falta:** el estado "importe aún calculándose" y el de cierre no confiable (corte de energía) que menciona el documento. "Factura" (CFDI) no tiene pantalla todavía. ### D3 · Compartir recibo Hoja inferior sobre D2. Vista previa del PDF (etiqueta mono, importe, sitio · fecha · kWh) y dos botones: Descargar y Compartir. ### D4 · Actividad Pantalla raíz con pestañas. Título y selector de periodo ("Últimos 30 días"), gráfica de 12 barras, cuatro métricas en rejilla 2×2 (energía del mes, CO₂ ahorrado, tiempo de carga, sesiones) y las últimas sesiones con salida a D1. **No está en el documento como pantalla**: cubre la función "gráfica de gasto mensual". Si se quiere reducir alcance en la v1, es la primera candidata a recortar — el historial (D1) ya cubre lo esencial. --- ## Bloque E · Saldo y pagos ### E1 · Wallet Pantalla raíz con pestañas. **Slot 2 del logo:** tarjeta `deep` con el logo en blanco monocromático y el saldo a 34 px. Debajo: "Agregar fondos" (primario) y "Promoción" (neutro), control segmentado (Todos · Depósitos · Cargos) y lista de movimientos. Movimientos: abonos con flecha entrante en `brand`, cargos con flecha saliente en `muted`/`ink`. **Nunca se usa rojo**: la marca gobierna, el signo y la dirección de la flecha comunican. **Falta:** el filtro del segmentado no está implementado en el mockup (siempre muestra todo), y falta el estado sin movimientos. ### E2 · Abonar saldo Hoja inferior sobre E1. Montos sugeridos ($100/$200/$500) como chips, monto libre en campo de 56 px con "MXN" a la derecha, método de pago guardado y CTA "Abonar $N". **Regla:** el rango válido es $20–$5,000 MXN (documento). **Falta** el teclado numérico real, la validación del rango, "sin método de pago guardado" y "pago rechazado". **Salidas:** pagar → "Procesando pago…" → E1 con toast y saldo actualizado ### E3 · Métodos de pago Header "Métodos de pago". Tarjetas guardadas con últimos 4 dígitos y vencimiento; la predeterminada lleva la píldora "Predeterminada" y borde de marca. Nota permanente: sólo se guarda el token del procesador, nunca el número completo. CTA secundario "Agregar método". **Falta:** eliminar tarjeta y estado sin métodos guardados. ### E4 · Agregar tarjeta Header "Agregar tarjeta". Apple Pay y Google Pay primero, separador "o con tarjeta", y el formulario (número, vencimiento, CVV). CTA "Guardar tarjeta". **Crítico:** los datos de tarjeta van directo al SDK del procesador y **nunca tocan el servidor propio**. Ver `06-integraciones.md`. --- ## Bloque F · Cuenta ### F1 · Perfil Pantalla raíz con pestañas. **Slot 3 del logo:** avatar circular de 74 px con placa blanca. Nombre, píldora de ID, campana de notificaciones. Tres accesos rápidos (Métodos de pago · Historial · Configuración), lista de preferencias (seis filas) y "Cerrar sesión" en `brand`. ### F2 · Editar perfil Nombre, correo y celular opcional. Nota: cambiar el correo obliga a reconfirmarlo con enlace. **Falta:** el estado "correo ya usado por otra cuenta". ### F3 · Mis autos — retirada El cliente la quitó el 12 sep 2026: por ahora la app no gestiona vehículos. Se conserva el código F3 para que la numeración del resto no cambie. Consecuencias: el perfil pierde el bloque "Mis autos" (el acceso rápido pasa a Historial), y C2 se queda sin la capacidad de batería — ver la nota de C2 y `08-pendientes.md` §4. ### F4 · Notificaciones Cuatro interruptores: inicio y fin de carga, saldo bajo, promociones, conector liberado. Cada uno con descripción de una línea. Estado inicial: los tres primeros encendidos salvo promociones (apagado, coherente con el consentimiento opcional del Aviso de Privacidad). ### F5 · Configuración Tres controles segmentados: Idioma (Español · English), Tema (Claro · Oscuro · Automático) y Unidades (kWh · kWh + km). Al pie, "Eliminar mi cuenta". > El control de Tema es el claro/oscuro del sistema, **no** el selector de marca whitelabel: la marca la fija la compilación, no el usuario. ### F6 · Eliminar cuenta Icono de advertencia, título, lista de lo que se borra (cuatro puntos) y nota sobre el derecho ARCO y el saldo pendiente. Barra fija con "Eliminar mi cuenta" en secundario y "Conservar mi cuenta" en primario. **Falta:** la confirmación fuerte (contraseña o código) que pide el documento y el bloqueo cuando hay saldo pendiente. --- ## Bloque G · Soporte ### G1 · Ayuda y FAQ Buscador (no funcional en el mockup), acordeón de cuatro preguntas y CTA "Contactar soporte" en barra fija. **Falta:** categorías (pagos, carga, cuenta) y "sin resultados". ### G2 · Contactar soporte Conversación con burbujas y barra de composición con clip de adjuntos y botón de envío circular de 50 px. **Falta:** subida real de archivos, historial y estado sin conexión. ### G3 · Reportar problema Se abre desde C2 y llega con el contexto de la sesión (fecha, sitio, cargador). Chips de motivo, campo de descripción de 110 px mínimo y zona de adjuntar foto con borde punteado. ### G4 · Acerca de y legal Logo en placa blanca de 76 px, versión y build en mono, y cuatro filas: Términos, Aviso de Privacidad, Licencias de código abierto y Ayuda. **Falta:** la pantalla de licencias de código abierto (hoy la fila no lleva a ningún lado).