/* weknow-panel.css — v2, o NOSSO visual.
 *
 * Curador 2026-07-21: "quero o nível de detalhe que o WeKnow dá, inclusive o cubo e poder
 * adicionar filtros — clicar e o filtro aparecer lá em cima dá até mais controle que um BI
 * que só interage. Mas queria outro visual, mais moderno, mais da casa."
 *
 * Então: a MECÂNICA do WeKnow (cubo, filtros acumuláveis, cross-filter, abas) e a PELE nossa.
 * O que mudou do v1, que era mímica:
 *   · fora a faixa de título vertical azul — assinatura visual deles, não nossa
 *   · a barra de filtros virou uma FRASE DE CONSULTA legível, não uma fileira de caixinhas
 *   · cartões com elevação sutil e respiro, sem moldura pesada
 *   · números em destaque com algarismos tabulares
 *   · barras finas, sem grade concorrendo com o dado, rótulo alinhado
 */

/* ── FONTE ÚNICA DE TOKENS ───────────────────────────────────────────────────────────────
 * Medido 2026-08-17: `design-system/tokens.css` ESTÁ publicado no docroot (1507 B, sha igual
 * ao git) e NENHUM ficheiro o importava — zero `@import`, zero `<link>` em 190 ficheiros.
 * A "fonte única" era um ficheiro de referência, não uma dependência: cada redefinição local
 * era a única fonte real, e por isso os 36 tokens canónicos aparecem redefinidos em até 18
 * ficheiros cada.
 *
 * Esta folha é a ÚNICA que as páginas de facto carregam — 22 de 45 ligam-na por <link>, e as
 * outras 23 não ligam folha nenhuma (estilo inline). Logo é aqui que o import alcança mais.
 *
 * POR QUE É SEGURO: o @import entra ANTES das regras deste ficheiro, portanto tudo o que o
 * `:root` abaixo redefine continua a vencer na cascata. Visualmente é um NO-OP. O que muda é
 * que a fonte passa a estar carregada — e cada redefinição local deixa de ser a verdade para
 * passar a ser uma SOBREPOSIÇÃO visível, que o check.sh pode medir e o admission pode cobrar.
 *
 * Não corrige nada sozinho. Torna corrigível o que hoje é invisível. */
@import url("/bi/design-system/tokens.css");


/* ── tokens: os mesmos do shell do hub; dark é o default ───────────────────── */
:root{
  --bg:#0E1014; --surface-1:#15181F; --surface-2:#1B1F28; --accent:#3987e5;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781; --border:rgba(255,255,255,.08);
  --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#9085e9; --s5:#e66767;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --r:14px; --r-sm:9px;
  --sombra:0 1px 2px rgba(0,0,0,.24), 0 8px 24px -12px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#f4f6f9; --surface-1:#ffffff; --surface-2:#f0f2f6; --accent:#2b6fbf;
  --ink:#141922; --ink-2:#3d444d; --muted:#6b7280; --border:rgba(10,15,25,.09);
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.28);
}
body{ background:var(--bg); color:var(--ink); }

/* ── o painel ──────────────────────────────────────────────────────────────── */
.wk-painel{ display:block; background:transparent; border:0; border-radius:0; }
.wk-corpo{ display:flex; flex-direction:column; gap:12px; position:relative; min-width:0; }

/* o título deixa de ser faixa vertical e vira cabeçalho de verdade */
.wk-faixa{ display:block; flex:none; background:transparent; padding:0; }
.wk-faixa span{ writing-mode:horizontal-tb; transform:none; display:block;
  color:var(--ink); font-weight:650; font-size:19px; letter-spacing:-.01em;
  text-transform:none; }

/* ── a barra de filtros como FRASE DE CONSULTA ─────────────────────────────── */
.wk-barra{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface-1); border:1px solid var(--border); border-radius:999px;
  padding:7px 8px 7px 14px; box-shadow:var(--sombra); min-height:0; }
.wk-chips{ display:flex; gap:7px; flex-wrap:wrap; flex:1; min-width:0; align-items:center; }
.wk-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--surface-2);
  border:1px solid transparent; border-radius:999px; padding:5px 11px; font-size:12.5px;
  transition:border-color .15s ease, background .15s ease; }
.wk-chip b{ font-weight:500; color:var(--muted); font-size:11.5px; text-transform:lowercase;
  letter-spacing:.02em; }
.wk-chip span{ color:var(--ink); font-weight:550; }
.wk-chip-fix{ background:transparent; padding-left:0; }
.wk-chip-cf{ background:color-mix(in oklab, var(--accent) 16%, transparent);
  border-color:color-mix(in oklab, var(--accent) 40%, transparent); }
.wk-chip-cf b{ color:var(--accent); }
.wk-x{ cursor:pointer; color:var(--muted); font-weight:600; padding:0 1px; line-height:1;
  border-radius:50%; transition:color .15s ease; }
.wk-x:hover{ color:var(--critical); }
.wk-add{ width:30px; height:30px; border-radius:50%; border:1px dashed var(--border);
  background:transparent; font-size:17px; line-height:1; cursor:pointer; color:var(--muted);
  transition:all .15s ease; flex:none; }
.wk-add:hover{ border-style:solid; border-color:var(--accent); color:var(--accent);
  background:color-mix(in oklab, var(--accent) 10%, transparent); }
.wk-chip select{ color:var(--ink) !important; font-weight:550; }
.wk-chip select option{ background:var(--surface-1); color:var(--ink); }

/* ── o seletor de dimensões (o "+") ────────────────────────────────────────── */
.wk-filtro-pane{ position:absolute; top:52px; right:0; width:330px; max-height:440px;
  overflow:auto; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--sombra); z-index:30; padding:14px 16px; }
.wk-filtro-head{ display:flex; justify-content:space-between; align-items:center;
  font-size:14px; margin-bottom:12px; font-weight:600; }
.wk-busca{ width:100%; border:1px solid var(--border); border-radius:var(--r-sm);
  padding:8px 11px; font-size:13px; outline:none; margin-bottom:12px;
  background:var(--surface-2); color:var(--ink); transition:border-color .15s ease; }
.wk-busca:focus{ border-color:var(--accent); }
.wk-cubo{ font-size:11px; font-weight:600; color:var(--muted); margin:2px 0 8px;
  text-transform:uppercase; letter-spacing:.06em; }
.wk-tree{ font-size:13px; }
.wk-tree-grp{ color:var(--muted); margin:8px 0 4px; padding-left:2px; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; }
.wk-tree-ico{ margin-right:6px; }
.wk-tree-item{ display:flex; align-items:center; gap:9px; padding:6px 8px; cursor:pointer;
  border-radius:var(--r-sm); transition:background .12s ease; }
.wk-tree-item:hover{ background:var(--surface-2); }
.wk-tree-sub{ padding-left:26px; color:var(--ink-2); }
.wk-tree-foot{ margin-top:12px; font-size:11px; color:var(--muted); }

/* ── grade de cartões ──────────────────────────────────────────────────────── */
.wk-grade{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; padding:0;
  align-content:start; }
.wk-cell{ min-width:0; }
.wk-comp{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--sombra); height:100%; box-sizing:border-box; }
.wk-comp h3{ margin:0 0 14px; font-size:12px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; }
.wk-scroll{ overflow-y:auto; }
.wk-scroll::-webkit-scrollbar{ width:8px; }
.wk-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

/* números: o dado é o herói */
.wk-kpi{ display:flex; flex-direction:column; justify-content:center; }
.wk-kpi-v{ font-size:36px; font-weight:680; color:var(--ink); line-height:1.05;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.wk-kpi-s{ font-size:12.5px; color:var(--muted); margin-top:6px; }

.wk-tab{ width:100%; border-collapse:collapse; font-size:12.5px; }
.wk-tab th{ text-align:left; font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--border);
  padding:8px 10px; position:sticky; top:0; background:var(--surface-1); }
.wk-tab td{ padding:7px 10px; border-bottom:1px solid var(--border); color:var(--ink-2); }
.wk-tab tr:hover td{ background:var(--surface-2); color:var(--ink); }
.wk-tab td:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums; }

/* ── abas: pílulas, não abas de navegador ──────────────────────────────────── */
.wk-abas{ display:flex; gap:4px; border:0; background:transparent; padding:2px 0 0; }
.wk-aba{ background:transparent; border:0; border-radius:999px; padding:7px 16px;
  font-size:12.5px; font-weight:550; letter-spacing:.01em; color:var(--muted);
  cursor:pointer; transition:all .15s ease; text-transform:none; }
.wk-aba:hover{ color:var(--ink); background:var(--surface-2); }
.wk-aba.on{ color:var(--ink); background:var(--surface-1); border:1px solid var(--border);
  box-shadow:var(--sombra); }

@media (max-width:900px){ .wk-cell{ grid-column:span 12 !important; } }

/* ── menu de pastas (weknow-arvore.js) ─────────────────────────────────────── */
.wa-wrap{ display:flex; flex-direction:column; height:100%; background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); }
.wa-busca{ border:0; border-bottom:1px solid var(--border); padding:13px 15px; font-size:13px;
  outline:none; background:transparent; color:var(--ink); }
.wa-busca::placeholder{ color:var(--muted); }
.wa-busca:focus{ background:var(--surface-2); }
.wa-legenda{ display:flex; gap:14px; flex-wrap:wrap; padding:10px 15px;
  border-bottom:1px solid var(--border); font-size:11px; color:var(--muted); }
.wa-lg{ display:inline-flex; align-items:center; gap:5px; cursor:default; }
.wa-tree{ flex:1; overflow:auto; padding:8px; font-size:13px; }
.wa-pasta{ color:var(--ink); }
.wa-pasta,.wa-painel{ display:flex; align-items:center; gap:8px; padding:6px 10px;
  cursor:pointer; user-select:none; border-radius:var(--r-sm); transition:background .12s ease; }
.wa-pasta:hover,.wa-painel:hover{ background:var(--surface-2); }
.wa-cev{ color:var(--muted); width:10px; font-size:9px; }
.wa-fld{ color:var(--muted); }
.wa-nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-ct{ font-size:10.5px; color:var(--muted); background:var(--surface-2); border-radius:999px;
  padding:2px 8px; font-variant-numeric:tabular-nums; }
.wa-painel{ color:var(--ink-2); font-size:12.5px; }
.wa-painel .wa-nm{ padding-left:18px; }
.wa-abas-n{ font-size:10px; color:var(--s3);
  background:color-mix(in oklab,var(--s3) 16%,transparent); border-radius:999px; padding:2px 7px; }
.wa-area{ font-weight:600; }
.wa-dot{ font-size:10px; line-height:1; }
.wa-ok{ color:var(--good); } .wa-wip{ color:var(--warn); } .wa-off{ color:var(--muted); }
.wa-rodape{ border-top:1px solid var(--border); padding:10px 15px; font-size:11px;
  color:var(--muted); }

/* contraste das pastas-pai — herdavam cor do body e sumiam no escuro (visto na auditoria) */
.wa-pasta:not(.wa-area) .wa-nm{ color:var(--ink-2); font-weight:550; }
.wa-pasta.wa-area .wa-nm{ color:inherit; }


/* ── FIX largura do mount nativo (2026-07-21) ───────────────────────────────
   #appnative e irmao do #appview (iframe) dentro de #app-main{display:flex}.
   O iframe tem flex:1 1 auto; width:100%. O div nativo nasceu SEM regra,
   entao ficou no default flex:0 1 auto e NAO cresce — a grade repeat(12,1fr)
   colapsa para min-content e o painel ocupa ~metade da tela.
   Casa correta: /static/style.css do hub (assado na imagem). Vive aqui porque
   este CSS e servido do host e carrega DEPOIS do shell. Migrar no proximo
   build do hub e remover daqui. */
#appnative{ flex:1 1 auto; width:100%; min-width:0; overflow:auto;
  padding:18px 22px 30px; }


/* ── chip de filtro com valor TROCAVEL (2026-07-21) ─────────────────────────
   O chip mostrava o valor como texto morto: dava para remover (x), nao para
   trocar. Virou <select> — mesma aparencia de texto, com um caret discreto. */
.wk-chip select{ background:transparent; border:0; margin:0; padding:0 14px 0 0;
  font:inherit; color:var(--ink); font-weight:550; cursor:pointer; appearance:none;
  -webkit-appearance:none; max-width:230px; text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 5px) 54%, calc(100% - 1px) 54%;
  background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.wk-chip select:hover{ color:var(--accent); }
.wk-chip select:focus{ outline:none; }
.wk-chip select option{ background:var(--surface-1); color:var(--ink); font-weight:400; }


/* ── FIX abas: do rodape para o topo, como troca de VISAO (2026-07-21) ──────
   Curador: "a barra de baixo esta muito sutil... nao e so um filtro, mas uma
   dimensao inteira do painel". As abas trocam o painel todo, entao sobem para
   antes da barra de filtros e viram um segmented control explicito.
   `.wk-corpo` ja e flex-column → basta `order:-1`. Zero mudanca no JS. */
.wk-corpo > .wk-abas{
  order:-1; align-self:flex-start; align-items:center; gap:3px;
  margin:0 0 4px; padding:3px 3px 3px 0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; }
.wk-corpo > .wk-abas::before{
  content:"visão"; font-size:10.5px; font-weight:650; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; padding:0 11px 0 14px;
  white-space:nowrap; }
/* Dashboard multi-view: as abas são as do painel (GERAL/ATENDIMENTO/…), não "visão" do cubo.
   Sem o rótulo ::before, o padding-left:0 herdado deixava o 1º pill encostado na borda —
   restaura o inset simétrico (curador 2026-07-22: "o pill encosta na borda"). */
.wk-corpo > .wk-abas.wk-abas-dash::before{ content:none; }
.wk-corpo > .wk-abas.wk-abas-dash{ padding:3px; }
.wk-corpo > .wk-abas .wk-aba{
  padding:6px 18px; font-size:12.5px; font-weight:600; border-radius:999px;
  border:1px solid transparent; }
.wk-corpo > .wk-abas .wk-aba:hover{ background:var(--surface-1); color:var(--ink); }
.wk-corpo > .wk-abas .wk-aba.on{
  background:var(--accent); border-color:var(--accent); color:#fff; }
.wk-corpo > .wk-abas .wk-aba.on:hover{ background:var(--accent); color:#fff; }


/* ── FIX 7+8: painel preenche a tela · KPI no topo (2026-07-21) ─────────────
   Curador: "o esforco e para encher a tela do computador inteiro, ao inves de
   ficar espaco grande embaixo. Quando tem item demais, dai ta otimo do jeito
   que esta, que faz scroll".
   Medido antes: #appnative 933px vs .wk-painel 673px = 242px de vazio.
   A cadeia inteira passa a esticar; as linhas da grade dividem a sobra. */
/* NAO declarar display:flex em #appnative — o app.js escreve display inline
   (block ao abrir, none ao fechar) e inline vence CSS. Forcar com !important
   quebraria o fechar. #appnative ja tem altura definida por stretch; basta o
   filho preencher 100% e a cadeia flex distribuir daqui para baixo. */
/* ── O PAINEL FLUI, E A PAGINA ROLA (curador 2026-08-20) ──────────────────────
   «o weknow esta travado em 100% da tela e nao cabe, fica tudo apertado e ruim
   de ler, melhor deixar ele fluir verticalmente com scroll, principalmente os
   do drg q vc criou com 7 elementos na tela e n tem espaco pra ver»

   O DEFEITO, MEDIDO. O `weknow-panel.js` JA calcula a altura de que o painel
   precisa: `_canvasPx = max(viewport, 290*100/medianaH)`. Para a aba COMPARATIVO
   do `gold_drg_cirurgicas_indice` (7 componentes, medianaH=30,43%) isso da
   **953px** — o codigo estava certo e pedia o espaco.

   Quem lho negava eram estas duas linhas: `height:100%` prendia o painel a
   altura do `#appnative`, e `flex:1 1 0` + `min-height:0` no corpo AUTORIZAM
   explicitamente o flex a encolher o filho abaixo do conteudo. Os 953px eram
   espremidos no viewport, e o `.wk-comp{overflow:hidden}` cortava o que sobrava.
   Nao era um painel grande demais: era um painel a ser esmagado em silencio.

   A correccao e' a minima que inverte isso: o painel passa a ter altura
   NATURAL (com `min-height:100%` para os painoes pequenos continuarem a
   preencher o ecra, como hoje), o corpo deixa de poder encolher (`1 0 auto`),
   e o `#appnative` rola. E ele JA' rolava: a linha 189 declara `overflow:auto`
   desde sempre. Nunca havia barra porque nunca havia nada por baixo do dobrar
   — o painel estava preso ao tamanho do pai. Nao ha' nada a acrescentar aqui;
   ha' a tirar a corda. Painel que cabe: identico ao de hoje. Painel que nao
   cabe: rola, em vez de encolher. */
#appnative > .wk-painel{ height:auto; min-height:100%; display:flex;
  flex-direction:column; }
.wk-painel > .wk-corpo{ flex:1 0 auto; min-height:0; }
.wk-corpo > .wk-grade{ flex:1 1 0; min-height:0; align-content:stretch;
  grid-auto-rows:minmax(200px,1fr); }

/* o valor do KPI encosta no topo do card em vez de boiar no meio */
.wk-comp.wk-kpi{ justify-content:flex-start; }


/* ── FIX: o card manda na altura, nao o max-height fixo (2026-07-21) ────────
   Com as linhas da grade elasticas, `.wk-scroll{max-height:380px}` passou a
   estourar o card (card 367 < scroll 380 < conteudo 428) e o conteudo vazava
   para a linha de baixo. Agora o cartao e flex-column com clipping, o titulo
   fica fixo e a area de dados absorve a sobra. */
.wk-comp{ display:flex; flex-direction:column; overflow:hidden; }
.wk-comp > h3{ flex:0 0 auto; }
.wk-comp .wk-scroll{ flex:1 1 auto; min-height:0; max-height:none; }
.wk-comp > .recharts-responsive-container{ flex:0 0 auto; }


/* ── pill de origem no WeKnow (2026-07-21) ─────────────────────────────────
   Topo direito, alinhado verticalmente ao titulo do painel. Curador: o link
   degrada painel -> pasta -> home, entao o pill nunca some. */
.wk-faixa{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.wk-faixa > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-origem{ flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface-2); color:var(--muted); text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:none;
  white-space:nowrap; transition:all .15s ease; }
.wk-origem::after{ content:"↗"; font-size:10px; opacity:.7; }
.wk-origem:hover{ color:var(--accent); border-color:var(--accent);
  background:color-mix(in oklab, var(--accent) 12%, transparent); }


/* ── dropdown próprio (2026-07-21) ──────────────────────────────────────────
   Substitui o <select> nativo, cujo <option> é desenhado pelo sistema
   operacional e não aceita CSS. */
.wk-sel{ position:relative; display:inline-flex; }
.wk-sel-bt{ display:inline-flex; align-items:center; gap:7px; background:transparent;
  border:0; padding:0 2px 0 0; margin:0; font:inherit; font-size:12.5px; font-weight:550;
  color:var(--ink); cursor:pointer; max-width:250px; }
.wk-sel-bt:hover, .wk-sel-bt.on{ color:var(--accent); }
.wk-sel-vl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-sel-ca{ flex:none; width:0; height:0; border-left:4px solid transparent;
  border-right:4px solid transparent; border-top:4.5px solid currentColor; opacity:.75; }
.wk-sel-pop{ position:absolute; top:calc(100% + 8px); left:-10px; z-index:60;
  min-width:210px; max-width:330px; max-height:320px; overflow:auto;
  background:var(--surface-1); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.30); padding:6px; }
.wk-sel-op{ padding:8px 11px; border-radius:8px; font-size:12.5px; color:var(--ink-2);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-sel-op:hover{ background:var(--surface-2); color:var(--ink); }
.wk-sel-op.on{ background:color-mix(in oklab, var(--accent) 16%, transparent);
  color:var(--accent); font-weight:600; }
.wk-sel-op:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* O menu que NAO tem valores diz-se. Um popup vazio le-se como «nao ha' dados»,
   quando o facto e' «este campo nao tem componente no cubo desta aba». */
.wk-sel-vazio{ padding:10px 11px; font-size:12px; color:var(--muted); line-height:1.4;
  white-space:normal; }

/* o valor do KPI volta ao centro do card: com o card alto preenchendo a tela,
   encostado no topo sobrava um vazio grande embaixo (curador 2026-07-21) */
.wk-comp.wk-kpi{ justify-content:center; }


/* ── animacoes (2026-07-21) ─────────────────────────────────────────────────
   O pill das abas DESLIZA: as larguras diferem, entao o indicador e posicionado
   por medicao (JS) e so a transicao vive aqui. */
.wk-corpo > .wk-abas{ position:relative; }
.wk-corpo > .wk-abas .wk-aba{ position:relative; z-index:1; background:transparent !important;
  border-color:transparent !important; transition:color .2s ease; }
.wk-corpo > .wk-abas .wk-aba.on{ color:#fff !important; }
.wk-abas-ind{ position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0;
  border-radius:999px; background:var(--accent);
  transition:transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
  will-change:transform,width; pointer-events:none; }

/* popover do dropdown entra com fade + leve subida */
.wk-sel-pop{ animation:wk-pop .16s cubic-bezier(.2,.8,.2,1); transform-origin:top left; }
@keyframes wk-pop{ from{ opacity:0; transform:translateY(-6px) scale(.98); }
                   to  { opacity:1; transform:none; } }
.wk-sel-op{ transition:background .13s ease, color .13s ease; }

/* chips entram suave e reagem ao hover */
.wk-chip{ animation:wk-chip .2s ease; transition:border-color .15s ease, background .15s ease; }
@keyframes wk-chip{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
.wk-x{ transition:color .13s ease, transform .13s ease; }
.wk-x:hover{ transform:scale(1.18); }
.wk-add{ transition:all .16s ease; }
.wk-add:hover{ transform:rotate(90deg); }

/* cartoes do painel entram escalonados */
.wk-cell{ animation:wk-cell .26s ease both; }
.wk-cell:nth-child(2){ animation-delay:.04s; } .wk-cell:nth-child(3){ animation-delay:.08s; }
.wk-cell:nth-child(4){ animation-delay:.12s; } .wk-cell:nth-child(5){ animation-delay:.16s; }
@keyframes wk-cell{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .wk-abas-ind, .wk-sel-pop, .wk-chip, .wk-cell, .wk-x, .wk-add{
    animation:none !important; transition:none !important; }
}


/* ── contraste do pill + fallback (2026-07-21) ──────────────────────────────
   A regra anterior zerava o fundo da aba ativa contando com o indicador. Se o
   indicador nao existir, a aba ativa sumia. Agora o fundo proprio VOLTA como
   base e o indicador so o cobre quando existe — degradar nunca apaga. */
.wk-corpo > .wk-abas .wk-aba.on{
  background:var(--accent) !important; border-color:var(--accent) !important;
  color:#fff !important; }
/* o fundo proprio so sai quando o indicador PROVOU que mediu (classe posta pelo
   JS apos offsetWidth valido). `:has(.wk-abas-ind)` nao servia: o indicador pode
   existir com largura 0 e o pill sumia. */
.wk-corpo > .wk-abas.tem-ind .wk-aba.on{
  background:transparent !important; border-color:transparent !important; }
/* o indicador desliza no eixo X — e so translateX, sem mudar o layout */
.wk-abas-ind{ transition:transform .3s cubic-bezier(.34,1.2,.4,1), width .3s cubic-bezier(.34,1.2,.4,1); }

/* KPI: centralizado nos DOIS eixos (antes so no vertical) */
.wk-comp.wk-kpi{ justify-content:center; align-items:center; text-align:center; }
.wk-comp.wk-kpi h3{ align-self:center; }


/* ── aba DADOS como planilha (2026-07-21) ──────────────────────────────────
   Ordenacao por coluna, filtro por coluna, cabecalho fixo. O corte em 300
   linhas e deliberado: renderizar 6.340 <tr> trava o navegador. */
.wk-comp.wk-tabela{ padding-bottom:8px; }
.wk-tab-topo{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.wk-tab-topo h3{ margin:0; }
.wk-tab-cont{ font-size:11px; color:var(--muted); }
.wk-tab-limpa{ margin-left:auto; background:transparent; border:1px solid var(--border);
  border-radius:999px; padding:4px 11px; font-size:11px; font-weight:600;
  color:var(--muted); cursor:pointer; transition:all .15s ease; }
.wk-tab-limpa:hover{ color:var(--accent); border-color:var(--accent); }
.wk-tab-rol{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border);
  border-radius:10px; }
.wk-tab thead th{ position:sticky; top:0; z-index:2; background:var(--surface-2);
  padding:0; border-bottom:1px solid var(--border); }
.wk-tab tr.wk-tab-filtros th{ top:32px; z-index:1; padding:4px 6px; }
.wk-th-bt{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; background:transparent; border:0; padding:8px 10px; font:inherit;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); cursor:pointer; transition:color .13s ease; }
.wk-th-bt:hover{ color:var(--ink); }
.wk-th-bt.on{ color:var(--accent); }
.wk-th-seta{ font-size:9px; opacity:.65; }
.wk-tab-in{ width:100%; box-sizing:border-box; background:var(--surface-1);
  border:1px solid var(--border); border-radius:7px; padding:4px 8px;
  font:inherit; font-size:11.5px; color:var(--ink); }
.wk-tab-in:focus{ outline:none; border-color:var(--accent); }
.wk-tab-in::placeholder{ color:var(--muted); }
.wk-tab-mais{ padding:8px 4px 0; font-size:11px; color:var(--muted); }

/* ── régua de filtros com scroll LATERAL (padrão das lanes Atlas 2 — curador 2026-07-22):
   uma linha, arrastar/wheel, setas ‹ › só quando não cabe. Dashboard multi-view. ── */
.wk-chips-viewport{ display:flex; align-items:center; flex:1; min-width:0; gap:2px; }
.wk-chips.wk-chips-scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -ms-overflow-style:none; scroll-behavior:auto; user-select:none; cursor:grab; }
.wk-chips.wk-chips-scroll:active{ cursor:grabbing; }
.wk-chips.wk-chips-scroll::-webkit-scrollbar{ display:none; }
.wk-chips.wk-chips-scroll .wk-chip{ flex:0 0 auto; white-space:nowrap; }
.wk-chips-seta{ flex:0 0 auto; width:22px; height:26px; border:0; border-radius:6px;
  background:var(--surface-2); color:var(--muted); font-size:15px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:color .13s ease, background .13s ease; }
.wk-chips-seta:hover{ color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); }

/* ── tabela DADOS (granular) — estilo planilha (curador 2026-07-22): a barra do header
   levemente mais grossa, rótulo E dado centralizados por coluna, sem quebra de linha;
   ordenação + filtro por coluna reusam .wk-th-bt/.wk-tab-in da tabela do cubo. ── */
.wk-tab-dados th{ text-align:center; background:var(--surface-2); position:sticky; top:0; z-index:1; }
.wk-tab-dados thead tr:first-child th{ padding:11px 12px; }
.wk-tab-dados .wk-th-bt{ justify-content:center; width:100%; padding:0; }
.wk-tab-dados.wk-tab td{ text-align:center; white-space:nowrap; max-width:340px;
  overflow:hidden; text-overflow:ellipsis; }
.wk-tab-dados .wk-tab-filtros th{ padding:4px 8px 8px; }


/* ── drag do pill das abas (curador 2026-07-22): durante o arrasto o indicador segue o
   ponteiro 1:1 (sem transição) e a aba sob ele destaca; a carga é só no soltar. ── */
.wk-corpo > .wk-abas{ touch-action:none; }
.wk-abas.arrastando .wk-abas-ind{ transition:none; }
.wk-abas.arrastando .wk-aba{ cursor:grabbing; }
/* durante o arrasto, o BRANCO segue o pill (curador 2026-07-22): a aba sob ele fica
   legivel (#fff) e a ativa "abandonada" volta a cor de aba comum. */
.wk-corpo > .wk-abas.arrastando .wk-aba.on{ color:var(--muted) !important; }
.wk-corpo > .wk-abas.arrastando .wk-aba.alvo-drag{ color:#fff !important; }

/* ── toggle de prioridade de ordenação (comps com ordem lógica + temperatura):
   ícone discreto no canto do componente — sequência (⇅) ↔ maior (▼). ── */
.wk-ord-bt{ position:absolute; top:8px; right:10px; z-index:2; width:22px; height:22px;
  border:0; border-radius:6px; background:transparent; color:var(--muted);
  font-size:12px; line-height:1; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; transition:color .13s ease, background .13s ease; }
.wk-ord-bt:hover{ color:var(--accent); background:var(--surface-2); }
.wk-ord-bt.on{ color:var(--accent); }

/* ── fullscreen do componente (curador 2026-07-22): backdrop com fade + o card
   subindo em pop suave; saída animada antes de desmontar. ── */
.wk-full-bt{ position:absolute; top:8px; left:10px; z-index:2; width:22px; height:22px;
  border:0; border-radius:6px; background:transparent; color:var(--muted);
  font-size:13px; line-height:1; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; transition:color .13s ease, background .13s ease; }
.wk-full-bt:hover{ color:var(--accent); background:var(--surface-2); }
.wk-full-overlay{ position:fixed; inset:0; z-index:90;
  background:color-mix(in oklab, #0b1220 46%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:28px;
  animation:wkFadeIn .18s ease both; }
.wk-full-overlay.saindo{ animation:wkFadeOut .18s ease both; }
.wk-full-card{ position:relative; width:min(1240px, 96vw); height:min(84vh, 820px);
  background:var(--surface-1); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.42); padding:18px 22px 16px; box-sizing:border-box;
  display:flex; flex-direction:column; animation:wkFullIn .24s cubic-bezier(.22,1,.36,1) both; }
.wk-full-overlay.saindo .wk-full-card{ animation:wkFullOut .18s ease both; }
.wk-full-x{ position:absolute; top:12px; right:14px; width:28px; height:28px; border:0;
  border-radius:8px; background:transparent; color:var(--muted); font-size:14px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:color .13s ease, background .13s ease; }
.wk-full-x:hover{ color:var(--ink); background:var(--surface-2); }
@keyframes wkFadeIn{ from{ opacity:0; } }
@keyframes wkFadeOut{ to{ opacity:0; } }
@keyframes wkFullIn{ from{ transform:scale(.93) translateY(10px); opacity:0; } }
@keyframes wkFullOut{ to{ transform:scale(.95) translateY(6px); opacity:0; } }

/* ── chips fixos INTERATIVOS (data = calendário; setor = dropdown) ── */
.wk-chip-int{ position:relative; display:inline-flex; flex:0 0 auto; }
.wk-chip-int .wk-chip .wk-sel-ca{ margin-left:2px; }
.wk-chip-int .wk-sel-pop{ top:calc(100% + 6px); left:0; min-width:230px; max-height:340px; overflow-y:auto; }
.wk-pop-setor{ min-width:290px; }
.wk-pop-n{ float:right; color:var(--muted); font-size:11px; margin-left:12px; }
.wk-pop-presets{ border-bottom:1px solid var(--border); padding-bottom:4px; margin-bottom:6px; }
.wk-pop-data-rodape{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--border); margin-top:6px; padding:9px 10px 6px; }
.wk-pop-faixa{ font-size:12px; color:var(--ink-2); font-weight:550; white-space:nowrap; }

/* ── CalRange: o calendário do APP (nada de datepicker nativo) ── */
.wk-cal{ padding:4px 8px 6px; }
.wk-cal-cab{ display:flex; align-items:center; justify-content:space-between; padding:2px 2px 7px; }
.wk-cal-mes{ font-size:12.5px; font-weight:650; color:var(--ink); }
.wk-cal-nav{ width:26px; height:26px; border:0; border-radius:7px; background:transparent;
  color:var(--muted); font-size:15px; cursor:pointer; transition:color .13s ease, background .13s ease; }
.wk-cal-nav:hover{ color:var(--accent); background:var(--surface-2); }
.wk-cal-grade{ display:grid; grid-template-columns:repeat(7, 30px); gap:2px; justify-content:center; }
.wk-cal-sem{ font-size:10.5px; font-weight:650; color:var(--muted); text-align:center;
  text-transform:uppercase; padding:2px 0 4px; }
.wk-cal-dia{ width:30px; height:28px; border:0; border-radius:7px; background:transparent;
  font:inherit; font-size:12px; color:var(--ink-2); cursor:pointer;
  transition:background .12s ease, color .12s ease; }
.wk-cal-dia:hover{ background:var(--surface-2); color:var(--ink); }
.wk-cal-dia.faixa{ background:color-mix(in oklab, var(--accent) 14%, transparent); color:var(--ink); border-radius:0; }
.wk-cal-dia.ponta{ background:var(--accent); color:#fff; font-weight:650; }
.wk-cal-dia.hoje:not(.ponta){ box-shadow:inset 0 0 0 1px var(--accent); }
.wk-pop-aplica{ border:0; border-radius:8px; background:var(--accent); color:#fff;
  font:inherit; font-size:12px; font-weight:600; padding:6px 16px; cursor:pointer;
  transition:filter .13s ease; }
.wk-pop-aplica:hover{ filter:brightness(1.08); }

/* o popover de data carrega presets + calendário + rodapé: altura livre (sem scroll) */
.wk-sel-pop.wk-pop-data{ max-height:none; min-width:280px; }
.wk-sel-pop.wk-pop-setor{ max-height:380px; overflow-y:auto; }