/* painel-ds.css — a proporção do design system sobre a estrutura do painel
   ========================================================================
   Carregado DEPOIS de `marca-k3.css`. Aquele arquivo diz as cores; este diz
   os tamanhos: escala de tipo, ar entre as coisas, densidade de tabela,
   tratamento do herói e da barra lateral.

   Por que existe separado. `marca-k3.css` trocou valor por valor — papel,
   tinta, raio, sombra. O resultado ficou certo e discreto: mesmo painel,
   mais limpo. O que faltava para ele parecer as telas do design system era
   proporção, não cor: título maior, cartão mais folgado, herói mais alto,
   barra lateral mais calma. É o que está aqui.

   NADA de estrutura muda. Nenhum `id`, nenhuma classe, nenhum seletor que o
   JS procure. São 121 ganchos de DOM mapeados em `CONTRATO-DOM.md` e todos
   continuam onde estavam — esta folha só muda como eles se apresentam.

   Para voltar atrás, remova a linha que a carrega no `index.html`.         */

/* ============================================================== o fundo ===
   As telas do sistema têm uma constelação muito fraca atrás do conteúdo:
   linhas e pontos que dão profundidade sem competir com dado. Aqui ela é
   feita com dois gradientes radiais e um cônico, em opacidade baixa — não
   precisa de imagem e não pesa no carregamento. */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 78% 12%, rgba(30,45,84,.045) 0 1px, transparent 1px),
    radial-gradient(circle at 12% 62%, rgba(30,45,84,.05) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 92% 78%, rgba(209,167,113,.07) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 34% 22%, rgba(30,45,84,.035) 0 1px, transparent 1px);
  background-size:520px 480px, 680px 620px, 560px 540px, 440px 400px;
  background-attachment:fixed;
}

/* ================================================== a barra lateral ===
   Mais calma: o número da ordem vira o elemento fraco e o nome da tela vira
   o forte. Antes os dois brigavam pelo mesmo peso. */
.sidebar{padding:22px 16px}
.navbtn{
  min-height:42px; padding:0 12px; gap:12px;
  font-size:13.5px; letter-spacing:-.005em;
}
.navbtn .n{
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  min-width:18px; opacity:.85;
}
.navbtn svg{opacity:.62}
.navbtn[aria-current="page"] svg, .navbtn.active svg{opacity:1}
.brand{margin-bottom:26px}

/* ========================================================== o herói ===
   Mais alto e com o número maior: nas telas do sistema ele é o resumo da
   base, e resumo se lê de longe. */
.hero{padding:30px 32px; border-radius:var(--radius)}
.hero h1{font-size:31px; line-height:1.14; letter-spacing:-.025em}
.hero p{font-size:14px; line-height:1.6; max-width:62ch; opacity:.86}
.hero .hero-kpis{gap:34px; margin-top:22px}
.hero .hk{font-size:10px; letter-spacing:.1em; opacity:.68}
.hero .hk strong{font-size:27px; letter-spacing:-.02em; margin-top:5px}

/* =============================================== cabeçalho de página ===
   O olho lê o rótulo pequeno primeiro, depois o título. Aumentar o título
   e afastar os dois é o que dá a hierarquia das telas do sistema. */
.pagehead{margin-bottom:22px}
.pagehead h1{font-size:30px; line-height:1.16; letter-spacing:-.025em; margin:2px 0 6px}
.pagehead p{font-size:13.5px; line-height:1.6; max-width:74ch}
.eyebrow, .ops-kicker{font-size:10.5px; letter-spacing:.13em}

/* ================================================= cartões e seções ===
   Mais ar dentro, mais ar entre. É a mudança que mais se percebe. */
.section{padding:22px 24px; margin-bottom:16px}
.section h3{font-size:10.5px; letter-spacing:.11em; margin:0 0 16px}
.stat, .dm-kpi, .cd-kpi{padding:18px 20px}
.stats, .kpis, .dm-kpis, .cd-kpis{gap:16px}
.grid{gap:18px 26px}

/* KPI: rótulo fraco em cima, número grande embaixo — nunca o contrário */
.stat .lbl, .kpi .k, .dm-lbl, .cd-lbl{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.stat .num{font-size:30px; letter-spacing:-.03em; line-height:1.05}
.dm-num{font-size:34px; letter-spacing:-.03em}
.kpi .v{font-size:22px; letter-spacing:-.02em}
.dm-sub, .cd-sub{font-size:11.5px; margin-top:5px}

/* ======================================================== a tabela ===
   Linha mais alta e cabeçalho mais leve: a densidade anterior era de
   planilha, e a leitura aqui é de uma pessoa por vez. */
table{border-spacing:0}
thead th{
  height:38px; padding:0 16px;
  font-size:10.5px; letter-spacing:.1em;
}
tbody td{padding:15px 16px; font-size:13.5px}
tbody tr{transition:background .12s ease}
.cliname{font-size:14px}
.clisub{font-size:11.5px; margin-top:2px}

/* ==================================================== barra de filtros ===
   Os controles ganham a altura de campo do sistema, para alinharem entre si
   e com os botões. */
.toolbar{gap:10px; margin-bottom:20px}
.toolbar select, .toolbar input[type="text"]{
  min-height:var(--altura-campo); border-radius:var(--radius-campo);
  font-size:13px;
}

/* =========================================================== a ficha ===
   O cabeçalho do cliente é o que orienta a conversa: nome grande, conta e
   perfil abaixo, em cinza. */
.profile-head{gap:16px; margin-bottom:26px}
.avatar{width:54px; height:54px; font-size:17px}
.profile-head h2{font-size:22px; letter-spacing:-.02em}
.profile-head .meta{font-size:12.5px; margin-top:3px}
.field .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-bottom:5px}
.field .v{font-size:14px; line-height:1.5}

/* ======================================================= automação ===
   As abas ficam mais largas e o sublinhado mais grosso: elas são navegação
   de primeiro nível dentro da tela, não um detalhe. */
#view-automacao .abas{gap:4px}
.aba{padding:11px 16px; font-size:13px; border-bottom-width:2.5px}
.aba.ativa{border-bottom-width:2.5px}
.dm-sep{font-size:11px; letter-spacing:.11em; margin:30px 0 14px}

/* ============================================== acompanhamento (07) ===
   Os três painéis de topo têm altura própria e o mesmo ar dos cartões. */
.ops-header{margin:32px 0 14px}
.ops-header h2{font-size:24px; letter-spacing:-.025em}
.ops-panel{padding:20px 22px; border-radius:var(--radius)}
.ops-grid{gap:16px; margin-bottom:26px}
.ops-mark{font-size:26px; letter-spacing:-.03em}

/* ================================================== calendário (05) ===*/
.calendar-heading h1{font-size:28px; letter-spacing:-.025em}
.calendar-panel{border-radius:var(--radius)}
.calendar-toolbar{gap:10px}

/* =================================================== conversas (06) ===
   Coluna da esquerda mais estreita e leitura mais larga: ler mensagem pede
   linha curta, escolher cliente não. */
.conversation-head{padding:16px 20px}
.conversation-head h2{font-size:17px; letter-spacing:-.02em}
.thread-messages{padding:20px}

/* ========================================================= o corpo ===
   A largura máxima do conteúdo vem do sistema: 1440px com 24px de calha.
   Acima disso a linha de texto fica longa demais para ler. */
main, .painel{max-width:1440px}

/* ============================================================ mobile ===*/
@media (max-width:760px){
  .hero{padding:22px 20px}
  .hero h1{font-size:25px}
  .hero .hero-kpis{gap:22px}
  .hero .hk strong{font-size:22px}
  .pagehead h1{font-size:24px}
  .section{padding:18px 16px}
  .dm-num{font-size:28px}
  .stat .num{font-size:25px}
  tbody td{padding:13px 12px}
}

/* =================================================== correções de medida ===
   Três defeitos que a folha acima causou ao aumentar tipo e respiro, todos
   de largura. Ficam aqui embaixo, com o motivo, em vez de escondidos nos
   blocos de cima. */

/* 1. A fileira de KPIs estourava para fora da tela.
      Com rótulo maior, quatro cartões em linha fixa não cabem abaixo de
      1200px. Vira grade que se reorganiza: nunca corta, nunca estica. */
.dm-kpis, .cd-kpis, .stats, .kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:16px;
}
.dm-kpi, .cd-kpi, .stat, .kpi{min-width:0}

/* 2. O rótulo do KPI quebrava em três linhas ("CLIENTES / NA / BASE").
      Caixa alta com espaçamento de letra ocupa mais que o texto parece
      pedir. Solto o espaçamento e deixo a quebra acontecer entre palavras. */
.stat .lbl, .kpi .k, .dm-lbl, .cd-lbl{
  letter-spacing:.07em; line-height:1.35; text-wrap:balance;
}

/* 3. "POSIÇÃO" invadia "CLIENTE" no cabeçalho da tabela.
      Já tinha sido corrigido com padding; o padding novo reabriu o problema.
      Agora a coluna tem largura própria, que não depende de padding. */
thead th:first-child{min-width:96px; white-space:nowrap}
thead th{white-space:nowrap}

/* 4. "Nenhum cliente encontrado" quebrava letra por letra.
      A célula de estado vazio herdava a largura da primeira coluna. Ela
      atravessa a tabela inteira e centraliza. */
tbody td[colspan]{
  white-space:normal; text-align:center; padding:34px 20px;
  color:var(--text-muted); font-size:13.5px;
}

/* 5. A tabela não deve encolher abaixo do que o conteúdo pede: em tela
      estreita ela rola na horizontal, dentro do próprio cartão. */
.section:has(> table), .section:has(table){overflow-x:auto}
table{min-width:720px}

/* 6. Item de menu com nome de duas palavras ("Ficha do cliente") crescia
      em altura e desalinhava a coluna. Uma linha só, sempre. */
.navbtn{white-space:nowrap}
.navbtn span{overflow:hidden; text-overflow:ellipsis}

/* 7. "POSIÇÃO" ainda encostava em "CLIENTE" no Internacional: as duas
      primeiras colunas são estreitas e o espaçamento de letra do cabeçalho
      come a folga. Um respiro à direita na primeira coluna resolve sem
      mexer em largura. */
thead th:first-child{padding-right:26px}

/* 8. O aviso "Selecione um cliente…" quebrava a cada duas palavras: ele
      herdava a largura do painel vazio, que ainda não tem conteúdo. Ganha
      uma medida de leitura própria. */
#conversation-empty, .conversation-empty, .thread-empty, .conversa-vazia, .empty-hint{
  max-width:30ch; margin:0 auto; line-height:1.55; text-wrap:pretty;
}

/* 9. O painel de leitura de Conversas encolhia a 174px porque a grade dava
      a mesma fatia às duas colunas e a da direita ainda estava vazia. A
      leitura fica com o dobro da lista, que é a proporção das telas do
      sistema. */
.conversas-grid, .conversation-layout, #view-conversas > .grid{
  grid-template-columns:minmax(260px, 1fr) minmax(0, 2fr);
}
.conversation-thread{min-width:0}