comunidadhll/ai/tasks/done/TASK-041-real-server-card-layout-reorganization.md

# TASK-041-real-server-card-layout-reorganization

## Goal
Reorganizar internamente las tarjetas de servidores reales para que aprovechen mejor el espacio horizontal, reduzcan compresión vertical y mejoren la legibilidad de los datos.

## Context
Las tarjetas actuales contienen información útil, pero en una composición demasiado estrecha y alta. Eso hace que varias métricas queden apelotonadas, con mala jerarquía y sensación de desborde. Esta task debe rediseñar la distribución interna de la tarjeta, no la arquitectura funcional del panel.

## Steps
1. Revisar la estructura HTML y JS que renderiza las tarjetas de servidores reales.
2. Reorganizar la composición interna para que la tarjeta tenga una lectura más horizontal y clara.
3. Priorizar visualmente:
   - nombre del servidor
   - estado
   - botón Conectar
   - jugadores
   - mapa
   - región
   - última captura
   - métricas resumidas
4. Reducir altura innecesaria y mejorar la distribución interna de bloques.
5. Mantener la CTA de conexión visible y bien integrada.
6. Mejorar el comportamiento de nombres largos y textos densos.
7. No romper el fallback ni la lógica actual del panel.

## 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

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

## Constraints
- No tocar backend salvo alineación mínima si fuera imprescindible.
- No añadir librerías nuevas.
- No romper la CTA Conectar.
- No hacer cambios destructivos.
- Mantener la mejora centrada en layout y legibilidad.

## Validation
- Las tarjetas reales son más legibles y aprovechan mejor el ancho.
- La jerarquía interna mejora claramente.
- El texto largo deja de sentirse comprimido o desbordado.
- La UI mantiene coherencia visual con el resto de la landing.

## Change Budget
- Preferir menos de 3 archivos modificados.
- Preferir menos de 180 líneas cambiadas.

## Outcome
- `frontend/assets/js/main.js` reorganiza la tarjeta real en dos zonas: cabecera prioritaria con estado, poblacion y CTA, y cuerpo con quick facts, resumen historico y tendencia.
- `frontend/assets/css/styles.css` adapta la tarjeta a una lectura mas horizontal en desktop y endurece el wrapping de nombres y valores largos.
- No fue necesario tocar `frontend/index.html` ni alinear payloads del backend.

## Validation Result
- Ejecutado: `node --check frontend/assets/js/main.js`.
- Resultado: sintaxis JavaScript valida tras la reorganizacion del render.
- Revisado en codigo: la CTA `Conectar` sigue ligada a `steam://connect/<host>:<game_port>` y solo aparece para snapshots reales A2S.
- Limitacion: no se ejecuto una comprobacion visual automatizada del navegador en esta tarea.

## Decision Notes
- La reduccion de altura se resolvio moviendo resumen y tendencia a una composicion interna mas horizontal, sin cambiar la logica de secciones del panel ni el fallback existente.