/*
  Visual herdado do crm-ominy, que o Rhuan ja aprovou e que ja esta validado
  em uso. Mesmos tokens, mesma tipografia, mesmas classes onde o comportamento
  e o mesmo. O que muda aqui e o que o funil inbound exige: temperatura,
  linha do tempo do lead e resumo do dia no lugar da fila de ligacao.
*/

:root{
  color-scheme: dark;
  --fundo:#14110F;
  --superficie:#1E1A17;
  --superficie-alta:#241F1B;
  --borda:#2C2622;
  --tinta:#EDE6DC;
  --fraca:#9A9089;
  --ambar:#F2A03C;
  --ambar-escuro:#C57C24;
  --frio:#74A3CC;
  --frio-fundo:#1B242B;
  --salvia:#7D9B6A;
  --tijolo:#8C5A4E;

  /* temperatura: quente puxa para o ambar da marca, frio para o azul */
  --t-quente:#F2A03C;
  --t-quente-fundo:#2A1F12;
  --t-morno:#C08A55;
  --t-morno-fundo:#241D16;
  --t-frio:#74A3CC;
  --t-frio-fundo:#1B242B;

  --display:"Fraunces",Georgia,serif;
  --apoio:"IBM Plex Sans",system-ui,sans-serif;
  --dados:"IBM Plex Mono",ui-monospace,monospace;
  --tracking:0.14em;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--apoio);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--frio);outline-offset:2px;border-radius:2px}

.rotulo{
  font-size:12px;font-weight:600;letter-spacing:var(--tracking);
  text-transform:uppercase;color:var(--fraca);
}
.marca{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-0.01em}
.num{font-family:var(--dados);font-variant-numeric:tabular-nums}

/* ---------- cabecalho ---------- */
.topo{
  position:sticky;top:0;z-index:20;
  background:var(--fundo);
  border-bottom:1px solid var(--borda);
}
.topo-linha{
  max-width:1360px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.marca-bloco{display:flex;align-items:baseline;gap:10px}
.marca-bloco .cliente{font-size:13px;color:var(--fraca);letter-spacing:.02em}
.abas{display:flex;gap:2px;margin-left:auto;order:3;width:100%}
@media(min-width:900px){.abas{order:0;width:auto;margin-left:0}}
.aba{
  padding:7px 14px;font-size:14px;font-weight:500;color:var(--fraca);
  border-bottom:2px solid transparent;transition:color .15s;
}
.aba:hover{color:var(--tinta)}
.aba[aria-current="true"]{color:var(--tinta);border-bottom-color:var(--tinta)}

.placar{display:flex;align-items:center;gap:14px;margin-left:auto}
.placar-num{font-family:var(--dados);font-size:14px;font-variant-numeric:tabular-nums;color:var(--fraca)}
.placar-num b{color:var(--tinta);font-weight:600}
.btn-topo{
  font-size:13px;font-weight:600;padding:7px 14px;
  border:1px solid var(--borda);color:var(--tinta);
}
.btn-topo:hover{border-color:var(--fraca)}
.estado-carga{font-size:12px;font-weight:500;color:var(--fraca);white-space:nowrap}

/* ---------- corpo ---------- */
.folha{max-width:1360px;margin:0 auto;padding:28px 24px 80px}
.aviso{
  background:var(--frio-fundo);border:1px solid #2E3F4A;color:#BBD3E4;
  padding:12px 16px;font-size:14px;margin-bottom:24px;
}
.aviso.ruim{background:#2A1A16;border-color:#4A2E27;color:#E0A597}

.cartao{background:var(--superficie);border:1px solid var(--borda);padding:24px}
@media(min-width:700px){.cartao{padding:32px}}
.cartao h2{font-family:var(--display);font-size:21px;font-weight:600;margin-bottom:4px}

.vazio{border:1px dashed var(--borda);padding:52px 28px;text-align:center;color:var(--fraca)}
.vazio h2{font-family:var(--display);font-size:26px;font-weight:600;color:var(--tinta);margin-bottom:10px}

/* ---------- temperatura ---------- */
.temp{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:var(--tracking);text-transform:uppercase;
  padding:3px 9px;border:1px solid;white-space:nowrap;
}
.temp[data-t="quente"]{color:var(--t-quente);border-color:var(--t-quente);background:var(--t-quente-fundo)}
.temp[data-t="morno"] {color:var(--t-morno); border-color:#4A3A28;      background:var(--t-morno-fundo)}
.temp[data-t="frio"]  {color:var(--t-frio);  border-color:#2E3F4A;      background:var(--t-frio-fundo)}
.temp[data-t="sem"]   {color:var(--fraca);   border-color:var(--borda); background:var(--fundo)}
.temp .chama{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor}
.temp[data-t="frio"] .chama{background:none;box-shadow:inset 0 0 0 2px currentColor}
.temp[data-t="sem"] .chama{background:none;box-shadow:inset 0 0 0 2px currentColor}

.barra-pontos{width:100%;height:3px;background:var(--borda);position:relative;overflow:hidden;margin-top:9px}
.barra-pontos i{position:absolute;inset:0 auto 0 0;display:block}
.barra-pontos i[data-t="quente"]{background:var(--t-quente)}
.barra-pontos i[data-t="morno"]{background:var(--t-morno)}
.barra-pontos i[data-t="frio"]{background:var(--t-frio)}

/* ---------- resumo do dia ---------- */
.metricas{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metrica{background:var(--superficie);border:1px solid var(--borda);padding:22px}
.metrica .v{
  font-family:var(--display);font-size:44px;font-weight:600;line-height:1;
  letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
}
.metrica .rotulo{display:block;margin-top:12px}
.metrica .alvo{font-family:var(--dados);font-size:12px;color:var(--fraca);margin-top:6px;display:block}

.dia{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;margin-top:24px}
@media(min-width:1040px){.dia{grid-template-columns:minmax(0,1fr) 372px}}

.termometro{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.termo-linha{display:flex;align-items:center;gap:12px}
.termo-linha .trilho{flex:1;height:8px;background:var(--fundo);border:1px solid var(--borda);position:relative;overflow:hidden}
.termo-linha .trilho i{position:absolute;inset:0 auto 0 0;display:block}
.termo-linha .n{font-family:var(--dados);font-size:13px;color:var(--fraca);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}

/* ---------- funil ---------- */
.funil{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));align-items:start}
.coluna{background:var(--superficie);border:1px solid var(--borda);padding:14px;min-height:120px}
.coluna-topo{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.coluna-topo .rotulo{font-size:11px}
.coluna-topo .cont{margin-left:auto;font-family:var(--dados);font-size:13px;color:var(--fraca);font-variant-numeric:tabular-nums}
.ponto{width:8px;height:8px;flex:none;border-radius:50%}
.coluna-agente{border-top:2px solid var(--ambar)}
.coluna-humano{border-top:2px solid var(--salvia)}

.mini{
  display:block;width:100%;text-align:left;border:1px solid var(--borda);
  background:var(--fundo);padding:11px 12px;margin-bottom:7px;
}
.mini:hover{border-color:var(--fraca)}
.mini .t{font-size:14px;font-weight:500;line-height:1.3;display:block}
.mini .s{
  font-family:var(--dados);font-size:12px;color:var(--fraca);
  margin-top:5px;display:block;font-variant-numeric:tabular-nums;
}
.mini-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}

.legenda{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-bottom:18px;font-size:13px;color:var(--fraca);
}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:14px;height:2px;display:block}

/* ---------- lista ---------- */
.barra{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.barra input,.barra select{
  background:var(--superficie);border:1px solid var(--borda);padding:9px 13px;font-size:14px;
}
.barra input{min-width:230px}
.barra input:focus,.barra select:focus{border-color:var(--fraca);outline:none}
.rolagem{overflow-x:auto;border:1px solid var(--borda)}
table{border-collapse:collapse;width:100%;min-width:820px;background:var(--superficie)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--borda);font-size:14px;vertical-align:middle}
th{
  font-size:11px;font-weight:600;letter-spacing:var(--tracking);text-transform:uppercase;
  color:var(--fraca);background:var(--fundo);position:sticky;top:0;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--superficie-alta)}
td.dado{font-family:var(--dados);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.link-nome{
  font-weight:500;text-align:left;text-decoration:underline;
  text-decoration-color:var(--borda);text-underline-offset:3px;
}
.link-nome:hover{text-decoration-color:var(--fraca)}

/* ---------- detalhe do lead ---------- */
.detalhe{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:1040px){.detalhe{grid-template-columns:minmax(0,1fr) 400px}}

.voltar{font-size:13px;color:var(--fraca);margin-bottom:18px;display:inline-block}
.voltar:hover{color:var(--tinta)}
.nome-lead{
  font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,40px);
  line-height:1.1;letter-spacing:-0.02em;text-wrap:balance;
}
.contato-lead{
  font-family:var(--dados);font-size:clamp(20px,3vw,28px);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;margin-top:12px;display:inline-block;text-decoration:none;
}
.contato-lead:hover{color:var(--ambar)}
.meta-lead{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ficha{font-size:13px;padding:5px 11px;border:1px solid var(--borda);color:var(--fraca);background:var(--fundo)}
.ficha b{color:var(--tinta);font-weight:600;font-family:var(--dados);font-variant-numeric:tabular-nums}

.bloco{margin-top:30px;padding-top:24px;border-top:1px solid var(--borda)}
.bloco > .rotulo{display:block;margin-bottom:14px}

.mover{display:flex;flex-wrap:wrap;gap:8px}
.mover button{
  border:1px solid var(--borda);padding:9px 14px;font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .15s,background .15s;
}
.mover button:hover:not([disabled]){border-color:var(--fraca);background:var(--superficie-alta)}
.mover button[aria-current="true"]{border-color:var(--tinta);background:var(--superficie-alta)}
.mover button[disabled]{opacity:.35;cursor:default}

/* linha do tempo: conversa e eventos no mesmo eixo, porque a pergunta do
   comercial e sempre "o que aconteceu antes de chegar em mim" */
.tempo{margin-top:8px;border-left:1px solid var(--borda);padding-left:20px;position:relative}
.evento,.fala{position:relative;padding-bottom:20px}
.evento::before,.fala::before{
  content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--fundo);box-shadow:inset 0 0 0 2px var(--borda);
}
.fala[data-papel="cliente"]::before{background:var(--frio);box-shadow:none}
.fala[data-papel="agente"]::before{background:var(--ambar);box-shadow:none}
.fala[data-papel="comercial"]::before{background:var(--salvia);box-shadow:none}
.evento::before{box-shadow:inset 0 0 0 2px var(--fraca)}

.quando{font-family:var(--dados);font-size:12px;color:var(--fraca);font-variant-numeric:tabular-nums}
.quem{font-size:12px;font-weight:600;letter-spacing:var(--tracking);text-transform:uppercase;margin-left:10px}
.fala[data-papel="cliente"] .quem{color:var(--frio)}
.fala[data-papel="agente"] .quem{color:var(--ambar)}
.fala[data-papel="comercial"] .quem{color:var(--salvia)}
.fala p{margin-top:7px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.evento p{margin-top:7px;font-size:14px;color:var(--fraca)}
.evento p b{color:var(--tinta);font-weight:500}

/* ---------- coluna lateral do lead ---------- */
.lado{display:flex;flex-direction:column;gap:24px}
.sinais{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.sinal{
  display:flex;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--borda);font-size:14px;
}
.sinal:last-child{border-bottom:none}
.sinal .k{color:var(--fraca);min-width:11ch;font-size:12px;font-weight:600;letter-spacing:var(--tracking);text-transform:uppercase}
.sinal .v{flex:1;overflow-wrap:anywhere}
.sinal .p{font-family:var(--dados);font-size:12px;color:var(--fraca);font-variant-numeric:tabular-nums}
.sinal[data-ativo="0"] .v{color:var(--fraca)}
.sinal[data-ativo="0"] .p{opacity:.4}

.previa{
  margin-top:14px;background:var(--fundo);border:1px solid var(--borda);
  padding:16px;font-family:var(--dados);font-size:13px;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow-y:auto;
}
.btn-copiar{font-size:12px;font-weight:600;color:var(--frio);border:1px solid #3A4C58;padding:6px 11px;margin-top:12px}
.btn-copiar:hover{background:var(--frio-fundo)}

.brinde{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:60;
  background:var(--superficie-alta);border:1px solid var(--borda);
  padding:12px 20px;font-size:14px;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.brinde[data-ver="1"]{opacity:1}

.nota-rodape{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--borda);
  font-size:13.5px;line-height:1.65;color:var(--fraca);max-width:66ch;
}
.nota-rodape b{color:var(--tinta)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}