## Temas disponibles

El portal incluye tres temas visuales:

1. **Oscuro moderno** (`data-theme="dark"`)
2. **Claro minimalista** (`data-theme="light"`)
3. **Atmosferico inmersivo** (`data-theme="immersive"`)

## Tokens CSS

Los tokens se definen en `var-www/assets/styles.css` bajo los selectores `[data-theme="..."]`.

### Tokens comunes

| Token | Uso |
|-------|-----|
| `--bg-primary` | Fondo principal |
| `--bg-surface` | Fondo de tarjetas y navbar |
| `--bg-elevated` | Superficies elevadas |
| `--text-primary` | Texto principal |
| `--text-secondary` | Texto secundario |
| `--text-muted` | Texto atenuado |
| `--accent` | Color de acento |
| `--accent-hover` | Acento en hover |
| `--border` | Bordes |
| `--shadow-*` | Sombras |
| `--engine-*` | Colores de badges de motor |

### Ejemplo: tema oscuro

```css
[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-surface: #141414;
    --bg-elevated: #1f1f1f;
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --accent: #4e85bf;
    --border: #2a2a2a;
}
```

## Tipografia

- **Sans**: Inter, system-ui
- **Mono**: JetBrains Mono

## Transiciones

Los cambios de tema animan `background-color`, `color` y `border-color` durante 300ms.

## Anadir un tema nuevo

1. Copia el bloque de un tema existente en `styles.css`.
2. Cambia el selector a `[data-theme="nuevo"]`.
3. Define nuevos valores para todos los tokens.
4. Anade un boton en `index.html` con `data-theme-value="nuevo"`.
5. Verifica contraste WCAG AA.