Con marca y dashboards

app/dashboard/loading.tsx

@@ -0,0 +1,15 @@
+export default function DashboardLoading() {
+  return (
+    <div className="db-loading-page" aria-busy="true" aria-label="Cargando dashboard…">
+      <div className="db-skeleton-block" style={{ height: 60, marginBottom: 16 }} />
+      <div className="db-grid">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="db-skeleton-block" style={{ gridColumn: 'span 3', height: 96 }} />
+        ))}
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i+4} className="db-skeleton-block" style={{ gridColumn: 'span 6', height: 240 }} />
+        ))}
+      </div>
+    </div>
+  )
+}

app/dashboard/page.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { KpiCards }              from '@/components/dashboard/kpi-cards'
+import { ParaguayMap }           from '@/components/dashboard/paraguay-map'
+import { DonutCuidados }         from '@/components/dashboard/donut-cuidados'
+import { GaugeOrganizacional }   from '@/components/dashboard/gauge-organizacional'
+import { HeatmapWidget }         from '@/components/dashboard/heatmap-widget'
+import { PiramideDemografica }   from '@/components/dashboard/piramide-demografica'
+import { PoliticasBar }          from '@/components/dashboard/politicas-bar'
+import { IntensidadProductividad } from '@/components/dashboard/intensidad-productividad'
+import { TablaRiesgo }           from '@/components/dashboard/tabla-riesgo'
+import { FilterSidebar }         from '@/components/dashboard/filter-sidebar'
+import type { DashboardFilters } from '@/lib/dashboard-types'
+
+// El survey_id se pasa como query param: /dashboard?survey_id=UUID
+export default function DashboardPage() {
+  const searchParams = useSearchParams()
+  const surveyId = searchParams.get('survey_id') ?? '30000000-0000-0000-0000-000000000001'
+  const [filters, setFilters] = useState<DashboardFilters>({})
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+
+  function handleDeptoClick(depto: string) {
+    setFilters(f => ({ ...f, depto: depto || undefined }))
+  }
+
+  return (
+    <div className="db-page">
+      <FilterSidebar
+        filters={filters}
+        onChange={setFilters}
+        collapsed={sidebarCollapsed}
+        onToggle={() => setSidebarCollapsed(c => !c)}
+      />
+
+      <div className="db-main">
+        <header className="db-page-header">
+          <h1 className="db-page-title">Economía del Cuidado — Paraguay</h1>
+          <p className="db-page-subtitle">
+            Datos agregados · k-anonimato k≥5 · Encuesta Mapeo de Cuidadores 2026
+            {filters.depto && <span className="db-active-filter"> · Filtro: {filters.depto}</span>}
+          </p>
+        </header>
+
+        {/* Fila 1: KPIs (span 12) */}
+        <section className="db-section" aria-label="Indicadores clave">
+          <KpiCards surveyId={surveyId} filters={filters} />
+        </section>
+
+        {/* Fila 2: Mapa (6) + Donut (3) + Gauge (3) */}
+        <section className="db-grid db-section" aria-label="Distribución geográfica y tipos">
+          <ParaguayMap surveyId={surveyId} filters={filters} onDeptoClick={handleDeptoClick} />
+          <DonutCuidados surveyId={surveyId} filters={filters} />
+          <GaugeOrganizacional surveyId={surveyId} filters={filters} />
+        </section>
+
+        {/* Fila 3: Heatmap (6) + Pirámide (6) */}
+        <section className="db-grid db-section" aria-label="Intensidad y demografía">
+          <HeatmapWidget surveyId={surveyId} filters={filters} />
+          <PiramideDemografica surveyId={surveyId} filters={filters} />
+        </section>
+
+        {/* Fila 4: Barras políticas (6) + Hexbin intensidad/bienestar (6) */}
+        <section className="db-grid db-section" aria-label="Políticas e impacto">
+          <PoliticasBar surveyId={surveyId} filters={filters} />
+          <IntensidadProductividad surveyId={surveyId} filters={filters} />
+        </section>
+
+        {/* Fila 5: Tabla riesgo (12) */}
+        <section className="db-grid db-section" aria-label="Riesgo de retención">
+          <TablaRiesgo surveyId={surveyId} filters={filters} />
+        </section>
+      </div>
+    </div>
+  )
+}