/* crm.css — componentes que entraram com o CRM e com a navegação nova:
   modal, gaveta, kanban, linha do tempo, acordeão, busca global e o
   cabeçalho de identidade do resultado da análise. */

/* ═══════════════════════════════ modal ═══════════════════════════════════ */
.modal-fundo{
  position:fixed;inset:0;z-index:300;
  background:rgba(10,14,26,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;
  animation:surge .16s ease;
}
.modal{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r);box-shadow:var(--sombra-3);
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  animation:sobe .2s cubic-bezier(.2,.8,.3,1);
}
.modal.largo{width:min(860px,100%)}
@keyframes sobe{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-cabeca{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 20px 14px;border-bottom:1px solid var(--linha-2);
}
.modal-cabeca h3{flex:1;min-width:0}
.modal-cabeca p{font-size:13px;color:var(--tinta-2);margin-top:3px}
.modal-corpo{padding:18px 20px;overflow-y:auto;display:grid;gap:15px}
.modal-pe{
  display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--linha-2);background:var(--superficie-2);
}
.fechar{
  width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--tinta-3);transition:background var(--t),color var(--t);flex:none;
}
.fechar:hover{background:var(--superficie-3);color:var(--tinta)}

/* escolha entre opções — canal de contato, tom da mensagem */
.escolhas{display:flex;gap:7px;flex-wrap:wrap}
.escolha{
  border:1px solid var(--linha);border-radius:var(--r-sm);
  padding:8px 14px;font-size:13px;font-weight:500;color:var(--tinta-2);
  transition:border-color var(--t),background var(--t),color var(--t);
}
.escolha:hover{border-color:var(--superficie-4);background:var(--superficie-3);color:var(--tinta)}
.escolha[aria-pressed="true"]{
  border-color:var(--marca);background:var(--marca-suave);color:var(--marca-3);font-weight:600;
}

/* ═══════════════════════════ gaveta lateral ══════════════════════════════ */
.gaveta-fundo{
  position:fixed;inset:0;z-index:290;background:rgba(10,14,26,.45);
  animation:surge .16s ease;
}
.gaveta{
  position:fixed;top:0;right:0;bottom:0;z-index:295;
  width:min(520px,100%);background:var(--superficie);
  border-left:1px solid var(--linha);box-shadow:var(--sombra-3);
  display:flex;flex-direction:column;
  animation:entraDireita .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes entraDireita{from{transform:translateX(20px);opacity:.4}to{transform:none;opacity:1}}
.gaveta-cabeca{padding:18px 20px 14px;border-bottom:1px solid var(--linha-2)}
.gaveta-corpo{flex:1;overflow-y:auto;padding:18px 20px 40px;display:grid;gap:18px}

/* ═══════════════════════════════ kanban ═════════════════════════════════ */
.kanban{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x proximity;
}
.coluna{
  flex:0 0 268px;min-width:268px;
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--r);display:flex;flex-direction:column;
  max-height:calc(100vh - 250px);scroll-snap-align:start;
  transition:border-color var(--t),background var(--t);
}
.coluna.alvo{border-color:var(--marca);background:var(--marca-suave)}
.coluna-cabeca{
  padding:12px 13px 10px;border-bottom:1px solid var(--linha-2);
  display:flex;align-items:center;gap:8px;position:sticky;top:0;
  background:var(--superficie-2);border-radius:var(--r) var(--r) 0 0;z-index:1;
}
.coluna.alvo .coluna-cabeca{background:var(--marca-suave)}
.coluna-cabeca b{flex:1;font-size:12.5px;font-family:var(--f-titulo);letter-spacing:-.005em}
.coluna-cabeca .conta{
  font-family:var(--f-mono);font-size:11px;background:var(--superficie);
  color:var(--tinta-3);padding:1px 7px;border-radius:99px;border:1px solid var(--linha);
}
.coluna-corpo{padding:10px;display:grid;gap:8px;overflow-y:auto;flex:1;min-height:70px}

.cartao-empresa{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:11px 12px;cursor:grab;
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
  text-align:left;width:100%;display:block;
}
.cartao-empresa:hover{border-color:var(--superficie-4);box-shadow:var(--sombra)}
.cartao-empresa:active{cursor:grabbing}
.cartao-empresa.arrastando{opacity:.4;transform:scale(.97)}
.cartao-empresa .nome{font-size:13.5px;font-weight:600;line-height:1.25}
.cartao-empresa .meta{font-size:11.5px;color:var(--tinta-3);margin-top:3px}
.cartao-empresa .marcas{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.cartao-empresa .atrasado{color:var(--alerta);font-weight:600}
.coluna-vazia{
  font-size:12px;color:var(--tinta-3);text-align:center;
  padding:16px 10px;line-height:1.45;
}

/* ═════════════════════════════ linha do tempo ═══════════════════════════ */
.linha-tempo{display:grid;gap:0;position:relative}
.evento{
  display:grid;grid-template-columns:26px 1fr;gap:11px;
  padding:0 0 15px;position:relative;
}
.evento::before{
  content:"";position:absolute;left:12px;top:22px;bottom:0;
  width:1px;background:var(--linha);
}
.evento:last-child{padding-bottom:0}
.evento:last-child::before{display:none}
.evento .bolha{
  width:25px;height:25px;border-radius:99px;display:grid;place-items:center;
  background:var(--superficie-3);color:var(--tinta-2);
  font-size:12px;border:1px solid var(--linha);z-index:1;
}
.evento.marcante .bolha{background:var(--marca-suave);color:var(--marca-3);border-color:var(--marca)}
.evento .quando{font-family:var(--f-mono);font-size:10.5px;color:var(--tinta-3)}
.evento .titulo{font-size:13.5px;font-weight:600;margin-top:1px}
.evento .detalhe{font-size:12.5px;color:var(--tinta-2);margin-top:2px;line-height:1.45}
.evento .citacao{
  font-size:12.5px;color:var(--tinta-2);margin-top:6px;line-height:1.5;
  background:var(--superficie-2);border-left:2px solid var(--linha);
  padding:8px 11px;border-radius:0 var(--r-xs) var(--r-xs) 0;white-space:pre-wrap;
}

/* ═════════════════════════════ acordeão ═════════════════════════════════ */
.sanfona{border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;background:var(--superficie)}
.sanfona + .sanfona{margin-top:10px}
.sanfona > summary{
  padding:14px 17px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;
  transition:background var(--t);
}
.sanfona > summary::-webkit-details-marker{display:none}
.sanfona > summary:hover{background:var(--superficie-2)}
.sanfona > summary .rotulo-sanfona{flex:1;font-family:var(--f-titulo);font-size:14.5px;font-weight:700}
.sanfona > summary .seta{transition:transform var(--t);color:var(--tinta-3)}
.sanfona[open] > summary{border-bottom:1px solid var(--linha-2);background:var(--superficie-2)}
.sanfona[open] > summary .seta{transform:rotate(90deg)}
.sanfona .interior{padding:16px 17px}

/* ══════════════════════════ cabeçalho do resultado ══════════════════════ */
.identidade{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:18px 20px;background:var(--superficie);
  border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);
}
.identidade .avatar{
  width:54px;height:54px;border-radius:14px;flex:none;
  background:linear-gradient(145deg,var(--marca-suave),var(--superficie-3));
  color:var(--marca-3);display:grid;place-items:center;
  font-family:var(--f-titulo);font-weight:800;font-size:21px;
  border:1px solid var(--linha);
}
.identidade .quem{flex:1;min-width:210px}
.identidade .quem h2{font-size:22px;letter-spacing:-.025em}
.identidade .quem .sub{font-size:13px;color:var(--tinta-2);margin-top:3px}
.identidade .canais{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.identidade .situacao{display:grid;gap:7px;align-content:start;min-width:190px}

/* ══════════════════════════ card de abordagem ═══════════════════════════ */
.enviada{
  display:flex;align-items:center;gap:12px;
  background:var(--ok-suave);border:1px solid var(--ok);
  border-radius:var(--r-sm);padding:13px 15px;
}
.enviada .marca-ok{
  width:30px;height:30px;border-radius:99px;flex:none;
  background:var(--ok);color:#fff;display:grid;place-items:center;font-size:15px;
}
.enviada .texto b{display:block;font-size:13.5px;color:var(--ok-texto)}
.enviada .texto span{font-size:12.5px;color:var(--tinta-2)}

.faixa-acao{
  border-top:1px dashed var(--linha);margin-top:4px;padding-top:14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.faixa-acao .pergunta{font-size:13px;color:var(--tinta-2);flex:1;min-width:170px}

/* ════════════════════════════ busca global ══════════════════════════════ */
.busca-global{position:relative;min-width:210px;flex:1;max-width:340px}
.busca-global input{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:8px 11px 8px 32px;font-size:13px;width:100%;
  transition:border-color var(--t),box-shadow var(--t);
}
.busca-global input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave)}
.busca-global > svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tinta-3);pointer-events:none}
.resultados-busca{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-sm);box-shadow:var(--sombra-2);
  max-height:330px;overflow-y:auto;padding:5px;
}
.resultados-busca button{
  display:block;width:100%;text-align:left;padding:8px 10px;
  border-radius:var(--r-xs);transition:background var(--t);
}
.resultados-busca button:hover{background:var(--superficie-3)}
.resultados-busca .nome{font-size:13px;font-weight:600}
.resultados-busca .meta{font-size:11.5px;color:var(--tinta-3);margin-top:1px}
.resultados-busca .grupo{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);padding:8px 10px 4px;
}

/* ══════════════════════════ métricas clicáveis ══════════════════════════ */
.metrica.clicavel{
  cursor:pointer;width:100%;text-align:left;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.metrica.clicavel:hover{border-color:var(--marca);box-shadow:var(--sombra);transform:translateY(-1px)}
.metrica.clicavel:active{transform:none}

/* ═══════════════════════════ filtros recolhíveis ════════════════════════ */
.filtros{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.filtros .campo{min-width:150px}
.filtros-extra{
  display:none;gap:9px;flex-wrap:wrap;width:100%;
  padding-top:10px;border-top:1px solid var(--linha-2);margin-top:4px;
}
.filtros-extra.aberto{display:flex}

@media (max-width:680px){
  .kanban{gap:9px}
  .coluna{flex-basis:238px;min-width:238px}
  .modal{max-height:92vh}
  .identidade .situacao{min-width:100%}
  .busca-global{max-width:100%}
}