# 08 · Pendientes y decisiones abiertas Lo que el mockup **no** resuelve. Ordenado por lo que más bloquea el arranque. --- ## 1 · Bloqueantes: hay que decidirlos antes de escribir código ### §1 · Qué variante de login se implementa Hay tres direcciones en el archivo, y el prototipo las trae todas para comparar: - **Tarjeta (A7c)** — es la activa y la que el cliente aprobó en la última iteración. - **Portada (A7b)** — foto a sangre; necesita una foto de portada que no existe. - **Tipografía (A7)** — sin foto. **Recomendación:** implementar sólo **Tarjeta** y borrar las otras dos del alcance. Mantener tres variantes vivas duplica trabajo en cada cambio posterior. ### §2 · Los estados de red no están diseñados Es el hueco más grande. El documento original lo pide **desde el inicio**, no como anexo, y el diseñador lo preguntó dos veces sin recibir respuesta. Ocho pantallas con datos en vivo (B1, B2, B3, C1, C2, D1, D2, E1) × cuatro estados (cargando, error, sin conexión, vacío) ≈ **20 láminas**. No son pantallas nuevas: son variantes de las que ya existen. Lo más urgente, por orden: 1. **C2 sin conexión** — una sesión de carga en curso que se queda en blanco es lo peor que puede pasar en esta app. 2. **C1 saldo insuficiente** — la regla ya existe en el backend y bloquea el inicio; sin pantalla, el usuario no sabe qué hacer. 3. **B5, D1, E1, E3 vacíos** — es lo que ve una cuenta nueva el primer día. 4. **B1 sin permiso de ubicación** — es la pantalla raíz; si falla, la app no arranca. ### §3 · Legales en una pantalla o en dos El mockup junta Términos y Aviso de Privacidad en una pantalla con dos pestañas. El documento pide **dos pantallas separadas** y explica por qué: son consentimientos de naturaleza distinta y mezclarlos es lo que más señalan INAI y Condusef en revisiones. **Es una decisión legal, no de diseño.** Si se separan, A6 hereda el mismo patrón sin cambios: cambia el contenido, la versión y el tipo de consentimiento (obligatorio en A5, opcional en A6). Además falta: habilitar el botón sólo al llegar al final del texto, y registrar fecha, hora y versión aceptada en la cuenta. ### §4 · Qué muestra el anillo de C2 sin capacidad de batería La batería estimada se calcula con la capacidad del vehículo, y la app **ya no la captura**: F3 · Mis autos se retiró el 12 sep 2026 por decisión del cliente. Opciones: (a) mostrar kWh entregados en vez de porcentaje mientras no haya auto — es lo recomendable; (b) pedir el auto antes de la primera carga; (c) usar una capacidad por defecto — no recomendable, es un número inventado que el usuario lee como real. ### §5 · Falta la variante oscura de cada marca > **Resuelto para GRC (2026-09-12).** GRC tiene ya sus dos juegos de tokens —el bloque `oscuro` en `tokens/tokens.json`—, F5 lo activa de verdad (Claro / Oscuro / Automático, con Automático siguiendo al sistema) y el kit documenta los seis valores con sus contrastes. Lo que sigue abajo queda como registro y aplica a Volt y Solaris si algún día se usan en producción. F5 ofrece Claro / Oscuro / Automático, pero de las cuatro marcas del sistema **sólo Nocturne es oscura**. Si la marca en producción es GRC, hoy no existe su versión oscura. Cada marca necesita **dos juegos de seis tokens**, claro y oscuro. Es trabajo de diseño, no de desarrollo: los valores oscuros no se pueden derivar automáticamente de los claros sin romper el contraste. --- ## 2 · Contraste: números medidos, no impresiones Ratios reales del sistema de color (WCAG 2.1; AA pide 4.5:1 para texto normal y 3:1 para texto grande — grande es ≥ 24 px, o ≥ 18.7 px en negrita): | Par | GRC | Nocturne | Volt | Solaris | Veredicto | |---|---|---|---|---|---| | Texto principal sobre fondo | 16.5 | 14.5 | 16.3 | 16.5 | ✅ de sobra | | Texto secundario (`muted`) sobre fondo | 6.05 | 7.26 | 5.96 | 6.05 | ✅ | | Blanco sobre `deep` | 12.3 | 18.8 | 12.7 | 15.7 | ✅ | | **Etiqueta del botón primario (`on-brand` sobre `brand`)** | **4.43** | 5.45 | **3.54** | 4.83 | ⚠️ GRC y Volt no llegan a 4.5 | | **Texto de marca sobre superficie** | **4.43** | 4.71 | **3.54** | 4.83 | ⚠️ igual | | **Insignia: texto de marca sobre `tint`** | **3.59** | 3.72 | **2.95** | 3.91 | ❌ ninguna llega | Qué hacer: - El texto de 11 px en insignias sobre `tint` **no cumple en ninguna marca**. La salida limpia: usar `ink` para el texto de la insignia y dejar `tint` sólo de fondo, o oscurecer el token de texto de la insignia a `mix(brand, ink, 30%)`. - El botón primario de GRC se queda a 0.07 de cumplir. Oscurecer `brand` un punto (por ejemplo `#0d7d3f`, que sube a ~5:1) lo resuelve sin cambiar la identidad visual. - **Volt no cumple en ningún caso** y es un tema de ejemplo, no la marca real. Si se queda en el sistema, hay que corregirle el color. - Cualquier marca nueva que entre al whitelabel debe pasar esta misma tabla **antes** de darse de alta. Vale la pena dejarlo como prueba automática. --- ## 3 · Diferencias entre el diseño y el documento original | Tema | Documento | Diseño | Qué hacer | |---|---|---|---| | Alta de cuenta | celular + OTP por SMS | correo + contraseña + enlace de confirmación | El cliente lo cambió expresamente. **Manda el diseño.** | | Numeración del bloque B | B1 Inicio, B2 Mapa, B3 Lista, B4 Detalle | B1 Mapa, B2 Lista, B3 Detalle | Usar la tabla de equivalencias de `03-pantallas.md`. | | Pantalla "Inicio" (B1 del documento) | saldo + estación + conectores | no existe; se repartió entre B1 mapa y E1 wallet | Confirmar que nadie espera esa pantalla. | | D4 Actividad | no existe como pantalla | existe | Es la función "gráfica de gasto mensual". Primera candidata a recortar en la v1. | | A5 y A6 | dos pantallas | una con pestañas | Ver §3 arriba. | | Estados de conector | cinco | dos dibujados | Ver abajo. | --- ## 4 · Funciones del documento sin pantalla en este diseño - **Centro de notificaciones en la app** — la campana de F1 no lleva a ningún lado. - **Licencias de código abierto** — la fila existe en G4, la pantalla no. - **Facturación CFDI** — el botón está en D2, el flujo no. - **"Avisarme cuando se libere"** un conector ocupado — hay interruptor en F4, pero no hay dónde activarlo por conector. - **Reseñas de la estación** en B3 — se capturan en C4 pero no se muestran en ningún lado. - **Códigos promocionales** — el botón "Promoción" de E1 no lleva a ningún lado. - **Inicio de sesión biométrico** (Face ID / huella). - **Ordenar por distancia y precio** en B2 (los chips filtran, no ordenan). - **Eliminar tarjeta** en E3. --- ## 5 · Detalles de implementación que el mockup simplifica 1. **Las tres insignias de estado que faltan** — reservado, fuera de servicio y sin conexión. Y su equivalente en el pin del mapa, que hoy es igual para todos los sitios. 2. **El deslizador de C1 es un botón.** En producción debe ser un gesto real de deslizar: es la confirmación de una acción que cobra dinero. 3. **La barra de estado queda tapada por el header.** En el mockup el header con `padding-top: 66` se pinta encima. En la app real la barra de estado es del sistema y siempre va encima: usar las safe areas reales, no el valor fijo. 4. **La barra de acción fija usa 26 px de padding inferior y el indicador de inicio ocupa 34.** La última fila tocable queda dentro de la zona de gesto del sistema — se ve en `specs/safe-areas.png`, donde "Reportar un problema" cae dentro de la banda. Usar `max(26, safe-area-inset-bottom)`, no el 26 fijo. Ver `01-layout-y-medidas.md` §3. 5. **La pila de navegación es un destino fijo por pantalla.** D2 puede llegar desde C2, D1 o D4 y hoy siempre regresa a C2. Implementar una pila de verdad. 6. **Los filtros no filtran.** Los chips de B2 y el segmentado de E1 cambian de estado visual pero no tocan la lista. 7. **La cuenta regresiva de la reserva es local.** Debe calcularse contra `expiraEn` del servidor para sobrevivir a que la app se cierre. 8. **El buscador de B1 y el de G1 no buscan.** 9. **Todo el texto está en duro y en español.** F5 ofrece English: hay que sacar las cadenas a archivos de idioma desde el primer día, y revisar que los layouts aguanten cadenas más largas. 10. **Formatos de moneda, fecha y número** deben salir de la configuración regional, no de plantillas fijas. --- ## 6 · Accesibilidad, más allá del contraste - **Área de toque mínima de 44 × 44 pt.** Los puntos del carrusel de A2 (8 px) y algunos enlaces de texto no la cumplen: ampliar el área tocable sin cambiar lo que se ve. - **Tipografía dinámica.** Toda la escala está en px fijos. Con el tamaño de texto del sistema en grande, las filas de métricas de C2/C3 y las etiquetas de la barra de pestañas son lo primero que se rompe. - **Lectores de pantalla.** Falta la etiqueta de cada icono sin texto: los botones circulares, las estrellas, los interruptores y los pines del mapa. - **El anillo comunica sólo por color y ángulo.** El valor numérico ya está al centro, que es lo importante; verificar que el lector de pantalla lo anuncie junto con su unidad. - **`prefers-reduced-motion`** ya está contemplado en `tokens/tokens.css`; hay que respetarlo también en el carrusel de A2 y en el pulso del punto de estado. --- ## 7 · Preguntas concretas para el cliente 1. ¿Se implementa sólo la variante **Tarjeta** del login? (§1) 2. ¿Términos y Privacidad van en **una pantalla con pestañas o en dos**? (§3 — decisión legal) 3. ¿**D4 Actividad** entra en la v1 o se pospone? 4. ¿Quién produce las **fotos de las estaciones** y qué se muestra mientras no existan? (`07-assets.md` §4) 5. ~~¿Hay **versión oscura** de la marca GRC, o la app se publica sólo en claro? (§5)~~ Resuelto: hay versión oscura y la elige el usuario en F5. 6. ¿La **coordenada exacta** de Costco Tijuana Río? (la del mockup es aproximada) 7. ¿Se acepta ajustar el verde de marca para cumplir contraste, o se prefiere cambiar el color del texto de las insignias? (§2)