A sua planilha já tem tudo.
Ela só não mostra nada.

Você é um analista de dados. Anexei a minha planilha. Antes de escrever qualquer código, faça o raio-x dela e responda em português, sem rodeio.

1. ESTRUTURA
- Em qual linha começam os títulos das colunas de verdade (se tiver título, logo ou linha em branco em cima, me diga em qual linha estão os cabeçalhos).
- Quantas linhas de dado existem.
- Se tiver mais de uma aba, qual delas tem os dados.

2. CADA COLUNA, UMA A UMA
Monte uma tabela com: nome da coluna | o que ela é (data, dinheiro, número, categoria, texto livre, identificador) | um exemplo real tirado da planilha | quantos valores diferentes tem | quantas células estão vazias.

3. A SUJEIRA
Aponte tudo que vai quebrar uma conta depois:
- data guardada como texto ("15/03/2026" em célula de texto) ou como número solto
- dinheiro com R$ junto, com ponto de milhar, com vírgula decimal ou negativo entre parênteses
- a mesma coisa escrita de jeitos diferentes ("instagram", "Instagram", "IG")
- linha de total ou subtotal no meio dos dados, que não é um registro
- coluna que parece número mas é código (CEP, CPF, telefone, número do pedido)

4. O QUE DÁ PRA MEDIR
Liste as 5 perguntas mais úteis que ESSA planilha consegue responder, nessa ordem de valor pra quem toca esse negócio. Para cada uma, diga qual coluna entra na conta.
Depois diga as 3 perguntas que as pessoas mais vão querer fazer e que essa planilha NÃO responde, e qual coluna faltou.

5. O VEREDITO
Em uma frase: qual é a coluna de data, qual é a coluna de valor principal, e quais são as duas melhores colunas pra cortar os dados (categoria).

Não escreva código nenhum ainda. Só o raio-x.

Agora construa o arquivo. Regras que não se negociam:

FORMATO
- Um único arquivo chamado painel.html. HTML, CSS e JavaScript no mesmo arquivo. Nada de React, nada de instalar nada, nada de servidor.
- Tem que abrir com dois cliques, direto do computador, sem internet (só as duas bibliotecas abaixo vêm de CDN e ficam em cache).
- Use SheetJS (xlsx.full.min.js) pra ler .xlsx e Chart.js 4 pros gráficos.
- MEUS DADOS NÃO ENTRAM NO CÓDIGO. Nenhuma linha da minha planilha fica escrita dentro do arquivo. O arquivo é vazio e recebe a planilha na hora.

A PORTA DE ENTRADA
- Tela inicial só com uma área grande de arrastar e soltar, escrito "solte o arquivo aqui", e um clique que abre o seletor de arquivos.
- Aceita .xlsx, .xls e .csv.
- Uma frase embaixo: nada é enviado pra lugar nenhum, a leitura acontece no navegador.

LER DE VERDADE (essa parte é a que separa o painel bom do ruim)
- CSV: descubra sozinho o separador testando ponto e vírgula, vírgula, tabulação e barra vertical, contando qual aparece mais nas primeiras linhas. Respeite campo entre aspas com separador dentro. Remova o BOM do começo.
- XLSX: leia a primeira aba com cellDates ligado.
- Cabeçalho: se as primeiras linhas forem título, logo ou linhas vazias, ache sozinho a linha que é o cabeçalho de verdade (a que tem mais células preenchidas e tem dado logo abaixo) e ignore o que vem antes.
- Número brasileiro: "R$ 1.234,56", "1.234,56", "1234,56" e "-1.234,56" todos viram 1234.56. Tire R$, espaço e %.
- Data: aceite 15/03/2026, 15-03-2026, 2026-03-15 e o número serial do Excel (aquele 45321 que aparece quando a data vira número).

CLASSIFICAR SOZINHO
Para cada coluna, olhe uma amostra de até 200 valores e decida o tipo:
- data: mais de 70% dos valores viram data válida
- número: mais de 80% viram número
- categoria: poucos valores diferentes (até 35% do total da amostra, no máximo 60 opções)
- texto: o resto
Guarde para cada linha os valores já convertidos, pra não converter de novo a cada clique.

DEPOIS DE LER
- Some a planilha e mostre no topo: nome do arquivo, quantas linhas e quantas colunas.
- Ainda não faça gráfico nenhum. Só mostre a tabela com as 50 primeiras linhas, com as colunas de número alinhadas à direita.

VISUAL
Fundo quase preto, painéis um tom acima, fios de 1px, texto claro, um só acento laranja. Fontes do sistema por enquanto. Nada de emoji, nada de sombra colorida.

PROIBIDO
- Escrever TODO, "aqui você implementa" ou função vazia. Se for fazer, faça inteiro.
- Pedir pra eu editar o código pra trocar de planilha.
- Inventar dado de exemplo dentro do arquivo.

Me entregue o arquivo inteiro, pronto pra salvar.

Agora os quatro cartões do topo. Exatamente quatro, nunca mais.

A REGRA DE OURO
Não me mostre só a soma de uma coluna. Derive. Um número que eu consigo ver na planilha não merece estar no topo do painel.
- Somar a coluna de valor: ok, esse é o número principal.
- Dividir o valor pela quantidade de linhas: isso é ticket médio, e é um número que a planilha não me dá.
- Dividir o total pela quantidade de dias com movimento: média por dia, idem.
- Achar o dia que mais vendeu e mostrar a data junto do valor daquele dia.

Se a planilha não tiver coluna de data, troque os dois últimos por: a categoria que mais soma (com o valor dela) e quantas categorias diferentes existem.

A COMPARAÇÃO
No primeiro cartão, mostre a variação em porcentagem entre a primeira e a segunda metade do período que está filtrado. Verde se subiu, vermelho se caiu, cinza se ficou quase igual (menos de 2% pra qualquer lado). Escreva embaixo contra o que está comparando, senão a porcentagem é enfeite.
Se tiver menos de 4 datas diferentes, não mostre variação nenhuma. Porcentagem com dois pontos de dado é mentira.

COMO ESCREVER OS NÚMEROS
- Dinheiro: R$ 1.234,56. Acima de dez mil, encurte pra R$ 12,3k. Acima de um milhão, R$ 1,2M.
- Quantidade não leva R$ nunca. Descubra pelo nome da coluna: valor, total, receita, faturamento, preço, custo, lucro levam R$; quantidade, unidades, cliques, pedidos não levam.
- Data sempre dd/mm/aaaa.
- Se o número for zero ou não existir, escreva um traço. Nunca NaN, nunca undefined, nunca R$ 0,00 falso.

O VISUAL DO CARTÃO
Rótulo pequeno em maiúscula e cinza em cima, número grande embaixo, e uma linha de apoio explicando de onde ele veio. Um fio colorido de 2px na borda esquerda, cor diferente em cada cartão. O número é a coisa maior da tela inteira.

Cinco gráficos, nessa ordem, com Chart.js. A regra de qual formato usar não é sua, é essa:

- coisa acontecendo ao longo do tempo -> linha com área embaixo, nunca barra
- comparar categorias -> barra deitada (horizontal), porque nome de categoria é comprido e nome torto ninguém lê
- parte de um todo -> rosca, e SÓ até 6 fatias. Da sexta em diante, junte tudo num grupo chamado "outros"
- cruzar duas categorias -> barra deitada empilhada
- ciclo que se repete (dia da semana, hora do dia) -> barra em pé, destacando a maior numa cor e deixando o resto cinza

OS CINCO
1. Evolução: a coluna de valor somada por mês, largura inteira. Três botõezinhos em cima trocam entre dia, semana e mês, sem recarregar nada. O rótulo do mês é "mar/26", não "2026-03".
2. Ranking: o valor somado pela melhor coluna de categoria, as 8 maiores, barra deitada, todas as legendas visíveis (desligue o autoSkip, senão o Chart.js esconde nome).
3. Fatia: rosca da segunda coluna de categoria, com a porcentagem no tooltip junto do valor.
4. Cruzamento: as 6 maiores da primeira categoria, empilhadas pelas 5 maiores da segunda. É esse gráfico que responde "de onde vem cada produto".
5. Ciclo: o valor por dia da semana, domingo a sábado, com o melhor dia em laranja e o resto em cinza escuro. Escreva o nome do melhor dia no subtítulo.

VALE PRA TODOS
- Fundo transparente, grade horizontal quase invisível, sem borda em volta, sem linha vertical de grade.
- Zero ponto na linha em repouso; o ponto só aparece quando o mouse passa.
- Tooltip escuro, com o valor formatado igual ao do topo (R$ quando for dinheiro).
- Se a coluna que alimenta o gráfico não existir na planilha, esconda o cartão inteiro. Nunca deixe um quadrado vazio na tela.
- Todo gráfico tem título e uma linha embaixo dizendo o que ele está mostrando, em português de gente.
- Nada de legenda gigante roubando metade do espaço do desenho.

Agora os filtros. Uma barra só, acima dos cartões:

1. Período, em botões colados: tudo, 12 meses, 6 meses, 90 dias, 30 dias. Conte pra trás a partir da DATA MAIS RECENTE DA PLANILHA, não da data de hoje. Planilha quase sempre está atrasada, e contar de hoje faz o painel aparecer vazio.
2. Uma lista suspensa com os valores da melhor coluna de categoria, começando em "todas".
3. Um campo de busca que procura o texto digitado em qualquer coluna, com um respiro de 200ms antes de recalcular.
4. Do lado direito, em letra pequena: "X de Y linhas".

A REGRA QUE NÃO PODE QUEBRAR
Existe UMA função que aplica os três filtros e devolve as linhas. Todo o resto do painel (os quatro cartões, os cinco gráficos e a tabela) é desenhado a partir do resultado dela. Nenhum pedaço da tela pode ler a lista original depois que o filtro existe.
Se eu filtrar por um produto, o total do topo, a variação em porcentagem, os cinco gráficos e a tabela mudam juntos, no mesmo clique.

Some também na tabela: clicar no título da coluna ordena por ela, um clique desce e o outro sobe, com uma setinha mostrando qual está ativa. Número ordena como número, data como data, texto em ordem alfabética. Mostre 50 linhas e um botão "ver mais 50" embaixo, pra não travar com planilha de dez mil linhas.

Adicione um painel de correção, escondido atrás de um botão "colunas" no topo.

Quando abre, mostra quatro listas suspensas, cada uma com TODAS as colunas da planilha e mais a opção "nenhuma":
- data
- valor
- categoria
- segunda categoria

Cada lista já vem marcada com o que o painel escolheu sozinho.

Quando eu trocar qualquer uma:
- Reclassifique a coluna escolhida na hora (se eu apontar como valor uma coluna que ele achava ser texto, converta todos os valores dela pra número agora).
- Refaça os filtros, os quatro cartões, os cinco gráficos e a tabela.
- Não recarregue a página nem me peça pra arrastar a planilha de novo.

Escreva embaixo do título: "Só mexa aqui se o painel leu alguma coluna errado". Esse painel fica fechado por padrão, porque na maioria das vezes a leitura automática acerta e mostrar configuração pra quem não precisa só assusta.

Agora o acabamento. Siga esses valores exatos, sem improvisar:

COR (escreva como variáveis no topo do CSS)
fundo #0a0a0b / painel #101012 / painel claro #16161a / fio #212126
texto #f5f5f6 / texto apagado #8e8e97 / texto bem apagado #5a5a63
acento laranja #ff6a00 e mais estas cinco só pros gráficos: #a78bfa #5aa9ff #3ddc97 #ffb648 #ff5a8a
Verde #3ddc97 só pra "subiu" e vermelho #ff5a5a só pra "caiu". Em nenhum outro lugar.

TIPOGRAFIA
Uma fonte sem serifa de interface e uma monoespaçada só pra número, rótulo e nome de arquivo.
Número grande do cartão: 31px, peso 700, espaçamento entre letras -0.03em.
Rótulo em maiúscula: 11px, espaçamento +0.13em, cor apagada.
Corpo 15px. Nada entre 17 e 23px, esse é o tamanho que faz parecer site de escola.

ESPAÇO
Tudo múltiplo de 2: 4, 8, 14, 18, 22. Respiro dentro do cartão: 20px. Distância entre cartões: 14px.
Canto arredondado: 18px nos cartões, 999px nos botões e chips.

DETALHES QUE MUDAM TUDO
- Fio de 1px no lugar de sombra. Sombra escura em fundo escuro vira borrão.
- Uma camada de grão bem fraca por cima da página inteira (SVG turbulence, opacidade 0.03). É o que tira a cara de template.
- O topo gruda quando rola a página, com desfoque no fundo.
- Passar o mouse na linha da tabela clareia a linha inteira.
- Transições de 150ms. Nada animando por mais de 400ms.
- Nada de emoji em lugar nenhum. Ícone é traço de 1.8px, quadrado de 14 a 18px.

O TESTE
Quando terminar, compare o resultado com o painel de um produto pago bom (Linear, Vercel, Stripe) e me diga em três linhas o que ainda está diferente. Depois conserte sozinho.

Três acabamentos pra fechar.

1. CELULAR (teste em 390px de largura)
- Cartões em duas colunas, nunca quatro espremidos.
- Gráficos com altura fixa em pixel, senão eles somem no celular.
- Os botões de período rolam de lado sem quebrar linha e sem quebrar a palavra no meio.
- A tabela rola de lado sozinha, dentro dela mesma. A página NUNCA pode rolar de lado.
- Esconda o contador de linhas no celular, ele rouba espaço do filtro.
- Confira no fim: a largura do conteúdo é igual à largura da tela, sem sobrar 1px.

2. SALVAR EM PDF
Um botão "salvar PDF" que chama a impressão do navegador, e um bloco de CSS de impressão que:
- some com o topo, os filtros e o painel de colunas
- põe fundo branco e texto escuro
- impede que um cartão ou gráfico seja cortado no meio da página
Assim eu aperto o botão, escolho "salvar como PDF" e mando no grupo.

3. COLOCAR NO AR (opcional, só me explique)
Me diga em cinco linhas, sem jargão, como eu publico esse arquivo num link que eu mando pro meu cliente, usando um serviço gratuito de arrastar pasta. Lembre que a planilha continua sendo lida no navegador de quem abre, então nem no link os meus dados sobem.

4. O ÚLTIMO TESTE
Antes de me entregar, abra o arquivo mentalmente com três planilhas diferentes: uma só com datas e valores, uma só com categorias e valores (sem data nenhuma) e uma com vinte colunas. Descreva o que aparece na tela em cada caso. Se em algum deles sobrar um quadrado vazio ou um número quebrado, conserte antes de me mandar.