/* ═══════════════════════════════════════════════════════════════════════════════
   VALORE — SIDEBAR PADRÃO (arquivo compartilhado entre TODOS os portais)

   Este arquivo é copiado IDÊNTICO para cada portal e carregado DEPOIS do CSS
   próprio de cada um, para que a barra lateral fique pixel a pixel igual em
   todos. A única coisa que muda por portal é a imagem da logo e o texto do
   nome/subtítulo — nunca as medidas, cores, espaçamentos ou ícones.

   Cópia mestre: Projetos Valore/_padrao_valore/valore-sidebar.css
   Ao alterar aqui, recopie para todos os portais listados no README ao lado.

   Os seletores aparecem em grupo (ex.: `.sidebar, .vl-sidebar, .app-sidebar`)
   porque os portais nasceram com prefixos de classe diferentes; o arquivo é o
   mesmo em todos, só reconhece os três vocabulários.

   ABRIR E RECOLHER (decisão de 21/10/2026, §5.14 do PADRAO-VALORE.md): no
   computador a barra NÃO abre mais com o mouse por cima. Abre e recolhe só
   pela seta do cabeçalho (`.vl-sidebar-toggle`), que liga e desliga a classe
   `vl-sidebar-aberta` no `<html>`. O arquivo `valore-sidebar.js` cuida disso.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Paleta preta (set/2026). O fundo saiu do azul-marinho #0f2d4d→#0a1f35 para
   preto; os azuis viraram os tons oficiais Valore. Só as cores mudaram — as
   medidas, o jeito de abrir a barra e a gaveta do celular são os mesmos. */
:root {
  --vl-sidebar-width: 270px;
  --vl-sidebar-collapsed: 76px;
  --vl-sidebar-bg-top: #141414;
  --vl-sidebar-bg-bottom: #000000;
  --vl-sidebar-accent: #1a6fcc;
  --vl-sidebar-accent-light: #2d8ee8;
  /* Cor do ícone ☰ do celular. Existe separada de propósito: antes ela era
     var(--vl-sidebar-bg-top), então ao deixar a barra preta o botão ficava
     com um ícone preto sobre a barra superior branca, sem a cor da marca. */
  --vl-toggle-ink: var(--vl-sidebar-accent);
  --vl-sidebar-transition: .18s ease;
}

/* ───────────────────────────────────────────
   FUNDO ESCURO (mobile)
   ─────────────────────────────────────────── */
.sidebar-overlay,
.vl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.sidebar-overlay.active,
.sidebar-overlay.is-visible,
.vl-overlay.show { display: block; }

/* ───────────────────────────────────────────
   BARRA LATERAL
   ─────────────────────────────────────────── */
.sidebar,
.vl-sidebar,
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 999;
  width: var(--vl-sidebar-collapsed);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--vl-sidebar-bg-top);
  background-image: linear-gradient(180deg, var(--vl-sidebar-bg-top) 0%, var(--vl-sidebar-bg-bottom) 100%);
  box-shadow: 6px 0 18px rgba(10, 22, 40, .08);
  transition: width var(--vl-sidebar-transition), transform var(--vl-sidebar-transition), box-shadow var(--vl-sidebar-transition);
}

/* ───────────────────────────────────────────
   A CONDIÇÃO "BARRA ABERTA NO COMPUTADOR"

   Este prefixo se repete em todo o arquivo, sempre dentro de
   @media (min-width: 901px). Ele é verdadeiro em duas situações:

     1. `html.vl-sidebar-aberta` — a seta do cabeçalho foi clicada, ou o
        trecho do <head> leu "aberta" no localStorage. É o estado de verdade.

     2. `html:has(... :focus-visible:not(.vl-sidebar-toggle))` — o foco do
        TECLADO entrou num item da barra. Sem isto, quem navega de Tab com a
        barra recolhida passaria por ícones de 18px sem nenhum nome escrito.

   Por que `:focus-visible` e não o `:focus-within` que havia antes: no Chrome,
   clicar com o MOUSE num <button> deixa o foco nele. Com `:focus-within` a
   condição continuaria verdadeira depois do clique e a seta não conseguiria
   recolher a barra. `:focus-visible` só vale para foco de teclado, então o
   clique de mouse não a segura.

   E por que ainda assim `:not(.vl-sidebar-toggle)`: quando a própria seta é
   acionada pelo TECLADO (Enter/Espaço), aí sim ela recebe `:focus-visible`.
   Sem esta exclusão, recolher pelo teclado seria impossível — a barra fecharia
   pela classe e reabriria pelo foco no mesmo instante.

   A classe mora no `<html>`, e não na barra, porque precisa ser aplicada por um
   script no `<head>`, antes de a página aparecer, e nesse momento a barra ainda
   não existe. De quebra, isso dispensou os seletores de irmão `~` e os
   `body:has(...)` que antes empurravam o conteúdo: agora tudo é descendente
   do `<html>`.
   ─────────────────────────────────────────── */
@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar, .vl-sidebar, .app-sidebar) {
    width: var(--vl-sidebar-width);
    box-shadow: 0 8px 32px rgba(26, 31, 54, .12), 0 2px 8px rgba(26, 31, 54, .06);
  }
}

/* ───────────────────────────────────────────
   SETA QUE ABRE E RECOLHE (só no computador)

   É UM botão com UM <svg>, que gira 180 graus quando a barra abre. Fica
   posicionado em relação à `.sidebar` (que é position:fixed) e NÃO dentro do
   bloco da marca: no Valore Hub a marca é um `<a>` para a home, e o HTML não
   permite um `<button>` dentro de um link. Só a seta é clicável — a logo não
   vira botão.

   Recolhida: a área de clique tem 18px de largura e a altura inteira do
   cabeçalho (76px), colada na borda direita da barra. A conta é
   14 (margem) + 44 (pastilha) + 18 = 76.

   Aberta: pastilha de 28×28px centralizada na altura do cabeçalho, a 14px da
   borda direita. Aberta o cabeçalho tem 85px, e não 76: a pastilha da logo
   cresce para 56px e 56 + 14 + 14 (padding) + 1 (borda de baixo) = 85, o que
   passa do min-height. Daí o topo em 28px — (85 - 28) / 2 = 28,5 — e não 24.
   ─────────────────────────────────────────── */
.vl-sidebar-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 18px;
  height: 76px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width var(--vl-sidebar-transition), height var(--vl-sidebar-transition),
              top var(--vl-sidebar-transition), right var(--vl-sidebar-transition),
              background var(--vl-sidebar-transition), color var(--vl-sidebar-transition),
              border-radius var(--vl-sidebar-transition);
}

/* O traço: viewBox 0 0 24 24, polyline "9 18 15 12 9 6", stroke-width 2.4,
   pontas arredondadas. O desenho tem 20px nos dois estados; recolhida ele é
   mais largo que a área de clique de 18px, e isso é de propósito. */
.vl-sidebar-toggle > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform var(--vl-sidebar-transition);
}

.vl-sidebar-toggle:hover { color: #fff; }

.vl-sidebar-toggle:focus-visible {
  outline: 2px solid var(--vl-sidebar-accent-light);
  outline-offset: -2px;
}

@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .vl-sidebar-toggle {
    top: 28px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .vl-sidebar-toggle:hover { background: rgba(255, 255, 255, .2); }
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .vl-sidebar-toggle > svg { transform: rotate(180deg); }

  /* O nome do portal não pode passar por baixo do botão. 14 (borda) + 28
     (botão) + 8 (respiro) = 50px reservados à direita do cabeçalho. */
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-header, .vl-sidebar__brand, .sidebar-brand, .sidebar-header-rh) {
    padding-right: 50px;
  }
}

/* ───────────────────────────────────────────
   CABEÇALHO / MARCA
   ─────────────────────────────────────────── */
/* box-sizing: border-box é OBRIGATÓRIO aqui, pelo mesmo motivo da pastilha da
   logo (§5.13). Sem ele, o `min-height: 76px` vale para a CAIXA DE CONTEÚDO e os
   28px de padding somam por fora: o cabeçalho vira 104px em vez de 76px. Como a
   altura dependia de o portal ter (ou não) um reset `* { box-sizing: border-box }`
   próprio, o cabeçalho media 76px num portal e 104px noutro — justamente o que
   este arquivo compartilhado existe para impedir. E a seta, que é posicionada em
   relação à barra e não ao cabeçalho, ficava 14px acima do eixo da logo.
   Corrigido em 2026-10-21. */
.sidebar-header,
.vl-sidebar__brand,
.sidebar-brand,
.sidebar-header-rh {
  box-sizing: border-box;
  min-height: 76px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-logo,
.vl-brand-card,
.brand {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

/* A pastilha branca é a regra de todos os portais (§5.13), não mais exceção do
   Hub. O mesmo grupo atinge tanto um contêiner (o Hub, uma <div> com <img>
   dentro) quanto uma <img> direta (o Auditoria), então a regra serve aos dois.
   box-sizing: border-box é OBRIGATÓRIO: sem ele o padding soma aos 44px, a
   pastilha vai a 58px e desalinha do eixo dos ícones. */
.sidebar-logo-icon,
.vl-sidebar__logo,
.sidebar-logo-img,
.brand-logo,
.brand-symbol {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
  object-fit: contain; /* vale quando o seletor cai numa <img> */
  transition: width var(--vl-sidebar-transition), height var(--vl-sidebar-transition), flex-basis var(--vl-sidebar-transition);
}

/* Quando é contêiner com a imagem dentro (Valore Hub) */
.brand-symbol {
  display: grid;
  place-items: center;
}
.brand-symbol > img { width: 100%; height: 100%; object-fit: contain; }

.sidebar-brand-copy,
.vl-sidebar__product,
.brand-copy,
.brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-logo-text,
.vl-sidebar__product strong,
.brand-copy strong,
.brand-title,
.brand-name-sm {
  color: #fff;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logo-subtitle,
.vl-sidebar__product span,
.brand-copy small,
.brand-subtitle,
.brand-subtitle-sm {
  margin-top: 2px;
  color: rgba(255, 255, 255, .46);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───────────────────────────────────────────
   NAVEGAÇÃO
   ─────────────────────────────────────────── */
.sidebar-nav,
.vl-sidebar__nav {
  flex: 1;
  padding: 12px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.sidebar-nav::-webkit-scrollbar,
.vl-sidebar__nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-track,
.vl-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb,
.vl-sidebar__nav::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(255, 255, 255, .2); }

/* A BARRA DE ROLAGEM TIRAVA OS ÍCONES DO EIXO (corrigido em 2026-10-23)

   Recolhida, a pastilha da marca e os ícones do RODAPÉ ficavam no eixo 38, mas
   os ícones do MENU ficavam no eixo 33 — cinco pixels de diferença, visíveis,
   dentro da mesma barra. Visto primeiro no Portal RH e medido no hub-client.

   A causa: no Chrome atual, `scrollbar-width: thin` (logo acima) DESLIGA o
   `::-webkit-scrollbar { width: 5px }` que este arquivo também define, e o
   `thin` do Chrome mede 10px, não 5. Esses 10px saem só do lado direito, a
   caixa de conteúdo fica assimétrica e o centro cai de 38 para 33. Em portal
   cujo menu não rola não há barra de rolagem e o defeito não aparece — por isso
   demorou a ser notado.

   O remédio: `scrollbar-gutter: stable both-edges` reserva o espaço da barra de
   rolagem NOS DOIS LADOS, a caixa volta a ser simétrica e o eixo volta a 38.
   Tirar o `scrollbar-width: thin` NÃO resolve: aí a barra vai a 15px e o eixo
   cai para o mesmo 33.

   Só quando RECOLHIDA, de propósito. Aberta, os itens são alinhados à esquerda
   e a assimetria não se vê; reservar os dois lados ali só tiraria 10px do
   espaço dos rótulos. Assim a barra aberta continua exatamente como estava em
   todos os portais. */
@media (min-width: 901px) {
  html:not(:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))))
  :is(.sidebar-nav, .vl-sidebar__nav) { scrollbar-gutter: stable both-edges; }
}

.nav-section-title,
.vl-sidebar__section,
.nav-section,
.nav-section-label,
.menu-section-title {
  min-width: 0;
  padding: 14px 6px 5px;
  color: rgba(255, 255, 255, .3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link,
.vl-nav-item,
.nav-item,
.menu-link {
  position: relative;
  min-width: 0;
  margin: 0 0 2px;
  padding: 11px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, .68);
  font-size: 0;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--vl-sidebar-transition), color var(--vl-sidebar-transition), padding var(--vl-sidebar-transition);
}

.nav-link > i,
.nav-link > svg,
.nav-icon,
.vl-nav-item > svg,
.nav-item > i,
.nav-item > svg,
.nav-item .app-icon,
.menu-icon,
.menu-icon > svg {
  width: 18px;
  min-width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 18px;
  text-align: center;
  color: currentColor;
}

.nav-link:hover,
.vl-nav-item:hover,
.nav-item:hover,
.menu-link:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.nav-link.active,
.vl-nav-item.active,
.nav-item.active,
.menu-link.active {
  background: rgba(26, 111, 204, .26);
  color: #fff;
  font-weight: 600;
}

.nav-link.active::before,
.vl-nav-item.active::before,
.nav-item.active::before,
.menu-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--vl-sidebar-accent);
}

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { margin: 0; }
.menu-section { margin: 0; }

/* ───────────────────────────────────────────
   RODAPÉ / USUÁRIO / SAIR
   ─────────────────────────────────────────── */
.sidebar-footer,
.vl-sidebar__footer {
  padding: 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: block;
}

.sidebar-user,
.vl-user-block,
.sidebar-user-block,
.user-card {
  min-width: 0;
  padding: 0;
  background: transparent;
  margin-bottom: 6px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sidebar-user-avatar,
.vl-user-block__avatar,
.sidebar-avatar,
.user-avatar-sm,
.user-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  min-height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--vl-sidebar-accent);
  background-image: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* O nome em cima e o perfil embaixo (§5.12), em QUALQUER largura.

   Até 2026-10-21 o `display: flex; flex-direction: column` deste grupo existia
   só dentro de `@media (max-width: 900px)`. No computador o bloco ficava
   `display: block`, e nos portais cujo texto do usuário usa elementos EM LINHA
   (o Hub usa `<strong>` + `<small>`) o perfil aparecia **ao lado** do nome em
   vez de embaixo. Nos portais que usam `<div>` aninhada (o Auditoria) o defeito
   não aparecia, porque `<div>` já empilha sozinha — por isso passou tanto tempo
   despercebido.

   Agora a regra vale sempre, espelhando o grupo da marca (`.brand-copy` e
   companhia), que já era `flex`/`column` incondicional logo acima. */
.sidebar-user-info,
.vl-user-block__info,
.sidebar-user-copy,
.user-info-sm,
.user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-user-name,
.vl-user-block__name,
.sidebar-user-copy strong,
.user-info-sm > div:first-child,
.user-name {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role,
.sidebar-user-email,
.vl-user-block__role,
.sidebar-user-copy small,
.sidebar-user-copy span,
.user-info-sm > div:last-child,
.user-email {
  color: rgba(255, 255, 255, .46);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-logout,
.btn-logout-below,
.vl-btn-sair,
.sidebar-logout,
.logout-link {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 9px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font-size: 0;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vl-sidebar-transition), color var(--vl-sidebar-transition), padding var(--vl-sidebar-transition);
}

.btn-logout > svg,
.btn-logout > i,
.logout-link > .menu-icon > svg,
.vl-btn-sair > svg,
.sidebar-logout > svg,
.sidebar-logout > .app-icon,
.logout-link > svg {
  width: 18px;
  min-width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 18px;
}

.btn-logout:hover,
.btn-logout-below:hover,
.vl-btn-sair:hover,
.sidebar-logout:hover,
.logout-link:hover {
  background: rgba(220, 38, 38, .14);
  color: #fca5a5;
  border-color: transparent;
}

/* Formulário que envolve o botão Sair não pode encolher o botão */
.sidebar-footer form,
.vl-sidebar__footer form { width: 100%; margin: 0; }

/* ───────────────────────────────────────────
   TEXTOS QUE SÓ APARECEM COM A BARRA ABERTA
   ─────────────────────────────────────────── */
.sidebar-logo-text,
.sidebar-logo-subtitle,
.sidebar-brand-copy,
.brand-copy,
.brand-text,
.nav-section-title,
.nav-section,
.nav-section-label,
.sidebar-user-info,
.sidebar-user-copy,
.user-info-sm,
.user-info,
.nav-label,
.nav-arrow,
.menu-text,
.btn-logout > span,
.btn-logout-below > span,
.sidebar-logout > span,
.logout-link > span,
.vl-sidebar__product,
.vl-sidebar__section,
.vl-user-block__info,
.vl-btn-sair > span,
.sidebar-fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vl-sidebar-transition), visibility var(--vl-sidebar-transition);
}

/* Submenu (só o RH tem) fica recolhido junto com a barra.

   Antes esta regra ficava FORA de qualquer @media e era `.sidebar:not(:hover)`.
   No celular isso era uma armadilha: a regra da gaveta (`.sidebar .nav-submenu
   { max-height: none }`) tem especificidade MENOR e perdia, então o submenu
   podia ficar travado em 0 com a gaveta aberta. Agora a regra vale só no
   computador e o celular não é mais afetado. */
@media (min-width: 901px) {
  html:not(:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))))
  .sidebar .nav-submenu { max-height: 0 !important; overflow: hidden; }
}

@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-logo-text, .sidebar-logo-subtitle, .sidebar-brand-copy, .brand-copy,
      .brand-text, .nav-section-title, .nav-section, .nav-section-label, .nav-label,
      .nav-arrow, .menu-text, .sidebar-user-info, .sidebar-user-copy, .user-info-sm,
      .user-info, .vl-sidebar__product, .vl-sidebar__section, .vl-user-block__info,
      .sidebar-fade),
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.btn-logout, .btn-logout-below, .sidebar-logout, .logout-link, .vl-btn-sair) > span {
    opacity: 1;
    visibility: visible;
  }

  /* Quando abre, tudo alinha à esquerda e ganha respiro igual em todo portal */
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-logo, .vl-brand-card) { justify-content: flex-start; }

  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-logo-icon, .sidebar-logo-img, .brand-logo, .brand-symbol, .vl-sidebar__logo) {
    width: 56px; height: 56px; min-width: 56px; flex-basis: 56px;
  }

  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.nav-link, .nav-item, .menu-link, .vl-nav-item) {
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 13px;
    font-size: 13.3px;
  }

  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-user, .sidebar-user-block, .user-card, .vl-user-block) { justify-content: flex-start; }

  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.btn-logout, .btn-logout-below, .sidebar-logout, .logout-link, .vl-btn-sair) {
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 13px;
    font-size: 13.3px;
  }
}

/* ───────────────────────────────────────────
   ÁREA PRINCIPAL — acompanha a barra, nunca fica por baixo
   ─────────────────────────────────────────── */
.main-content,
.vl-main,
.main-wrapper,
.app-main,
.main-area {
  min-height: 100vh;
  margin-left: var(--vl-sidebar-collapsed);
  transition: margin-left var(--vl-sidebar-transition);
}

/* Com a classe no <html>, o conteúdo é sempre descendente da condição: caíram
   os seletores de irmão `~` e os três `:has(...)` que existiam só para
   alcançar um `.main-wrapper` que não era irmão da barra. */
@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.main-content, .vl-main, .main-wrapper, .app-main, .main-area) {
    margin-left: var(--vl-sidebar-width);
  }
}

/* ───────────────────────────────────────────
   BOTÃO ☰ (só aparece no celular/tablet)
   ─────────────────────────────────────────── */
.btn-toggle-sidebar,
.vl-topbar__hamburger,
.mobile-menu,
.mobile-menu-button {
  display: none;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 10px;
  background: #fff;
  color: var(--vl-toggle-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--vl-sidebar-transition), border-color var(--vl-sidebar-transition), color var(--vl-sidebar-transition);
}
.btn-toggle-sidebar:hover,
.vl-topbar__hamburger:hover,
.mobile-menu:hover,
.mobile-menu-button:hover {
  border-color: var(--vl-sidebar-accent);
  color: var(--vl-sidebar-accent);
  background: #eaf2fb;
}
.btn-toggle-sidebar > svg,
.mobile-menu > svg,
.mobile-menu-button > svg { width: 20px; height: 20px; }

/* O hambúrguer de 3 barrinhas do Emissão NFSe vira o mesmo ícone dos demais */
.vl-topbar__hamburger { flex-direction: column; gap: 4px; }
.vl-topbar__hamburger > span {
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Versão flutuante — para portal que não tem barra superior onde encaixar o
   botão (hoje só o RH). Fica no mesmo canto onde o ☰ aparece nos outros. */
.btn-toggle-sidebar--flutuante {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 997;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}

/* ───────────────────────────────────────────
   O RH nasceu com uma classe `.collapsed` própria que escondia os textos com
   `display:none` e travava a largura. Aqui ela é anulada: quem controla abrir
   e fechar agora é o padrão acima (a seta no computador, gaveta no celular),
   igual em todos os portais.
   ─────────────────────────────────────────── */
.sidebar.collapsed { width: var(--vl-sidebar-collapsed); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .user-info-sm { display: block; }
.sidebar.collapsed .nav-submenu { display: block; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 14px; }
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-sub-item { justify-content: center; padding: 11px 0; }

@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .sidebar.collapsed { width: var(--vl-sidebar-width); }
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .sidebar.collapsed .sidebar-header { justify-content: flex-start; }
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 10px 13px; }
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle))) .sidebar.collapsed .nav-sub-item { justify-content: flex-start; padding: 8px 13px 8px 34px; }
}

@media (max-width: 900px) {
  .sidebar.collapsed { width: var(--vl-sidebar-width); }
  .sidebar.collapsed .sidebar-header { justify-content: flex-start; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 10px 13px; }
  .sidebar.collapsed .nav-sub-item { justify-content: flex-start; padding: 8px 13px 8px 34px; }
}

/* Botão de recolher próprio do RH: quem abre e recolhe agora é a seta do
   padrão (`.vl-sidebar-toggle`), então ele deixa de existir. Atenção: são
   classes diferentes — `.sidebar-toggle` é o do RH, `.vl-sidebar-toggle` é a
   seta do padrão, e um seletor de classe não atinge o outro. */
.sidebar-toggle { display: none; }

/* ───────────────────────────────────────────
   CELULAR / TABLET — barra vira gaveta sobreposta
   ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar,
  .vl-sidebar,
  .app-sidebar {
    width: var(--vl-sidebar-width);
    transform: translateX(-100%);
    box-shadow: none;
  }

  /* A seta é só do computador: no celular quem abre é o ☰ e quem fecha é o
     toque no fundo escuro. */
  .vl-sidebar-toggle { display: none; }

  .sidebar.mobile-open,
  .sidebar.is-mobile-open,
  .vl-sidebar.open,
  .vl-sidebar.mobile-open,
  .app-sidebar.is-mobile-open {
    transform: translateX(0);
    box-shadow: 0 8px 32px rgba(26, 31, 54, .22);
  }

  /* Aberta no celular, mostra tudo — aqui não há seta nem estado no <html> */
  .sidebar-logo-text,
  .sidebar-logo-subtitle,
  .sidebar-brand-copy,
  .brand-copy,
  .brand-text,
  .nav-section-title,
  .nav-section,
  .nav-section-label,
  .nav-label,
  .nav-arrow,
  .menu-text,
  .sidebar-user-info,
  .sidebar-user-copy,
  .user-info-sm,
  .user-info,
  .btn-logout > span,
  .btn-logout-below > span,
  .sidebar-logout > span,
  .logout-link > span,
  .vl-sidebar__product,
  .vl-sidebar__section,
  .vl-user-block__info,
  .vl-btn-sair > span,
  .sidebar-fade {
    opacity: 1;
    visibility: visible;
  }
  .sidebar-brand-copy,
  .brand-copy,
  .brand-text,
  .sidebar-user-info,
  .sidebar-user-copy,
  .user-info-sm,
  .user-info,
  .vl-sidebar__product,
  .vl-user-block__info { display: flex; flex-direction: column; }
  .sidebar .nav-submenu { max-height: none; }
  .nav-label,
  .nav-arrow,
  .menu-text,
  .btn-logout > span,
  .btn-logout-below > span,
  .sidebar-logout > span,
  .logout-link > span,
  .vl-btn-sair > span,
  .sidebar-fade { display: block; }

  .sidebar-logo,
  .sidebar-brand,
  .vl-brand-card { justify-content: flex-start; }
  .sidebar-logo-icon,
  .sidebar-logo-img,
  .brand-logo,
  .brand-symbol,
  .vl-sidebar__logo { width: 56px; height: 56px; min-width: 56px; flex-basis: 56px; }

  .nav-link,
  .nav-item,
  .vl-nav-item,
  .menu-link {
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 13px;
    font-size: 13.3px;
  }

  .sidebar-user,
  .sidebar-user-block,
  .user-card,
  .vl-user-block { justify-content: flex-start; }

  .btn-logout,
  .btn-logout-below,
  .sidebar-logout,
  .logout-link,
  .vl-btn-sair {
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 13px;
    font-size: 13.3px;
  }

  .main-content,
  .vl-main,
  .main-wrapper,
  .app-main,
  .main-area { margin-left: 0; }

  .btn-toggle-sidebar,
  .vl-topbar__hamburger,
  .mobile-menu,
  .mobile-menu-button { display: inline-flex; }
}

/* ───────────────────────────────────────────
   RÓTULO DE SEÇÃO RECOLHIDO — não ocupa espaço

   Recolhida, o rótulo de seção (ex.: "GESTÃO") era escondido só por
   opacity/visibility, então continuava ocupando ~32px e abria um vão grande
   entre os grupos de ícones. O Auditoria resolve com display:none. Aqui vale o
   mesmo: recolhida some do layout; aberta (seta no computador, gaveta no
   celular) reaparece.
   ─────────────────────────────────────────── */
.nav-section-title,
.nav-section,
.nav-section-label,
.vl-sidebar__section,
.menu-section-title { display: none; }

@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.nav-section-title, .nav-section, .nav-section-label, .menu-section-title,
      .vl-sidebar__section) { display: block; }
}

@media (max-width: 900px) {
  .nav-section-title,
  .nav-section,
  .nav-section-label,
  .vl-sidebar__section,
  .menu-section-title { display: block; }
}

/* ───────────────────────────────────────────
   BLOCO DO USUÁRIO RECOLHIDO — avatar no mesmo eixo dos ícones

   Recolhida, só o avatar aparece; o texto do usuário fica escondido. Como a
   linha é centralizada (justify-content:center), o texto escondido continuava
   ocupando largura + o gap de 10px e empurrava o avatar para a esquerda, fora
   do eixo vertical dos ícones. Aqui, recolhida, o gap zera e o texto não ocupa
   largura; na abertura (seta no computador, gaveta no celular) os dois voltam,
   espelhando a regra de largura da barra.
   ─────────────────────────────────────────── */
.sidebar-user,
.vl-user-block,
.sidebar-user-block,
.user-card { gap: 0; }
.sidebar-user-info,
.sidebar-user-copy,
.vl-user-block__info,
.user-info-sm,
.user-info { width: 0; }

@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-user, .sidebar-user-block, .user-card, .vl-user-block) { gap: 10px; }
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-user-info, .sidebar-user-copy, .user-info-sm, .user-info,
      .vl-user-block__info) { width: auto; }
}

@media (max-width: 900px) {
  .sidebar-user,
  .sidebar-user-block,
  .user-card,
  .vl-user-block { gap: 10px; }
  .sidebar-user-info,
  .sidebar-user-copy,
  .user-info-sm,
  .user-info,
  .vl-user-block__info { width: auto; }
}

/* ───────────────────────────────────────────
   MARCA RECOLHIDA — pastilha no mesmo eixo dos ícones

   Recolhida, o texto da marca some mas o wrapper (.sidebar-brand-copy etc.)
   continua no fluxo com largura zero. Como a linha é centralizada
   (justify-content:center), o gap de 12px entre a pastilha e esse wrapper vazio
   empurrava a pastilha ~6px para a esquerda, fora do eixo vertical dos ícones.
   Mesmo remédio do bloco do usuário logo acima: recolhida o gap zera; na abertura
   (seta no computador, gaveta no celular) volta a 12px, espelhando a regra de
   largura da barra.
   ─────────────────────────────────────────── */
.sidebar-logo,
.vl-brand-card,
.brand { gap: 0; }

/* O Valore Hub não tem nenhum desses wrappers: a pastilha é filha DIRETA do
   `<a class="sidebar-brand">`, que é o próprio cabeçalho. Como o cabeçalho tem
   `gap: 12px` e alinha à esquerda, recolhida a conta dava 44 (pastilha) + 12
   (gap) = 56 num espaço de 48, estourava, e a pastilha era empurrada para a
   borda: centro em 36px, 2px fora do eixo dos ícones e do avatar (38px).

   Aqui a `.sidebar-brand` recebe o mesmo tratamento das outras linhas de marca
   — gap 0 e centralizada quando recolhida. Precisa das DUAS coisas: só zerar o
   gap deixaria a pastilha em `flex-start` (centro 36); só centralizar não
   caberia por causa do gap. Corrigido em 2026-10-21.

   Vem depois da regra do grupo do cabeçalho de propósito: mesma
   especificidade, então quem vem por último vence. */
/* Generalizado em 2026-10-21, depois do Portal RH: vale para QUALQUER
   cabecalho que tenha a pastilha como filha direta, nao so o `.sidebar-brand`
   do Hub. No RH o cabecalho tem tres filhos (a imagem, o texto da marca e o
   botao antigo escondido) e a pastilha ficava em 36, 2px fora do eixo.

   Nos portais em que o cabecalho tem UM filho unico de largura total (o
   `.sidebar-logo` do Auditoria, Cobranca, NFSe e Manutencao, ou o
   `.vl-brand-card` do Emissao NFSe), gap e justify-content nao tem efeito
   algum — com um so filho que ocupa tudo, nao ha espaco para distribuir. Por
   isso dar a regra ao grupo inteiro e seguro. */
:is(.sidebar-header, .vl-sidebar__brand, .sidebar-brand, .sidebar-header-rh) {
  gap: 0;
  justify-content: center;
}

/* Zerar o gap e centralizar não bastava: recolhida, o wrapper do texto da marca
   continuava no fluxo e engolia os 4px que sobravam (48 do espaço − 44 da
   pastilha), então não havia folga para centralizar e a pastilha ficava em 36.

   É o mesmo remédio que o bloco do usuário já usava desde setembro — lá o
   `.sidebar-user-info` e companhia zeram a largura quando recolhidos. Aqui o
   grupo da marca passa a fazer igual. Vale para TODOS os portais, não só o Hub:
   medido, a pastilha sai de 36 para 38, no eixo dos ícones e do avatar.
   Corrigido em 2026-10-21. */
.sidebar-brand-copy,
.brand-copy,
.brand-text,
.vl-sidebar__product { width: 0; }

@media (min-width: 901px) {
  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-logo, .vl-brand-card, .brand, .sidebar-brand) { gap: 12px; }

  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-header, .vl-sidebar__brand, .sidebar-brand, .sidebar-header-rh) {
    gap: 12px;
    justify-content: flex-start;
  }

  html:is(.vl-sidebar-aberta, :has(:is(.sidebar, .vl-sidebar, .app-sidebar) :focus-visible:not(.vl-sidebar-toggle)))
  :is(.sidebar-brand-copy, .brand-copy, .brand-text, .vl-sidebar__product) { width: auto; }
}

@media (max-width: 900px) {
  .sidebar-logo,
  .vl-brand-card,
  .brand,
  .sidebar-header,
  .vl-sidebar__brand,
  .sidebar-brand,
  .sidebar-header-rh { gap: 12px; }
  .sidebar-brand-copy,
  .brand-copy,
  .brand-text,
  .vl-sidebar__product { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .vl-sidebar,
  .app-sidebar,
  .main-content,
  .vl-main,
  .main-wrapper,
  .app-main,
  .main-area { transition-duration: .01ms; }
}