/* painel-ds-componentes.css — os COMPONENTES do design system no painel
   =====================================================================
   Carregado por último, depois de `marca-k3.css` (cores) e `painel-ds.css`
   (proporção). Esta folha é a terceira camada e a mais nova: ela traz a
   COMPOSIÇÃO — o jeito que o design system monta um StatCard, um Card com
   subtítulo e ação, uma DataTable, um badge com tom.

   Por que ela existe. As duas primeiras camadas deixaram o painel com as
   cores e os tamanhos do sistema, e ainda assim ele parecia simples ao lado
   das telas do design system. O motivo não era cor nem espaço: era que o
   sistema compõe com gráfico, rótulo overline, número grande em cima do
   rótulo, tabela densa com badge tonal — e o painel tinha número solto em
   caixa branca e tabela lisa.

   NADA de estrutura muda por causa desta folha. Os 121 ganchos de DOM do
   `CONTRATO-DOM.md` continuam onde estavam. A única exceção é o conteúdo de
   `#ops-perfis`, que passou de três barras para um donut — o id é o mesmo e
   quem preenche continua sendo o `main.js`.

   Para voltar atrás: apague a linha que carrega este arquivo no index.html.
   O painel volta ao estado anterior, inteiro.                              */

/* ====================================================== a paleta do dado ===
   As séries de gráfico do design system. Navy para o maior grupo, dourado
   para o do meio, e os dois tons de apoio no fim — nessa ordem, porque é a
   ordem de peso visual, e o olho lê a fatia maior primeiro. */
:root{
  --ds-serie-1:#1D2D54;   /* navy 700 */
  --ds-serie-2:#C9A227;   /* gold 500 */
  --ds-serie-3:#5C739E;   /* navy 400 */
  --ds-serie-4:#CBC7BC;   /* paper 300 */
  --ds-trilho:#EDEBE5;    /* paper 100 — o anel de fundo */

  --ds-positivo-fg:#15633F; --ds-positivo-bg:#DCF0E5;
  --ds-atencao-fg:#96590A;  --ds-atencao-bg:#FBEBCF;
  --ds-info-fg:#1E5A94;     --ds-info-bg:#DCEAF7;
  --ds-neutro-fg:#5C5A53;   --ds-neutro-bg:#EDEBE5;
}

/* ========================================================== o StatCard ===
   No design system o número vem PRIMEIRO e grande, o rótulo embaixo em
   overline, e o ícone fica num quadrado tingido, canto superior direito, sem
   disputar. O painel tinha ícone à esquerda do mesmo tamanho do número, que
   dividia a atenção no meio. */
.stats{gap:var(--space-6, 16px)}

.stat{
  position:relative;
  display:block;                       /* era flex com o ícone ao lado */
  padding:20px 20px 18px;
  border:1px solid var(--k3-paper-200, #E0DDD5);
  border-radius:14px;
  background:#fff;
  box-shadow:none;                     /* o sistema não usa sombra em cartão de dado */
  transition:border-color .15s ease, transform .15s ease;
}
.stat:hover{border-color:var(--k3-navy-200, #C4CEDD)}

.stat .num{
  font:600 32px/1.05 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-700, #1D2D54);
  letter-spacing:-.01em;
  margin:0 0 2px;
}
.stat .lbl{
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}

/* o ícone sai do fluxo e vira selo no canto */
.stat .ic{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:9px;
  background:var(--k3-navy-50, #F1F4F9);
}
.stat .ic svg{width:17px;height:17px;stroke-width:1.9}
.stat .ic-teal   {background:var(--k3-navy-50, #F1F4F9);  color:var(--k3-navy-600, #27395F)}
.stat .ic-warn   {background:var(--ds-atencao-bg);        color:var(--ds-atencao-fg)}
.stat .ic-bronze {background:var(--k3-gold-100, #F7EFD8); color:var(--k3-gold-700, #7E6412)}

/* ===================================================== o Card do sistema ===
   Borda fina, sem sombra, título em overline e um filete dourado só no que
   está em foco. O painel tinha sombra em tudo, o que achata a hierarquia:
   quando tudo se destaca, nada se destaca. */
.ops-panel{
  border:1px solid var(--k3-paper-200, #E0DDD5);
  border-radius:14px;
  box-shadow:none;
  padding:20px;
}
.ops-panel.ops-focus{
  border-color:var(--k3-gold-300, #E6CE88);
  background:linear-gradient(180deg, var(--k3-gold-50, #FCF8EC) 0%, #fff 62px);
}
.ops-panel-head{margin-bottom:14px}
.ops-kicker{
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}
/* o número do cartão era decorativo e competia com o dado: fica mais
   discreto, como no sistema — mas não a ponto de sumir. Em paper-300 ele
   media 1,69:1 contra o branco, que é invisível na prática; paper-400 o
   mantém discreto e ainda legível. */
.ops-mark{
  font:600 11px/1 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-400, #A9A59B);
  letter-spacing:.06em;
}
.ops-panel > strong{
  display:block;
  font:600 24px/1.15 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-700, #1D2D54);
  letter-spacing:-.005em;
}
.ops-panel > p{
  font:400 13px/1.5 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-600, #5C5A53);
  margin:6px 0 0;
}
.ops-action{
  margin-top:14px;
  font:600 13px/1 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-600, #27395F);
}
.ops-action:hover{color:var(--k3-gold-600, #9C7C18)}

/* ============================================================= o donut ===
   Substitui as três barras do "Perfil da base". Duas peças: o anel e a
   legenda. O número no meio é o total, porque o donut sozinho responde
   proporção mas não tamanho. */
.ops-panel .profile-bars,
#ops-perfis{
  display:grid;
  grid-template-columns:132px 1fr;
  align-items:center;
  gap:18px;
}
.ds-donut{position:relative;width:132px;height:132px}
.ds-donut svg{width:100%;height:100%;display:block}
.ds-fatia{transition:opacity .15s ease}
.ds-donut:hover .ds-fatia{opacity:.55}
.ds-donut .ds-fatia:hover{opacity:1}
.ds-donut-centro{
  position:absolute; inset:0;
  display:grid; place-content:center; text-align:center;
  pointer-events:none;
}
.ds-donut-centro strong{
  display:block;
  font:600 20px/1 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-700, #1D2D54);
}
.ds-donut-centro span{
  font:600 10px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}

.ds-legenda{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ds-legenda li{
  display:grid;
  grid-template-columns:9px 1fr auto auto;
  align-items:center; gap:9px;
}
.ds-ponto{width:9px;height:9px;border-radius:3px}
.ds-leg-nome{
  font:400 13px/1.3 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-700, #403E39);
}
.ds-leg-num{
  font:500 13px/1.3 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--k3-navy-700, #1D2D54);
}
.ds-leg-pct{
  min-width:34px; text-align:right;
  font:400 12px/1.3 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--k3-paper-500, #7C7970);
}

/* ========================================================== a DataTable ===
   Cabeçalho em overline, linha mais densa, números em tabular, e a linha
   inteira reagindo ao passar do mouse — como no DataTable do sistema. */
.client-table thead th{
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
  border-bottom:1px solid var(--k3-paper-200, #E0DDD5);
  padding-bottom:10px;
}
.client-table tbody td{
  border-bottom:1px solid var(--k3-paper-50, #F6F5F1);
  font:400 14px/1.45 var(--k3-fonte-ui, inherit);
}
.client-table tbody tr{transition:background .12s ease}
.client-table tbody tr:hover{background:var(--k3-navy-50, #F1F4F9)}
/* só a CÉLULA, não o cabeçalho: `th.row-number` também casa com .row-number,
   e o cinza claro derrubava o contraste do título "Posição" para 2,46:1. */
.client-table tbody td.row-number{
  font:400 13px/1.3 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--k3-paper-400, #A9A59B);
}
.client-table .cliname{
  font:600 14px/1.3 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-700, #1D2D54);
  letter-spacing:0;
  text-transform:none;                 /* o caixa-alta somava ruído na lista */
}
.client-table .clisub{
  font:400 12px/1.3 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-500, #7C7970);
  margin-top:2px;
}

/* =============================================================== badges ===
   O sistema usa tom, não cor decorativa: fundo claro da família, texto
   escuro da mesma família. Legível e discreto na mesma linha. */
.badge{
  font:600 11px/1 var(--k3-fonte-ui, inherit);
  letter-spacing:.02em;
  padding:5px 9px;
  border-radius:999px;
  border:0;
  background:var(--ds-neutro-bg);
  color:var(--ds-neutro-fg);
}
.badge.ok,      .badge.badge-ok      {background:var(--ds-positivo-bg); color:var(--ds-positivo-fg)}
.badge.andamento,.badge.badge-andamento{background:var(--ds-atencao-bg); color:var(--ds-atencao-fg)}
.badge.info,    .badge.badge-info    {background:var(--ds-info-bg);     color:var(--ds-info-fg)}

/* ============================================================== o herói ===
   Mais baixo e com o número em destaque, como o cabeçalho das telas do
   sistema. Antes ele ocupava 175px para dizer três números. */
.hero{padding:26px 30px 24px}
.hero h1{font:700 28px/1.14 var(--k3-fonte-display, inherit);letter-spacing:-.01em}
.hero-kpis{margin-top:16px;gap:38px}
.hero-kpis .hk{
  font:600 10px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.1em; text-transform:uppercase;
}
.hero-kpis .hk strong{
  display:block; margin-top:5px;
  font:600 26px/1.05 var(--k3-fonte-ui, inherit);
  letter-spacing:-.01em;
}

@media (max-width:760px){
  #ops-perfis{grid-template-columns:1fr;justify-items:center;gap:14px}
  .ds-legenda{width:100%}
}

/* ==================================================== o mapa de calor ===
   Cruza faixa de patrimônio com suitability. Blocos, e não barras, porque
   são duas dimensões ao mesmo tempo; uma cor só variando de opacidade,
   porque a escala é de contagem (sequencial) e duas cores sugeririam duas
   categorias diferentes.

   A opacidade de cada bloco vem de `--n`, que o main.js calcula. O CSS não
   sabe nada dos números — só desenha o que recebe. */
.mapa-calor{padding:22px 24px 18px;margin-top:20px}
.mc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}
.mc-kicker{
  display:block;
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}
.mapa-calor h3{
  margin:6px 0 4px;
  font:600 18px/1.25 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-700, #1D2D54);
  letter-spacing:-.008em;
}
.mc-ajuda{
  margin:0;max-width:56ch;
  font:400 13px/1.5 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-600, #5C5A53);
}
.mc-escala{display:flex;align-items:center;gap:5px;flex:none;padding-top:4px}
.mc-escala span{
  font:600 10px/1 var(--k3-fonte-ui, inherit);
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}
.mc-escala i{
  width:17px;height:11px;border-radius:3px;
  background:color-mix(in srgb, var(--ds-serie-1) calc(var(--n) * 100%), #fff);
  border:1px solid rgba(29,45,84,.08);
}

.mc-grade{display:grid;gap:5px}
.mc-linha{
  display:grid;
  grid-template-columns:150px repeat(4, minmax(0,1fr)) 74px;
  gap:5px;align-items:stretch;
}
.mc-rot{
  display:flex;align-items:center;
  font:400 12.5px/1.25 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-700, #403E39);
  padding-right:8px;
}
.mc-col{
  display:flex;align-items:center;justify-content:center;
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
  text-align:center;
}
.mc-cabecalho{padding-bottom:2px}
.mc-cabecalho .mc-col{min-height:26px}

/* o bloco */
.mc-bloco{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0;
  border:1px solid rgba(29,45,84,.07);
  border-radius:8px;
  cursor:pointer;
  /* a cor: navy da marca misturado com branco na proporção de --n */
  background:color-mix(in srgb, var(--ds-serie-1) calc(var(--n) * 100%), #fff);
  transition:transform .12s ease, box-shadow .14s ease, outline-color .12s ease;
  outline:2px solid transparent;outline-offset:2px;
}
/* reserva para navegador sem color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .mc-bloco{background:rgba(29,45,84,var(--n))}
  .mc-escala i{background:rgba(29,45,84,var(--n))}
}
.mc-bloco span{
  font:600 13px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  /* acima de 45% de tinta o fundo já é escuro demais para texto escuro */
  color:var(--k3-navy-700, #1D2D54);
}
.mc-bloco[style*="--n:0.7"] span,
.mc-bloco[style*="--n:0.8"] span,
.mc-bloco[style*="--n:0.9"] span,
.mc-bloco[style*="--n:1"] span{color:#fff}
.mc-bloco:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(15,27,51,.55)}
.mc-bloco:focus-visible{outline-color:var(--k3-gold-500, #C9A227)}
.mc-bloco.vazio{
  background:repeating-linear-gradient(135deg,#FBFAF7 0 6px,#F4F2EC 6px 12px);
  cursor:default;
}
.mc-bloco.vazio:hover{transform:none;box-shadow:none}

.mc-tot{
  font:500 13px/1.2 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--k3-paper-600, #5C5A53);
  text-transform:none;letter-spacing:0;
}
.mc-rodape{margin-top:3px;padding-top:8px;border-top:1px solid var(--k3-paper-100, #EDEBE5)}
.mc-rodape .mc-rot{
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}
.mc-forte{color:var(--k3-navy-700, #1D2D54);font-weight:700}

@media (max-width:900px){
  .mc-cab{flex-direction:column;gap:12px}
  .mc-linha{grid-template-columns:106px repeat(4, minmax(0,1fr)) 54px;gap:4px}
  .mc-rot{font-size:11.5px}
  .mc-bloco{min-height:40px}
  .mc-bloco span{font-size:12px}
  .mc-cabecalho .mc-col{font-size:9.5px;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .mc-bloco{transition:none}
  .mc-bloco:hover{transform:none}
}

/* =========================================================================
   PASSADA GERAL — o que vale para as sete telas
   =========================================================================
   Daqui para baixo não há nada de uma tela só. São os elementos que se
   repetem — barra lateral, campo, cartão, aba, botão, tabela — e é por isso
   que esta parte é a que mais muda a percepção: ela pega 02, 03, 04, 05, 06
   e 07 de uma vez, sem uma linha de HTML.                                 */

/* ------------------------------------------------------ a barra lateral ---
   Era uma lista de botões cinza. No sistema a navegação tem hierarquia: o
   item ativo carrega um filete, o número é um índice discreto, e o resto
   recua. */
.sidebar{
  background:#fff;
  border-right:1px solid var(--k3-paper-200, #E0DDD5);
}
.sidebar .brand{padding-bottom:22px;border-bottom:1px solid var(--k3-paper-100, #EDEBE5);margin-bottom:18px}
.sidebar .brand .mark{
  font:800 19px/1 var(--k3-fonte-display, inherit);
  letter-spacing:-.045em;color:var(--k3-navy-700, #1D2D54);
}
.sidebar .brand .sub{
  font:600 9.5px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.14em;text-transform:uppercase;
  /* paper-500 e não 400: em 9,5px o 400 media 2,46:1, que é rótulo que
     ninguém lê. O 500 continua discreto e passa dos 4,5:1. */
  color:var(--k3-paper-500, #7C7970);
}
.navbtn{
  position:relative;
  border-radius:10px;
  padding:10px 12px 10px 14px;
  font:500 13.5px/1.2 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-700, #403E39);
  transition:background .13s ease, color .13s ease;
}
.navbtn:hover{background:var(--k3-paper-50, #F6F5F1)}
.navbtn .n{
  font:600 10px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  color:var(--k3-paper-500, #7C7970);
  letter-spacing:.04em;
}
.navbtn svg{width:16px;height:16px;stroke-width:1.8;opacity:.75}
.navbtn[aria-current="page"]{
  background:var(--k3-navy-50, #F1F4F9);
  color:var(--k3-navy-700, #1D2D54);
  font-weight:600;
}
.navbtn[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;
  background:var(--k3-gold-500, #C9A227);
}
.navbtn[aria-current="page"] .n{color:var(--k3-gold-600, #9C7C18)}
.navbtn[aria-current="page"] svg{opacity:1}

/* --------------------------------------------------------- os campos ---
   Mesma altura, mesmo raio e mesmo anel de foco em toda parte. O painel
   tinha três alturas diferentes de campo dependendo da tela. */
.toolbar select,.toolbar input,
.dm-input,select.dm-input,input.dm-input,textarea.dm-input{
  border:1px solid var(--k3-paper-300, #CBC7BC);
  border-radius:10px;
  padding:11px 13px;
  font:400 14px/1.2 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-700, #403E39);
  background:#fff;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.toolbar select:hover,.toolbar input:hover,.dm-input:hover{border-color:var(--k3-paper-400, #A9A59B)}
.toolbar select:focus,.toolbar input:focus,.dm-input:focus{
  outline:none;
  border-color:var(--k3-navy-500, #3A5080);
  box-shadow:0 0 0 3px rgba(58,80,128,.15);
}
.toolbar input::placeholder{color:var(--k3-paper-400, #A9A59B)}

/* ---------------------------------------------------------- o cartão ---*/
.card{
  border:1px solid var(--k3-paper-200, #E0DDD5);
  border-radius:14px;
  box-shadow:none;
  background:#fff;
}

/* ------------------------------------------------------------ as abas ---
   Viram um controle segmentado: trilho recuado, pastilha branca no ativo.
   Era sublinhado, que num painel com cinco abas some no meio do resto. */
.abas,.ac-formularios,#int-campanhas{
  display:inline-flex;gap:3px;padding:4px;
  background:var(--k3-paper-50, #F6F5F1);
  border:1px solid var(--k3-paper-200, #E0DDD5);
  border-radius:12px;
}
.aba{
  border:0;border-radius:9px;padding:8px 15px;
  font:600 13px/1 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-600, #5C5A53);
  background:transparent;cursor:pointer;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.aba:hover{color:var(--k3-navy-700, #1D2D54)}
.aba.ativa{
  background:#fff;
  color:var(--k3-navy-700, #1D2D54);
  box-shadow:0 1px 2px rgba(15,27,51,.07), 0 0 0 1px rgba(29,45,84,.06);
}

/* --------------------------------------------------------- os botões ---*/
.dm-btn{
  border-radius:10px;
  padding:11px 18px;
  font:600 13.5px/1 var(--k3-fonte-ui, inherit);
  transition:background .14s ease, border-color .14s ease, transform .12s ease;
}
.dm-btn:not(:disabled):hover{transform:translateY(-1px)}
.dm-btn-sec{
  background:#fff;
  border:1px solid var(--k3-paper-300, #CBC7BC);
  color:var(--k3-navy-700, #1D2D54);
}
.dm-btn-sec:not(:disabled):hover{border-color:var(--k3-navy-300, #92A3BE);background:var(--k3-navy-50, #F1F4F9)}
.refresh-btn,.sair-btn{
  border-radius:10px;
  font:600 13px/1 var(--k3-fonte-ui, inherit);
  border:1px solid var(--k3-paper-200, #E0DDD5);
  background:#fff;
  transition:border-color .14s ease, background .14s ease;
}
.refresh-btn:hover,.sair-btn:hover{border-color:var(--k3-navy-300, #92A3BE);background:var(--k3-navy-50, #F1F4F9)}

/* ------------------------------------------- as tabelas das outras telas --
   O mesmo tratamento da Mesa Digital, para a lista do internacional e a do
   acompanhamento não parecerem de outro produto. */
.int-tabela thead th,.ac-tabela thead th,table.dm-tabela thead th{
  font:600 11px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
  border-bottom:1px solid var(--k3-paper-200, #E0DDD5);
}
.int-tabela tbody td,.ac-tabela tbody td,table.dm-tabela tbody td{
  border-bottom:1px solid var(--k3-paper-50, #F6F5F1);
  font:400 13.5px/1.45 var(--k3-fonte-ui, inherit);
}
.int-tabela tbody tr:hover,.ac-tabela tbody tr:hover{background:var(--k3-navy-50, #F1F4F9)}

/* ------------------------------------------- os KPIs da ficha e da 02 ---*/
.fi-num,.kpi{
  border:1px solid var(--k3-paper-200, #E0DDD5);
  border-radius:12px;
  background:#fff;
  padding:16px 18px;
  box-shadow:none;
}
.fi-rot,.kpi .k{
  font:600 10.5px/1.2 var(--k3-fonte-ui, inherit);
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--k3-paper-500, #7C7970);
}
.fi-num strong,.kpi .v{
  display:block;margin-top:6px;
  font:600 22px/1.1 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-700, #1D2D54);
  letter-spacing:-.008em;
}
.fi-sub{
  font:400 11.5px/1.3 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-500, #7C7970);
}

/* ------------------------------------------------------------ o aviso ---*/
.int-aviso{
  border:1px solid var(--k3-gold-200, #EFE2B4);
  background:var(--k3-gold-50, #FCF8EC);
  border-left:3px solid var(--k3-gold-500, #C9A227);
  border-radius:0 12px 12px 0;
  padding:14px 18px;
  font:400 13px/1.55 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-700, #403E39);
}

/* ============================ a tabela no formato do ClientsScreen ===
   Avatar, documento embaixo do nome, etiqueta de perfil contornada, dinheiro
   à direita em fonte tabular e uma medida com barra. É a composição da tela
   de clientes do design system, com o dado que esta base realmente tem. */
.client-table{width:100%;border-collapse:separate;border-spacing:0}
.client-table th.num,.client-table td.num{text-align:right}
.client-table td{padding:11px 12px;vertical-align:middle}
.client-table th{padding:0 12px 10px}

.cel-cliente{display:flex;align-items:center;gap:11px;min-width:0}
.ds-avatar{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--k3-navy-50, #F1F4F9);
  color:var(--k3-navy-600, #27395F);
  font:600 12px/1 var(--k3-fonte-ui, inherit);
  letter-spacing:.02em;
  border:1px solid rgba(29,45,84,.07);
}
.cel-cliente-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
.cel-assessor{
  font:400 13px/1.35 var(--k3-fonte-ui, inherit);
  color:var(--k3-paper-600, #5C5A53);
  white-space:nowrap;
}

/* a etiqueta de perfil: contorno, não preenchimento — assim ela não compete
   com o badge de status, que é preenchido */
.ds-tag{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font:600 11px/1.25 var(--k3-fonte-ui, inherit);
  border:1px solid currentColor;
  background:transparent;
  white-space:nowrap;
}
.ds-tag.tag-cons{color:#1E5A94}
.ds-tag.tag-mod {color:#9C7C18}
.ds-tag.tag-agr {color:#8F1E17}
.ds-tag.tag-sem {color:#8C9099}

/* dinheiro: tabular, para a vírgula cair no mesmo lugar em todas as linhas */
.client-table td.num{
  font:400 13px/1.35 var(--k3-fonte-mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
  color:var(--k3-paper-700, #403E39);
  white-space:nowrap;
}
.client-table td.num .vazio{color:var(--k3-paper-300, #CBC7BC)}

/* share of wallet: número e barra */
.ds-sow{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:66px}
.ds-sow-n{
  font:500 13px/1 var(--k3-fonte-mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
}
.ds-sow-trilho{
  display:block;width:62px;height:4px;border-radius:99px;
  background:var(--k3-paper-100, #EDEBE5);overflow:hidden;
}
.ds-sow-trilho > span{display:block;height:100%;border-radius:inherit}
.ds-sow.sow-baixo .ds-sow-n{color:#8F1E17}
.ds-sow.sow-baixo .ds-sow-trilho > span{background:#B3261E}
.ds-sow.sow-medio .ds-sow-n{color:#96590A}
.ds-sow.sow-medio .ds-sow-trilho > span{background:#C9A227}
.ds-sow.sow-alto  .ds-sow-n{color:#15633F}
.ds-sow.sow-alto  .ds-sow-trilho > span{background:#1E7B4F}

/* o badge de status vira ponto + rótulo, como no sistema */
.client-table .badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 8px;
}
.client-table .badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  opacity:.85;flex:none;
}

.next-action{
  font:500 12.5px/1.3 var(--k3-fonte-ui, inherit);
  color:var(--k3-navy-600, #27395F);
}

@media (max-width:1180px){
  .client-table th:nth-child(5),.client-table td:nth-child(5),
  .client-table th:nth-child(7),.client-table td:nth-child(7){display:none}
}
@media (max-width:860px){
  .client-table th:nth-child(4),.client-table td:nth-child(4),
  .client-table th:nth-child(1),.client-table td:nth-child(1){display:none}
}

/* ------------------------------------- a grade da tabela, agora com 9 ---
   O `styles.css` transforma a tabela numa GRADE CSS de seis colunas, com
   `!important`:

     .client-table thead tr,.client-table tbody tr{
       display:grid!important;grid-template-columns:8% 32% 18% 14% 14% 14%}

   Ou seja: a tabela não é mais tabela, é grade — e as colunas estão escritas
   à mão. Acrescentar coluna sem mexer aqui faz as três últimas caírem para
   uma segunda linha, que foi exatamente o que aconteceu. Não dá para tirar o
   `!important` de lá sem mexer em todas as telas, então a saída é
   redeclarar o mesmo seletor com o mesmo peso, depois.

   As larguras: o nome respira (1,6fr), assessor ocupa o que sobra (1fr), e o
   resto é fixo para os números não dançarem de linha em linha. */
.client-table thead tr,
.client-table tbody tr{
  grid-template-columns:
    46px                /* # */
    minmax(210px,1.6fr) /* cliente */
    112px               /* perfil */
    124px               /* patrimônio XP */
    124px               /* declarado fora */
    86px                /* na XP */
    minmax(120px,1fr)   /* assessor */
    140px               /* FP */
    128px               /* próxima ação */
    !important;
  align-items:center;
  gap:0 10px;
}
/* a célula do cliente é a única que empilha por dentro */
.client-table td.cel-cliente{display:flex!important}

@media (max-width:1180px){
  .client-table thead tr,.client-table tbody tr{
    grid-template-columns:46px minmax(190px,1.6fr) 104px 118px 82px 126px 120px !important;
  }
}
@media (max-width:860px){
  .client-table thead tr,.client-table tbody tr{
    grid-template-columns:minmax(150px,1.7fr) 100px 80px 116px !important;
  }
  .client-table th:nth-child(3),.client-table td:nth-child(3),
  .client-table th:nth-child(9),.client-table td:nth-child(9){display:none!important}
}

/* ------------------------------------------------- acertos de linha ---
   Dois detalhes que só apareceram com a tabela montada e 2.866 linhas na
   tela: o badge de status quebrando em duas linhas ("Não" / "iniciado"), e
   nomes de quatro palavras empurrando a linha para três alturas. */
.client-table .badge{white-space:nowrap}
.client-table .cliname{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.24;
}
.client-table tbody tr{min-height:58px}