Plan: Rediseño Técnico F2-L

Objetivo

Rediseñar toda la aplicación como un “Technical Data Dashboard” usando el sistema F2-L Pizarrón Terminal (JetBrains Mono, grid de 24px, border-radius 0px).

Arquitectura

Transición de un layout tipo landing page SaaS a un dashboard de alta densidad centrado en 1600px. La homepage se convierte en un “entryway” para exploración de datos con un Pulse Bar y un Live Viz Header.

Stack: Astro, TailwindCSS, JetBrains Mono.

---

Tarea 1: Actualizar estilos globales y design tokens

Archivo: src/styles/global.css

1. Importar JetBrains Mono
2. Actualizar @theme con colores y fuentes F2-L
3. Setear border-radius a 0px globalmente
4. Implementar grid de fondo de 24px en el body
5. Agregar .reading-column para el dashboard centrado 1600px

---

Tarea 2: Re-estructurar layout base (dashboard centrado)

Archivo: src/layouts/Base.astro

1. Implementar contenedor de max-width 1600px centrado
2. Nav sticky (56px) con borde inferior Teal de 2px
3. Implementar “Retícula” (logo dot-grid) en el Nav
4. Footer como banda oscura de una fila

---

Tarea 3: Actualizar componentes de Data Story Cards

Archivos: DataCard.astro, DataCardFeatured.astro, DataCardCompact.astro

1. Eliminar todo border-radius
2. Tipografía JetBrains Mono
3. Bordes Teal como separadores
4. Hover state con hard offset
5. DataCardFeatured: grid de 2 columnas, métricas grandes
6. DataCardCompact: layout denso (80px viz | contenido)

---

Tarea 4: Rediseñar homepage como “Application Entryway”

Archivos: src/pages/index.astro, nuevo src/components/PulseBar.astro

1. Crear PulseBar: grid de 4 columnas con vitales de ciudad (PM2.5, Contratos, Presupuesto, etc.)
2. Reemplazar hero marketing con “Live Viz Header” (interactivo)
3. Grid denso de 4 columnas de Story Cards
4. Eliminar secciones redundantes de landing page

---

Tarea 5: Pulido visual y alineación a grid

Archivo: src/styles/global.css

1. Alinear todos los espaciados a múltiplos de 24px
2. Implementar “Major Lines” (120px) para énfasis estructural