/* ============================================================
   TOPO v8 SITE-WIDE (TOPO_0708) — mesmas regras do mapa, agora no base.html.
   O mapa mantém as suas próprias (mapa.css) porque lá o 🌗 é humor.
   Aqui mora o extra que o mapa não tem: o dropdown de resultados da busca.
   ============================================================ */

.clima-topo { font-size: .8rem; color: var(--mudo); white-space: nowrap; align-self: center; margin-right: 2px; }
.botao-eu { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.topo-busca { display: none; flex: 1; align-items: center; gap: 8px; min-width: 0; position: relative; }
.topo-busca input {
  flex: 1; min-width: 0; font: inherit; font-size: .88rem; color: var(--texto);
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  border: var(--borda-vidro); border-radius: 999px; padding: 8px 16px; outline: none;
}
.topo-busca input::placeholder { color: var(--mudo); }
.topo-busca .tb-fechar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font: inherit; color: var(--texto);
  background: color-mix(in srgb, var(--texto) 7%, transparent); border: var(--borda-vidro);
}
header.topo.buscando .logo, header.topo.buscando .topo-acoes { display: none; }
header.topo.buscando .topo-busca { display: flex; }

/* dropdown de resultados: a busca NAVEGA (fora do mapa não há pins pra filtrar) */
.tb-lista {
  display: none; position: absolute; left: 0; right: 44px; top: calc(100% + 10px);
  z-index: 60; margin: 0; padding: 6px; list-style: none; max-height: 58vh; overflow-y: auto;
  border-radius: var(--radius-md); background: var(--vidro-forte);
  backdrop-filter: blur(var(--blur)) saturate(1.15);
  border: var(--borda-vidro); box-shadow: var(--sombra);
}
.tb-lista.tem { display: block; }
.tb-lista li { list-style: none; }
.tb-lista a {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 12px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--texto);
}
.tb-lista a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tb-lista a strong { font-size: .9rem; font-weight: 600; }
.tb-lista a span { font-size: .74rem; color: var(--mudo); }
.tb-vazio { padding: 12px; font-size: .84rem; color: var(--mudo); text-align: center; }

/* SELO_1107: verificado em destaque na busca do topo */
.tb-selo { color: #35c26a; font-style: normal; font-weight: 800; }