# TASK-039-real-server-panel-data-density-pass

## Goal
Mejorar la densidad informativa y la claridad de las tarjetas de servidores reales, aprovechando mejor los datos ya disponibles sin recargar visualmente la landing.

## Context
Tras ocultar los placeholders cuando existen snapshots reales y preparar una CTA de conexión en español, el panel real ya tiene buena base. Sin embargo, todavía puede ganar valor mostrando mejor la información disponible y organizando mejor la jerarquía interna de las tarjetas.

## Steps
1. Revisar la composición actual de las tarjetas de servidores reales.
2. Revisar qué datos ya están disponibles o pasarán a estar disponibles tras la task de resúmenes históricos.
3. Mejorar la jerarquía interna de cada tarjeta:
   - nombre
   - estado
   - mapa
   - jugadores
   - región
   - última captura
   - CTA
   - métricas resumidas si existen
4. Hacer que la tarjeta transmita más información útil sin volverse pesada.
5. Mantener coherencia visual con la landing actual.
6. Mejorar legibilidad en desktop y móvil.
7. No rediseñar toda la página ni añadir nuevas secciones grandes.

## Files to Read First
- AGENTS.md
- ai/repo-context.md
- frontend/index.html
- frontend/assets/js/main.js
- frontend/assets/css/styles.css
- backend/app/payloads.py
- backend/app/routes.py

## Expected Files to Modify
- frontend/index.html
- frontend/assets/js/main.js
- frontend/assets/css/styles.css

## Constraints
- No tocar backend salvo si es estrictamente necesario por alineación menor con payloads ya existentes.
- No añadir librerías nuevas.
- No romper el fallback ni la CTA Conectar.
- No hacer cambios destructivos.
- Mantener la mejora centrada en claridad, jerarquía y densidad informativa.

## Validation
- Las tarjetas reales muestran mejor la información útil.
- La jerarquía interna mejora.
- La experiencia visual sigue siendo limpia.
- El panel se entiende mejor en desktop y móvil.

## Change Budget
- Preferir menos de 3 archivos modificados.
- Preferir menos de 180 líneas cambiadas.
## Outcome
- `frontend/assets/js/main.js` reorganiza la jerarquía interna de las tarjetas reales para destacar nombre, estado, población actual, mapa, región, última captura, CTA y métricas resumidas.
- `frontend/assets/css/styles.css` refuerza la densidad informativa con una columna compacta de estado/población y una fila de quick facts legible en desktop y móvil.
- La CTA `Conectar`, la tendencia reciente y el fallback existente se mantienen operativos.

## Validation Result
- Ejecutado: `node --check frontend/assets/js/main.js`.
- Resultado: sintaxis JavaScript válida tras el ajuste de jerarquía y densidad visual.
- Revisado en código: la versión enriquecida de la tarjeta conserva `steam://connect/<host>:<game_port>` para snapshots reales y mantiene el fallback cuando no hay datos reales utilizables.

## Decision Notes
- La mejora de densidad se concentró dentro de la tarjeta existente, sin añadir nuevas secciones grandes ni cambiar la arquitectura del panel.