Layout responsivo com grid system para dashboards complexos

Projete um sistema de layout responsivo para o dashboard de [NOME DO PRODUTO], que precisa exibir [LISTA DE COMPONENTES: KPIs, graficos, tabelas, mapas, filtros, etc.].

Usuarios acessam via: [DISPOSITIVOS E PROPORCOES DE USO].

**1) Grid System:**
- Numero de colunas por breakpoint (mobile/tablet/desktop/wide)
- Gutter e margin por breakpoint
- Container max-width
- Regras de span para cada tipo de componente

**2) Layout Patterns:**
- Sidebar navigation: fixa, colapsavel ou off-canvas por breakpoint
- Header: sticky com filtros globais
- Content area: grid de cards com priorizacao
- Para cada padrao, wireframe descritivo (ASCII ou descricao detalhada)

**3) Componentes Responsivos:**
- KPI cards: layout horizontal (desktop) vs. empilhado (mobile)
- Tabelas: scroll horizontal, colunas prioritarias, modo card-list em mobile
- Graficos: aspect ratio, tamanho minimo legivel, alternativa tabular em mobile
- Filtros: barra horizontal (desktop) vs. bottom sheet (mobile)

**4) Regras de Priorizacao:**
- Hierarquia de informacao: o que aparece first-fold por breakpoint
- Componentes que colapsam ou ocultam em telas menores
- Ordem de leitura em mobile (reordenacao de grid)

**5) Especificacoes Tecnicas:**
- CSS Grid template areas por breakpoint
- Tailwind classes sugeridas (se aplicavel)
- Valores de gap, padding, border-radius do sistema

Considere que [PORCENTAGEM]% dos usuarios usam [DISPOSITIVO PRINCIPAL] e a informacao mais critica e [DADO PRINCIPAL].