/* painel-analitico.css — a faixa escura de análise
   =====================================================================
   Carregada por último. Escopada em `.faixa-analitica`, que envolve a
   Central de prioridades, o mapa de calor e as barras por assessor. Fora
   dela, nada muda.

   POR QUE ESCURO, E SÓ AQUI.
   O painel de trabalho tem de ser claro: o assessor passa o dia lendo uma
   lista de 2.866 nomes, e texto escuro sobre papel cansa menos. Mas a parte
   de ANÁLISE é o oposto — são poucos elementos, muita cor, e a cor precisa
   saltar. Num fundo claro, azul e rosa saturados ficam estridentes; num
   fundo escuro, eles brilham. É a razão de todo painel de BI ser escuro, e
   é o que o exemplo que você mandou faz.

   Então o painel tem duas naturezas, de propósito: a faixa escura analisa,
   o resto claro trabalha. A transição entre as duas é o que dá o ar de
   ferramenta, em vez de relatório.

   Para voltar atrás: apague a linha que carrega este arquivo no index.html.
   A faixa volta a ser clara e nada mais muda.                            */

.faixa-analitica{
  --an-fundo:#0C1730;
  --an-fundo-2:#111E3C;
  --an-cartao:rgba(255,255,255,.045);
  --an-borda:rgba(255,255,255,.10);
  --an-borda-forte:rgba(255,255,255,.18);
  --an-txt:#EAF0FA;
  --an-txt-medio:rgba(234,240,250,.66);
  --an-txt-fraco:rgba(234,240,250,.42);
  --an-ouro:#E6CE88;

  /* as duas pontas da escala divergente */
  --an-acima:#3D8BFD;     /* azul — mais gente do que o esperado */
  /* Rosa ajustado de #F2588F para #E8447E. O anterior ficava claro demais
     ao lado do azul — o lado "abaixo" pesava mais na tela do que o "acima",
     com o mesmo desvio. Conferido no validador de paleta, sobre este fundo:
     os dois polos passam em faixa de luminosidade, croma, separacao para
     daltonismo (ΔE 19.9 protan) e contraste. */
  --an-abaixo:#E8447E;    /* rosa — menos */

  position:relative;
  margin:26px -28px 26px;      /* sangra até a borda do conteúdo */
  padding:30px 28px 26px;
  background:
    radial-gradient(64% 52% at 8% 0%,  rgba(61,139,253,.14), transparent 62%),
    radial-gradient(52% 48% at 92% 98%, rgba(242,88,143,.10), transparent 66%),
    linear-gradient(168deg, var(--an-fundo-2) 0%, var(--an-fundo) 62%, #0A1429 100%);
  color:var(--an-txt);
  border-radius:20px;
  isolation:isolate;
  overflow:hidden;
}
/* grão: sem ele o gradiente parece plástico em tela grande */
.faixa-analitica::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------- cabeçalho e cartões */
.faixa-analitica .ops-header .eyebrow{color:var(--an-ouro)}
.faixa-analitica .ops-header h2{color:#fff}
.faixa-analitica .ops-updated{color:var(--an-txt-fraco)}

.faixa-analitica .ops-panel,
.faixa-analitica .card{
  background:var(--an-cartao);
  border:1px solid var(--an-borda);
  border-radius:14px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:none;
}
.faixa-analitica .ops-panel.ops-focus{
  background:linear-gradient(180deg, rgba(230,206,136,.11), rgba(255,255,255,.04) 70px);
  border-color:rgba(230,206,136,.34);
}
.faixa-analitica .ops-kicker,
.faixa-analitica .mc-kicker{color:var(--an-ouro)}
.faixa-analitica .ops-mark{color:rgba(255,255,255,.26)}
.faixa-analitica .ops-panel > strong,
.faixa-analitica .mapa-calor h3,
.faixa-analitica .bloco-barras h3{color:#fff}
.faixa-analitica .ops-panel > p,
.faixa-analitica .mc-ajuda{color:var(--an-txt-medio)}
.faixa-analitica .ops-action{color:var(--an-ouro)}
.faixa-analitica .ops-action:hover{color:#fff}

/* o donut na faixa escura */
.faixa-analitica .ds-donut-centro strong{color:#fff}
.faixa-analitica .ds-donut-centro span{color:var(--an-txt-fraco)}
.faixa-analitica .ds-leg-nome{color:var(--an-txt-medio)}
.faixa-analitica .ds-leg-num{color:#fff}
.faixa-analitica .ds-leg-pct{color:var(--an-txt-fraco)}
.faixa-analitica{--ds-trilho:rgba(255,255,255,.10)}
/* as fatias ganham as cores da faixa: o cinza do tema claro sumiria aqui */
.faixa-analitica{
  --ds-serie-1:#5B9BFF;
  --ds-serie-2:#E6CE88;
  --ds-serie-3:#7FD1C3;
  --ds-serie-4:rgba(255,255,255,.26);
}

/* ------------------------------------------------ o mapa, agora divergente
   Azul de um lado, rosa do outro, e o branco no meio querendo dizer "é o
   esperado". A intensidade vem de `--n`, o lado vem da classe. */
.faixa-analitica .mc-escala i{border-color:transparent}
.faixa-analitica .mc-escala span{color:var(--an-txt-fraco)}
.faixa-analitica .mc-rot{color:var(--an-txt-medio)}
.faixa-analitica .mc-col{color:var(--an-txt-fraco)}
.faixa-analitica .mc-tot{color:var(--an-txt-medio)}
.faixa-analitica .mc-forte{color:#fff}
.faixa-analitica .mc-rodape{border-top-color:var(--an-borda)}

.faixa-analitica .mc-bloco{
  flex-direction:column;gap:1px;
  min-height:54px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
}
.faixa-analitica .mc-bloco.acima{
  background:color-mix(in srgb, var(--an-acima) calc(var(--n) * 78%), rgba(255,255,255,.04));
  border-color:color-mix(in srgb, var(--an-acima) calc(var(--n) * 55%), rgba(255,255,255,.07));
}
.faixa-analitica .mc-bloco.abaixo{
  background:color-mix(in srgb, var(--an-abaixo) calc(var(--n) * 74%), rgba(255,255,255,.04));
  border-color:color-mix(in srgb, var(--an-abaixo) calc(var(--n) * 52%), rgba(255,255,255,.07));
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .faixa-analitica .mc-bloco.acima {background:rgba(61,139,253,var(--n))}
  .faixa-analitica .mc-bloco.abaixo{background:rgba(232,68,126,var(--n))}
}
.faixa-analitica .mc-bloco.vazio{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,rgba(255,255,255,.06) 6px 12px);
}
.faixa-analitica .mc-bloco .mc-n{
  font:600 14px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  color:#fff;
}
.faixa-analitica .mc-bloco .mc-d{
  font:500 10.5px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  color:rgba(255,255,255,.62);
  letter-spacing:.02em;
}
.faixa-analitica .mc-bloco:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7);
  border-color:rgba(255,255,255,.4);
}
.faixa-analitica .mc-bloco:focus-visible{outline-color:var(--an-ouro)}

/* a dica que aparece no bloco, como no exemplo */
/* A dica nascia ACIMA do bloco (`bottom:100%`) e, com isso, cobria a celula
   da linha de cima — era o que aparecia nas capturas: uma caixa preta em
   cima de um dado que a pessoa estava tentando ler. Agora ela desce, e so a
   ultima linha a joga para cima (regra no fim deste bloco). */
.faixa-analitica .mc-bloco::after{
  content:attr(data-dica);
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:pre;
  padding:8px 11px;border-radius:9px;
  background:#050B18;border:1px solid rgba(255,255,255,.14);
  color:#EAF0FA;
  font:500 11px/1.5 var(--k3-fonte-ui, inherit);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;
  transition:opacity .13s ease, transform .13s ease;
  z-index:6;
}
.faixa-analitica .mc-bloco:hover::after,
.faixa-analitica .mc-bloco:focus-visible::after{opacity:0}
.faixa-analitica .mc-bloco.vazio::after{display:none}
/* A ultima linha nao tem espaco abaixo: so nela a dica volta a subir. */
.faixa-analitica .mc-linha:nth-last-of-type(2) .mc-bloco::after{
  top:auto;bottom:calc(100% + 8px);
}
/* a primeira e a última coluna: a dica encosta na borda se ficar centrada */
.faixa-analitica .mc-linha .mc-bloco:nth-child(2)::after{left:0;transform:translateX(0) translateY(4px)}
.faixa-analitica .mc-linha .mc-bloco:nth-child(2):hover::after{transform:translateX(0)}
.faixa-analitica .mc-linha .mc-bloco:nth-child(5)::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
.faixa-analitica .mc-linha .mc-bloco:nth-child(5):hover::after{transform:translateX(0)}

/* A escala da legenda. No tema claro ela é sequencial e o --n basta; aqui
   ela tem dois lados, então cada pastilha recebe a cor na mão. A ordem é a
   mesma do HTML: rosa forte, rosa fraco, neutro, azul fraco, azul forte. */
.faixa-analitica .mc-escala i{background:none}
.faixa-analitica .mc-escala i:nth-of-type(1){background:var(--an-abaixo)}
.faixa-analitica .mc-escala i:nth-of-type(2){background:color-mix(in srgb, var(--an-abaixo) 45%, transparent)}
.faixa-analitica .mc-escala i:nth-of-type(3){background:rgba(255,255,255,.13)}
.faixa-analitica .mc-escala i:nth-of-type(4){background:color-mix(in srgb, var(--an-acima) 45%, transparent)}
.faixa-analitica .mc-escala i:nth-of-type(5){background:var(--an-acima)}

/* ---------------------------------------------- barras por assessor ---*/
.bloco-barras{padding:22px 24px 20px;margin-top:20px}
.bb-lista{display:grid;gap:10px;margin-top:4px}
.bb-item{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 58px 54px 62px;
  align-items:center;gap:12px;
  animation:bb-entra .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--ordem) * 45ms);
}
@keyframes bb-entra{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.bb-nome{
  font:400 13px/1.3 var(--k3-fonte-ui, inherit);
  color:var(--an-txt-medio);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bb-trilho{
  display:block;height:22px;border-radius:7px;
  background:rgba(255,255,255,.055);
  overflow:hidden;
}
/* COR CHAPADA, e de proposito.
   Antes a barra era um degrade azul->verde-agua. Assessor nao tem ordem
   natural nenhuma: o degrade nao dizia nada e ainda mudava de cor conforme
   o comprimento, entao duas barras de tamanhos diferentes pareciam de
   categorias diferentes. Uma serie, uma cor. */
.bb-barra{
  position:relative;display:block;height:100%;border-radius:inherit;
  background:#3D8BFD;
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
/* O pedaco de dentro: quantos DESSE assessor ja tem planejamento.
   E o mesmo azul, mais claro — porque e um SUBCONJUNTO do total, nao outra
   categoria. Cor diferente ali sugeria duas coisas sem relacao. A separacao
   e um vao de 2px da propria superficie, nao uma borda desenhada. */
.bb-fp{
  position:absolute;inset:0 auto 0 0;display:block;height:100%;
  border-radius:inherit;
  background:#A9CBFF;
  box-shadow:2px 0 0 0 var(--an-fundo);
}
.bb-num{
  font:600 13px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  color:#fff;text-align:right;
}
.bb-fp-num{
  font:500 12px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--an-ouro);text-align:right;
}

@media (max-width:900px){
  .faixa-analitica{margin-left:-14px;margin-right:-14px;padding:22px 14px 20px;border-radius:16px}
  .bb-item{grid-template-columns:96px minmax(0,1fr) 44px 44px 52px;gap:7px}
  .faixa-analitica .mc-bloco .mc-d{display:none}
  /* Abaixo de 900px o nome do perfil nao cabe na coluna e era cortado no
     meio ("Conservado"). Quebrar em duas linhas cabe; abreviar mentiria. */
  .faixa-analitica .mc-col{white-space:normal;line-height:1.25}
}
@media (prefers-reduced-motion:reduce){
  .bb-item{animation:none}
  .bb-barra{transition:none}
}


/* ------------------------------------------- legenda e rotulos das barras */
/* Duas medidas na mesma barra sem legenda e adivinhacao. E o % da direita
   sem rotulo nao tem denominador — era a queixa literal. */
.bb-legenda{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font:500 11.5px var(--k3-fonte-ui, inherit);color:var(--an-txt-medio)}
.bb-legenda span{display:inline-flex;align-items:center;gap:7px}
.bb-legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}
.bb-chave-total{background:#3D8BFD}
.bb-chave-fp{background:#A9CBFF}

.bb-cabecalho{
  display:grid;grid-template-columns:150px minmax(0,1fr) 58px 54px 62px;
  gap:12px;margin:14px 0 2px;
  font:600 9.5px var(--k3-fonte-ui, inherit);letter-spacing:.07em;
  text-transform:uppercase;color:var(--an-txt-fraco);
}
.bb-cabecalho span:nth-child(n+3){text-align:right}
/* Texto usa cor de texto, nunca a cor da serie: quem carrega identidade e a
   barra ao lado, nao o numero. */
.bb-base-num{font:500 12px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--an-txt-fraco);text-align:right}
.bb-fp-num{color:var(--an-txt-medio) !important}

/* ------------------------------------------------ legenda do mapa de calor */
.mc-escala-caixa{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.mc-escala-tit{font:600 9.5px var(--k3-fonte-ui, inherit);letter-spacing:.07em;
  text-transform:uppercase;color:var(--an-txt-fraco)}
.mc-escala-meio{font:400 10.5px var(--k3-fonte-ui, inherit);
  color:var(--an-txt-fraco)}
.faixa-analitica .mc-escala span{font:600 11px var(--k3-fonte-mono, ui-monospace, monospace)}

/* Os eixos ganharam nome. Sem isso, as linhas eram faixas de dinheiro sem
   dizer de que dinheiro, e as colunas eram palavras soltas. */
.mc-eixo-y{font:600 9.5px var(--k3-fonte-ui, inherit);letter-spacing:.07em;
  text-transform:uppercase;color:var(--an-txt-fraco);margin:2px 0 6px}
.mc-eixo-x{font:600 9.5px var(--k3-fonte-ui, inherit);letter-spacing:.07em;
  text-transform:uppercase;color:var(--an-txt-fraco);text-align:center;
  margin-top:10px}
.mc-fonte{font:400 11.5px var(--k3-fonte-ui, inherit);
  color:var(--an-txt-fraco);margin:6px 0 0}


/* ------------------------------------------------ leitura do bloco apontado
   Substitui a dica flutuante. Ela cobria a celula vizinha — e vizinha e
   exatamente o que se quer comparar num mapa de calor. Aqui a conta aparece
   num lugar fixo, sem tapar dado nenhum, e serve o teclado do mesmo jeito. */
.mc-leitura{
  min-height:34px;display:flex;align-items:center;
  margin:10px 0 2px;padding:8px 12px;
  border-radius:var(--radius-campo, 10px);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  font:500 12.5px var(--k3-fonte-ui, inherit);color:var(--an-txt);
}
.mc-leitura-vazio{color:var(--an-txt-fraco);font-weight:400}