/* A moldura do site principal é a referência das três áreas.
   Medidas em px evitam diferenças entre as fontes-base18 e16px dos sites. */
:root {
  --bp-menu-largura: 261px;
  --bp-menu-faixa: 65px;
  --bp-menu-topo: 70px;
  --bp-menu-transicao: .28s cubic-bezier(.2, .8, .2, 1);
}
/* A rolagem real fica reservada, sem o gutter vazio que deslocava os
   elementos fixed quando a página ainda não tinha conteúdo para rolar. */
html { scrollbar-gutter: auto; }
@media (hover: hover) and (pointer: fine) { html { overflow-y: scroll; } }
html:has(body.bp-gaveta-aberta), body.bp-gaveta-aberta { overflow: hidden; }

.bp-gaveta__topo { height: var(--bp-menu-topo); flex-shrink: 0; padding: 0 13px; }
.bp-gaveta { width: min(var(--bp-menu-largura), 68vw); }
body.bp-menu-fixo { --recuo-menu: var(--bp-menu-largura); }
body.bp-menu-fixo.bp-menu-solto { --recuo-menu: var(--bp-menu-faixa); }
body.bp-menu-fixo .bp-gaveta {
  z-index: 91; width: var(--bp-menu-largura); transition: width var(--bp-menu-transicao);
}
body.bp-menu-fixo.bp-menu-recolhido .bp-gaveta { width: var(--bp-menu-faixa); }
body.bp-menu-solto:not(.bp-menu-recolhido) .bp-gaveta {
  box-shadow: -18px 0 40px -24px rgb(0 0 0 / .5);
}
.bp-gaveta__texto :is(b,small) { white-space: nowrap; }
/* O texto fica no fluxo, como nas outras áreas: abrir não muda a altura
   dos itens nem faz os ícones saltarem no meio da animação. */
body.bp-menu-fixo .bp-gaveta__texto {
  position: static; width: auto; height: auto; margin: 0; padding: 0;
  clip-path: none; overflow: hidden; white-space: nowrap;
  opacity: 1; transform: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
body.bp-menu-recolhido .bp-gaveta__texto { opacity: 0; transform: translateX(-6px); }


/* Mesmas superfícies, espaçamento e hierarquia de navegação. */
body:is(.adm,.bar) :is(.adm-lateral,.bar-lateral) {
  z-index: 111; background: var(--card); color: var(--fg-forte);
  border-left: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain; touch-action: pan-y;
}
body:is(.adm,.bar) :is(.adm-lateral__topo,.bar-lateral__topo) {
  height: var(--bp-menu-topo); padding: 0 12px 0 13px;
  justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border);
}
.bp-menu-titulo { font-size: 15.75px; letter-spacing: -.01em; color: var(--fg-forte); }
body:is(.adm,.bar) :is(.adm-lateral__fixar,.bar-lateral__fixar) {
  position: static; translate: none; width: 40px; height: 40px;
  margin-left: auto; border-radius: 12px; color: var(--fg-forte); background: transparent;
}
body:is(.adm,.bar) :is(.adm-lateral__fixar,.bar-lateral__fixar) svg { width: 22px; height: 22px; transform: none; }
body:is(.adm,.bar) :is(.adm-lateral__fechar,.bar-lateral__fechar) {
  position: static; translate: none; width: 32px; height: 32px; border-radius: 10px;
  color: var(--muted-fg); margin-left: auto;
}
body:is(.adm,.bar) :is(.adm-nav,.bar-nav) { padding: 6px; gap: 0; }
body:is(.adm,.bar) :is(.adm-nav__item,.bar-nav__item,.adm-nav__titulo,.bar-nav__titulo) {
  min-height: 44px; padding: 8px 10px; gap: 10px; border-radius: 10px;
  font-size: 14.625px; font-weight: 600; color: var(--fg-forte);
  text-transform: none; letter-spacing: normal;
}
body:is(.adm,.bar) :is(.adm-nav__item,.bar-nav__item,.adm-nav__titulo-icone,.bar-nav__titulo-icone) svg {
  width: 18px; height: 18px; flex: none; opacity: 1;
}
body:is(.adm,.bar) :is(.adm-nav__titulo-icone,.bar-nav__titulo-icone) { opacity: 1; }
body:is(.adm,.bar) :is(.adm-nav__item,.bar-nav__item)[aria-current="page"],
body:is(.adm,.bar) :is(.adm-nav__grupo--atual,.bar-nav__grupo--atual) :is(.adm-nav__titulo,.bar-nav__titulo)[aria-expanded="false"] {
  background: color-mix(in srgb, var(--fg-forte) 7%, var(--card));
  box-shadow: none; color: var(--fg-forte);
}
body:is(.adm,.bar) :is(.adm-nav__item,.bar-nav__item)[aria-current="page"] svg { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  body:is(.adm,.bar) :is(.adm-nav__item,.bar-nav__item,.adm-nav__titulo,.bar-nav__titulo,.adm-lateral__fixar,.bar-lateral__fixar):hover {
    background: var(--muted); color: var(--fg-forte);
  }
}
body:is(.adm,.bar) :is(.adm-lateral__rodape,.bar-lateral__rodape) {
  padding: 8px 12px; border-top-color: var(--border);
}
body:is(.adm,.bar) :is(.adm-conta__textos,.bar-conta__textos) b { color: var(--fg-forte); font-size: 14.625px; }
body:is(.adm,.bar) :is(.adm-conta__textos,.bar-conta__textos) small { color: var(--muted-fg); font-size: 12.375px; }

/* A saída mantém a cor e o alvo de toque do menu principal. */
body:is(.adm,.bar) :is(.adm-conta__sair,.bar-conta__sair) {
  color: #e5484d; font-size: 14.625px; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Cabeçalho: marca à esquerda, contexto e ações, menu à direita no toque. */
body:is(.adm,.bar) :is(.adm-topo,.bar-topo) {
  height: var(--bp-menu-topo); flex-shrink: 0; z-index: 90; gap: 12px;
  background: var(--bg-fundo); backdrop-filter: none; padding: 0 24px;
}
body:is(.adm,.bar) :is(.adm-topo__menu,.bar-topo__menu) {
  order: 10; flex: none; width: 40px; height: 40px; margin: 0;
  border-radius: 12px; color: var(--fg-forte);
}
body:is(.adm,.bar) :is(.adm-topo__menu,.bar-topo__menu) svg { width: 24px; height: 24px; }
body:is(.adm,.bar) :is(.adm-marca,.bar-marca) { gap: 6px; color: var(--fg-forte); }
body:is(.adm,.bar) :is(.adm-marca,.bar-marca) img { width: auto; height: 38px; }
body:is(.adm,.bar) :is(.adm-marca,.bar-marca) b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
body:is(.adm,.bar) :is(.adm-topo__titulo,.bar-topo__titulo) { font-size: 14.625px; font-weight: 600; }
body:is(.adm,.bar) :is(.adm-marca,.bar-marca) small { font-size: 9px; }
@media (min-width: 861px) {
  body:is(.adm,.bar) :is(.adm-topo,.bar-topo) { padding-inline: max(24px, calc((100% - 1240px) / 2 + 24px)); }
}
@media (max-width: 860px) {
  :root { --bp-menu-topo: 60px; }
  body:is(.adm,.bar) :is(.adm-topo,.bar-topo) { padding-inline: 12px; gap: 6px; }
  body:is(.adm,.bar) :is(.adm-topo__titulo,.bar-topo__titulo) { display: none; }
  body:is(.adm,.bar) :is(.adm-topo__site,.bar-topo__site) { margin-left: auto; }
}
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  body:is(.adm,.bar) :is(.adm-lateral,.bar-lateral) { z-index: 91; box-shadow: none; }
  body:not(.adm--fixo):not(.adm--lateral-aberta) .adm-lateral:not(:has(:focus-visible)) .bp-menu-titulo,
  body:not(.bar--fixo):not(.bar--lateral-aberta) .bar-lateral:not(:has(:focus-visible)) .bp-menu-titulo { display: none; }
  body:not(.adm--fixo):not(.adm--lateral-aberta) .adm-lateral:not(:has(:focus-visible)) :is(.adm-nav__item,.adm-nav__titulo),
  body:not(.bar--fixo):not(.bar--lateral-aberta) .bar-lateral:not(:has(:focus-visible)) :is(.bar-nav__item,.bar-nav__titulo) { padding-inline: 17px; gap: 10px; }
  body:not(.adm--fixo):not(.adm--lateral-aberta) .adm-lateral:not(:has(:focus-visible)) .adm-conta,
  body:not(.bar--fixo):not(.bar--lateral-aberta) .bar-lateral:not(:has(:focus-visible)) .bar-conta { padding-left: 4px; }
  body:not(.adm--fixo):is(.adm--lateral-aberta) .adm-lateral,
  body:not(.bar--fixo):is(.bar--lateral-aberta) .bar-lateral,
  body:not(.adm--fixo) .adm-lateral:has(:focus-visible),
  body:not(.bar--fixo) .bar-lateral:has(:focus-visible) { box-shadow: -18px 0 40px -24px rgb(0 0 0 / .5); }
}
@media (max-width: 63.99rem), (not ((hover: hover) and (pointer: fine))) {
  body:is(.adm,.bar) :is(.adm-lateral,.bar-lateral) {
    visibility: hidden; transition: transform .26s ease, visibility .26s;
    box-shadow: -18px 0 40px -24px rgb(0 0 0 / .5);
  }
  body.adm--menu-aberto .adm-lateral, body.bar--menu-aberto .bar-lateral { visibility: visible; }
  body:is(.adm,.bar) :is(.adm-veu,.bar-veu) { z-index: 110; background: rgb(8 12 10 / .5); backdrop-filter: blur(2px); touch-action: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.bp-menu-fixo .bp-gaveta, body:is(.adm,.bar) :is(.adm-lateral,.bar-lateral,.adm-corpo,.bar-corpo) { transition: none !important; }
}
@media print {
  body:is(.adm,.bar) :is(.adm-lateral,.bar-lateral,.adm-topo,.bar-topo) { display: none; }
  body:is(.adm,.bar) :is(.adm-corpo,.bar-corpo) { margin-right: 0; }
}