/* ============================================================================
   JK — design system do Joonker Analytics (ago/2026).
   ----------------------------------------------------------------------------
   Este arquivo é ESTÁTICO e cacheável; as cores dinâmicas (--brand etc.)
   entram por um <style> inline em cada layout, lidas do banco por requisição.
   Nada aqui usa hex de marca: só var(--…). Tema claro — decisão do Rodolfo,
   05/08/2026 (o escuro, se voltar, entra como bloco de tokens, não aqui).

   Quem inclui: layout_top.php (admin + login), layout_public_top.php (site
   público). Os PDFs NÃO incluem — papel tem estilo próprio, inline.
   ========================================================================== */

/* ---- base --------------------------------------------------------------- */
/* O espaço da barra de rolagem fica SEMPRE reservado (Rodolfo, 25/09/2026):
   página curta (sem rolagem) e página longa (com rolagem) tinham larguras
   úteis diferentes, e tudo que é centralizado — a faixa do ecossistema em
   primeiro lugar — dava um pulo de meia barra ao trocar de Champions para
   Analytics. Com o vão estável, a faixa não sai do lugar. */
html { scrollbar-gutter: stable; }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--brand); color: #fff; }

/* ---- lateral (admin) ---------------------------------------------------- */
.jk-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  /* Começa embaixo da faixa do ecossistema (17/09/2026), que é grudada no alto
     da tela: com top 0 aqui, o menu passava por baixo da faixa e a altura de
     100vh sobrava para fora da tela. */
  position: sticky; top: var(--eco-h); height: calc(100vh - var(--eco-h)); z-index: 40;
  transition: width .2s;
}
html.sidebar-collapsed .jk-sidebar { width: 68px; flex-basis: 68px; }
html.sidebar-collapsed .jk-hide-collapsed { display: none; }
.jk-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
html.sidebar-collapsed .jk-brand { padding: 16px 10px; flex-direction: column; gap: 8px; }
.jk-brand__mark {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--brand);
  display: grid; place-items: center; overflow: hidden;
}
.jk-brand__mark img { width: 19px; height: 19px; object-fit: contain; filter: invert(1); }
.jk-brand__name { font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.jk-brand__sub { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.jk-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.jk-nav::-webkit-scrollbar { width: 8px; }
.jk-nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid var(--surface); }
.jk-navgroup > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); transition: background .15s, color .15s;
}
.jk-navgroup > summary::-webkit-details-marker { display: none; }
.jk-navgroup > summary:hover { color: var(--ink-2); background: var(--surface-2); }
/* Menu principal aberto = selecionado: negrito e tinta cheia. Vem depois do
   :hover para não clarear ao passar o mouse. Só o primeiro nível — subgrupos
   (Perfil do Cliente, Configurações) não mudam. */
.jk-navgroup[open] > summary { font-weight: 800; color: var(--ink); }
.jk-navgroup > summary .jk-chev { margin-left: auto; transition: transform .18s; }
.jk-navgroup[open] > summary .jk-chev { transform: rotate(90deg); }
.jk-navlist { padding: 2px 0 8px; display: flex; flex-direction: column; gap: 1px; }
.jk-navlink {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 8px 10px 8px 38px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.jk-navlink:hover { background: var(--surface-2); color: var(--ink); }
.jk-navlink.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.jk-navlink .jk-dot { position: absolute; left: 20px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 99px; background: var(--line-2); }
.jk-navlink:hover .jk-dot { background: var(--ink-3); }
.jk-navlink.is-active .jk-dot { background: #fff; }
/* Ícone da tela, no lugar onde ficava o pontinho (Rodolfo, 20/09/2026). Fica
   apagado até o item ser o atual ou estar sob o cursor — assim a coluna de
   ícones guia o olho sem competir com o texto. */
.jk-navico { position: absolute; left: 15px; top: 50%; margin-top: -7.5px; flex: none; color: var(--ink-3); opacity: .75; transition: opacity .15s, color .15s; }
.jk-navlink:hover .jk-navico, .jk-subgroup > summary:hover .jk-navico { color: var(--ink-2); opacity: 1; }
.jk-navlink.is-active .jk-navico { color: #fff; opacity: 1; }
.jk-subgroup > summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 38px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.jk-subgroup > summary::-webkit-details-marker { display: none; }
.jk-subgroup > summary:hover { background: var(--surface-2); color: var(--ink); }
.jk-subgroup > summary .jk-dot { position: absolute; left: 20px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 99px; background: var(--line-2); }
.jk-subgroup > summary .jk-chev { margin-left: auto; transition: transform .18s; color: var(--ink-3); }
.jk-subgroup[open] > summary .jk-chev { transform: rotate(90deg); }
.jk-subgroup .jk-navlink { padding-left: 52px; font-size: 12.5px; }
.jk-subgroup .jk-navlink .jk-dot { left: 40px; }
.jk-subgroup .jk-navlink .jk-navico { left: 30px; }
/* Terceiro nível do menu (ex.: Champions > Configurações > Joon (IA)). O passo
   é menor que o do segundo — a lateral tem 258px e um recuo igual comeria o
   rótulo. Os seletores são por nível, não por descendência, senão o segundo
   nível empurraria o terceiro duas vezes. */
.jk-subgroup.jk-sub-n2 > summary { padding-left: 52px; font-size: 12.5px; }
.jk-subgroup.jk-sub-n2 > summary .jk-dot { left: 40px; }
.jk-subgroup.jk-sub-n2 > summary .jk-navico { left: 30px; }
.jk-subgroup.jk-sub-n2 .jk-navlink { padding-left: 64px; font-size: 12.5px; }
.jk-subgroup.jk-sub-n2 .jk-navlink .jk-dot { left: 52px; }
.jk-subgroup.jk-sub-n2 .jk-navlink .jk-navico { left: 42px; }
.jk-sidefoot { padding: 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.jk-publiclink {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; border-radius: var(--r-sm);
  /* Botão secundário (27/09/2026): a borda vem por sombra interna para a
     altura não mudar — antes ele era rosa, sem borda. */
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px; font-weight: 600; transition: background .15s;
}
.jk-publiclink:hover { background: var(--surface-2); }
/* A borda por sombra interna apagava o anel de foco do teclado: os dois juntos. */
.jk-publiclink:focus-visible { box-shadow: inset 0 0 0 1px var(--line), var(--ring); }
.jk-userchip { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.jk-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--grafite);
}
.jk-userchip__txt { min-width: 0; }
.jk-userchip__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-userchip__mail { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- topo (admin) ------------------------------------------------------- */
.jk-topbar {
  position: sticky; top: var(--eco-h); z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 26px;
  /* Opaco (27/09/2026): translúcido, o que rolava por baixo aparecia borrado. */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.jk-crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.jk-crumb b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-crumb__pai { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.jk-topright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.jk-iconbtn {
  border: 1px solid var(--line); background: var(--surface);
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.jk-iconbtn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }

/* ---- cabeçalho de página ------------------------------------------------ */
.jk-phead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.jk-phead__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.jk-phead h1 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.jk-phead p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; max-width: 64ch; }
.jk-phead__acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- card --------------------------------------------------------------- */
.jk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.jk-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
/* Maiúscula como o .jk-bloco__t, e com os MESMOS ajustes dele: caixa alta
   pede corpo um ponto menor e tracking positivo — 14px/-.01em em caps grita.
   Rodolfo pediu título de bloco sempre em maiúscula (09/08/2026). */
.jk-card__title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jk-card__sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.jk-card__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jk-card__body { padding: 0 18px 18px; }
.jk-card__body--solo { padding: 18px; }

/* ---- grid --------------------------------------------------------------- */
.jk-grid { display: grid; gap: 16px; grid-template-columns: minmax(0,1fr); }
.jk-g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.jk-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.jk-g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.jk-g-8-4 { grid-template-columns: minmax(0,2.05fr) minmax(0,1fr); }
.jk-g-5-7 { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }

/* ---- botões ------------------------------------------------------------- */
.jk-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.jk-btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.jk-btn:active { transform: translateY(1px); }
.jk-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 18px -10px var(--brand); }
.jk-btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.jk-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.jk-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
/* Ação destrutiva neutra; o vermelho só aparece no hover (27/09/2026). */
.jk-btn--danger { background: transparent; border-color: var(--line); color: var(--ink-3); }
.jk-btn--danger:hover { background: var(--negativo-fundo); border-color: var(--crit); color: var(--crit); }
.jk-btn[disabled] { opacity: .45; pointer-events: none; }
.jk-btn--sm { padding: 6px 11px; font-size: 11.5px; }

/* ---- filtros ------------------------------------------------------------ */
.jk-filters {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.jk-chips { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px; background: var(--surface-2); border-radius: var(--r-pill); }
.jk-chip {
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.jk-chip:hover { color: var(--ink); }
/* Opção selecionada em grafite com texto branco (27/09/2026; era preto até 28/09). */
.jk-chip.is-active, .jk-chip[aria-pressed="true"] { background: var(--grafite); color: #fff; }
/* Chip "cheio" — usado quando o chip é um link de estado (período ativo). */
.jk-chip--solid.is-active { background: var(--grafite); color: #fff; }
.jk-filters__right { margin-left: auto; display: flex; gap: 8px; align-items: flex-end; }

/* ---- formulário --------------------------------------------------------- */
.jk-input {
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--borda, var(--line-2));
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
  outline: none; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.jk-input:focus { border-color: var(--grafite, var(--brand)); box-shadow: var(--ring); }
.jk-input::placeholder { color: var(--texto-terciario, var(--ink-3)); }
.jk-input--auto { width: auto; }
textarea.jk-input { min-height: 76px; resize: vertical; }
.jk-fld { display: grid; gap: 5px; min-width: 0; align-content: start; }
.jk-fld > label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.jk-fld > .jk-hint { font-size: 11px; color: var(--ink-3); }
.jk-formgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.jk-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; margin: 14px -18px -18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.jk-savebar > span { font-size: 11.5px; color: var(--ink-3); }
.jk-savebar > *:last-child { margin-left: auto; }
.jk-checkgrid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.jk-checkitem {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); font-size: 12.5px; cursor: pointer;
}
/* Marcada ou não, a caixa é a mesma (27/09/2026): rosa com borda vermelha
   parecia erro. Quem diz o estado é a caixinha, em grafite. */
.jk-checkitem input { accent-color: var(--grafite); width: 15px; height: 15px; flex: none; }
.jk-switchrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.jk-switchrow__txt strong { display: block; font-size: 13px; font-weight: 600; }
.jk-switchrow__txt span { font-size: 11.5px; color: var(--ink-3); }
.jk-colorfield { display: flex; align-items: center; gap: 10px; }
.jk-colorchip { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; padding: 0; }
.jk-upload {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
}
.jk-upload__prev { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; flex: none; overflow: hidden; }
.jk-upload__prev img { width: 100%; height: 100%; object-fit: contain; }
.jk-dragrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.jk-dragrow__txt { min-width: 0; flex: 1; }
.jk-dragrow__txt strong { font-size: 13px; font-weight: 600; display: block; }
.jk-dragrow__txt span { font-size: 11.5px; color: var(--ink-3); }

/* ---- selos, avisos, notas ----------------------------------------------- */
.jk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; background: var(--fundo-sutil, var(--surface-3)); color: var(--texto-secundario, var(--ink-2)); }
/* Painel: os fundos exatos da paleta (--*-fundo); fora dele, a mistura de antes. */
.jk-badge--good  { background: var(--positivo-fundo, color-mix(in srgb, var(--good) 14%, #ffffff)); color: var(--good-ink); }
.jk-badge--warn  { background: var(--aviso-fundo, color-mix(in srgb, var(--warn) 20%, #ffffff)); color: var(--warn-ink); }
.jk-badge--crit  { background: var(--negativo-fundo, color-mix(in srgb, var(--crit) 14%, #ffffff)); color: var(--crit-ink); }
.jk-badge--brand { background: var(--brand-wash); color: var(--brand-ink); }
.jk-alert { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border-radius: var(--r-md); font-size: 12.5px; border: 1px solid; }
.jk-alert--good { background: var(--positivo-fundo, color-mix(in srgb, var(--good) 8%, #ffffff)); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good-ink); }
.jk-alert--warn { background: var(--aviso-fundo, color-mix(in srgb, var(--warn) 12%, #ffffff)); border-color: var(--aviso-borda, color-mix(in srgb, var(--warn) 38%, transparent)); color: var(--warn-ink); }
.jk-alert--crit { background: var(--negativo-fundo, color-mix(in srgb, var(--crit) 8%, #ffffff)); border-color: color-mix(in srgb, var(--crit) 30%, transparent); color: var(--crit-ink); }
.jk-alert--info { background: var(--surface-2); border-color: var(--line); color: var(--texto-secundario, var(--ink-2)); }
.jk-note { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: flex-start; gap: 7px; }
.jk-stamp { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.jk-stamp i { width: 8px; height: 8px; border-radius: 99px; background: var(--good); display: block; flex: none; }
.jk-stamp.warn i { background: var(--warn); }

/* ---- tabela ------------------------------------------------------------- */
.jk-tablewrap { overflow-x: auto; }
table.jk-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.jk-t th, table.jk-t td { padding: 11px 12px; text-align: left; }
table.jk-t thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none;
}
table.jk-t tbody tr { border-bottom: 1px solid var(--line); }
table.jk-t tbody tr:last-child { border-bottom: 0; }
table.jk-t tbody tr:hover { background: var(--surface-2); }
table.jk-t td.num, table.jk-t th.num { text-align: right; }
table.jk-t td.num { font-variant-numeric: tabular-nums; }
/* Centro: para coluna cujo conteúdo é um símbolo de largura variável (estrelas
   da rodada), onde alinhar à esquerda deixa a coluna torta e à direita a afasta
   do rótulo. Só afeta quem pedir a classe. */
table.jk-t td.mid, table.jk-t th.mid { text-align: center; }
table.jk-t tfoot td { border-top: 1.5px solid var(--grafite); background: var(--surface-2); font-weight: 700; color: var(--ink); }
.jk-rank { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--ink-2); }
.jk-rank.g1 { background: var(--ouro); color: var(--texto); }
.jk-rank.g2 { background: var(--prata); color: var(--texto); }
.jk-rank.g3 { background: var(--bronze); color: var(--texto); }
.jk-storecell { display: flex; align-items: center; gap: 10px; }
.jk-storecell b { font-weight: 600; white-space: nowrap; }
.jk-storecell small { color: var(--ink-3); font-size: 11px; display: block; font-weight: 500; }
.jk-share { display: flex; align-items: center; gap: 9px; min-width: 128px; }
.jk-share__track { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.jk-share__fill { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--dado-1); }
.jk-share__pct { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
.jk-crest { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; overflow: hidden; }
.jk-crest img { width: 100%; height: 100%; object-fit: cover; }
.jk-rowacts { display: flex; gap: 4px; justify-content: flex-end; }

/* ---- stat tile ---------------------------------------------------------- */
.jk-stat { padding: 16px 18px 14px; display: grid; gap: 2px; align-content: start; }
.jk-stat__top { display: flex; align-items: center; gap: 9px; }
.jk-stat__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); flex: none; }
.jk-stat__label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.jk-stat__info { margin-left: auto; color: var(--ink-3); cursor: help; }
.jk-stat__value { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 2px; }
.jk-stat__value--sm { font-size: 21px; }
.jk-stat__hint { font-size: 11.5px; color: var(--ink-3); }
.jk-stat__cmp { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.jk-cmp { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.jk-cmp__when { color: var(--ink-3); width: 52px; flex: none; }
.jk-cmp__base { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jk-cmp__delta { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jk-cmp__delta.up { color: var(--good-ink); }
.jk-cmp__delta.down { color: var(--crit-ink); }
.jk-cmp__delta.none { color: var(--ink-3); font-weight: 600; }

/* ---- hero (cartão de destaque) ------------------------------------------ */
/* Grafite sólido com um fio de 3px da marca no alto (Rodolfo, 27/09/2026): o
   degradê vermelho fazia o faturamento parecer prejuízo. O fio entra no lugar
   de 3px do padding de cima, para a altura do cartão não mudar. */
.jk-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl, 26px);
  padding: 23px 28px 26px; color: #fff; margin-bottom: 16px;
  background: var(--grafite); border-top: 3px solid var(--marca);
}
/* Variante de premiação — tela Recordes: o mesmo grafite, com o fio em ouro. */
.jk-hero--ouro { border-top-color: var(--ouro); }
/* Valor em ouro claro: o --ouro sobre a caixa do hero grafite dava 3,0:1. */
.jk-hero--ouro .jk-hero__stat b { color: var(--ouro-no-escuro); }
.jk-hero__trofeu {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  height: 128%; width: auto; opacity: .12; color: var(--ouro); pointer-events: none;
}
/* A textura listrada saiu com o degradê; o elemento continua na página. */
.jk-hero__grain { position: absolute; inset: 0; pointer-events: none; }
.jk-hero__mark {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  height: 86%; opacity: .1; pointer-events: none; filter: invert(1);
}
.jk-hero__inner { position: relative; display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.jk-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.08);
}
.jk-hero__figure { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 14px 0 4px; }
.jk-hero__label { font-size: 13px; font-weight: 500; opacity: .65; }
.jk-hero__deltas { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.jk-hero__delta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 600;
}
/* Variação dentro do hero grafite (27/09/2026). */
.jk-hero .up { color: var(--positivo-no-escuro); }
.jk-hero .down { color: var(--negativo-no-escuro); }
.jk-hero__side { margin-left: auto; display: grid; gap: 10px; min-width: 210px; }
.jk-hero__stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
/* 70%, não os 65% do apoio: dentro da caixa (8% de branco sobre o grafite)
   os 65% davam 4,1:1 — Rodolfo aprovou os 70% em 28/09/2026. */
.jk-hero__stat span { font-size: 11.5px; opacity: .7; }
.jk-hero__stat b { font-size: 16px; font-weight: 700; }
.jk-hero__cta { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.jk-btn-hero {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: var(--r-pill); border: 0;
  background: #fff; color: var(--grafite); font-size: 12.5px; font-weight: 700;
}
.jk-btn-hero.ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }

/* ---- gráfico de linha com letra fixa (vendasChartFixo, 29/09/2026) -------- */
/* As datas do eixo X são texto da página, numa faixa abaixo do desenho; o
   script decide quais aparecem e se inclinam. A posição vem em --x. */
.jk-chart__x { position: relative; height: 18px; margin-top: 6px; }
.jk-chart__x .js-chart-rot { position: absolute; top: 3px; left: var(--x); transform: translateX(-50%); }
/* Inclinada, a data termina no próprio ponto e desce para a esquerda. */
.jk-chart__x.is-incl .js-chart-rot { left: auto; right: calc(100% - var(--x)); transform: rotate(-45deg); transform-origin: 100% 50%; }
/* Ponto em destaque do hover: da página, para continuar redondo. */
.jk-chart__foco { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-sizing: border-box; transform: translate(-50%, -50%); pointer-events: none; }

/* ---- barras horizontais (mix / distribuição) ----------------------------- */
.jk-mix { display: grid; gap: 12px; }
.jk-mixrow { display: grid; grid-template-columns: minmax(84px,140px) minmax(64px,1fr) auto; align-items: center; gap: 10px; }
.jk-mixrow__name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.jk-mixbar { height: 14px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.jk-mixbar > span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--dado-1); }
.jk-mixrow__val { text-align: right; min-width: 118px; }
.jk-mixrow__val b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jk-mixrow__val small { display: block; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- bloco numerado (Perfil / Slide) ------------------------------------ */
.jk-bloco__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jk-bloco__t { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jk-bloco__tag { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.jk-bloco__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- kanban (Banco de Talentos) ----------------------------------------- */
.jk-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.jk-kancol { flex: none; width: 272px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: 72vh; box-shadow: var(--shadow-sm); }
.jk-kancol__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.jk-kancol__head b { font-size: 12.5px; font-weight: 700; }
.jk-kancol__head .n { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.jk-kancol__body { padding: 10px; display: grid; gap: 8px; align-content: start; overflow-y: auto; flex: 1; }
.jk-kancard { padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); cursor: grab; }
.jk-kancard:active { cursor: grabbing; }
.jk-kancard:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.jk-kancard strong { font-size: 12.5px; font-weight: 600; display: block; }
.jk-kancard .vaga { font-size: 11px; color: var(--brand-ink); margin-top: 2px; }
.jk-kancard .quando { font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }
.jk-kanempty { font-size: 11.5px; color: var(--ink-3); text-align: center; padding: 18px 0; }
.jk-kancol.drop-alvo { box-shadow: var(--ring); }

/* ---- modal -------------------------------------------------------------- */
.jk-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-start; justify-content: center; background: rgba(12,12,16,.55); padding: 16px; overflow-y: auto; backdrop-filter: blur(3px); }
.jk-modal.aberto, .jk-modal.flex { display: flex; }
.jk-modal__box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); width: 100%; max-width: 540px; margin: 32px 0; box-shadow: var(--shadow-lg); position: relative; }
.jk-modal__x { position: absolute; top: 10px; right: 12px; }

/* ---- estados ------------------------------------------------------------ */
.jk-empty { text-align: center; padding: 38px 20px; }
.jk-empty__ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }
.jk-empty h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.jk-empty p { font-size: 12.5px; color: var(--ink-3); max-width: 340px; margin: 0 auto 14px; }
.jk-skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: jk-shimmer 1.4s ease infinite; }
@keyframes jk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- categorias (tiers) -------------------------------------------------- */
.jk-tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; }
/* Prata e ouro da paleta de premiação (27/09/2026); diamante e platina ficam
   como estavam — não há cor para eles na paleta. */
.jk-tier--silver { background: color-mix(in srgb, var(--prata) 22%, #fff); color: var(--texto); }
.jk-tier--gold { background: color-mix(in srgb, var(--ouro) 22%, #fff); color: var(--texto); }
.jk-tier--diamond { background: #d8ecfb; color: #17557f; }
.jk-tier--platinum { background: #e4e2f7; color: #403a72; }
.jk-tier--black { background: var(--grafite); color: var(--borda); }
.jk-tier--legend { background: var(--ouro); color: var(--texto); }

/* ---- pódio e confrontos (Champions) -------------------------------------
   O pódio mostra SÓ os três primeiros; a tabela ao lado começa no quarto.
   A cor da posição entra por --pod-cor (ouro/prata/bronze) e pinta de uma vez
   a coroa, o anel do escudo e o rótulo do lugar. */
.jk-podium { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: end; margin-bottom: 16px; }
.jk-pod {
  position: relative; text-align: center; padding: 20px 14px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow);
}
.jk-pod--1 {
  padding-top: 26px; padding-bottom: 26px;
  /* O 1º lugar se distingue pela coroa e pelo anel (27/09/2026), não pelo fundo. */
}
.jk-pod__crown { display: block; margin: 0 auto 8px; width: 30px; height: 30px; color: var(--pod-cor); }
.jk-pod--1 .jk-pod__crown { width: 38px; height: 38px; }
.jk-pod__crest {
  width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 999px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface); border: 4px solid var(--pod-cor);
}
.jk-pod--1 .jk-pod__crest { width: 106px; height: 106px; border-width: 5px; }
/* `cover`, nunca `contain`: dentro de um círculo o contain deixa faixa do
   fundo aparecendo nas laterais de qualquer foto que não seja quadrada. A
   imagem preenche o círculo inteiro e o excedente é aparado pelas bordas. */
.jk-pod__crest img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.jk-pod__crest span { font-weight: 800; font-size: 22px; color: var(--ink-3); }
.jk-pod__lugar { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pod-cor); }
.jk-pod__name { font-size: 14px; font-weight: 700; margin-top: 2px; }
.jk-pod--1 .jk-pod__name { font-size: 16px; }
.jk-pod__sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.jk-pod__pts { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin-top: 8px; }
.jk-pod--1 .jk-pod__pts { font-size: 30px; }
.jk-pod__pts small { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.jk-pod__extra { margin-top: 9px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.jk-pod__estrelas { margin-top: 5px; font-size: 12px; line-height: 1.3; }
/* ---- confronto (Champions) ----------------------------------------------- */
/* Anatomia, de fora para dentro: nome · escudo · placar · escudo · nome. O
   escudo fica ENCOSTADO no placar e o nome por fora, como no placar de futebol
   — assim os dois lados convergem para o número. A versão anterior (.jk-duelo)
   era um grid de largura total: num monitor de 1900px o nome da equipe ficava
   a meio palmo do próprio placar, e o realce do vencedor virava uma moldura
   verde de 800px de largura em volta de nada.
   O max-width é o que segura isso; sem ele, 1fr de cada lado empurra tudo para
   as beiras de novo. */
.jk-confs > * + * { border-top: 1px solid var(--line); }
.jk-conf {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; padding: 15px 18px; max-width: 720px; margin-inline: auto;
}
.jk-conf__lado { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jk-conf__lado--esq { justify-content: flex-end; }
.jk-conf__nome {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jk-conf__lado.venceu .jk-conf__nome { font-weight: 800; color: var(--ink); }
.jk-conf__ok { width: 15px; height: 15px; flex: none; color: var(--good-ink); }
.jk-conf__placar { text-align: center; }
.jk-conf__placar b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.jk-conf__placar b i { font-style: normal; font-weight: 500; color: var(--ink-3); margin: 0 2px; }
.jk-conf__placar small { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.jk-conf__pt--ganhou { color: var(--good-ink); }
.jk-conf__pt--perdeu { color: var(--ink-3); font-weight: 700; }
.jk-conf__nota { grid-column: 1 / -1; text-align: center; font-size: 11px; color: var(--ink-3); }
/* Escudo ausente: a inicial num quadrado neutro. Vazio parecia imagem quebrada. */
.jk-crest--vazio { background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line); }

/* ---- casca do site público ---------------------------------------------- */
/* ---- Barra do ecossistema (17/09/2026) ----------------------------------
   As marcas do grupo no alto de TODAS as interfaces — site público e painel —,
   sempre no mesmo canto: é por ela que se troca de marca. Desenho de portal:
   faixa branca fina, nome de cada marca na cor dela, a marca atual em negrito
   com um traço embaixo. A cor vem por `--eco-cor` no próprio link, então marca
   nova não precisa de CSS novo. No celular a faixa rola na horizontal em vez
   de quebrar em duas linhas.

   `--eco-h` é a altura da faixa e sai daqui, não do layout: o menu lateral e o
   topo do painel são grudados (sticky) e precisam começar logo embaixo dela. */
:root { --eco-h: 44px; }
/* Fica grudada no alto nas DUAS interfaces (Rodolfo, 17/09/2026): é o bloco de
   troca de marca e de identificação, e não pode sair da tela ao rolar. Os
   cabeçalhos de cada interface (.jk-pubhead, .jk-topbar) e o menu lateral
   começam embaixo dela, em `top: var(--eco-h)`. */
.jk-ecobar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 45;
}
/* No painel ela atravessa a tela por cima do menu lateral (que é z-index 40). */
.jk-ecobar--painel { z-index: 50; }
/* Tela sem faixa (painel de administrador): o que vem grudado no alto volta a
   encostar no topo, sem o vão de 44px que o offset reservaria. */
body.jk-sem-eco { --eco-h: 0px; }
.jk-app { display: flex; align-items: flex-start; min-height: calc(100vh - var(--eco-h)); }
.jk-ecobar__in {
  max-width: 1000px; margin: 0 auto; padding: 0 20px;
  /* A borda de baixo entra na conta: a faixa inteira tem de medir exatamente
     `--eco-h`, que é o offset do que vem grudado embaixo dela. */
  display: flex; align-items: center; gap: 16px; min-height: calc(var(--eco-h) - 1px);
}
.jk-ecobar__marca {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); flex: none;
}
.jk-ecobar__links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.jk-ecobar__links::-webkit-scrollbar { display: none; }
.jk-ecobar__links a {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 9px 10px; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: var(--eco-cor, var(--ink-2)); border-bottom: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.jk-ecobar__links a:hover { background: var(--surface-2); }
.jk-ecobar__links a.is-atual { border-bottom-color: var(--eco-cor, var(--ink)); }
/* Quem está logado, no canto direito da faixa: foto (ou iniciais), primeiro
   nome e "sair". `margin-left: auto` empurra para a ponta sem precisar de um
   espaçador vazio no meio. */
.jk-ecobar__user {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink);
}
.jk-ecobar__foto { width: 26px; height: 26px; border-radius: 99px; object-fit: cover; flex: none; }
.jk-ecobar__ini {
  width: 26px; height: 26px; flex: none; border-radius: 99px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.jk-ecobar__sair { color: var(--ink-3); font-weight: 600; }
.jk-ecobar__sair:hover { color: var(--ink); }
/* Telas estreitas: o nome sai e ficam a foto e o "sair" — a faixa não pode
   empurrar as marcas para fora. */
@media (max-width: 560px) {
  .jk-ecobar__marca { display: none; }
  .jk-ecobar__user b { display: none; }
  .jk-ecobar__in { gap: 10px; padding: 0 14px; }
}
/* Opaco (28/09/2026), como o topo do painel: translúcido, o que rolava por baixo aparecia borrado. */
.jk-pubhead { position: sticky; top: var(--eco-h); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.jk-pubhead__in { max-width: 1000px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* Logo com o slogan SEMPRE abaixo (Rodolfo, 05/09/2026): "O JOGO DOS
   CAMPEÕES", Montserrat regular, caixa alta. Vale para o cabeçalho e para os
   cartões de entrada (login e criação de senha). */
.jk-publogo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.jk-publogo img { height: 30px; width: auto; object-fit: contain; }
.jk-publogo b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink); }
.jk-pubslogan { display: block; font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); line-height: 1; white-space: nowrap; }
/* No PC o agrupador some do layout (display: contents): logo, menu e usuário
   continuam sendo três filhos diretos do cabeçalho, exatamente como antes. No
   celular ele vira o painel que o botão de três traços abre. */
.jk-pubhead__acoes { display: contents; }
.jk-pubnav { display: flex; gap: 3px; padding: 4px; background: var(--surface-2); border-radius: var(--r-pill); }
.jk-pubnav a { padding: 7px 15px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.jk-pubnav a.is-active { background: var(--brand); color: #fff; }
.jk-pubuser { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.jk-pubburger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); place-items: center; cursor: pointer; flex: none; }
.jk-pubburger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.jk-pubburger span::before, .jk-pubburger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.jk-pubburger span::before { top: -6px; }
.jk-pubburger span::after { top: 6px; }
@media (max-width: 760px) {
  /* Celular (Rodolfo, 05/09/2026): uma linha só — logo à esquerda, três
     traços à direita. As opções (inclusive "sair") abrem num painel abaixo. */
  .jk-pubhead__in { flex-wrap: nowrap; }
  .jk-pubburger { display: grid; }
  .jk-pubhead__acoes {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    padding: 10px 16px 16px; flex-direction: column; align-items: stretch; gap: 10px;
  }
  .jk-pubhead__acoes.is-open { display: flex; }
  .jk-pubnav { flex-direction: column; background: transparent; padding: 0; gap: 2px; border-radius: 0; }
  .jk-pubnav a { padding: 12px 14px; font-size: 14px; border-radius: var(--r-md); }
  .jk-pubuser { border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; }
  .jk-pubuser a { margin-left: auto; font-weight: 600; }
}
.jk-pubmain { max-width: 1000px; margin: 0 auto; padding: 26px 20px 70px; display: grid; gap: 18px; grid-template-columns: minmax(0,1fr); align-content: start; }

/* ---- casca de autenticação ---------------------------------------------- */
.jk-auth {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 20px;
  background: radial-gradient(80% 70% at 15% 10%, color-mix(in srgb, var(--brand) 10%, transparent) 0, transparent 60%), var(--plane);
}
.jk-authcard { width: 100%; max-width: 392px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); padding: 32px 30px; }
.jk-authmark { width: 52px; height: 52px; border-radius: 16px; background: var(--brand); display: grid; place-items: center; margin-bottom: 18px; }
.jk-authmark img { width: 28px; height: 28px; object-fit: contain; filter: invert(1); }

/* ---- responsivo --------------------------------------------------------- */
@media (max-width: 1240px) {
  .jk-g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .jk-g-8-4, .jk-g-5-7 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1024px) {
  /* No celular o menu é uma gaveta que cobre a tela inteira, inclusive a faixa
     do ecossistema — por isso volta para top 0 e 100vh. */
  .jk-sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.jk-nav-open .jk-sidebar { transform: none; }
  .jk-menubtn { display: grid !important; }
  .jk-topbar { padding: 10px 16px; }
  main.jk-main { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 760px) {
  .jk-g2, .jk-g3, .jk-g4 { grid-template-columns: minmax(0,1fr); }
  /* Celular (Rodolfo, 27/09/2026): o caminho inteiro não cabe numa linha, e
     desde que o cabeçalho "menu + título" saiu das telas o topo é o único lugar
     que diz de onde a tela é. Fica o menu imediato, miúdo, em cima do nome da
     tela — é ele que separa as três "Visão Geral", "Configurações" e
     "Usuários". As duas linhas cabem na altura do botão de menu (34px). O
     max-width é o que faz as reticências aparecerem em vez de vazar. */
  .jk-crumb { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
  .jk-crumb__pai { display: none; }
  .jk-crumb__pai:nth-last-child(2) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .jk-crumb__pai svg { display: none; }
  .jk-crumb b { max-width: 100%; }
  .jk-hero__figure { font-size: 32px; }
  .jk-hero__side { margin-left: 0; width: 100%; }
  .jk-hero__mark { opacity: .06; }
  .jk-hero__trofeu { opacity: .12; right: 6px; }
  .jk-podium { grid-template-columns: minmax(0,1fr); }
}
/* No celular o confronto continua em três colunas — empilhar separaria a equipe
   do próprio placar, que é justamente o que este desenho veio corrigir. O nome
   passa a quebrar em duas linhas em vez de truncar: "Tropa do / Tubarão" se lê,
   "Tropa do…" não. */
@media (max-width: 640px) {
  .jk-conf { gap: 9px; padding: 12px 10px; }
  .jk-conf__nome { font-size: 12px; white-space: normal; line-height: 1.25; }
  .jk-conf__placar b { font-size: 15.5px; }
  .jk-conf .jk-crest { width: 24px; height: 24px; border-radius: 8px; }
  .jk-conf__ok { width: 13px; height: 13px; }
}
.jk-menubtn { display: none; }

/* ---- recordes ------------------------------------------------------------ */
/* Listas de top 3 com as medalhas do .jk-rank; a linha do 1º lugar ganha o
   banho de ouro do pódio da Classificação, para as duas telas falarem a
   mesma língua. */
/* auto-FIT, não auto-fill: sem trilhas fantasmas sobrando à direita quando o
   bloco tem menos listas do que cabe na largura. O `min(100%, …)` é o que
   segura a coluna em tela estreita — sem ele a trilha teima em 272px e o
   conteúdo vaza por baixo do cartão vizinho. */
.jk-recgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); }
/* min-width:0 em toda a cadeia: item de grid nasce com min-width:auto e se
   recusa a encolher abaixo do próprio conteúdo — era isso que empurrava o
   valor para fora da trilha. */
.jk-rec { display: grid; gap: 7px; align-content: start; min-width: 0; }
.jk-rec__t { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.jk-recrow { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); min-width: 0; overflow: hidden; }
.jk-recrow .jk-rank { flex: none; }
.jk-recrow__lbl { min-width: 0; flex: 1 1 auto; }
.jk-recrow__lbl b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-recrow__lbl small { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* O valor nunca encolhe nem quebra: um recorde truncado não é um recorde.
   Quem cede espaço é sempre o rótulo, com reticências. */
.jk-recrow__val { margin-left: auto; flex: none; font-weight: 800; font-size: 12.5px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jk-recrow--1 .jk-recrow__val { font-size: 13.5px; }
/* Cartão de um vendedor ou de uma loja na grade "top 3 de cada um". */
.jk-reccell { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 14px; background: var(--surface); display: grid; gap: 10px; align-content: start; min-width: 0; }
.jk-reccell__nome { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Barras horizontais -----------------------------------------------------
   Rótulo, trilho e valor. Para distribuição ordinal em que uma empilhada de
   100% esmagaria as fatias pequenas: em Renovações a maior faixa é doze vezes
   a menor, e como sliver de 5px ela deixaria de ser legível. */
.jk-barh { display: grid; gap: 9px; }
.jk-barh__l { display: grid; grid-template-columns: 152px 1fr 116px; align-items: center; gap: 12px; }
.jk-barh__lab { font-size: 13px; color: var(--ink-2); }
/* Barra com colunas de número ao lado (faixas de tempo das Renovações):
   rótulo · barra · média · mediana · pessoas · %. O min-width segura as seis
   colunas no celular — o .jk-tablewrap em volta dá a rolagem. */
.jk-tfx { display: grid; grid-template-columns: 112px minmax(150px, 1fr) 78px 78px 70px 58px; gap: 5px 14px; align-items: center; min-width: 620px; }
.jk-tfx__h { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.jk-tfx__lab { font-size: 12.5px; color: var(--ink-2); }
.jk-tfx__num { text-align: right; font-size: 12.5px; }
.jk-barh__track { height: 22px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.jk-barh__fill { height: 100%; border-radius: 0 4px 4px 0; }
.jk-barh__val { text-align: right; font-size: 13px; white-space: nowrap; }
.jk-barh__val b { font-size: 15px; }
.jk-barh__val small { color: var(--ink-3); font-size: 11.5px; margin-left: 5px; }

/* --- Empilhada de 100% ------------------------------------------------------
   O gap de 2px é o separador: sem ele, dois passos vizinhos da mesma rampa
   sequencial encostam e leem como uma faixa só. */
.jk-stack { display: flex; height: 34px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--surface); }
.jk-stack > span { display: block; height: 100%; }
.jk-stack > span:first-child { border-radius: 7px 0 0 7px; }
.jk-stack > span:last-child { border-radius: 0 7px 7px 0; }
.jk-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.jk-legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.jk-legenda i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
@media (max-width: 640px) { .jk-barh__l { grid-template-columns: 108px 1fr 96px; gap: 8px; } }

/* ---- barra horizontal que expande ---------------------------------------- */
/* A linha-mãe vira botão; as filhas nascem escondidas e usam a MESMA faixa da
   mãe (sem fundo próprio) — quem separa os dois níveis é o recuo com o ponto,
   não uma cor. Mesma decisão do ranking de lojas do Menu de Vendas. */
.jk-barh__l--abre { cursor: pointer; border-radius: var(--r-sm); transition: background .15s; }
.jk-barh__l--abre:hover { background: var(--surface-2); }
.jk-barh__lab--abre { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.jk-barh__chev { flex: none; transition: transform .18s; color: var(--ink-3); }
.jk-barh__l--abre[aria-expanded="true"] .jk-barh__chev { transform: rotate(90deg); }
.jk-barh__filhos { display: grid; gap: 7px; margin: 7px 0 2px; }
.jk-barh__filhos[hidden] { display: none; }
.jk-barh__cab { font-size: 11px; color: var(--ink-3); padding-left: 22px; }
.jk-barh__f { display: grid; grid-template-columns: 152px 1fr 116px; align-items: center; gap: 12px; }
.jk-barh__f .jk-barh__lab { font-size: 12px; padding-left: 22px; position: relative; color: var(--ink-2); }
.jk-barh__f .jk-barh__lab::before { content: ""; position: absolute; left: 8px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 99px; background: var(--line-2); }
.jk-barh__f .jk-barh__track { height: 15px; }
.jk-barh__f .jk-barh__val { font-size: 12px; }
.jk-barh__f .jk-barh__val b { font-size: 13px; }
@media (max-width: 640px) { .jk-barh__f { grid-template-columns: 108px 1fr 96px; gap: 8px; } }

/* ---- marketing › tarefas --------------------------------------------------- */
/* Tela Marketing > Tarefas (public/marketing_tarefas.php). Veio de um protótipo
   em HTML e foi traduzida para as peças da casa: abas = chips, resumo = stat que
   filtra, painel de detalhe = variante do .jk-modal presa à direita. Sem cor
   nova: tudo sai dos tokens. Quem o JS liga e desliga com `hidden` ganha a
   regra [hidden] explícita — classe com display venceria o atributo. */
.jk-chips.jkt-abas { display: inline-flex; margin-bottom: 16px; }
.jkt-abas .jk-chip b { margin-left: 7px; font-weight: 800; opacity: .8; }
.jkt-resumo { margin-bottom: 16px; }

/* Cartão do resumo que é botão: pressionado = filtro rápido ligado. */
button.jkt-stat { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
button.jkt-stat:hover { border-color: var(--line-2); }
button.jkt-stat[aria-pressed="true"] { border-color: var(--grafite); }
button.jkt-stat:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }

/* Lista */
table.jkt-lista td { vertical-align: middle; }
table.jkt-lista tbody tr.jkt-linha { cursor: pointer; }
table.jkt-lista tbody tr.jkt-linha:focus-visible { outline: 2px solid var(--grafite); outline-offset: -2px; box-shadow: none; }
table.jkt-lista tbody tr[hidden] { display: none; }
/* Faixa de atraso na célula (no <tr> ela some por causa do border-collapse). */
table.jkt-lista tr.is-atrasada > td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
/* Concluída sem opacidade (27/09/2026): o texto vai para o tom secundário,
   que fica acima de 4,5:1; o apagado por opacidade ficava abaixo. */
table.jkt-lista tr.is-feita > td { color: var(--texto-secundario); }
table.jkt-lista .jk-badge, table.jkt-lista .jk-tier { white-space: nowrap; }

/* Contador de dias desde a criação: âmbar com 10+, vermelho com 21+. */
.jkt-idade { display: grid; justify-items: start; gap: 3px; line-height: 1; }
.jkt-idade b { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.jkt-idade span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.jkt-idade.is-velha b { color: var(--warn-ink); }
.jkt-idade.is-parada b { color: var(--crit-ink); }

.jkt-titulo { font-weight: 700; line-height: 1.35; }
.jkt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.jkt-prazo { font-weight: 600; white-space: nowrap; }
.jkt-prazo small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.jkt-prazo.is-atrasada { color: var(--crit-ink); }
.jkt-prazo.is-logo { color: var(--warn-ink); }
.jkt-prazo.is-feita { color: var(--good-ink); }
/* Prioridade sem mais um vermelho chapado (a marca e "atrasada" já são): só
   a Alta ganha o ponto. */
.jkt-prio { font-size: 12.5px; white-space: nowrap; }
.jkt-prio.is-alta { font-weight: 800; color: var(--ink); }
.jkt-prio.is-alta::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--grafite); margin-right: 6px; vertical-align: 1px; }
.jkt-prio.is-media { font-weight: 600; color: var(--ink-2); }
.jkt-prio.is-baixa { font-weight: 500; color: var(--ink-3); }
/* "Em andamento" é status pendente: âmbar (27/09/2026). */
.jkt-badge--andamento { background: var(--aviso-fundo); color: var(--aviso); }

/* Painel lateral de detalhe */
/* O painel de um item (tarefa, demanda ou ideia) abre no CENTRO da tela
   (Rodolfo, 19/09/2026 — antes ele vinha da direita). A caixa não passa da
   altura da janela: o cabeçalho e o rodapé ficam parados e só o corpo rola,
   para os botões nunca sumirem no fim de um texto comprido. */
.jk-modal.jkt-central { align-items: center; padding: 20px; overflow: hidden; }
.jkt-central .jk-modal__box { max-width: 680px; margin: 0; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.jkt-det { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.jkt-det[hidden] { display: none; }
.jkt-det__cab { padding: 18px 60px 14px 22px; border-bottom: 1px solid var(--line); }
.jkt-det__t { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; }
.jkt-det__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 22px; }
.jkt-det__pe { display: grid; gap: 10px; padding: 12px 22px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.jkt-det__status { display: flex; align-items: center; gap: 8px; }
.jkt-det__status label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.jkt-det__botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.jkt-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.jkt-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.jkt-dl dd { margin-top: 3px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.jkt-dl dd small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.jkt-det__nota { margin-top: 14px; }
.jkt-det__sec { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.jkt-det__n { padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.jkt-instr { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Instrução formatada no painel: o HTML já limpo pelo servidor (as mesmas
   classes que o editor Quill grava — ql-size-*, ql-indent-*, li[data-list]). O
   item de checklist se marca com um clique; feito = verde e riscado. */
/* pre-wrap (herdado do .jkt-instr): espaços repetidos e tabulação aparecem
   como no editor. O HTML limpo não tem quebra de linha entre as tags. */
/* O mesmo texto rico vale no painel da tarefa e nos cartões de demanda e
   ideia; fora do painel ele não tem a moldura do .jkt-instr. */
.jkt-rico { font-size: 13px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.jkt-instr.jkt-rico { font-size: 13px; line-height: 1.55; color: var(--ink); }
/* Link em AZUL (--link), e não no vermelho da marca: azul é o que se
   reconhece como link, e foi o que o Rodolfo pediu. */
.jkt-rico a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.jkt-rico a:hover { color: color-mix(in srgb, var(--link) 75%, #000000); text-decoration-thickness: 2px; }
/* Imagem colada: cabe na largura, sem esticar o painel. */
.jkt-rico img { display: block; max-width: 100%; height: auto; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.jkt-rico p { margin: 0; }
.jkt-rico li { list-style: none; position: relative; margin: 3px 0; padding-left: 1.75em; }
.jkt-rico li[data-list="checked"], .jkt-rico li[data-list="unchecked"] { padding-left: 27px; }
.jkt-rico li[data-list="bullet"]::before { content: "•"; position: absolute; left: 3px; color: var(--ink-3); }
/* Numeração por nível, a mesma do Quill: 1, 2… → a, b… → i, ii… (e repete).
   O Quill põe listas de tipos diferentes no MESMO <ol>, recuadas por classe;
   cada item zera os níveis de baixo, e o numerado soma no próprio nível. */
.jkt-rico ol { margin: 2px 0; padding: 0; counter-reset: jkt-0 jkt-1 jkt-2 jkt-3 jkt-4 jkt-5; }
.jkt-rico li[data-list] { counter-set: jkt-1 jkt-2 jkt-3 jkt-4 jkt-5; }
.jkt-rico li[data-list].ql-indent-1 { counter-set: jkt-2 jkt-3 jkt-4 jkt-5; }
.jkt-rico li[data-list].ql-indent-2 { counter-set: jkt-3 jkt-4 jkt-5; }
.jkt-rico li[data-list].ql-indent-3 { counter-set: jkt-4 jkt-5; }
.jkt-rico li[data-list].ql-indent-4 { counter-set: jkt-5; }
.jkt-rico li[data-list].ql-indent-5 { counter-set: none; }
.jkt-rico li[data-list="ordered"] { counter-increment: jkt-0; }
.jkt-rico li[data-list="ordered"].ql-indent-1 { counter-increment: jkt-1; }
.jkt-rico li[data-list="ordered"].ql-indent-2 { counter-increment: jkt-2; }
.jkt-rico li[data-list="ordered"].ql-indent-3 { counter-increment: jkt-3; }
.jkt-rico li[data-list="ordered"].ql-indent-4 { counter-increment: jkt-4; }
.jkt-rico li[data-list="ordered"].ql-indent-5 { counter-increment: jkt-5; }
.jkt-rico li[data-list="ordered"]::before { content: counter(jkt-0) "."; position: absolute; left: 0; width: 1.4em; text-align: left; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jkt-rico li[data-list="ordered"].ql-indent-1::before { content: counter(jkt-1, lower-alpha) "."; }
.jkt-rico li[data-list="ordered"].ql-indent-2::before { content: counter(jkt-2, lower-roman) "."; }
.jkt-rico li[data-list="ordered"].ql-indent-3::before { content: counter(jkt-3) "."; }
.jkt-rico li[data-list="ordered"].ql-indent-4::before { content: counter(jkt-4, lower-alpha) "."; }
.jkt-rico li[data-list="ordered"].ql-indent-5::before { content: counter(jkt-5, lower-roman) "."; }
/* Caixinha do checklist: 17px (a do Quill era um caractere ☐ miúdo). Marcado =
   caixa verde com o ✓ e o texto do item verde também (pedido do Rodolfo). A
   caixa fica no alto da primeira linha, mesmo com letra grande no item. */
.jkt-rico li[data-list="checked"]::before,
.jkt-rico li[data-list="unchecked"]::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; box-sizing: border-box; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--surface); }
.jkt-rico li[data-list="checked"]::before { border-color: var(--good); background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.jkt-rico li[data-list="checked"] { color: var(--good-ink); }
.jkt-rico .ql-indent-1 { margin-left: 1.5em; }
.jkt-rico .ql-indent-2 { margin-left: 3em; }
.jkt-rico .ql-indent-3 { margin-left: 4.5em; }
.jkt-rico .ql-indent-4 { margin-left: 6em; }
.jkt-rico .ql-indent-5 { margin-left: 7.5em; }
/* Marca-se pela CAIXINHA (o texto fica livre para selecionar e copiar). */
.jkt-rico--marca li[data-list="checked"]::before,
.jkt-rico--marca li[data-list="unchecked"]::before { cursor: pointer; transition: border-color .15s; }
.jkt-rico--marca li[data-list="unchecked"]:hover::before { border-color: var(--good); }
.jkt-rico--marca li[role="checkbox"] { border-radius: 6px; }
.jkt-rico--marca li[role="checkbox"]:focus-visible { outline: 2px solid var(--grafite); outline-offset: 1px; box-shadow: none; }
.jkt-rico--marca li[aria-busy="true"] { opacity: .6; }

/* Editor da instrução (Quill, tema snow) vestido com os tokens da casa. */
.jkt-editor { border-radius: var(--r-sm); }
.jkt-editor[hidden] { display: none; }
.jkt-editor:focus-within { box-shadow: var(--ring); }
.jkt-editor .ql-toolbar.ql-snow { border: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-2); padding: 6px 8px; font-family: inherit; }
/* height:auto — o quill.snow.css dá 100% ao container, que num item de grid
   (.jk-fld) passava do próprio bloco e cobria a dica embaixo. */
.jkt-editor .ql-container.ql-snow { height: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--surface); font-family: inherit; font-size: 13px; }
.jkt-editor:focus-within .ql-toolbar.ql-snow,
.jkt-editor:focus-within .ql-container.ql-snow { border-color: var(--grafite); }
.jkt-editor .ql-editor { min-height: 240px; max-height: 52vh; overflow-y: auto; padding: 12px 14px; line-height: 1.55; color: var(--ink); }
.jkt-editor .ql-editor.ql-blank::before { left: 14px; right: 14px; color: var(--ink-3); font-style: normal; }
.jkt-editor .ql-snow .ql-stroke { stroke: var(--ink-2); }
.jkt-editor .ql-snow .ql-fill { fill: var(--ink-2); }
.jkt-editor .ql-snow .ql-picker { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.jkt-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
.jkt-editor .ql-snow.ql-toolbar button:focus .ql-stroke,
.jkt-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.jkt-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.jkt-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--ink); }
.jkt-editor .ql-snow.ql-toolbar button:hover .ql-fill,
.jkt-editor .ql-snow.ql-toolbar button:focus .ql-fill,
.jkt-editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--ink); }
.jkt-editor .ql-snow.ql-toolbar .ql-picker-label:hover,
.jkt-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.jkt-editor .ql-snow.ql-toolbar .ql-picker-item:hover,
.jkt-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--ink); }
/* Lista rente à margem: o Quill recua a lista inteira em 1.5em, e a caixinha
   (ou o marcador) ficava deslocada em relação ao parágrafo de cima. Sem o recuo
   da lista, o marcador começa na mesma margem do texto e só o texto do item é
   que fica indentado. */
.jkt-editor .ql-editor ol { padding-left: 0; }
.jkt-editor .ql-editor li > .ql-ui::before { text-align: left; }
/* Checklist no editor: a mesma caixinha de 17px do painel, no lugar do ☐/☑ do
   Quill (o clique continua sendo do Quill, na .ql-ui). Marcado = verde. */
.jkt-editor .ql-editor li[data-list="checked"] > .ql-ui::before,
.jkt-editor .ql-editor li[data-list="unchecked"] > .ql-ui::before { content: ""; width: 17px; height: 17px; margin-left: -27px; margin-right: 10px; box-sizing: border-box; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--surface); vertical-align: -3px; cursor: pointer; }
.jkt-editor .ql-editor li[data-list="checked"] > .ql-ui::before { border-color: var(--good); background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.jkt-editor .ql-editor li[data-list="checked"], .jkt-editor .ql-editor li[data-list="unchecked"] { padding-left: 27px; }
.jkt-editor .ql-editor li[data-list="checked"] { color: var(--good-ink); }
.jkt-editor .ql-editor a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.jkt-editor .ql-editor img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
/* Enquanto a imagem colada sobe, um fio corre no pé do editor. */
.jkt-editor.is-subindo { position: relative; }
/* Um traço grafite de 40% da largura correndo de ponta a ponta (27/09/2026:
   sem degradê e sem a marca). */
.jkt-editor.is-subindo::after { content: ""; position: absolute; left: 0; width: 40%; bottom: 0; height: 2px; background: var(--grafite); animation: jkt-subindo 1.1s linear infinite; }
@keyframes jkt-subindo { from { transform: translateX(0); } to { transform: translateX(150%); } }
/* Tamanho da letra: − número + (como no Docs). */
.jkt-editor .ql-toolbar .jkt-tam { display: inline-flex; align-items: center; gap: 2px; }
.jkt-editor .ql-toolbar .jkt-tam__b { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 6px; font-size: 16px; font-weight: 600; line-height: 1; color: var(--ink-2); }
.jkt-editor .ql-toolbar .jkt-tam__b:hover { background: var(--surface-3); color: var(--ink); }
.jkt-editor .ql-toolbar .jkt-tam__n { width: 40px; height: 24px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.jkt-editor .ql-toolbar .jkt-tam__n:focus { outline: none; border-color: var(--grafite); }
/* Botão de pôr arquivo no texto (o clipe, no fim da barra do editor). */
.jkt-editor .ql-toolbar .jkt-poe__b { width: 26px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); }
.jkt-editor .ql-toolbar .jkt-poe__b:hover { background: var(--surface-3); color: var(--ink); }
.jkt-poe__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Linha de demanda e de ideia: clicável, como a da tarefa. */
.jkt-abre { cursor: pointer; transition: border-color .15s; }
.jkt-abre:hover { border-color: var(--line-2); }
.jkt-abre:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }
/* "Marcar como concluída" é ação, não status: neutro parado, verde no hover
   (como o ✓ da conferência de despesas) — 27/09/2026. */
.jkt-btn-feito:hover { background: var(--positivo); border-color: var(--positivo); color: #fff; }

/* Ideias */
.jkt-ideias-topo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 16px; }
.jkt-ideias-topo .jk-alert { flex: 1 1 320px; }
.jkt-grupo { margin-bottom: 16px; }
.jkt-grupo[hidden] { display: none; }
.jkt-ideias { display: grid; gap: 8px; }
.jkt-ideia { align-items: flex-start; gap: 16px; }
.jkt-ideia[hidden] { display: none; }
/* O texto da ideia virou .jkt-rico (o mesmo da tarefa), então as duas regras
   que havia aqui — "strong vira bloco" e "p com outro tamanho" — saíram: elas
   pegavam TODO negrito e TODO parágrafo de dentro da descrição e quebravam a
   linha no meio da frase. O título agora é o .jkt-ideia__cab strong. */
.jkt-ideia__txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.jkt-ideia__acoes { display: flex; align-items: center; gap: 6px; flex: none; }

.jkt-ideia__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.jkt-ideia__cab strong { font-size: 13px; font-weight: 700; }
/* A lista de DEMANDAS não tem mais CSS próprio: virou tabela em 22/09/2026 e
   usa o mesmo da lista de tarefas. */


/* Arquivos: etiqueta com o nome e o tamanho. A mesma peça serve para abrir
   (vira link), para tirar no formulário (ganha ×) e para listar o que acabou
   de ser escolhido. */
.jkt-arqs { display: flex; flex-wrap: wrap; gap: 6px; }
.jkt-arqs:empty { display: none; }
.jkt-arq { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.jkt-arq > a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
a.jkt-arq:hover, .jkt-arq > a:hover { border-color: var(--line-2); color: var(--ink); }
.jkt-arq span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jkt-arq small { flex: none; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jkt-arq form { display: inline-flex; }
.jkt-arq.is-fora { color: var(--ink-3); text-decoration: line-through; }
.jkt-arq__x { width: 16px; height: 16px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 99px; background: transparent; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; }
.jkt-arq__x:hover { background: var(--negativo-fundo); color: var(--crit); }
.jkt-arq-in { padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.jkt-arq-in::file-selector-button { margin-right: 10px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.jkt-arq-in::file-selector-button:hover { border-color: var(--line-2); color: var(--ink); }

/* Formulários e configurações */
.jkt-form2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jkt-erro { font-size: 12.5px; font-weight: 600; color: var(--crit-ink); }
.jkt-erro[hidden] { display: none; }
.jkt-form-acoes { display: flex; gap: 8px; }
.jkt-form-acoes .jk-btn--primary { flex: 1; justify-content: center; }
.jkt-cfg { display: grid; gap: 22px; }
.jkt-cfg__t { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jkt-cfg__ajuda { margin: 3px 0 10px; font-size: 12px; color: var(--ink-3); }
.jkt-cfg__lista { display: grid; gap: 6px; }
.jkt-cfg__item { gap: 8px; padding: 6px 8px 6px 6px; }
.jkt-cfg__nome { flex: 1; min-width: 0; }
.jkt-cfg__nome .jk-input { padding: 7px 10px; font-weight: 600; }
.jkt-cfg__dest { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.jkt-cfg__dest input { accent-color: var(--grafite); }
.jkt-cfg__uso { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
/* Conta do site ligada a quem é da equipe (Configurações > Equipe). */
.jkt-cfg__conta .jk-input { padding: 6px 8px; font-size: 11.5px; max-width: 200px; }
.jkt-cfg__add { display: flex; gap: 8px; margin-top: 8px; }
.jkt-cfg__add .jk-input { border-style: dashed; }
/* Enquanto o bloco grava (sem recarregar a tela), ele para de aceitar clique. */
.jkt-cfg__sec.is-gravando { opacity: .55; pointer-events: none; }
/* [hidden] sozinho não vence o display do .jk-alert. */
#jkt-cfg-aviso[hidden] { display: none; }
#jkt-cfg-aviso { margin-bottom: 14px; }

@media (max-width: 760px) {
  /* A linha vira cartão: idade à esquerda, título por cima, o resto numa
     fileira que quebra — como no protótipo. */
  table.jkt-lista thead { display: none; }
  table.jkt-lista, table.jkt-lista tbody { display: block; }
  table.jkt-lista tbody tr.jkt-linha { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 6px 12px 62px; }
  table.jkt-lista tbody tr.jkt-linha[hidden] { display: none; }
  table.jkt-lista tbody tr.jkt-linha > td { display: block; padding: 0; }
  table.jkt-lista tbody tr.jkt-linha > td:first-child { position: absolute; left: 10px; top: 12px; box-shadow: none; }
  table.jkt-lista tbody tr.jkt-linha > td:nth-child(2) { flex: 1 0 100%; }
  table.jkt-lista tbody tr.is-atrasada { box-shadow: inset 3px 0 0 var(--crit); }
  table.jkt-lista .jkt-prazo small { display: inline; margin-left: 5px; }
  /* No celular ele ocupa a tela inteira. */
  .jk-modal.jkt-central { padding: 0; }
  .jkt-central .jk-modal__box { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  .jkt-editor .ql-editor { min-height: 200px; }
  .jkt-dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .jkt-form2 { grid-template-columns: minmax(0, 1fr); }
  .jkt-ideia { flex-direction: column; }
  .jkt-arq span { max-width: 62vw; }
  .jkt-cfg__item { flex-wrap: wrap; }
  /* O nome ganha a linha inteira; selo, destaque e lixeira descem. */
  .jkt-cfg__nome { flex-basis: 100%; }
}

/* =========================================================================
   Mapa Interativo (.jkm-*) — Rodolfo, 23/09/2026
   Os 390 municípios do RN e da Paraíba em SVG. O desenho e os números são
   arquivo estático; o que muda aqui é a cor de cada município.
   ========================================================================= */
.jkm-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
/* Altura vinda da janela, com o desenho encaixado dentro dela: o modo "os dois"
   é mais alto que largo, e sem teto ele empurrava a página para 1,7 mil pixels. */
.jkm-tela { padding: 6px; position: relative; overflow: hidden;
  height: clamp(420px, calc(100vh - 300px), 760px); }
/* user-select: none porque o mapa se arrasta com o mouse, e arrastar por cima
   de texto SELECIONA o texto — com a regra ::selection do painel, que pinta de
   vermelho, os nomes das cidades ficavam com tarja vermelha atrás. */
.jkm-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; }
.jkm-svg.is-arrastando { cursor: grabbing; }
/* O mapa se move como imagem durante o arrasto, o zoom e os voos (transform do
   CSS, pela placa de vídeo) e só é redesenhado no fim do movimento. */
.jkm-svg { transform-origin: 0 0; }
.jkm-mun { stroke: #fff; stroke-linejoin: round; cursor: pointer; }
.jkm-mun.is-fora { display: none; }
.jkm-alto use { pointer-events: none; }
.jkm-levantado { fill: none; stroke: var(--ink); stroke-width: 1.1;
  filter: drop-shadow(0 3px 5px rgba(20, 20, 26, .4)); }
.jkm-escolhido { fill: none; stroke: var(--grafite); stroke-width: 1.6;
  filter: drop-shadow(0 5px 9px rgba(20, 20, 26, .45)); }
/* A cidade sede do filtro de distância: contorno tracejado e um pino no meio.
   A espessura e o raio vêm do JS, para ficarem do mesmo tamanho em qualquer zoom. */
.jkm-sede-marca { fill: none; stroke: var(--grafite); pointer-events: none; }
.jkm-sede-pino { fill: var(--grafite); stroke: #fff; pointer-events: none; }
/* Divisa de estado em grafite; entre municípios, branco (.jkm-mun). */
.jkm-contorno { fill: none; stroke: var(--grafite); stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.jkm-contorno.is-fora { display: none; }
/* Cada estado baixado tem o próprio grupo: desmarcar esconde o grupo inteiro. */
.jkm-est.is-fora { display: none; }
/* Nome de cidade SEM contorno branco (Rodolfo, 23/09/2026). Para continuar
   legível em cima do vermelho e do cinza-escuro das marcações, há uma segunda
   camada de nomes em branco, recortada pelos municípios escuros: cada pedaço
   de letra fica da cor que contrasta com o que está embaixo dele. */
/* Peso normal para todos; negrito só nas cidades com marcação (Rodolfo, 23/09/2026). */
.jkm-nomes { pointer-events: none; font-weight: 400; fill: var(--texto-secundario); text-anchor: middle; }
.jkm-nomes text.is-marcada { font-weight: 700; }
.jkm-nomes--claros { fill: #fff; }
.jkm-nomes text.is-fora { display: none; }
/* A dica fica por cima do pé do mapa e não pode engolir o toque: o dedo que
   caísse nela não chegava ao mapa, e a pinça não começava (23/09/2026). */
.jkm-dica { position: absolute; left: 14px; bottom: 12px; font-size: 11.5px; color: var(--ink-3);
  background: rgba(255, 255, 255, .82); padding: 4px 9px; border-radius: var(--r-pill); pointer-events: none; }
.jkm-zoom { position: absolute; right: 14px; top: 14px; display: grid; gap: 5px; }
.jkm-zoom button { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 9px; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink-2);
  cursor: pointer; box-shadow: var(--shadow-sm); display: grid; place-items: center; padding: 0; }
.jkm-zoom button:hover { border-color: var(--line-2); }
.jkm-zoom .jkm-zoom__cheia { margin-top: 5px; }
.jkm-flutua { position: absolute; pointer-events: none; z-index: 4; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap;
  transform: translate(-50%, -140%); opacity: 0; transition: opacity .1s; }
.jkm-flutua.is-ver { opacity: 1; }
.jkm-flutua small { display: block; font-weight: 500; opacity: .72; }
.jkm-carregando { display: grid; place-content: center; height: 100%; gap: 8px; text-align: center;
  color: var(--ink-3); font-size: 13px; }
/* "Carregando 3 estados…" enquanto os arquivos dos estados chegam. */
.jkm-baixando { position: absolute; left: 14px; top: 14px; z-index: 3; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.jkm-baixando.is-erro { background: var(--negativo); }

/* A barra: estados, busca, filtro de população e a legenda com as contagens.
   Tudo à vista — o filtro já morou atrás de um botão "Ajustes" e ninguém achava. */
.jkm-barra { padding: 12px 14px; margin-bottom: 14px; display: grid; gap: 10px; }
.jkm-filtros { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.jkm-filtros #jkm-busca { width: 220px; }
.jkm-campo input[type="number"] { width: 136px; }
.jkm-campo input[type="color"] { width: 46px; height: 37px; padding: 2px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }

/* Lista suspensa dos estados: o botão diz o que está marcado, as caixas de
   marcar ficam dentro — cabe um estado ou vinte sem poluir a barra. */
.jkm-drop { position: relative; }
.jkm-drop__bt { width: 240px; text-align: left; cursor: pointer; position: relative; padding-right: 30px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jkm-drop__bt::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); }
.jkm-drop__bt[aria-expanded="true"] { border-color: var(--grafite); }
.jkm-drop__lista { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 5px; display: grid; gap: 2px; max-height: 300px; overflow: auto; }
.jkm-drop__item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--ink); }
.jkm-drop__item:hover { background: var(--surface-2); }
.jkm-drop__item input { accent-color: var(--grafite); width: 15px; height: 15px; flex: none; margin: 0; }
.jkm-drop__bt--reg { width: 190px; }
.jkm-drop__bt--nota { width: 250px; }   /* cabe o maior texto: "Entre 50 e 70 ou entre 80 e 100" */
/* Estados agrupados pela região (Brasil inteiro: 27), com "Marcar todos" no topo. */
.jkm-drop__lista--uf { max-height: 380px; min-width: 260px; }
.jkm-drop__todos { border: 0; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12.5px;
  font-weight: 700; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.jkm-drop__todos:hover { background: var(--surface-3); }
.jkm-drop__titulo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: 9px 10px 3px; }
.jkm-drop__vazio { font-size: 12.5px; color: var(--ink-3); padding: 8px 10px; white-space: nowrap; }

.jkm-legenda { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.jkm-barra .jkm-legenda { border-top: 1px solid var(--line); padding-top: 10px; }
.jkm-legenda .jkm-legenda__conta { color: var(--ink); font-weight: 600; }
.jkm-legenda__conta:empty { display: none; }
.jkm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.jkm-legenda i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .14); }
.jkm-legenda b { font-variant-numeric: tabular-nums; }
.jkm-legenda span[hidden] { display: none; }
.jkm-joonker { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); cursor: pointer; }
.jkm-joonker input { accent-color: var(--grafite); width: 15px; height: 15px; margin: 0; }
.jkm-campo--sede input { width: 200px; }

/* Pop-up do município (Rodolfo, 23/09/2026): quase a tela toda, por cima do mapa,
   com os cinco grupos de números e o rodapé de cada um (período e data da carga).
   Os botões de marcar e de cidade sede ficam no topo. */
.jkmp { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.jkmp[hidden] { display: none; }
html.jkmp-aberto { overflow: hidden; }
/* O espaço da barra de rolagem fica reservado nesta tela: abrir o pop-up (que trava a
   rolagem) não muda a largura do mapa atrás, e ele não se redesenha à toa. */
html:has(#jkm-painel) { scrollbar-gutter: stable; }
.jkmp__veu { position: absolute; inset: 0; background: rgba(22, 22, 26, .52); }
.jkmp__caixa { position: relative; width: 95vw; height: 94vh; max-width: 1480px; background: var(--plane);
  border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); display: flex; flex-direction: column; overflow: hidden; }
.jkmp__topo { background: var(--surface); border-bottom: 1px solid var(--line); padding: 18px 24px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: start; flex: none; }
.jkmp__id { min-width: 0; }
.jkmp__nome { font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 2px 0 0; }
.jkmp__selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jkmp-selo { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.jkmp-selo b { color: var(--ink); font-weight: 800; }
.jkmp-selo.is-regic { background: var(--brand-wash); border-color: var(--line-2); color: var(--brand-ink); }
.jkmp-selo.is-regic b { color: var(--brand-ink); }
.jkmp__acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.jkmp__acoes .jkm-marca { padding: 8px 12px; }
.jkmp__corpo { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 28px; }
.jkmp-carregando { padding: 40px 0; text-align: center; color: var(--ink-3); font-weight: 600; }
.jkmp-nd { color: var(--ink-3); }

.jkmp-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.jkmp-g-4 { grid-column: span 4; }
.jkmp-g-8 { grid-column: span 8; }
.jkmp-g-12 { grid-column: span 12; }
.jkmp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; min-width: 0; }
.jkmp-card__cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px 4px; }
.jkmp-card__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-wash); color: var(--ink-2);
  display: grid; place-items: center; flex: none; }
.jkmp-card h3 { font-size: 14.5px; font-weight: 800; letter-spacing: -.005em; margin: 0; }
.jkmp-card__miolo { padding: 10px 18px 16px; flex: 1; }
.jkmp-card__rodape { border-top: 1px dashed var(--line); padding: 9px 18px 11px; font-size: 11px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 4px 16px; background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }
.jkmp-card__rodape b { color: var(--ink-2); font-weight: 700; }

.jkmp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.jkmp-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; }
.jkmp-kpi dt { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.jkmp-kpi dd { font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin: 2px 0 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
.jkmp-kpi small { display: block; font-size: 11.5px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
/* Destaque sem a marca (27/09/2026): branco com borda mais forte, no meio dos
   cinzas sutis dos outros números. */
.jkmp-kpi.is-destaque { background: var(--surface); border-color: var(--line-2); }
.jkmp-kpi.is-destaque dd { color: var(--ink); }

/* Renda circulante em duas naturezas (Rodolfo, 24/09/2026): cada uma numa caixa com
   rótulo — a garantida e datada em tom da marca, a de mercado em cinza — e os
   indicadores gerais soltos embaixo. Dentro das caixas os números ficam em fundo branco. */
.jkmp-rgrupo { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
/* A garantida em --dado-3 (categoria de dado, não marca — 27/09/2026). */
.jkmp-rgrupo.is-garantida { background: color-mix(in srgb, var(--dado-3) 6%, var(--surface)); border-color: color-mix(in srgb, var(--dado-3) 28%, transparent); }
.jkmp-rgrupo.is-mercado { background: var(--surface-2); }
.jkmp-rgrupo__tit { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.jkmp-rgrupo__tit::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ink-3); flex: none; }
.jkmp-rgrupo.is-garantida .jkmp-rgrupo__tit { color: var(--dado-3); }
.jkmp-rgrupo.is-garantida .jkmp-rgrupo__tit::before { background: var(--dado-3); }
.jkmp-rgrupo .jkmp-kpi { background: var(--surface); }
.jkmp-rgrupo .jkmp-kpis, .jkmp-rgerais { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.jkmp-linhas { display: grid; }
.jkmp-linha { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.jkmp-linha:last-child, .jkmp-linha.is-seca { border-bottom: 0; }
.jkmp-linha.is-seca { padding: 0; }
.jkmp-linha > span { color: var(--ink-2); font-size: 13px; }
.jkmp-linha > b { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.jkmp-linha > b small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* Ícone "i" no canto de cima, à direita, de uma linha (Identificação, 24/09/2026). A lista
   se prende à linha e sai logo abaixo do ícone; a dica é posicionada pelo script dentro da
   tela (embaixo, em cima ou encostada na borda) e não pega o mouse. */
.jkmp-linha.tem-info { position: relative; }
.jkmp-linha.tem-info > b { margin-left: auto; }
.jkmp-info { flex: none; margin-left: -4px; }
.jkmp-info__btn { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -2px; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.jkmp-info__btn:hover, .jkmp-info__btn[aria-expanded="true"], .jkmp-info.is-mostra .jkmp-info__btn { color: var(--ink); }
.jkmp-info__btn:focus-visible { outline: 2px solid var(--grafite); outline-offset: 1px; }
.jkmp-balao { position: absolute; right: 0; top: 34px; z-index: 5; width: min(100%, 380px); box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 22px 48px -14px rgba(0, 0, 0, .38); text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-2); }
.jkmp-balao.is-dica { display: none; position: fixed; right: auto; top: 0; left: 0; pointer-events: none; padding: 12px 14px; line-height: 1.45; }
.jkmp-info.is-mostra .is-dica { display: block; }
.jkmp-balao p { margin: 0; }
.jkmp-balao__tit { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 4px; }
.jkmp-niveis { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 1px; }
.jkmp-niveis li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; border-radius: 6px; }
.jkmp-niveis li.is-atual { background: var(--brand-wash); color: var(--brand-ink); font-weight: 800; }
.jkmp-niveis li span { min-width: 0; }
.jkmp-niveis em { font-style: normal; text-align: right; min-width: 0; }

.jkmp-balao.is-pop { display: flex; flex-direction: column; max-height: min(420px, 62vh); overflow: hidden; }
.jkmp-balao.is-pop[hidden] { display: none; }
.jkmp-pop__cab { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); flex: none; }
.jkmp-pop__cab b { font-size: 13px; font-weight: 800; color: var(--ink); }
.jkmp-pop__n { padding: 1px 8px; border-radius: var(--r-pill); background: var(--brand-wash); color: var(--brand-ink); font-size: 11.5px; font-weight: 800; }
.jkmp-pop__x { margin-left: auto; width: 28px; height: 28px; }
.jkmp-pop__rolagem { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.jkmp-pop__rolagem:focus { outline: none; }
.jkmp-pz__cols { position: sticky; top: 0; display: flex; justify-content: space-between; padding: 7px 14px 5px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.jkmp-pz { list-style: none; margin: 0; padding: 2px 0 4px; }
.jkmp-pz li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
.jkmp-pz li:last-child { border-bottom: 0; }
.jkmp-pz li span { min-width: 0; color: var(--ink); font-weight: 600; }
.jkmp-pz li b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Balão do arranjo: textos antes e depois da lista, o município da tela em destaque e o total. */
.jkmp-pop__txt { margin: 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.jkmp-pz li.is-este { background: var(--brand-wash); }
.jkmp-pz li.is-este span, .jkmp-pz li.is-este b { color: var(--brand-ink); font-weight: 800; }
.jkmp-pz__total { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; background: var(--surface-2);
  border-top: 1.5px solid var(--grafite); border-bottom: 1px solid var(--line); font-weight: 800; color: var(--ink); }
.jkmp-pz__total b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ligação dividida: marca discreta com o nome do outro polo, na mesma linha. */
.jkmp-pz li i { display: inline-block; max-width: 100%; margin-left: 8px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px;
  font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--ink-3); vertical-align: middle; }

.jkmp-sub { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 8px; }
/* A barra não corta mais o que passa dela (a dica do número sai para cima): os cantos
   arredondados ficam no primeiro e no último pedaço. */
.jkmp-idades { display: flex; height: 30px; border-radius: 8px; }
.jkmp-idades span { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; position: relative; outline: none; }
.jkmp-idades span:first-child { border-radius: 8px 0 0 8px; }
.jkmp-idades span:last-child { border-radius: 0 8px 8px 0; }
.jkmp-idades span:hover, .jkmp-idades span:focus { filter: brightness(1.08); }
.jkmp-idades span:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
/* O número de pessoas da faixa, ao passar o mouse, tocar ou chegar pelo teclado. */
.jkmp-idades span::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 6px 10px;
  border-radius: 7px; box-shadow: var(--shadow); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 5; }
.jkmp-idades span.is-esq::after { left: 0; transform: none; }
.jkmp-idades span.is-dir::after { left: auto; right: 0; transform: none; }
.jkmp-idades span:hover::after, .jkmp-idades span:focus::after { opacity: 1; visibility: visible; }
/* O nome de cada faixa, embaixo do pedaço dela, na mesma largura. */
.jkmp-idades__rot { display: flex; margin-top: 7px; }
.jkmp-idades__rot span { flex: none; width: var(--w); min-width: 0; padding: 0 3px; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--ink-2); }
.jkmp-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.jkmp-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.jkmp-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.jkmp-regua { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.jkmp-regua i { display: block; height: 100%; border-radius: 99px; }

.jkmp-anos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jkmp-ano { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.jkmp-ano h4 { font-size: 12px; color: var(--ink-3); font-weight: 700; margin: 0; }
.jkmp-ano__barras { display: flex; align-items: flex-end; gap: 8px; height: 64px; margin-top: 22px; }
.jkmp-ano__barras div { flex: 1; border-radius: 6px 6px 2px 2px; position: relative; }
.jkmp-ano__barras div b { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 12px; }
/* Abertas × baixadas são categorias, não resultado: --dado-1 e --dado-2. */
.jkmp-ano__barras .is-aberta { background: var(--dado-1); }
.jkmp-ano__barras .is-baixada { background: var(--dado-2); }

/* Concorrência: as óticas mais antigas em atividade ao lado do "Abertas × baixadas"
   (Rodolfo, 24/09/2026). Cada linha: posição, nome, abertura e anos de atividade. */
.jkmp-conc2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
/* Todas as ativas: 10 linhas à vista e o resto rola, com o cabeçalho parado no alto. */
.jkmp-antigas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow-y: auto; max-height: 372px; }
.jkmp-antigas li { display: grid; grid-template-columns: calc(var(--dig, 2) * 1ch + 6px) minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline;
  padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jkmp-antigas li:last-child { border-bottom: 0; }
.jkmp-antigas li b { font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.jkmp-antigas .jkmp-antigas__at { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.jkmp-antigas__i { color: var(--ink-3); font-weight: 700; }
.jkmp-antigas li.jkmp-antigas__cab { position: sticky; top: 0; z-index: 1; background: var(--surface-2); padding: 6px 12px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.jkmp-antigas li.jkmp-antigas__cab .jkmp-antigas__at { color: var(--ink-3); font-weight: 800; }
/* Retirar ótica da contagem (Rodolfo, 24/09/2026): um X vermelho em cada linha para quem
   pode retirar, e a confirmação abre na própria linha. As retiradas ficam no botão ao
   lado do título da lista. */
.jkmp-antigas.is-retira li { grid-template-columns: calc(var(--dig, 2) * 1ch + 6px) minmax(0, 1fr) auto auto 22px; }
.jkmp-antigas__x { align-self: center; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 99px;
  margin-block: -2px; background: none; color: var(--ink-3); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
/* Retirar é ação destrutiva: neutra, o vermelho só no hover (27/09/2026). */
.jkmp-antigas__x:hover, .jkmp-antigas__x[aria-expanded="true"] { background: var(--negativo-fundo); color: var(--crit); }
.jkmp-antigas__x:focus-visible { outline: 2px solid var(--grafite); outline-offset: 1px; }
.jkmp-antigas__x:disabled { opacity: .35; cursor: default; background: none; color: var(--ink-3); }
.jkmp-antigas li.is-conf { background: var(--destaque-linha); }
.jkmp-conf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font-size: 12.5px; font-variant-numeric: normal; }
.jkmp-conf > span { flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.jkmp-conf__sim { background: var(--surface); border-color: var(--line); color: var(--ink); }
.jkmp-conf__sim:hover { background: var(--negativo-fundo); border-color: var(--crit); color: var(--crit); }
.jkmp-conf__sim:disabled { opacity: .7; cursor: default; }
.jkmp-sub--ret { display: flex; align-items: center; gap: 10px; position: relative; }
.jkmp-sub--ret .jkmp-info { margin-left: auto; }
.jkmp-sub--ret .jkmp-balao { top: calc(100% + 6px); text-transform: none; letter-spacing: normal; }
.jkmp-info__btn.is-texto { width: auto; height: auto; margin: 0; padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jkmp-info__btn.is-texto:hover, .jkmp-info__btn.is-texto[aria-expanded="true"] { color: var(--ink); border-color: var(--line-2); }
.jkmp-ret li { align-items: center; }
.jkmp-ret small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--ink-3); }

@media (max-width: 1100px) {
  .jkmp-g-4, .jkmp-g-8 { grid-column: span 12; }
  .jkmp-conc2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .jkmp__caixa { width: 100vw; height: 100%; max-width: none; border-radius: 0; }
  .jkmp__topo { padding: 14px 16px; grid-template-columns: minmax(0, 1fr); }
  .jkmp__acoes { justify-content: flex-start; }
  .jkmp__corpo { padding: 14px 12px 40px; }
  .jkmp-tres, .jkmp-anos { grid-template-columns: minmax(0, 1fr); }
  .jkmp-idades__rot { flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
  .jkmp-idades__rot span { width: auto; padding: 0; text-align: left; font-size: 12px; }
  .jkmp-idades__rot span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
  .jkmp-antigas { max-height: 560px; }
  .jkmp-antigas li { grid-template-columns: calc(var(--dig, 2) * 1ch + 4px) minmax(0, 1fr) auto; row-gap: 2px; }
  .jkmp-antigas .jkmp-antigas__at { grid-column: 2 / -1; text-align: left; font-weight: 600; color: var(--ink-2); }
  .jkmp-antigas li.jkmp-antigas__cab .jkmp-antigas__at { display: none; }
  .jkmp-antigas.is-retira li { grid-template-columns: calc(var(--dig, 2) * 1ch + 4px) minmax(0, 1fr) auto 22px; }
  .jkmp-antigas.is-retira .jkmp-antigas__at { grid-column: 2 / 4; }
  .jkmp-antigas.is-retira .jkmp-antigas__x { grid-column: 4; grid-row: 1; }
  .jkmp__x { position: absolute; top: 12px; right: 12px; }
  .jkmp__id { padding-right: 44px; }
  .jkmp-selo { border-radius: var(--r-sm); }
}
/* Tela baixa (celular deitado, janela curta): a caixa inteira rola, com o topo junto,
   senão o topo tomava a altura toda e nenhum número aparecia. */
@media (max-height: 560px) {
  .jkmp__caixa { overflow-y: auto; }
  .jkmp__corpo { flex: none; overflow: visible; }
}

/* Botões de marcar (no topo do pop-up) */
.jkm-marca { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  padding: 9px 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.jkm-marca i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .14); flex: none; }
.jkm-marca[aria-pressed="true"] { color: #fff; border-color: transparent; }
.jkm-marca:disabled { opacity: .55; cursor: default; }

/* Nesta casa o atributo [hidden] NÃO some sozinho: qualquer classe que declare
   display vence o estilo do navegador. Todo elemento .jkm-* que a tela esconde
   precisa da sua regra explícita — sem isto o mapa aparecia por cima do aviso
   de carregando, e o painel de ajustes nascia aberto. */
.jkm-svg[hidden], .jkm-zoom[hidden], .jkm-carregando[hidden], .jkm-drop__lista[hidden],
.jkm-dica[hidden], .jkm-baixando[hidden], .jkm-drop__grupo[hidden],
.jkm-drop__vazio[hidden], .jkm-drop__todos[hidden] { display: none; }

/* Tela cheia: o navegador põe #jkm-cheio (barra + mapa + painel) na tela toda
   e o JS liga .is-cheio. O mapa ocupa a sobra; o painel rola por dentro. */
.jkm-cheio.is-cheio { background: var(--plane); padding: 16px; box-sizing: border-box; height: 100vh;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.jkm-cheio.is-cheio .jkm-barra { margin-bottom: 0; flex: none; }
.jkm-cheio.is-cheio .jkm-palco { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.jkm-cheio.is-cheio .jkm-tela { height: auto; min-height: 0; }

@media (max-width: 900px) {
  .jkm-filtros #jkm-busca, .jkm-drop__bt { width: 100%; }
  .jkm-filtros > .jk-fld:not(.jkm-campo) { flex: 1 1 100%; }
  /* No celular o painel desce para baixo do mapa: em tela cheia a página rola. */
  .jkm-cheio.is-cheio { overflow: auto; }
  .jkm-cheio.is-cheio .jkm-palco { flex: none; grid-template-rows: none; }
  .jkm-cheio.is-cheio .jkm-tela { height: 70vh; }
}

/* ==== Nota de triagem do Mapa Interativo (Rodolfo, 24/09/2026) ============================
   A nota colore o mapa numa escala de um tom só; o "já atendido" é um pino escuro acima do
   nome; a lista do raio fica ao lado do mapa; o bloco da nota abre o pop-up do município. */
.jkm-legenda b.jkm-leg-grad { display: inline-block; width: 110px; height: 12px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .14); }
/* Anel branco de borda escura: não se confunde com o pino da sede (grafite, cheio). */
.jkm-legenda i.jkm-leg-pino { width: 11px; height: 11px; border-radius: 99px; background: #ffffff; border: 2.5px solid var(--grafite); box-sizing: border-box; }
.jkm-atendidos circle { fill: #ffffff; stroke: var(--grafite); pointer-events: none; }

/* A lista do raio: coluna ao lado do mapa, da mesma altura, rolando por dentro. */
.jkm-palco.tem-raio { grid-template-columns: minmax(0, 1fr) 330px; }
.jkm-raio { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: clamp(420px, calc(100vh - 300px), 760px); }
.jkm-raio[hidden] { display: none; }
.jkm-raio__cab { flex: none; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.jkm-raio__cab b { color: var(--ink); font-weight: 800; }
.jkm-raio__cab span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.jkm-raio__rolagem { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.jkm-raio__lista { list-style: none; margin: 0; padding: 0; }
.jkm-raio__item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 8px 14px;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.jkm-raio__item:hover { background: var(--surface-2); }
.jkm-raio__item:focus-visible { outline: 2px solid var(--grafite); outline-offset: -2px; }
.jkm-raio__nota { display: grid; place-items: center; height: 30px; border-radius: 8px; font-size: 13px; font-weight: 800;
  color: var(--texto); font-variant-numeric: tabular-nums; border: 1px solid rgba(0, 0, 0, .08); }
.jkm-raio__nota.is-clara { color: #ffffff; }
.jkm-raio__nome { min-width: 0; font-size: 13px; line-height: 1.35; }
.jkm-raio__nome b { font-weight: 700; overflow-wrap: anywhere; }
.jkm-raio__nome em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.jkm-raio__nome small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.jkm-raio__tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .03em; vertical-align: 1px; white-space: nowrap; }
.jkm-raio__tag.is-atend { background: var(--grafite); color: #ffffff; }
.jkm-raio__tag.is-excecao { border: 1px dashed var(--aviso-borda); color: var(--aviso); background: var(--aviso-fundo); }
.jkm-raio__sub { padding: 10px 14px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.jkm-raio__lista.is-fora .jkm-raio__item { color: var(--ink-3); }
.jkm-raio__vazio { margin: 0; padding: 18px 14px; font-size: 12.5px; color: var(--ink-3); }
.jkm-cheio.is-cheio .jkm-raio { height: auto; min-height: 0; }

/* O bloco da nota, no alto do pop-up. */
.jkmp-nota__topo { position: relative; display: flex; align-items: center; gap: 16px; }
.jkmp-nota__valor { flex: none; display: flex; align-items: baseline; gap: 6px; }
.jkmp-nota__valor b { display: inline-block; min-width: 64px; padding: 6px 12px; border-radius: 12px; text-align: center; font-size: 30px;
  font-weight: 800; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; border: 1px solid rgba(0, 0, 0, .08); }
.jkmp-nota__valor b.is-clara { color: #ffffff; }
.jkmp-nota__valor b.is-fora { font-size: 16px; padding: 10px 14px; color: var(--ink); }
.jkmp-nota__valor span { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.jkmp-nota__lado { flex: 1; min-width: 0; }
.jkmp-nota__aviso { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.jkmp-nota__selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.jkmp-nota__selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.jkmp-nota__selo.is-atend { background: var(--grafite); color: #ffffff; }
.jkmp-nota__selo.is-atend i { width: 9px; height: 9px; border-radius: 99px; background: #ffffff; border: 2px solid var(--grafite); box-sizing: border-box; box-shadow: 0 0 0 1px #ffffff; }
.jkmp-nota__selo.is-excecao { border: 1px dashed var(--aviso-borda); color: var(--warn-ink); background: var(--aviso-fundo); }
.jkmp-nota__topo > .jkmp-info { align-self: flex-start; }
.jkmp-nota__topo .jkmp-balao { top: calc(100% + 6px); width: min(100%, 620px); }
.jkmp-nota__comps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.jkmp-nota__comp { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; min-width: 0; }
.jkmp-nota__comp.is-regra { border-style: dashed; border-color: var(--warn); }
.jkmp-nota__comp-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.jkmp-nota__comp-cab b { font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.jkmp-nota__pts { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.jkmp-nota__comp p { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.jkmp-nota__comp small { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.jkmp-nota__comp.is-regra small { color: var(--warn-ink); }
.jkmp-nota__fora { margin-top: 12px; }
/* O balão da conta. */
.jkmp-balao .jkmp-nota__formula { margin: 0 14px 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 12px;
  font-weight: 700; color: var(--ink); line-height: 1.45; }
.jkmp-nota__exp { padding: 2px 14px 10px; border-top: 1px solid var(--line); }
.jkmp-nota__exp .jkmp-balao__tit { color: var(--ink); }
.jkmp-nota__exp .jkmp-niveis { margin: 0 0 6px; }
.jkmp-nota__exp .jkmp-niveis em { flex: none; white-space: nowrap; }
.jkmp-pop__n { white-space: nowrap; }
.jkmp-balao .jkmp-nota__medida { margin: 0 0 6px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.jkmp-nota__extit { margin: 6px 0 3px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.jkmp-balao .jkmp-nota__obs { margin: 4px 0 0; padding: 6px 8px; border-radius: var(--r-sm); background: var(--aviso-fundo);
  color: var(--warn-ink); font-size: 11.5px; line-height: 1.4; box-shadow: inset 0 0 0 1px var(--aviso-borda); }

@media (max-width: 1100px) {
  .jkmp-nota__comps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .jkm-palco.tem-raio { grid-template-columns: minmax(0, 1fr); }
  .jkm-raio { height: auto; max-height: 60vh; }
}
@media (max-width: 640px) {
  .jkmp-nota__topo { flex-wrap: wrap; gap: 10px 12px; }
  .jkmp-nota__lado { flex: 1 1 100%; order: 3; }
  .jkmp-nota__topo > .jkmp-info { margin-left: auto; }
  .jkmp-nota__comps { grid-template-columns: minmax(0, 1fr); }
}

/* ==== Monitoramento do Sistema (Configuração), Rodolfo, 24/09/2026 ====================
   Velocímetros, gráfico de CPU e memória, banco/serviços/acessos, rotinas e espaço em
   disco. Tudo com prefixo mon-; ver public/config_monitoramento.php. */
.mon-sec { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }
.mon-pulso { width: 8px; height: 8px; border-radius: 99px; background: #fff; display: inline-block; margin-right: 7px; position: relative; top: -1px; }
#mon-vivo[aria-pressed="true"] .mon-pulso { animation: mon-pulso 1.6s ease-in-out infinite; }
#mon-vivo:not([aria-pressed="true"]) .mon-pulso { background: var(--ink-3); }
@keyframes mon-pulso { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
#mon-vivo[aria-pressed="true"] { background: var(--grafite); border-color: var(--grafite); color: #fff; }

/* Faixa de status + sinais */
.mon-status { margin-bottom: 4px; }
.mon-status__t { font-weight: 800; font-size: 13.5px; }
.mon-status ul { margin: 6px 0 0; padding-left: 18px; }
.mon-status li { margin: 2px 0; }
.mon-sinais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mon-sinal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface);
  border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.mon-sinal i { width: 7px; height: 7px; border-radius: 99px; background: var(--good); display: block; }
.mon-sinal.is-warn i { background: var(--warn); } .mon-sinal.is-crit i { background: var(--crit); }

/* Velocímetros */
.mon-gauge { display: flex; flex-direction: column; align-items: center; padding: 6px 12px 16px; }
.mon-gauge svg { width: 100%; max-width: 210px; height: auto; display: block; }
.mon-gauge__v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mon-gauge__sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; text-align: center; }
.mon-gauge__v.is-good { color: var(--good-ink); } .mon-gauge__v.is-warn { color: var(--warn-ink); } .mon-gauge__v.is-crit { color: var(--crit-ink); }
.mon-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); margin-left: auto; }

/* Gráfico */
.mon-graf { position: relative; }
.mon-graf svg { width: 100%; height: auto; display: block; }
.mon-graf__dica { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 11.5px; padding: 7px 10px; border-radius: 9px;
  width: max-content; max-width: 100%; transform: translate(-50%, -110%); box-shadow: var(--shadow); display: none; font-variant-numeric: tabular-nums; }
.mon-graf__dica b { font-weight: 800; }
.mon-leg { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.mon-leg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
#mon-janela { flex-wrap: nowrap; }
#mon-janela .jk-chip { white-space: nowrap; }

/* Mini números */
.mon-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mon-mini { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.mon-mini dt { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.mon-mini dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mon-mini small { display: block; font-size: 11px; color: var(--ink-2); font-weight: 600; margin-top: 1px; }
.mon-sub2 { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
.mon-barras { display: grid; gap: 7px; }
.mon-barra { display: grid; grid-template-columns: minmax(0, 1fr) 110px 62px; gap: 10px; align-items: center; font-size: 12px; }
.mon-barra span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.mon-barra .jk-share__track { height: 7px; }
.mon-barra b { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabelas */
.mon-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--good); margin-right: 6px; }
.mon-dot.is-warn { background: var(--warn); } .mon-dot.is-crit { background: var(--crit); } .mon-dot.is-off { background: var(--line-2); }
.mon-vazio { padding: 22px 4px; text-align: center; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.mon-tab table.jk-t td small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* Disco */
.mon-disco__nums { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin-bottom: 12px; }
.mon-disco__nums div { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.mon-disco__nums b { display: block; font-size: 22px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mon-disco__nums .is-libera b { color: var(--ink); }
.mon-pilha { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--surface-3); }
.mon-pilha span { display: block; height: 100%; min-width: 2px; }
.mon-pilha span + span { box-shadow: -1px 0 0 var(--surface); }
.mon-grp { cursor: pointer; }
.mon-grp td:first-child { font-weight: 800; color: var(--ink); }
.mon-grp .mon-seta { display: inline-block; transition: transform .15s; margin-right: 6px; color: var(--ink-3); }
.mon-grp.is-aberto .mon-seta { transform: rotate(90deg); }
.mon-filho td:first-child { padding-left: 34px; color: var(--ink-2); }
.mon-filho[hidden] { display: none; }
.mon-cat { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.mon-caminho { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ink-3); }
.mon-obs { font-size: 12px; color: var(--ink-2); }
.jk-badge.mon-libera { white-space: nowrap; }

@media (max-width: 1240px) {
  .mon-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mon-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mon-trio > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) { #mon-trio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mon-gauges { grid-template-columns: minmax(0, 1fr); }
  .mon-minis { grid-template-columns: minmax(0, 1fr); }
  .mon-barra { grid-template-columns: minmax(0, 1fr) 70px 56px; }
  .mon-col-obs { display: none; }
}

/* ---- Configuração › Nota do Mapa (config_nota_mapa.php, 24/09/2026) ------- */
.jkn-aviso { margin-bottom: 16px; }
.jkn-erros { margin: 6px 0 0 18px; list-style: disc; display: grid; gap: 3px; }
.jkn-resumo, .jkn-comp { margin-bottom: 16px; }
.jkn-formula { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.jkn-pesos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.jkn-parte { font-size: 11.5px; color: var(--ink-2); padding: 4px 9px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); max-width: 100%; overflow-wrap: anywhere; }
.jkn-parte b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jkn-parte.is-fora { color: var(--ink-3); border-style: dashed; }
.jkn-parte.is-fora b { color: var(--ink-3); font-weight: 600; }
.jkn-desligado { flex: none; font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line-2); white-space: nowrap; }
.jkn-desligado[hidden] { display: none; }
.jkn-pesos.is-errada .jkn-parte { border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.jkn-comp .jk-card__head { justify-content: space-between; flex-wrap: wrap; }
.jkn-comp__tit { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jkn-comp__n { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--ink); color: var(--surface); }
.jkn-peso { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.jkn-peso .jk-input { width: 84px; }
.jkn-peso .jk-input.is-errada { border-color: var(--crit); }
.jkn-comp__corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; }
.jkn-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.jkn-sub { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.jkn-col > .jkn-sub:not(:first-child) { margin-top: 8px; }
.jkn-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 104px; gap: 10px; }
textarea.jk-input.jkn-curta { min-height: 56px; }
.jkn-num { text-align: right; font-variant-numeric: tabular-nums; }
table.jkn-faixas th, table.jkn-faixas td { padding: 6px 8px; vertical-align: middle; }
table.jkn-faixas tbody tr:hover { background: transparent; }
.jkn-faixas td:first-child { width: 132px; }
.jkn-faixas td.num { width: 78px; }
.jkn-faixas .jkn-num { padding: 7px 9px; }
.jkn-faixas .jkn-pts { width: 64px; }
.jkn-sem { display: block; font-size: 12px; color: var(--ink-3); text-align: right; padding-right: 10px; }
.jkn-texto { font-size: 12.5px; color: var(--ink-2); }
.jkn-acao { width: 34px; text-align: right; }
.jkn-tira { width: 26px; height: 26px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent;
  color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer; }
.jkn-tira:hover { background: var(--negativo-fundo); border-color: color-mix(in srgb, var(--crit) 30%, transparent); color: var(--crit); }
.jkn-faixa.is-errada .jkn-texto { color: var(--crit-ink); }
.jkn-faixa.is-errada [data-ate] { border-color: var(--crit); }
.jkn-mais { justify-self: start; }
.jkn-regra { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.jkn-regra__quando { font-size: 12px; font-weight: 700; color: var(--ink); }
.jkn-regra__campos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.jkn-regra__pts { display: grid; gap: 8px; justify-items: end; }
.jkn-regra__pts > label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.jkn-regra__pts .jkn-pts { width: 64px; }
.jkn-regra__pts .jkn-pts:disabled { opacity: .45; }
label.jkn-semnota { font-weight: 500; max-width: 170px; text-align: right; line-height: 1.3; cursor: pointer; }
.jkn-salvar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow); }
.jkn-salvar > span { font-size: 12px; color: var(--ink-2); }
.jkn-salvar__acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.jkn-hist .jk-t td.num { white-space: nowrap; }
.jkn-vazio { font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .jkn-comp__corpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .jkn-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jkn-linha .jkn-fld--casas { grid-column: 1 / -1; }
  .jkn-regra__campos { grid-template-columns: minmax(0, 1fr); }
  .jkn-regra__pts { justify-items: start; }
  label.jkn-semnota { text-align: left; max-width: none; }
  table.jkn-faixas th, table.jkn-faixas td { padding: 5px 4px; }
  table.jkn-faixas thead th { white-space: normal; }
  .jkn-faixas td:first-child { width: 96px; }
  .jkn-faixas [data-ate] { min-width: 88px; }
  .jkn-faixas .jkn-pts { width: 54px; }
  .jkn-faixas td.num { width: 62px; }
  .jkn-acao { width: 28px; }
  .jkn-texto { font-size: 12px; }
  .jkn-salvar { padding: 10px 12px; gap: 8px; }
  .jkn-salvar__acoes { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .jkn-salvar__acoes .jk-btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
}

/* ---- Joonker Academy › painel (config_academy_*.php, 24/09/2026) ---- */
/* Prefixo .jka- só do painel da Academy; o site (academy*.php) tem CSS próprio. */
.jka-volta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }
.jka-volta:hover { color: var(--ink); }
.jka-cabec { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Miniatura 16:9 (72×40): a mesma proporção da capa no site, para a lista
   mostrar o que o cartão vai mostrar. */
.jka-thumb { display: block; width: 72px; height: 40px; border-radius: 6px; background: var(--surface-3); overflow: hidden; flex: none; }
.jka-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jka-thumb--vazio { border: 1px solid var(--line); }
.jka-tit { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jka-tit a { font-weight: 600; color: var(--ink); }
.jka-tit a:hover { color: var(--brand-ink); text-decoration: underline; }
.jka-tit small { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.jka-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.jka-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jka-ordem { display: inline-flex; gap: 0; }
.jka-ordem form { display: inline; }
.jka-ordem .jk-btn { padding: 5px 7px; font-size: 12px; line-height: 1; }
table.jk-t td.jka-acoes { white-space: nowrap; }
/* A capa é 16:9: a prévia do upload segue a proporção em vez do quadrado padrão. */
.jka-upload .jk-upload__prev { width: 88px; height: 50px; }
.jka-upload .jk-upload__prev img { object-fit: cover; }
.jka-upload input[type=file] { font-size: 12.5px; max-width: 100%; min-width: 0; flex: 1; }
.jka-urlrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jka-urlrow .jk-input { flex: 1 1 260px; min-width: 0; }
.jka-urlrow .jk-btn { flex: none; }
.jka-prov { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.jka-prov:empty { display: none; }
.jka-prov.is-erro { color: var(--crit-ink); font-weight: 500; }
.jka-preview { position: relative; aspect-ratio: 16 / 9; max-width: 560px; border-radius: var(--r-md); overflow: hidden; background: #000; border: 1px solid var(--line); }
.jka-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Comentários e Perguntas */
.jka-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.jka-filtros form { margin-left: auto; }
.jka-filtros select.jk-input { width: auto; min-width: 220px; }
.jka-lista { display: grid; gap: 12px; }
.jka-com { padding: 14px 18px 16px; }
.jka-com__head { display: flex; align-items: flex-start; gap: 10px; }
.jka-com__linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jka-ava { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--grafite); overflow: hidden; }
.jka-ava img { width: 100%; height: 100%; object-fit: cover; }
.jka-ava--sm { width: 24px; height: 24px; border-radius: 8px; font-size: 9.5px; }
.jka-com__nome { font-weight: 600; font-size: 13px; }
.jka-com__quando { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.jka-tempo { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jka-com__onde { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.jka-com__onde a { color: var(--ink-2); font-weight: 600; }
.jka-com__onde a:hover { color: var(--brand-ink); text-decoration: underline; }
.jka-com__acoes { margin-left: auto; display: flex; gap: 4px; flex: none; }
.jka-com__texto { font-size: 13px; line-height: 1.5; margin-top: 10px; overflow-wrap: anywhere; white-space: normal; }
/* Resposta recuada sob a raiz: o recuo é o que diz "isto responde aquilo". */
.jka-resp { margin: 12px 0 0 40px; padding: 10px 12px; border-left: 2px solid var(--line-2); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.jka-resp + .jka-resp { margin-top: 8px; }
.jka-resp .jka-com__head { align-items: center; }
.jka-resp .jka-com__texto { margin-top: 6px; font-size: 12.5px; }
.jka-responder { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0 40px; }
.jka-responder textarea.jk-input { min-height: 44px; flex: 1; }
.jka-responder .jk-btn { flex: none; }

/* Acompanhamento */
.jka-stats { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.jka-stats .jk-stat__value small, .jka-nums .jk-stat__value small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.jka-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jka-pessoa b { font-weight: 600; white-space: nowrap; display: block; }
.jka-pessoa small { display: block; font-size: 11px; color: var(--ink-3); }
table.jk-t th.jka-vcol, table.jk-t td.jka-vcol { text-align: center; padding-left: 4px; padding-right: 4px; width: 26px; }
/* Um quadradinho por vídeo: verde concluiu, âmbar começou, cinza não abriu. */
.jka-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--line); vertical-align: middle; }
.jka-dot--ok { background: var(--good); border-color: var(--good); }
.jka-dot--parcial { background: var(--warn); border-color: var(--warn); }

/* Configurações */
.jka-col { display: grid; gap: 16px; align-content: start; }
.jka-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.jka-nums .jk-stat:nth-child(odd) { border-right: 1px solid var(--line); }
.jka-nums .jk-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.jka-atencao { color: var(--warn-ink); }
.jka-texto { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 12px; }
.jka-provs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jka-provs li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-size: 12.5px; }
.jka-provs b { font-weight: 700; }
.jka-provs span { color: var(--ink-2); }

@media (max-width: 900px) {
  .jka-stats { grid-template-columns: minmax(0, 1fr); }
  .jka-resp, .jka-responder { margin-left: 0; }
  .jka-filtros form { margin-left: 0; width: 100%; }
  .jka-filtros select.jk-input { width: 100%; }
}
@media (max-width: 560px) {
  .jka-nums { grid-template-columns: minmax(0, 1fr); }
  .jka-nums .jk-stat:nth-child(odd) { border-right: 0; }
  .jka-nums .jk-stat:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* Público "Pessoas escolhidas" da trilha (25/09/2026): a lista de contas por
   equipe, com "marcar todos". A caixa de fora não define display de propósito:
   o JS a esconde com o atributo hidden quando o público é outro. */
.jka-pessoas { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface-2); }
.jka-pessoas__t { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.jka-pessoas__grupo + .jka-pessoas__grupo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.jka-pessoas__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.jka-pessoas__cab b { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.jka-pessoas__cab .jk-btn { margin-left: auto; }
.jka-pessoas .jk-checkitem { background: var(--surface); }
.jka-pessoas .jk-checkitem small { color: var(--ink-3); font-weight: 500; font-size: 11px; margin-left: 2px; }
.jka-pessoas .jk-checkitem.is-sem-acesso { color: var(--texto-secundario); border-style: dashed; }

/* Categorias e capa vertical (25/09/2026): a lista das trilhas agrupada por
   categoria, o card das categorias e a prévia em pé do upload da capa 2:3. */
.jka-thumb--vertical { width: 40px; height: 60px; }
table.jk-t tr.jka-grupo td { padding: 14px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
table.jk-t tr.jka-grupo:hover { background: var(--surface-2); }
.jka-cats { display: grid; gap: 6px; }
.jka-cat { gap: 8px; padding: 6px 8px 6px 6px; }
.jka-cat__nome { flex: 1; min-width: 0; }
.jka-cat__nome .jk-input { padding: 7px 10px; font-weight: 600; }
.jka-cat__n { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.jka-cat__add { display: flex; gap: 8px; margin-top: 8px; }
.jka-cat__add .jk-input { border-style: dashed; }
.jka-upload--vertical .jk-upload__prev { width: 46px; height: 69px; }
@media (max-width: 560px) {
  .jka-cat { flex-wrap: wrap; }
  .jka-cat__nome { flex-basis: 100%; }
}

/* Banner da página inicial da Academy (Configurações, 26/09/2026): prévia larga. */
.jka-upload--banner .jk-upload__prev { width: 118px; height: 51px; }
.jka-upload--banner .jk-upload__prev img { object-fit: cover; }

/* Líderes e Mentores da Academy (26/09/2026): prévia quadrada da foto. */
.jka-upload--mentor .jk-upload__prev { width: 52px; height: 52px; border-radius: 12px; }
.jka-upload--mentor .jk-upload__prev img { object-fit: cover; }

/* =========================================================================
   Paleta (Rodolfo, 27/09/2026) — peças COMPARTILHADAS
   As regras abaixo valem só dentro de body.jk-paleta: o painel (layout_top.php)
   e, desde 28/09/2026, o site público da Champions (layout_public_top.php). A
   Academy carrega este mesmo arquivo e fica no visual de antes até o Rodolfo
   aprovar levar a paleta para lá. Quando for, estas regras sobem para as de
   cima e o prefixo sai.
   ========================================================================= */
/* Seleção de texto em grafite: vermelho por cima de número lê como prejuízo. */
body.jk-paleta ::selection { background: var(--grafite); color: #fff; }
/* Botão principal: marca sólida, sem brilho; o hover vem do --brand-dark. */
body.jk-paleta .jk-btn--primary { box-shadow: none; }
/* Campo: a borda e a cor do foco vêm dos tokens na própria regra .jk-input;
   aqui só sai o anel, que no painel não existe em campo. Selos e alertas
   também leem os tokens na regra de origem (com reserva para fora do painel). */
body.jk-paleta .jk-input:focus { box-shadow: none; }
/* Login do painel: fundo liso, cartão com a sombra discreta de cartão. */
body.jk-paleta .jk-auth { background: var(--fundo-pagina); }
body.jk-paleta .jk-authcard { box-shadow: var(--shadow); }
/* Toda caixinha e bolinha marcada do painel em grafite (as soltas, sem classe,
   saíam no azul do navegador). */
body.jk-paleta input[type="checkbox"], body.jk-paleta input[type="radio"] { accent-color: var(--grafite); }
/* A caixa de opção marcada perdeu a cor, não o peso da letra. */
body.jk-paleta .jk-checkitem:has(input:checked) { font-weight: 600; }
/* Hall da Fama: fora os valores em ouro, os textos ficam em branco cheio. */
body.jk-paleta .jk-hero--ouro .jk-hero__label, body.jk-paleta .jk-hero--ouro .jk-hero__stat span { opacity: 1; }
/* Iniciais na faixa do ecossistema: grafite sólido como os outros avatares,
   no painel e no site público. Na Academy, como antes. */
body.jk-paleta .jk-ecobar__ini { background: var(--grafite); }