# Rebelocity Club — Documentación de diseño y mockups

> Carpeta de trabajo del equipo de producto de Rebelocity Club.
> Contiene los mockups interactivos HTML, el sistema de diseño y la documentación de flujos.
> Última actualización: julio 2026

---

## ¿Qué es Rebelocity Club?

Plataforma de comunidad deportiva enfocada en triatlón, running y ciclismo. Permite a atletas, coaches y clubs conectarse, organizarse y participar en eventos.

**Funcionalidades principales del producto:**
- Perfil de atleta con sistema de puntos de lealtad
- Directorio de miembros: atletas, coaches y clubs
- Sistema de eventos con registro e inscripción
- Mensajería entre atletas, coaches y clubs
- Sistema de relay: formación y gestión de equipos para triatlón relay
- Sherpa IA: asistente de entrenamiento personalizado
- Membresía y foros (en desarrollo)

**Idioma:** Español (México)

---

## Cómo usar esta carpeta

Los mockups son archivos HTML que se abren directamente en el navegador. No requieren instalación ni servidor. Cada archivo es autocontenido (CSS y JS incluidos).

**Para abrir un mockup:** doble clic sobre el archivo `.html`, o arrástralo a una ventana del navegador.

**Para navegar entre temas:** cada mockup tiene botones Dark / Light en la esquina superior izquierda.

**Para simular flujos:** los mockups de mensajería tienen controles en la barra superior (Anterior / Siguiente, y toggles para simular la respuesta de la otra parte).

---

## Mapa de archivos

### Documentación

| Archivo | Para quién | Contenido |
|---|---|---|
| `README.md` | Todos | Este archivo. Portada e índice del proyecto |
| `DESIGN-SYSTEM-RCH.md` | Diseño y desarrollo | Tokens de color, tipografía, espaciado y todos los componentes con su CSS |
| `SPEC-FLUJOS-RCH.md` | Producto, diseño y desarrollo | Flujos de usuario paso a paso: qué hace cada botón, qué pasa en cada estado |
| `DECISIONES-RCH.md` | Todos | Registro de decisiones de diseño y producto con el razonamiento detrás de cada una |
| `FLUJOS-DIRECTORIO-PARA-GUS.md` | Desarrollo | Mapa de mockups por tab del directorio (Atletas, Coaches, Clubs) para implementar los flujos de contacto |
| `CLAUDE.md` | Solo el asistente IA | Contexto de arranque para el asistente. No es documentación para el equipo |

---

### Mockups — Perfil

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Perfil-v01.html` | Vista de perfil del usuario — tema dark ✅ validado |
| `MOCKUP-RCH-Perfil-v01-light.html` | Vista de perfil del usuario — tema light ✅ validado |

El perfil tiene tres tabs: **Perfil** (formulario de datos), **Sherpa IA** (asistente de entrenamiento) y **Membresía** (plan y puntos). Si el usuario tiene rol Coach, aparece un cuarto tab: **Mi club**.

> **Importante:** Perfil no es solo una vista más — es la **fuente canónica de datos** para todo el Directorio. Ningún campo puede aparecer en una tarjeta o modal del Directorio si no existe primero en el formulario de Perfil (ver `SPEC-FLUJOS-RCH.md` §9.1 y `FLUJOS-DIRECTORIO-PARA-GUS.md`).

---

### Mockups — Directorio

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Directorio-v01.html` | Directorio de miembros con cuatro tabs: Atletas, Coaches, Clubs, Organizaciones. Incluye filtros, grid de tarjetas y modal de detalle |

Al hacer clic en un coach desde el directorio, aparece el botón "Contactar al coach" que inicia el flujo de mensajería. Al hacer clic en un club, aparece "Enviar mensaje". Al hacer clic en un atleta con badge "Busco equipo", aparece "Contactar para relay" e inicia el flujo de contacto 1:1 para relay. Atletas sin ese badge no muestran botón de contacto (backlog).

**Tab Organizaciones (nuevo):** agrupa los roles Organizador y Marca (ya definidos en Perfil → "Rol en el ecosistema") en su propio tab, con tarjetas, filtro de país + tipo (Organizador/Marca), y modal de detalle. CTA "Enviar mensaje" — mismo patrón que Clubs, sin flujo de contacto diferenciado definido aún.

---

### Mockups — Eventos

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Eventos-v01.html` | Tres vistas: formulario de alta de evento (admin), directorio de eventos (filtros/búsqueda/orden funcionales) y detalle/registro de evento (atleta) |

---

### Mockups — Mensajería con coach

Flujo completo en dos POVs (puntos de vista):

| Archivo | POV | Pasos | Descripción |
|---|---|---|---|
| `MOCKUP-RCH-Mensajes-Coach-v01.html` | Ángeles (atleta) | 4 | Atleta redacta → envía → espera → ve respuesta del coach |
| `MOCKUP-RCH-Mensajes-Javier-v01.html` | Javier Ríos (coach) | 3 | Coach recibe solicitud → acepta o rechaza → chat activo |

**Toggle de simulación:** en el POV del atleta aparece desde el paso 3 ("Javier acepta / rechaza"). En el POV del coach aparece desde el paso 1.

---

### Mockups — Mensajería con club

Flujo completo en dos POVs:

| Archivo | POV | Pasos | Descripción |
|---|---|---|---|
| `MOCKUP-RCH-Mensajes-Club-v01.html` | Ángeles (atleta) | 3 | Atleta redacta → envía → chat abierto para conocerse |
| `MOCKUP-RCH-Mensajes-ClubAdmin-v01.html` | Laura M. (admin del club) | 3 (acepta) / 2 (rechaza) | Admin recibe mensaje → abre chat o rechaza → conversación |

**Principio clave:** que el admin abra el chat no convierte al atleta en miembro. La membresía se gestiona por separado desde el panel de miembros del club.

---

### Mockups — Contacto 1:1 entre atletas (relay)

Flujo completo en dos POVs — reclutamiento para armar equipo de relay:

| Archivo | POV | Pasos | Descripción |
|---|---|---|---|
| `MOCKUP-RCH-Mensajes-v01.html` | Ángeles (atleta que inicia) | 4 | Atleta elige su disciplina, redacta → envía → espera → ve respuesta |
| `MOCKUP-RCH-Mensajes-Carlos-v01.html` | Carlos Mendoza (atleta que recibe) | 3 | Notificación → solicitud con mini-perfil → chat activo + sugerencias del sistema para el 3er integrante |

---

### Mockups — Relay

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Baja-Relay-v01.html` | Flujo de 5 pasos: equipo activo → un miembro sale → notificación al equipo → chat para buscar nuevo integrante → cómo cambian las tarjetas en el directorio |

**Estados del relay:** solo existen dos — "Busco equipo" (dorado) y "Relay completo" (verde). No hay un estado intermedio de "reemplazo".

---

### Mockups — Inbox

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Inbox-v02.html` | Inbox del atleta agrupado por evento, con conversaciones activas |

---

### Mockups — Footer

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Footer-v01.html` | Footer standalone para páginas públicas. Referencia visual dark/light/móvil |

El footer **solo aparece en páginas públicas** (home, evento público, perfil compartido). Nunca en vistas autenticadas.

---

### Mockups — Notificaciones

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Notificaciones-v01.html` | Centro de notificaciones del atleta: lista agrupada por fecha (Hoy / Esta semana / Anteriores), filtros por tipo (Relay, Coach, Club, Eventos, Mensajes, Sistema), estado leído/no leído y "Marcar todas como leídas" |

Tipos de notificación cubiertos: solicitud/respuesta de relay, relay completo, baja de un integrante del relay, aceptación de coach o club, mensaje nuevo, evento (lista de espera liberada) y sistema (subida de nivel/puntos). El ícono de campana en el nav de los demás mockups es el punto de entrada a esta vista.

---

### Mockups — Home

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Home-v01.html` | Landing/home autenticado: hero con countdown de evento + stats, beneficios exclusivos, comercios destacados (carrusel filtrable), comunidad que inspira, tres columnas (noticias/biblioteca/próximos eventos), sponsors oficiales, banner CTA final y footer |

Reelaboración del mockup que Giselle iteró con IA (compartido 14-jul), aplicando las reglas de diseño ya validadas de este proyecto (botones y estados activos en azul, `--accent` reservado solo para logo/énfasis/badges de alerta, `--gold` para nivel/puntos). Corrige además el dato de L'Étape San Bernardino, que en la versión de Giselle aparecía como evento próximo pese a estar cancelado — aquí se reemplazó por la Triatlón 5150 Encarnación.

---

## Cómo están conectados los mockups

```
Directorio (MOCKUP-RCH-Directorio-v01.html)
│
├── Clic en coach → Contactar al coach
│     ├── POV atleta → MOCKUP-RCH-Mensajes-Coach-v01.html
│     └── POV coach  → MOCKUP-RCH-Mensajes-Javier-v01.html
│
├── Clic en club → Enviar mensaje
│     ├── POV atleta → MOCKUP-RCH-Mensajes-Club-v01.html
│     └── POV admin  → MOCKUP-RCH-Mensajes-ClubAdmin-v01.html
│
└── Clic en atleta (busca equipo) → contacto 1:1 relay
      ├── POV atleta que inicia → MOCKUP-RCH-Mensajes-v01.html
      └── POV atleta que recibe → MOCKUP-RCH-Mensajes-Carlos-v01.html

Perfil (MOCKUP-RCH-Perfil-v01.html)
│
├── Tab Perfil → formulario de datos del usuario (fuente canónica del Directorio)
├── Tab Sherpa IA → asistente de entrenamiento
├── Tab Membresía → plan y puntos
└── Tab Mi club → solo visible si Rol = Coach

Relay (en Perfil → Tab Perfil → Toggle "Busco equipo para Relay")
│
└── Baja de un integrante → MOCKUP-RCH-Baja-Relay-v01.html
```

---

## Estado actual del proyecto

### Completado ✅
- Perfil de usuario (dark + light)
- Directorio de miembros (atletas, coaches, clubs)
- Eventos (admin + detalle atleta + directorio de eventos con filtros/búsqueda/orden funcionales)
- Flujos de mensajería: coach (2 POVs), club (2 POVs) y contacto 1:1 entre atletas para relay (2 POVs)
- Flujo de baja de relay
- Inbox del atleta
- Centro de notificaciones
- Home / Landing autenticado
- Footer público
- Design system documentado
- Especificación de flujos documentada
- Registro de decisiones documentado

### Pendiente de diseñar
- Inbox del coach y del admin de club (vistas nativas, no como panel lateral)
- Foros: listado de hilos, detalle, creación
- Clasificados: listado, detalle, publicar anuncio
- Onboarding: flujo de registro para nuevos usuarios
- Pantallas de error y estados vacíos

---

## Equipo

| Rol | Persona | Contacto |
|---|---|---|
| Diseño / Producto | Ángeles Bravo | maria.bravo@empowerlabs.com |

---

## Convención de nombres de archivos

```
MOCKUP-RCH-[Sección]-v[N].html          → mockup principal
MOCKUP-RCH-[Sección]-v[N]-light.html    → variante light
[NOMBRE]-RCH.md                          → documentación
```

Los archivos de mockup **no se eliminan** aunque haya versiones más nuevas — se archivan como referencia. La versión activa es siempre la de número más alto.