<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard KPIs — Funil de Reunião High-Ticket</title>

<!--
═══════════════════════════════════════════════════════════════════════════════
DASHBOARD DE KPIs — Funil de Reunião High-Ticket
Travessia Imperatriz Tata Gonçalves

COMO USAR:
1. Abre esse arquivo no browser (Chrome/Safari/Firefox)
2. Dia 1 de cada mês: preenche os números do mês fechado
3. Dashboard calcula taxas, mostra cor (verde/amarelo/vermelho) e delta
4. Botão "Exportar JSON" salva backup; "Importar JSON" restaura
5. Botão "Salvar como PDF" imprime nativamente

═══════════════════════════════════════════════════════════════════════════════
VARIÁVEIS CONFIGURÁVEIS — AJUSTAR NO TOPO DO JS (window.CONFIG):

NOME_MENTORADA       → header
NICHO                → header
TICKET_ALVO          → benchmark do KPI "Ticket médio"
BENCHMARKS           → faixas verde/amarelo/vermelho dos 7 KPIs

═══════════════════════════════════════════════════════════════════════════════
-->

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bordeaux: #6E1423;
  --bordeaux-dark: #4A0E18;
  --dourado: #D6A648;
  --dourado-claro: #E8C77F;
  --preto: #1A1A1A;
  --branco: #FFFFFF;
  --cinza-claro: #F5F1EC;
  --cinza-borda: #E2DAD0;
  --cinza-texto: #5C5C5C;
  --verde: #2A7F3E;
  --verde-claro: #D4EDDA;
  --amarelo: #C29A0E;
  --amarelo-claro: #FFF3CD;
  --vermelho: #A92020;
  --vermelho-claro: #F8D7DA;
  --sombra: rgba(110, 20, 35, 0.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--preto);
  background: var(--cinza-claro);
  padding: 24px 16px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--sombra);
  overflow: hidden;
}

header {
  background: linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-dark) 100%);
  color: var(--branco);
  padding: 32px 40px;
  border-bottom: 4px solid var(--dourado);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

header h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

header .subtitulo {
  font-size: 16px;
  color: var(--dourado-claro);
  opacity: 0.95;
}

.mes-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.1);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid rgba(214, 166, 72, 0.4);
}

.mes-bar label {
  font-size: 14px;
  color: var(--dourado-claro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mes-bar select, .mes-bar input {
  font-family: inherit;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: var(--branco);
  color: var(--preto);
  font-weight: 600;
}

main {
  padding: 32px 40px;
}

h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--bordeaux);
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--dourado);
}

/* GRID DE KPIs */
.kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.kpi-card {
  background: var(--branco);
  border: 2px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.15s ease;
  position: relative;
}

.kpi-card:hover {
  box-shadow: 0 4px 16px var(--sombra);
}

.kpi-card.verde { border-color: var(--verde); background: linear-gradient(180deg, var(--verde-claro) 0%, var(--branco) 40%); }
.kpi-card.amarelo { border-color: var(--amarelo); background: linear-gradient(180deg, var(--amarelo-claro) 0%, var(--branco) 40%); }
.kpi-card.vermelho { border-color: var(--vermelho); background: linear-gradient(180deg, var(--vermelho-claro) 0%, var(--branco) 40%); }

.kpi-card .nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--cinza-texto);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.kpi-card .valor {
  font-size: 32px;
  font-weight: 700;
  color: var(--preto);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  line-height: 1.1;
}

.kpi-card .calculado {
  font-size: 14px;
  color: var(--cinza-texto);
  margin-bottom: 12px;
  min-height: 18px;
}

.kpi-card .benchmark {
  font-size: 13px;
  color: var(--cinza-texto);
  padding-top: 10px;
  border-top: 1px solid var(--cinza-borda);
}

.kpi-card .benchmark strong { color: var(--preto); }

.kpi-card .delta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
}

.kpi-card .delta.positivo { background: var(--verde-claro); color: var(--verde); }
.kpi-card .delta.negativo { background: var(--vermelho-claro); color: var(--vermelho); }
.kpi-card .delta.neutro { background: var(--cinza-claro); color: var(--cinza-texto); }

.kpi-card .inputs-area {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.kpi-card .input-field {
  flex: 1;
  min-width: 0;
}

.kpi-card .input-field label {
  display: block;
  font-size: 11px;
  color: var(--cinza-texto);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2px;
}

.kpi-card input[type="number"] {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 6px 8px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  background: var(--branco);
}

.kpi-card input[type="number"]:focus {
  outline: none;
  border-color: var(--dourado);
}

.kpi-card .anterior-label {
  font-size: 12px;
  color: var(--cinza-texto);
  margin-top: 4px;
}

.kpi-card .anterior-label input {
  display: inline-block;
  width: 70px;
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  margin-left: 4px;
}

/* TIMELINE 6 MESES */
.timeline-receita {
  background: var(--cinza-claro);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--cinza-borda);
  margin-bottom: 32px;
}

.timeline-receita h3 {
  font-size: 18px;
  color: var(--bordeaux);
  margin-bottom: 16px;
  font-weight: 700;
}

.linha-tempo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
  height: 200px;
}

.mes-coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.mes-coluna .barra-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mes-coluna .barra {
  width: 100%;
  background: linear-gradient(180deg, var(--dourado) 0%, var(--bordeaux) 100%);
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  position: relative;
  transition: all 0.25s ease;
}

.mes-coluna .barra:hover { transform: translateY(-2px); }

.mes-coluna .barra .valor-barra {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--preto);
  white-space: nowrap;
}

.mes-coluna .label-mes {
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-texto);
}

.mes-coluna input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  text-align: center;
}

/* AÇÕES */
.acoes {
  display: flex;
  gap: 12px;
  padding: 24px 40px 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--cinza-borda);
}

button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 10px;
  border: 2px solid var(--bordeaux);
  cursor: pointer;
  transition: all 0.15s ease;
}

button.primary {
  background: var(--bordeaux);
  color: var(--branco);
}

button.primary:hover {
  background: var(--bordeaux-dark);
  transform: translateY(-1px);
}

button.secondary {
  background: var(--branco);
  color: var(--bordeaux);
}

button.secondary:hover {
  background: var(--cinza-claro);
  border-color: var(--dourado);
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--verde);
  color: var(--branco);
  padding: 14px 20px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(42, 127, 62, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

.toast.show { transform: translateY(0); opacity: 1; }

footer {
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: var(--cinza-texto);
}

/* RESPONSIVO */
@media (max-width: 1024px) {
  .kpis-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  body { padding: 12px 8px; font-size: 16px; }
  header, main, .acoes { padding-left: 20px; padding-right: 20px; }
  header h1 { font-size: 22px; }
  .kpis-grid { grid-template-columns: 1fr; }
  .linha-tempo { grid-template-columns: repeat(3, 1fr); height: auto; }
  .mes-coluna { min-height: 130px; }
}

/* IMPRESSÃO */
@media print {
  body { background: white; padding: 0; }
  .container { box-shadow: none; }
  .acoes, button { display: none !important; }
  .kpi-card { break-inside: avoid; }
  header { background: var(--bordeaux) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpi-card.verde, .kpi-card.amarelo, .kpi-card.vermelho {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
</style>
</head>
<body>

<div class="container">

<header>
  <div>
    <h1 id="titulo-mentorada">Dashboard de KPIs — {{NOME_MENTORADA}}</h1>
    <div class="subtitulo" id="subtitulo-nicho">Funil de Reunião High-Ticket · {{NICHO}}</div>
  </div>
  <div class="mes-bar">
    <label>Mês fechado</label>
    <select id="seletor-mes"></select>
    <input type="number" id="seletor-ano" min="2024" max="2030" value="2026" style="width: 90px;">
  </div>
</header>

<main>

  <h2>7 indicadores do funil</h2>

  <div class="kpis-grid">

    <!-- KPI 1: CPL página -->
    <div class="kpi-card" data-kpi="cpl">
      <div class="nome">1 · CPL da página</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Investimento (R$)</label>
          <input type="number" data-input="investimento" min="0" step="100" placeholder="0">
        </div>
        <div class="input-field">
          <label>Leads formulário</label>
          <input type="number" data-input="leads" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">R$ 0</div>
      <div class="calculado">Custo por lead</div>
      <div class="anterior-label">Mês anterior: R$ <input type="number" data-input="anterior" min="0" placeholder="0"><span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark BR:</strong> R$ 30-150 verde · R$ 151-300 amarelo · R$ 301+ vermelho</div>
    </div>

    <!-- KPI 2: Taxa qualificação -->
    <div class="kpi-card" data-kpi="qualificacao">
      <div class="nome">2 · Taxa de qualificação</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Qualificados</label>
          <input type="number" data-input="qualificados" min="0" placeholder="0">
        </div>
        <div class="input-field">
          <label>Total leads</label>
          <input type="number" data-input="total" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">0%</div>
      <div class="calculado">Leads verdes / total</div>
      <div class="anterior-label">Mês anterior: <input type="number" data-input="anterior" min="0" max="100" placeholder="0">%<span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark BR:</strong> 25-60% verde · 15-24% amarelo · &lt;15% vermelho</div>
    </div>

    <!-- KPI 3: Show up rate -->
    <div class="kpi-card" data-kpi="showup">
      <div class="nome">3 · Show up rate</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Apareceu</label>
          <input type="number" data-input="apareceu" min="0" placeholder="0">
        </div>
        <div class="input-field">
          <label>Agendou</label>
          <input type="number" data-input="agendou" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">0%</div>
      <div class="calculado">Apareceu na call / agendou</div>
      <div class="anterior-label">Mês anterior: <input type="number" data-input="anterior" min="0" max="100" placeholder="0">%<span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark BR:</strong> 70%+ verde · 50-69% amarelo · &lt;50% vermelho</div>
    </div>

    <!-- KPI 4: Fechamento na hora -->
    <div class="kpi-card" data-kpi="fech-hora">
      <div class="nome">4 · Fechamento na hora</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Fechou na call</label>
          <input type="number" data-input="fechou" min="0" placeholder="0">
        </div>
        <div class="input-field">
          <label>Fez call</label>
          <input type="number" data-input="fez" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">0%</div>
      <div class="calculado">Fechou na hora / reuniões</div>
      <div class="anterior-label">Mês anterior: <input type="number" data-input="anterior" min="0" max="100" placeholder="0">%<span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark BR:</strong> 15-40% verde · 8-14% amarelo · &lt;8% vermelho</div>
    </div>

    <!-- KPI 5: Fechamento total -->
    <div class="kpi-card" data-kpi="fech-total">
      <div class="nome">5 · Fechamento total</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Total fechou</label>
          <input type="number" data-input="totalFechou" min="0" placeholder="0">
        </div>
        <div class="input-field">
          <label>Total reuniões</label>
          <input type="number" data-input="totalReunioes" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">0%</div>
      <div class="calculado">Inclui follow-up</div>
      <div class="anterior-label">Mês anterior: <input type="number" data-input="anterior" min="0" max="100" placeholder="0">%<span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark BR:</strong> 30-60% verde · 18-29% amarelo · &lt;18% vermelho</div>
    </div>

    <!-- KPI 6: Ticket médio -->
    <div class="kpi-card" data-kpi="ticket">
      <div class="nome">6 · Ticket médio</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Receita total (R$)</label>
          <input type="number" data-input="receita" min="0" step="100" placeholder="0">
        </div>
        <div class="input-field">
          <label>Qtd fechamentos</label>
          <input type="number" data-input="qtd" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">R$ 0</div>
      <div class="calculado">Receita / qtd fechamentos</div>
      <div class="anterior-label">Mês anterior: R$ <input type="number" data-input="anterior" min="0" step="100" placeholder="0"><span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark:</strong> ≥ ticket alvo (R$ <span id="ticket-alvo-label">5.000</span>)</div>
    </div>

    <!-- KPI 7: LTV -->
    <div class="kpi-card" data-kpi="ltv">
      <div class="nome">7 · LTV (12 meses)</div>
      <div class="inputs-area">
        <div class="input-field">
          <label>Receita 12m (R$)</label>
          <input type="number" data-input="receita12m" min="0" step="100" placeholder="0">
        </div>
        <div class="input-field">
          <label>Clientes únicos</label>
          <input type="number" data-input="clientes" min="0" placeholder="0">
        </div>
      </div>
      <div class="valor" data-output="valor">R$ 0</div>
      <div class="calculado">Lifetime value médio</div>
      <div class="anterior-label">Mês anterior: R$ <input type="number" data-input="anterior" min="0" step="100" placeholder="0"><span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark"><strong>Benchmark:</strong> ≥ 1.5x ticket médio</div>
    </div>

    <!-- BOX RECEITA TOTAL -->
    <div class="kpi-card" data-kpi="receita-mes" style="background: linear-gradient(135deg, var(--preto) 0%, #2A2A2A 100%); color: var(--branco); border-color: var(--dourado);">
      <div class="nome" style="color: var(--dourado-claro);">Receita do mês</div>
      <div class="valor" style="color: var(--dourado); font-size: 36px;" data-output="valor">R$ 0</div>
      <div class="calculado" style="color: var(--dourado-claro); opacity: 0.8;">Total fechado no mês</div>
      <div class="anterior-label" style="color: var(--dourado-claro);">Mês anterior: R$ <input type="number" data-input="anterior" min="0" step="100" placeholder="0" style="background: rgba(255,255,255,0.1); color: var(--branco); border-color: rgba(255,255,255,0.2);"><span class="delta neutro" data-output="delta">—</span></div>
      <div class="benchmark" style="color: var(--dourado-claro); border-top-color: rgba(255,255,255,0.2);"><strong style="color: var(--branco);">Meta:</strong> ticket alvo x qtd fechamentos</div>
    </div>

  </div>

  <div class="timeline-receita">
    <h3>Receita últimos 6 meses</h3>
    <div class="linha-tempo" id="linha-tempo"></div>
  </div>

</main>

<div class="acoes">
  <button class="primary" onclick="window.print()">Salvar como PDF</button>
  <button class="secondary" onclick="exportarJSON()">Exportar JSON</button>
  <button class="secondary" onclick="document.getElementById('arquivo-json').click()">Importar JSON</button>
  <input type="file" id="arquivo-json" accept=".json" style="display:none" onchange="importarJSON(event)">
  <button class="secondary" onclick="resetar()">Resetar tudo</button>
</div>

<footer>
  Dashboard Imperatriz High-Ticket · Travessia Imperatriz Tata Goncalves
</footer>

</div>

<div class="toast" id="toast">Ação concluída</div>

<script>
// ═══════════════════════════════════════════════════════════════════════
// CONFIG — ajustável pela mentorada
// ═══════════════════════════════════════════════════════════════════════
window.CONFIG = {
  ticketAlvo: 5000,
  benchmarks: {
    cpl:        { verde: [30, 150],  amarelo: [151, 300], reverso: true },
    qualificacao: { verde: [25, 100], amarelo: [15, 24.99] },
    showup:     { verde: [70, 100],  amarelo: [50, 69.99] },
    'fech-hora': { verde: [15, 100], amarelo: [8, 14.99] },
    'fech-total': { verde: [30, 100], amarelo: [18, 29.99] }
  }
};

document.getElementById('ticket-alvo-label').textContent =
  window.CONFIG.ticketAlvo.toLocaleString('pt-BR');

// ═══════════════════════════════════════════════════════════════════════
// FORMATAÇÃO
// ═══════════════════════════════════════════════════════════════════════
function brl(v) { return 'R$ ' + Math.round(v).toLocaleString('pt-BR'); }
function pct(v) { return v.toFixed(1) + '%'; }

// ═══════════════════════════════════════════════════════════════════════
// SELETOR DE MÊS
// ═══════════════════════════════════════════════════════════════════════
const meses = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
               'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const seletorMes = document.getElementById('seletor-mes');
meses.forEach((m, i) => {
  const opt = document.createElement('option');
  opt.value = i;
  opt.textContent = m;
  seletorMes.appendChild(opt);
});
const agora = new Date();
seletorMes.value = agora.getMonth();
document.getElementById('seletor-ano').value = agora.getFullYear();

// ═══════════════════════════════════════════════════════════════════════
// CLASSIFICAÇÃO VERDE/AMARELO/VERMELHO
// ═══════════════════════════════════════════════════════════════════════
function classificar(kpi, valor) {
  const b = window.CONFIG.benchmarks[kpi];
  if (!b || valor == null || isNaN(valor)) return null;

  if (b.reverso) {
    // CPL: menor = melhor
    if (valor >= b.verde[0] && valor <= b.verde[1]) return 'verde';
    if (valor >= b.amarelo[0] && valor <= b.amarelo[1]) return 'amarelo';
    return 'vermelho';
  } else {
    // padrão: maior = melhor
    if (valor >= b.verde[0]) return 'verde';
    if (valor >= b.amarelo[0]) return 'amarelo';
    return 'vermelho';
  }
}

function classificarTicket(valor) {
  if (!valor) return null;
  if (valor >= window.CONFIG.ticketAlvo) return 'verde';
  if (valor >= window.CONFIG.ticketAlvo * 0.7) return 'amarelo';
  return 'vermelho';
}

function classificarLTV(ltv, ticketMedio) {
  if (!ltv || !ticketMedio) return null;
  if (ltv >= ticketMedio * 1.5) return 'verde';
  if (ltv >= ticketMedio) return 'amarelo';
  return 'vermelho';
}

function aplicarCor(card, cor) {
  card.classList.remove('verde', 'amarelo', 'vermelho');
  if (cor) card.classList.add(cor);
}

function calcDelta(atual, anterior, reverso = false) {
  if (anterior == null || isNaN(anterior) || anterior === 0) return null;
  if (atual == null || isNaN(atual)) return null;
  const delta = ((atual - anterior) / anterior) * 100;
  return { valor: delta, positivo: reverso ? delta < 0 : delta > 0 };
}

function mostrarDelta(span, delta) {
  span.classList.remove('positivo', 'negativo', 'neutro');
  if (!delta) {
    span.textContent = '—';
    span.classList.add('neutro');
    return;
  }
  const sinal = delta.valor >= 0 ? '+' : '';
  span.textContent = sinal + delta.valor.toFixed(1) + '%';
  span.classList.add(delta.positivo ? 'positivo' : 'negativo');
}

// ═══════════════════════════════════════════════════════════════════════
// CÁLCULO POR KPI
// ═══════════════════════════════════════════════════════════════════════
function getInput(card, name) {
  const el = card.querySelector(`input[data-input="${name}"]`);
  if (!el) return null;
  const v = parseFloat(el.value);
  return isNaN(v) ? null : v;
}

let ticketMedioAtual = 0;

function recalcular() {
  // KPI 1: CPL
  (() => {
    const card = document.querySelector('[data-kpi="cpl"]');
    const inv = getInput(card, 'investimento');
    const leads = getInput(card, 'leads');
    const valor = (inv && leads) ? inv / leads : 0;
    card.querySelector('[data-output="valor"]').textContent = brl(valor);
    aplicarCor(card, valor > 0 ? classificar('cpl', valor) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior'), true));
  })();

  // KPI 2: Taxa qualificação
  (() => {
    const card = document.querySelector('[data-kpi="qualificacao"]');
    const q = getInput(card, 'qualificados');
    const t = getInput(card, 'total');
    const valor = (q && t) ? (q / t) * 100 : 0;
    card.querySelector('[data-output="valor"]').textContent = pct(valor);
    aplicarCor(card, valor > 0 ? classificar('qualificacao', valor) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior')));
  })();

  // KPI 3: Show up
  (() => {
    const card = document.querySelector('[data-kpi="showup"]');
    const a = getInput(card, 'apareceu');
    const ag = getInput(card, 'agendou');
    const valor = (a && ag) ? (a / ag) * 100 : 0;
    card.querySelector('[data-output="valor"]').textContent = pct(valor);
    aplicarCor(card, valor > 0 ? classificar('showup', valor) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior')));
  })();

  // KPI 4: Fechamento na hora
  (() => {
    const card = document.querySelector('[data-kpi="fech-hora"]');
    const f = getInput(card, 'fechou');
    const fz = getInput(card, 'fez');
    const valor = (f != null && fz) ? (f / fz) * 100 : 0;
    card.querySelector('[data-output="valor"]').textContent = pct(valor);
    aplicarCor(card, fz > 0 ? classificar('fech-hora', valor) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior')));
  })();

  // KPI 5: Fechamento total
  (() => {
    const card = document.querySelector('[data-kpi="fech-total"]');
    const tf = getInput(card, 'totalFechou');
    const tr = getInput(card, 'totalReunioes');
    const valor = (tf != null && tr) ? (tf / tr) * 100 : 0;
    card.querySelector('[data-output="valor"]').textContent = pct(valor);
    aplicarCor(card, tr > 0 ? classificar('fech-total', valor) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior')));
  })();

  // KPI 6: Ticket médio
  ticketMedioAtual = 0;
  (() => {
    const card = document.querySelector('[data-kpi="ticket"]');
    const r = getInput(card, 'receita');
    const q = getInput(card, 'qtd');
    const valor = (r && q) ? r / q : 0;
    ticketMedioAtual = valor;
    card.querySelector('[data-output="valor"]').textContent = brl(valor);
    aplicarCor(card, valor > 0 ? classificarTicket(valor) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior')));
  })();

  // KPI 7: LTV
  (() => {
    const card = document.querySelector('[data-kpi="ltv"]');
    const r = getInput(card, 'receita12m');
    const c = getInput(card, 'clientes');
    const valor = (r && c) ? r / c : 0;
    card.querySelector('[data-output="valor"]').textContent = brl(valor);
    aplicarCor(card, valor > 0 ? classificarLTV(valor, ticketMedioAtual || window.CONFIG.ticketAlvo) : null);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(valor, getInput(card, 'anterior')));
  })();

  // Receita do mês (= receita do KPI 6)
  (() => {
    const card = document.querySelector('[data-kpi="receita-mes"]');
    const r = getInput(document.querySelector('[data-kpi="ticket"]'), 'receita') || 0;
    card.querySelector('[data-output="valor"]').textContent = brl(r);
    mostrarDelta(card.querySelector('[data-output="delta"]'),
      calcDelta(r, getInput(card, 'anterior')));

    // alimenta o último mês da timeline com esse valor
    const ultimoInput = document.querySelector('#linha-tempo .mes-coluna:last-child input');
    if (ultimoInput && (!ultimoInput.dataset.userEdited || ultimoInput.dataset.userEdited === 'false')) {
      ultimoInput.value = r || '';
      renderTimeline();
    }
  })();
}

// ═══════════════════════════════════════════════════════════════════════
// TIMELINE 6 MESES
// ═══════════════════════════════════════════════════════════════════════
function gerarTimeline() {
  const wrap = document.getElementById('linha-tempo');
  wrap.innerHTML = '';
  const mesAtual = parseInt(seletorMes.value);
  const anoAtual = parseInt(document.getElementById('seletor-ano').value);

  for (let i = 5; i >= 0; i--) {
    let mes = mesAtual - i;
    let ano = anoAtual;
    while (mes < 0) { mes += 12; ano -= 1; }

    const col = document.createElement('div');
    col.className = 'mes-coluna';
    col.innerHTML = `
      <div class="barra-wrap"><div class="barra" style="height: 0%"><span class="valor-barra"></span></div></div>
      <div class="label-mes">${meses[mes].slice(0,3)}/${String(ano).slice(2)}</div>
      <input type="number" min="0" step="100" placeholder="0" data-mes="${mes}-${ano}">
    `;
    col.querySelector('input').addEventListener('input', (e) => {
      e.target.dataset.userEdited = 'true';
      renderTimeline();
    });
    wrap.appendChild(col);
  }
  renderTimeline();
}

function renderTimeline() {
  const inputs = document.querySelectorAll('#linha-tempo input');
  const valores = Array.from(inputs).map(i => parseFloat(i.value) || 0);
  const max = Math.max(...valores, 1);
  inputs.forEach((input, i) => {
    const col = input.closest('.mes-coluna');
    const barra = col.querySelector('.barra');
    const valor = valores[i];
    const altura = (valor / max) * 100;
    barra.style.height = altura + '%';
    barra.querySelector('.valor-barra').textContent = valor > 0 ? brl(valor) : '';
  });
}

// ═══════════════════════════════════════════════════════════════════════
// EXPORTAR / IMPORTAR JSON
// ═══════════════════════════════════════════════════════════════════════
function coletarEstado() {
  const estado = {
    versao: 1,
    mes: parseInt(seletorMes.value),
    ano: parseInt(document.getElementById('seletor-ano').value),
    timestamp: new Date().toISOString(),
    kpis: {},
    timeline: {}
  };
  document.querySelectorAll('.kpi-card[data-kpi]').forEach(card => {
    const kpi = card.dataset.kpi;
    estado.kpis[kpi] = {};
    card.querySelectorAll('input[data-input]').forEach(inp => {
      estado.kpis[kpi][inp.dataset.input] = inp.value;
    });
  });
  document.querySelectorAll('#linha-tempo input').forEach(inp => {
    estado.timeline[inp.dataset.mes] = inp.value;
  });
  return estado;
}

function exportarJSON() {
  const estado = coletarEstado();
  const blob = new Blob([JSON.stringify(estado, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `dashboard-kpis-${estado.ano}-${String(estado.mes+1).padStart(2,'0')}.json`;
  a.click();
  URL.revokeObjectURL(url);
  notificar('Backup JSON salvo');
}

function importarJSON(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const estado = JSON.parse(e.target.result);
      if (estado.mes != null) seletorMes.value = estado.mes;
      if (estado.ano) document.getElementById('seletor-ano').value = estado.ano;
      gerarTimeline();
      if (estado.kpis) {
        Object.entries(estado.kpis).forEach(([kpi, valores]) => {
          const card = document.querySelector(`[data-kpi="${kpi}"]`);
          if (!card) return;
          Object.entries(valores).forEach(([key, val]) => {
            const inp = card.querySelector(`input[data-input="${key}"]`);
            if (inp) inp.value = val;
          });
        });
      }
      if (estado.timeline) {
        Object.entries(estado.timeline).forEach(([mesAno, valor]) => {
          const inp = document.querySelector(`#linha-tempo input[data-mes="${mesAno}"]`);
          if (inp) { inp.value = valor; inp.dataset.userEdited = 'true'; }
        });
      }
      recalcular();
      renderTimeline();
      notificar('Dados importados com sucesso');
    } catch (err) {
      notificar('Erro ao ler JSON: ' + err.message);
    }
  };
  reader.readAsText(file);
  event.target.value = '';
}

function resetar() {
  if (!confirm('Resetar todos os campos do mês atual?')) return;
  document.querySelectorAll('.kpi-card input[type="number"]').forEach(i => i.value = '');
  document.querySelectorAll('#linha-tempo input').forEach(i => {
    i.value = '';
    i.dataset.userEdited = 'false';
  });
  recalcular();
  renderTimeline();
  notificar('Campos resetados');
}

function notificar(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 2200);
}

// ═══════════════════════════════════════════════════════════════════════
// LISTENERS
// ═══════════════════════════════════════════════════════════════════════
document.querySelectorAll('.kpi-card input').forEach(el => {
  el.addEventListener('input', recalcular);
});

seletorMes.addEventListener('change', gerarTimeline);
document.getElementById('seletor-ano').addEventListener('change', gerarTimeline);

// inicial
gerarTimeline();
recalcular();
</script>

</body>
</html>
