# SPEC-FLUJOS-RCH — Especificación de flujos de usuario

> Rebelocity Club · Versión 01 · Julio 2026
> Documento de referencia para diseñadores y desarrolladores que retomen o extiendan este producto.
> Para especificaciones visuales, ver `DESIGN-SYSTEM-RCH.md`.

---

## Índice

1. [Navegación global](#1-navegación-global)
2. [Perfil de usuario](#2-perfil-de-usuario)
3. [Directorio de miembros](#3-directorio-de-miembros)
4. [Eventos](#4-eventos)
5. [Mensajería — Contactar a un coach](#5-mensajería--contactar-a-un-coach)
6. [Mensajería — Coach recibe solicitud de atleta](#6-mensajería--coach-recibe-solicitud-de-atleta)
7. [Mensajería — Atleta contacta a un club](#7-mensajería--atleta-contacta-a-un-club)
8. [Mensajería — Admin del club recibe mensaje de atleta](#8-mensajería--admin-del-club-recibe-mensaje-de-atleta)
9. [Reglas transversales de datos](#9-reglas-transversales-de-datos)

---

## 1. Navegación global

**Archivo:** aplica a todas las vistas autenticadas.

### Barra de navegación (Nav)

La nav es fija en la parte superior. Contiene:

- **Logo Rebelocity Club** — no es un enlace en esta versión.
- **Links de sección:** Inicio / Eventos / Comunidad. En el mockup son decorativos; en producción enrutarán a cada sección.
- **Chip de puntos** — muestra los puntos de lealtad acumulados del usuario (ej. "1,250 pts"). Es de solo lectura; el detalle está en la pestaña Membresía del perfil.
- **Avatar del usuario** — iniciales del nombre. Al hacer clic, abre el perfil del usuario (esta navegación no está prototipada en los mockups actuales).

### Principio de footers

El footer del sitio **solo aparece en páginas públicas** (Home, detalle de evento público, perfil compartido). **No aparece** en vistas autenticadas como Perfil, Sherpa IA o Membresía.

---

## 2. Perfil de usuario

**Archivos:** `MOCKUP-RCH-Perfil-v01.html` (tema dark) · `MOCKUP-RCH-Perfil-v01-light.html` (tema light)

### 2.1 Hero del perfil

Siempre visible en la parte superior, debajo de la nav. No es editable directamente desde aquí.

| Elemento | Descripción | Estado |
|---|---|---|
| Avatar | Iniciales del usuario. Hover muestra ícono de cámara para cambiar foto | Pendiente de implementar cambio de foto |
| Badge de nivel | Nivel de membresía actual (ej. "Normal", "Pro") | Derivado del sistema de puntos |
| Nombre | Nombre + Apellido del perfil | Solo lectura en el hero; editable en el tab Perfil |
| Frase motivacional | Texto libre del campo "Frase o motivación" | Solo lectura en el hero |
| Stats del hero | Puntos · Nº de eventos · Disciplinas · Ciudad | Derivados del perfil y del historial de eventos |

### 2.2 Tabs del perfil

Las pestañas se encuentran justo debajo del hero, sticky al hacer scroll.

| Tab | Visible para | Descripción |
|---|---|---|
| **Perfil** | Todos | Formulario de datos del usuario |
| **Sherpa IA** | Todos | Asistente de entrenamiento personalizado |
| **Membresía** | Todos | Plan actual, puntos, consumo de créditos |
| **Mi club** | Solo cuando Rol = Coach | Gestión del club y sus miembros |

Al hacer clic en un tab, el contenido de la sección principal cambia sin recargar la página. La Save Bar solo es visible en el tab Perfil.

---

### 2.3 Tab: Perfil

#### Save Bar

Barra fija en la parte inferior de la pantalla, visible únicamente en este tab. Aparece siempre (no solo al detectar cambios, por decisión de diseño actual).

| Botón | Acción |
|---|---|
| **Descartar** | Revierte todos los campos al último estado guardado |
| **Guardar cambios** | Persiste todos los cambios del formulario de perfil |

#### Sección 1 — Información personal

Datos de identificación de la cuenta.

| Campo | Tipo | Requerido | Notas |
|---|---|---|---|
| Nombre | Texto | Sí | |
| Apellidos | Texto | Sí | |
| Fecha de nacimiento | Fecha | Sí | Usada para asignar categoría de edad en eventos |
| Género | Select (Hombre / Mujer / Prefiero no decir) | No | |
| País | Select | No | |
| Ciudad | Texto | No | |
| Correo electrónico | Email | — | Campo de solo lectura. Para cambiarlo, el usuario debe contactar soporte |
| Teléfono | Tel | No | |

#### Sección 2 — Mi historia

| Campo | Tipo | Límite | Notas |
|---|---|---|---|
| Biografía | Textarea | 300 caracteres | Contador de caracteres en tiempo real. Visible en el directorio y perfil público |
| Frase o motivación | Texto | 120 caracteres | Aparece en el hero del perfil |

#### Sección 3 — Mi deporte

**Campo: Rol en el ecosistema** (chips, selección única)

Opciones: Atleta · Coach · Organizador · Marca

- Al seleccionar **Coach**: aparece el bloque Coach (ver abajo) y se oculta el toggle "Busco coach o entrenador". El tab "Mi club" se activa en la nav de pestañas.
- Al deseleccionar Coach: se oculta el bloque Coach y el tab "Mi club".

**Bloque Coach** (visible solo si Rol = Coach)

| Campo | Tipo | Notas |
|---|---|---|
| Toggle "Acepto nuevos atletas" | Toggle on/off | Si está activo, el perfil del coach aparece en el directorio de coaches disponibles |
| Especialidad | Chips (multi-select) | Triatlón · Running · Ciclismo · Natación · Nutrición deportiva · Fuerza y acondicionamiento · Psicología deportiva · Otro. Si se selecciona "Otro", aparece un campo de texto libre |

**Campo: Disciplinas** (chips, multi-select)
Triatlón · Running · Ciclismo · Natación · Multi-sport

**Campo: Nivel** (chips, selección única, estilo verde)
Principiante · Aficionado · Avanzado · Élite · Coach

**Campo: Gran objetivo** (chips, multi-select)
Triatlón Sprint · Triatlón Olímpico · 70.3 Ironman · Ironman completo · Medio maratón · Maratón · Gran fondo ciclismo · Open Water · Otro

**Toggle: Busco coach o entrenador** (oculto si Rol = Coach)
Si está activo, el perfil del atleta aparece en el directorio marcado como que busca entrenador.

**Toggle: Busco equipo para Relay** (dorado)
Al activarlo aparece el **Bloque Relay**:

| Campo | Tipo | Requerido | Notas |
|---|---|---|---|
| Disciplina que cubro | Chips (multi-select) | Sí | Natación · Ciclismo · Running |
| Tipo de relay | Chips (selección única) | Sí | 2 personas · 3 personas |
| Carrera | Select o texto | Sí | La carrera en la que quiere participar |

#### Sidebar del tab Perfil

La sidebar es sticky. Contiene cuatro widgets de solo lectura:

**Membership Card** — tarjeta visual con puntos acumulados, nivel y nombre del usuario.

**Level Progress** — nivel actual, puntos hacia el siguiente nivel, barra de progreso y beneficios del nivel próximo.

**Profile Completion** — porcentaje de perfil completado (mostrado en dorado), barra de progreso y lista de ítems pendientes vs. completados.

**QR Code** — código QR personal del usuario para identificación en eventos físicos. Incluye el código alfanumérico debajo.

---

### 2.4 Tab: Sherpa IA

Vista centrada sin sidebar. Contiene una serie de preguntas de entrenamiento en formato de tarjetas. Cada tarjeta tiene un textarea para responder.

| Elemento | Comportamiento |
|---|---|
| Tarjeta de pregunta | Estado "Pendiente" (gris) o "Completada" (verde) según si el textarea tiene contenido |
| Barra de progreso | Muestra el avance en las preguntas del Sherpa (en rojo/acento) |
| Textarea por pregunta | Contador de caracteres. Al escribir, el estado cambia a "Completada" |
| **Botón "Enviar al Sherpa"** | Habilitado cuando al menos una respuesta está completa. Envía las respuestas para generar el plan de entrenamiento |

**Regla:** La Save Bar del tab Perfil **no aparece** en este tab.

---

### 2.5 Tab: Membresía

Vista en grid de dos columnas. Contiene:

**Plan actual** — nombre del plan, fechas, barra de uso de créditos (ej. "Eventos / 3 de 5 usados"), caja de renovación con días restantes y botón de renovar.

**Puntos / Historial** — dos sub-tabs internos:
- *Puntos:* nivel actual (badge), tarjetas de puntos disponibles y consumidos, barra de progreso hacia siguiente nivel, beneficios del nivel.
- *Historial:* lista de movimientos de créditos (positivos en verde, negativos en rojo) con fecha y concepto.

**Regla:** La Save Bar del tab Perfil **no aparece** en este tab.

---

### 2.6 Tab: Mi club (solo Rol = Coach)

Visible únicamente cuando el usuario tiene el rol Coach activo. Permite gestionar el club al que pertenece o que dirige.

| Elemento | Acción |
|---|---|
| Nombre del club | Campo de texto. El club se asocia automáticamente al perfil |
| Descripción del club | Textarea (máx. 200 caracteres) |
| Lista de miembros | Muestra nombre, avatar y fecha de ingreso de cada miembro |
| **Botón "Agregar miembro"** | Abre un campo de búsqueda/input para añadir un nuevo miembro por nombre o email |
| **Botón "Eliminar" (por miembro)** | Remueve al miembro del club |
| Campo para agregar | Input + botón "Confirmar" |

**Regla:** Agregar o eliminar miembros del club se hace **solo desde este tab**, nunca desde una ventana de chat.

---

## 3. Directorio de miembros

**Archivo:** `MOCKUP-RCH-Directorio-v01.html`

### 3.1 Estructura de la página

La página tiene tres zonas fijas: nav global, cabecera del directorio con tabs, barra de filtros. El contenido del grid cambia según el tab activo.

### 3.2 Tabs del directorio

| Tab | Contenido |
|---|---|
| **Atletas** | Grid de tarjetas de atletas |
| **Coaches** | Grid de tarjetas de coaches disponibles |
| **Clubs** | Grid de tarjetas de clubs |

Al cambiar de tab, los filtros secundarios cambian y todos los filtros activos se resetean automáticamente.

### 3.3 Barra de filtros

**Búsqueda por nombre** — input de texto. Filtra en tiempo real las tarjetas del grid activo.

**Sort** — botón que alterna el orden entre "Reciente" y "A-Z" (o el criterio definido en producción).

**Dropdown de disciplina** — aplica a todos los tabs:
Todos · Triatlón · Running · Ciclismo · Natación · Multi-sport

**Filtros secundarios por tab:**

*Tab Atletas:*
- Select País
- Select Nivel (Principiante / Aficionado / Avanzado / Élite)
- Select Carrera (filtra atletas inscritos a esa carrera para relay)
- Chip "Busco equipo" — al activarse, filtra solo atletas con el toggle relay activo

*Tab Coaches:*
- Select País
- Select Especialidad (Triatlón / Running / Ciclismo / Natación / Nutrición deportiva / Fuerza y acondicionamiento / Psicología deportiva / Otro)

*Tab Clubs:*
- Select País

### 3.4 Tarjetas (cards)

Cada tarjeta muestra información resumida del perfil. Al hacer **clic en cualquier parte de la tarjeta**, se abre el modal de detalle.

Las tarjetas de atletas con el toggle relay activo muestran un badge "Busco equipo" en dorado. Las tarjetas de clubs pueden mostrar una etiqueta de tipo de admisión.

### 3.5 Modal de detalle

Se abre sobre la página con un fondo oscurecido. Tiene dos columnas: avatar/identidad a la izquierda, detalles a la derecha.

**Columna izquierda:**
- Avatar con iniciales
- Nombre completo
- Sub-título (rol + disciplinas)
- Ciudad, País
- Redes sociales (si el perfil las tiene)

**Columna derecha:** varía según el tipo de perfil. Solo se muestra información que existe en los formularios del perfil:

*Atleta:*
- Nivel
- Disciplinas
- Gran objetivo
- Bloque relay (si aplica): disciplina, tipo, carrera

*Coach:*
- Nivel (campo Nivel del perfil, mismo que atletas)
- Especialidades
- Disciplinas
- Toggle "Acepta nuevos atletas"

*Club:*
- Número de miembros (dato del sistema, no capturado en formulario manual)
- Descripción del club
- Disciplinas

**Footer del modal — botones de acción:**

| Tipo de perfil | Botón | Destino |
|---|---|---|
| Coach (acepta atletas) | "Contactar al coach" | Inicia flujo mensajería coach (ver sección 5) |
| Club | "Enviar mensaje" | Inicia flujo mensajería club (ver sección 7) |
| Atleta | No hay CTA de contacto en esta versión | — |

**Cerrar modal:**
- Botón "✕" en la esquina superior derecha del modal
- Clic en el backdrop oscuro fuera del modal

---

## 4. Eventos

**Archivo:** `MOCKUP-RCH-Eventos-v01.html`

El mockup tiene tres vistas seleccionables mediante un switcher en la barra superior del mockup. En producción, estas serían páginas o rutas separadas.

### 4.1 Vista: Administrador (formulario de alta de evento)

Accesible para usuarios con rol Organizador. Permite crear y publicar un evento.

**Header de la vista admin:**
- Botón "← Eventos" — regresa al directorio de eventos
- **Botón "Guardar borrador"** — guarda el evento sin publicarlo
- **Botón "Publicar evento →"** — publica el evento y lo hace visible en el directorio

**Sección 1 — Datos básicos:**

| Campo | Tipo | Notas |
|---|---|---|
| Nombre del evento | Texto | |
| Fecha | Fecha | |
| Lugar / Sede | Texto | |
| Deporte | Select | |
| Distancia/Formato | Select | Opciones dependientes del deporte seleccionado |
| Descripción | Editor de texto enriquecido | Botones: Negrita, Cursiva, Subrayado, H1, H2, Lista numerada, Lista de viñetas, Enlace |
| Organizador | Texto | |
| Contacto | Email / Tel | |
| Imagen de portada | Upload | |

**Sección 2 — Modalidades:**

Permite agregar múltiples modalidades de inscripción. Cada modalidad tiene:
- Nombre de modalidad
- Precio base
- Precio early bird (con fecha límite)
- Descuento tarjetahabientes
- Toggle "Transferible"
- **Botón "🗑 Eliminar modalidad"** — elimina esa modalidad del listado

Acciones de sección:
- **Botón "+ Agregar modalidad"** — agrega una nueva modalidad en modo borrador
- **Promotores afiliados:** lista de promotores con comisión. Botón "+ Agregar promotor", íconos ✏️ y 🗑 por entrada

**Sección 3 — Formulario de inscripción:**

Lista de campos que el atleta deberá llenar al inscribirse. Campos predeterminados ya incluidos. Cada campo tiene íconos ✏️ (editar) y 🗑 (eliminar).
- **Botón "+ Agregar campo"** — agrega un campo personalizado al formulario

---

### 4.2 Vista: Directorio de eventos

Lista de eventos publicados. En esta versión es un mockup estático que muestra tarjetas de eventos con nombre, fecha, distancia y estado (Próximo, Agotado, Cancelado). Cada tarjeta es clicable para ir al detalle.

### 4.3 Vista: Detalle de evento (vista de atleta)

Página de detalle de un evento individual, donde el atleta puede ver información y registrarse.

**Contenido:**
- Imagen de portada
- Nombre, fecha, sede
- Descripción completa
- Modalidades disponibles con precios
- Formulario de inscripción

**Estados del botón de registro:**

| Estado del evento | Apariencia del botón | Comportamiento |
|---|---|---|
| Disponible | Rojo / naranja, habilitado | El atleta puede iniciar el proceso de inscripción |
| Agotado | Gris, deshabilitado, texto "Agotado" | No se puede hacer clic |
| Cancelado | Gris, deshabilitado, texto "Cancelado" | No se puede hacer clic |

---

## 5. Mensajería — Contactar a un coach

**Archivo:** `MOCKUP-RCH-Mensajes-Coach-v01.html`
**POV:** Ángeles (atleta) iniciando contacto con un coach desde el directorio.

Este flujo se activa cuando el usuario hace clic en **"Contactar al coach"** en el modal del directorio (tab Coaches).

### Estructura del mockup

Un panel lateral de ~420px se superpone sobre el directorio con fondo desenfocado. El directorio permanece visible detrás como contexto. El panel muestra un asistente de 4 pasos con dots de progreso y navegación Anterior / Siguiente en la barra superior.

**Toggle de simulación:** "Javier: Rechaza / Acepta" — aparece en la barra superior a partir del **paso 3** para simular la respuesta del coach.

---

### Paso 1 — Redactar mensaje

**Propósito:** El atleta escribe el mensaje inicial al coach.

**Contenido del panel:**
- Tarjeta de contexto del coach: nombre, rol + especialidad + ciudad (solo datos del perfil)
- Campo de texto "Tu mensaje" — textarea libre donde el atleta presenta su solicitud
- Nota informativa: "El coach recibirá tu solicitud y decidirá si acepta nuevos atletas"

**Botón del footer:**

| Botón | Acción |
|---|---|
| **"Enviar solicitud →"** | Avanza al paso 2 |

---

### Paso 2 — Confirmación de envío

**Propósito:** Confirmar que el mensaje fue enviado.

**Contenido:** Pantalla de confirmación centrada con ícono de éxito (azul), título "Solicitud enviada", texto explicativo de que el coach revisará la solicitud.

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"Ver mis solicitudes"** | (Sin función prototipada; en producción llevaría al inbox del atleta) |
| **"Cerrar"** | Cierra el panel y regresa al directorio |

---

### Paso 3 — En espera

**Propósito:** Estado intermedio mientras el coach no ha respondido.

**Contenido:** Pantalla de espera con ícono de reloj, texto "Solicitud pendiente", indicación de que el coach será notificado.

**Toggle visible desde este paso:** "Javier: Rechaza / Acepta" permite al presentador del mockup simular la respuesta del coach para avanzar al paso 4a o 4b.

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"Cancelar solicitud"** | (Sin función prototipada; en producción cancelaría la solicitud) |

---

### Paso 4a — Coach acepta

**Propósito:** El coach aceptó. Se habilita el chat.

**Contenido:**
- Header: nombre del coach + "Aceptó tu solicitud" en verde
- Barra de estado del chat: punto verde + "Chat activo"
- Historial de mensajes con conversación de ejemplo (atleta y coach)
- Barra de input para escribir y enviar nuevos mensajes

**Interacciones:**
- **Campo de texto + botón "Enviar"** — escribe y agrega un nuevo mensaje al hilo en tiempo real (lado atleta, burbuja azul a la derecha)
- **Enter** — también envía el mensaje

---

### Paso 4b — Coach rechaza

**Propósito:** El coach no aceptó la solicitud.

**Contenido:** Pantalla centrada con ícono de rechazo (rojo), título "Javier no aceptó esta solicitud", mensaje explicativo de que los coaches tienen capacidad limitada, sugerencia de buscar otro coach.

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"← Volver"** | Regresa al paso 1 |
| **"Buscar otro coach →"** | (Sin función prototipada; en producción llevaría al directorio filtrado por coaches) |

---

## 6. Mensajería — Coach recibe solicitud de atleta

**Archivo:** `MOCKUP-RCH-Mensajes-Javier-v01.html`
**POV:** Javier Ríos (coach) recibiendo y respondiendo a una solicitud de Ángeles.

Este flujo se activa cuando el coach accede a su inbox y abre una solicitud nueva.

### Estructura del mockup

Panel lateral sobre el inbox del coach (sidebar + lista de conversaciones desenfocada en el fondo). El panel muestra 3 pasos.

**Toggle de simulación:** "Javier: Rechaza / Acepta" — visible desde el **paso 1**, permite al presentador simular la decisión del coach antes de interactuar con los botones del paso 1.

---

### Paso 1 — Solicitud entrante

**Propósito:** El coach ve la solicitud y decide si acepta o rechaza.

**Contenido del panel:**
- Badge "NUEVA" en el header
- Tarjeta de contexto del atleta: nombre, "Miembro desde [año] · Nivel: [nivel]", "Objetivo: [objetivo]", chips de disciplinas
- Cuerpo del mensaje de Ángeles
- Nota informativa: si acepta, el atleta verá su contacto y tendrán acceso al chat; si rechaza, el atleta será notificado

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"Rechazar"** (rojo/borde) | Activa modo "rechaza" y avanza al paso 2b |
| **"Aceptar solicitud"** (verde) | Activa modo "acepta" y avanza al paso 2a |

---

### Paso 2a — Coach acepta (Chat abierto)

**Propósito:** Confirmación de que el chat fue abierto con el atleta.

**Contenido:** Pantalla centrada con ícono de chat (verde), título "Chat abierto", texto: "Ángeles ya puede recibir tu respuesta."

**Dots de progreso:** 2/3 (hay un paso 3).

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"← Solicitudes"** | Regresa al paso 1 |
| **"Ir al chat →"** | Avanza al paso 3 (chat activo) |

---

### Paso 2b — Coach rechaza (Solicitud rechazada)

**Propósito:** Confirmar que la solicitud fue rechazada.

**Contenido:** Pantalla centrada con ícono de rechazo (rojo), título "Solicitud rechazada", texto: "Ángeles será notificada y podrá buscar otro coach disponible en el directorio."

**Dots de progreso:** 2/2 (el flujo termina aquí; no hay paso 3).

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"Volver a solicitudes"** (borde gris) | Regresa al paso 1 |

---

### Paso 3 — Chat activo (solo si acepta)

**Propósito:** Coach y atleta intercambian mensajes libremente.

**Contenido:**
- Header: avatar + nombre del atleta + "Prospecto · conversación activa"
- Barra de estado: punto verde + "Chat activo"
- Historial de mensajes (burbuja azul = Javier/coach a la derecha; burbuja gris = Ángeles/atleta a la izquierda)
- Barra de input con campo de texto y botón enviar

**Interacciones:**
- **Campo de texto + botón "Enviar"** — agrega mensaje del coach (burbuja azul, derecha)
- **Enter** — también envía

**Nota de diseño:** El chat es texto libre. Los detalles de entrenamiento (días, horarios, lugar) se acuerdan en la conversación, no como campos estructurados.

---

## 7. Mensajería — Atleta contacta a un club

**Archivo:** `MOCKUP-RCH-Mensajes-Club-v01.html`
**POV:** Ángeles (atleta) iniciando contacto con un club desde el directorio.

Este flujo se activa cuando el usuario hace clic en **"Enviar mensaje"** en el modal del directorio (tab Clubs).

### Estructura del mockup

Panel lateral sobre el directorio tab Clubs desenfocado. 3 pasos. **No hay toggle** de simulación porque el atleta solo envía el mensaje; la decisión es del admin del club (flujo separado, sección 8).

---

### Paso 1 — Redactar mensaje

**Propósito:** El atleta escribe su mensaje inicial al club.

**Contenido del panel:**
- Tarjeta de contexto del club: nombre, número de miembros + ciudad (solo datos del perfil y sistema)
- Campo "Tu mensaje" — textarea libre
- Nota informativa: el club recibirá el mensaje y decidirá si abre el chat

**Botón del footer:**

| Botón | Acción |
|---|---|
| **"Enviar mensaje →"** | Avanza al paso 2 |

---

### Paso 2 — Confirmación de envío

**Propósito:** Confirmar que el mensaje fue enviado al club.

**Contenido:** Pantalla de confirmación centrada con ícono de éxito, título "Mensaje enviado", texto explicativo de que el admin del club revisará y decidirá si abre el chat.

**Botón del footer:**

| Botón | Acción |
|---|---|
| **"Cerrar"** | Cierra el panel y regresa al directorio |

---

### Paso 3 — Chat en curso

**Propósito:** El admin del club abrió el chat. Atleta y admin intercambian mensajes para conocerse antes de decidir la membresía.

**Contenido:**
- Header: avatar del club + nombre + "Admin del club · conversación activa"
- Barra de estado: "Chat abierto" (verde)
- Historial de mensajes de ejemplo: conversación sobre horarios, ritmo de entrenamiento y lugar de reunión — todo como texto libre en el chat
- Nota en el footer del chat: "Si deciden que hay fit, el admin del club te agregará como miembro"
- Barra de input con campo de texto y botón enviar

**Principio clave de este flujo:**
Que el admin abra el chat **no significa que el atleta sea miembro del club**. El proceso es:
1. Intercambio de mensajes → conocerse
2. (Opcional) sesión de entrenamiento de prueba
3. Decisión mutua de integración
4. El admin agrega al atleta como miembro **desde el panel de gestión del club** (pestaña "Mi club" en el perfil del admin)

---

## 8. Mensajería — Admin del club recibe mensaje de atleta

**Archivo:** `MOCKUP-RCH-Mensajes-ClubAdmin-v01.html`
**POV:** Laura M. (admin del club) recibiendo y respondiendo al mensaje de Ángeles.

Este flujo se activa cuando el admin accede al panel de administración del club y abre una solicitud nueva en "Solicitudes".

### Estructura del mockup

Panel lateral sobre el panel de administración del club (sidebar con secciones: Mensajes → Solicitudes / Conversaciones activas; Miembros → Todos / Agregar miembro / Entrenamientos). 3 pasos si acepta, 2 pasos si rechaza.

**Toggle de simulación:** "Laura: Rechaza / Acepta" — visible desde el **paso 1** para simular la decisión del admin.

---

### Paso 1 — Mensaje entrante

**Propósito:** El admin ve el mensaje del atleta y decide si abre el chat o lo rechaza.

**Contenido del panel:**
- Badge "NUEVA" en el header
- Tarjeta de contexto del atleta: nombre, "Miembro desde [año] · Nivel: [nivel]", "Objetivo: [objetivo]", "Tu club · [N] miembros", chips de disciplinas
- Cuerpo del mensaje de Ángeles
- Nota informativa: si abre el chat, podrán intercambiar mensajes para conocerse; la decisión de membresía se toma más adelante desde el panel de gestión

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"Rechazar"** (borde rojo) | Activa modo "rechaza" y avanza al paso 2b |
| **"Abrir chat"** (verde) | Activa modo "acepta" y avanza al paso 2a |

---

### Paso 2a — Admin acepta (Chat abierto)

**Propósito:** Confirmar que el chat fue abierto con el atleta.

**Contenido:** Pantalla centrada con ícono de chat (verde), título "Chat abierto", texto: "Ángeles ya puede recibir tu respuesta. Cuando estén listos, puedes agregarla como miembro desde el panel de **Miembros → Agregar miembro**."

**Dots de progreso:** 2/3 (hay un paso 3).

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"← Mensajes"** | Regresa al paso 1 |
| **"Ir al chat →"** | Avanza al paso 3 (chat activo) |

---

### Paso 2b — Admin rechaza (Solicitud rechazada)

**Propósito:** Confirmar que la solicitud fue rechazada.

**Contenido:** Pantalla centrada con ícono de rechazo (rojo), título "Mensaje rechazado", texto: "Ángeles fue notificada y podrá buscar otro club disponible en el directorio."

**Dots de progreso:** 2/2 (el flujo termina aquí; no hay paso 3).

**Botones del footer:**

| Botón | Acción |
|---|---|
| **"Volver a solicitudes"** (borde gris) | Regresa al paso 1 |

---

### Paso 3 — Chat en curso (solo si acepta)

**Propósito:** Admin y atleta intercambian mensajes para conocerse antes de decidir la membresía.

**Contenido:**
- Header: avatar del atleta + nombre + "Prospecto · conversación activa"
- Barra de estado: "Chat abierto · Conociendo al prospecto" (verde)
- Historial de mensajes de ejemplo: la atleta pregunta sobre horarios, ritmo, lugar; el admin responde con detalles en texto libre
- Barra de input con campo de texto y botón enviar

**Interacciones:**
- **Campo de texto + botón "Enviar"** — agrega mensaje del admin (burbuja azul, derecha)
- **Enter** — también envía

**Principio clave:** El chat es para conocerse. La membresía se gestiona **exclusivamente** desde el panel lateral del club (Miembros → Agregar miembro), no desde esta ventana de chat.

---

## 9. Reglas transversales de datos

Estas reglas aplican a **todos** los mockups y futuras vistas del producto.

### 9.1 Regla de integridad de datos

> **Solo se puede mostrar información que haya sido capturada explícitamente en algún formulario del producto.**

Esto significa que ninguna tarjeta, modal, chip, header ni metadata puede mostrar un dato que el usuario no haya ingresado previamente. Si un campo no existe en el formulario de perfil, no puede aparecer en ninguna otra vista.

Ejemplos de datos **permitidos** (tienen campo en el formulario):
- Nombre, Apellido, Ciudad, País
- Disciplinas (chips de perfil)
- Nivel (Principiante / Aficionado / Avanzado / Élite)
- Gran objetivo (chips de perfil, sin año específico)
- Especialidad coach (chips del bloque Coach)
- Biografía (texto libre, 300 chars)
- Descripción del club (texto libre, 200 chars)
- Número de miembros del club (dato del sistema, derivado del conteo de miembros asignados)

Ejemplos de datos **no permitidos** (no tienen campo):
- Años de experiencia del coach
- Certificaciones (ej. "Coach ITU")
- Horarios de entrenamiento del club (días y horas)
- Lugar físico de entrenamiento (a menos que sea la ciudad del perfil)
- Cupo máximo del club o lugares disponibles
- Año de fundación del club
- Año dentro del objetivo del atleta (ej. "IRONMAN 70.3 2026" — el año de la carrera está en el campo relay, no en los objetivos generales)

### 9.2 Datos de sistema vs. datos de formulario

Algunos datos son **generados por el sistema** y no requieren un campo de formulario del usuario:
- Número de miembros del club (conteo automático)
- Puntos de lealtad (acumulados por acciones)
- Fecha de registro como miembro ("Miembro desde 2024")
- Número de eventos asistidos

Estos datos **sí pueden mostrarse** en tarjetas y modales.

### 9.3 Separación de flujos: apertura de chat vs. membresía

En los flujos de club, estas dos acciones son distintas y no deben confundirse:

| Acción | Quién la hace | Dónde |
|---|---|---|
| Abrir el chat con un atleta | Admin del club | Paso 1 del flujo de mensajería (botón "Abrir chat") |
| Agregar al atleta como miembro | Admin del club | Panel de gestión del club (pestaña "Mi club" en el perfil, sección "Agregar miembro") |

Abrir el chat no implica membresía. Puede haber varios intercambios de mensajes —incluso una sesión de prueba presencial— antes de que el admin decida agregar al atleta como miembro formal del club.

### 9.4 Footer del sitio

El footer solo aparece en páginas públicas. Nunca en vistas autenticadas (Perfil, Sherpa IA, Membresía, Mensajería, Panel admin de club).

### 9.5 Save Bar del perfil

La Save Bar (Descartar / Guardar cambios) solo es visible en el **tab Perfil**. No aparece en los tabs Sherpa IA, Membresía ni Mi club.

---

*Documento generado en julio 2026. Para actualizar, editar directamente este archivo siguiendo la nomenclatura de secciones existente.*