Painel Vidro

Tenho o modelo "Painel Vidro" da Modelos Prontos na pasta painel-vidro/ (index.html, estilo.css, script.js e LEIAME.md). Quero adaptá-lo à minha marca.

Minha marca:
- Nome: [nome]
- Cor principal: [hex] · cor de apoio: [hex]
- Fonte: [nome da fonte ou "manter"]
- Tom dos textos: [ex.: direto e amigável]

O que fazer:
1. Leia o LEIAME.md e o estilo.css; troque as cores e fontes pelas variáveis do :root (não espalhe cores soltas pelo CSS).
2. Troque os textos de exemplo pelos meus, em português do Brasil.
3. Coloque meu logo: [cole o SVG aqui ou diga o arquivo].
4. Mantenha animações, acessibilidade (contraste AA, foco visível) e prefers-reduced-motion.
5. Abra o index.html no navegador e confira em 1440px e 390px, sem rolagem horizontal.
Me mostre um resumo do que mudou.

Quero colocar o modelo "Painel Vidro" (pasta painel-vidro/: index.html, estilo.css, script.js) dentro do meu projeto.

Meu projeto usa: [React + Vite / Next.js (App Router) / Vue / WordPress / HTML puro] e [Tailwind / CSS Modules / CSS comum].
Onde colocar: [página ou componente, ex.: src/pages/Login.tsx].

O que fazer:
1. Leia o LEIAME.md e entenda HTML, CSS e JS do modelo.
2. Transforme em componente(s) do meu framework, mantendo o mesmo visual e TODO o comportamento (animações, teclado, toque).
3. Mantenha o CSS com as classes prefixadas (evita conflito) ou converta para o padrão do meu projeto, sem perder nada.
4. Troque manipulação direta do DOM por estado/efeitos do framework quando fizer sentido; limpe listeners e timers ao desmontar.
5. Rode o projeto, abra a página e confira no desktop e no celular.
Liste os arquivos criados e alterados.

Quero que o dashboard "Painel Vidro" mostre dados REAIS em vez dos dados de exemplo.

Fonte dos dados: [descreva: URL da API e formato do JSON / Supabase (tabela e colunas) / planilha CSV].

O que fazer:
1. Leia o LEIAME.md e o script.js para achar o objeto/função de dados de exemplo.
2. Crie uma função carregarDados() que busca da fonte acima e devolve o MESMO formato que os gráficos já esperam (faça o mapeamento dos campos).
3. Mostre um estado de carregamento (skeleton) e uma mensagem de erro amigável com botão "Tentar de novo".
4. Mantenha os filtros de período funcionando com os dados reais e os números em pt-BR.
5. Não coloque chaves secretas no navegador; se a fonte exigir, me diga onde criar um endpoint seguro.
Ao final, me mostre o que mudou e como testar.

Revise o modelo "Painel Vidro" que adaptei (pasta painel-vidro/) antes de eu publicar:
1. Abra no navegador em 1440px, 768px e 390px: nada cortado, sobreposto ou com rolagem horizontal.
2. Navegue só pelo teclado (Tab, Enter, Esc, setas): tudo alcançável e com foco visível.
3. Contraste AA nos textos e botões; aria-label nos ícones; mensagens de erro anunciadas.
4. Console sem erros; sem console.log esquecido; sem recursos externos além das fontes.
5. Com "reduzir movimento" ligado no sistema, a tela continua bonita e usável.
Corrija o que encontrar e me diga o que foi corrigido.