/* ============================================================
   MENU EM DOIS NÍVEIS — 30/09/2026 (painel navegacao-dupla, AppShell.jsx + app/navegacao.js)
   Barra escura de 76 px com as 6 áreas (ícone + nome inteiro) e a lâmina de 172 px com as telas da área. No computador
   a lâmina flutua por cima da tela só quando chamada e a tela começa logo depois da barra (dono, 01/10); no celular
   barra + lâmina formam a gaveta de 248 px. Sem recolher (dono, 01/10).
   AIDEV-NOTE: arquivo PRÓPRIO, ligado em pages/_document.jsx depois do painel-extra.css: o app.css é disputado por
     outras frentes (Dossiê). Só tokens do DS; cores do tema escuro vêm do body.theme-dark do app.css.
   AIDEV-NOTE: painel de telas = SEMPRE lâmina solta de vidro líquido NEUTRO, desfoque médio (escolha do dono em 01/10:
     "gostei desse design", "mas quero desfoque médio", "sem esse tom âmbar no vidro"). Nunca volte ao painel liso.
   AIDEV-NOTE: sem recolhedor nem estado recolhido (dono, 01/10 12:35: "tirar esse recolhedor da barra"; 14:15: "não quero
     botão recolher"): não recrie [data-painel] nem botão/dica de esconder ou mostrar o painel. A lâmina do computador
     abre e some SOZINHA ([data-lamina="aberta"] no AppShell: apontar, clicar, teclar, tocar), sem botão.
   ============================================================ */
:root {
  --sx-rail-w: 76px;
  --sx-subnav-w: 172px;
  /* Lâmina solta: 8 px de cada borda dentro da coluna de 172 px. A largura útil do texto (156 - 8 - 14 = 134 px)
     cabe o maior item em negrito ("Resultado comercial", ~129 px no Inter 13/650). */
  --sx-lamina-margem: 8px;
}

/* Casca lateral: no computador só a barra (76 px), com a marca no alto e a lâmina flutuando ao lado (@media abaixo);
   no celular a gaveta é barra | lâmina (bloco de até 920 px). */
.sx-shell .sx-nav2 {
  position: relative;
  z-index: 30;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: var(--sx-rail-w);
  grid-template-rows: var(--sx-topbar-h) minmax(0, 1fr);
  overflow: visible;
  background: transparent;
}

/* Marca: SÓ o ícone oficial "dl." (Osso + ponto Âmbar Brasa) centrado na largura da barra. Na gaveta do celular a faixa
   escura do alto continua inteira e o ícone fica sobre a barra. Imagem, não botão (dono, 01/10: "nada mais nessa parte"). */
.sx-nav2-marca { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; min-width: 0; padding: 0; overflow: hidden; background: var(--sx-chrome-glass-bg); border-bottom: 1px solid var(--sx-chrome-line); }
.sx-nav2-marca__dl { display: block; flex: 0 0 auto; width: 52px; height: 52px; margin-left: calc((var(--sx-rail-w) - 52px) / 2); }

/* Barra de áreas: alvo de 68 × 56 px, ícone 20 e nome inteiro 10/600 (Atendimento e Crescimento medem 64 px).
   AIDEV-NOTE: 76 px - 1 da borda - 2 x 3 de respiro = 69 px >= 68 da área. Com 4 px sobravam 67 e o overflow-y: auto
     virava rolagem LATERAL (barra ◂ ▸ perto do avatar, captura do dono de 01/10); overflow-x: hidden trava o resto. */
.sx-nav2-barra { grid-column: 1; grid-row: 2; min-height: 0; display: flex; flex-direction: column; background: var(--sx-chrome-glass-bg); border-right: 1px solid var(--sx-chrome-glass-line); }
.sx-nav2-areas { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 3px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; scrollbar-width: thin; }
.sx-nav2-area { position: relative; width: 68px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; border-radius: var(--sx-radius-sm); background: transparent; color: var(--sx-chrome-text-mut); cursor: pointer; transition: background 140ms var(--mpvpc-motion-ease), color 140ms var(--mpvpc-motion-ease); }
.sx-nav2-area__nome { font-size: 10px; font-weight: 600; line-height: 12px; white-space: nowrap; }
.sx-nav2-area:hover,
.sx-nav2-area[data-previa] { background: var(--sx-chrome-hover); color: var(--sx-chrome-text); }
.sx-nav2-area[aria-current="true"] { background: var(--sx-chrome-raised); color: var(--sx-chrome-text); }
.sx-nav2-area[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--mpvpc-brand-ember); }
.sx-nav2-pe { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--sx-chrome-line); }
.sx-nav2-avatar { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: var(--mpvpc-brand-ember); color: var(--mpvpc-brand-black); font-size: 12.5px; font-weight: 850; cursor: pointer; }
.sx-nav2-avatar[aria-current="page"] { box-shadow: 0 0 0 2px var(--sx-chrome-bg), 0 0 0 4px var(--mpvpc-brand-ember); }
.sx-nav2-sair { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--sx-chrome-text-mut); cursor: pointer; }
.sx-nav2-sair:hover { background: var(--sx-chrome-hover); color: var(--sx-chrome-text); }

/* Painel de telas = lâmina solta de vidro líquido (pedido do dono, 01/10/2026), só texto: título da área em negrito,
   itens e o escolhido numa pílula clara neutra. A aparência (vidro neutro, desfoque médio, borda clara, sombra) é a
   classe .sx-vidro-liquido do kit (<VidroLiquido> no AppShell); aqui só a forma e o lugar.
   AIDEV-NOTE: no computador a lâmina FLUTUA por cima da tela (dono 01/10 14:15: "B) Lâmina flutuando por cima da tela")
     e o desfoque médio aparece (a tela passa desfocada atrás; medido nos pixels com e sem backdrop-filter). NÃO fica
     fixa (14:50): em repouso a tela fica livre a partir de 76 px; abre ao apontar/clicar/teclar numa área e some ao sair,
     escolher tela, Esc ou toque fora — por isso cobrir a borda esquerda da tela não esconde nada para sempre.
   AIDEV-NOTE: altura = título + telas da área + respiro (14:50: "essa parte aí que sobra sem nada não quero"), no
     computador E na gaveta do celular, até o espaço que houver; passou disso, a lista rola dentro. Nunca volte a
     esticar a lâmina até o pé da página (flex 1 / height 100%).
   AIDEV-NOTE: o slot (pai da lâmina) só troca visibility: opacity/filter nele viraria raiz do desfoque e a lâmina
     deixaria de ver a tela atrás; a animação de entrada fica na própria lâmina. */
.sx-nav2-painel-slot { grid-column: 2; grid-row: 2; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: var(--sx-lamina-margem); overflow: visible; }
.sx-nav2-painel { position: relative; z-index: 1; flex: 0 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; color: var(--sx-ink); }
/* Cantos e borda luminosa da lâmina (raio de 14 px da classe) também cortam a lista quando ela rola. */
.sx-nav2-painel.sx-vidro-liquido { overflow: hidden; }
.sx-nav2-painel__titulo { margin: 0; padding: 14px 11px 6px; font-size: 15px; font-weight: 720; letter-spacing: -0.01em; color: var(--sx-ink); }
.sx-nav2-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 14px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.sx-nav2-item { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 7px; border-radius: var(--sx-radius-sm); color: var(--sx-ink-mut); font-size: 13px; font-weight: 520; text-decoration: none; white-space: nowrap; transition: background 140ms var(--mpvpc-motion-ease), color 140ms var(--mpvpc-motion-ease); }
.sx-nav2-item:hover { background: color-mix(in oklab, var(--sx-ink) 6%, transparent); color: var(--sx-ink); }
/* Seleção = pílula clara NEUTRA com borda suave inteira e o brilho do vidro no alto (sem âmbar, dono 01/10), nunca
   faixa grossa de um lado só (app.css, AIDEV-NOTE do side-tab). O âmbar da marca fica só no filete da área na barra. */
.sx-nav2-item[aria-current="page"] { background: linear-gradient(180deg, var(--sx-liquid-pill-sheen), transparent 62%), var(--sx-liquid-pill-bg); color: var(--sx-ink); font-weight: 650; box-shadow: inset 0 0 0 1px var(--sx-liquid-pill-bd), inset 0 1px 0 var(--sx-glass-light), var(--sx-liquid-pill-sombra); }
.sx-nav2-area:focus-visible,
.sx-nav2-item:focus-visible,
.sx-nav2-avatar:focus-visible,
.sx-nav2-sair:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: -2px; }

/* Computador (de 921 px para cima): a lâmina é uma camada solta ao lado da barra, por cima da tela, só quando chamada.
   Encosta na barra (o respiro de 8 px é do slot, que conta como "dentro do menu" para o mouse: sem vão que feche no
   caminho), começa abaixo do cabeçalho e tem a altura do conteúdo; max-height = janela menos o cabeçalho, pela JANELA
   (100dvh): a barra cresce além da janela quando ela é baixa e o 100% do pai deixava a lâmina passar do pé (1440x380). */
@media (min-width: 921px) {
  .sx-nav2-painel-slot {
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    top: var(--sx-topbar-h);
    left: 100%;
    z-index: 1;
    width: var(--sx-subnav-w);
    max-height: calc(100vh - var(--sx-topbar-h));
    max-height: calc(100dvh - var(--sx-topbar-h));
    box-sizing: border-box;
    visibility: hidden;
    transition: visibility 0s linear 140ms;
  }
  .sx-nav2[data-lamina="aberta"] .sx-nav2-painel-slot { visibility: visible; transition-delay: 0s; }
  .sx-nav2-painel-slot .sx-nav2-painel { opacity: 0; transform: translateX(-6px); transition: opacity 140ms var(--mpvpc-motion-ease), transform 140ms var(--mpvpc-motion-ease); }
  .sx-nav2[data-lamina="aberta"] .sx-nav2-painel { opacity: 1; transform: none; }
}

/* Faixa da área (D6): as telas irmãs numa linha rolável no alto da tela, só no celular (no computador a lâmina fica).
   Rola com o conteúdo (não é fixa) e não é o sx-page-context retirado em 03/08. */
.sx-area-faixa-casca { margin: -6px 0 18px; min-width: 0; }
.sx-shell .sx-area-faixa { flex-wrap: nowrap !important; overflow-x: auto; border-bottom: 1px solid var(--sx-line); scroll-behavior: smooth; }
.sx-area-faixa .sx-filter-tabs__option { min-height: 44px !important; font-size: 13px !important; }

/* Topo: o sobretítulo (área) no âmbar legível dos dois temas (o ember-on-light fixo dava 3,4:1 no escuro). */
.sx-route-context span { color: var(--sx-st-amber); }
.sx-busca-aviso { position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; padding: 6px 10px; border-radius: var(--sx-radius-sm); background: var(--sx-pop-bg); border: 1px solid var(--sx-pop-border); box-shadow: var(--sx-pop-shadow); font-size: 12px; color: var(--sx-ink); white-space: nowrap; }
.sx-busca-aviso:empty { display: none; }
.sx-topbar-search input[aria-invalid="true"] { border-color: var(--sx-st-danger-bd) !important; }

/* Celular (até 920 px): a gaveta é barra + painel, sempre inteira. Fechada fica escondida do Tab
   e do leitor de tela (visibility + inert no AppShell); o véu é o .sx-backdrop do painel-extra.css. */
@media (max-width: 920px) {
  /* AIDEV-NOTE: z-index 100 aqui porque o z-index 30 do topo deste arquivo vencia o 100 do painel-extra.css e o véu
     (.sx-backdrop, 90) ficava POR CIMA da gaveta: tudo escurecido e o toque no item caía no véu. */
  .sx-shell .sx-nav2 {
    z-index: 100;
    grid-template-columns: var(--sx-rail-w) var(--sx-subnav-w) !important;
    visibility: hidden;
    box-shadow: none !important;
    transition: transform 220ms var(--mpvpc-motion-ease), visibility 0s linear 220ms !important;
  }
  /* AIDEV-NOTE: sem desfoque na gaveta inteira: o backdrop-filter dela viraria "raiz" e o vidro do painel deixaria
     de ver a tela por trás. Marca e barra desfocam cada uma; o painel é vidro líquido. */
  .sx-shell .sx-nav2.open {
    visibility: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform 220ms var(--mpvpc-motion-ease), visibility 0s !important;
  }
  .sx-nav2 .sx-nav2-marca,
  .sx-nav2 .sx-nav2-barra { -webkit-backdrop-filter: var(--sx-pop-blur); backdrop-filter: var(--sx-pop-blur); }
  /* O véu cobre só o que fica à direita da gaveta: sob ela a tela segue clara e o vidro do painel continua legível
     (vidro sobre o véu escuro ficava cinza, com o texto secundário abaixo de 4,5:1). */
  .sx-shell .sx-backdrop { left: calc(var(--sx-rail-w) + var(--sx-subnav-w)); width: auto; }
  /* AIDEV-NOTE: a lâmina da gaveta tem a altura das telas (revisão 01/10, X do dono); abaixo dela o MESMO véu da direita
     (cor do .sx-backdrop), passando sob o respiro de 8 px até as bordas da coluna. Fica fora da lâmina: vidro sobre o
     véu perdia AA. Tocar nele fecha a gaveta (onClick do slot no AppShell). */
  .sx-nav2-painel-slot::after { content: ""; flex: 1 1 0; min-height: 0; margin: var(--sx-lamina-margem) calc(-1 * var(--sx-lamina-margem)) calc(-1 * var(--sx-lamina-margem)); background: rgba(15, 15, 14, 0.5); }
  .sx-nav2-item { min-height: 44px; }
  .sx-nav2-sair { width: 44px; height: 44px; }
  .sx-nav2-avatar { width: 40px; height: 40px; }
}

/* Barra inferior do celular nos dois temas: fundo e item ativo por token (os literais claros davam 1,86:1 no escuro). */
body { --sx-mobile-nav-bg: rgba(251, 249, 243, 0.96); --sx-mobile-nav-shadow: 0 -6px 24px rgba(15, 15, 14, 0.08); }
body.theme-dark { --sx-mobile-nav-bg: rgba(24, 22, 21, 0.88); --sx-mobile-nav-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45); }
@media (max-width: 680px) {
  .sx-shell .sx-mobile-nav { background: var(--sx-mobile-nav-bg); box-shadow: var(--sx-mobile-nav-shadow); }
  .sx-shell .sx-mobile-nav button[aria-current="page"] { color: var(--sx-st-amber); }
}

@media (prefers-reduced-transparency: reduce) {
  body, body.theme-dark { --sx-mobile-nav-bg: var(--sx-surface); }
}

@media (forced-colors: active) {
  .sx-nav2 .sx-nav2-marca,
  .sx-nav2 .sx-nav2-barra { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Sem sombra nem borda luminosa (cores forçadas tiram as duas), a lâmina ganha o contorno do sistema.
     AIDEV-NOTE: e fundo Canvas: o vidro não tem cor de fundo (só degradê, que as cores forçadas apagam) e, flutuando
     sobre a tela, ficava transparente com as letras da tela misturadas às do menu (1,01:1 medido, 01/10). */
  .sx-nav2-painel { outline: 1px solid CanvasText; outline-offset: -1px; background: Canvas; }
  /* Ícone "dl." (letras Osso) segue no fundo escuro da marca: o sistema pintaria o fundo de Canvas e as letras sumiriam. */
  .sx-nav2-marca { forced-color-adjust: none; background: var(--sx-chrome-bg); }
  .sx-nav2-item[aria-current="page"], .sx-nav2-area[aria-current="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-shell .sx-nav2,
  .sx-nav2-area,
  .sx-nav2-item,
  .sx-nav2-painel-slot,
  .sx-nav2-painel-slot .sx-nav2-painel,
  .sx-shell .sx-area-faixa { transition: none !important; scroll-behavior: auto !important; }
  .sx-nav2-painel-slot .sx-nav2-painel { transform: none !important; }
}