# BiomecLab v4.0.5 — CSS Refactor Foundation

## Objetivo

v4.0.5 no agrega features biomecánicas ni cambia el flujo de análisis. Esta versión reduce deuda visual profunda para que BiomecLab pueda seguir evolucionando sin acumular más parches CSS por versión.

La prioridad es estabilizar el sistema visual existente, no rediseñar la app.

## Cambios de foundation

- Consolidar los tokens principales en un único `:root` de referencia.
- Mantener la raíz de `prefers-color-scheme: light` solo como override de tema.
- Preservar el look oscuro/profesional actual.
- Mantener componentes existentes: panels, cards, badges, estados, actions rows y workspaces.
- Evitar nuevas superficies o variantes visuales si existe un token/componente reutilizable.
- Dejar explícito que el próximo refactor mayor debe ser modularización de `app.js`, no más acumulación visual.

## Contrato de CSS desde v4.0.5

1. Los tokens globales se definen al inicio del archivo.
2. Nuevos componentes deben reutilizar `--component-*`, `--state-*`, `--panel-*`, `--line-*` y radios existentes.
3. No se deben agregar nuevos bloques `:root` por versión.
4. Si una versión requiere nuevos tokens, deben agregarse al `:root` principal con nombre estable.
5. Los overrides de tema deben vivir solo en media queries o scopes explícitos.
6. Los cambios visuales deben preservar legibilidad en desktop, tablet y mobile.

## Qué NO toca esta versión

- Motor de pose.
- MediaPipe timestamp recovery.
- Storage local.
- API PHP.
- CSRF.
- Service Worker `/api/` exclusion.
- Catálogo de tests.
- Reporte coach/alumno/técnico.
- Flujo Boulder.

## QA visual recomendado

Revisar manualmente en Hostinger:

1. Inicio: sin máscaras claras y con cards legibles.
2. Nuevo screening: ruta coach, setup, Capture Wizard y resultados se mantienen ordenados.
3. Reportes: coach brief, alumno brief y export técnico siguen separados.
4. Demo / QA: UI System y CSS Refactor Foundation visibles sin invadir el flujo principal.
5. Datos y privacidad: controles y badges mantienen contraste.
6. Mobile 375 px: sin overflow horizontal.
7. Tablet 768 px: navegación usable y panels en columna limpia.
8. Desktop 1440 px: jerarquía visual clara.

## Criterio de salida

v4.0.5 queda correcta si el producto se ve igual o más consistente que v4.0.3, el Test Runner valida la raíz CSS principal y no aparece ninguna regresión visual en Screening/Reportes.