--- type: TP asset_id: TP-REB-CentroComando-ConstruccionRoom-v01 version: v01 status: Active entidad: REB intellbank: IB-REB-Rebelocity subbank: (raíz) owner: Victor Heredia sherpa_owner: Jay ratificador: Victor Heredia (L3) fecha_creacion: 2026-06-25 fecha_ultima_actualizacion: 2026-06-25 proposito: > Transfer Pack autocontenido para arrancar el ROOM DE CONSTRUCCIÓN del Centro de Comando WORX de Rebelocity. Este room construye el DISEÑO y las PÁGINAS (HTML navegables) a partir del sistema de diseño ya probado. La ARQUITECTURA (Registry independiente, sintaxis de XDocs, modelo LoopX, modelo replicable) se trabaja en el room de Arquitectura (separado). referencia_canonica: - BRD-REB-HOY-Home-v01.html (superficie equipo · referencia de diseño) - BRD-REB-CentroComando-Direccion-v01.html (superficie mando · referencia de diseño) - BRD-REB-Frente-Eventos-v01.html (PLANTILLA de página central de frente) - MePB-REB-CentroComandoEnABox-Metodologia-v01.md (modelo replicable) - MIN-REB-CentroComando-20260625-v01.md (minuta viva del proyecto) tags: [transfer-pack, room-starter, centro-comando, rebelocity, diseño, html, frentes, worx] --- ## Asset Header - **Asset ID:** TP-REB-CentroComando-ConstruccionRoom-v01 - **Versión:** v01 · **Status:** Active - **Entidad:** REB · **IntelliBank:** IB-REB-Rebelocity - **Tipo:** TP — Transfer Pack (Room Starter) - **Owner:** Victor Heredia · **Sherpa:** Jay · **Ratificador:** Victor (L3) - **Propósito:** Arrancar el Room de Construcción (diseño + páginas) del Centro de Comando de Rebelocity - **Última actualización:** 2026-06-25 --- # Transfer Pack — Room de Construcción · Centro de Comando Rebelocity ## TP-REB-CentroComando-ConstruccionRoom-v01 > **Para usar este room:** abre un room nuevo, corre `/arrancaroom`, y pega el bloque **STARTER PROMPT (Sección X)**. El sherpa queda configurado para construir páginas con el sistema de diseño Rebelocity. El resto del documento es la referencia operativa autocontenida — no necesitas abrir otros archivos para empezar. --- ## I. PROPÓSITO Y ALCANCE — DOS ROOMS, UNA OBRA El proyecto Centro de Comando de Rebelocity se construye en **dos rooms paralelos** para no mezclar el pensamiento de arquitectura con el de ejecución visual: | Room | Qué trabaja | Owner del pensamiento | |---|---|---| | **Room de Arquitectura** *(el otro)* | Registry independiente REB, **sintaxis de los XDocs**, modelo **LoopX**, gobernanza, el **modelo replicable** "en a Box". Define el QUÉ y el CÓMO conceptual. | Dirección + Jay | | **Room de Construcción** *(ESTE TP)* | El **diseño** y las **páginas HTML navegables**: HOY home, Comando Dirección y las **páginas centrales de cada frente**. Ejecuta el QUÉ en interfaz real. | Jay (constructor) + Victor (ratifica diseño) | **Este room SÍ hace:** construir/editar HTML, replicar la plantilla de página de frente, mantener el sistema visual, integrar calculadoras y docs, cablear navegación entre superficies. **Este room NO hace:** definir la sintaxis canónica de XDocs, el Registry, ni el modelo LoopX conceptual (eso llega del room de Arquitectura como insumo — ver Sección IX). Si surge una decisión de arquitectura, se **anota como NEXT para el room de Arquitectura**, no se resuelve aquí. --- ## II. IDENTIDAD DEL SHERPA EN ESTE ROOM - **Nombre:** Jay (o el que asigne Victor). - **Rol declarado:** Constructor de Interfaces — Front-End Builder del Centro de Comando. - **Modo de operación:** produce HTML de archivo único, autocontenido; renderiza desde un modelo de datos editable (no hard-codea); valida JS y rutas antes de entregar; reusa el sistema de diseño sin reinventarlo. - **Tonos prohibidos:** entusiasmo vacío, listas decorativas. Directo a construir y mostrar. - **Relación con Victor:** Victor ratifica el diseño (L1-L3). Cambios de marca (paleta/logo) requieren su visto bueno. --- ## III. CONTEXTO DEL PROYECTO **Problema (E-Myth):** Rebelocity depende de personas; cuando alguien clave se va, el conocimiento se va. El Centro de Comando convierte el negocio en un **sistema visible y operable**: cada área es un *frente*, cada proceso un *LoopX*, y la inteligencia + documentación está a un clic. **Arquitectura de superficies:** - **HOY · Home del Equipo** (`BRD-REB-HOY-Home-v01.html`) — donde el equipo opera. Topbar + menú izquierdo + feed vivo. - **Centro de Comando · Dirección** (`BRD-REB-CentroComando-Direccion-v01.html`) — torre de control. Frentes como tarjetas + drawer de detalle. - **Páginas centrales de frente** — una por frente, con la plantilla de `BRD-REB-Frente-Eventos-v01.html`. **Frentes del negocio (del mapa mental):** Dirección · Operación-Eventos · RClub · Ventas/Sponsors · Marketing/Branding/Redes · Relaciones-PR-Prensa · RRHH/Equipo · Admin (Finanzas+Legal+Contraloría). --- ## IV. ESTADO ACTUAL — ARTEFACTOS YA CONSTRUIDOS Todos en `IB-REB-Rebelocity/`: | Archivo | Qué es | Estado | |---|---|---| | `BRD-REB-HOY-Home-v01.html` | Home del equipo (HOY vivo, menú izquierdo, feed) | ✅ v01 | | `BRD-REB-CentroComando-Direccion-v01.html` | Torre de control (frentes + drawer, deep-link por #hash) | ✅ v01 | | `BRD-REB-Frente-Eventos-v01.html` | **PLANTILLA** de página central de frente | ✅ v01 | | `MePB-REB-CentroComandoEnABox-Metodologia-v01.md` | Modelo replicable (producto) | 🟡 borrador | | `MIN-REB-CentroComando-20260625-v01.md` | Minuta viva del proyecto | 🟢 activa | **Calculadoras vivas existentes (integrar, no reconstruir):** - `PB-REB-Rebelocity/SIM-REB-Sponsorship-CalculadoraEscenarios-v01.html` (2026) - `PB-REB-Rebelocity/SIM-REB-Sponsorship-CalculadoraEscenarios-2027-v01.html` (2027) - `SIM-REB-Corredores-Calculadora-v01.html` - `../IB-XX-Maestro/IB-XX-PLAN/IB-XX-PLAN-REB/SIM-REB-RClub-CalculadoraMonetizacion-v01.html` --- ## V. SISTEMA DE DISEÑO (la spec autocontenida) ### V.1 Tipografía Inter (Google Fonts), pesos 400-900. `font-family:'Inter',-apple-system,sans-serif`. ### V.2 Paleta — 3 temas (`data-theme`: oscura default · clara · híbrida) Azul oscuro Rebelocity (poco morado, rojo solo como acento puntual de RClub y estados críticos). **Copiar tal cual:** ```css :root, :root[data-theme="oscura"]{ --bg:#080d18; --card:#101830; --card2:#172139; --border:#223052; --brand:#0e2148; --brand2:#163a72; --t1:#f4f7fd; --t2:#d8e0f2; --t3:#aab6d6; /* texto pequeño casi blanco */ --accent:#3f86e0; --sky:#5b9bd5; --mint:#34c7ba; --grn:#4fbf80; --gold:#d9a85a; --steel:#8ea4d2; --red:#e0584c; --accent-bg:#10243f; --sky-bg:#12243c; --mint-bg:#0d2b2a; --grn-bg:#11301f; --gold-bg:#2c2515; --steel-bg:#19223a; --red-bg:#2c1512; --pill:#172139; } :root[data-theme="clara"]{ --bg:#eef2fb; --card:#ffffff; --card2:#f4f7fd; --border:#dde4f2; --brand:#0e2148; --brand2:#1c4488; --t1:#0d1730; --t2:#33415f; --t3:#5b6a8a; --accent:#1f5fc0; --sky:#2c6aa8; --mint:#0e8f86; --grn:#2f7d52; --gold:#b8893b; --steel:#46618f; --red:#c0392b; --accent-bg:#e2ecfb; --sky-bg:#e4eef9; --mint-bg:#dcf2ef; --grn-bg:#e2f1e8; --gold-bg:#f5ecd8; --steel-bg:#e8edf7; --red-bg:#fbe4e2; --pill:#eef2fb; } :root[data-theme="hibrida"]{ --bg:#101728; --card:#18203a; --card2:#202a47; --border:#2d3a5c; --brand:#0e2148; --brand2:#1a3f7a; --t1:#eef2fb; --t2:#cdd7ee; --t3:#a3b0d2; --accent:#4d8fe0; --sky:#6ba0d6; --mint:#2fb3a8; --grn:#4fbf80; --gold:#d2a155; --steel:#8ba1cf; --red:#df6055; --accent-bg:#13294a; --sky-bg:#162a47; --mint-bg:#143230; --grn-bg:#163320; --gold-bg:#302816; --steel-bg:#1d2742; --red-bg:#321a16; --pill:#202a47; } ``` ### V.3 Logo Rebelocity (recreación SVG · en cuadro blanco) Va dentro de un `` con `background:#fff`, `border-radius:9px`, padding. **Reemplazable por el asset oficial cuando Victor lo entregue.** ```html R ``` ### V.4 Toggle de tema — UN SOLO BOTÓN que cicla ```js const THEMES=[['clara','☀️ Claro'],['hibrida','◑ Híbrido'],['oscura','🌙 Oscuro']]; function applyTheme(t){document.documentElement.setAttribute('data-theme',t); document.getElementById('themeBtn').textContent=(THEMES.find(x=>x[0]===t)||THEMES[2])[1]; try{localStorage.setItem('reb--theme',t);}catch(e){}} function cycleTheme(){const i=THEMES.findIndex(x=>x[0]===cur);applyTheme(THEMES[(i+1)%THEMES.length][0]);} ``` Default `oscura`. Persistir en localStorage con clave única por página. ### V.5 Shim `sendPrompt` (botón SherpaX → chat de Jay) Incluir en cada página. Usa `window.cowork.sendPrompt` si existe; si no, copia al portapapeles con toast. ```js (function(){if(typeof window.sendPrompt==='function')return; function toast(m){var d=document.getElementById('jt');if(!d){d=document.createElement('div');d.id='jt';d.style.cssText='position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#0e2148;border:1px solid rgba(255,255,255,.3);color:#fff;padding:9px 15px;border-radius:9px;font-size:12px;z-index:99';document.body.appendChild(d);}d.textContent=m;clearTimeout(d._t);d._t=setTimeout(()=>{d.remove();},3200);} window.sendPrompt=function(t){try{if(window.cowork&&window.cowork.sendPrompt)return window.cowork.sendPrompt(t);if(navigator.clipboard){navigator.clipboard.writeText(t).then(()=>toast('Prompt copiado — pégalo en el chat de Jay'),()=>toast(t));}else toast(t);}catch(e){toast(t);}};})(); ``` ### V.6 Componentes canónicos (clases ya definidas en los 3 archivos) - **topbar** índigo-navy con gradiente `linear-gradient(100deg,var(--brand),var(--brand2))`, alto 60px, `.logobox` blanco + marca + `.topright` (links + themeBtn + botón Jay). - **layout** = `.side` (menú izquierdo 230-244px) + `.main` (máx ~1040-1060px centrado). - **navitem** del sidebar (ícono + label + tag opcional). - **cards** de frente (`.card` con barra de color, ícono, estado-pill, lead). - **drawer** lateral (Comando) con detalle de frente. - **LoopX** (`.lstep`) — 4 fases con dueño. - **checklists** (`.chk` con `.box` marcable, persistente en localStorage). - **ev** (tarjeta de evento), **feed blocks**, **notice** ámbar (NO rojo) para avisos. ### V.7 Reglas de rutas (portabilidad) - Todas las páginas viven en `IB-REB-Rebelocity/` → enlaces entre superficies son **relativos simples** (`BRD-REB-Frente-X-v01.html`). - Calculadoras en `PB-REB-Rebelocity/...` → `./PB-REB-Rebelocity/...` desde la raíz REB. - Calc RClub en Maestro → `../IB-XX-Maestro/IB-XX-PLAN/IB-XX-PLAN-REB/SIM-REB-RClub-CalculadoraMonetizacion-v01.html`. - iframes de calculadora solo resuelven al abrir **desde el vault** (no como copia suelta). Documentarlo. - **Validación obligatoria antes de entregar:** `node --check` del bloque `