# Dashboard Ticksy para hosteleros · prototipo en código

Versión en código del prototipo diseñado en Claude Design (14 pantallas, móvil 390 px,
Ticksy Design System 2.0). HTML + CSS + JS sin build: se abre con cualquier servidor
estático y se puede iterar directamente con Claude Code.

## Arrancar

```bash
npx serve .            # o: python3 -m http.server 8080
```

Abre `http://localhost:3000/` (o el puerto que te dé). `index.html` es el Dashboard; el
resto de pantallas se navegan desde él. Hace falta servidor (no `file://`) porque las
fuentes y los scripts se cargan por HTTP.

Una barrita flotante permite cambiar entre **Oscuro** (`tpv-dark`, el tema del prototipo)
y **Claro** (`light`, el que el TDS asigna al backoffice). También vale `?theme=light` en
la URL. La barra la pinta `js/theme.js`; quítala cuando pases a producto.

## Estructura

```
index.html              Dashboard (Inicio)
ventas.html salud.html margenes.html canales.html control.html
prevision.html carta.html clientes.html ritmo.html      ← secciones (nivel 1)
aviso.html decisiones.html costes.html copiloto.html    ← nivel 2
css/tokens.css          Tokens del TDS generados desde ds/ticksyds/tokens.json
css/app.css             Variables app-* por tema + clases de la estructura repetida
js/theme.js             Tema (tpv-dark / light) + barra de desarrollo
js/ds-mount.js          Monta los componentes React del TDS en los slots data-ds
ds/ticksyds/            Ticksy Design System 2.0: bundle.js, bundle.css, index.d.ts, tokens.json, README.md
design-system/pulso/    MASTER.md (reglas Bento sobre el TDS) y pages/copiloto.md (override del Copiloto)
docs/superpowers/       Spec y plan del rediseño Bento, mockup aprobado y generador del gráfico de Ventas
vendor/                 React 18 UMD (el bundle del TDS es React)
```

## Cómo está hecho

- **Colores**: ningún hex en las pantallas. Todo son variables del TDS (`--bg-surface`,
  `--text-accent`, `--status-warning`…) o de la capa `--app-*` de `css/app.css`, que es
  donde se decide, por tema, lo que el TDS no nombra (texto de apoyo, tinta de gráficos,
  banda del rango esperado, chip seleccionado, colores de estado para texto, sombra del
  hero).
- **Tipografía**: Rubik 300/400 únicamente (regla del TDS). La escala es una escala
  móvil derivada de la del TPV (44/52 número grande, 33/40 y 28/36 números de tarjeta,
  20/24 título de pantalla en versalitas, 16/22 cuerpo, 14/16 etiquetas en versalitas,
  13/18 apoyo). Va en las clases de `css/app.css`.
- **Layout**: rejilla Bento de 6 columnas (`.bento`) con tiles de tamaño variable
  (`.tile`, `.tile--third`, `.tile--wide`, `.tile--tall`, `.tile--hero`, `.tile--row`). La
  anatomía de cada tile (`tile__head → tile__figure → tile__note`) y sus visualizaciones
  (`tile__kv`, `tile__bar`, `tile__cols`, `tile__table-row`, `tile__list-row`) van en clases;
  el inline se reserva para valores de dato (anchos de barra, `--i` de la animación,
  columnas de tabla, geometría de SVG). Regla de tamaño: el dinero es hero, la sección con
  avisos crece en alto, la que lleva barras ocupa el ancho, el resto cuadrado. Las reglas
  completas están en `design-system/pulso/MASTER.md`.
- **Componentes del TDS**: Icon, Badge, Button y Toggle se montan reales desde el bundle
  con `<span data-ds="Icon" data-props='{"name":"nav_back","size":24}'>`. Los botones que
  navegan son `<a>` con el estilo del botón para que el enlace funcione sin JS.
- **Gráficos**: el de Ventas (`.chart`) es una curva suavizada con media móvil de 3 días,
  área degradada, línea de lo esperado, rejilla semanal y tooltip de hoy; se genera con
  `docs/superpowers/specs/assets/2026-09-22-pulso-bento-gen-chart.py` a partir de los 30
  valores diarios. El antes/después de Decisiones es SVG inline y las barras son divs. Los
  colores del SVG van en clases o en `style` con `var()`.
- **Datos**: los de la propuesta Pulso para el local de pruebas (Poke & Salad). Control y
  Clientes llevan cifras de ejemplo marcadas con un Badge.

## Actualizar el sistema de diseño

Sustituye `ds/ticksyds/components/bundle.js`, `bundle.css`, `index.d.ts` y `tokens.json`
por los del artefacto «Ticksy Design System 2.0» y regenera `css/tokens.css`:
`:root` lleva primitivos, espaciado, radios y sombras; `[data-theme="…"]` los
semánticos de cada modo (tpv-dark por defecto).

## Siguiente paso sugerido

Convertir cada pantalla en componentes (React/Vite encaja de forma natural con el bundle
del TDS; también sirve cualquier otro stack) y sustituir los datos fijos por la API de
Ticksy. La estructura de tarjetas (`label_row → número grande → línea de estado`) es la
misma en todas las secciones, así que un único componente `SectionCard` cubre el Dashboard.