/* Visão do Campo — a busca de lugar no mapa (busca.js).
   O "search bar" do Material 3 no vidro escuro do painel do mapa: ícone de lupa, campo, ×.
   - computador: o campo fica sempre à vista, AO LADO dos filtros, dentro do painel (que é flex e
     quebra a linha sozinho — nada é posto por cima de controle nenhum);
   - celular e tablet (≤ 900 px): só a lupa, do tamanho do alvo de dedo; tocada, o campo abre por
     cima do topo do mapa (dentro do painel, abaixo da folha no empilhamento: a folha nunca é coberta).
   Tokens de estilo.css: --alvo (40/48), --r-s/--r-m/--r-full, --vidro*, --t-*. */

.busca-lugar { position: relative; align-self: flex-end; flex: 0 1 auto; min-width: 0; }
.busca-lupa { display: none; }

.busca-campo { display: flex; align-items: center; gap: 4px; width: clamp(220px, 24vw, 320px); height: var(--alvo);
  padding: 0 4px 0 12px; border: 1px solid var(--vidro-linha); border-radius: var(--r-s); background: var(--vidro);
  color: var(--vidro-tinta); backdrop-filter: blur(8px); }
.busca-campo:focus-within { border-color: rgba(240,242,237,0.6); background: var(--vidro-solido); }
.busca-icone { display: inline-flex; flex: 0 0 auto; color: rgba(240,242,237,0.75); }
.busca-input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: #F0F2ED;
  font: 400 var(--t-body-m) var(--ui); outline: none; padding: 0 4px; }
.busca-input::placeholder { color: rgba(240,242,237,0.6); }
.busca-limpar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px;
  border: 0; padding: 0; border-radius: var(--r-full); background: transparent; color: rgba(240,242,237,0.8); cursor: pointer; position: relative; }
.busca-limpar::after { content: ''; position: absolute; inset: -8px; }   /* alvo de 48 */
.busca-limpar:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }
.busca-limpar:focus-visible, .busca-lupa:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* a lista: vidro SÓLIDO (flutua sobre o mapa e precisa ser lida), como o menu do filtro */
/* da largura do campo: mais larga, a lista passaria por baixo da lateral, que fica ao lado do mapa */
.busca-lista { position: absolute; top: calc(100% + 6px); left: 0; z-index: 600; width: 100%; min-width: 240px;
  max-width: calc(100vw - 32px); max-height: min(60vh, 480px); overflow-y: auto; padding: 6px;
  border: 1px solid var(--vidro-linha); border-radius: var(--r-s); background: var(--vidro-solido); color: var(--vidro-tinta-solida);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3); overscroll-behavior: contain; }
.busca-grupo + .busca-grupo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vidro-linha); }
.busca-grupo-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 4px 10px;
  font: 600 var(--t-label-s) var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(240,242,237,0.65); }
.busca-limpar-hist { border: 0; background: transparent; color: rgba(240,242,237,0.85); font: 500 var(--t-label-s) var(--ui); text-transform: none;
  letter-spacing: 0; min-height: 32px; padding: 0 8px; border-radius: var(--r-s); cursor: pointer; white-space: nowrap; flex: 0 0 auto; text-decoration: underline; text-underline-offset: 2px; }
.busca-limpar-hist:hover { background: rgba(255,255,255,0.08); }
.busca-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: var(--r-s); cursor: pointer; }
.busca-item:hover, .busca-item[aria-selected="true"] { background: rgba(240,242,237,0.12); }
.busca-item-icone { display: inline-flex; flex: 0 0 auto; color: rgba(240,242,237,0.7); }
.busca-item-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.busca-item-texto b { font: 600 var(--t-body-m) var(--ui); color: #F0F2ED; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-item-detalhe { font: 400 var(--t-body-s) var(--ui); color: rgba(240,242,237,0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px; font: 400 var(--t-body-s)/1.45 var(--ui); color: rgba(240,242,237,0.8); }
.busca-msg-erro { color: #F6B1A7; }
.busca-de-novo { min-height: var(--alvo); padding: 0 16px; border: 1px solid rgba(240,242,237,0.5); border-radius: var(--r-s); background: transparent;
  color: #F0F2ED; font: 600 var(--t-body-s) var(--ui); cursor: pointer; }
.busca-de-novo:hover { background: rgba(255,255,255,0.08); }
/* carregando: duas linhas em forma, sem texto que mude de lugar quando o resultado chega */
.busca-esqueleto { display: flex; flex-direction: column; gap: 6px; min-height: 48px; justify-content: center; padding: 6px 10px 6px 42px; }
.busca-esqueleto i { display: block; height: 10px; border-radius: var(--r-s); background: rgba(240,242,237,0.12); animation: busca-pulso 1.1s ease-in-out infinite; }
.busca-esqueleto i:first-child { width: 55%; }
.busca-esqueleto i:last-child { width: 35%; height: 8px; }
@keyframes busca-pulso { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .busca-esqueleto i { animation: none; } }
/* o aviso para o leitor de tela ("Buscando…", "3 lugares encontrados."): fora da vista */
.busca-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- celular e tablet */
@media (max-width: 900px) {
  .busca-lugar { align-self: stretch; flex: 0 0 auto; }
  .busca-lupa { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo);
    padding: 0; border: 1px solid var(--vidro-linha); border-radius: var(--r-s); background: var(--vidro); color: var(--vidro-tinta);
    backdrop-filter: blur(8px); cursor: pointer; }
  .busca-lugar:not(.aberta) .busca-campo, .busca-lugar:not(.aberta) .busca-lista { display: none; }
  /* aberta: o campo cobre a faixa de cima do painel — não a folha (que empilha acima do painel)
     nem o seletor de propriedade (que mora na barra do topo, fora do mapa) */
  .busca-lugar.aberta { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
  .busca-lugar.aberta .busca-lupa { display: none; }
  .busca-lugar.aberta .busca-campo { width: 100%; background: var(--vidro-solido); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
  /* a lista fica ACIMA da folha (que desce à posição recolhida enquanto ela está aberta, busca.js) e rola por dentro:
     o topo dela fica a ~130 px do alto da tela (barra + campo); o fundo, 16 px acima da folha (QA final, M8) */
  .busca-lista { width: 100%; max-width: none; max-height: max(160px, calc(100dvh - var(--folha, 52vh) - 150px)); overflow-y: auto; overscroll-behavior: contain; }
  #painel-mapa:has(> .busca-lugar.com-lista), #painel-mapa:has(> .busca-lugar.aberta) { z-index: 1201; }
  /* o 1201 só vale fora do mapa se o mapa deixar de ser um contexto de empilhamento enquanto a lista está aberta:
     deitado, a folha recolhida ainda ocupava a metade de baixo e cobria os resultados. O Leaflet (zoom, panes,
     atribuição) fica num contexto próprio, abaixo da folha, como sempre. */
  .mapa-area:has(> #painel-mapa > .busca-lugar.com-lista) { z-index: auto; }
  .mapa-area:has(> #painel-mapa > .busca-lugar.com-lista) > #agro-map { z-index: 0; }
  /* com a barra de ferramentas, a linha dos filtros divide a fileira com a lupa (fechada) */
  #painel-mapa:not(.filtros-abertos):has(> .busca-lugar) > .filtros-linha { flex: 1 1 0%; min-width: 0; }
}
/* tablet em paisagem com a lateral aberta: os filtros viram a mesma linha do celular; o campo divide a fileira */
@media (min-width: 901px) and (max-width: 1200px) {
  #painel-mapa:not(.filtros-abertos):has(> .busca-lugar) > .filtros-linha { flex: 1 1 0%; min-width: 0; }
}

/* com a lista ou o campo do celular abertos, o painel sobe acima dos controles do Leaflet (zoom, "Imagem por
   área", z-index 800–1000 dentro do mapa): sem isto eles apareciam POR CIMA dos resultados. O mapa inteiro
   (`.mapa-area`) é um contexto de empilhamento próprio, então a folha e a lateral continuam por cima. */
#painel-mapa:has(> .busca-lugar.com-lista), #painel-mapa:has(> .busca-lugar.aberta) { z-index: 1001; }

/* na aba Alterações o painel dos índices some (alteracoes.css); a busca continua valendo */
.pagina.em-alteracoes-mapa #painel-mapa:has(> .busca-lugar) { display: flex; }
.pagina.em-alteracoes-mapa #painel-mapa > :not(.busca-lugar) { display: none; }

/* ------------------------------------------------------------- o marcador temporário */
.busca-pino { background: none; border: 0; }
.busca-pino::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: #F0F2ED; border: 3px solid var(--verde); box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.busca-pino-corpo { position: absolute; left: 0; top: -12px; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px;
  max-width: 260px; padding: 4px 4px 4px 12px; border-radius: var(--r-s); background: var(--vidro-solido); color: #F0F2ED;
  font: 600 var(--t-body-s) var(--ui); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.busca-pino-icone { display: inline-flex; color: #8FD3A6; }
.busca-pino-nome { overflow: hidden; text-overflow: ellipsis; }
.busca-pino-tirar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px;
  border: 0; border-radius: var(--r-full); background: rgba(255,255,255,0.1); color: #F0F2ED; cursor: pointer; }
.busca-pino-tirar::after { content: ''; position: absolute; inset: -6px; }   /* alvo de 40 */
.busca-pino-tirar:hover { background: rgba(255,255,255,0.2); }
/* no cadastro de área: um anel discreto, que não recebe toque (o toque é do desenho) */
.busca-pino.discreto, .busca-pino.discreto * { pointer-events: none; }
.busca-pino.discreto::before { width: 8px; height: 8px; left: -4px; top: -4px; border-width: 0; background: #FFFFFF; }
.busca-pino-anel { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4); box-sizing: border-box; }