/* Tela Canais de Venda (Módulo Vendas, etapa 11).

   Markup e medidas traduzidos do protótipo
   `Prototipos/CDC Vendas - Canais de Venda (standalone).html` — os valores
   de tamanho, espaçamento e peso de fonte abaixo são LITERAIS dele (grade
   130px + 8×66px + 86px, indicador de 132px, barra de proporção de 10px,
   etc.), não aproximações. Cor é a única coisa que não vem literal: o
   protótipo é tema escuro fixo e usa hex direto, aqui tudo passa por token
   de `temas.css` (regra desde 27/07/2026).

   Arquivo CSS COMUM, não `.razor.css`: o bundle de CSS isolado de uma
   Razor Class Library referenciada não é agregado ao
   `Cdc.Web.Shell.styles.css` nesta configuração — o componente monta, o
   build passa, e o elemento fica sem estilo nenhum (regra fixa de
   25/07/2026, diagnosticada no EsqueletoCarregamento). Por isso todo
   seletor daqui é prefixado por `.canais-venda`, que é o que o
   `.razor.css` daria de graça. */

.canais-venda {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ---------- Cabeçalho ---------- */

.canais-venda__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.canais-venda__titulo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.canais-venda__titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.canais-venda__badge-acesso {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  letter-spacing: .04em;
}

/* "valores em R$ milhões" vive aqui, e não é decoração: é o que dá
   sentido ao número puro da célula (`14,2` sem `R$`). Ver Delta Spec,
   "Escala monetária". */
.canais-venda__subtitulo {
  font-size: 10.5px;
  color: var(--color-subtle);
  margin-top: 2px;
}

/* ---------- Resumo ativa / passiva / não informado ---------- */

.canais-venda__resumo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 7px 12px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.canais-venda__indicadores {
  flex: none;
  display: flex;
  gap: 10px;
}

.canais-venda__indicador {
  width: 132px;
  padding-left: 8px;
  border-left: 3px solid var(--color-border);
}

/* Cor de GRUPO, nunca de canal — a fatia "Venda ativa" não pode ficar
   visualmente idêntica ao segmento WhatsApp da legenda. */
.canais-venda__indicador--ativa {
  border-left-color: var(--grupo-ativa);
}

.canais-venda__indicador--mista {
  border-left-color: var(--grupo-mista);
}

.canais-venda__indicador--passiva {
  border-left-color: var(--grupo-passiva);
}

.canais-venda__indicador--nao-informado {
  border-left-color: var(--grupo-nao-informado);
}

.canais-venda__indicador-rotulo {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.canais-venda__indicador-valores {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.canais-venda__indicador-pct {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
}

.canais-venda__indicador-valor {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-muted);
}

/* email-como-origem-da-venda (30/09/2026): o quinto cartão não é grupo —
   é a origem, e é parte do total. O fio o separa dos quatro, e a cor é a do
   canal E-mail, e não de grupo nenhum. */
.canais-venda__indicador-fio {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
}

.canais-venda__indicador--origem-email {
  width: 200px;
  border-left-color: var(--canal-email);
}

.canais-venda__indicador-pct--aguardando {
  font-size: 13px;
  color: var(--color-subtle);
}

.canais-venda__indicador-apoio {
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--color-muted);
}

.canais-venda__indicador--ativa .canais-venda__indicador-valor {
  color: var(--grupo-ativa);
}

.canais-venda__indicador--mista .canais-venda__indicador-valor {
  color: var(--grupo-mista);
}

.canais-venda__indicador--passiva .canais-venda__indicador-valor {
  color: var(--grupo-passiva);
}

.canais-venda__resumo-barra {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.canais-venda__proporcao {
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: flex;
  background: var(--color-bg);
}

.canais-venda__aviso {
  font-size: 9.5px;
  color: var(--color-subtle);
  line-height: 1.45;
}

/* Acima de 25% não informado (Delta Spec) — o mesmo texto muda de tom,
   não aparece um segundo aviso. */
.canais-venda__aviso--alerta {
  color: var(--warning-text);
}

/* ---------- Painel principal (matriz ou gráfico) ---------- */

.canais-venda__painel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.canais-venda__painel-cabecalho {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
}

.canais-venda__painel-titulo {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.canais-venda__vista {
  display: flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.canais-venda__vista-chip {
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--color-subtle);
}

.canais-venda__vista-chip--ativo {
  background: var(--color-border);
  color: var(--color-ink);
}

/* ---------- Matriz ----------

   Duas grades sobrepostas de propósito, exatamente como o protótipo: a
   primeira (grupos) mede 130px + 3 canais + 1 canal + 1 canal, a segunda
   (cabeçalho e linhas) mede coluna a coluna. Os números batem —
   3×66 = 198, 1×66 = 66 — e é isso que faz a barra colorida de "Venda
   ativa" cobrir exatamente as 3 colunas dela e "Venda passiva" cobrir só
   a coluna "Portais" (mudança de 06/08/2026: os 3 canais de portal viram
   1 coluna só na exibição — grade passou de 8 colunas de canal pra 5). */

.canais-venda__matriz {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.canais-venda__grupos {
  flex: none;
  display: grid;
  /* Faixa de grupo: MESMA grade das linhas, e cada faixa ocupa
     `grid-column: span N` (N vem da pagina, contando as colunas exibidas
     de cada grupo). Ate 12/09/2026 era uma grade propria somada a mao
     (198px = 3x66...), e ela nao sobrevive ao checklist de canais: com
     uma coluna desmarcada as faixas deixariam de cobrir as colunas certas.
     `--colunas-canal` e definida no .canais-venda__matriz. */
  grid-template-columns: 130px repeat(var(--colunas-canal, 7), 96px) 112px 1fr;
  align-items: end;
  padding-bottom: 3px;
}

.canais-venda__grupo + .canais-venda__grupo {
  margin-left: 6px;
}

.canais-venda__grupo {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: 3px;
  text-align: center;
}

.canais-venda__grupo--ativa {
  color: var(--grupo-ativa);
  border-bottom: 2px solid var(--grupo-ativa);
}

.canais-venda__grupo--mista {
  color: var(--grupo-mista);
  border-bottom: 2px solid var(--grupo-mista);
}

.canais-venda__grupo--passiva {
  color: var(--grupo-passiva);
  border-bottom: 2px solid var(--grupo-passiva);
}

.canais-venda__grupo--nao-informado {
  color: var(--color-muted);
  border-bottom: 2px solid var(--grupo-nao-informado);
}

.canais-venda__cabecalho-colunas,
.canais-venda__linha,
.canais-venda__rodape {
  display: grid;
  /* Ate 7 colunas de canal desde o ComLink (12/09/2026); menos quando o
     checklist desmarca alguma — por isso a contagem vem da pagina, em
     `--colunas-canal`. Os 96px de cada (valor completo, 06/11/2026) saem do 1fr do mix, nao de rolagem
     horizontal: o painel tem overflow hidden e cortaria o que passasse. */
  grid-template-columns: 130px repeat(var(--colunas-canal, 7), 96px) 112px 1fr;
}

.canais-venda__cabecalho-colunas {
  flex: none;
  border-bottom: 1px solid var(--color-border);
  padding: 5px 0;
}

.canais-venda__cabecalho-vendedor,
.canais-venda__cabecalho-total,
.canais-venda__cabecalho-mix {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.canais-venda__cabecalho-canal {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--color-muted);
  text-align: right;
  padding-right: 6px;
  line-height: 1.25;
}

.canais-venda__cabecalho-total {
  color: var(--color-ink);
  text-align: right;
  padding-right: 6px;
}

.canais-venda__cabecalho-mix {
  padding-left: 8px;
}

.canais-venda__linhas {
  flex: 1;
  min-height: 0;
  max-height: 400px;
  overflow-y: auto;
}

.canais-venda__linha {
  align-items: center;
  border-bottom: 1px solid var(--color-border-soft);
  padding: 2px 0;
}

.canais-venda__vendedor {
  min-width: 0;
  padding-right: 6px;
}

.canais-venda__vendedor-nome {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nome atenuado: "Sem vendedor atribuído" não é uma pessoa. O back já a
   entrega ao final da lista, fora da ordenação — aqui é só o tratamento
   visual que confirma isso pra quem olha. */
.canais-venda__linha--sem-vendedor .canais-venda__vendedor-nome {
  color: var(--color-muted);
}

.canais-venda__vendedor-papel {
  font-size: 8.5px;
  color: var(--color-subtle);
}

.canais-venda__celula {
  text-align: right;
  padding-right: 6px;
}

/* Valor em reais completo desde 06/11/2026 (R$ 12.345.678,90): 10.5px e
   sem quebra cabe nos 96px da coluna; o total de linha e o geral, nos 112px. */
.canais-venda__numero {
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* "aguard." nunca é o mesmo elemento que um número: o sublinhado
   tracejado sinaliza que há explicação no tooltip, e o tom atenuado
   impede que seja lido como valor. Zero ali leria como "não vendemos
   nada por aqui", que é falso. */
.canais-venda__aguardando {
  font-size: 9px;
  color: var(--color-disabled);
  border-bottom: 1px dashed var(--color-border-soft);
  cursor: default;
}

.canais-venda__linha-total {
  text-align: right;
  padding-right: 6px;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-ink-forte);
  font-variant-numeric: tabular-nums;
}

.canais-venda__mix {
  margin-left: 8px;
  display: flex;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg);
}

.canais-venda__rodape {
  flex: none;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 5px;
}

.canais-venda__rodape-rotulo {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.canais-venda__numero--destaque {
  font-weight: 700;
  color: var(--color-ink-forte);
}

.canais-venda__total-geral {
  text-align: right;
  padding-right: 6px;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- Gráfico ---------- */

.canais-venda__grafico {
  flex: 1;
  min-height: 260px;
  display: flex;
  gap: 16px;
}

.canais-venda__grafico-painel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.canais-venda__grafico-painel--vendedores {
  flex: 1.35;
}

.canais-venda__grafico-painel--canais {
  flex: 1;
  border-left: 1px solid var(--color-border);
  padding-left: 16px;
}

.canais-venda__grafico-titulo {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Barras HORIZONTAIS empilhadas — mesma estrutura de grid do painel de
   canais logo abaixo, de propósito: os dois painéis da visão Gráfico
   falam a mesma linguagem visual.

   A rolagem é VERTICAL. Com os 37 vendedores do dado real a versão
   anterior (colunas verticais lado a lado) exigia 2052px numa área de
   1231px e era cortada sem scroll pelo overflow-x:hidden do
   .shell-quadro, levando junto o painel direito. Ver Delta Spec,
   "Por que horizontal". */

.canais-venda__barras {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.canais-venda__barra-linha {
  display: grid;
  grid-template-columns: 132px 1fr 62px;
  align-items: center;
  gap: 8px;
}

/* "Sem vendedor atribuído" já vem ao final pela ordem das linhas; o tom
   mais apagado repete o tratamento que ela tem na matriz. */
.canais-venda__barra-linha--sem-vendedor .canais-venda__barra-rotulo {
  font-style: italic;
  color: var(--color-muted);
}

.canais-venda__barra-rotulo {
  min-width: 0;
  font-size: 9.5px;
  color: var(--color-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canais-venda__barra-trilho {
  height: 11px;
  border-radius: 3px;
  background: var(--color-bg);
  overflow: hidden;
}

.canais-venda__barra {
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.canais-venda__barra-total {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--color-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Alinhado ao TOPO, não centrado. Era `center` enquanto o painel
   esquerdo tinha altura de gráfico de colunas e os dois blocos ficavam
   parecidos; com o esquerdo virando 37 linhas empilhadas (06/08/2026),
   centrar deixava as 8 linhas de canal flutuando no meio da altura,
   desalinhadas da primeira barra de vendedor. O padding-top repete o de
   .canais-venda__barras pra que as duas listas comecem na mesma linha. */
.canais-venda__canais {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;
  gap: 5px;
}

.canais-venda__canal-linha {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  align-items: center;
  gap: 8px;
}

.canais-venda__canal-rotulo {
  font-size: 9.5px;
  color: var(--color-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canais-venda__canal-trilho {
  height: 11px;
  border-radius: 3px;
  background: var(--color-bg);
  overflow: hidden;
}

.canais-venda__canal-barra {
  height: 100%;
  border-radius: 3px;
}

.canais-venda__canal-valor {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--color-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.canais-venda__canal-aguardando {
  font-size: 8.5px;
  color: var(--color-disabled);
  text-align: right;
}

/* ---------- Legenda e rodapé ---------- */

.canais-venda__legenda {
  flex: none;
  border-top: 1px solid var(--color-border);
  padding-top: 6px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.canais-venda__legenda-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.canais-venda__legenda-cor {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.canais-venda__legenda-rotulo {
  font-size: 9px;
  color: var(--color-muted);
}

.canais-venda__nota {
  font-size: 9px;
  color: var(--color-disabled);
  margin-left: auto;
}

/* ---------- Estado vazio e erro ---------- */

.canais-venda__vazio {
  padding: 24px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--color-subtle);
}

.canais-venda__erro {
  padding: 12px;
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: var(--radius-md);
  font-size: 12px;
}

/* Celula da coluna Site: o numero traz tooltip com as duas parcelas
   (direto x carteira). Mesma pista visual ja usada pelo "aguard." — o
   tracejado avisa que ha explicacao no hover — sem virar sub-coluna,
   modal ou qualquer elemento novo de navegacao. */
.canais-venda__numero--com-detalhe {
  border-bottom: 1px dashed var(--color-border-soft);
  cursor: default;
}

/* ---------- Detalhe e fila sobre a matriz (tabelas-por-canal) ---------- */

/* Número clicável: um <button> que se veste de número. O sublinhado
   pontilhado é o único sinal de que a célula abre alguma coisa — a matriz é
   de relance, e um ícone por célula poluiria a leitura que ela existe para
   dar. */
.canais-venda__numero--clicavel {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.canais-venda__numero--clicavel:hover {
  color: var(--color-primary);
}

.canais-venda__numero--clicavel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* O que fica atrás da janela. `display: contents` para o invólucro não
   entrar no flex de .canais-venda; ele existe só para receber `inert`
   enquanto a janela está aberta — tira a matriz do Tab e do leitor de tela. */
.canais-venda__fundo {
  display: contents;
}

.canais-venda__sobreposicao {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-backdrop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
}

.canais-venda__janela {
  width: min(1180px, 100%);
  max-height: calc(100vh - 80px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* Recebe o foco ao abrir (tabindex="-1"), por programa — não é parada de Tab. */
.canais-venda__janela:focus {
  outline: none;
}

.canais-venda__janela-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.canais-venda__janela-titulo {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.canais-venda__janela-subtitulo {
  font-size: 11px;
  color: var(--color-subtle);
  margin-top: 2px;
}

.canais-venda__janela-fechar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.canais-venda__janela-corpo {
  min-height: 0;
  overflow: auto;
}

/* O envelope dos e-mails que viraram venda da linha (mudança
   emails-da-vendedora; protótipo https://claude.ai/artifact/PBcib3qHywmL85KxnXr3Ho).
   Ao lado do nome, só com e-mail no recorte. Sem destaque para quem tem mais:
   a cor é a mesma em toda linha (Requirement "Elementos deliberadamente
   ausentes"). */
.canais-venda__vendedor-cabeca {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.canais-venda__envelope {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  min-width: 30px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.canais-venda__envelope:hover,
.canais-venda__envelope:focus-visible {
  border-color: var(--info-text);
}

/* O botão de portais acessados da linha (mudança
   portais-como-indicador-da-vendedora, 15/10/2026): o mesmo desenho do
   envelope, por decisão do proposal ("igual o e-mail"). Só com portal no
   recorte, e sem destaque para quem tem mais. */
.canais-venda__portais {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  min-width: 30px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.canais-venda__portais:hover,
.canais-venda__portais:focus-visible {
  border-color: var(--info-text);
}

/* email-ligado-sozinho (23/10/2026): a parte provável da linha de apoio e o
   interruptor "Ligar e-mails sozinho", logo abaixo do indicador. Sem protótipo
   próprio: segue a tipografia da linha de apoio e os botões da tela. */
.canais-venda__indicador-provavel {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline dotted;
  cursor: help;
}

.canais-venda__interruptor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--color-muted);
}

.canais-venda__interruptor-pergunta {
  flex-basis: 100%;
  color: var(--color-ink);
}

.canais-venda__interruptor-acoes {
  display: inline-flex;
  gap: 6px;
}

.canais-venda__interruptor-botao {
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 10px;
  cursor: pointer;
}

.canais-venda__interruptor-botao--secundario {
  background: transparent;
}

.canais-venda__interruptor-botao:disabled {
  opacity: 0.6;
  cursor: default;
}

.canais-venda__interruptor-erro {
  flex-basis: 100%;
  color: var(--color-danger, #b42318);
}