Cambios:
- app.vue: Reemplazar #fef9f0 con var(--brand-text)
- layouts/dashboard.vue: Usar var(--brand-text)
- layouts/informe.vue: Usar var(--brand-text)
Todos los componentes base ahora responden al sistema de temas.
Problema identificado:
- Páginas con layout 'informe' mostraban icono inconsistente
- Páginas con layout 'dashboard' funcionaban correctamente
- Layout 'informe' seguía usando refs locales obsoletas
Causa raíz:
El layout 'informe' no fue actualizado en el refactor inicial:
- Línea 4: <AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
- Líneas 190-191: Refs locales que sobrescriben el composable
- Las props v-model forzaban estado local en lugar de usar singleton
Análisis por layout:
✅ Funcionaban (layout: dashboard):
- index, explorer, rawExplorer, metadatos, notifications, settings
❌ No funcionaban (layout: informe):
- panorama, informe-ingresos, comparativa-cosechas, metabase-debug
Solución aplicada:
1. Eliminar v-model:open y v-model:collapsed de <AppSidebar />
2. Remover refs locales sidebarOpen y sidebarCollapsed
3. Remover función isMobile() duplicada
4. Usar useSidebarState() como única fuente de verdad
Cambios:
- app/layouts/informe.vue:4 - Remover v-models de AppSidebar
- app/layouts/informe.vue:183 - Usar useSidebarState() composable
- app/layouts/informe.vue:190-191 - Eliminar refs locales
Resultado:
✓ Icono consistente en TODAS las páginas
✓ Ambos layouts usan la misma arquitectura
✓ Estado completamente unificado
✓ Sin refs locales que sobrescriban el singleton
Referencias:
- app/layouts/informe.vue:4
- app/layouts/informe.vue:183
La sidebar ahora detecta el tamaño de pantalla al inicializar:
- En móvil (< 1024px): cerrada por defecto
- En desktop (>= 1024px): abierta por defecto
Esto mejora la experiencia en dispositivos móviles evitando que
la sidebar tape el contenido al cargar la página.
