/* ════════════════════════════════════════════════════════════════
   REFINO — tipografia de dados e acabamento
   Vem depois do bloco principal de propósito: só ajusta acabamento,
   não redefine token nenhum e não mexe em estrutura.
   ════════════════════════════════════════════════════════════════ */
:root{ --font-data:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Todo número desta tela é uma MEDIÇÃO — contagem, valor, taxa, telefone,
   data. Em mono com figuras tabulares eles param de mudar de largura entre
   um render e outro, as colunas de número alinham sozinhas, e a interface
   passa a ler como instrumento em vez de formulário. Texto segue em Inter:
   o contraste entre as duas famílias é o que faz o dado saltar. */
.met-num, .met-taxa-pct, .met-taxa-sub, .col-count, .col-sum,
.card-tel, .card-data, .stat-pill strong, .fu-lbl{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
.met-num{font-weight:500;font-size:38px;letter-spacing:-.035em;}
.met-taxa-pct{font-weight:500;letter-spacing:-.025em;}
.met-taxa-sub{font-size:10.5px;letter-spacing:0;}
.met-lbl{font-size:10px;letter-spacing:.16em;}
.col-sum{font-weight:500;letter-spacing:-.02em;}
.stat-pill strong{letter-spacing:-.02em;}
.card-tel{font-size:11px;letter-spacing:-.01em;}
.card-data{letter-spacing:0;}
.fu-lbl{font-size:10px;letter-spacing:0;}

/* O ponto da coluna tinha um glow de 7px espalhado em cima de uma cor
   saturada. De perto isso lê como neon de vitrine, não como painel clínico.
   Vira anel fino e opaco: mesma função de identificar a etapa, acabamento
   sóbrio — e o brilho para de vazar por cima do texto do cabeçalho. */
.col-dot{width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);}
.col-name{font-size:11px;letter-spacing:.1em;}
.col-header{padding:14px 14px 12px;}
/* Contador quadrado em vez de pílula: número dentro de retângulo lê como
   medidor; dentro de cápsula lê como notificação — e não é disso que se trata. */
.col-count{border-radius:6px;min-width:26px;height:22px;font-weight:500;}

/* 2px de deslocamento no hover, com 28 cards na tela, vira agitação. 1px
   continua dando o retorno tátil sem o board inteiro parecer instável. */
.card:hover{transform:translateY(-1px);}
.card-name{letter-spacing:-.005em;}

/* ── Peso dos controles do card ────────────────────────────────────
   Regra: quem só ABRE alguma coisa vira texto; quem tem CONSEQUÊNCIA
   (dispara mensagem, grava valor) continua sendo botão de verdade. Antes
   os dois tinham a mesma moldura, então nada dizia qual dos dois merecia
   um segundo de hesitação. */

/* "Ver questionário" era pílula com borda, fundo, raio e lupa: quatro
   decorações para uma ação que só abre um painel — dentro de um card que
   já é inteiro clicável. Vira texto com afago no hover, e sobe para a
   linha da origem: o card perde uma linha inteira de altura. */
.act-inline{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-ui);font-size:11px;font-weight:500;
  color:var(--text-3);letter-spacing:.01em;line-height:1;
  transition:color .15s;
}
.act-inline:hover{color:var(--text);}
.act-inline svg{width:11px;height:11px;display:block;opacity:.75;transition:opacity .15s,transform .15s;}
.act-inline:hover svg{opacity:1;}
.act-inline .chev{width:9px;height:9px;}
.act-inline:hover .chev{transform:translateX(2px);}

/* Qualificado era um selo preenchido, em caixa alta e abreviado ("QUALIF."),
   o objeto mais barulhento do card — para dizer uma coisa que é ATRIBUTO da
   pessoa, não um rótulo separado. Vira estrela ao lado do nome: marca o lead
   em vez de acrescentar uma peça, e usa o mesmo ícone do botão que liga o
   estado, então marcador e controle passam a combinar. */
.card-nome-linha{display:flex;align-items:center;gap:5px;min-width:0;}
.card-name{flex:1 1 auto;min-width:0;}
.mark-qualif{display:flex;flex-shrink:0;color:var(--gold-2);}
.mark-qualif svg{width:12px;height:12px;fill:currentColor;display:block;}

/* ── AÇÕES DO CARD: uma família, dois pesos ──────────────────────────────
   O botão de anamnese era o último `.btn-quest` — uma caixa com borda dentro
   de um card que já é uma caixa, ao lado de um "Ver questionário" que virou
   texto puro. Dois irmãos com roupas de festas diferentes.

   A DISTINÇÃO ENTRE OS DOIS É REAL e não some aqui: "Ver questionário" abre um
   painel e não custa nada; "Enviar ficha" dispara um WhatsApp para a paciente e
   não tem volta. Só que peso se diz por COR, não por moldura:

     .act-inline            → ação neutra, cinza (abre, mostra, expande)
     .act-inline.act-envio  → ação que SAI daqui, dourada (manda, publica)

   Assim os dois têm a mesma forma e o mesmo ritmo, e o dourado é o que faz
   hesitar meio segundo antes de clicar — que era o papel que a borda tentava
   fazer e fazia mal, porque borda toda hora vira ruído e ninguém mais vê. */
.act-inline.act-envio{color:var(--gold-2);}
.act-inline.act-envio:hover{color:var(--gold);}
.act-inline.act-envio svg{opacity:.9;}

/* A origem e a ação dividem a mesma linha; em coluna estreita a ação quebra
   para baixo em vez de vazar. */
.card-badges{gap:6px 12px;align-items:center;}

/* ── ABAS do slot duplo (Compareceu/Não compareceu, Fechou/Não fechou) ──
   Substituíram o botão "⇄ N" em 29/07/2026. O ⇄ guardava o nome da outra
   coluna no `title`: aparecia só no hover, e no touch nunca. Uma cliente
   procurou "Não compareceu", não encontrou e achou que a coluna tinha sido
   REMOVIDA — estado escondido lido como estado inexistente.
   Agora os dois nomes ficam visíveis e a inativa mostra a contagem: fica
   óbvio que existe e quantos tem lá dentro, sem clicar. */
.col-abas{
  display:flex;align-items:stretch;gap:2px;padding:5px 5px 0;flex-shrink:0;
  border-bottom:1px solid var(--line);
}
/* Slot duplo ganha 20% mais largura (Bruno, 29/07): ele carrega DOIS nomes e
   dois contadores no header, então precisa de mais espaço que uma coluna
   simples — e a troca por abas tirou uma coluna do total, sobrando folga.
   Proporcional (flex-grow), não largura fixa: o board continua se adaptando à
   tela em vez de ganhar scroll horizontal. */
/* O `min-width` é o que garante o nome inteiro. Sem ele, em notebook (~1100px)
   as 5 colunas caem no mínimo de 200px e as abas viravam "Co… | Não co…" —
   pior que o botão de troca que elas substituíram, porque o nome cortado é
   justamente o que fazia a cliente achar que a coluna não existia.
   Medido: "Compareceu 3 | Não compareceu 2" precisa de ~290px. O
   `.kanban-board` já tem `overflow-x:auto`, então em tela estreita o board
   ganha scroll — comportamento normal de Kanban, e muito melhor que amassar o
   nome que a mudança inteira existe pra mostrar. */
.kanban-col.tem-par{flex:1.2 1 0;min-width:290px;}
/* `flex:1 1 auto` — os três valores importam:
   base `auto` (não 0): parte do tamanho do TEXTO. Com base 0 as abas ficavam
     iguais, "Compareceu" sobrava espaço e "Não compareceu" truncava ao lado.
   grow 1: o espaço que sobra é distribuído, então as abas preenchem a largura
     inteira da coluna — antes ficava um vazio no canto direito.
   Crescer a partir do conteúdo dá as duas coisas de uma vez: nome inteiro E
   sem buraco. */
.col-aba{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  padding:8px 9px;cursor:pointer;background:transparent;border:none;
  border-bottom:2px solid transparent;border-radius:6px 6px 0 0;
  font-family:inherit;color:var(--text-3);text-align:left;
  transition:color .15s,background .15s,border-color .15s;
}
.col-aba:hover{background:var(--s2);color:var(--text-2);}
/* A ativa: sublinhado + texto cheio. Diferença estrutural, não só de cor —
   quem não distingue bem tom ainda vê qual está aberta. */
.col-aba.on{
  color:var(--text);background:var(--s2);
  border-bottom-color:var(--gold-deep);cursor:default;
}
.col-aba.on:hover{background:var(--s2);}
.col-aba:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.aba-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 6px currentColor;opacity:.45;transition:opacity .15s;
}
.col-aba.on .aba-dot{opacity:1;}
/* 🔴 SEM uppercase e SEM letter-spacing largo, ao contrário do `.col-name` das
   colunas simples. Medido na prévia: "NÃO COMPARECEU" em caixa alta com
   .08em de tracking não cabe em coluna de 250px — truncava pra "NÃO COMPA…",
   e nome cortado deixa exatamente a dúvida que estas abas existem pra matar.
   Em caixa mista o mesmo texto cabe inteiro. Aqui legibilidade do nome ganha
   da consistência tipográfica: o nome É a mensagem. */
.aba-nome{
  flex:1;min-width:0;font-size:11.5px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aba-qtd{
  font-family:var(--font-data);font-size:10.5px;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums;flex-shrink:0;
  background:var(--s3);border-radius:99px;padding:2px 6px;
}
/* Header só com extras (receita / botão de teste) quando o slot tem abas:
   sem borda embaixo, senão viriam duas linhas seguidas. */
.col-header-par{border-bottom:none;padding:8px 14px 6px;justify-content:flex-end;}
@media(prefers-reduced-motion:reduce){.col-aba,.aba-dot{transition:none;}}
/* Coluna estreita: o nome encurta antes de a contagem sumir — saber QUANTOS
   tem do outro lado é o que evita a impressão de que a coluna não existe. */
@media(max-width:1100px){
  .aba-nome{font-size:11px;}
  .col-aba{padding:8px 5px;gap:4px;}
  .aba-qtd{padding:2px 5px;}
}
/* Face negativa: o nome da coluna recua um tom. A coluna diz sozinha que você
   está olhando o lado da perda, sem precisar de aviso nem de cor de alarme. */
.kanban-col.face-neg .col-name{color:var(--text-3);}
.btn-icon.troca:hover{background:var(--s3);color:var(--text);}

/* Barra do funil com fantasma: o traço apagado é a etapa ANTERIOR, o sólido
   é esta. A queda fica visível dentro do próprio bloco, sem obrigar o olho a
   comparar quatro barras separadas em pontos diferentes da faixa. */
.met-bar-bg{height:4px;margin-top:10px;position:relative;}
.met-bar-prev{position:absolute;top:0;bottom:0;left:0;width:0%;background:var(--line-3);transition:width .9s cubic-bezier(.2,.8,.2,1);}
.met-bar-fill{position:relative;}