/* ============================================================
   X8 LABS — SHELL "CANVAS" (variante de layout do painel de membros)
   ------------------------------------------------------------
   ORIGINAL PRESERVADO. Nada aqui altera o layout padrão: TUDO está
   sob :root[data-shell="canvas"]. Sem o atributo, o sistema é
   exatamente o que sempre foi ("classic").

     window.__x8Shell.set('canvas')   -> liga
     window.__x8Shell.set('classic')  -> volta ao original
     window.__x8Shell.toggle()

   A REFERÊNCIA (dissecada, não chutada)
   -------------------------------------
   G4 OS (`g4-study/app-src/dist/renderer`), shell claro. Valores
   verbatim do bundle (main-CYA2nvTM.js + index-Bab9OXAN.css):
     · canvas  --background: #F5F4F3  (greige QUENTE, chapado — sem gradiente)
     · respiro da janela: 10px nos 4 lados (bD={paddingTop:10,...})
     · painel de conteúdo: raio 14px (`rounded-r-[14px]`), SEM cor própria —
       a separação é um ANEL de 1px (foreground a 6%) + sombras mínimas
       (`.shadow-middle`: rgba(fg,.06) 0 0 0 1px, pretas a .06 com blur 1/3/6)
     · rail de ícones SEM fundo/container — solto sobre o canvas
     · foreground deles: #001F35 (navy) → aqui usamos o nosso #0A1F3B
   No nosso app o conteúdo interno é desenhado sobre branco (--via-bg),
   então o cartão fica branco; a ESTRUTURA (canvas/raio/anel/respiro) é a do G4.

   NOTA DE IMPLEMENTAÇÃO (as armadilhas — custaram uma rodada cada)
   ----------------------------------------------------------------
   1. O shell e a <aside> pintam o fundo por `style` INLINE escrito pelo
      bundle (gradiente no shell, véu branco na sidebar). Seletor casa e
      nada muda: inline só cai com !important (uso legítimo aqui).
      Já documentado também em dark-tokens.css §15.
   2. A sidebar COLAPSA; quem reposiciona o conteúdo é o app, via
      `margin-left` no `.via-shell-content` (232px aberta, menor fechada).
      Sobrescrever `margin` quebra o colapso → o respiro do cartão é
      `border` TRANSPARENTE + `background-clip: padding-box`, que SOMA ao
      margin-left do app. O anel de 1px é `box-shadow: inset` porque
      sombra externa seguiria o border-box (10px além da borda visível);
      a inset nasce exatamente na borda pintada (padding-box).
   ============================================================ */

:root[data-shell="canvas"] {
  /* Tom do fundo. Histórico: #DBE1E3 (forte demais) -> #E8ECEE (claro, porém
     azulado demais) -> este, puxado pro cinza NEUTRO mantendo a claridade
     (R/G/B quase iguais, só um fio de frio). */
  --x8-canvas: #EAEBEB;
  --x8-card: var(--via-bg, #FFFFFF); /* conteúdo interno segue como é */
  --x8-gap: 16px;                    /* respiro: topo↔cartão e cartão↔bordas */
  --x8-card-radius: 14px;            /* G4: rounded-[14px] */
  --x8-ring: rgba(10, 31, 59, .06);  /* G4: anel fg/6% (fg deles #001F35 -> nosso navy) */

  /* Geometria do rail. Invariante que NÃO pode quebrar:
        rail = offset + gap   →   o cartão começa exatamente onde o rail acaba,
     e como os ícones são centrados no rail, eles caem no meio exato do vão
     entre a borda da janela e a página (foi o pedido da rodada anterior).
     Mudou a largura? Mexa nos DOIS: offset = rail - gap.
     Base: referência clickmax (~9,5% da largura); afinado a pedido. */
  --x8-rail: 120px;
  --x8-rail-offset: 104px;

  /* altura da faixa do topo — usada pelas cápsulas, pelos círculos E pelo
     cálculo que centra o logo (ver §logo). */
  --x8-topbar-h: 52px;
  --x8-pill: 50px;                   /* raio "pílula" do topo */
  --x8-busca-w: 380px;               /* largura do campo de busca */
  --x8-radius: 32px;                 /* raio dos CARDS (topo usa --x8-pill) */
  --x8-logo-h: 19px;                 /* altura do lockup — usada no recuo do logo */
  --x8-pad: 56px;                    /* padding interno do cartão de página */
  --x8-tile: 36px;                   /* G4: h-9 w-9 */
  --x8-tile-radius: 11px;            /* G4: rounded-[11px] */
  --x8-item-h: 64px;                 /* G4: min-h-[64px] */
  --x8-item-gap: 10px;               /* G4 usa 6px; aberto a pedido */
}

/* ---- 1) O SHELL vira canvas -------------------------------------------
   O shell é um <div> sem classe; alcançado pelo filho que tem id estável.
   CHAPADO, sem gradiente — o G4 não tem nenhum (o radial que existia aqui
   era o inline original do bundle viverdeia; morre junto no !important). */
:root[data-shell="canvas"] div:has(> #via-member-sidebar) {
  background: var(--x8-canvas) !important;
}

/* ---- 2) SIDEBAR transparente, itens soltos ----------------------------
   Igual ao rail do G4: nenhum fundo/container atrás dos itens — eles
   sentam direto no canvas. Some o fio de 1px; o respiro é do canvas. */
:root[data-shell="canvas"] #via-member-sidebar {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  /* ⚠ !important: o `border-right: 1px solid var(--via-border-soft)` é INLINE
     no <aside>. Sem isso ele sobrevivia e desenhava uma LINHA VERTICAL entre
     o rail e o cartão da página — parecia "margem direita" do menu. */
  border-right: 0 !important;
  padding-left: 4px;
}

/* KNOB (botão de expandir): fora, mas SÓ no canvas. No rail o hover já
   revela o título de todos os itens, então expandir vira redundância — e
   expandir dentro do canvas quebraria o visual (o rail vira a barra de
   232px). Em `classic` o botão segue intacto, é o comportamento original.

   ⚠ `display:none` e NÃO remoção/`:not()`: o elemento PRECISA continuar no
   DOM porque o escopo do rail inteiro é
   `#via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"])`.
   `:has()` casa por estrutura, não por renderização — some da tela, o
   seletor continua valendo. (Tirar o nó mataria todo o estilo do rail.)
   O `.click()` programático do shim também continua funcionando em
   elemento oculto, então `__x8Shell.set('classic')` segue alternando.

   O `display` do knob também é ESTILO INLINE (`display:flex` junto com
   position/right/top/width/height) -> precisa de !important, como quase tudo
   neste bundle. */
:root[data-shell="canvas"] .via-sb-knob {
  display: none !important;
}

/* ...MAS no mobile a MESMA <aside> vira drawer modal (role="dialog"). Aí ela
   PRECISA ser opaca e ter elevação — transparente, o conteúdo atravessaria.
   (É a regressão P2#11 que o dark-tokens.css registra; não repetir.) */
:root[data-shell="canvas"] #via-member-sidebar[role="dialog"] {
  background: var(--x8-card) !important;
  box-shadow: 2px 0 24px rgba(10, 31, 59, .18) !important;
}

/* ---- 3) CONTEÚDO vira o painel do G4 ----------------------------------
   Branco, raio visível de 14px, anel de 1px na borda pintada, respiro de
   10px que SOMA ao margin-left dinâmico do app (ver NOTA 2).
   box-sizing é border-box (preflight do app) -> min-height:100vh já inclui
   o border transparente; não força scroll em página curta. */
/* O TOPO FICA FORA DO CARTÃO (ref. clickmax: busca, botões e barra do
   usuário sentam no fundo, não dentro do container de informação).
   Sem cirurgia no DOM: em vez de mover o <header>, movemos o CARTÃO — o
   `.via-shell-content` vira só o esqueleto (altura + gutters) e quem ganha
   fundo/raio/anel é o <main>. O header, que já é transparente, passa a
   aparecer sobre o canvas automaticamente. */
:root[data-shell="canvas"] .via-shell-content {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* gutters: esquerda completa o rail (offset + este padding = --x8-rail).
     `gap` separa o topo do cartão — o pai já é flex-column por inline. */
  padding: var(--x8-gap);
  gap: var(--x8-gap);

  /* ALTURA FIXA = tela. O esqueleto NÃO rola; quem rola é o miolo do
     cartão. box-sizing é border-box, então 100vh já inclui os paddings. */
  height: 100vh;
  overflow: hidden;
}

/* O header sai do cartão e senta no canvas. Ele mesmo fica INVISÍVEL —
   vira só uma régua de layout; quem tem corpo são as cápsulas (abaixo).
   Deixa de ser sticky: não há mais o que grudar, ele não rola.
   `background`/`padding`/`gap` do header são INLINE -> !important. */
:root[data-shell="canvas"] .via-shell-content > header {
  flex: 0 0 auto;
  position: static;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  /* zerado pra as cápsulas alinharem com a borda do cartão abaixo */
  padding: 0 !important;
  gap: var(--x8-gap) !important;
  height: var(--x8-topbar-h) !important;
}

/* ── TOPO: cada peça é um ELEMENTO SOLTO, em pílula ────────────────────
   Estrutura real do header (medida):
     div[0] = busca            > div (campo, r=10 border 1px) > svg + input
     div[1] = ações            > span(ajuda) div(sino) span(divisor) button(usuário)
   A busca NÃO estica: a cápsula abraça o campo. As ações deixam de ser uma
   cápsula única — viram círculos/pílula independentes. */

/* cápsula da busca: largura do CONTEÚDO, não da sobra.
   ⚠ `flex:1 1 0%` é INLINE na cápsula (era o que a fazia esticar até quase
   encostar nos círculos) -> !important. */
:root[data-shell="canvas"] .via-shell-content > header > div:first-child {
  flex: 0 0 auto !important;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: var(--x8-card);
  border-radius: var(--x8-pill);
  box-shadow: inset 0 0 0 1px var(--x8-ring);
}
/* wrapper: `width:100%; max-width:460px` é INLINE -> largura explícita com
   !important, senão ele volta a preencher a cápsula. */
:root[data-shell="canvas"] .via-shell-content > header > div:first-child > div {
  width: var(--x8-busca-w) !important;
  max-width: none !important;
  flex: 0 0 auto;
}
/* O CAMPO VISÍVEL (fundo + borda) está um nível ABAIXO do wrapper — era ele
   que continuava com raio 10px inline. Pílula nele e no input.
   ⚠ `:has(input)` é ESSENCIAL: o dropdown de resultados da busca é IRMÃO do
   campo, na mesma profundidade. Sem o filtro, ele herdava os 50px de pílula
   (ficava com cantos muito mais redondos que os cards) e o padding lateral.
   Só o campo contém o <input> — é o que os distingue de forma estável. */
:root[data-shell="canvas"] .via-shell-content > header > div:first-child > div > div:has(input) {
  border-radius: var(--x8-pill) !important;
  border-color: transparent !important;
  padding: 0 14px !important;
}
/* o dropdown de resultados segue o raio dos CARDS, não o da pílula */
:root[data-shell="canvas"] .via-shell-content > header > div:first-child > div > div:not(:has(input)) {
  border-radius: var(--x8-radius) !important;
}
:root[data-shell="canvas"] .via-shell-content > header input {
  border-radius: var(--x8-pill) !important;
}

/* bloco de ações: some a cápsula, sobra só o alinhamento.
   `margin-left:auto` empurra o grupo pra DIREITA da tela — sem isso ele
   fica colado logo após a busca, já que ambos são `flex:0 0 auto`. */
:root[data-shell="canvas"] .via-shell-content > header > div:last-child {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  box-shadow: none;
}
/* ajuda e notificações: um CÍRCULO PERFEITO cada (quadrado + raio 50%) */
:root[data-shell="canvas"] .via-shell-content > header > div:last-child > span:nth-of-type(1),
:root[data-shell="canvas"] .via-shell-content > header > div:last-child > div {
  flex: 0 0 auto;
  width: var(--x8-topbar-h);
  height: var(--x8-topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--x8-card);
  box-shadow: inset 0 0 0 1px var(--x8-ring);
}
/* o divisor vertical perde a função entre elementos soltos */
:root[data-shell="canvas"] .via-shell-content > header > div:last-child > span:nth-of-type(2) {
  display: none;
}
/* chip do usuário: pílula própria. O `padding` do botão é INLINE (computava
   0px) -> !important; sem folga lateral o avatar e a seta encostavam na
   borda e a proporção ficava apertada. */
:root[data-shell="canvas"] .via-shell-content > header > div:last-child > button {
  height: var(--x8-topbar-h);
  /* numa pílula de 52px com avatar de 28, a folga vertical é 12px; a lateral
     precisa ficar >= isso pra não parecer apertada (14 à esquerda, 20 à
     direita porque a setinha pede mais ar que o avatar). */
  padding: 0 20px 0 14px !important;
  border-radius: var(--x8-pill) !important;
  background: var(--x8-card) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--x8-ring) !important;
}
/* o input não tem superfície própria — quem tem é o campo/pílula */
:root[data-shell="canvas"] .via-shell-content > header input {
  background: transparent !important;
  box-shadow: none !important;
}

/* O <main> É o cartão agora: fundo, raio, anel e o único scroll da tela.
   O app já deixa o pai como `display:flex; flex-direction:column` inline. */
:root[data-shell="canvas"] .via-shell-content > main {
  flex: 1 1 auto;
  min-height: 0;                     /* sem isso o flex item não encolhe e vaza */
  overflow-y: auto;
  overscroll-behavior: contain;      /* não propaga o scroll pro body */
  background: var(--x8-card);
  border-radius: var(--x8-radius);
  box-shadow: inset 0 0 0 1px var(--x8-ring);
  /* padding UNIFORME — o inline do app é `32px 28px` (assimétrico) */
  padding: var(--x8-pad) !important;
}

/* ── PADDING BALANCEADO DENTRO DO CARTÃO ───────────────────────────────
   O respiro estava desigual porque CADA PÁGINA empilha o seu por cima do
   `main`. No dashboard eram três camadas — `main` 32/28 + root `0 0 48px`
   + shell (`--via-space-4` no topo, `clamp(16px,2.2vw,40px)` nas laterais)
   — dando topo 48, laterais 47 e base 80. Formações somava menos, por isso
   parecia certo.
   Aqui o `main` vira a ÚNICA fonte de padding: os wrappers externos de cada
   página são zerados. O `:not([class*=card])` protege o caso de uma página
   pôr um card já no 2º nível — aí ele mantém o padding interno dele. */
:root[data-shell="canvas"] .via-shell-content > main > * {
  padding: 0 !important;
}
:root[data-shell="canvas"] .via-shell-content > main > * > *:not([class*="card" i]):not([class*="panel" i]) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* ── RAIO DOS CARDS ────────────────────────────────────────────────────
   Não existe UMA classe de card: o shell usa `.via-card` (20px), mas cada
   área tem a sua (`.sols-card-compact` 18px, `.sols-consultor-card` 14px…),
   definidas nos chunks CSS de cada página. Enumerar não escala pra 150 rotas.
   Usamos a CONVENÇÃO DE NOME (`[class*="card"]`), que cobre todas.
   Verificado antes de adotar: numa varredura do `main`, os 13 elementos que
   casam são todos cards de verdade (>=120x60) — nenhum badge/avatar/ícone
   pequeno entra. Escopo é só `main`: o topo mantém `--x8-pill`, e a sidebar
   fica de fora. `!important` porque os chunks definem o raio por token. */
:root[data-shell="canvas"] .via-shell-content > main [class*="card" i],
:root[data-shell="canvas"] .via-shell-content > main [class*="empty-state" i],
:root[data-shell="canvas"] .via-shell-content > main [class*="panel" i],
:root[data-shell="canvas"] .via-shell-content > main .dashboard-simple-area-link {
  border-radius: var(--x8-radius) !important;
}

/* Rail mais largo: as duas medidas são ESTILO INLINE do app (width no
   <aside>, margin-left no conteúdo) -> !important. Escopo no estado-rail
   pra não bagunçar a sidebar expandida. */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) {
  width: var(--x8-rail) !important;
}
:root[data-shell="canvas"] .via-shell-content {
  margin-left: var(--x8-rail-offset) !important;
}

/* Header sticky: fica no top:0 ORIGINAL do app, sem override. Um offset
   (top:10px) parecia alinhar com a borda do cartão, mas ao rolar abria uma
   fresta de 10px vazada acima do header. No topo da página o header já
   nasce abaixo do border transparente naturalmente; rolado, gruda no teto
   da janela — os gutters laterais do canvas continuam (border L/R). */

/* ---- 4) RAIL DE ÍCONES estilo G4 (só no estado COLAPSADO) --------------
   O canvas nasce colapsado (o shim força sidebar-open=false): o side menu É
   o rail, como no G4. Spec verbatim do G4: tile 36×36 raio 11px, borda
   transparente; hover bg fg/3.5% + borda; ativo bg fg/5.5% + borda + barrinha
   de accent 2×26px à esquerda; gap 6px (gap-1.5); svg 16px.
   DETECÇÃO do estado: não há classe no <aside> — o que muda é o aria-label
   do knob ("Expandir menu" = colapsada). Escopo via :has() pra NÃO vazar
   pro modo expandido (lá o layout original continua). */
/* Estrutura do item, verbatim do G4 (fn do rail em main-CYA2nvTM.js):
     button  .flex.w-full.flex-col.items-center.rounded-[14px].px-1.py-1.min-h-[64px]
       span  .h-9.w-9.rounded-[11px].border      <- o TILE
       span  .text-[9px].leading-[1.15]          <- o RÓTULO, embaixo
   No nosso DOM o <a.via-nav-item> faz o papel do button, o <span> interno
   (28×38, wrapper do ícone) vira o tile, e o rótulo é injetado pelo shim. */
/* ⚠ display/height/padding/width/border-radius do <a> são ESTILO INLINE
   (o bundle escreve `height:38px; padding:0 10px 0 6px; border-radius:9px`).
   Sem !important só o min-height pegava — o item ficava 64px de alto mas com
   o padding e a direção do flex errados. */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--x8-item-h);
  padding: 4px !important;
  margin: 0 0 var(--x8-item-gap);
  border-radius: 14px !important;
  position: relative;
  gap: 3px;
}
/* espaço lateral do nav: o padrão (12px) espremia o rótulo e quebrava
   "Certificados" no meio. Com 6px sobram ~78px de texto — folgado. */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-sb-nav {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
/* zera o padding-left de 4px do §2 no estado-rail: ele deslocava o eixo dos
   ícones (o centro tem que cair em --x8-rail / 2). */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) {
  padding-left: 0;
}

/* LOGO alinhado ao CENTRO da barra de busca.
   O bloco do logo começa em y=0 e centra o conteúdo nele; a faixa do topo
   começa em `--x8-gap` e tem `--x8-topbar-h`, logo seu centro fica em
   `gap + topbar/2`. Para o centro do logo cair no mesmo ponto, o bloco
   precisa de altura = 2 × (gap + topbar/2) = 2*gap + topbar.
   Derivado, não chutado — se mudar gap ou a altura do topo, acompanha. */
:root[data-shell="canvas"] #via-member-sidebar .via-sb-brand {
  margin: 0 auto;                    /* centra na largura do rail */
}
/* só a marca X8 no rail — o lockup é 2 SVGs irmãos (`__svg` = X8,
   `__labs` = a palavra LABS); escondemos o segundo. */
:root[data-shell="canvas"] #via-member-sidebar .x8-lockup__labs {
  display: none;
}
/* ⚠ o bloco do logo NÃO é o primeiro filho de .via-sb-inner (há um <div>
   antes dele) — `:first-child` não pegava. Miramos pelo CONTEÚDO, que é
   estável. `height:56px` é inline no bloco -> !important.

   Antes o bloco tinha altura `2*gap + topbar` e CENTRAVA o logo: o centro
   caía certo, mas sobravam 32px de espaço morto ABAIXO dele, empurrando o
   menu pra baixo (era a "margem vertical" do rail). Agora o bloco encolhe
   até o logo e o recuo é calculado: topo = centro-do-topbar − metade do
   logo. O centro continua batendo com a busca, sem sobra. */
:root[data-shell="canvas"] #via-member-sidebar .via-sb-inner > div:has(.via-sb-brand) {
  height: auto !important;
  align-items: flex-start !important;
  padding-top: calc(var(--x8-gap) + (var(--x8-topbar-h) / 2) - (var(--x8-logo-h) / 2)) !important;
  flex: 0 0 auto;
}
/* o menu encosta logo abaixo do logo — sem o respiro extra do nav */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-sb-nav {
  padding-top: 8px !important;
}
/* o wrapper do ícone vira o tile 36×36 */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item > span:first-of-type {
  width: var(--x8-tile) !important;
  height: var(--x8-tile) !important;
  flex: 0 0 auto;
  border-radius: var(--x8-tile-radius);
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item svg {
  width: 16px;
  height: 16px;
}
/* hover: no G4 quem acende é o TILE, não o item inteiro.
   SEM contorno — a pedido: o anel de 1px em volta do tile lia como "sombra".
   Fica só o preenchimento. */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item:hover > span:first-of-type {
  background: rgba(10, 31, 59, .035);
  border-color: transparent;
}
/* ativo: só preenchimento, sem anel */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item.active > span:first-of-type {
  background: rgba(10, 31, 59, .055);
  border-color: transparent;
}

/* ⚠ O PILL NAVY: quem pinta o navy do item ativo NÃO é o item — é um
   <div aria-hidden> IRMÃO (pill do framer-motion que desliza entre itens),
   com gradiente navy em estilo INLINE, inset:0 e pointer-events:none —
   invisível pro elementsFromPoint E pro filtro de backgroundColor (o fundo
   dele é backgroundImage). Custou 4 rodadas de diagnóstico.
   Na v3 eu o reestilizava como tile; agora que o item tem 64px de altura o
   pill (inset:0) cobriria item inteiro, e recortá-lo exigiria sobrescrever
   `transform`, que é justamente o que o framer anima -> briga garantida.
   Escondemos o pill e pintamos o tile (acima). Perde-se o deslize; ganha-se
   a estrutura correta. */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) div[aria-hidden="true"]:has(+ .via-nav-item) {
  opacity: 0 !important;
}
/* o svg do ativo tem color:--via-text-inverse (branco) inline, herdado do
   pill navy original; !important de CSS vence inline */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item.active svg {
  color: var(--via-navy, #0A1F3B) !important;
}
/* barrinha de acento à esquerda (G4: h-6.5 w-0.5 rounded-full bg-accent/90),
   centrada na altura do TILE (topo 4px + 36px -> centro em 22px) */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"]) .via-nav-item.active::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 2px;
  height: 26px;
  border-radius: 999px;
  background: var(--via-navy, #0A1F3B);
  opacity: .9;
}

/* RÓTULO sob o ícone (injetado pelo shim; ver ROTULOS no boot-shim.js).
   G4 verbatim: `text-[9px] leading-[1.15] font-medium text-foreground/75`
   + `opacity-0 translate-y-1 transition-[opacity,transform] duration-150`
   acendendo em `group-hover/rail` — ou seja: OCULTO por padrão, e o hover
   em QUALQUER ponto do rail revela TODOS os rótulos de uma vez. */
:root[data-shell="canvas"] .x8-rail-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 9px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(10, 31, 59, .72);
  padding: 0 1px;
  white-space: nowrap;               /* nunca quebrar no MEIO da palavra */
  overflow: hidden;
  text-overflow: ellipsis;
  /* estado de repouso */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;              /* não intercepta o clique do item */
}
/* o gatilho é o RAIL INTEIRO, não o item — entrou o mouse, acendem todos */
:root[data-shell="canvas"] #via-member-sidebar:hover .x8-rail-label {
  opacity: 1;
  transform: translateY(0);
}
/* respeita quem pediu menos animação */
@media (prefers-reduced-motion: reduce) {
  :root[data-shell="canvas"] .x8-rail-label {
    transition: none;
    transform: none;
  }
}
:root[data-shell="canvas"] .via-nav-item.active .x8-rail-label {
  color: var(--via-navy, #0A1F3B);
  font-weight: 600;
}
/* a sidebar expandida não usa rótulo injetado (lá o app já tem o dele) */
:root[data-shell="canvas"] #via-member-sidebar:not(:has(.via-sb-knob[aria-label="Expandir menu"])) .x8-rail-label {
  display: none;
}

/* ---- 5) Respiro interno da página (o padding do G4) --------------------
   No G4 o conteúdo não cola no teto do painel — há folga generosa entre a
   borda do container e o título. O <main> das páginas fica logo após o
   header sticky; um padding-top dá essa folga em TODAS as páginas. */
:root[data-shell="canvas"] .via-shell-content > main {
  padding-top: 18px;
}

/* ---- 6) Par escuro ----------------------------------------------------
   O dark mode está DESLIGADO hoje (boot-shim: ENABLED=false), mas quando
   voltar o canvas não pode sumir no preto: um degrau acima do cartão. */
:root[data-shell="canvas"][data-theme="dark"] {
  --x8-canvas: #0B0F14;
  --x8-card: #12171E;
  --x8-ring: rgba(255, 255, 255, .07);
}
