/* ==========================================================================
   SGP — Funil de vendas da Vizion no /admin (03/11/2026)

   Camada própria, uma linha no manifesto. O cartão e a coluna REUSAM o
   `.tarefa` / `.tarefa-coluna` do quadro de tarefas (14_tarefas.css); aqui só
   o que muda: sete colunas em vez de três, rolando de lado.
   ========================================================================== */

/* --- O quadro: rola de lado, uma coluna por "página" no celular ----------- */
.funil-quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--esp-3);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--esp-2);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.funil-coluna { scroll-snap-align: start; }

.funil-coluna--ganho   { border-top: 3px solid var(--sgp-sucesso); }
.funil-coluna--perdido { border-top: 3px solid var(--cor-borda-forte); }

.funil-coluna__soma {
  margin: calc(-1 * var(--esp-2)) 0 0;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

@media (max-width: 640px) {
  /* Celular: cada coluna ocupa quase a tela e a próxima "espia" na borda —
     é o que diz "tem mais para o lado" sem texto. */
  .funil-quadro { grid-auto-columns: 82%; }
}

/* --- O cartão --------------------------------------------------------------- */
.funil-cartao__setas { justify-content: space-between; }
.funil-cartao__setas form { display: inline; }
.funil-cartao__setas .botao--mini { min-height: 32px; }

/* --- Gabinetes em teste sem negociação ------------------------------------- */
.funil-testes__lista {
  list-style: none;
  margin: 0;
  padding: 0 var(--esp-4) var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.funil-testes__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.funil-testes__item:last-child { border-bottom: 0; }
.funil-testes__nome { display: flex; flex-direction: column; min-width: 0; }

.funil-barra { flex-wrap: wrap; gap: var(--esp-2); }

/* --- A negociação ---------------------------------------------------------- */
.funil-negociacao {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--esp-4);
  align-items: start;
}

@media (max-width: 900px) {
  .funil-negociacao { grid-template-columns: minmax(0, 1fr); }
}

.funil-nova-tarefa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 1.3fr) minmax(0, 1fr) auto;
  gap: var(--esp-2);
  align-items: end;
}

.funil-nova-tarefa__descricao { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .funil-nova-tarefa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .funil-nova-tarefa__descricao { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .funil-nova-tarefa { grid-template-columns: minmax(0, 1fr); }
}

.funil-mover { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.funil-mover .campo__controle { flex: 1 1 160px; width: auto; }

.funil-dados {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-3);
  margin: 0;
}

.funil-dados dt { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.funil-dados dd { margin: 0; overflow-wrap: anywhere; }

.funil-historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.funil-historico li { display: flex; flex-direction: column; }

.funil-feitas summary { cursor: pointer; color: var(--cor-texto-suave); font-size: var(--texto-sm); }

/* --- Uma tarefa em linha ---------------------------------------------------- */
.funil-tarefas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.funil-tarefa {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.funil-tarefa:last-child { border-bottom: 0; }
.funil-tarefa form { display: contents; }

/* Alvo de toque de 44px, caixa visível de 20px. */
.funil-tarefa__marca {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px 0 -10px -10px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sgp-sucesso);
}

.funil-tarefa__caixa {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
}

.funil-tarefa__marca:hover .funil-tarefa__caixa { border-color: var(--sgp-sucesso); }
.funil-tarefa__marca:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: -6px; }

.funil-tarefa__corpo { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.funil-tarefa__meta { font-size: var(--texto-xs); overflow-wrap: anywhere; }
.funil-tarefa--feita .funil-tarefa__descricao { text-decoration: line-through; color: var(--cor-texto-suave); }
.funil-tarefa--atrasada .funil-tarefa__caixa { border-color: var(--sgp-perigo); }

/* --- Abas laterais e a lista delas ----------------------------------------- */
.funil-abas { flex-wrap: wrap; border-radius: var(--raio-md); }

.funil-lateral {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--esp-3);
}

.funil-lateral .tarefa { cursor: default; }

/* --- As saídas laterais na tela da negociação ------------------------------- */
.funil-saida summary { cursor: pointer; font-weight: var(--peso-medio); padding: var(--esp-2) 0; }
.funil-saida form { display: flex; flex-direction: column; gap: var(--esp-2); padding-bottom: var(--esp-2); }

.funil-praca { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: var(--esp-2); }