# Marca y estilos

## Nombre y textos de la marca

Se configuran con variables `VITE_APP_*` del `.env` (plantilla en
`env.example`) y se leen en `frontend/src/utils/appConfig.ts`:

| Variable | Valor por defecto | Dónde sale |
|---|---|---|
| `VITE_APP_NAME` | English World Center | Cabecera, login y título de la pestaña |
| `VITE_APP_COMPANY_NAME` | English World Center | Pie |
| `VITE_APP_COMPANY_URL` | https://englishworldcenter.com | Enlace del pie |
| `VITE_APP_FOOTER_TEXT` | All rights reserved | Pie |

- Las usan `GlobalHeader.vue`, `GlobalFooter.vue`, `LoginView.vue` y
  `main.ts`. Este último pone el título de la pestaña: el `<title>` de
  `frontend/index.html` solo se ve mientras carga la app.
- Son variables de Vite. En producción se fijan al construir, así que después
  de cambiarlas hay que reconstruir `frontend-prod`. En local basta con
  reiniciar `frontend-dev`.

## Logo e imágenes

- `frontend/public/logo.png` es el logo y también el favicon: `index.html` lo
  usa como icono desde `83cbc44`. `frontend/public/favicon.svg` ya no se usa.
- La imagen por defecto de los bots es
  `backend/src/assets/default-bot-image.svg`.

## Colores

Todo está en variables CSS, en el `:root` de `frontend/src/assets/main.css`:

- `--color-primary`: `#A6333D`, el granate de la marca; hover `#8B2A32`.
- `--color-secondary`: `#348AC7`, azul.
- Ojo: `--text-primary` también es el granate, no «el color de texto normal».
  Confundirlo ya causó un bug de color en `AppSelect`.

## Componentes y reglas de estilo

- Los componentes base están en `frontend/src/components/common/`:
  `FormField`, `FormInput`, `BaseButton`, `BaseCard`, `BaseBadge` (niveles
  A1–C2) y `BaseModal`. `FormSelect` es antiguo: para desplegables, usa
  `AppSelect` ([AGENTS.md](../AGENTS.md#desplegables-appselect-nunca-select-nativo)).
- `main.css` también tiene clases utilitarias: espaciado, tamaños de iconos,
  animaciones `fade-in*` y badges de nivel `badge-level-a1` a `badge-level-c2`.
- Reglas del sistema de diseño (vienen del rediseño de estilos de octubre de
  2025):
  1. Nada de estilos inline estáticos (`style="…"`); `:style` solo para
     valores calculados.
  2. Valores siempre con variables CSS.
  3. Componentes base antes que duplicar código.
  4. BEM en los estilos scoped.
  5. Bootstrap solo para la maquetación (grid y flex).
  6. Evitar `!important`, salvo en las utilidades.