Ajustes UI

ai/tasks/done/TASK-043-unified-page-shell-and-section-width-system.md

@@ -0,0 +1,60 @@
+# TASK-043-unified-page-shell-and-section-width-system
+
+## Goal
+Unificar el sistema de anchuras de la pagina para que hero, trailer y panel de servidores compartan el mismo ancho util y se perciban como parte de una misma experiencia visual, eliminando la sensacion actual de secciones con tamanos distintos.
+
+## Context
+La UI actual ya funciona y muestra datos reales, pero las secciones principales no comparten una anchura consistente. Esto hace que la pagina se sienta fragmentada y reduce la sensacion de producto final. El objetivo de esta task es definir un unico sistema de shell/layout para las secciones principales y aplicarlo de forma consistente.
+
+## Steps
+1. Revisar la estructura actual de shells, contenedores y max-width del frontend.
+2. Identificar diferencias de ancho entre:
+   - hero
+   - bloque del trailer
+   - bloque de servidores
+3. Definir un unico ancho maestro para las secciones principales en desktop.
+4. Hacer que hero, trailer y panel de servidores usen el mismo carril visual principal.
+5. Ajustar margenes laterales, paddings y separacion vertical para evitar sensacion de fragmentacion.
+6. Mantener el comportamiento responsive correcto en tablet y movil.
+7. No redisenar el contenido, solo el sistema de layout y anchuras.
+
+## Files to Read First
+- AGENTS.md
+- ai/repo-context.md
+- frontend/index.html
+- frontend/assets/css/styles.css
+- frontend/assets/js/main.js
+
+## Expected Files to Modify
+- frontend/index.html
+- frontend/assets/css/styles.css
+
+## Constraints
+- No tocar backend.
+- No anadir librerias nuevas.
+- No hacer cambios destructivos.
+- Mantener la identidad visual actual.
+- Mantener el trabajo centrado en shell/layout.
+
+## Validation
+- Hero, trailer y panel de servidores comparten el mismo ancho util en desktop.
+- La pagina se percibe mas unificada.
+- No quedan secciones visualmente demasiado estrechas respecto a otras.
+- El responsive sigue funcionando.
+
+## Change Budget
+- Preferir menos de 3 archivos modificados.
+- Preferir menos de 180 lineas cambiadas.
+
+## Outcome
+- `frontend/index.html` introduce un `panel__shell` comun en trailer y servidores para que ambas secciones compartan el mismo carril interior.
+- `frontend/assets/css/styles.css` reemplaza los anchos independientes de hero, trailer y servidores por un sistema unificado con `--page-shell-width` y `--panel-content-width`.
+- El ajuste se mantuvo centrado en layout, paddings y separacion vertical, sin redisenar el contenido.
+
+## Validation Result
+- Revisado en diff: la task queda limitada a `frontend/index.html`, `frontend/assets/css/styles.css` y el archivo de task, dentro del scope esperado.
+- Revisado en codigo: hero, trailer y panel de servidores pasan a compartir un mismo ancho maestro en desktop y un mismo carril interior para el contenido principal.
+- El responsive existente se conserva con los breakpoints moviles previos y con padding especifico para paneles en `max-width: 640px`.
+
+## Decision Notes
+- Se unifico el sistema de shell a nivel de seccion y de carril interior en lugar de tocar el contenido de cada bloque, para cumplir el objetivo visual sin abrir un rediseno mayor.