/* ============================================================================
   Layout do Gervis no painel do Analytics (Rodolfo, 08/10/2026).
   ----------------------------------------------------------------------------
   Folha À PARTE de propósito: só o layout_top.php (painel) carrega, e tudo
   aqui depende do <body class="jk-gv">. O jk.css é dividido com o site público
   da Champions e com a Academy, e nenhum dos dois muda de cara.

   Duas metades:
   1. CASCA (lateral escura, topo com busca, cabeçalho da página): classes que
      só o layout_top.php usa, com o prefixo .jk-gv normal.
   2. PEÇAS (cartão, botão, campo, tabela…): o prefixo vai em :where(), que não
      soma peso. Assim cada regra daqui pesa o MESMO que a do jk.css que ela
      troca, e a regra própria de uma tela continua ganhando quando pesa MAIS
      ou mora no <style> da própria tela. ATENÇÃO: regra de tela que mora no
      jk.css com o MESMO peso perde, porque esta folha carrega depois — as
      três que caíam nisso estão repostas no fim deste arquivo —
      com prefixo normal, o selo e o campo de erro de várias telas perdiam a
      cor (armadilha de 27/09/2026).

   As CORES são as da paleta do painel (src/views/paleta.php). Daqui só vêm os
   tons da lateral e do hero, que são os do tema Joonker do Gervis.
   ========================================================================== */

body.jk-gv {
  --gv-lado: #232326; --gv-lado-2: #36363c; --gv-lado-tx: #dedee3; --gv-lado-rot: #97979f;
  --gv-lado-borda: rgba(255,255,255,.09); --gv-lado-forte: #fff;
  --gv-tinta: #232326; --gv-tinta-2: #45454c; --gv-ac-f: #eeeef0; --gv-ac-tx: #303034;
  --gv-sombra-g: 0 24px 70px -20px rgba(15,12,45,.45);
  --sidebar-w: 248px;
  --r-lg: 16px; --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(22,20,50,.04);
  --shadow: 0 1px 2px rgba(22,20,50,.04), 0 8px 22px -14px rgba(22,20,50,.2);
  -webkit-font-smoothing: antialiased;
}

/* ---- lateral -------------------------------------------------------------- */
.jk-gv .jk-sidebar { background: var(--gv-lado); color: var(--gv-lado-tx); border-right: 1px solid var(--gv-lado-borda); transition: width .18s ease; }
/* A prévia da lateral, na tela Aparência, veste as mesmas regras. */
.jk-gv .jk-ladoprevia { max-width: 248px; border-radius: 14px; overflow: hidden; background: var(--gv-lado); color: var(--gv-lado-tx); }
.jk-gv .jk-brand { padding: 18px 16px 14px 20px; gap: 10px; }
.jk-gv .jk-brand__mark { width: 30px; height: 30px; border-radius: 10px; background: var(--marca); }
.jk-gv .jk-brand__mark img { width: 17px; height: 17px; }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-brand__name { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--gv-lado-forte); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-brand__sub { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--gv-lado-rot); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-iconbtn { border: 0; background: transparent; color: var(--gv-lado-rot); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-iconbtn:hover { background: var(--gv-lado-2); color: var(--gv-lado-tx); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-recolhe { width: 28px; height: 28px; border-radius: 99px; background: var(--gv-lado-2); color: var(--gv-lado-tx); flex: none; }

.jk-gv .jk-nav { padding: 2px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--gv-lado-2) transparent; }
.jk-gv .jk-nav::-webkit-scrollbar-thumb { background: var(--gv-lado-2); border-color: var(--gv-lado); }
/* A lateral do Gervis (10/10/2026): seções com o rótulo em caixa alta e os
   itens diretos embaixo — nada abre nem fecha. */
.jkmn-sec__rot { padding: 14px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gv-lado-rot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jkmn-sec:first-child .jkmn-sec__rot { padding-top: 8px; }
.jk-gv .jk-navlist { padding: 0 0 4px; gap: 1px; }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navlink {
  gap: 11px; padding: 8px 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--gv-lado-tx); white-space: nowrap;
}
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navlink > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jk-gv .jk-sidebar .jk-navlink:has(> em) { white-space: normal; }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navlink:hover { background: var(--gv-lado-2); color: var(--gv-lado-forte); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navlink.is-active { background: var(--marca); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px var(--marca); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navico { position: static; margin: 0; width: 18px; height: 18px; flex: none; color: inherit; opacity: .78; }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navlink:hover .jk-navico,
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-navlink.is-active .jk-navico { color: inherit; opacity: 1; }

.jk-gv .jk-sidefoot { padding: 10px 12px 12px; border-top: 1px solid var(--gv-lado-borda); gap: 8px; grid-template-columns: minmax(0, 1fr); }
/* Cartão da Champions (rodada de agora) e o modo operacional — o pé do Gervis. */
.jk-champ { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--gv-lado-2); font-size: 11.5px; color: var(--gv-lado-tx); }
.jk-champ:hover { color: var(--gv-lado-forte); }
.jk-champ > span { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.jk-champ > span svg { flex: none; }
.jk-champ small { display: block; font-size: 9.5px; line-height: 1.2; color: var(--gv-lado-tx); opacity: .82; }
.jk-champ b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.jk-modo { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--gv-lado-borda); font-size: 12px; font-weight: 500; color: var(--gv-lado-tx); cursor: pointer; }
.jk-modo > span { flex: 1; }
.jk-modo > svg { flex: none; }
.jk-modo [role="switch"] { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--borda-forte); cursor: pointer; transition: background .15s; }
.jk-modo [role="switch"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.jk-modo [role="switch"][aria-checked="true"] { background: var(--marca); }
.jk-modo [role="switch"][aria-checked="true"]::after { transform: translateX(16px); }
/* Selo "novo" nas telas que entraram há pouco. */
.jk-gv .jk-sidebar .jk-nav em { flex: none; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--gv-lado-tx) 15%, transparent); color: var(--gv-lado-tx); }
.jk-gv .jk-sidebar .jk-navlink.is-active em { background: rgba(0,0,0,.14); color: inherit; }
/* Modo operacional: some do menu o que é configuração (o ramo da tela aberta não leva a marca). */
html.jk-operacional .jk-gv.jk-sem-eco .jk-nav [data-jk-cfg] { display: none; }
.jk-gv .jk-userchip { gap: 10px; padding: 4px 2px 0 4px; }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-avatar { background: var(--gv-lado-2); color: var(--gv-lado-forte); font-weight: 600; }
.jk-gv .jk-userchip__name { font-size: 13px; font-weight: 600; color: var(--gv-lado-forte); }
.jk-gv .jk-userchip__mail { color: var(--gv-lado-rot); }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-sai { width: 32px; height: 32px; border-radius: 10px; }
.jk-gv :is(.jk-sidebar, .jk-ladoprevia) :focus-visible { box-shadow: 0 0 0 2px var(--gv-lado-rot); }

/* Recolhida (só no computador): fica o ícone de cada item, com um fio entre as seções. */
@media (min-width: 1025px) {
  html.sidebar-collapsed .jk-gv .jk-sidebar { width: 72px; flex-basis: 72px; }
  html.sidebar-collapsed .jk-gv .jk-brand { padding: 16px 0 6px; align-items: center; }
  html.sidebar-collapsed .jk-gv .jk-recolhe { margin-left: 0 !important; transform: rotate(180deg); }
  html.sidebar-collapsed .jk-gv .jk-nav { padding: 6px 12px; }
  html.sidebar-collapsed .jk-gv .jkmn-sec__rot,
  html.sidebar-collapsed .jk-gv .jk-sidebar .jk-navlink > span,
  html.sidebar-collapsed .jk-gv .jk-sidebar .jk-navlink > em { display: none; }
  html.sidebar-collapsed .jk-gv .jk-sidebar .jk-navlink { justify-content: center; padding: 10px 0; }
  html.sidebar-collapsed .jk-gv .jkmn-sec + .jkmn-sec { border-top: 1px solid var(--gv-lado-borda); padding-top: 6px; margin-top: 6px; }
  html.sidebar-collapsed .jk-gv .jk-champ,
  html.sidebar-collapsed .jk-gv .jk-modo,
  html.sidebar-collapsed .jk-gv .jk-userchip__txt,
  html.sidebar-collapsed .jk-gv .jk-sai { display: none; }
  html.sidebar-collapsed .jk-gv .jk-userchip { justify-content: center; padding: 0; }
}

/* ---- topo ------------------------------------------------------------------ */
.jk-gv .jk-topbar { height: 64px; padding: 0 24px; gap: 10px; }
.jk-busca {
  display: flex; align-items: center; gap: 9px; height: 38px; min-width: 230px;
  padding: 0 10px 0 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-secundario); font-size: 13.5px;
}
.jk-busca:hover { border-color: var(--borda-forte); }
.jk-busca span { flex: 1; text-align: left; }
.jk-busca kbd, .jk-pal kbd {
  font: inherit; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--borda); color: var(--texto-secundario); background: var(--fundo-sutil); white-space: nowrap;
}
.jk-topvao { flex: 1; }
.jk-topdata { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--texto-secundario); white-space: nowrap; }
/* As peças abaixo ganham display próprio: o que está [hidden] continua escondido. */
.jk-topbar [hidden], .jk-sidefoot [hidden], .jk-gavcx[hidden] { display: none !important; }
/* Estado da coleta da SSÓtica */
.jk-topst { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--fundo-sutil); color: var(--texto-secundario); }
.jk-topst i { flex: none; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.jk-topst svg { flex: none; }
.jk-topst.is-em_dia { background: var(--positivo-fundo); color: var(--positivo); }
.jk-topst.is-atrasada { background: var(--aviso-fundo); color: var(--aviso); }
.jk-topst.is-erro { background: var(--negativo-fundo); color: var(--negativo); }
.jk-topst.is-atualizando i { animation: jk-pulsa 1.2s ease-in-out infinite; }
@keyframes jk-pulsa { 50% { opacity: .25; } }
/* Loja (o botão fantasma do Gervis). Apagado na tela que não filtra por loja. */
.jk-toploja { display: inline-flex; align-items: center; gap: 7px; height: 38px; min-width: 0; max-width: 200px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--texto); cursor: pointer; }
.jk-toploja:hover, .jk-toploja[aria-expanded="true"] { background: var(--fundo-sutil); }
.jk-toploja.is-fora { color: var(--texto-secundario); }
.jk-toploja > span { overflow: hidden; text-overflow: ellipsis; }
.jk-toploja > svg { flex: none; }
/* Ícones com contador */
.jk-topics { display: flex; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid var(--borda); }
.jk-topic { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--texto-secundario); cursor: pointer; }
.jk-topic:hover, .jk-topic[aria-expanded="true"] { background: var(--fundo-sutil); color: var(--texto); }
.jk-topic i { position: absolute; top: -2px; right: -2px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 600; line-height: 1; background: var(--marca); color: #fff; border: 2px solid var(--superficie); }
/* + Novo e a conta */
.jk-topnovo { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--gv-tinta); color: #fff; cursor: pointer; }
.jk-topnovo:hover, .jk-topnovo[aria-expanded="true"] { background: var(--gv-tinta-2); }
.jk-topeu { flex: none; border-radius: 99px; cursor: pointer; }
.jk-topeu .jk-avatar { width: 36px; height: 36px; font-weight: 600; }

/* Menu suspenso do topo (.gv-pop). Fixo, porque a página rola pelo body. */
.jk-pop { position: fixed; z-index: 80; min-width: 210px; max-width: min(340px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--gv-sombra-g); animation: jk-sobe .12s ease; }
.jk-pop[hidden] { display: none !important; }
.jk-pop > a { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--texto); white-space: nowrap; }
.jk-pop > a > span:not([class]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jk-pop > a > svg { flex: none; color: var(--texto-secundario); }
.jk-pop > a:hover { background: var(--fundo-sutil); }
.jk-pop > a.is-ativa { background: var(--gv-ac-f); color: var(--gv-ac-tx); font-weight: 600; }
.jk-pop hr { border: 0; border-top: 1px solid var(--borda); margin: 5px 4px; }
.jk-pop__quem { padding: 8px 11px 10px; margin-bottom: 5px; border-bottom: 1px solid var(--borda); }
.jk-pop__quem b { display: block; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.jk-pop__quem small { display: block; font-size: 12px; color: var(--texto-secundario); overflow: hidden; text-overflow: ellipsis; }
.jk-pop__nada { padding: 16px 14px; font-size: 13px; color: var(--texto-secundario); }
.jk-pop--lista { width: 330px; }
@keyframes jk-sobe { from { opacity: 0; transform: translateY(8px); } }

/* Linha de lista com ícone (pendências e mensagens) — .gv-ln do Gervis. */
.jk-ln > a, .jk-pop--lista > a { display: flex; align-items: center; gap: 12px; padding: 11px 6px; color: var(--texto); white-space: normal; }
.jk-ln > a { border-radius: 0; border-bottom: 1px solid var(--borda); }
.jk-ln > a:last-child { border-bottom: 0; }
.jk-ln > a:hover { background: var(--fundo-sutil); }
.jk-ln__tx { flex: 1; min-width: 0; }
.jk-ln__tx b { display: block; font-size: 13.5px; font-weight: 500; }
.jk-ln__tx small { display: block; font-size: 12px; color: var(--texto-secundario); }
.jk-ln > a > svg, .jk-pop--lista > a > svg { flex: none; color: var(--texto-terciario); }
.jk-chipic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--fundo-sutil); color: var(--texto-secundario); }
.jk-chipic.jk-tom-vermelho { background: var(--negativo-fundo); color: var(--negativo); }
.jk-chipic.jk-tom-ambar { background: var(--aviso-fundo); color: var(--aviso); }
.jk-chipic.jk-tom-verde { background: var(--positivo-fundo); color: var(--positivo); }

/* Gaveta das pendências (.gv-gav), à direita, por cima de tudo. */
.jk-gavcx { position: fixed; inset: 0; z-index: 75; }
.jk-gavcx__veu { position: absolute; inset: 0; background: rgba(18,18,22,.46); backdrop-filter: blur(2px); animation: jk-surge .15s ease; }
.jk-gav { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--superficie); box-shadow: var(--gv-sombra-g); animation: jk-entra .2s ease; }
.jk-gav:focus, .jk-gav:focus-visible { outline: none; box-shadow: var(--gv-sombra-g); border-radius: 0; }
.jk-gav__cab { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--borda); }
.jk-gav__cab > div { flex: 1; min-width: 0; }
.jk-gav__cab h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--texto); }
.jk-gav__cab p { font-size: 12.5px; color: var(--texto-secundario); }
.jk-gav__x { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--texto-secundario); cursor: pointer; }
.jk-gav__x:hover { background: var(--fundo-sutil); }
.jk-gav__corpo { flex: 1; overflow-y: auto; padding: 10px 16px 18px; }
.jk-gav__nada { display: grid; justify-items: center; gap: 4px; padding: 46px 20px; text-align: center; font-size: 13px; color: var(--texto-secundario); }
.jk-gav__nada svg { width: 44px; height: 44px; padding: 11px; margin-bottom: 8px; border-radius: 99px; background: var(--positivo-fundo); color: var(--positivo); }
.jk-gav__nada b { font-size: 14px; font-weight: 600; color: var(--texto); }
@keyframes jk-surge { from { opacity: 0; } }
@keyframes jk-entra { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jk-pop, .jk-gav, .jk-gavcx__veu, .jk-topst i { animation: none; } }
.jk-gv .jk-menubtn { flex: none; width: 36px; height: 36px; border: 0; }

/* Busca de telas (Ctrl K) */
.jk-pal { position: fixed; inset: 0; z-index: 78; }
.jk-pal[hidden] { display: none; }
.jk-pal__veu { position: absolute; inset: 0; background: rgba(18,18,22,.46); backdrop-filter: blur(2px); }
.jk-pal__cx {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: min(600px, calc(100% - 32px)); overflow: hidden;
  background: var(--superficie); border-radius: 18px; box-shadow: var(--shadow-lg);
}
.jk-pal__cx label { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--borda); color: var(--texto-secundario); }
.jk-pal__cx input { flex: 1; min-width: 0; height: 56px; border: 0; outline: 0; background: none; font-size: 15px; color: var(--texto); }
.jk-pal__cx input:focus, .jk-pal__cx input:focus-visible { box-shadow: none; outline: 0; }
.jk-pal__lista { padding: 8px; max-height: 52vh; overflow-y: auto; }
.jk-pal__lista a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; color: var(--texto-secundario); }
.jk-pal__lista a svg { flex: none; }
.jk-pal__lista a span { flex: 1; min-width: 0; }
.jk-pal__lista a b { display: block; font-size: 13.5px; font-weight: 500; color: var(--texto); }
.jk-pal__lista a small { display: block; font-size: 11.5px; color: var(--texto-secundario); }
.jk-pal__lista a.is-foco, .jk-pal__lista a:hover { background: var(--gv-ac-f); color: var(--gv-ac-tx); }
.jk-pal__nada { padding: 26px; text-align: center; font-size: 13px; color: var(--texto-secundario); }

/* ---- miolo e cabeçalho da página ------------------------------------------- */
.jk-gv main.jk-main { padding: 26px 28px 70px; }
/* Tela de entrar (sem lateral nem topo): o miolo volta ao respiro de antes
   (px-6 py-8), que é o que o min-height do cartão desconta em login.php. */
.jk-gv main.jk-main:has(> .jk-auth) { padding: 32px 24px; }
/* A faixa do ecossistema (visitante do site público) é igual nas quatro marcas. */
.jk-gv .jk-ecobar { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; }
.jk-pgcab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; min-height: 52px; }
.jk-pgcab__ic { width: 38px; height: 38px; margin-top: 2px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--gv-ac-f); color: var(--gv-ac-tx); }
.jk-pgcab__tit { min-width: 0; }
.jk-pgcab__tit h1 { font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--texto); }
.jk-pgcab__tit p { margin-top: 1px; font-size: 13.5px; color: var(--texto-secundario); }
/* As ações da tela na mesma linha do título: o título flutua à esquerda e a
   barra de ações (.jk-phead, que as telas já tinham) fica do tamanho do que
   tem dentro, encostada à direita. Cabe inteira ao lado do título? Fica ao
   lado. Não cabe? Desce para baixo dele, à direita, em vez de se espremer.
   Só vale para barra que tem SÓ ações: a do editor de trilhas traz um título
   próprio e fica onde sempre esteve. Entre o título e a barra a tela costuma
   soltar um <style> ou <script>: eles não ocupam lugar, então a barra
   continua sendo "a seguinte". */
.jk-pgcab:has(+ .jk-phead > .jk-phead__acoes:only-child, + :is(style, script, link) + .jk-phead > .jk-phead__acoes:only-child, + :is(style, script, link) + :is(style, script, link) + .jk-phead > .jk-phead__acoes:only-child, + :is(style, script, link) + :is(style, script, link) + :is(style, script, link) + .jk-phead > .jk-phead__acoes:only-child) { float: left; margin-right: 22px; }
.jk-pgcab + .jk-phead:has(> .jk-phead__acoes:only-child),
.jk-pgcab + :is(style, script, link) + .jk-phead:has(> .jk-phead__acoes:only-child),
.jk-pgcab + :is(style, script, link) + :is(style, script, link) + .jk-phead:has(> .jk-phead__acoes:only-child),
.jk-pgcab + :is(style, script, link) + :is(style, script, link) + :is(style, script, link) + .jk-phead:has(> .jk-phead__acoes:only-child) { align-items: center; justify-content: flex-end; min-height: 52px; margin-bottom: 18px; width: max-content; max-width: 100%; margin-left: auto; }
.jk-gv main.jk-main > .jk-phead ~ * { clear: both; }

/* ---- peças ----------------------------------------------------------------- */
:where(.jk-gv) .jk-card__title,
:where(.jk-gv) .jk-bloco__t { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -.005em; }
/* O mesmo título de bloco, nas telas que ainda o escrevem com classes soltas. */
:where(.jk-gv) main h2.uppercase.tracking-wide { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -.005em; }
:where(.jk-gv) .jk-card__sub { font-size: 12px; }

:where(.jk-gv) .jk-btn { padding: 8.5px 16px; border-radius: 19px; font-size: 13px; font-weight: 600; }
:where(.jk-gv) .jk-btn--sm { padding: 5px 12px; border-radius: 15px; font-size: 12px; }
:where(.jk-gv) .jk-iconbtn { border-radius: 10px; }

:where(.jk-gv) .jk-input { border-radius: 12px; }
:where(.jk-gv) .jk-fld > label { font-size: 12px; font-weight: 500; }
:where(.jk-gv) .jk-checkitem { border-radius: 12px; }

/* Filtros de escolha: botões soltos, o escolhido no tom escuro (.gv-chips). */
:where(.jk-gv) .jk-chips { gap: 5px; padding: 0; background: transparent; border-radius: 0; }
:where(.jk-gv) .jk-chip { padding: 5.5px 11px; border: 1px solid var(--borda); background: var(--superficie); font-size: 12.5px; font-weight: 500; }
:where(.jk-gv) .jk-chip:hover { border-color: var(--borda-forte); }
:where(.jk-gv) .jk-chip.is-active,
:where(.jk-gv) .jk-chip[aria-pressed="true"],
:where(.jk-gv) .jk-chip--solid.is-active { background: var(--gv-tinta); border-color: var(--gv-tinta); color: #fff; font-weight: 600; }

:where(.jk-gv) .jk-badge { padding: 2px 9px; font-size: 11.5px; font-weight: 600; }
:where(.jk-gv) .jk-avatar { border-radius: 99px; }
:where(.jk-gv) .jk-modal__box { border-radius: 20px; }

:where(.jk-gv) table.jk-t th, :where(.jk-gv) table.jk-t td { padding-top: 12px; padding-bottom: 12px; }
:where(.jk-gv) table.jk-t thead th { padding-top: 10px; padding-bottom: 10px; font-weight: 600; letter-spacing: .07em; }
:where(.jk-gv) table.jk-t tfoot td { font-weight: 600; }

/* Caixa de número (.gv-kpi): rótulo em caixa alta, o ícone à direita. */
:where(.jk-gv) .jk-stat { padding: 16px 18px; }
:where(.jk-gv) .jk-stat__label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-secundario); }
:where(.jk-gv) .jk-stat__ico { order: 9; margin-left: auto; width: 34px; height: 34px; border-radius: 11px; border: 0; background: var(--gv-ac-f); color: var(--gv-ac-tx); }
:where(.jk-gv) .jk-stat__info { margin-left: 2px; }
:where(.jk-gv) .jk-stat__value { margin: 6px 0 2px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
:where(.jk-gv) .jk-stat__value--sm { font-size: 22px; }
:where(.jk-gv) .jk-stat__hint { font-size: 12px; }

/* Hero liso, no tom da lateral, sem o fio do alto (.gv-hero). */
:where(.jk-gv) .jk-hero { padding: 28px 30px; background: var(--gv-tinta); border-top: 0; }
:where(.jk-gv) .jk-hero__figure { font-weight: 600; letter-spacing: -.03em; }
:where(.jk-gv) .jk-hero__stat { border-color: rgba(255,255,255,.12); }
:where(.jk-gv) .jk-hero__stat b { font-weight: 600; }

/* ---- telas menores --------------------------------------------------------- */
.jk-veu-lado { display: none; }
/* O topo tem mais peças que largura: cede primeiro a data, depois o texto do
   status e o globo (como no Gervis, que some com a data a 1280px). */
@media (max-width: 1420px) { .jk-topdata { display: none; } }
@media (max-width: 1200px) {
  .jk-topst span, .jk-topst svg { display: none; }
  .jk-topst { padding: 0 9px; }
  .jk-topic--some { display: none; }
  .jk-busca { min-width: 180px; }
}
@media (max-width: 1024px) {
  /* Gaveta do celular: sempre inteira, mesmo com a lateral recolhida no PC. */
  .jk-gv .jk-sidebar, html.sidebar-collapsed .jk-gv .jk-sidebar { width: 272px; flex-basis: 272px; transition: transform .2s ease; }
  html.sidebar-collapsed .jk-gv :is(.jk-sidebar, .jk-ladoprevia) .jk-hide-collapsed { display: block; }
  html.sidebar-collapsed .jk-gv .jk-brand { flex-direction: row; padding: 18px 16px 14px 20px; }
  .jk-gv .jk-recolhe { display: none; }
  body.jk-gv:not(.jk-nav-open) .jk-sidebar { box-shadow: none; }
  body.jk-nav-open .jk-veu-lado { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(18,18,22,.46); }
  .jk-gv .jk-topbar { padding: 0 14px; gap: 8px; }
  .jk-gv main.jk-main { padding: 20px 16px 70px; }
  .jk-gv main.jk-main:has(> .jk-auth) { padding: 32px 16px; }
}
@media (max-width: 760px) {
  .jk-busca { flex: none; min-width: 0; width: 38px; padding: 0; justify-content: center; }
  .jk-busca span, .jk-busca kbd { display: none; }
  .jk-topst { display: none; }
  .jk-toploja { max-width: 150px; padding: 0 8px; gap: 5px; }
  .jk-toploja > svg:first-child { display: none; }
  .jk-topics { padding-left: 0; border-left: 0; }
  .jk-topnovo { width: 38px; padding: 0; }
  .jk-topnovo span, .jk-topnovo svg:last-child { display: none; }
  .jk-gv .jk-topbar { gap: 6px; }
  .jk-topic { flex: none; }
  .jk-gv main.jk-main { padding: 18px 14px 70px; }
  .jk-pgcab__tit h1 { font-size: 21px; }
  /* No celular o título fica na linha dele e as ações vêm embaixo. */
  .jk-gv main.jk-main > .jk-pgcab { float: none; margin-right: 0; }
  .jk-gv main.jk-main > .jk-phead { justify-content: flex-start; min-height: 0; width: auto; margin-left: 0; }
  .jk-gv main.jk-main > .jk-phead .jk-phead__acoes { margin-left: 0; }
  :where(.jk-gv) .jk-hero { padding: 22px 20px; }
  :where(.jk-gv) .jk-stat__value { font-size: 22px; }
}
/* Telefone: a loja vira só o ícone (o nome escolhido aparece marcado no menu
   dela), para a conta — com a Página pública e o Sair — continuar no topo. */
@media (max-width: 480px) {
  .jk-toploja { flex: none; width: 38px; max-width: none; padding: 0; justify-content: center; }
  .jk-toploja > svg:first-child { display: block; }
  .jk-toploja > span, .jk-toploja > svg:last-child { display: none; }
}

/* ---- peças de tela que o Gervis separa em três (09/10/2026) ---------------
   No jk.css, aba, alternador e filtro de período são a mesma dupla
   .jk-chips > .jk-chip. O Gervis usa uma peça para cada papel, e é isso que
   diz, sem ler, o que cada fileira faz. Aqui o prefixo .jk-gv é o normal (sem
   :where) de propósito: estas regras PRECISAM ganhar das dos chips acima. */

/* 1) Abas de verdade (trocam a tela inteira): a linha sublinhada (.gv-abas). */
.jk-gv .jk-chips.jkt-abas {
  display: flex; flex: 1 1 0; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; padding: 0; min-width: 0;
  background: none; border-radius: 0; box-shadow: inset 0 -1px 0 var(--borda);
  overflow-x: auto; scrollbar-width: none;
}
.jk-gv .jk-chips.jkt-abas { margin-bottom: 20px; }
.jk-gv .jk-chips.jkt-abas::-webkit-scrollbar { display: none; }
.jk-gv .jk-chips.jkt-abas > .jk-chip {
  padding: 10px 15px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font-size: 13.5px; font-weight: 500; color: var(--texto-secundario); white-space: nowrap;
}
.jk-gv .jk-chips.jkt-abas > .jk-chip:hover { color: var(--texto); }
.jk-gv .jk-chips.jkt-abas > .jk-chip.is-active {
  background: none; color: var(--gv-ac-tx); border-bottom-color: var(--marca); font-weight: 600;
}
/* O contador da aba, em pastilha (o <i> das abas do Gervis). */
.jk-gv .jk-chips.jkt-abas > .jk-chip > b { margin-left: 7px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 600; background: var(--fundo-sutil); color: var(--texto-secundario); opacity: 1; }

/* 2) Alternador de dois ou três estados, sempre no cabeçalho de um bloco
      (Dia | Mês, Mês | Ano, gênero): o trilho com a pílula dentro (.gv-seg). */
.jk-gv :is(.jk-bloco__head, .jk-bloco__tools, .jk-card__tools) .jk-chips,
.jk-gv .jk-chips[data-jk-alvo] {
  display: inline-flex; flex-wrap: nowrap; gap: 3px; padding: 4px;
  border-radius: 99px; background: var(--fundo-sutil);
}
.jk-gv :is(.jk-bloco__head, .jk-bloco__tools, .jk-card__tools) .jk-chips > .jk-chip,
.jk-gv .jk-chips[data-jk-alvo] > .jk-chip {
  padding: 5px 14px; border: 0; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--texto-secundario); white-space: nowrap;
}
.jk-gv :is(.jk-bloco__head, .jk-bloco__tools, .jk-card__tools) .jk-chips > .jk-chip.is-active,
.jk-gv .jk-chips[data-jk-alvo] > .jk-chip.is-active {
  background: var(--superficie); color: var(--texto); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20,18,50,.12);
}

/* 3) Variação em pastilha (.gv-tend) — só no título de "Vendas acumuladas",
      onde há folga. Na tabela mês a mês (13 colunas de percentual miúdo) e nos
      cartões de número ela não cabe; no Market Share o quadro é sem cor por
      decisão dele. */
.jk-gv main .jk-card > .flex > span.ml-auto:is(.text-emerald-400, .text-red-400) { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.jk-gv main .jk-card > .flex > span.ml-auto.text-emerald-400 { background: var(--positivo-fundo); }
.jk-gv main .jk-card > .flex > span.ml-auto.text-red-400 { background: var(--negativo-fundo); }

/* ---- correções da revisão e da varredura das 73 telas (09/10/2026) -------- */
/* Regras de TELA que moram no jk.css com o mesmo peso das gerais daqui e
   perdiam por esta folha vir depois: repostas com o valor de antes. */
:where(.jk-gv) .jkm-drop__bt { padding-right: 30px; }
:where(.jk-gv) table.jkn-faixas th,
:where(.jk-gv) table.jkn-faixas td,
:where(.jk-gv) table.jkn-faixas thead th { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 560px) {
  :where(.jk-gv) table.jkn-faixas th,
  :where(.jk-gv) table.jkn-faixas td,
  :where(.jk-gv) table.jkn-faixas thead th { padding-top: 5px; padding-bottom: 5px; }
  /* Barra de salvar da Nota do Mapa: os dois botões voltam a caber. */
  :where(.jk-gv) .jkn-salvar__acoes .jk-btn { padding-left: 10px; padding-right: 10px; }
}
/* Ações do cabeçalho da página com a mesma altura (link, botão e seletor). */
:where(.jk-gv) .jk-phead__acoes { align-items: center; }
/* Selo e número do destaque não quebram no meio ("R$" numa linha, o valor na outra). */
/* Só no cabeçalho do cartão: solto no meio de um texto o selo precisa poder quebrar
   (em Níveis de Acesso, sem quebrar, ele empurrava a tela). */
:where(.jk-gv) .jk-card__head .jk-badge { white-space: nowrap; }
:where(.jk-gv) .jk-hero__stat b { white-space: nowrap; }
/* Título de bloco escrito como <h3> solto (Convenções) e os da janela de
   configurações da Gestão de Trabalho: o mesmo título dos outros cartões. */
:where(.jk-gv) .jk-card__head h3:not([class]) { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
:where(.jk-gv) .jkt-cfg__t { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* "Escolher arquivo": o botão do navegador, quadrado e cinza, destoava no
   meio das pílulas. E a caixa de envio não empurra mais a tela no celular. */
.jk-gv main input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.jk-gv main input[type="file"]::file-selector-button:hover { background: var(--fundo-sutil); border-color: var(--borda-forte); }
:where(.jk-gv) .jk-upload > div { min-width: 0; }
/* width em porcentagem deixa o campo de arquivo encolher: sem isso a largura
   natural dele (uns 300px) segurava a coluna e empurrava a tela. */
:where(.jk-gv) .jk-upload input[type="file"] { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  /* Cabeçalho de cartão com ferramentas quebra a linha em vez de sair da tela. */
  :where(.jk-gv) .jk-card__head { flex-wrap: wrap; }
  /* Página de duas colunas com a largura escrita na própria tag não empilhava. */
  .jk-gv .jk-grid.jk-g-5-7[style*="grid-template-columns"],
  .jk-gv .jk-grid.jk-g-8-4[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Mensagens do site: com as abas em linha, a busca ficava do tamanho mínimo e o
   botão "Procurar" caía para baixo do campo. */
.jk-gv .jka-filtros > form:has(input[type="search"]) { flex: 0 1 440px; }
@media (max-width: 760px) {
  /* Cartão de mensagem/comentário: no celular as ações descem para a linha de
     baixo em vez de empurrar a tela para o lado. */
  .jk-gv .jka-com__head { flex-wrap: wrap; }
  .jk-gv .jka-com__acoes { flex-wrap: wrap; margin-left: 0; }
}

/* ---- a arquitetura do Gervis (10/10/2026) -----------------------------------
   Três peças: a lateral em seções (lá em cima, .jkmn-sec), as telas de um item
   em abas no alto (.jkmn-abas, sobre a aba sublinhada .jkt-abas) e o menu
   secundário de Configurações ao lado do miolo (.jkmn-cfg). Quem decide onde
   cada tela aparece é o src/lib/MenuPainel.php. */

/* 1) Abas das telas de um item: ícone + nome, logo abaixo do título. */
.jk-gv .jk-chips.jkt-abas.jkmn-abas { flex: none; width: 100%; margin-bottom: 20px; }
.jk-gv .jk-chips.jkt-abas.jkmn-abas > .jk-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.jk-gv .jk-chips.jkt-abas.jkmn-abas > .jk-chip svg { flex: none; opacity: .85; }
.jk-gv .jkmn-ab > .jk-pgcab { margin-bottom: 8px; }
/* Com abas, o miolo vira uma fileira que quebra: título e ações na primeira
   linha (as ações descem sozinhas se não couberem), as abas na segunda e o
   resto da tela embaixo, cada peça na largura toda. A ordem é dada por
   `order` porque as abas são desenhadas pelo layout, ANTES da barra de ações
   que a tela solta. É flex, e não grade, para não prender o que a tela tiver
   de `position: sticky` dentro de uma linha só. */
@media (min-width: 761px) {
  .jk-gv .jkmn-ab { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; column-gap: 22px; }
  .jk-gv .jkmn-ab > * { order: 3; flex: 0 0 100%; min-width: 0; max-width: 100%; }
  .jk-gv .jkmn-ab > .jk-pgcab { order: 1; flex: 1 1 260px; float: none; margin-right: 0; }
  .jk-gv .jkmn-ab > :is(a, button, span, label) { flex: 0 0 auto; }
  .jk-gv .jkmn-ab > .jkmn-abas { order: 2; }
  .jk-gv .jkmn-ab > .jkmn-abas + .jk-phead:has(> .jk-phead__acoes:only-child),
  .jk-gv .jkmn-ab > .jkmn-abas + :is(style, script, link) + .jk-phead:has(> .jk-phead__acoes:only-child),
  .jk-gv .jkmn-ab > .jkmn-abas + :is(style, script, link) + :is(style, script, link) + .jk-phead:has(> .jk-phead__acoes:only-child),
  .jk-gv .jkmn-ab > .jkmn-abas + :is(style, script, link) + :is(style, script, link) + :is(style, script, link) + .jk-phead:has(> .jk-phead__acoes:only-child) { order: 1; flex: 0 1 auto; align-items: center; justify-content: flex-end; min-height: 52px; width: auto; margin: 0 0 8px auto; }
}
@media (max-width: 760px) {
  .jk-gv .jk-chips.jkt-abas.jkmn-abas { margin-bottom: 16px; }
}

/* 2) Configurações: o menu secundário ao lado do miolo. */
.jkmn-cfg { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; }
.jkmn-cfg__lado { min-width: 0; }
.jkmn-cfg__nav { position: sticky; top: calc(var(--eco-h, 0px) + 64px + 18px); max-height: calc(100vh - var(--eco-h, 0px) - 64px - 36px); overflow-y: auto; scrollbar-width: thin; display: grid; gap: 1px; padding: 14px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--shadow-sm); }
.jkmn-cfg__nav b { padding: 12px 10px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-secundario); }
.jkmn-cfg__nav b:first-child { padding-top: 2px; }
.jkmn-cfg__nav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--grafite); }
.jkmn-cfg__nav a svg { flex: none; opacity: .8; }
.jkmn-cfg__nav a span { flex: 1; min-width: 0; }
.jkmn-cfg__nav a:hover { background: var(--fundo-sutil); color: var(--texto); }
.jkmn-cfg__nav a[aria-current] { background: var(--gv-ac-f); color: var(--gv-ac-tx); font-weight: 600; }
.jkmn-cfg__nav a[aria-current] svg { opacity: 1; }
.jkmn-cfg__nav a em { flex: none; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--fundo-sutil); color: var(--texto-secundario); }
.jkmn-cfg__corpo { min-width: 0; align-self: start; }
.jkmn-cfg__bt { display: none; }
/* Dentro do miolo de Configurações valem as mesmas regras do <main>. */
.jk-gv .jkmn-cfg__corpo > .jk-phead ~ * { clear: both; }
.jk-gv .jkmn-cfg__corpo.jkmn-ab > .jk-phead ~ * { clear: none; }
/* Com o menu ao lado o miolo tem 250 px a menos: as grades de duas colunas das telas
   de configuração empilham mais cedo (no <main> isso só acontece a 1240 px). */
@media (min-width: 1367px) and (max-width: 1720px) {
  .jk-gv .jkmn-cfg__corpo .jk-grid.jk-g-8-4,
  .jk-gv .jkmn-cfg__corpo .jk-grid.jk-g-5-7 { grid-template-columns: minmax(0, 1fr) !important; }
  .jk-gv .jkmn-cfg__corpo .jk-grid.jk-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tela mais estreita: o menu secundário vira uma faixa recolhível acima do miolo,
   para a tela de configuração não perder a largura de que precisa. */
@media (max-width: 1366px) {
  .jkmn-cfg { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jkmn-cfg__bt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--shadow-sm); color: var(--texto); }
  .jkmn-cfg__bt > svg:first-child { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--gv-ac-f); color: var(--gv-ac-tx); }
  .jkmn-cfg__bt > span { flex: 1; min-width: 0; }
  .jkmn-cfg__bt small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--texto-secundario); }
  .jkmn-cfg__bt strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jkmn-cfg__bt em { font-style: normal; font-size: 12.5px; color: var(--texto-secundario); white-space: nowrap; }
  .jkmn-cfg__bt > svg:last-child { flex: none; color: var(--texto-secundario); transition: transform .15s; }
  .jkmn-cfg__bt[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
  .jkmn-cfg__nav { position: static; max-height: none; margin-top: 8px; }
  .jkmn-cfg__lado:not(.is-aberta) .jkmn-cfg__nav { display: none; }
}
/* Aberta em tela média, a lista se reparte em colunas em vez de virar uma tripa de 28 linhas. */
@media (min-width: 620px) and (max-width: 1366px) {
  .jkmn-cfg__lado.is-aberta .jkmn-cfg__nav { display: block; column-width: 210px; column-gap: 14px; }
  .jkmn-cfg__nav b { display: block; break-after: avoid; }
  .jkmn-cfg__nav b:first-child { padding-top: 12px; margin-top: -10px; }
  .jkmn-cfg__nav a { break-inside: avoid; }
}
@media (max-width: 760px) {
  /* No celular o título fica na linha dele e as ações vêm embaixo (como no <main>). */
  .jk-gv .jkmn-cfg__corpo > .jk-pgcab { float: none; margin-right: 0; }
  .jk-gv .jkmn-cfg__corpo > .jk-phead { justify-content: flex-start; min-height: 0; width: auto; margin-left: 0; }
  .jk-gv .jkmn-cfg__corpo > .jk-phead .jk-phead__acoes { margin-left: 0; }
}

/* ---- tela Início (10/10/2026) ------------------------------------------------
   O resumo do dia, no molde do Início do Gervis: a faixa escura com a saudação
   e quatro números (.jkin-hero), a lista "O que precisa de você" (.jkin-prio) e
   os cartões por módulo, montados com as peças de sempre (.jk-card) mais três
   miúdas: fileira de barras (.jkin-barras), caixinhas de número (.jkin-nums) e
   os pares da rodada (.jkin-pares). */
.jkin-hero { --jkin-ac: color-mix(in srgb, var(--marca) 58%, #fff); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 28px 30px; border-radius: 22px; background: var(--gv-tinta); color: #fff; }
.jkin-hero__tx { flex: 1 1 320px; min-width: 0; display: grid; gap: 6px; }
.jkin-hero__tx > small { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--jkin-ac); }
.jkin-hero__tx > h2 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.jkin-hero__tx > h2 em { font-style: normal; color: var(--jkin-ac); }
.jkin-hero__tx > p { max-width: 560px; font-size: 14px; color: rgba(255,255,255,.76); }
.jkin-hero__ac { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jkin-hero__ac a { display: inline-flex; align-items: center; gap: 7px; padding: 8.5px 16px; border-radius: 19px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); font-size: 13px; font-weight: 600; color: #fff; }
.jkin-hero__ac a:hover { background: rgba(255,255,255,.18); }
.jkin-hero__ac a:first-child { border-color: var(--marca); background: var(--marca); }
.jkin-hero__ac a:first-child:hover { filter: brightness(1.08); }
.jkin-hero__cx { flex: 0 1 400px; display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 10px; }
.jkin-hero__cx > a { display: block; min-width: 0; padding: 11px 15px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: #fff; }
.jkin-hero__cx > a:hover { background: rgba(255,255,255,.14); }
.jkin-hero__cx small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.68); }
.jkin-hero__cx b { display: block; margin-top: 2px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jkin-hero__cx i { display: block; font-style: normal; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.68); }
.jkin-hero__cx i .up { color: #86e3ac; font-weight: 600; }
.jkin-hero__cx i .down { color: #ffb5ad; font-weight: 600; }

.jkin-prio { margin-bottom: 18px; padding: 16px 20px 8px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--negativo) 22%, var(--borda)); background: color-mix(in srgb, var(--negativo-fundo) 45%, var(--superficie)); }
.jkin-prio > header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.jkin-prio > header .jk-chipic { flex: none; }
.jkin-prio > header b { display: block; font-size: 15px; font-weight: 600; color: var(--texto); }
.jkin-prio > header small { font-size: 12px; font-weight: 500; color: var(--negativo); }
.jkin-prio > a { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid color-mix(in srgb, var(--negativo) 12%, var(--borda)); font-size: 13.5px; color: var(--texto); }
.jkin-prio > a:hover > span > b { text-decoration: underline; }
.jkin-prio > a > i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-secundario); }
.jkin-prio > a > i[data-g="0"] { color: var(--negativo); }
.jkin-prio > a > i[data-g="1"] { color: var(--aviso); }
.jkin-prio > a > span { min-width: 0; }
.jkin-prio > a > span > b { font-weight: 600; }
.jkin-prio > a > span > small { margin-left: 8px; font-size: 12px; color: var(--texto-secundario); }
.jkin-prio > a > svg { flex: none; color: var(--texto-secundario); }
/* Nada pendente: o mesmo cartão, sem o tom de alerta. */
.jkin-prio.is-ok { padding-bottom: 16px; border-color: var(--borda); background: var(--superficie); }
.jkin-prio.is-ok > header { margin-bottom: 0; }
.jkin-prio.is-ok > header small { color: var(--texto-secundario); }

.jkin-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.jkin-grade > .jk-card { margin: 0; }
.jkin-pe { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--texto-secundario); }
.jkin-pe b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.jkin-pe .up { color: var(--positivo); font-weight: 600; }
.jkin-pe .down { color: var(--negativo); font-weight: 600; }

.jkin-barras { display: grid; gap: 9px; }
.jkin-barras > a { display: grid; grid-template-columns: 20px minmax(86px, 150px) minmax(40px, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; color: var(--texto); }
.jkin-barras > a > i { font-style: normal; font-size: 11.5px; font-weight: 600; text-align: center; color: var(--texto-secundario); }
.jkin-barras > a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.jkin-barras > a:hover > span { text-decoration: underline; }
.jkin-barras > a > b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jkin-bar { height: 8px; border-radius: 99px; background: var(--fundo-sutil); overflow: hidden; }
.jkin-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--gv-tinta); }

.jkin-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.jkin-num { display: block; min-width: 0; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); }
a.jkin-num:hover { border-color: var(--borda-forte); }
.jkin-num small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-secundario); }
.jkin-num b { display: block; margin-top: 3px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; }
.jkin-num i { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--texto-secundario); }
.jkin-num.is-crit b { color: var(--negativo); }
.jkin-num.is-warn b { color: var(--aviso); }

.jkin-prog { margin-top: 16px; }
.jkin-prog__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--texto); }
.jkin-prog__topo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.jkin-prog__topo span { font-size: 12.5px; color: var(--texto-secundario); }
.jkin-prog .jkin-bar { margin: 8px 0 0; }

.jkin-pares { display: grid; }
.jkin-pares > a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--borda); font-size: 13.5px; font-weight: 500; color: var(--texto); }
.jkin-pares > a:first-child { border-top: 0; padding-top: 2px; }
.jkin-pares > a > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.jkin-pares > a > span:first-child { justify-content: flex-end; text-align: right; }
.jkin-pares > a > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jkin-pares > a > i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--texto-secundario); }
.jkin-pares .jk-crest { width: 28px; height: 28px; border-radius: 9px; background: var(--gv-tinta); }

/* Alertas das lojas (12/10/2026): cartão na largura da página, no lugar dos cartões
   "Marketing" e "Mais da rede". Cada alerta é uma mensagem (details) que abre no
   clique com a tabela das vendas apontadas; a ordem se troca no nome da coluna. */
.jkin-grade > .jkin-alertas { grid-column: 1 / -1; }
.jkin-alerta { border: 1px solid color-mix(in srgb, var(--negativo) 22%, var(--borda)); border-radius: 14px; background: color-mix(in srgb, var(--negativo-fundo) 45%, var(--superficie)); }
.jkin-alerta + .jkin-alerta { margin-top: 10px; }
.jkin-alerta > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; cursor: pointer; list-style: none; }
.jkin-alerta > summary::-webkit-details-marker { display: none; }
.jkin-alerta > summary > .jk-chipic { flex: none; }
.jkin-alerta__tx { min-width: 0; }
.jkin-alerta__tx b { display: block; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.jkin-alerta__tx small { display: block; font-size: 12px; color: var(--texto-secundario); }
.jkin-alerta > summary:hover .jkin-alerta__tx b { text-decoration: underline; }
.jkin-alerta__n { font-size: 12.5px; white-space: nowrap; color: var(--texto-secundario); }
.jkin-alerta__n b { font-size: 16px; font-weight: 600; color: var(--negativo); font-variant-numeric: tabular-nums; }
.jkin-alerta > summary > svg { flex: none; color: var(--texto-secundario); transition: transform .15s ease; }
.jkin-alerta[open] > summary > svg { transform: rotate(90deg); }
.jkin-alerta > .jk-tablewrap { margin: 2px 16px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
table.jk-t.jkin-alerta__t td { white-space: nowrap; }
table.jk-t.jkin-alerta__t td.jkin-alerta__larga { white-space: normal; min-width: 120px; }
table.jk-t.jkin-alerta__t thead th { white-space: normal; }
table.jk-t.jkin-alerta__t th, table.jk-t.jkin-alerta__t td { padding-left: 9px; padding-right: 9px; }
table.jk-t.jkin-alerta__t thead th button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
table.jk-t.jkin-alerta__t thead th button:hover { color: var(--texto); }
table.jk-t.jkin-alerta__t thead th button > span { width: 8px; font-size: 9px; line-height: 1; }
table.jk-t.jkin-alerta__t thead th[aria-sort="descending"] button > span::before { content: "\25BC"; }
table.jk-t.jkin-alerta__t thead th[aria-sort="ascending"] button > span::before { content: "\25B2"; }
table.jk-t.jkin-alerta__t thead th[aria-sort] button { color: var(--texto); }
.jkin-alerta.is-ok { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-color: var(--borda); background: var(--superficie); }
/* Os dois botões do bloco: "Atualizar agora" no alto e "Problema corrigido" em cada venda.
   Enquanto uma ação roda (aria-busy), o bloco inteiro espera. */
.jkin-alertas .jk-card__tools { flex: none; flex-wrap: nowrap; }
.jkin-alertas .jk-card__tools > form { display: inline-flex; }
.jkin-alertas .jk-card__tools .jk-badge, .jkin-alertas .jk-btn { white-space: nowrap; }
.jkin-alertas .jk-card__tools .jk-btn { gap: 6px; }
.jkin-alertas[aria-busy="true"] { cursor: progress; }
.jkin-alertas[aria-busy="true"] .jkin-alerta { opacity: .6; }
.jkin-alerta__aviso { margin-bottom: 12px; }
/* Alerta de dois níveis (12/10/2026): a mensagem que só tem venda em amarelo fica âmbar; com uma em
   vermelho, fica vermelha. A lista de vendas chega depois, quando a mensagem é aberta. */
.jkin-alerta.is-amarelo { border-color: color-mix(in srgb, var(--aviso) 30%, var(--borda)); background: color-mix(in srgb, var(--aviso-fundo) 55%, var(--superficie)); }
.jkin-alerta.is-amarelo .jkin-alerta__n b { color: var(--aviso); }
.jkin-alerta__linhas { min-width: 0; }
.jkin-alerta__linhas > .jk-tablewrap { margin: 2px 16px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.jkin-alerta__carrega { margin: 0 16px 14px; font-size: 12.5px; color: var(--texto-secundario); }
.jkin-alerta__carrega a { font-weight: 600; color: var(--texto); text-decoration: underline; }
.jkin-alerta__filtro { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 14px; margin: 0 16px 8px; font-size: 12px; color: var(--texto-secundario); }
/* Quanto falta dar baixa (tudo junto e por estado da baixa): à esquerda dos filtros da lista. */
.jkin-alerta__soma { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-right: auto; }
.jkin-alerta__soma b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.jkin-alerta__soma > span:first-child b { font-size: 13.5px; color: var(--negativo); }
.jkin-alerta__soma small { font-size: 11px; }
.jkin-alerta__falta-total { white-space: nowrap; }
.jkin-alerta__n b.jkin-alerta__falta { font-size: inherit; }
.jkin-alerta__nfalta { display: block; text-align: right; }
.jkin-alerta__filtro label { display: inline-flex; align-items: center; gap: 8px; }
.jkin-alerta__seletores { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; }
.jkin-alerta__filtro select { padding: 5px 9px; font-size: 12px; }
.jkin-alerta__falta { font-weight: 600; color: var(--negativo); }
table.jk-t.jkin-alerta__t td small { font-size: 11px; color: var(--texto-secundario); }
table.jk-t.jkin-alerta__t td.jkin-alerta__ac { text-align: right; padding-top: 7px; padding-bottom: 7px; }
table.jk-t.jkin-alerta__t td.jkin-alerta__ac form { display: inline; }
table.jk-t.jkin-alerta__t td .jk-badge { vertical-align: 1px; }
table.jk-t.jkin-alerta__t td b + .jk-badge { margin-left: 7px; }
table.jk-t.jkin-alerta__t td small.jkin-alerta__por { display: block; }
table.jk-t.jkin-alerta__t td.jkin-alerta__bx { min-width: 150px; }
table.jk-t.jkin-alerta__t td.jkin-alerta__bx small.jkin-alerta__por { white-space: normal; }

@media (max-width: 1100px) {
  .jkin-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .jkin-hero { padding: 22px 20px; gap: 18px; }
  .jkin-hero__tx > h2 { font-size: 23px; }
  .jkin-hero__cx { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jkin-hero__cx b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
  .jkin-prio { padding: 14px 14px 6px; }
  .jkin-prio > a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .jkin-prio > a > i { grid-column: 1 / -1; }
  .jkin-prio > a > span > small { display: block; margin-left: 0; }
  .jkin-barras > a { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .jkin-barras > a > .jkin-bar { display: none; }
  .jkin-alerta > summary { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; }
  .jkin-alerta__n { grid-column: 2 / 3; grid-row: 2; white-space: normal; }
  .jkin-alerta__nfalta { text-align: left; }
  .jkin-alerta > summary > svg { grid-column: 3; grid-row: 1 / 3; }
  .jkin-alerta > .jk-tablewrap { margin: 2px 10px 12px; }
  .jkin-alerta__linhas > .jk-tablewrap { margin: 2px 10px 12px; }
  .jkin-alerta__carrega, .jkin-alerta__filtro { margin-left: 10px; margin-right: 10px; }
  .jkin-alertas .jk-card__tools { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; }
}