/* 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--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);
}

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

.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: 130 vendedor · 3x66 ativa · 2x66 passiva (Site e
     Portais) · 66 nao informado · 86 total · mix. Os numeros sao a soma
     a mao da grade abaixo — as duas grades sao independentes, e se
     divergirem as faixas coloridas deixam de cobrir as colunas certas. */
  grid-template-columns: 130px 198px 132px 66px 86px 1fr;
  align-items: end;
  padding-bottom: 3px;
}

.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--passiva {
  color: var(--grupo-passiva);
  border-bottom: 2px solid var(--grupo-passiva);
  margin-left: 6px;
}

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

.canais-venda__cabecalho-colunas,
.canais-venda__linha,
.canais-venda__rodape {
  display: grid;
  /* 6 colunas de canal desde a entrada do Site (12/08/2026). Os 66px a
     mais saem do 1fr do mix, nao de rolagem horizontal: o painel tem
     overflow hidden e cortaria o que passasse. */
  grid-template-columns: 130px repeat(6, 66px) 86px 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;
}

.canais-venda__numero {
  font-size: 11.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;
  font-size: 11.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;
  font-size: 11.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;
}