--- tipo: CP (Control Plane · código canónico) entidad: XX (Maestro / infraestructura) nombre: DashboardGovernance version: v02 actualizado: 2026-07-06 owner: Victor sherpa: Jay aplica_a: Todo dashboard HTML del vault Intellibanks (capa visual del ecosistema) --- # Gobernanza de dashboards · capa visual del ecosistema Este documento es la **fuente única de verdad** del diseño y comportamiento de todo dashboard HTML del vault. Todo tablero — nuevo o existente — debe cumplirlo. El cumplimiento no se hace a mano: se hereda de un **kit compartido** y se verifica con un **validador**. Mejorar el estándar = editar el kit una vez y re-propagarlo; nunca corregir tablero por tablero. ## Principio rector Un solo kit define el estándar; los tableros solo aportan su contenido. Si algo se ve o se comporta distinto entre dos dashboards, es un bug del kit o del tablero, no una variación válida. La consistencia se logra quitando decisiones, no vigilándolas. ## Los archivos del sistema (viven en `IB-XX-Maestro/`) - `EL-DashboardStandard-v01.js` — el **kit**. Se incrusta en cada tablero y aplica todo el estándar en runtime. - `SK-EL-DashboardHomogenize-v01.js` — barre todos los `.html` del vault e incrusta el kit + sella los atributos (`data-updated`, `data-group`, `data-doc`). - `SK-EL-DeepRecolor-v01.js` — remapea la paleta de cada tablero a Home-Live por rol de variable. - `SK-EL-ThemeNormalize-v01.js` — unifica la convención de tema a `oscura/clara`. - `SK-EL-DashboardValidator-v01.js` — audita el cumplimiento de cada tablero y reporta frescura. - `TPL-XX-Dashboard-Starter-v01.html` — plantilla base para clonar un dashboard nuevo ya compliant. ## Estándar de 10 puntos (obligatorio) 1. **Tema oscuro por default**, con toggle claro/oscuro. El kit es la **autoridad única** de tema: provee el ÚNICO botón (🌙/☀️ en la barra) y **oculta cualquier control de tema propio** del tablero (íconos luna/sol, botones "Tema", `toggleDark`, segmentos `Claro/Oscuro`, etc.). Convención canónica: `data-theme="oscura|clara"` (+ `data-t="dark|light"` para tableros que lo usen) en ``. Prohibido inventar convenciones nuevas; si un tablero heredado usa otra (inglés, `data-t` en español…), el `ThemeNormalize` la migra a la estándar. 2. **Paleta Home-Live** vía variables CSS (ver tabla abajo). Nada de negros puros (`#0a0a0a`) ni acentos fuera de marca. 3. **Fecha de última actualización** visible (atributo `data-updated="AAAA-MM-DD"` en ``; el kit la muestra en la estampa). 4. **Fecha actual viva** en la estampa. 5. **Nombre del documento fuente** (`data-doc` = nombre del archivo; el kit lo muestra en la estampa). 6. **Firma de familia** (`data-group`) — un toque de color sobre la misma base Home-Live: cinta superior de 4px + tinte de barra/estampa + chip con el nombre de la familia. 7. **Título de página** con tipografía Inter + degradado del color de firma, **alineado a la izquierda** y de **tamaño prominente** (`clamp(21px,2.3vw,27px)`) como HOY. Subtítulo opcional al frente con la clase `.el-subtitle`. 8. **Menú de navegación izquierdo** consistente con HOY: colapsable, empuja la página, **siempre abre por default** (el ☰ lo colapsa por vista), y separa **🌐 Equipo (global)** de **👤 Personal**. Los tableros con menú propio (HOY, SOO, Home-Live) lo conservan; WikiX y páginas "Home" no lo reciben (redundante); el resto sí. 9. **Filtros amplios** (barras con ≥4 controles) se compactan en un **acordeón** con botón "🔍 Filtros" (colapsados por default). 9. **Botón 🏠 Home** en todas las páginas (menos en HOY) que lleva al arranque del día (HOY). 10. **Texto pequeño/tenue casi-blanco** en modo oscuro para legibilidad. ## Paleta Home-Live (por rol) | Rol | Oscuro | Claro | |---|---|---| | Fondo | `#0f0e1a` | `#f4f4fb` | | Superficie / card | `#1a1830` | `#ffffff` | | Superficie 2 | `#221f3a` | `#f7f6fd` | | Línea / borde | `#2c2950` | `#e6e4f2` | | Marca | `#252154` | `#2e2a6b` | | Texto | `#eceaf8` | `#1d1b35` | | Texto 2 (tenue) | `#bdb9d6` | `#4a4766` | | Texto 3 (tenue+) | `#9a96bd` | `#7d79a0` | | Verde / ok | `#5cc98a` | `#2f7d52` | | Ámbar / warn | `#d9a85a` | `#b8893b` | | Rojo / danger | `#f0766c` | `#b3261e` | | Azul / info | `#6fa6e0` | `#2c5a8c` | El acento primario de cada tablero toma el **color de firma de su familia** (ver abajo). ## Firmas de familia (`data-group`, asignado por ruta) | Familia | data-group | Color | Regla de ruta | |---|---|---|---| | EmpowerLabs | `empowerlabs` | Periwinkle `#8a90f0` | default | | Posta · Clientes | `posta` | Periwinkle `#8a90f0` | ruta contiene `Posta` / `IB-PO-` / `IB-Clientes/` | | LoopX | `loopx` | Indigo `#5b53c9` | ruta contiene `PB-LoopX` (salvo Posta) | | Rebelocity | `rebelocity` | Coral `#f2864b` | `IB-REB-` | | MasterPlaybooks | `masterplaybooks` | Dorado `#e0b24d` | `IB-MPX-` | | WikiX | `wikix` | Azul `#5fa8e0` | `IB-WikiX` | | Maestro · infra | `maestro` | Acero `#9aa0c8` | `IB-XX-` | **Teal `#34c7ba` queda libre** (sin asignar) para uso futuro. ## Navegación · criterio personal vs global El menú replica el criterio de HOY. **Global (🌐 Equipo):** Hub, WORX OS Home, SOO, Frentes, Semanal EmpowerLabs, Esta semana, Logros, Agenda viva, Buzón, WikiX, Mapa Cognitivo, Factorías Editoriales, Skills Bank, Idea Bank, Calculadoras, Experimentos, Rally. **Personal (👤):** Tablero de NEXTs, Brain OS, ROI Tracker, Brain Code Map. Todo tablero personal nuevo se agrega a `MENU_PERSONAL` en el kit; nunca se mezcla con lo global. **Dónde NO se inyecta el menú del kit:** páginas con menú propio (HOY, SOO, Home-Live — detectadas por `.navitem`/`#menuToggle`), páginas de la familia **WikiX** (ya tienen su hub), y páginas **"Home"** (redundante — la página ya es un home). El botón 🏠 sí aparece en todas menos en HOY. No debe haber botones "Home" azules por-página (los quitó `SK-EL-RemoveHomeButtons`); el 🏠 del kit es el único. ## Comportamiento de links - Links a `.html` → abren el dashboard con el opener consciente del vault (`computer://` en Cowork; ruta relativa fuera). - Links a `.md` → abren con la app de Intellibanks vía `computer://` (el kit los intercepta salvo que el tablero tenga su propio manejador). - La barra de control (☰ · 🏠 · 🌙/☀️ · ⟳) vive **abajo-derecha** para no encimarse con los títulos. ## Cadencia de actualización - **Barrido semanal:** cada **viernes 3:00pm** corre homogenize + recolor + validador y genera el reporte de frescura. - Un dashboard con `data-updated` de **más de 7 días** se marca *desactualizado* en el reporte. - Al actualizar el contenido real de un tablero, se re-corre el homogenizador (re-sella `data-updated` con la fecha del archivo). ## Navegación family-aware (🏠 y menú por `data-group`) Desde el room `ROOM-SistemaVisual` (2026-07-06), el kit es **family-aware**: el botón 🏠 y el menú inyectado ya no apuntan siempre al HOY de EmpowerLabs — dependen de la familia (`data-group`) de la página, vía un mapa `FAMILY_NAV` en `EL-DashboardStandard-v01.js`. - **`empowerlabs`** → home = `BRD-EL-HOY-Dashboard-v01.html`; menú = 🌐 Equipo + 👤 Personal (el de siempre). - **`rebelocity`** → home = `IB-REB-Rebelocity/BRD-REB-HOY-Home-v01.html`; menú = 🧭 Frentes (Centro de Comando, Eventos, Ventas·Sponsors, Ventas·Tickets, Admin, CEO Home) + ⚙️ Mando & herramientas (Pronóstico 2026H2, Calculadoras Sponsors 2026/2027, MacroLoopX, RebelocityNews, WikiX Rebelocity). Ratificado en `SPEC-REB-SistemaVisual-MenuNav-v01`. - **Sin entrada propia** (`posta`, `masterplaybooks`, `wikix`, `loopx`, `maestro`) → usan por default el home/menú de `empowerlabs` hasta que se defina el suyo. - Páginas con menú propio (`ownNav`, ej. `BRD-REB-HOY-Home`) conservan su menú; el kit solo les aporta paleta/estampa/tema, no inyecta el menú de la familia. - Regla de oro: agregar una familia nueva = una entrada nueva en `FAMILY_NAV` (una vez en el kit) + re-propagar. Nunca se edita página por página. ## Mini-sitios (menú propio por `data-site`) Un **mini-sitio** es un conjunto de páginas HTML con vida propia dentro de una familia (ej. **SOO**, **Demand Gen**). La regla, ratificada 2026-07-08: **un mini-sitio NO muestra el menú general de EL HOY ni el de su familia — todas sus páginas llevan el menú del mini-sitio**, con 🏠 → home del mini-sitio y una salida explícita al ecosistema. Es lo análogo a lo que hace Rebelocity con su propio menú, pero para sub-conjuntos dentro de una familia. - Se activa con el atributo **`data-site=""`** en `` (además de su `data-group`, que sigue dando el color de firma). El mini-sitio vive dentro de su familia visualmente, pero navega dentro de sí mismo. - El kit tiene un mapa **`SITES`** en `EL-DashboardStandard-v01.js` (paralelo a `FAMILY_NAV`) que se chequea **antes** que la familia: `ctx()` devuelve el mini-sitio si hay `data-site`, si no la familia. - Toda página del mini-sitio que **no** sea su home y **no** tenga menú propio (`ownNav`) recibe el menú del mini-sitio inyectado (aunque su nombre no diga "Home"). La home del mini-sitio conserva su propio menú. - Mini-sitios definidos: **`dg`** (Demand Gen — home `BRD-EL-DG-Home-v01.html` + EmpowerScan Landing/Calculadora/Logística) y **`soo`** (Sistema Operativo — home `BRD-EL-SOO-Home-v01.html` + mapas VIZ). Ambos incluyen una sección "↩ Ecosistema" con salida a EmpowerLabs · HOY. - Regla de oro: agregar un mini-sitio nuevo = una entrada nueva en `SITES` (una vez en el kit) + tagear sus páginas con `data-site` + re-propagar. El homogenizador preserva `data-site`. Las entregas a cliente (`Entrega-*`) siguen siendo micro-sitios independientes (opt-out con `data-standalone="1"`), distintos de un mini-sitio. ## Cómo nace un dashboard nuevo (checklist) 1. Clonar `TPL-XX-Dashboard-Starter-v01.html`. 2. Guardarlo bajo el IntelliBank correcto con naming canónico `TIPO-ENTIDAD-Proyecto-Nombre-vNN.html`. 3. Poner el título (y subtítulo si aplica) y el contenido usando **solo variables de la paleta** (`var(--bg)`, `var(--panel)`, …). 4. Correr `node SK-EL-DashboardHomogenize-v01.js` — sella atributos e incrusta el kit. 5. Correr `node SK-EL-DashboardValidator-v01.js` — confirma cumplimiento. 6. Registrarlo en el Hub de Dashboards. ## Gobernanza del propio estándar Cambiar el estándar = editar **solo** `EL-DashboardStandard-v01.js` (y esta doc) y re-propagar con el homogenizador. Ningún cambio visual se hace directo en un tablero: se hace en el kit para que las 123+ páginas lo hereden. Este documento se versiona; cada cambio de estándar sube la versión. --- *CP-XX-DashboardGovernance-v01 · capa visual Intellibanks · v03 · 2026-07-08 · Owner: Victor · Sherpa: Jay*