/* Busca, sugestoes, mapa e formularios com JavaScript (js/busca.js, js/mapa.js e js/formularios.js).
   Usa os tokens e os componentes do base.css e as classes da listagem (listagem.css); aqui fica so o que o
   JavaScript desenha: sugestoes, filtros escolhidos, estado sem resultado, marcadores e paineis do mapa (sistema
   visual 6.18) e o pedido de nome e telefone antes do WhatsApp da ficha. Mobile first; troca em 60em. */

/* --- /busca --- */
.busca-sem-js { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.busca-sem-js .aviso-estoque > svg { flex: none; }
.busca-campo { margin-top: 24px; padding: 20px clamp(16px, 2.5vw, 24px); display: flex; flex-direction: column; gap: 8px; }
.busca-campo__linha { display: flex; flex-wrap: wrap; gap: 12px; }
.busca-campo__linha .sugestoes-ancora, .busca-campo__linha > input { flex: 999 1 260px; min-width: 0; }
.busca-campo__linha .botao { flex: 1 1 140px; }
.busca-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.busca-ativos__titulo { flex: 0 0 100%; margin: 0; }
.busca-ativos__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.busca-ativo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 16px; font: inherit; font-size: 15px;
  font-weight: 600; line-height: 1.2; color: var(--cor-primaria-escura); background: var(--cor-primaria-suave);
  border: 1.5px solid var(--cor-primaria); border-radius: 999px; cursor: pointer;
}
.busca-ativo:hover { background: var(--cor-superficie); }
.busca-ativo:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.busca-carregando { margin: 0; color: var(--cor-texto-suave); }
.busca-carregando[hidden] { display: none; }
/* O aviso cita o texto como foi escrito: uma palavra longa sem espaco quebra em qualquer ponto, sem alargar a pagina. */
.busca-nota { margin: 0; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.busca-vazio { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.busca-vazio__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.busca-vazio__opcao { min-height: 44px; padding: 0; font: inherit; font-weight: 600; color: var(--cor-primaria); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.busca-vazio__opcao:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
[data-busca-titulo]:focus { outline: none; }

/* --- Sugestoes (combobox de bairro, cidade e condominio) --- */
.sugestoes-ancora { position: relative; }
.sugestoes {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: min(320px, 90vw); max-height: 360px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; text-align: left; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno); box-shadow: 0 8px 24px rgba(28,28,28,0.14);
}
.sugestoes[hidden] { display: none; }
.sugestoes li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.sugestoes li[aria-selected="true"], .sugestoes li:hover { background: var(--cor-fundo); }
.sugestoes__nome { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--cor-texto); }
.sugestoes__detalhe { font-size: 14px; line-height: 1.35; color: var(--cor-texto-suave); }

/* --- Mapa (sistema visual 6.18, agora com o mapa de verdade) --- */
.mapa--carregado { padding: 0; background: #ECE5D9; }
/* Duas classes: o maplibre-gl.css (carregado depois) poe .maplibregl-map { position: relative } no mesmo
   elemento, e o mapa ficaria com 0 px de altura. */
.mapa-tela, .mapa-tela.maplibregl-map { position: absolute; inset: 0; }
.mapa-abrir { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--cor-texto-suave); }
.mapa-abrir[hidden] { display: none; }
.mapa-abrir__texto { margin: 0; max-width: 34ch; line-height: 1.5; }
.mapa-abrir--sobre { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); }
.mapa-abrir__botao { background: var(--cor-superficie); }
.mapa-falha {
  position: absolute; z-index: 4; left: 12px; right: 12px; top: 12px; margin: 0; padding: 10px 14px; font-size: 15px; line-height: 1.45;
  color: var(--cor-texto); background: var(--cor-superficie); border-left: 4px solid var(--cor-destaque-escura); border-radius: 6px; box-shadow: var(--sombra-foto);
}
.ficha-mapa__legenda { z-index: 2; }
.mapa-buscar-area {
  position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--cor-texto);
  background: var(--cor-superficie); border: 1.5px solid var(--cor-borda-campo); border-radius: 999px; box-shadow: var(--sombra-foto); cursor: pointer;
}
.mapa-buscar-area[hidden] { display: none; }
.mapa-buscar-area:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.mapa-marcador {
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; font: inherit;
  background: transparent; border: 0; cursor: pointer;
}
.mapa-marcador__pilula {
  display: inline-block; padding: 5px 10px; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--cor-texto);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-campo); border-radius: 999px; box-shadow: var(--sombra-foto);
}
.mapa-marcador__pilula--aprox { border-style: dashed; }
.mapa-marcador[aria-pressed="true"] { z-index: 2; }
.mapa-marcador[aria-pressed="true"] .mapa-marcador__pilula, .mapa-marcador--destaque .mapa-marcador__pilula {
  color: var(--cor-sobre-primaria); background: var(--cor-primaria); border-color: var(--cor-primaria);
}
.mapa-marcador:focus-visible { outline: none; }
.mapa-marcador:focus-visible .mapa-marcador__pilula, .mapa-grupo:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.mapa-grupo {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; font: inherit; font-size: 14px; font-weight: 700;
  color: #FFFFFF; background: var(--cor-rodape); border: 2px solid #FFFFFF; border-radius: 999px; box-shadow: var(--sombra-foto); cursor: pointer;
}
.mapa-pino { width: 22px; height: 22px; background: var(--cor-primaria); border: 4px solid #FFFFFF; border-radius: 999px; box-shadow: var(--sombra-foto); }
.mapa-escolhido {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 36px; max-height: calc(100% - 72px); overflow-y: auto; padding: 14px 52px 14px 16px;
  display: flex; flex-direction: column; gap: 4px; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio); box-shadow: var(--sombra-alta);
}
.mapa-escolhido p { margin: 0; }
.mapa-escolhido__titulo { font-size: 16px; font-weight: 700; line-height: 1.3; }
.mapa-escolhido__preco strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.mapa-escolhido__acoes { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mapa-escolhido__fechar { position: absolute; top: 4px; right: 4px; }
.mapa-escolhido__lista { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mapa-escolhido__lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; }
.mapa-escolhido__lista span { font-size: 14px; color: var(--cor-texto-suave); }
.cartao--escolhido { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }
.cartao--escolhido .cartao__corpo::before {
  content: "Selecionado pelo mapa"; align-self: flex-start; padding: 2px 10px; font-size: 13px; font-weight: 700; color: var(--cor-sobre-primaria);
  background: var(--cor-primaria); border-radius: 999px;
}
/* Imovel selecionado pelo mapa, no topo da lista ao lado do mapa (js/mapa.js; pedido do usuario de 2026-10-20). */
.mapa-selecionado {
  scroll-margin-top: 16px; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 12px;
  background: var(--cor-superficie); border: 2px solid var(--cor-primaria); border-radius: var(--raio-medio); box-shadow: var(--sombra-alta);
}
.mapa-selecionado__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 4px; }
.mapa-selecionado__titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--cor-primaria); }
.mapa-selecionado__titulo svg { flex: none; }
.mapa-selecionado__cartao { grid-template-columns: minmax(0, 1fr); }
.mapa-selecionado--varios .mapa-selecionado__cartao { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* Um imovel so: o cartao ocupa a largura toda da lista, deitado, com a foto a esquerda e os dados a direita (pedido do
   usuario de 2026-10-20: "ocupando essa parte inteira para nao ficar um vazio"). As setas de fotos (js/base.js) e os
   selos ficam so sobre a foto; o coracao fica no canto do cartao. */
.mapa-selecionado:not(.mapa-selecionado--varios) .cartao__link { flex-direction: row; align-items: stretch; }
.mapa-selecionado:not(.mapa-selecionado--varios) .cartao .foto { flex: 0 0 52%; align-self: flex-start; border-radius: 13px 0 0 13px; }
.mapa-selecionado:not(.mapa-selecionado--varios) .cartao__corpo { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 10px; padding: 24px 64px 24px 24px; }
.mapa-selecionado:not(.mapa-selecionado--varios) .cartao__titulo { font-size: 19px; }
.mapa-selecionado:not(.mapa-selecionado--varios) .cartao__preco strong { font-size: 26px; }
.mapa-selecionado:not(.mapa-selecionado--varios) .selos--sobre-foto { right: auto; max-width: calc(52% - 24px); }
.mapa-selecionado:not(.mapa-selecionado--varios) .cartao__fotos { inset: 0 auto auto 0; width: 52%; }
.maplibregl-ctrl-attrib { font-size: 12px; }

/* --- Formularios: as mensagens que o JavaScript cria quando a pagina nao tem o lugar delas e o pedido do WhatsApp
   usam as classes do base.css (campo-isca, erros e aceite) --- */
[data-erro-gerado][hidden], .dialogo-whatsapp [hidden] { display: none; }
.formulario__turnstile:empty { display: none; }

/* --- Antes do WhatsApp da ficha: nome e telefone --- */
.dialogo-whatsapp {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; color: var(--cor-texto); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-alta);
}
.dialogo-whatsapp::backdrop { background: rgba(28,28,28,0.55); }
.dialogo-whatsapp__form { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 4vw, 28px); }
.dialogo-whatsapp__form p { margin: 0; }
.dialogo-whatsapp__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.dialogo-whatsapp__acoes .botao { flex: 1 1 200px; }

@media (prefers-reduced-motion: reduce) {
  .mapa-buscar-area, .mapa-escolhido { transition: none; }
}