sistema A2S

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

@@ -0,0 +1,68 @@
+# 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.