/* ==========================================================================
   SGP — Design System · Camada 11: busca global do topo (fatia F02)
   O quadro de sugestões que desce sob a caixa de busca da barra do topo, e a
   página /busca (mesmo miolo, outra moldura).
   Arquivo próprio da fatia — nenhuma outra folha é editada.
   ========================================================================== */

/* A caixa passa a ser um invólucro posicionado: o quadro flutua ancorado nela.
   O `flex: 1` que morava no <form> vem para cá, porque agora o filho direto da
   barra do topo é este contêiner. */
.busca-global {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 460px;
}

.busca-global__painel {
  position: absolute;
  top: calc(100% + var(--esp-2));
  left: 0;
  right: 0;
  z-index: calc(var(--z-barra-topo) + 1);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
}
.busca-global__painel[hidden] { display: none; }

/* Título do módulo: separa Pessoas de Atendimentos sem virar mais um botão. */
.busca-global__titulo {
  margin: 0;
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  background: var(--cor-fundo-sutil);
  border-bottom: 1px solid var(--cor-borda);
}

.busca-global__grupo + .busca-global__grupo .busca-global__titulo { border-top: 1px solid var(--cor-borda); }
.busca-global__grupo:last-child .busca-global__item:last-child { border-bottom: 0; }

.busca-global__icone {
  flex: none;
  display: grid;
  place-content: center;
  width: 32px; height: 32px;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-suave);
}

/* O item ativo do TECLADO usa o mesmo realce do item selecionado das listas —
   é a mesma ideia, e quem navega com seta espera reconhecer a marca. */
.busca-global__item--ativo,
.busca-global__item:focus-visible {
  background: var(--cor-acao-suave);
  box-shadow: inset 3px 0 0 var(--cor-acao);
  outline: none;
}

.busca-global__item--atalho .busca-global__icone {
  background: var(--cor-acao-suave);
  color: var(--cor-acao);
}

.busca-global__mais {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-acao);
}
.busca-global__mais:hover { background: var(--cor-fundo-sutil); text-decoration: none; }
.busca-global__mais--ativo { background: var(--cor-acao-suave); }

.busca-global__dica { padding: var(--esp-4); margin: 0; }

.busca-global__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-6) var(--esp-4);
  text-align: center;
}
.busca-global__vazio-icone { color: var(--cor-texto-fraco); }

/* Na página /busca o miolo é o mesmo, sem a sombra e sem o teto de altura. */
.busca-global__pagina { padding: 0; overflow: hidden; }
.busca-global__pagina .busca-global__grupo:first-child .busca-global__titulo { border-top: 0; }

@media (max-width: 760px) {
  .busca-global { max-width: none; }
  .busca-global__painel { max-height: 60vh; }
}