Bloque 01 · Acceso
Autenticación común.
Registro con RFC como identificador único, confirmación de correo, login y recuperación de contraseña. Compartido por expositores (Flujo 1) y solicitantes (Flujo 2).
01Auth
Registro de usuario
RFC + datos de contacto + creación de cuenta. Validaciones inline.
02Auth
Confirmación de correo
Pantalla bloqueante post-registro · cooldown de 45 s · correo enmascarado.
03Auth
Inicio de sesión
RFC + contraseña + recordarme · bloqueo a 5 intentos.
04Auth
Recuperar contraseña
Dos vistas conmutables: solicitar enlace → enviado.
05Auth
Crear nueva contraseña
Strength meter de 4 segmentos · lista de requisitos en vivo · estado "enlace caducado".
Bloque 02 · Dashboard usuario
Mi panel y datos de empresa.
Centro del usuario y captura de datos fiscales. Comparten ambos flujos. La pantalla 07 tiene variante F1/F2 con sección extra de "Vinculación UNAM".
06Dashboard
Mi panel · dashboard
2 estados: trámite activo (status + CTA) · vacío (choice cards F1/F2).
07Empresa
Datos de empresa
~25 campos · 4–5 secciones colapsables · TOC sticky · autosave · variante UNAM con badge "Validado por Administrador".
08Detalle
Detalle de mi solicitud
Timeline vertical de 5 pasos · estados done/active/pending/rejected · 3 vistas (activo, rechazado, F2).
Bloque 03 · Flujo 1
Compra de stand.
Flujo lineal de 4 pasos para editoriales · selección de tipo (equipado / sin equipar), captura de editoriales representadas y pago manual.
09F1 · Paso 2
Selección de stand
Dos cards con ilustración SVG · banner tarifas · cornisa preview en vivo · cálculo sticky.
10F1 · Paso 2b
Stand sin equipar · documentos
4 estados del uploader: empty · uploading (progreso) · loaded (thumb) · error.
11F1 · Paso 3
Editoriales · modo formulario
Counter 1–70 · cards acordeón · tag-input de temáticas · términos legales.
12F1 · Paso 3b
Editoriales · modo planilla
3 pasos: descargar plantilla → subir → validar · tabla con errores celulares + KPI strip.
13F1 · Paso 4
Pago F1
3 estados: esperando línea de captura · línea disponible · comprobante rechazado.
Bloque 04 · Flujo 2
Solicitud de espacio cultural.
Para dependencias UNAM · proceso iterativo con hasta 3 rondas de negociación con el coordinador · finaliza con T&C y pago.
14F2 · Paso 2
Tres opciones de horario
3 bloques comparables con día/hora/salón · marcar preferida exclusiva.
15F2 · Paso 3
Actividad y publicación
Títulos con separador "/" · personas dinámicas (autores · coordinadores · moderador · participantes).
16F2 · Estado
Estado · ciclo de aprobación
Timeline iterativo + 6 estados conmutables · historial de negociación.
17F2 · Modal
Propuesta del administrador
Modal de decisión · comparación lado a lado · aceptar / rechazar con consecuencias claras.
18F2 · T&C
Términos y condiciones
Documento con scroll · barra de progreso de lectura · checkbox obligatorio.
19F2 · Edición
Editar evento aprobado
Dos secciones: edición directa (verde) vs requiere nueva aprobación (vino) · 2 CTAs separados.
20F2 · Paso 5
Pago Flujo 2
Reusa patrón pago F1 · resumen con datos del evento · tarifa Editorial vs UNAM preferente.
Bloque 05 · Back office · Administrador
Operación del coordinador.
11 pantallas para gestionar todo el ciclo: revisar solicitudes, aprobar/proponer, mantener matriz de horarios, gestionar catálogos, generar reportes y gafetes, validar dependencias UNAM y auditar todo.
21BO · Login
Acceso al back office
Login institucional sobrio · 2 columnas con cita serif y entorno marcado.
22BO · Inicio
Dashboard del admin
5 KPIs · tabla "Requieren tu atención" · actividad reciente · próximos eventos.
23BO · Bandeja
Bandeja de solicitudes
Tabs F1/F2 · filtros · búsqueda · paginación · bulk · drawer de export XLS/CSV.
24BO · Detalle F1
Detalle stand (F1)
Datos completos + 3 documentos del stand sin equipar + aprobar/rechazar con observaciones.
25BO · Detalle F2
Detalle evento (F2)
Pantalla estrella: 3 opciones con disponibilidad · aprobar una o proponer alternativa · ciclo de aprobación.
26BO · Matriz
Matriz de horarios
Calendario semanal de 10 salones × 7 días · estados libre/ocupado/propuesta/bloqueado + Uso FIL y "por confirmar".
27BO · Catálogos
Catálogos del sistema
CRUD de salones · áreas · secciones · tipos de actividad · tarifas de stands.
28BO · Reportes
Constructor de reportes
26 campos seleccionables · filtros · preview · export XLS/CSV con plantillas guardadas.
29BO · Gafetes
Personificadores · gafetes
Eventos → lista de personas → preview de gafete impreso → generar PDF imprimible.
30BO · Log
Log de aprobaciones
Bitácora de auditoría densa · filtros · transición before→after · 5 años de retención.
31BO · Usuarios
Usuarios + validación UNAM
Tabla de cuentas · panel destacado para validar/rechazar dependencia UNAM.
Bloque 06 · Back office · Contador
Operación de pagos.
Rol con acceso reducido · solo gestiona la operación de pagos manuales. Sidebar visualmente diferenciado en azul tinta.
32Contador · Inicio
Dashboard del contador
3 KPIs de pago · tabla de tareas pendientes · actividad reciente · SLA semanal.
33Contador · Línea
Carga de línea de captura
Datos solicitud · upload PDF · folio bancario · fecha límite · preview del correo al usuario.
34Contador · Validar
Validación de comprobantes
Bandeja + comparador lado a lado (línea vs comprobante) · validar/rechazar + carga de factura.
Bloque 07 · Flujo 3 · Invitado con acceso propio
Invitados con acceso propio.
El administrador crea el perfil y asigna salones · el invitado activa su cuenta y programa eventos dentro del universo de disponibilidad asignado · sin costo.
38F3 · Activación
Activar cuenta · invitado
Pantalla pública del enlace de correo · crear contraseña · estado de link caducado.
39F3 · Panel
Mi panel · invitado
Salones asignados como cards grandes · KPIs · eventos próximos · CTA programar.
40F3 · Programar
Programar evento filtrado
Picker de salón asignado + mini matriz semanal con disponibilidad real · duración ≥ 50 min.
41F3 · Mis eventos
Eventos programados
Lista lateral + detalle editable · personificadores · botón cancelar con modal de confirmación.
42F3 · BO Listado
Invitados con acceso · BO
Tabla con estatus de cuenta (activa/pendiente/caducada) · salones asignados · reenviar correo.
43F3 · Perfil + asignar
Perfil + asignación de salones
Multi-select de salones que define el universo de disponibilidad · acciones de cuenta del invitado.
Bloque 08 · Flujo 4 · Invitado administrado
Invitados administrados.
Eventos sin cuenta de usuario · el administrador captura todos los datos del invitado y asigna día, hora y salón específicos desde la matriz · sin costo.
Bloque 09 · Patrones móviles · iOS / Android
Versión móvil.
7 pantallas exemplares que demuestran el sistema completo móvil (bottom nav, drawer, sticky CTAs, modales full-screen, timeline vertical). El equipo de desarrollo extrapola las 35 restantes a partir de estos patrones. Ver plataforma/mobile/README.md.
M1Móvil · Auth
Login móvil
Shell hero institucional · tabs RFC/correo · inputs ≥ 16px (sin zoom iOS) · safe areas.
M2Móvil · Panel
Mi panel · bottom nav
4 tabs fijos (Inicio · Trámite · Avisos · Yo) · status card · quick actions · notifs.
M3Móvil · Estado
Timeline vertical
Estado de solicitud F2 · timeline vertical compacto · alerta CTA · info card sticky abajo.
M4Móvil · Modal
Propuesta admin · full screen
Modal de decisión a toda pantalla · cita serif · comparación stacked · sticky CTAs aceptar/rechazar.
M5Móvil · Pago
Pago móvil
Monto destacado 56px serif · captura card · 2 uploaders verticales · sticky submit con disabled.
M6Móvil · Invitado F3
Panel invitado
Badge dorado de invitado · 3 stats compactos · cards de salones asignados con CTAs por card.
M7Móvil · BO
BO dashboard · hamburger
Drawer lateral con todas las opciones · KPIs verticales · solicitudes como cards (sin tabla).
Notas de revisión
Cómo navegar este prototipo.
Lo que ves es alta fidelidad pero no es código de producción. Cada pantalla incluye datos ficticios coherentes para mostrar los estados; los toggles "Variante" en la esquina inferior izquierda muestran los estados alternativos.
§
Demo toggles · alternar estados · varias pantallas tienen un toggle flotante para conmutar estados (vacío, con datos, rechazado, etc.). Aparece en la esquina inferior izquierda con la etiqueta
Logos y datos institucionales · todos son placeholders representativos. El cliente proveerá los oficiales antes del desarrollo.
VARIANTE o ESTADO. Logos y datos institucionales · todos son placeholders representativos. El cliente proveerá los oficiales antes del desarrollo.