/* ═══════════════════════════════════════════════
   ROTA — gestão de parceiros
   Herda a casca e os componentes do painel.css (side, top, kpi,
   painelbox, selo, btn). Aqui mora só o que é do funil.
   ═══════════════════════════════════════════════ */

.conteudo{gap:20px}

/* a lateral vira navegação por etapa */
.side__i{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 12px;border-radius:12px;color:var(--ink-2);font-size:13.5px;text-align:left;
  transition:background .2s,color .2s;
}
.side__i:hover{background:var(--surface-2);color:var(--ink)}
.side__i.is-active{background:var(--surface-3);color:var(--amber);font-weight:600}
.side__n{
  font-style:normal;font-size:11.5px;font-weight:600;min-width:22px;text-align:center;
  padding:2px 7px;border-radius:99px;background:var(--surface-3);color:var(--ink-3);
}
.side__i.is-active .side__n{background:rgba(240,169,60,.16);color:var(--amber)}

/* ── funil ── */
.funil{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.etapa{
  position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:14px;border-radius:var(--r-md);
  border:1px solid var(--stroke);background:var(--surface-2);
  transition:border-color .25s,background .25s,transform .25s var(--e-out);
}
.etapa:hover{transform:translateY(-2px);border-color:var(--stroke-btn);background:var(--surface-3)}
.etapa.is-on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.etapa__n{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.etapa__k{font-size:12.5px;font-weight:600}
.etapa__s{font-size:11px;color:var(--ink-3)}
/* quem está esperando quem: sem isso ninguém sabe de quem é a bola */
.etapa__dono{
  margin-top:6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:3px 7px;border-radius:99px;align-self:flex-start;
  background:var(--surface-3);color:var(--ink-3);
}
.etapa--azul .etapa__n{color:var(--iris)}
.etapa--ambar .etapa__n{color:var(--amber)}
.etapa--ambar .etapa__dono{background:rgba(240,169,60,.14);color:var(--amber)}
.etapa--verde .etapa__n{color:var(--mint)}
.etapa--cinza .etapa__n{color:var(--ink-2)}

/* ── barra de busca e ordenação ── */
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.busca{
  display:flex;align-items:center;gap:9px;padding:0 14px;height:40px;
  border-radius:12px;border:1px solid var(--stroke-btn);background:var(--surface-2);
  transition:border-color .25s;
}
.busca:focus-within{border-color:var(--amber)}
.busca .ico{width:16px;color:var(--ink-3);flex:none}
.busca input{font:inherit;font-size:13.5px;color:var(--ink);background:none;border:0;outline:none;width:min(240px,44vw)}
.ordenar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.ordenar select{
  font:inherit;font-size:13px;color:var(--ink);padding:9px 12px;border-radius:12px;
  border:1px solid var(--stroke-btn);background:var(--surface-2);outline:none;
}

/* ── lista de candidatos ── */
.lista{display:flex;flex-direction:column;gap:8px}
.cand{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.1fr) auto auto 20px;
  align-items:center;gap:16px;padding:13px 14px;border-radius:var(--r-md);
  border:1px solid var(--stroke);background:var(--surface-2);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s var(--e-out);
}
.cand:hover{border-color:var(--amber);background:var(--surface-3);transform:translateX(2px)}
.cand:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* quem está parado demais precisa saltar da lista, não se esconder nela */
.cand.is-parado{border-left:3px solid var(--rose)}
.cand__id b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.cand__id span{font-size:12px;color:var(--ink-3)}
.cand__resp{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand__tempo{text-align:right}
.cand__tempo b{display:block;font-size:12.5px;font-weight:600}
.cand__tempo span{font-size:10.5px;color:var(--ink-3)}
.cand.is-parado .cand__tempo b{color:var(--rose)}
.cand__seta{width:18px;color:var(--ink-3)}
.vazio{padding:26px 4px;text-align:center;font-size:13.5px;color:var(--ink-3)}

.selo--azul{color:var(--iris);border-color:rgba(124,92,255,.45)}
.selo--ambar{color:var(--amber);border-color:rgba(240,169,60,.45)}
.selo--verde{color:var(--mint);border-color:rgba(53,224,200,.45)}
.selo--cinza{color:var(--ink-3)}

/* ── ficha ── */
.ficha{position:fixed;inset:0;z-index:200;visibility:hidden}
.ficha.is-open{visibility:visible}
.ficha__scrim{
  position:absolute;inset:0;background:rgba(4,4,8,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s var(--e-out);
}
.ficha.is-open .ficha__scrim{opacity:1}
.ficha__painel{
  position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);
  display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--stroke);
  transform:translateX(100%);transition:transform .45s var(--e-out);
}
.ficha.is-open .ficha__painel{transform:none}
.ficha__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--stroke);
}
.ficha__proto{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:700}
.ficha__head h3{font-size:19px;margin:4px 0 2px}
.ficha__head>div>span:last-child{font-size:12.5px;color:var(--ink-3)}
.ficha__corpo{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:24px}
.ficha__corpo>*{flex:0 0 auto}   /* blocos mantêm a altura; quem rola é o corpo */
.ficha__pe{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--stroke);background:var(--surface-2);
}
.ficha__pe .btn{flex:0 0 auto}
.ficha__pe .btn--amber{margin-left:auto}
.btn--perigo{color:var(--rose);border-color:rgba(255,123,168,.4)}
.btn--perigo:hover{background:rgba(255,123,168,.1);border-color:var(--rose);color:var(--rose)}

.fbloco h4{
  font-family:var(--ff-text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:12px;
}
.fnota{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.alerta{
  padding:13px 15px;border-radius:var(--r-md);
  border:1px solid rgba(255,123,168,.4);background:rgba(255,123,168,.08);
}
.alerta b{display:block;font-size:13.5px;color:var(--rose)}
.alerta span{font-size:12.5px;color:var(--ink-2)}

/* fluxo do funil dentro da ficha */
.fluxo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fluxo__i{position:relative;display:flex;gap:14px;padding-bottom:16px}
.fluxo__i:last-child{padding-bottom:0}
/* a linha que liga os pontos nasce do próprio item, não de um elemento extra */
.fluxo__i::before{
  content:"";position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--stroke);
}
.fluxo__i:last-child::before{display:none}
.fluxo__i.is-feito::before{background:var(--mint)}
.fluxo__p{
  flex:none;width:14px;height:14px;border-radius:50%;margin-top:2px;
  border:2px solid var(--stroke-2);background:var(--panel);position:relative;z-index:1;
}
.fluxo__i.is-feito .fluxo__p{background:var(--mint);border-color:var(--mint)}
.fluxo__i.is-atual .fluxo__p{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(240,169,60,.18)}
.fluxo__t b{display:block;font-size:13.5px;font-weight:600}
.fluxo__t span{font-size:11.5px;color:var(--ink-3)}
.fluxo__i.is-atual .fluxo__t b{color:var(--amber)}

.pend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pend li{
  padding:11px 13px;border-radius:12px;
  border:1px dashed var(--stroke-btn);background:var(--surface-2);
}
.pend b{display:block;font-size:13px;font-weight:600}
.pend span{font-size:11.5px;color:var(--ink-3)}

.dados{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.dados dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dados dd{margin:3px 0 0;font-size:13.5px;word-break:break-word}

.notaform{display:flex;gap:9px;margin-bottom:12px}
.notaform input{
  flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--ink);
  padding:11px 13px;border-radius:12px;
  border:1px solid var(--stroke-btn);background:var(--surface-2);outline:none;transition:border-color .25s;
}
.notaform input:focus{border-color:var(--amber)}
.notas,.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.notas li{padding:11px 13px;border-radius:12px;background:var(--surface-2)}
.notas li>span,.hist li>span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.notas li p{margin:4px 0 0;font-size:13.5px;line-height:1.45}
.hist li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--stroke)}
.hist li b{font-size:13px;font-weight:500}

/* ── toast ── */
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:300;
  display:flex;align-items:center;gap:12px;padding:13px 20px;border-radius:99px;
  border:1px solid var(--stroke-2);background:var(--glass);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transform:translateY(14px);transition:opacity .4s var(--e-out),transform .5s var(--e-out);
}
.toast.is-on{opacity:1;transform:none}
.toast b{display:block;font-size:13.5px;font-weight:600}
.toast span span{font-size:12px;color:var(--ink-3)}

@media (max-width:1180px){
  .funil{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .cand{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .cand__resp,.cand__seta{display:none}
  .cand__etapa{grid-column:1}
  .barra{width:100%}
  .busca input{width:100%}
}
@media (max-width:560px){
  .funil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dados{grid-template-columns:1fr}
  .ficha__painel{width:100%}
}

/* confirmacao de recusa, embutida no rodape da ficha */
.recusa{display:flex;flex-direction:column;gap:9px;width:100%}
.recusa label{font-size:12px;color:var(--ink-3)}
.recusa__linha{display:flex;gap:9px;flex-wrap:wrap}
.recusa__linha input{
  flex:1;min-width:180px;font:inherit;font-size:13.5px;color:var(--ink);
  padding:11px 13px;border-radius:12px;
  border:1px solid var(--stroke-btn);background:var(--panel);outline:none;transition:border-color .25s;
}
.recusa__linha input:focus{border-color:var(--rose)}

/* o que o lojista ja marcou como enviado para de parecer pendencia */
.pend li.is-veio{border-style:solid;border-color:rgba(53,224,200,.4);background:rgba(53,224,200,.07)}
.pend li.is-veio b{color:var(--mint)}

/* ── dono do caso ── */
.dono{
  font:inherit;font-size:13.5px;color:var(--ink);width:100%;
  padding:11px 13px;border-radius:12px;
  border:1px solid var(--stroke-btn);background:var(--surface-2);outline:none;transition:border-color .25s;
}
.dono:focus{border-color:var(--amber)}
.cand__dono{font-size:13px;color:var(--ink-2)}
.cand__dono.is-sem{color:var(--ink-3);font-style:italic}
/* recado não lido tem de saltar da linha, senão vira e-mail que ninguém abre */
.cand__recado{
  font-style:normal;font-size:10.5px;font-weight:700;
  padding:1px 7px;border-radius:99px;margin-left:6px;
  background:var(--amber);color:var(--on-amber);vertical-align:middle;
}

/* ── tarefas da equipe ── */
.tarefas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tarefa{
  display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:12px;cursor:pointer;
  border:1px solid var(--stroke-btn);background:var(--surface-2);transition:border-color .25s,background .25s;
}
.tarefa:hover{border-color:var(--amber)}
.tarefa input{width:17px;height:17px;margin-top:1px;flex:none;accent-color:var(--mint)}
.tarefa b{display:block;font-size:13px;font-weight:600}
.tarefa>span>span{font-size:11.5px;color:var(--ink-3)}
.tarefa.is-feita{border-color:rgba(53,224,200,.4);background:rgba(53,224,200,.07)}
.tarefa.is-feita b{color:var(--mint);text-decoration:line-through;text-decoration-color:rgba(53,224,200,.5)}

/* ── conversa ── */
.conversa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.conversa__i{padding:11px 13px;border-radius:12px;background:var(--surface-2)}
.conversa__i>span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.conversa__i p{margin:4px 0 0;font-size:13.5px;line-height:1.45}
/* quem falou se lê pela borda, sem precisar do rótulo */
.conversa__i--equipe{border-left:2px solid var(--amber)}
.conversa__i--lojista{border-left:2px solid var(--mint)}

/* ── edição de dados ── */
.edit{display:flex;flex-direction:column;gap:13px}
.edit__2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.edit .campo{display:flex;flex-direction:column;gap:6px}
.edit label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.edit input,.edit select{
  font:inherit;font-size:13.5px;color:var(--ink);padding:10px 12px;border-radius:11px;
  border:1px solid var(--stroke-btn);background:var(--surface-2);outline:none;transition:border-color .25s;
}
.edit input:focus,.edit select:focus{border-color:var(--amber)}
.edit__acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.linkbtn{font-size:12.5px;color:var(--amber);padding:8px 0;margin-top:12px}
.linkbtn:hover{text-decoration:underline}

/* ── novo candidato ── */
/* o [hidden] do navegador perde para uma classe do autor: sem a linha
   abaixo o formulario nasce aberto */
.novo[hidden]{display:none}
/* parceiros.html nao carrega o styles.css, entao a classe de erro precisa
   existir aqui tambem */
.campo__erro{font-size:12px;color:var(--rose)}
.novo{
  display:flex;flex-direction:column;gap:14px;margin-bottom:18px;padding:18px;
  border-radius:var(--r-md);border:1px dashed var(--stroke-btn);background:var(--surface-2);
}
.novo__linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px}
.novo .campo{display:flex;flex-direction:column;gap:6px}
.novo label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.novo input,.novo select{
  font:inherit;font-size:13.5px;color:var(--ink);padding:11px 13px;border-radius:12px;
  border:1px solid var(--stroke-btn);background:var(--panel);outline:none;transition:border-color .25s;
}
.novo input:focus,.novo select:focus{border-color:var(--amber)}
.novo__acoes{display:flex;gap:10px;justify-content:flex-end}

@media (max-width:640px){
  .edit__2{grid-template-columns:1fr}
  .barra .btn{flex:1}
}