/* Painel "Vendedoras dos Portais", dentro da tela Cotações não Informadas
   (mudança `acesso-portais-da-futura`, Fase 5).

   Sem protótipo do Claude Design, por decisão do Sylvio em 16/09/2026. As
   medidas e cores são as da tela que o hospeda
   (`cotacoes-nao-informadas-vendas.css`) e os tokens de `temas.css`, para o
   painel não destoar do que já está desenhado.

   🔴 Todo `var(--…)` daqui precisa EXISTIR em `temas.css`. Até 16/09/2026 o
   painel usava `--color-borda` e `--color-atencao-*`, que nunca existiram: a
   borda caía na cor do texto e o tom de atenção sumia, sem erro nenhum.

   Arquivo CSS comum, não `.razor.css` (regra fixa de 25/07/2026): todo seletor
   é prefixado por `.vendedoras-portais`, a classe raiz do componente. */

.vendedoras-portais {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.vendedoras-portais__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.vendedoras-portais__titulos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vendedoras-portais__titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.vendedoras-portais__subtitulo {
  font-size: 11.5px;
  color: var(--color-ink-soft);
}

.vendedoras-portais__subtitulo b {
  color: var(--color-ink-forte);
  font-weight: 700;
}

.vendedoras-portais__pilula {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  color: var(--color-subtle);
}

/* "A IA não respondeu" é aviso, não falha: a fila funciona sem ele. Tom de
   atenção, nunca de erro — erro faria a gestora achar que perdeu alguma
   coisa. */
.vendedoras-portais__pilula--sem-ia {
  border-color: var(--warning-border);
  color: var(--warning-text);
  background: var(--warning-bg);
}

.vendedoras-portais__aviso {
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  background: var(--warning-bg);
}

.vendedoras-portais__vazio {
  margin: 0;
  font-size: 11.5px;
  color: var(--color-ink-soft);
}

.vendedoras-portais__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vendedoras-portais__linha {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 11.5px;
}

/* Pendente recebe realce na lateral, e não fundo: o painel inteiro fica
   dentro de uma tela já densa, e fundo colorido em muitas linhas vira ruído. */
.vendedoras-portais__linha--pendente {
  border-left: 3px solid var(--warning-border);
}

.vendedoras-portais__recebido,
.vendedoras-portais__confirmado,
.vendedoras-portais__candidatos,
.vendedoras-portais__manual {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vendedoras-portais__recebido {
  flex: 1 1 200px;
}

.vendedoras-portais__confirmado,
.vendedoras-portais__candidatos {
  flex: 2 1 320px;
}

.vendedoras-portais__manual {
  flex: 0 1 220px;
}

.vendedoras-portais__rotulo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

.vendedoras-portais__nome,
.vendedoras-portais__vendedor {
  font-weight: 700;
  color: var(--color-ink-forte);
  overflow-wrap: anywhere;
}

.vendedoras-portais__autoria {
  font-size: 10.5px;
  color: var(--color-ink-soft);
}

.vendedoras-portais__candidato {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.vendedoras-portais__confirmar {
  flex: none;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--success-border);
  background: var(--color-surface);
  color: var(--success-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* Mesmo tom do "Confirmar" da fila ao lado (`.fila-cotacoes__confirmacao`):
   a gestora já aprendeu ali o que a cor de confirmação significa. */
.vendedoras-portais__confirmar:hover:not(:disabled) {
  background: var(--success-bg);
}

.vendedoras-portais__confirmar:focus-visible,
.vendedoras-portais__select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.vendedoras-portais__confirmar:disabled {
  opacity: 0.55;
  cursor: default;
}

/* A razão é o que faz a sugestão ter dono — ela nunca fica escondida atrás de
   um tooltip ou de um "ver mais". */
.vendedoras-portais__razao {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

.vendedoras-portais__sem-candidato {
  flex: 2 1 320px;
  align-self: center;
  color: var(--color-ink-soft);
  font-style: italic;
}

.vendedoras-portais__select {
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-forte);
  font-size: 11px;
  max-width: 100%;
}

@media (max-width: 700px) {
  .vendedoras-portais__linha {
    flex-direction: column;
    gap: 8px;
  }
}

/* A marca "inativo" ao lado do vendedor de uma correspondência gravada
   (mudança vendedores-ativos). */
.vendedoras-portais .vendedoras-portais__inativo {
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* "Não é de vendas" e "Voltar para a fila" (26/10/2026): ação secundária, sem o
   verde do "Confirmar" — tirar um nome da fila não atribui vendedor a ninguém. */
.vendedoras-portais__fora-de-vendas {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 2 1 320px;
}

.vendedoras-portais__acao {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-forte);
  font-size: 11px;
  cursor: pointer;
}

.vendedoras-portais__acao:hover:not(:disabled) {
  background: var(--color-bg);
}

.vendedoras-portais__acao:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.vendedoras-portais__acao:disabled {
  opacity: 0.55;
  cursor: default;
}