Referencia funcional de las 36 pantallas navegables del prototipo, módulo por módulo.
Qué es este documento: describe, pantalla por pantalla, qué contiene y cómo funciona el prototipo de Integra tu Ruta. Es la referencia funcional compartida con BID, el equipo Pedagógico y la D.I.
Cómo navegarlo: usá el índice de la izquierda (o el botón ☰ en el celular) para saltar a cualquier módulo o pantalla. Cualquier código como EXP-3.1 o DEC-01 que aparezca en el texto es un enlace — tocalo para ir directo a esa pantalla.
Pendientes y dudas: viven todas juntas en Estado del trabajo, al final — el resto del documento describe el estado ya definido, sin interrupciones.
1 Introducción
Propósito del documento
Describe la arquitectura funcional de cada pantalla del producto: qué contiene, qué hace, con qué datos trabaja, y cómo se conecta con el resto. Sirve como referencia compartida durante la construcción del prototipo y sus iteraciones posteriores.
No es un documento de diseño visual (para eso está el prototipo navegable) ni un documento de motor conceptual (para eso está decide-documento-interno.md, específico del módulo Decide). Es la capa intermedia: la lógica funcional que sostiene la experiencia.
2 Introducción
Cómo leer este documento
Cada módulo abre con su propósito y —cuando aplica— con sus elementos transversales (patrones que se repiten en varias pantallas de ese módulo, descritos una sola vez y solo mencionados en cada pantalla).
Cada pantalla se describe con 4 secciones fijas, en este orden:
Contiene — las secciones o bloques que la componen (Sección 1, Sección 2, etc.).
Navegación — qué pasa al tocar cada elemento interactivo.
Componentes reutilizados — piezas del sistema de diseño que la pantalla incorpora, con una línea breve sobre qué muestran.
Estados, lógica y datos — solo lo que no se ve directamente en la UI (reglas de comportamiento, fuentes de datos, condiciones especiales).
Si alguna de esas 4 secciones no aplica a una pantalla puntual, se omite (no se pone "N/A").
Convenciones
Los componentes, secciones, subsecciones y elementos interactivos se escriben con mayúscula inicial: Card de carrera, Botón Agregar, Sección 1, Área de conocimiento.
Los identificadores de pantalla (EXP-3.1, DEC-01, etc.) aparecen entre backticks para facilitar su conversión a enlaces internos si el documento se exporta a HTML.
Estado del trabajo
Las decisiones pendientes, notas para validar y huecos de implementación no aparecen en el cuerpo del documento. Viven en una sección única al final llamada Estado del trabajo, para que el cuerpo describa el estado deseado de forma limpia y consultable.
Cuando aparecen ahí, se marcan con estos símbolos:
🟢 confirmado.
🟡 propuesta pendiente de validar.
🔴 sin propuesta todavía.
⚠️ hueco de implementación (la decisión está tomada, falta construirla en el código).
🔵 fuera del alcance MVP.
3 Introducción
Mapa de pantallas
Total: 36 pantallas navegables agrupadas en 9 módulos, más 3 secciones de transversales (EXP-00, INS-00, DEC-00) que documentan patrones compartidos dentro de esos módulos.
Las 36 son rutas navegables. Este documento detalla 38 vistas porque describe por separado los dos tabs del Home de Explora (EXP-1.1 / EXP-1.2) y los dos de su buscador (EXP-2.1 / EXP-2.2), que comparten ruta. Mi Ruta se documenta dentro de Perfil (PERF-02) y vive en /decide/mi-ruta.
Mapa del sitio. Los cuatro módulos del recorrido son accesibles de
forma independiente desde Inicio — el orden expresa una prioridad de diseño, no una restricción de
navegación. Las líneas punteadas son flujo de señal, no de navegación.
Propósito: identificar al estudiante becado al ingresar por primera vez a la plataforma. Cruza el NIE / DUI ingresado con la base institucional de la DI, verifica identidad por código, y crea el acceso personal.
Botón Reenviar código: tiene cooldown de 30 segundos entre reenvíos.
REG-06 — Completar datos y contraseña
Contiene
Campo Contraseña
Campo Confirmar contraseña
Checkbox de aceptación de términos y consentimiento de datos. El texto de términos incluye consentimiento explícito sobre: uso de datos del estudiante, política de privacidad, y — si el estudiante graba testimonios en el futuro — consentimiento para que esos videos puedan ser compartidos externamente por otros usuarios de la plataforma.
Botón Crear cuenta
Navegación
Contraseñas válidas + términos aceptados + tap en Botón Crear cuenta → INI-01.
Estados, lógica y datos
Estado vacío: Botón Crear cuenta deshabilitado.
Estado de contraseña débil: validación en vivo, mínimo 6 caracteres.
Estado de confirmación no coincide: mensaje inline en el Campo Confirmar contraseña.
5 Módulo
Módulo Inicio
Propósito: hub central de la app post-login. Responde "qué hago ahora" con orientación contextual — no es un dashboard ni un feed infinito, sino tres cards puntuales que sugieren el próximo paso.
INI-01 — Home
Contiene
Sección 1: Continuar donde quedaste
Sección 2: Avisos (visible solo si hay aviso activo)
Sección 3: Descubre
Navegación
Tap en Sección 1 → destino según el módulo de la actividad más reciente (EXP-3.1, PRE-03 o DEC-01).
Tap en Sección 3 → destino según la fuente activa (INS-01 para testimonio, EXP-3.1 para carrera destacada, o AYU-01 pre-expandido para pregunta frecuente).
Componentes reutilizados
Ícono de Notificaciones en la barra superior derecha (→ NOT-01).
Ícono de Perfil en la barra superior derecha (→ PERF-01).
Menú fijo de navegación inferior.
Estados, lógica y datos
Sección 1 — diseñada para mostrar la actividad más reciente entre Prepárate, Explora y Decide, elegida por timestamp, con 3 variantes según el módulo de origen. Hoy en el prototipo solo está implementada la variante Explora (nombre e imagen de la carrera vista, botón "Ver ficha") — no hay todavía lógica de comparación de timestamps ni las variantes Prepárate/Decide (ver Estado del trabajo).
Sección 2 solo se muestra cuando hay un aviso institucional activo publicado por la DI. Si no hay, se oculta.
Sección 3 — diseñada para rotar entre 3 fuentes en cada ingreso (un testimonio reciente de INS-01, la carrera destacada del mes de Explora, o una pregunta frecuente destacada de AYU-01). Hoy en el prototipo siempre muestra la carrera destacada del mes — no hay rotación todavía (ver Estado del trabajo).
Estado de usuario nuevo (sin actividad todavía): Sección 1 se reemplaza por un mensaje de bienvenida + CTA a Prepárate (PRE-01).
6 Módulo
Módulo Inspírate
Propósito: exponer al estudiante a testimonios reales de otros becados y a encuentros / charlas del programa. Es el módulo social del recorrido — donde la orientación pasa de "aprender datos" a "conectar con historias de gente parecida".
INS-00 — Transversales del módulo
Menú de tabs superior. Presente en INS-01 y INS-02. Dos opciones: Testimonios y Eventos. Al cambiar de tab, cambia todo el contenido de la pantalla.
Ícono de búsqueda (lupa). Presente en la barra superior de INS-01 y INS-02. Abre INS-04.
Íconos globales de la barra superior. Ícono de Notificaciones (→ NOT-01) e Ícono de Perfil (→ PERF-01) en la esquina superior derecha, presentes en INS-01 y INS-02.
INS-01 — Tab Testimonios
Contiene
Feed vertical de videos a pantalla completa (un video visible por vez, scroll vertical)
Overlay con datos del testimonio: nombre, carrera, universidad, año en curso o de egreso
Descriptor del video con hashtags
Botón Like
Botón Compartir
Navegación
Scroll vertical entre videos.
Tap en el nombre de la carrera (overlay) → EXP-3.1 de esa carrera.
Tap en Botón Like: marca el testimonio como preferido (señal interna, sin superficie propia).
Tap en Botón Compartir: abre share sheet nativo.
Componentes reutilizados
Testimonio a pantalla completa (reproductor + overlay de metadatos superpuestos).
Estados, lógica y datos
Curaduría del feed: el próximo video del scroll prioriza la misma carrera / área del último video visto, ponderando también las áreas de los testimonios marcados con Like.
Badge "De tu colegio": aparece en 2-3 de cada 10-12 videos del feed, cuando el testimonio es de alguien del mismo colegio del estudiante.
Like como señal: se persiste localmente y alimenta la curaduría del feed, el contexto de Decide, y el filtro "Favoritos" de INS-04 — que sí es una superficie recuperable de testimonios likeados (ver esa pantalla).
Cada testimonio tiene un flag compartibleExternamente (booleano). El Botón Compartir solo se muestra en testimonios con consentimiento explícito otorgado. Los testimonios sin consentimiento no muestran el botón. El consentimiento se recolecta al momento de grabar el testimonio, como parte del proceso operativo de la DI.
El Botón Compartir usa la Web Share API nativa (navigator.share) en dispositivos que la soporten. Fallback a copiar link al clipboard en desktop/navegadores sin soporte.
Estado sin conexión: banner con contenido cacheado.
INS-02 — Tab Eventos
Contiene
Pills de filtro en la barra superior:
Obligatoriedad: Obligatorio / Opcional / Todos (default: Todos)
Ubicación: por municipio o departamento
Fecha: Próximos / Pasados / Todos (default: Próximos)
Botón Limpiar filtros (visible solo si hay al menos un filtro activo distinto del default)
Listado vertical de tarjetas de eventos ordenadas por fecha (próximas primero, más cercana arriba)
Cada tarjeta muestra: fecha, tag visual de obligatoriedad (Obligatorio o Opcional), texto "Organizado por: [DI / nombre de la universidad / etc.]", descriptor, Botón Ver
Navegación
Tap en Botón Ver de una tarjeta → INS-03 del evento correspondiente.
Estados, lógica y datos
Un solo eje decisivo de clasificación para el estudiante: obligatoriedad ("¿tengo que ir?"). Los tipos administrativos (oficial DI vs externo universidad) viven como campo descriptivo "Organizado por" dentro de la card y del detalle, no como filtro.
Todo evento debe estar curado por la DI antes de aparecer en el catálogo, sin importar quién lo organice.
El filtro Ubicación usa el catálogo de municipios/departamentos ya centralizado en /lib/mock-data/catalogos.ts.
Los eventos con fecha pasada solo aparecen si el filtro Fecha está en "Pasados" o "Todos". Por defecto están ocultos.
Estado sin conexión: banner con contenido cacheado.
INS-03 — Detalle de evento
Contiene
Bloque de identidad del evento: título, fecha, hora, lugar o modalidad
Tag visual de obligatoriedad (Obligatorio / Opcional)
Texto "Organizado por: [entidad]"
Bloque de contenido (varía según el estado del evento):
Evento pasado con grabación: reproductor de video, puntos clave, indicador de progreso
Evento próximo: descriptor, Botón Registrarme
Evento pasado sin grabación: mensaje explicativo (sin reproductor ni acciones)
Navegación
Tap en Botón Registrarme (evento próximo) → registro externo o formulario embebido (según el mecanismo definido por la DI).
Estados, lógica y datos
Estado evento próximo: muestra descriptor + Botón Registrarme.
Estado evento próximo + ya registrado: Botón Registrarme cambia a Botón Cancelar registro (marcado optimista al tap).
Estado evento pasado con grabación: muestra reproductor + puntos clave + progreso.
Estado evento pasado sin grabación: mensaje simple, sin reproductor.
INS-04 — Buscador de testimonios
Contiene
Campo de búsqueda con placeholder "Buscá por nombre, carrera o universidad"
Botón Cerrar (X)
Pills de filtro: Área de conocimiento, Ubicación (zona/municipio en un solo campo), Favoritos (♡, testimonios marcados con Like)
Botón Limpiar filtros (visible solo cuando hay más de un filtro activo)
Contador de resultados
Grid 3 columnas × N filas de miniaturas de testimonio
Tap en una pill de filtro → modal emergente con las opciones de ese filtro.
Tap en un resultado del grid → abre ese testimonio en INS-01 (feed principal).
Componentes reutilizados
Patrón de búsqueda full-screen (compartido con EXP-2.x, con configuración distinta: acá no hay toggle de tipo de contenido, solo se buscan testimonios).
Card de testimonio (versión miniatura, distinta de la versión a pantalla completa de INS-01).
Estados, lógica y datos
Estado inicial (sin búsqueda ni filtros): grid completo de testimonios con orden variado entre visitas — mezcla con criterio suave que evita agrupar testimonios muy similares seguidos, simulando la lógica de curaduría del feed principal. No es random puro.
Con búsqueda o filtros aplicados: grid filtrado + contador arriba.
Sin resultados: mensaje + sugerencia de ampliar la búsqueda.
Estado sin conexión: banner con contenido cacheado.
Se puede llegar acá con el campo de búsqueda pre-cargado por query param: con el nombre de una carrera (desde el tile "Ver más" de EXP-3.5) o con el filtro Favoritos activado (desde "Los que te gustaron" en PERF-02 Mi Ruta).
7 Módulo
Módulo Prepárate
Propósito: módulo pedagógico del programa. Contenido educativo en video organizado en 8 módulos temáticos (Módulo 0 + Módulos 1-7), pausable y retomable, con checkpoints livianos de comprensión al final de cada módulo. El Módulo 3 ("El mapa del mundo profesional") tiene una pantalla adicional de cierre que funciona como puente hacia Explora.
Nota transversal: el Menú fijo de navegación inferior está presente en todas las pantallas del módulo.
PRE-01 — Home Prepárate
Contiene
Listado vertical de los 8 módulos del programa
Cada tarjeta muestra: título del módulo, ícono, indicador de progreso, duración total, cantidad de videos, Botón Iniciar / Continuar
Navegación
Tap en una tarjeta de módulo → PRE-02 del módulo correspondiente.
Componentes reutilizados
Ícono de Notificaciones (→ NOT-01) e Ícono de Perfil (→ PERF-01) en la barra superior derecha.
Estados, lógica y datos
Cada tarjeta muestra uno de 3 estados según el avance del estudiante:
Sin empezar (Botón Iniciar).
En progreso (indicador parcial + Botón Continuar).
Completado (indicador lleno + marca visual).
El orden de presentación de los 8 módulos es una decisión pedagógica, no algorítmica.
PRE-02 — Detalle de módulo
Contiene
Descripción breve del módulo
Duración total
Barra de progreso general del módulo
Botón Descargar módulo
Listado vertical de videos: título, duración, ícono Play
Checkpoint como último ítem del listado (visualmente distinto de los videos)
Navegación
Tap en un video del listado → PRE-03 de ese video.
Los videos ya vistos muestran ícono de Check en lugar de Play.
Botón Descargar módulo tiene 3 estados: no descargado, descargando (con progreso), descargado.
La descarga es a nivel de módulo entero, no por video individual.
PRE-03 — Detalle de video
Contiene
Reproductor de video
Bloque de puntos clave (2-3 líneas que resumen el contenido del video)
Barra de progreso del video
Botón Anterior
Botón Siguiente
Bloque de reflexión al final del video: aparece solo cuando el video termina de reproducirse. Contiene título "¿Qué te llevás de este video?", campo de texto libre con placeholder "Una idea, una duda, algo que te resonó…", Botón Guardar y siguiente, Botón Saltar.
Navegación
Tap en Botón Anterior → PRE-03 del video previo del módulo.
Tap en Botón Siguiente → PRE-03 del video siguiente del módulo.
Si es el último video del módulo, Botón Siguiente → PRE-04.
Estados, lógica y datos
Estado reproduciendo / pausado.
Estado sin conexión + módulo no descargado: mensaje que sugiere descargar el módulo cuando haya wifi disponible.
El progreso del video se guarda automáticamente: al volver, retoma donde quedó.
El Bloque de reflexión es opcional: el estudiante puede saltarlo sin escribir nada.
Las respuestas escritas son privadas del estudiante y alimentan el contexto del chat de Decide como señal adicional de intereses declarados.
Si el estudiante ya respondió una vez y vuelve al video, su respuesta anterior aparece pre-cargada y editable.
PRE-04 — Microtest / Checkpoint
Contiene
Pregunta (formato variable según el checkpoint: opción múltiple, verdadero / falso, drag-and-drop, o texto libre)
Feedback informativo al responder
Botón Continuar
Botón Saltar
Navegación
Tras responder o saltar y tocar Botón Continuar, el destino depende del módulo:
Otros módulos (0, 1, 2, 4, 5, 6, 7): → PRE-02 del mismo módulo.
Estados, lógica y datos
Estado respondido correcto: feedback constructivo positivo.
Estado respondido incorrecto: feedback constructivo explicando la respuesta correcta (sin lógica de aprobado / reprobado).
Estado omitido: si el estudiante tocó Botón Saltar, no se registra respuesta pero el Checkpoint queda marcado como visitado.
El propósito del Checkpoint es verificación pedagógica, no evaluación — siempre hay feedback, nunca hay bloqueo.
Al menos una pregunta por checkpoint debe ser de texto libre (no opción múltiple). Las respuestas de texto libre no se evalúan como correctas o incorrectas — se guardan como reflexión del estudiante y alimentan el contexto de Decide.
PRE-05 — Roles que te resonaron
Propósito específico: cierre del Módulo 3 ("El mapa del mundo profesional"). Convierte lo aprendido en el módulo en una selección personal que sirve como puente hacia Explora y como señal para Decide. Es complementaria al Checkpoint (PRE-04), no lo reemplaza.
Contiene
Encabezado con la pregunta "¿Qué roles te resonaron?"
Cloud de burbujas tocables con roles concretos, expresados como frases de acción
Contador vivo de roles marcados
Nota sugiriendo marcar al menos 3-4 roles (no obligatorio)
Botón Ir a Explora
Navegación
Tap en una burbuja: alterna estado seleccionado / no seleccionado del rol.
Burbuja de rol tocable (componente nuevo compartido).
Estados, lógica y datos
Aparece únicamente al terminar el Checkpoint del Módulo 3, no de los otros módulos.
Cloud de ~40-60 roles concretos (ej. "Cuidar pacientes", "Programar apps", "Enseñar a niños", "Reparar autos") que cubren las 12 áreas de conocimiento del catálogo, distribuidos aproximadamente 4-5 roles por área.
Los roles se muestran mezclados entre áreas de forma deliberada, sin agrupación visual por categoría, para que el estudiante los mire sin prejuicio de origen ("esto es de tecnología, esto es de salud").
El orden se randomiza suavemente en cada visita, con criterio que evita agrupar roles muy parecidos consecutivamente. No es random puro.
Los roles marcados se guardan como intereses declarados del estudiante y alimentan el contexto del chat de Decide (Hito 3, sub-turno de conexión con recorrido).
No obligatorio: el estudiante puede continuar a Explora sin marcar ningún rol. En ese caso la señal simplemente no existe y todo el flujo posterior sigue funcionando.
8 Módulo
Módulo Explora
Propósito: ampliar el mapa mental del estudiante sobre qué carreras existen y dónde estudiarlas. Es el módulo exploratorio del recorrido — expone primero, sin filtrar por lo que el estudiante ya cree que le va, para que descubra opciones que no conocía antes de decidir.
Nota transversal: el Menú fijo de navegación inferior está presente en todas las pantallas del módulo.
EXP-00 — Transversales del módulo
Tabs Carreras / Instituciones. Presente en EXP-1.x (Home) y EXP-2.x (Buscador). Al cambiar de tab, cambia todo el contenido de la pantalla y los filtros aplicables. El tab activo se hereda al navegar entre Home y Buscador.
Ícono de búsqueda (lupa). Presente en la barra superior de EXP-1.x y EXP-2.x. Abre EXP-2.x heredando el tab actual.
Íconos globales de la barra superior. Ícono de Notificaciones (→ NOT-01) e Ícono de Perfil (→ PERF-01) en la esquina superior derecha, presentes en EXP-1.x.
Tabs flotantes tipo TikTok. Patrón de navegación entre tabs dentro de las fichas de carrera (EXP-3.x) y de universidad (EXP-4.x). El tab activo se destaca visualmente y se centra en el viewport. Scroll horizontal si los tabs no entran en el ancho de pantalla. Soporta cantidad variable de tabs (5 en la ficha de carrera, 2 en la ficha de universidad).
Botón flotante Agregar / Comparar / Compartir. Presente en los 5 tabs de la ficha de carrera (EXP-3.x), no en la ficha de universidad.
Botón Agregar: alterna estado agregada / no agregada de la carrera actual.
Botón Comparar: → EXP-6 con la carrera actual precargada.
Botón Compartir: abre share sheet nativo con el link a la ficha.
Card de carrera. Componente reutilizable presente en EXP-1.1, EXP-2.1, EXP-3.1 (Sección de carreras relacionadas), EXP-4.2, EXP-6 y EXP-7. Muestra: ícono del Área de conocimiento, nombre de la carrera, cantidad de universidades que la ofrecen, Botón Agregar. Tiene una variante con línea de "por qué" (usada en la Sección de "Carreras que no te imaginabas" de EXP-3.1).
Card de universidad. Componente reutilizable con 2 variantes según el contexto:
En EXP-2.2 (resultados de búsqueda): nombre, tipo de institución, ubicación, cupos totales disponibles.
En EXP-5 (detalle al tocar un pin del mapa): nombre, tipo de institución, distancia, cupos totales, Botón Ver universidad.
Card de oferta. Componente distinto, específico de EXP-3.4 (Dónde estudiar) — no es una variante de la Card de universidad: representa la combinación carrera × institución × sede, no la institución en sí. Muestra: nombre oficial de la carrera en esa institución, grado, modalidad, ubicación, duración; enlaces a Requisitos, Institución y Web oficial. No incluye costo ni cupos (son datos de la institución, viven en su ficha).
EXP-1.1 — Tab Carreras (Home)
Contiene
Sección 1: Áreas de conocimiento
Sección 2: Tus carreras
Sección 3: Carrera destacada del mes
Navegación
Tap en un Área de conocimiento (Sección 1) → EXP-2.1 con filtro de área preseleccionado.
Tap en una Carrera (Sección 2) → EXP-3.1 de esa carrera.
Las Carreras están agrupadas por nombre, no por universidad: una carrera dictada en 3 universidades es 1 sola Card.
Los niveles de título NO se fusionan: "Enfermería Técnica" y "Enfermería Universitaria" son Cards distintas.
Cuando un filtro depende de datos por-universidad (ej. modalidad), la Card aparece si al menos una universidad cumple, mostrando un contador honesto ("3 de 10 universidades ofrecen esta modalidad").
Estado sin búsqueda ni filtros: placeholder + listado completo con paginación.
Con filtros y sin resultados: mensaje + muestra las 12 Áreas de conocimiento como forma de re-empezar.
Estado sin conexión: banner con contenido cacheado.
EXP-2.2 — Buscador — Tab Instituciones
Contiene
Campo de búsqueda con placeholder "Buscá una universidad"
Card de carrera y variante con línea "por qué" (ver EXP-00).
Modal expandible "Conocé la carrera en profundidad": contenido curado en 5 bloques (de qué se trata, día a día estudiándola, pensum general, ¿es para vos?, cierre-puente a testimonios). Ya construido — ver components/shared/carrera-detalle-modal.tsx.
Estados, lógica y datos
La antigua Sección 2 "El mercado laboral" se movió a EXP-3.3 como pantalla propia — ver esa pantalla para el detalle completo de los 5 campos (salario, conseguir trabajo, demanda futura, hacia dónde crecer, impacto de la IA).
El enlace "Conocé la carrera en profundidad" solo se muestra en carreras con contenido curado para el modal (campo detalleAcercaDe poblado en el mock de datos). Si no existe, el enlace no aparece — fallback silencioso. Hoy poblado para Ingeniería en Sistemas Informáticos y Licenciatura en Enfermería; el resto de las carreras no lo muestra todavía.
EXP-3.2 — Ficha de carrera — Pensum
Contiene
Tabs flotantes tipo TikTok (Pensum activo)
Botón flotante Agregar / Comparar / Compartir
Duración aproximada de la carrera
Grupos de materias: listado de 5-8 grupos temáticos que componen el pensum general de la carrera
Perfil de la carrera: 5-6 descriptores cualitativos con ícono
Comparación técnica vs. profesional (si aplica): duración y título de cada nivel lado a lado
Nota al pie: "El pensum específico varía según la universidad. En el Tab Dónde estudiar podés ver qué universidades ofrecen esta carrera y consultar su pensum detallado."
Los descriptores del Perfil de la carrera son cualitativos, no numéricos ("Alto componente de ciencias biológicas", "Fuerte carga práctica en hospitales", "Mucha lectura comprensiva"), no barras de progreso ni porcentajes.
EXP-3.3 — Ficha de carrera — Mercado laboral
Contiene
Tabs flotantes tipo TikTok (Mercado laboral activo)
Botón flotante Agregar / Comparar / Compartir
Gráfico de progresión salarial con banda de rango
Conseguir trabajo (espectro visual + frase de contexto)
Gráfico de progresión salarial: componente SVG con dos líneas (mínimo y máximo) y área sombreada entre ellas, con 4 puntos temporales (Al egreso, 3 años, 5 años, 10 años). Es específico de esta pantalla por ahora, aunque podría reusarse en EXP-6 (comparador) para consistencia visual.
Estados, lógica y datos
Esta pantalla aplica el principio "nunca etiqueta sola, siempre frase de contexto":
Salario: rangos por punto temporal en el gráfico, no un número exacto.
Conseguir trabajo: valor 0-100 posiciona un marcador entre "Suele ser rápido" y "Puede tomar más tiempo", más frase explicativa del motivo de mercado (ej. "Hay pocos egresados para la demanda del mercado").
Demanda futura: uno de 3 valores (En crecimiento / Estable / En transformación — deliberadamente no "decreciente") + frase.
Hacia dónde crecer: 3-4 roles alcanzables con experiencia, presentados como texto o chips.
Impacto de la IA: uno de 3 valores (Bajo / Moderado / Alto — con la palabra "Impacto", no "Riesgo") + frase que aclara que el trabajo se transforma, no desaparece.
EXP-3.4 — Ficha de carrera — Dónde estudiar
Contiene
Tabs flotantes tipo TikTok (Dónde estudiar activo)
Botón flotante Agregar / Comparar / Compartir
Pill de modalidad, selección única: Presencial / Semipresencial / Virtual
Listado de Cards de oferta (institución × sede que ofrece esta carrera)
Enlace al mapa
Navegación
Tap en un tab flotante → tab correspondiente.
Tap en la Pill de modalidad: filtra el listado de ofertas.
Tap en una Card de oferta → EXP-4.1 de esa universidad.
Colores de pin diferenciados según Tipo de institución.
Estado sin filtros: mapa centrado en la ubicación del estudiante, mostrando todas las universidades con convenio DI.
Con filtros y sin resultados: mensaje flotante + sugerencia de ampliar zona o quitar filtros.
Estado sin conexión: banner con contenido cacheado.
EXP-6 — Comparador de carreras
Contiene
Hasta 3 slots de carreras seleccionadas
Botón Agregar carrera en cada slot vacío
Botón Quitar (X) en cada carrera seleccionada
Tabla comparativa con las siguientes filas: Grado, Duración, Salario al egreso, Salario a 3-5 años, Demanda futura, Impacto de la IA, Empleabilidad, Tiempo estimado para empleo, Tipos de empresas que contratan
Navegación
Tap en Botón Agregar carrera → abre selector desde EXP-7 (Carreras agregadas) o desde EXP-2.1 (Buscador).
Tap en Botón Quitar (X): remueve esa carrera del comparador.
Botón Volver → pantalla de origen (EXP-3.x o EXP-7).
Estados, lógica y datos
Con 1 o 2 carreras: invita a agregar la tercera con placeholder visible en el slot vacío.
Con 3 carreras: comparación completa, Botón Agregar carrera oculto o deshabilitado.
La comparación es efímera: al salir, no se guarda. Si el estudiante quiere volver a comparar, la vuelve a componer.
EXP-7 — Carreras agregadas
Contiene
Listado vertical de las Carreras agregadas por el estudiante, ordenado por fecha (más reciente primero)
Botón Quitar en cada Card
Botón Comparar arriba del listado
Navegación
Tap en una Card de carrera → EXP-3.1 de esa carrera.
Tap en Botón Quitar: remueve esa carrera de la lista personal.
Tap en Botón Comparar → EXP-6 con las 3 Carreras más recientes preseleccionadas.
Estado vacío: mensaje "todavía no agregaste ninguna carrera" + CTA a Explora (EXP-1.1).
9 Módulo
Módulo Decide
Propósito: módulo de cierre del recorrido. Reescrito por completo ("v2") respecto a versiones anteriores de este documento: en vez de un chat único con dos tabs, hoy son tres conversaciones guionadas secuenciales — Qué estudiar, Dónde estudiar, Pasos siguientes. La vista de síntesis (antes "Lo tuyo", accesible desde un menú "⋮" propio de Decide) se fusionó con la vieja "Mi Progreso" de Perfil en una sola pantalla, "Mi Ruta" (ver PERF-02), a la que se entra tanto desde el header de Decide como desde Perfil. El estudiante sale con 2-3 carreras priorizadas, un argumento propio para conversar con su familia, dónde y cuánto cuesta estudiarlas, y un plan de próximos pasos.
Cada conversación se renderiza completa de una vez — no hay motor de turno a turno ni "escribiendo…" en el prototipo actual — a propósito, para que el recorrido completo se pueda leer de punta a punta en una reunión con stakeholders. Los fundamentos conceptuales del motor (dimensiones del perfil, catálogo de carreras, lógica de match, mecanismos anti-sesgo) y el flujo conversacional completo con todas sus ramificaciones viven en el documento maestro — ver banner debajo.
Flujo del módulo Decide. Cada conversación produce un artefacto que el
estudiante conserva; los tres persisten en Mi Ruta. La derivación a triage humano está disponible
en cualquier punto del flujo — la plataforma reconoce cuándo no debe seguir sola.
¿Por qué Decide es una conversación y no un test?El diseño del módulo en versión ejecutiva: los tres momentos donde se juega su valor,
los mecanismos que lo separan de un matcher y las cinco condiciones para implementarlo.
Nota transversal: el Menú fijo de navegación inferior está presente en todas las pantallas del módulo.
DEC-00 — Transversales del módulo
Header + fila de tabs. Presente en DEC-01, DEC-02 y DEC-03. El header muestra el título "Decide" y, a la derecha, un link directo "Mi ruta" (ícono + texto, mismo tratamiento visual que los accesos de Notificaciones/Perfil) → PERF-02. Ya no hay menú "⋮": las dos opciones que tenía antes ("Conversaciones anteriores", placeholder decorativo sin interacción real; "Solicitar orientación personal", redundante con la oferta de triage dentro del propio chat) se retiraron — con un solo destino real, un link directo es más honesto que un menú. Debajo del header, una fila de tabs (mismo componente que las tabs de la ficha de carrera de Explora) con las 3 conversaciones — Qué estudiar / Dónde estudiar / Pasos siguientes —, con un ícono de flecha (›) a la derecha de cada tab salvo el último. Tocar una conversación ya completada la reabre en solo lectura; tocar una bloqueada muestra un aviso breve "Se abre cuando termines la anterior" sin navegar.
No incluye "Ayuda" — a propósito, ya vive solo en PERF-01.
Barra de texto libre. Al final de cada una de las 3 conversaciones, una barra de input fija permite seguir escribiendo después de que el guión termina — cualquier mensaje recibe la misma respuesta enlatada ("anotado, gracias por seguir contándome…"), para que la pantalla no se sienta muerta al final de la demo.
Datos que Decide consume del resto de la app.
Roles marcados en PRE-05: intereses declarados en el cierre del Módulo 3.
Likes de Inspírate: testimonios marcados con Like.
Carreras agregadas en Explora: la lista personal del estudiante.
Perfil del estudiante: nombre, zona de residencia.
DEC-01 — C1 Qué estudiar
Contiene
Conversación completa renderizada de una vez: burbujas del bot y de la estudiante, cards de candidatas (Ronda 1 de 3 + Ronda 2 opcional de 2), Declaración de Identidad Vocacional inline, CTA de cierre
Card de candidata (Decide): posición reordenable por drag, tag opcional de "opción comodín" o "otro mundo", argumento textual, atributos rápidos (nivel, duración, modalidad — nunca sede específica), Botón Quitar, Botón Ver ficha completa.
Card de Declaración de Identidad Vocacional (formato editorial).
Header + fila de tabs, link "Mi ruta" (ver DEC-00).
Estados, lógica y datos
Guión pre-cargado siguiendo el recorrido de un perfil ficticio (contexto rural) — no hay motor de IA real todavía. Ver el guión completo, turno por turno, en el documento maestro.
Al completar (llegar al CTA de cierre) desbloquea DEC-02 en la lógica de estado — hoy esa lógica está desactivada temporalmente (ver Estado del trabajo): las 3 conversaciones son libremente accesibles desde la fila de tabs.
Reordenar / quitar candidatas y pedir una carrera de Ronda 2 actualizan el estado compartido del módulo, que DEC-02 y PERF-02 reflejan.
DEC-02 — C2 Dónde estudiar
Contiene
Conversación completa renderizada de una vez, con cards de oferta por cada carrera de la terna (sede, modalidad, traslado, costo desglosado, requisitos, inscripciones)
Calculadora de presupuesto (sliders de pasaje diario y días por semana + toggle Almuerzo: llevo de casa / compro allá) con total mensual
Barra de texto libre al final
Navegación
Tap en Ver ficha (card de oferta, cuando la carrera no es de contenido de ejemplo) → EXP-3.4 de esa carrera.
Card de oferta (específica de Decide — combinación carrera × sede × modalidad × costo; distinta del componente que usa EXP-3.4 para el mismo propósito en Explora).
Header + fila de tabs, link "Mi ruta" (ver DEC-00).
Estados, lógica y datos
Abre citando la terna elegida en DEC-01 y la restricción de distancia declarada ahí, si aplica.
Al completar, guarda la oferta elegida por carrera + el presupuesto mensual en el estado compartido — PERF-02 los lee de ahí. El número guardado es el resultado fijo del guión, no un cálculo en vivo de la interacción con el slider.
DEC-03 — C3 Próximos pasos
Contiene
Card de documento de la Conversación con la familia (carátula con la Declaración de DEC-01 + terna + presupuesto + requisitos), con acciones Ver completo / Descargar / Compartir por WhatsApp
Turnos de ensayo (role-play con la familia), visualmente distintos de las burbujas normales
Checklist de pasos hacia la matrícula, que se actualiza a mitad de la conversación
Separador narrativo ("unos días después") entre el ensayo y el retorno del estudiante tras hablar en su casa
Card de documento de la Conversación con la familia (reusa el mismo overlay de previsualización que PERF-02).
Checklist de pasos (componente nuevo, específico de esta pantalla).
Header + fila de tabs, link "Mi ruta" (ver DEC-00).
Estados, lógica y datos
Al completar, marca las 3 conversaciones como terminadas y habilita la Conversación con la familia en PERF-02.
10 Módulo
Módulo Perfil
Propósito: espacio donde el estudiante consulta y edita sus datos personales, gestiona su acceso, revisa su progreso general en la plataforma, y accede a configuraciones y ayuda.
PERF-01 — Mi Perfil
Contiene
Sección 1: Tu progreso — card con "N de M módulos" de Prepárate + barra de avance + enlace Ver mi ruta completa
Sección 2: Datos personales (nombre, correo, teléfono, zona / departamento), de solo lectura — el botón de edición existe visualmente pero está deshabilitado a propósito (todavía no hay edición real)
Sección 3: Cuenta — agrupa Cambiar contraseña y Ayuda y preguntas frecuentes
Sección 4: Contacto de la D.I. (teléfono)
Sección 5: Botón Cerrar sesión
Navegación
Tap en Ver mi ruta completa (Sección 1) → PERF-02.
BackButton en la barra superior (→ pantalla de origen).
Estados, lógica y datos
No hay pantalla de configuración de notificaciones por tipo/canal — ver nota en NOT-01.
PERF-02 — Mi Ruta
Fusiona lo que antes eran dos pantallas parecidas y separadas — la vieja "Mi Progreso" de Perfil y "Lo tuyo" de Decide — en una sola historia: dónde va el estudiante y qué cosechó en cada estación. Se entra desde dos lugares: el link "Ver mi ruta completa" en PERF-01, o el link "Mi ruta" en el header de Decide (ver DEC-00).
Contiene
Intro: "N meses en tu ruta" + descriptor ("Empezaste el {fecha}. Vas por el {ordinal} de {N} módulos."), sin card ni fondo propio.
Timeline vertical de 4 estaciones (Inspírate → Prepárate → Explora → Decide), unidas por una línea conectora, cada una con un círculo de estado (completada / activa / pendiente) y los artefactos de esa estación embebidos adentro, en vez de repetirlos en una pantalla aparte:
Inspírate: cantidad de testimonios vistos +, si hay likes registrados, "Los que te gustaron" en scroll horizontal + link Ver todos.
Prepárate:badge "Acá estás" si es la estación activa, barra de avance, "N de 8 módulos · seguís en {módulo actual}", chips "Roles que te llamaron" (marcados en PRE-05), Botón Continuar.
Explora: cantidad de vistas y de carreras guardadas, hasta 3 Cards de carrera guardada en variante compacta, Botón Ver todas.
Decide: antes de completar C1, estado + Botón Ir a Decide / Seguir en Decide; tras completar C1, "Lo que contaste" (chips con frases textuales) + "Tu terna" (las 3 Cards de candidata en variante compacta, reordenables) + Botón Seguir en Decide (oculto una vez completada C3).
Sección "Documentos": Presupuesto y Conversación con la familia, cada uno bloqueado con candado hasta terminar la conversación correspondiente (DEC-02 y DEC-03 respectivamente). Los títulos de esta sección van en el navy de los encabezados, no en azul de link, porque no son tocables.
Sección "Momentos": línea de tiempo simple con hitos del recorrido y su fecha (ej. "Completaste tu primer módulo", "Agregaste tu primera carrera", "Tuviste tu primera conversación en Decide").
Navegación
Tap en BackButton → pantalla de origen (PERF-01 o Decide, según por dónde entró).
Tap en Botón Continuar (estación Prepárate) → PRE-02 del módulo en curso.
Tap en Botón Ver todas (estación Explora) → EXP-7.
Tap en Botón Ir a Decide / Seguir en Decide (estación Decide) → Decide, entra directo a la conversación activa.
Tap en Ver todos (testimonios que te gustaron) → INS-04 con el filtro de favoritos aplicado.
Tap en una Card de la terna → EXP-3.1 de esa carrera.
Componentes reutilizados
BackButton.
Card de carrera, variante compacta (estación Explora).
Card de testimonio en miniatura (misma que en INS-04).
Card de candidata (Decide), variante compacta.
Card de documento de la Conversación con la familia (ver DEC-03).
Estados, lógica y datos
No hay Resumen narrativo generado dinámicamente ni barras de porcentaje/gauges por estación (salvo Prepárate, que sí muestra una barra de avance) — se prioriza mostrar los artefactos concretos de cada estación por sobre un resumen calculado.
Los testimonios que te gustaron leen en vivo del registro de Likes de Inspírate (persistido localmente). Roles marcados y frases de "lo que contaste" son estáticos por ahora — no leen de otros módulos en vivo (decisión de alcance del prototipo actual, ver Estado del trabajo).
Documentos: Presupuesto se habilita al completar DEC-02; Conversación con la familia al completar DEC-03. Antes de eso, cada uno muestra un candado con el texto de qué falta.
Curaduría no negociable: nunca se muestran moduladores internos del motor (dispersión, pesos de match) — solo señales y artefactos que el estudiante ya vio en algún lugar de la app.
Estado sin conexión: banner con contenido cacheado.
Tap en Botón Guardar cambios con datos válidos: mensaje de éxito + retorno automático a PERF-01 en 1-2 segundos.
Componentes reutilizados
BackButton.
Estados, lógica y datos
Estado vacío: Botón Guardar cambios deshabilitado.
Estado contraseña actual incorrecta: mensaje de error inline.
Estado nueva contraseña débil: validación en vivo (mínimo 6 caracteres, mismo criterio que REG-06).
Estado confirmación no coincide: mensaje inline en Campo Confirmar nueva contraseña.
Estado éxito: mensaje breve + retorno automático.
11 Módulo
Módulo Notificaciones
Propósito: centro de comunicación asincrónica de la plataforma con el estudiante. Notifica cambios relevantes (nuevas carreras aliadas, deadlines próximos, inactividad, actualizaciones en Decide).
NOT-01 — Centro de notificaciones
Contiene
Listado vertical de notificaciones agrupadas por tipo
Cada notificación muestra: tipo, fecha, texto, indicador de leída / no leída
Botón Borrar todas en el header (visible solo si hay al menos una notificación)
Tap en una notificación: la marca como leída y navega a la pantalla relacionada según el tipo de notificación.
Tap en Botón Borrar todas: vacía el listado (con confirmación).
Componentes reutilizados
BackButton.
Estados, lógica y datos
Tipos de notificación:
Nueva carrera aliada agregada al catálogo de becas.
Fecha próxima: evento de Inspírate o deadline del Proceso Formativo.
Inactividad: recordatorio suave cuando el estudiante hace tiempo que no vuelve.
Actualización en Decide: nueva priorización tras una sesión.
Aviso general: publicado por la DI o el BID para toda la audiencia, sin cruce con el estado individual del estudiante.
Estado vacío: mensaje "no tenés notificaciones por ahora".
Nota: no existe una pantalla de configuración por tipo/canal (in-app/WhatsApp) — se evaluó y se sacó del alcance (2026-07-31): no aporta suficiente valor frente al toggle nativo de notificaciones que ya ofrece iOS/Android.
12 Módulo
Módulo Ayuda
Propósito: resolver las dudas frecuentes del estudiante sin depender del contacto humano directo. Es un FAQ curado por la DI, no un buscador de texto libre ni un chatbot.
AYU-01 — Ayuda / FAQ
Contiene
Listado de preguntas frecuentes agrupadas por tema (registro, becas, uso de la app), colapsables
Botón No encontré mi respuesta, contactar a la DI
Enlace Re-ver el video introductorio
Navegación
Tap en una pregunta: expande la respuesta correspondiente.
Tap en Botón No encontré mi respuesta → PERF-01 (Sección de contacto con la DI).
Tap en BackButton → PERF-01 (origen fijo, no dinámico: es el único lugar real desde donde se entra hoy).
Componentes reutilizados
BackButton.
Estados, lógica y datos
15-20 preguntas totales, agrupadas en 3-4 temas.
3-5 preguntas marcadas internamente como "de interés general" — sin diferenciación visual en esta pantalla, sirven como fuente para la Card 3 (Descubre) de INI-01.
Sin buscador de texto libre — decisión de alcance por bajo volumen esperado. Si el volumen crece a 100+ preguntas en fases posteriores, se reevalúa.
Además del botón dedicado en PERF-01, se llega acá también al agotar los intentos de código en REG-05.
13 Cierre
Estado del trabajo
Sección consolidada de decisiones pendientes, propuestas por validar, huecos de implementación y funcionalidades fuera del alcance MVP. Todo lo que en versiones anteriores del documento vivía disperso en blockquotes dentro de cada pantalla se agrupa acá.
🔴 Decisiones sin propuesta todavía
Bloquean o condicionan la implementación de una pieza puntual. Requieren definición externa antes de avanzar.
Lógica de cuenta: ¿se crea automáticamente al match con NIE/DUI, o requiere contraste adicional? ¿La plataforma es sólo para becados o también para no becados? ¿Existe ingreso sin login para ver EXP-1.x?
Protocolo del triage humano (oferta universal en H.4): SLA de respuesta, volumen que pueden absorber los orientadores, protocolo para angustia socioemocional significativa
Fuente real de datos de oferta (institución × sede × costo × requisitos) para reemplazar el contenido de ejemplo actual — depende del catálogo enriquecido
DI + Continuum
🟡 Propuestas pendientes de validar
Ya tienen una dirección de diseño definida. Falta confirmarla con la contraparte responsable.
Home post-Decide: carreras ancladas a las capacidades del estudiante una vez completado el módulo Decide. No antes — rompería la secuencia exploratoria
