/* ═══════════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 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 hover que abre 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);
}

@media (min-width: 901px) {
  .sidebar:hover,
  .sidebar:focus-within,
  .vl-sidebar:hover,
  .vl-sidebar:focus-within,
  .app-sidebar:hover,
  .app-sidebar:focus-within {
    width: var(--vl-sidebar-width);
    box-shadow: 0 8px 32px rgba(26, 31, 54, .12), 0 2px 8px rgba(26, 31, 54, .06);
  }
}

/* ───────────────────────────────────────────
   CABEÇALHO / MARCA
   ─────────────────────────────────────────── */
.sidebar-header,
.vl-sidebar__brand,
.sidebar-brand,
.sidebar-header-rh {
  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); }

.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;
}

.sidebar-user-info,
.vl-user-block__info,
.sidebar-user-copy,
.user-info-sm,
.user-info { min-width: 0; }

.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 */
.sidebar:not(:hover) .nav-submenu { max-height: 0 !important; overflow: hidden; }

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

  /* Quando abre, tudo alinha à esquerda e ganha respiro igual em todo portal */
  .sidebar:hover .sidebar-logo,
  .vl-sidebar:hover .vl-brand-card { justify-content: flex-start; }

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

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

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

  .sidebar:hover .btn-logout,
  .sidebar:hover .btn-logout-below,
  .sidebar:hover .sidebar-logout,
  .sidebar:hover .logout-link,
  .vl-sidebar:hover .vl-btn-sair,
  .app-sidebar:hover .btn-logout {
    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);
}

@media (min-width: 901px) {
  .sidebar:hover ~ .main-content,
  .sidebar:focus-within ~ .main-content,
  .sidebar:hover ~ .main-area,
  .sidebar:focus-within ~ .main-area,
  .vl-sidebar:hover ~ .vl-main,
  .vl-sidebar:focus-within ~ .vl-main,
  .app-sidebar:hover ~ .app-main,
  body:has(.sidebar:hover) .main-wrapper,
  body:has(.app-sidebar:hover) .app-main,
  .app-layout:has(.app-sidebar:hover) .app-main,
  .portal-shell:has(.sidebar:hover) .main-content {
    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 (hover no desktop, 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) {
  .sidebar.collapsed:hover { width: var(--vl-sidebar-width); }
  .sidebar.collapsed:hover .sidebar-header { justify-content: flex-start; }
  .sidebar.collapsed:hover .nav-item { justify-content: flex-start; padding: 10px 13px; }
  .sidebar.collapsed:hover .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: o padrão é abrir com o mouse, então ele
   deixa de existir (nenhum outro portal tem esse botão). */
.sidebar-toggle { display: none; }

/* ───────────────────────────────────────────
   CELULAR / TABLET — barra vira gaveta sobreposta
   ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar,
  .sidebar:hover,
  .vl-sidebar,
  .vl-sidebar:hover,
  .app-sidebar,
  .app-sidebar:hover {
    width: var(--vl-sidebar-width);
    transform: translateX(-100%);
    box-shadow: 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 — não existe hover em tela de toque */
  .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,
  .sidebar:hover ~ .main-content,
  .vl-sidebar:hover ~ .vl-main,
  .app-sidebar:hover ~ .app-main { 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 (hover no desktop, gaveta no celular)
   reaparece.
   ─────────────────────────────────────────── */
.nav-section-title,
.nav-section,
.nav-section-label,
.vl-sidebar__section,
.menu-section-title { display: none; }

@media (min-width: 901px) {
  .sidebar:hover .nav-section-title,
  .sidebar:hover .nav-section,
  .sidebar:hover .nav-section-label,
  .sidebar:hover .menu-section-title,
  .vl-sidebar:hover .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 (hover/focus-within no desktop, gaveta no celular) os
   dois voltam. Três vocabulários × dois gatilhos, espelhando a regra de
   largura da linha 73.
   ─────────────────────────────────────────── */
.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) {
  .sidebar:hover .sidebar-user,
  .sidebar:focus-within .sidebar-user,
  .sidebar:hover .sidebar-user-block,
  .sidebar:focus-within .sidebar-user-block,
  .sidebar:hover .user-card,
  .sidebar:focus-within .user-card,
  .vl-sidebar:hover .vl-user-block,
  .vl-sidebar:focus-within .vl-user-block,
  .app-sidebar:hover .sidebar-user,
  .app-sidebar:focus-within .sidebar-user,
  .app-sidebar:hover .sidebar-user-block,
  .app-sidebar:focus-within .sidebar-user-block,
  .app-sidebar:hover .user-card,
  .app-sidebar:focus-within .user-card,
  .app-sidebar:hover .vl-user-block,
  .app-sidebar:focus-within .vl-user-block { gap: 10px; }
  .sidebar:hover .sidebar-user-info,
  .sidebar:focus-within .sidebar-user-info,
  .sidebar:hover .sidebar-user-copy,
  .sidebar:focus-within .sidebar-user-copy,
  .sidebar:hover .user-info-sm,
  .sidebar:focus-within .user-info-sm,
  .sidebar:hover .user-info,
  .sidebar:focus-within .user-info,
  .vl-sidebar:hover .vl-user-block__info,
  .vl-sidebar:focus-within .vl-user-block__info,
  .app-sidebar:hover .sidebar-user-info,
  .app-sidebar:focus-within .sidebar-user-info,
  .app-sidebar:hover .sidebar-user-copy,
  .app-sidebar:focus-within .sidebar-user-copy,
  .app-sidebar:hover .user-info-sm,
  .app-sidebar:focus-within .user-info-sm,
  .app-sidebar:hover .user-info,
  .app-sidebar:focus-within .user-info,
  .app-sidebar:hover .vl-user-block__info,
  .app-sidebar:focus-within .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
   (hover/focus-within no desktop, gaveta no celular) volta a 12px. Três
   vocabulários × dois gatilhos, espelhando a regra de largura da linha 73.
   ─────────────────────────────────────────── */
.sidebar-logo,
.vl-brand-card,
.brand { gap: 0; }

@media (min-width: 901px) {
  .sidebar:hover .sidebar-logo,
  .sidebar:focus-within .sidebar-logo,
  .vl-sidebar:hover .vl-brand-card,
  .vl-sidebar:focus-within .vl-brand-card,
  .sidebar:hover .brand,
  .sidebar:focus-within .brand,
  .app-sidebar:hover .sidebar-logo,
  .app-sidebar:focus-within .sidebar-logo,
  .app-sidebar:hover .vl-brand-card,
  .app-sidebar:focus-within .vl-brand-card,
  .app-sidebar:hover .brand,
  .app-sidebar:focus-within .brand { gap: 12px; }
}

@media (max-width: 900px) {
  .sidebar-logo,
  .vl-brand-card,
  .brand { gap: 12px; }
}

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