/* painel-fundo.css — o fundo do painel, e a faixa analítica da campanha
   ======================================================================
   Duas coisas que andam juntas: a superfície em que os cartões pousam, e o
   bloco de gráficos da tela 02.

   O FUNDO. Era branco de ponta a ponta, e cartão branco sobre fundo branco
   só existe por causa da borda — some a borda, some o cartão. Agora o fundo
   é um papel morno com duas luzes frias muito fracas nos cantos e uma
   constelação de linhas por cima. O contraste com o branco do cartão passa a
   vir da própria superfície, e não de um traço de 1px.

   A conta de peso: são três gradientes e um SVG de 1,4 KB, todos em
   `background` do body. Nenhuma imagem, nenhuma requisição. O SVG é fixo na
   viewport, então rolar a página não repinta nada.                        */

body{
  background-color:#F7F5F0;
  background-image:
    /* a constelação — o mesmo motivo da tela de acesso, bem mais discreto */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'%3E%3Cg stroke='%231D2D54' stroke-opacity='.075' fill='none' stroke-width='1'%3E%3Cpath d='M-20 130 L180 70 L390 190 L600 96 L810 210 L1030 120 L1250 220 L1420 140'/%3E%3Cpath d='M-20 420 L150 360 L360 470 L580 380 L790 500 L1010 400 L1230 510 L1420 420'/%3E%3Cpath d='M-20 720 L170 660 L380 780 L610 690 L820 800 L1040 700 L1260 810 L1420 730'/%3E%3Cpath d='M180 70 L150 360 L170 660'/%3E%3Cpath d='M390 190 L360 470 L380 780'/%3E%3Cpath d='M600 96 L580 380 L610 690'/%3E%3Cpath d='M810 210 L790 500 L820 800'/%3E%3Cpath d='M1030 120 L1010 400 L1040 700'/%3E%3C/g%3E%3Cg fill='%231D2D54' fill-opacity='.14'%3E%3Ccircle cx='180' cy='70' r='2.6'/%3E%3Ccircle cx='390' cy='190' r='2.2'/%3E%3Ccircle cx='600' cy='96' r='2.4'/%3E%3Ccircle cx='810' cy='210' r='2.2'/%3E%3Ccircle cx='1030' cy='120' r='2.6'/%3E%3Ccircle cx='150' cy='360' r='2.2'/%3E%3Ccircle cx='360' cy='470' r='2.6'/%3E%3Ccircle cx='580' cy='380' r='2.2'/%3E%3Ccircle cx='790' cy='500' r='2.4'/%3E%3Ccircle cx='1010' cy='400' r='2.2'/%3E%3Ccircle cx='170' cy='660' r='2.4'/%3E%3Ccircle cx='380' cy='780' r='2.2'/%3E%3Ccircle cx='610' cy='690' r='2.6'/%3E%3Ccircle cx='820' cy='800' r='2.2'/%3E%3Ccircle cx='1040' cy='700' r='2.4'/%3E%3C/g%3E%3C/svg%3E"),
    /* duas luzes frias, quase imperceptíveis, para o fundo não ser chapado */
    radial-gradient(52% 44% at 88% 4%,  rgba(61,139,253,.09), transparent 66%),
    radial-gradient(46% 40% at 4% 92%,  rgba(201,162,39,.10), transparent 68%),
    linear-gradient(176deg, #FBFAF7 0%, #F4F1EA 58%, #EFECE4 100%);
  background-attachment:fixed, fixed, fixed, fixed;
  background-size:cover, cover, cover, cover;
  background-repeat:no-repeat;
}

/* Com o fundo tingido, o cartão branco passa a se destacar sozinho. A borda
   pode recuar e uma sombra muito baixa faz o resto — é o que dá a sensação
   de camada em vez de recorte. */
.card,.ops-panel,.stat,.fi-num,.kpi{
  background:#fff;
  border-color:rgba(29,45,84,.09);
  box-shadow:0 1px 2px rgba(15,27,51,.04);
}
.sidebar{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-right-color:rgba(29,45,84,.09);
}
.toolbar select,.toolbar input,.dm-input{background:rgba(255,255,255,.9)}

/* ===================================================== a faixa da campanha
   Mesma superfície escura da Mesa Digital, três blocos lado a lado. O de
   custódia ocupa metade porque é barra horizontal e precisa de largura para
   o rótulo caber. */
.faixa-campanha{margin-top:22px}
.fc-grade{
  display:grid;
  grid-template-columns:1.25fr .78fr .78fr;
  gap:16px;
  align-items:stretch;
}
.fc-bloco{padding:20px 22px 18px}
.fc-bloco h3{
  margin:6px 0 16px;
  font:600 17px/1.25 var(--k3-fonte-ui, inherit);
  color:#fff;letter-spacing:-.008em;
}

/* --- o anel do alcance --- */
.fc-anel{position:relative;display:grid;justify-items:center;gap:0}
.fc-anel svg{width:130px;height:130px;display:block}
.fc-anel-centro{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:130px;height:130px;
  display:grid;place-content:center;text-align:center;pointer-events:none;
}
.fc-anel-centro strong{
  display:block;
  font:600 27px/1 var(--k3-fonte-ui, inherit);color:#fff;
  letter-spacing:-.015em;
}
.fc-anel-centro span{
  font:600 9.5px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(234,240,250,.5);
}
.fc-nota{
  margin:14px 0 0;text-align:center;
  font:400 12px/1.55 var(--k3-fonte-ui, inherit);
  color:rgba(234,240,250,.6);
}

/* --- a pilha do teto --- */
.fc-pilha-barra{
  display:flex;height:26px;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.07);
}
.fc-pilha-barra > span{display:block;height:100%;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.fc-pilha-leg{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.fc-pilha-leg li{
  display:grid;grid-template-columns:9px 1fr auto auto;
  align-items:center;gap:9px;
}
.fc-leg-nome{
  font:400 13px/1.3 var(--k3-fonte-ui, inherit);
  color:rgba(234,240,250,.72);
}
.fc-leg-num{
  font:500 13px/1.3 var(--k3-fonte-mono, ui-monospace, monospace);color:#fff;
}
.fc-leg-pct{
  min-width:34px;text-align:right;
  font:400 12px/1.3 var(--k3-fonte-mono, ui-monospace, monospace);
  color:rgba(234,240,250,.44);
}

@media (max-width:1150px){
  .fc-grade{grid-template-columns:1fr 1fr}
  .fc-largo{grid-column:1/-1}
}
@media (max-width:760px){
  .fc-grade{grid-template-columns:1fr}
}

/* ------------------------------------------------------------- acertos ---
   1. A tabela do internacional tem OITO colunas e também usa a classe
      `.client-table`, então herdava a grade de nove que fiz para a Mesa
      Digital — "Posição" e "Cliente" saíam sobrepostos. Ela precisa da
      própria grade. */
/* ESTA é a grade que vale para a tabela do internacional.
   Existe uma declaração parecida em `automacao.css`; esta vence porque
   `painel-fundo.css` carrega depois e as duas usam `!important`. Manter as
   duas em desacordo foi o que fez os cabeçalhos saírem cortados
   ("CUSTÓDIA BR…", "TETO DE…") depois de eu alargar a de lá: o ajuste ia
   para o arquivo errado. Mexer na largura desta tabela é mexer AQUI.

   As larguras abaixo são pedidas pelos CABEÇALHOS, não pelo conteúdo: em
   maiúsculas de 11px, "Custódia Brasil" precisa de ~150px, "Teto de
   premiação" de ~160px e "Ativado funding" de ~146px. Com as antigas
   (146/104/108) o texto cabia deitado mas saía truncado — o que resolve a
   quebra de linha e estraga a leitura, que era justamente o ponto.

   A soma dá 1.230px (mais 98px de gaps). Quando não couber na tela, a tabela ROLA de lado
   (`.int-rolagem`), em vez de espremer o cabeçalho. */
.int-tabela thead tr,
.int-tabela tbody tr{
  grid-template-columns:
    100px               /* posição — "POSIÇÃO" em maiúsculas pede ~98px */
    minmax(210px,1.3fr) /* cliente */
    118px               /* conta US */
    minmax(150px,1fr)   /* assessor */
    164px               /* custódia — o rótulo pede 157px */
    182px               /* teto de premiação — o rótulo pede 177px */
    166px               /* ativado funding — o rótulo pede 160px */
    140px               /* whatsapp — cabe o selo "Sem WhatsApp" */
    !important;
}
/* A tabela do ENVIO MANUAL tem o mesmo problema, e é mais grave porque
   ninguém percebia: ela também usa `.client-table` e herdava a grade de
   NOVE colunas da Mesa Digital, tendo SETE. As sete células caíam nas sete
   primeiras trilhas, e a do telefone ficava com 86px.

   O selo "Sem WhatsApp" tem 108px. Ele vazava 22px por cima da célula
   seguinte e colava no número da conta — era o "Sem WhatsApp17665998" que
   parecia um problema de margem e era de grade.

   Margem no selo não resolve isso: o que estava errado era a largura da
   coluna. */
.env-tabela thead tr,
.env-tabela tbody tr{
  grid-template-columns:
    52px                /* seleção */
    100px               /* posição — "POSIÇÃO" em maiúsculas pede ~98px */
    minmax(190px,2fr)   /* cliente */
    142px               /* patrimônio — "PATRIMÔNIO" pede ~138px */
    92px                /* idade / teto */
    150px               /* telefone — cabe o selo de 108px com folga */
    130px               /* conta */
    !important;
}

.int-tabela td.env-num,.int-tabela th.env-num{
  text-align:right;
  font:400 13px/1.35 var(--k3-fonte-mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
}

/* 2. O valor em reais quebrava em duas linhas na barra ("R$ 67,1" / "mi"),
      porque a coluna do número foi dimensionada para contagem de clientes,
      não para dinheiro abreviado. */
.fc-bloco .bb-item{grid-template-columns:104px minmax(0,1fr) 76px 42px}
.fc-bloco .bb-num{white-space:nowrap}

/* 3. O rótulo dentro do anel encostava na borda do arco. */
.fc-anel-centro strong{font-size:25px}
.fc-anel-centro span{font-size:8.5px;letter-spacing:.07em}

/* o cabeçalho não pode transbordar para a coluna do lado */
.client-table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-table th.num,.client-table th.env-num{white-space:normal}


/* ======================================== a coluna "Posição", em todas ===
   `styles.css` fixa `.row-number{width:42px}` e `marca-k3.css` pede
   `min-width:80px`. Com a coluna chamada "#" isso nunca incomodou; com o
   rótulo "Posição" — que é o que o operador precisa ler — 42px corta a
   palavra e o cabeçalho vira "POSIÇ…".

   Aqui, no arquivo que carrega por último, a regra fica UMA: o cabeçalho
   ocupa a trilha que a grade deu, e o número embaixo continua centrado.  */
.client-table thead th.row-number{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  white-space:nowrap;
  text-align:center;
  font-size:10px;
  letter-spacing:.04em;
}
.client-table tbody td.row-number{
  width:auto !important;
  min-width:0 !important;
  text-align:center;
}