/* Barra do topo no celular (até 720 px): o nome do espaço volta ao lado do ícone, curto e com reticência.
   O central.css o escondia e sobravam só o ícone e a seta: a pessoa não via em que espaço estava. */
@media (max-width: 720px) {
  .lg__espaco-nome { display: inline; }
  .lg__espaco-rotulo { max-width: min(180px, 44vw); }
  /* sino: o painel pendurado à direita do sino vazava 118 px para fora da tela à esquerda; no celular ocupa a largura */
  .lg__notif-painel { position: fixed; left: 12px; right: 12px; top: calc(100px + env(safe-area-inset-top, 0px)); width: auto;
    max-height: calc(100dvh - 120px - env(safe-area-inset-top, 0px)); }
}
/* Tablet (768 px) com nome de espaço comprido: o nav-atual.js já tinha levado tudo para "Mais" (só a página atual fica) e
   ainda assim "Atendimento + Mais" não cabia; o "Mais" vazava por cima do tema e do sino. Com o "Mais" ligado, a barra fica
   do tamanho do que sobrou e quem cede é o nome do espaço (reticência). */
.lg__nav[data-mais-ligado] { flex-shrink: 0; }
.lg__topo:has(.lg__nav[data-mais-ligado]) .lg__espaco { flex-shrink: 1; }
/* Tema escuro: o nó preto do logo sumia no fundo escuro. Usa a variante OFICIAL para fundo escuro do kit (assets/brand,
   anéis brancos), sem editar o logo: a imagem clara sai do quadro (object-position) e a oficial escura entra de fundo. */
:root[data-theme="dark"] .lg__marca img {
  object-position: -9999px 0; background: url(/assets/brand/wortic-logo-fundo-escuro.svg) center / contain no-repeat;
}