# Copilotoprompter — Design System

Handoff consolidado del sistema visual usado en las 12 pantallas del prototipo. Pensado como referencia para desarrollo.

---

## 1. Tokens de color

Tema **dark-only** (no hay variante clara en el alcance actual).

### Backgrounds
| Token            | Valor       | Uso                                                |
|------------------|-------------|----------------------------------------------------|
| `bg.canvas`      | `#0A0A0B`   | Fondo raíz de ventana / app                        |
| `bg.surface`     | `#131316`   | Cards, paneles, listas                             |
| `bg.elevated`    | `#1C1C21`   | Hover de cards, dropdowns, popovers                |
| `bg.overlay`     | `rgba(0,0,0,0.6)` | Backdrop modales                              |

### Foreground
| Token            | Valor      | Uso                                       |
|------------------|------------|-------------------------------------------|
| `fg.primary`     | `#F4F4F5`  | Texto principal                           |
| `fg.secondary`   | `#A1A1AA`  | Texto secundario, descripciones           |
| `fg.tertiary`    | `#71717A`  | Texto auxiliar, labels mono, captions     |
| `fg.inverse`     | `#0A0A0B`  | Texto sobre `accent.primary` sólido       |

### Borders
| Token              | Valor      | Uso                              |
|--------------------|------------|----------------------------------|
| `border.subtle`    | `#1F1F24`  | Separadores internos             |
| `border.default`   | `#26262C`  | Borde estándar de cards          |
| `border.strong`    | `#36363E`  | Hover, foco, énfasis             |

### Accents
| Token                    | Valor                     | Uso                                |
|--------------------------|---------------------------|------------------------------------|
| `accent.primary`         | `#8B5CF6`                 | Color de marca, CTA primarios      |
| `accent.primary.muted`   | `rgba(139,92,246,0.14)`   | Cápsulas de icono, ring de selección |
| `accent.success`         | `#22C55E`                 | Estado OK, badges activos          |
| `accent.success.muted`   | `rgba(34,197,94,0.14)`    | Badges sutiles "✓"                 |
| `accent.warning`         | `#F59E0B`                 | Picos de vumeter, alertas          |
| `accent.danger`          | `#EF4444`                 | Errores, acciones destructivas     |
| `accent.info.muted`      | `rgba(56,189,248,0.14)`   | Badge informativo (ej. "Privacidad máxima") |

---

## 2. Tipografía

### Familias
- **UI:** `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif`
- **Mono:** `"JetBrains Mono", ui-monospace, "SF Mono", monospace`
  - Usada en: indicadores de paso, timestamps, valores numéricos, labels técnicos, códigos.

### Escala
| Token          | Tamaño / line-height | Uso                              |
|----------------|----------------------|----------------------------------|
| `text.xs`      | 11 / 1.4             | Captions, hints                  |
| `text.sm`      | 13 / 1.5             | Texto secundario, body compacto  |
| `text.base`    | 14 / 1.5             | Body por defecto                 |
| `text.lg`      | 16 / 1.5             | Subtítulos                       |
| `text.xl`      | 20 / 1.4             | Títulos de sección               |
| `text.2xl`     | 24 / 1.3             | Headers de página                |
| `text.3xl`     | 32 / 1.15            | Títulos de onboarding / hero     |

### Pesos y reglas
- **400 / 500 / 600** — no usar 700.
- `letter-spacing: -0.02em` en `text.2xl` y mayores.
- `letter-spacing: 0.08em` en mono uppercase (labels técnicos).
- `text-wrap: balance` en titulares; `text-wrap: pretty` en párrafos.

---

## 3. Espaciado y layout

Escala base de 4px.

| Token       | Valor |
|-------------|-------|
| `space.1`   | 4px   |
| `space.2`   | 8px   |
| `space.3`   | 12px  |
| `space.4`   | 16px  |
| `space.5`   | 20px  |
| `space.6`   | 24px  |
| `space.8`   | 32px  |
| `space.10`  | 40px  |
| `space.12`  | 48px  |
| `space.16`  | 64px  |

**Radii**
- `radius.sm` 6px · botones pequeños, badges
- `radius.md` 8px · inputs, cápsulas de icono pequeñas
- `radius.lg` 12px · cards, dropdowns
- `radius.xl` 16px · ventanas flotantes (Floating Copilot)

**Sombras** — solo en elementos elevados sobre fondo no controlado.
- `shadow.window` `0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset`

---

## 4. Componentes clave

### Botones
- **Primary**: `bg: accent.primary`, `fg: fg.inverse`, altura 40px, padding `0 24px`, `radius.md`. Hover: `accent.primary` con `filter: brightness(1.08)`.
- **Secondary**: `bg: bg.elevated`, borde `border.default`, `fg.primary`. Hover: borde `border.strong`.
- **Ghost**: sin borde, `fg.secondary` → `fg.primary` en hover.
- **Icon button**: 32×32, `radius.md`, sin borde, hover `bg.elevated`.

### Inputs / Selects
- Altura **40px**, `bg.surface`, borde `border.default`, `radius.md`.
- Foco: borde `accent.primary` + ring 3px `accent.primary.muted`.
- Placeholder en `fg.tertiary`.

### Cards (`dev-card`)
- `bg.surface`, `border.default`, `radius.lg`, padding `20–24px`.
- Header con icono cápsula 40×40 (`accent.primary.muted` + glyph `accent.primary` 18–20px Lucide).
- Hover en cards interactivas: `border.strong` + lift `-1px` + `bg.elevated`.

### Radio cards (onboarding · motor IA)
- Estado por defecto: borde `border.default`, radio circular vacío.
- **Seleccionada**: borde `accent.primary` + ring 3px `accent.primary.muted` + tinte de fondo `accent.primary.muted` muy diluido + icono invertido (fondo `accent.primary` sólido + glyph `fg.inverse`).

### Badges
- Altura 22px, `radius.sm`, mono 11px.
- Variantes: `success.muted`, `info.muted`, `primary.muted`, neutral mono.

### Toggle
- Track 36×20, `radius: 999px`. Off: `border.default`. On: `accent.primary`. Knob blanco 16px con sombra ligera.

### Slider
- Track 4px `border.default`, fill `accent.primary`, thumb 16px blanco con sombra. Hover thumb crece a 18px.

### Vumeter
- 24 barras horizontales, `radius: 2px`, gap 2px.
- Verde por defecto (`accent.success`) → amarillo en pico (`accent.warning`).
- Animación con sin/cos + decay.

---

## 5. Iconografía

- **Lucide** como única librería.
- Tamaños: 14, 16, 18, 20, 24px. Stroke 1.75 por defecto.
- Color: heredado del contenedor (`fg.secondary` o `accent.primary`).
- Cápsulas de icono: cuadrado redondeado 32 / 40 px en `accent.primary.muted`, glyph en `accent.primary`.

**Sin SVGs decorativos custom.** Si falta un icono real, usar placeholder cuadrado.

---

## 6. Patrones de pantalla

### Ventanas flotantes (Floating Copilot)
- Ancho fijo, `radius.xl 16px`, `shadow.window`.
- Header arrastrable con título + controles de ventana a la derecha.
- Zonas verticales separadas por `border.subtle` interior.

### Onboarding (800×600)
- Header con título + subtítulo (`text-wrap: balance`).
- Cuerpo central con cards/cápsulas.
- Footer fijo con: ghost "Atrás", indicador "N de 3" con dots (activo en `accent.primary` ringed), CTA primario "Siguiente →".

### Settings
- Layout 2 columnas: nav lateral 240px + contenido. Secciones con título mono uppercase (`fg.tertiary`).

### Listas (Historial / Plantillas)
- Filtros arriba (chips + search input).
- Filas con borde inferior `border.subtle`, hover `bg.elevated`.

---

## 7. Microinteracciones

- Transiciones por defecto: `150ms ease-out` para color/borde, `200ms ease-out` para transform.
- CTAs: la flecha se desplaza `+3px` en hover.
- Selección de card: animación de borde + ring sin saltos de layout.
- Estados de loading: texto "Probando…" con dots animados, sin spinners decorativos.

---

## 8. Reglas de contenido

- **Idioma:** español neutro.
- **Sin emojis** salvo casos puntuales (✓ en check de estado tipográfico, no decorativo).
- **Mono solo para datos**: timestamps, valores, contadores, paths.
- **Copy de botones**: verbo + objeto corto. Evitar "Click aquí".

---

## 9. Estructura del paquete

```
export/
├── index.html              # Índice navegable
├── DESIGN.md               # Este documento
├── assets/                 # CSS, JSX y JS compartidos por todas las pantallas
└── NN-slug/
    └── index.html          # Pantalla individual (referencia ../assets/)
```

Las 12 pantallas comparten `styles.css`, `tweaks-panel.jsx`, `icons.jsx` y los JSX/CSS específicos de cada vista.