# Rebelocity Club — Contexto de proyecto

## Quién es la usuaria
Ángeles (maria.bravo@empowerlabs.com) — diseñadora/responsable de producto de Rebelocity Club. Trabaja mockups HTML interactivos en esta carpeta para presentarlos al equipo de desarrollo.

## Qué es Rebelocity Club
Plataforma de comunidad deportiva enfocada en triatlón, running y ciclismo. Funcionalidades principales: perfil de atleta, eventos, directorio de miembros/coaches/clubs, foros, clasificados y sistema de puntos de lealtad. Idioma: español (México).

## ⚠️ Ubicación canónica de archivos: IntelliBanks
Toda la documentación y mockups de Rebelocity Club vive de forma canónica en:
`C:\Users\Angeles\Documents\Intellibanks\IB-REB-Rebelocity\RebelocityClub\`
(mockups HTML dentro de la subcarpeta `UI-Mockups\`, documentación en la raíz).

Esta carpeta local ("Rebelocity Club Usabilidad 2") es solo una copia de trabajo de Ángeles — **no se sincroniza con el equipo**. IntelliBanks sí. Por lo tanto:
- Todo archivo nuevo o editado se guarda (o se copia) también en IntelliBanks, en la ruta de arriba.
- Al compartir archivos con Ángeles (para ella pasárselos a Gus o al equipo), usar siempre las rutas de IntelliBanks, nunca las de esta carpeta local.
- Si algo se edita aquí, el cambio debe reflejarse también en la copia de IntelliBanks antes de dar la tarea por terminada.

## Archivos clave en esta carpeta

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Perfil-v01.html` | Vista de perfil — tema dark ✅ validado |
| `MOCKUP-RCH-Perfil-v01-light.html` | Vista de perfil — tema light ✅ validado |
| `MOCKUP-RCH-Eventos-v01.html` | Vista de eventos (detalle/registro) |
| `MOCKUP-RCH-Footer-v01.html` | Footer standalone — referencia para páginas públicas |
| `DESIGN-SYSTEM-RCH.md` | Spec completa del sistema de diseño |

## Paleta de colores (marca oficial)

| Token | Dark | Light | Uso |
|---|---|---|---|
| `--accent` | `#E2261C` | `#E2261C` | Rojo marca — logo, alertas, énfasis |
| `--accent2` | `#E8554D` | `#E8554D` | Rojo secundario / gradiente |
| `--blue` | `#4A80D6` | `#234E9C` | Azul principal — CTAs, activos, interacciones |
| `--green` | `#10B981` | `#059669` | Éxito, estados positivos |
| `--gold` | `#F5B842` | `#D97706` | Puntos, logros, nivel |
| `--red` | `#EF4444` | `#DC2626` | Errores, estados críticos |

> ⚠️ El azul dark (`#4A80D6`) es una adaptación con mejor contraste sobre fondo oscuro. El azul exacto de marca es `#234E9C`.

## Tipografía
- **Headings**: `Montserrat` (pesos 500, 600, 700, 800, 900) — vía Google Fonts
- **Body**: `Inter` (pesos 400, 500, 600) — vía Google Fonts

## Reglas de diseño que YA están validadas
1. Botones primarios → relleno azul (`--blue`) + texto blanco. El rojo se reserva solo para alertas/errores.
2. Botón secundario → borde `border2` + texto `text2`; hover: borde azul + texto azul.
3. Tabs activos → color azul (`--blue`), border-bottom azul.
4. Chips seleccionados → fondo azul 12% opacidad + borde azul + texto azul.
5. Toggles activos → fondo azul.
6. Footer → solo en páginas públicas (Home, evento público, perfil compartido). NO en vistas autenticadas (Perfil, Sherpa IA, Membresía).
7. Save bar → solo visible en tab Perfil, oculta en Sherpa IA y Membresía.
8. Rol = Coach activa bloque "Mi club" y oculta "Busco coach o entrenador".
9. No usar hero banner / portada en el perfil (desactivado por ahora).

## Reglas de trabajo para nuevas secciones
- Crear siempre en single-file HTML con CSS custom properties.
- Mantener tokens dark/light como variables `:root`.
- Naming de archivos: `MOCKUP-RCH-[Sección]-v[N].html`
- No crear archivos README ni documentación extra salvo que se pida.

## ⚠️ Regla especial: MOCKUP-RCH-Eventos-v01.html (MD por cada cambio)
Este mockup es el más grande y complejo del proyecto (formulario de alta de evento con múltiples secciones). A partir de ahora, **cada vez que se agregue, modifique o elimine un elemento o sección dentro de este archivo**, se debe generar además un MD específico que reporte ese cambio — no reemplaza el resto de la documentación, es la referencia técnica completa para quien lo vaya a construir.

**Naming:** `SPEC-REB-RClub-Eventos-[NombreDelElemento]-v01.md`, guardado en la raíz de IntelliBanks (`IB-REB-Rebelocity/`), junto a las demás specs del proyecto (mismo patrón que `SPEC-REB-RClub-PromotoresAfiliados-PlanImplementacion-v01.md`).

**Contenido obligatorio del MD:**
- **Ubicación en el HTML** — sección/id/línea aproximada, solo como referencia rápida. El HTML no es la fuente de verdad del cambio, el MD sí lo es.
- **Contexto** — qué es el elemento, para qué sirve, por qué se agregó/modificó/eliminó.
- **Campos completos** — nombre, tipo, requerido/opcional, valor por defecto.
- **Validaciones** — regla por campo.
- **Estilos/estados visuales** — variantes y condicionales de UI (qué se muestra/oculta y cuándo).
- **Función** — comportamiento JS, interacciones, dependencias con otros campos o secciones.
- **Qué validar en el componente real antes de programarlo** — marcar explícitamente qué es ✅ confirmado (ya existía o es un hecho verificado) vs 🟡 propuesta (decisión nueva a validar), igual que en `SPEC-REB-RClub-PromotoresAfiliados-PlanImplementacion-v01.md`.

**Cuándo NO aplica:** cambios puramente visuales/cosméticos sin impacto en datos o comportamiento (ej. ajustar un padding o un color) no requieren su propio MD — solo elementos/secciones con campos, lógica o reglas de negocio.