Crie o seu CRM
e nunca mais pague por um.

Você é um engenheiro de front-end sênior. Vamos construir um CRM de pipeline comercial completo. Quero o resultado em UM ÚNICO arquivo index.html, com HTML, CSS e JavaScript no mesmo arquivo: sem framework, sem build, sem npm, sem dependência externa. Tem que abrir com dois cliques no navegador e funcionar.

CONTEXTO
Quem usa é um time comercial pequeno, de 2 a 6 pessoas, que hoje controla lead em planilha. A tela principal é um kanban: cada lead é um card, cada coluna é uma etapa do funil, e a pessoa arrasta o card quando o negócio anda.

VISUAL (isso não é sugestão, é a régua)
- Fundo geral #F5F5F7, superfícies em branco puro, texto principal #101828, texto secundário #667085.
- Cor de marca: roxo #4F46E5, usada em botão primário, item ativo do menu e destaque. Nada de gradiente, nada de sombra pesada, nada de emoji na interface.
- Fonte Inter pelo Google Fonts. Título de 24 a 30px com letter-spacing negativo. Corpo de 13.5 a 14px.
- Cantos de 12 a 14px em cards e painéis, 10px em botões. Borda de 1px #E7E7EC no lugar de sombra na maioria dos blocos.
- Ícones em SVG inline com traço de 1.8. Nunca biblioteca de ícone, nunca emoji.

ESTRUTURA DA TELA
1. Rail vertical fixo de 100px na esquerda: logo quadrada roxa em cima, depois os itens Pipeline, Visão geral, Contatos, Tarefas e Relatórios (ícone em cima, rótulo de 11px embaixo), e no rodapé um sino, uma engrenagem e o avatar do usuário.
2. Topbar: título "Pipeline", campo de busca com o texto "Buscar leads, contatos...", botão Filtrar, botão de escolher colunas visíveis e botão roxo "+ Novo lead".
3. Faixa de 4 KPIs dentro de um card só, separados por linha vertical: Leads ativos, Em negociação, Previsão de receita (soma em R$ dos leads em aberto) e Conversão (ganhos dividido por ganhos mais perdidos, em porcentagem). Cada KPI tem um pontinho colorido de status.
4. O kanban, com rolagem horizontal.

AS 6 ETAPAS, nessa ordem e com essas cores no cabeçalho da coluna
novos #94A3B8, qualificados #3B82F6, propostas #8B5CF6, negociacao #F59E0B, ganho #12B76A, perdido #EF4444.
O cabeçalho de cada coluna mostra o nome da etapa, a quantidade de leads e a soma em R$ daquela coluna. Logo abaixo, um "+ Adicionar lead" que abre o modal já com aquela etapa preenchida.

O CARD DO LEAD
Nome em negrito, serviço, origem, avatar circular com as iniciais do responsável (a cor sai do nome, então o mesmo nome tem sempre a mesma cor) e a data da próxima ação. Se a próxima ação já passou, a data aparece destacada em laranja. O card inteiro é clicável e arrastável.

ARRASTAR E SOLTAR DE VERDADE
Use HTML5 drag and drop (draggable, dragstart, dragover, drop). Ao soltar em outra coluna, o lead muda de etapa, a tela atualiza na hora e o app grava uma linha no histórico daquele lead no formato "Movido de Qualificados para Propostas" com a data de hoje.

DADOS
Cada lead é um objeto com: id, nome, email, tel, servico, origem, valor, responsavel, etapa, criado_em, acao (objeto com texto e data), notas (lista) e hist (lista).
Crie uma função seed() com 26 leads brasileiros realistas, espalhados pelas etapas, com valores entre R$ 4.000 e R$ 25.000 e com TODAS as datas calculadas a partir do dia de hoje (hoje mais ou menos X dias), nunca datas fixas no código, pra sempre existir lead atrasado, lead de hoje e lead da semana.
Serviços: Consultoria Estratégica, Implementação de CRM, Gestão de Tráfego, Automação de Marketing, Criação de Site, Social Media.
Origens: Site, Indicação, Redes sociais, Evento, Anúncio, WhatsApp.
Responsáveis: quatro nomes brasileiros.
Tudo salva em localStorage numa chave só. Se abrir sem dado salvo, roda o seed.

O QUE MAIS PRECISA FUNCIONAR NESSA PRIMEIRA ENTREGA
- Modal de novo lead com todos os campos e validação de nome obrigatório.
- Busca que filtra por nome, e-mail, serviço e responsável enquanto digito.
- Filtro por responsável e por origem.
- Ligar e desligar colunas visíveis, com a preferência salva.
- Atalhos de teclado: "/" foca a busca, "n" abre novo lead, Esc fecha o que estiver aberto.
- Um toast discreto no canto confirmando cada ação.
- Tudo formatado em português do Brasil: R$ 12.400 e datas em dd/mm.

REGRAS DE ENTREGA
- Nenhum TODO, nenhuma função vazia, nenhum trecho comentado com "aqui você implementa". Se está no plano, está funcionando de verdade.
- Não me explique o código linha a linha. Me entregue o arquivo inteiro, pronto pra salvar como index.html.
- No fim, liste em 5 linhas o que eu devo clicar pra confirmar que ficou de pé.

Continue no mesmo arquivo index.html. Agora construa a ficha do lead: um painel lateral que desliza da direita quando eu clico num card do kanban.

COMPORTAMENTO
- 420px de largura no computador, tela inteira no celular. Anima em 0.25s.
- Fecha no X, no Esc e no clique fora do painel.
- Enquanto o painel está aberto, o card correspondente no kanban fica com a borda roxa.

CONTEÚDO, NESSA ORDEM
1. Pílula com a etapa atual, na cor da etapa, e logo abaixo o nome do lead em tamanho grande.
2. Serviço e origem em cinza, embaixo do nome.
3. Bloco de campos, cada linha com ícone, rótulo à esquerda e valor à direita, TODOS editáveis ali mesmo, sem abrir modal: Valor (campo numérico que volta formatado em R$ ao sair), Responsável (select com o time), Etapa (select com as 6 etapas), Criado em (só leitura) e Próxima ação (campo de data).
4. Bloco "Próxima ação": mostra o texto da tarefa e a data. Se estiver atrasada, o bloco ganha fundo avermelhado. Dois botões embaixo: um roxo "Follow-up no WhatsApp", que abre wa.me com o telefone do lead e uma mensagem já escrita usando o primeiro nome dele, e um "Marcar como concluída", que limpa a ação e grava no histórico.
5. Bloco "Notas": um campo "Adicionar nota..." que ao apertar Enter grava a nota com a data, e a lista das anteriores da mais nova pra mais antiga, cada uma com botão de apagar.
6. Bloco "Histórico": linha do tempo só de leitura, com bolinha e data. O app escreve aqui sozinho toda vez que o lead muda de etapa, muda de responsável, muda de valor ou tem ação concluída. Eu nunca escrevo no histórico à mão.
7. No rodapé do painel, um "Apagar lead" discreto em vermelho, com confirmação antes.

REGRAS
- Toda edição salva na hora, sem botão de salvar, e atualiza o card do kanban e os KPIs imediatamente.
- Mudar a etapa pelo select tem que ter exatamente o mesmo efeito de arrastar o card, incluindo a linha no histórico.
- Se o lead não tiver telefone, o botão de WhatsApp aparece desabilitado com um aviso, nunca quebrado.
- Não quebre nada do que já funciona. No fim, me diga o que testar.

Continue no mesmo arquivo. Agora construa as outras quatro telas, todas trocando pelo rail da esquerda, sem recarregar a página. Todas usam os mesmos leads e respeitam o filtro que estiver ativo.

ABA "VISÃO GERAL"
- Funil por etapa em barras horizontais: nome da etapa, quantidade e valor total, com a barra proporcional à maior etapa. Cor da barra igual à cor da etapa.
- Donut de origem dos leads feito em SVG puro (nada de biblioteca de gráfico), com legenda ao lado mostrando origem, quantidade e porcentagem.
- Lista "Próximas ações": os 6 compromissos mais próximos, com nome do lead, tarefa e data. Atrasado em vermelho. Clicar abre a ficha daquele lead no kanban.
- Lista "Atividade recente": as últimas 8 linhas de histórico de todos os leads juntas, ordenadas da mais nova pra mais antiga.

ABA "CONTATOS"
Tabela limpa com avatar, nome, e-mail, telefone, serviço, responsável, etapa (pílula colorida) e valor. Ordenável ao clicar no cabeçalho, com a mesma busca do topo funcionando aqui. Clicar na linha abre a ficha do lead.

ABA "TAREFAS"
As próximas ações agrupadas em quatro blocos, nessa ordem: Atrasadas, Hoje, Próximos 7 dias e Depois. Cada tarefa é uma linha com checkbox, nome do lead, o que fazer e a data. Marcar o checkbox conclui a ação, escreve no histórico e some da lista com uma animação curta. O bloco de Atrasadas tem contador em vermelho no título.

ABA "RELATÓRIOS"
- Leads por etapa: barras com quantidade e valor.
- Desempenho do time: uma linha por responsável com leads ativos, ganhos, perdidos, taxa de conversão e receita ganha, ordenado por receita.
- Receita por serviço: os seis serviços ordenados por valor total, com barra proporcional.
- Botão "Exportar CSV" que baixa todos os leads visíveis num arquivo separado por vírgula, com cabeçalho em português e acento correto (UTF-8 com BOM, senão o Excel brasileiro estraga os acentos).

REGRAS
- Todo número dessas telas sai do mesmo array de leads. Não invente dado de exemplo separado, senão as telas divergem.
- Nada de biblioteca de gráfico. Barras em div e donut em SVG.
- Estado vazio tratado em toda lista: quando não houver nada, uma frase curta em cinza no lugar, nunca uma área em branco.
- Me entregue o arquivo completo e diga o que testar.

Continue no mesmo arquivo. Agora ligue o CRM no Supabase, sem quebrar nada do que já funciona.

MINHAS CREDENCIAIS
URL: COLE_AQUI_A_SUA_PROJECT_URL
Chave anon: COLE_AQUI_A_SUA_CHAVE_ANON
Carregue o supabase-js pelo CDN da jsdelivr, direto no HTML. Continua sendo um arquivo só.

O BANCO JÁ EXISTE, com essas tabelas e funções (não crie tabela nem SQL, só use):
- crm_workspaces (id, nome, codigo, criado_por)
- crm_membros (workspace_id, user_id, nome, papel)
- crm_leads (id, workspace_id, nome, email, tel, servico, origem, valor, responsavel, etapa, criado_em, acao jsonb, notas jsonb, hist jsonb, atualizado_em)
- rpc crm_criar_workspace(p_nome, p_meu_nome) devolve json com id, nome, codigo e papel
- rpc crm_entrar(p_codigo, p_meu_nome) devolve o mesmo json
A RLS já está ligada: cada pessoa só enxerga os leads dos pipelines de que ela é membro.

TELA DE ENTRADA (aparece antes do app quando não tem sessão)
- Card centralizado, mesmo visual do resto, com abas Entrar e Criar conta (e-mail e senha).
- Um link discreto embaixo: "ou ver a demonstração sem cadastro", que entra no modo demonstração de hoje, com os 26 leads no localStorage e um selo "Modo demonstração" ao lado do título.
- Se a confirmação de e-mail estiver ligada no meu projeto, mostre uma mensagem explicando que precisa clicar no link do e-mail, com um botão de reenviar. Nunca deixe a pessoa parada olhando um erro cru.

DEPOIS DE ENTRAR, se a pessoa ainda não tem pipeline
Uma tela com duas escolhas:
1. Criar um pipeline: campo com o nome do pipeline, campo com o meu nome (que vira o responsável nos leads) e um checkbox "começar com 26 leads de exemplo". Chama crm_criar_workspace e, se o checkbox estiver marcado, insere o seed no banco.
2. Entrar num pipeline existente: campo do código de 6 dígitos e o meu nome. Chama crm_entrar. Se o código não existir, mostre "Código não existe. Confere com quem te chamou.", não o erro técnico.
Depois de criar, mostre o código do time num toast e deixe ele sempre visível no menu do usuário, com botão de copiar.

O APP LIGADO NA NUVEM
- Ao abrir, carrega os leads daquele workspace e a lista de membros (que vira a lista de responsáveis).
- Toda alteração de lead vira upsert na hora. Criar é insert, apagar é delete.
- Realtime: assine as mudanças da tabela crm_leads filtrando pelo workspace_id e atualize a tela quando outra pessoa mexer. Se o painel do lead estiver aberto, não deixe a atualização fechar o painel nem perder o que estou digitando.
- Quem está em mais de um pipeline escolhe qual abrir num seletor no menu do usuário, e o último fica lembrado.
- Botão de sair, que limpa a sessão e volta pra tela de entrada.

REGRAS
- O modo demonstração continua funcionando exatamente como hoje, só no localStorage, sem tocar no banco.
- Nunca mostre erro técnico do Supabase pra quem usa: traduza pra uma frase em português com o que fazer.
- Se a internet cair no meio de uma edição, avise no toast e mantenha o que a pessoa digitou na tela.
- Me entregue o arquivo completo e a lista do que testar, incluindo o teste de abrir em duas janelas ao mesmo tempo.

Continue no mesmo arquivo. Agora deixe o CRM realmente usável no celular. Trabalhe com a tela de 390px de largura como referência e não estrague nada do computador.

REGRAS DA VERSÃO MOBILE
- O rail da esquerda vira uma barra de navegação fixa embaixo, com os 5 ícones e rótulo pequeno.
- O kanban rola na horizontal com uma coluna por vez ocupando quase a tela toda (scroll-snap), e o cabeçalho da coluna mostra etapa, quantidade e valor.
- Arrastar card com o dedo é ruim, então no celular o card ganha um toque longo que abre um menu curto "Mover para" com as 6 etapas. O arrastar continua funcionando no computador.
- A ficha do lead abre em tela cheia, subindo de baixo pra cima, com o X grande no topo.
- A faixa de KPIs vira duas colunas por duas linhas.
- Os campos de formulário com no mínimo 16px de fonte, pra o iPhone não dar zoom sozinho ao focar.
- Nenhum elemento pode causar rolagem horizontal na página. A rolagem horizontal existe só dentro do kanban.
- Toda área clicável com no mínimo 44px de altura.
- Coloque as regras de @media no FIM do CSS, depois de todo o resto, pra não serem sobrescritas.

Depois de aplicar, me diga como testar isso no navegador do computador sem celular na mão.

Meu CRM está pronto num arquivo index.html. Quero ele no ar, de graça, num link que eu possa mandar pro meu time hoje.

Me guie pelo caminho mais curto usando a Vercel, com o passo a passo clicado, assumindo que eu nunca usei a ferramenta e que eu não sei o que é terminal:
1. O que eu clico pra criar a conta e subir a pasta.
2. Como eu confiro que subiu certo.
3. Como eu atualizo o site depois de mudar o arquivo.
4. Como eu ligo um domínio próprio nesse link, se eu tiver um.

Depois do site no ar, faça a checagem de produção comigo e me diga o que precisa ser ajustado no meu arquivo:
- O título da aba e o ícone estão com a cara do meu CRM ou ainda estão genéricos?
- Tem meta description e imagem de compartilhamento, pra quando eu mandar o link no WhatsApp?
- Alguma coisa que só funciona no meu computador e vai quebrar no ar?
- No Supabase, a URL do site no ar precisa entrar em alguma lista de endereços permitidos pro login funcionar? Se precisar, me diga exatamente onde clicar.
- Faça a última varredura: abrir o link numa aba anônima, criar uma conta nova do zero, criar um pipeline, criar um lead, arrastar, fechar e abrir de novo pra ver se salvou.

Me responda em passos numerados e curtos, sem termo técnico sem explicação.

Pare de construir. Agora você vai atacar o próprio trabalho.

Vire o usuário mais desastrado possível do meu CRM e vá atrás do que quebra. Percorra o arquivo inteiro procurando por:
- Campo obrigatório que aceita vazio, e campo de valor que aceita letra, número negativo ou 15 casas decimais.
- Nome com aspas, sinal de menor e maior ou emoji quebrando a tela (o famoso XSS por concatenação de HTML).
- Lead sem telefone, sem e-mail, sem responsável ou sem próxima ação: alguma tela quebra?
- Zero leads no pipeline: os cálculos dividem por zero? As barras somem? Os relatórios explodem?
- Datas: virada de mês, virada de ano, fuso horário, tarefa marcada como concluída duas vezes rápido.
- Arrastar um card pra fora de qualquer coluna, arrastar e soltar na mesma coluna, soltar dois cards ao mesmo tempo.
- Clicar duas vezes rápido em salvar, em apagar e em criar (duplicidade).
- Filtro ativo mais busca ativa mais coluna escondida ao mesmo tempo: os KPIs continuam batendo com o que aparece?
- Recarregar a página no meio de uma edição.

Escreva a lista numerada dos problemas que você encontrou, do mais grave pro mais bobo, cada um com o que acontece na prática e em que trecho do código está.
Não conserte nada ainda. Depois da lista, conserte um por um, na ordem, e diga o que mudou em cada correção.
Quando terminar, rode essa mesma varredura de novo do zero. Repita até uma varredura inteira voltar sem nenhum problema novo.

Agora compare o meu CRM com as ferramentas que cobram caro por isso: Linear, Notion, Pipedrive e HubSpot.

Liste 10 diferenças concretas de acabamento entre o que eu tenho e o que essas ferramentas fazem. Não quero "melhorar o design", quero item objetivo: respiro entre blocos, alinhamento de número à direita, peso e tamanho de fonte na hierarquia, estado de hover, estado de foco no teclado, estado vazio, estado de carregando, animação de entrada e saída, consistência de raio de canto e de sombra, contraste do texto cinza.

Regras do refino:
- Não invente nova cor nem nova fonte. O que existe é o que temos.
- Nada de emoji na interface e nada de sombra pesada.
- Menos é melhor: se uma tela tem três pesos de fonte, é porque cada um tem função.
- Todo estado de carregando é esqueleto cinza, nunca a palavra "carregando".
- Todo estado vazio tem uma frase curta e um botão do que fazer.

Aplique as 10, uma de cada vez, e me diga o que mudou. No fim, me mostre o antes e o depois em texto: o que a pessoa vai notar de diferente ao abrir.

Agora esquece que você construiu esse CRM. Você é uma pessoa mal intencionada que abriu o meu site, apertou F12 e achou a minha chave anon no código. Seu objetivo é roubar os leads do meu cliente.

Liste tudo que você tentaria, e para cada tentativa me diga o resultado real considerando o SQL de RLS que está no banco:
- Pedir a tabela de leads inteira sem estar logado.
- Criar uma conta qualquer e pedir os leads de outro workspace.
- Adivinhar ou vazar um workspace_id e usar direto na consulta.
- Inserir lead dentro do workspace de outra pessoa.
- Alterar o meu próprio papel de membro pra dono.
- Ler a tabela de membros pra descobrir e-mails de quem usa o sistema.
- Entrar num pipeline por força bruta nos códigos de convite de 6 dígitos.
- Chamar as funções crm_criar_workspace e crm_entrar com argumentos estranhos.

Para cada item, responda em três linhas: o que eu tentei, o que o banco devolveu e se isso é um buraco ou não.
Se alguma coisa passar, me entregue o SQL da correção pronto pra colar, e a explicação em português do que ele bloqueia.
No fim, me diga em uma frase o que ainda seria possível vazar mesmo com tudo certo, pra eu saber o meu risco de verdade.

Alguma coisa quebrou. Antes de mexer em qualquer linha, investigue.

O que está acontecendo: DESCREVA AQUI O QUE VOCÊ FEZ E O QUE ACONTECEU
O que eu esperava: DESCREVA AQUI O QUE DEVERIA TER ACONTECIDO
O que apareceu no console (F12, aba Console): COLE AQUI A MENSAGEM VERMELHA, OU ESCREVA "nada"

Siga exatamente esta ordem:
1. Diga em uma frase qual é a sua hipótese da causa, com o trecho do código que você suspeita.
2. Liste as outras duas causas possíveis, mesmo que você ache menos provável.
3. Me diga o teste mais rápido pra saber qual das três é a verdadeira, e o que eu devo ver na tela em cada caso.
4. Só depois que a causa estiver confirmada, faça a correção mínima. Não reescreva o arquivo inteiro, não aproveite pra "melhorar" outra coisa e não mude o visual.
5. Diga o que exatamente mudou e o que eu clico pra confirmar que voltou.

Se você não tiver certeza da causa, diga que não tem certeza e me peça a informação que falta. Chutar correção é proibido.