/* IGP App · busca por empresa (recursos/busca.js): o campo logo depois do player "Hoje em 1 minuto" (ou no topo da aba Hoje),
   as sugestões da base da B3 e as notícias da empresa. Só tokens do app.css (claro e escuro vêm deles), fontes da marca
   (rótulo em maiúsculas pequeno e espaçado, Inter no texto, IBM Plex Mono nos códigos). As notícias usam as classes de Hoje
   (.noticia, .noticia-meta, .noticia-titulo, .cabeca, .ementa) para ficarem iguais às dos cartões. */

.busca-bloco { display: grid; gap: 12px; padding: 0 16px; }
.busca { position: relative; display: grid; gap: 8px; margin: 0; }
.busca-rotulo { color: var(--tinta-3); }

/* o campo: 50 px de altura (alvo de toque e o mesmo das entradas do formulário), texto em 1rem (o iPhone não amplia a tela) */
.busca-caixa { position: relative; display: grid; align-items: center; container-type: inline-size; }
.busca-lupa {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; display: grid; place-items: center;
  color: var(--tinta-3); pointer-events: none;
}
.busca-lupa svg { width: 20px; height: 20px; }
.busca-campo {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 48px 12px 40px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta);
  font: 400 1rem/1.4 var(--f-texto); -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
/* vazio, o botão de limpar não aparece: o exemplo do placeholder ganha a largura toda. Em campo estreito (iPhone), o exemplo
   diminui para caber inteiro; o texto digitado continua em 1rem (abaixo de 16 px o Safari amplia a tela ao focar) */
.busca-campo:placeholder-shown { padding-right: 12px; }
/* o exemplo inteiro ocupa ~23,9 vezes o corpo da letra (Inter): o corpo acompanha a largura do campo (menos lupa e bordas),
   entre 11 px e 1rem */
.busca-campo::placeholder { color: var(--tinta-3); opacity: 1; font-size: clamp(11px, calc((100cqi - 58px) / 24.2), 1rem); }
.busca-campo:focus { outline: none; border-color: var(--marca-tinta); box-shadow: 0 0 0 3px var(--marca-suave); }
.busca-campo:focus-visible { outline: none; }
.busca-campo::-webkit-search-cancel-button, .busca-campo::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.busca-limpar {
  position: absolute; right: 7px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-3); display: grid; place-items: center; cursor: pointer;
}
.busca-limpar::after { content: ""; position: absolute; inset: -4px; }
.busca-limpar svg { width: 18px; height: 18px; }
.busca-limpar:active { background: var(--superficie-2); }
.busca-limpar[hidden] { display: none; }

/* sugestões: lista do sistema logo abaixo do campo (no fluxo da página, o teclado do iPhone não a cobre) */
.busca-sugestoes {
  list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-m); box-shadow: var(--sombra);
}
.busca-sugestoes[hidden] { display: none; }
.busca-op {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center;
  min-height: 48px; padding: 7px 12px; border-radius: 10px; cursor: pointer;
}
.busca-op-nome { font: 600 .96rem/1.3 var(--f-texto); color: var(--tinta); overflow-wrap: anywhere; }
.busca-op-ticker { grid-row: span 2; align-self: center; font-size: .82rem; color: var(--tinta-2); padding: 4px 8px; border-radius: 999px; background: var(--superficie-2); }
.busca-op-setor { font: 400 .78rem/1.3 var(--f-texto); color: var(--tinta-3); }
.busca-op[aria-selected="true"], .busca-op:hover { background: var(--marca-suave); }
.busca-op[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--marca-tinta); }
.busca-op[aria-selected="true"] .busca-op-ticker { background: var(--superficie); color: var(--marca-tinta); }
.busca-op:active { background: var(--superficie-2); }

/* resultado: um cartão no padrão de Hoje */
.busca-resultado {
  display: grid; gap: 10px; padding: 14px 16px 16px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  scroll-margin-top: calc(var(--barra-altura) + env(safe-area-inset-top, 0px) + 8px);
}
.busca-resultado[hidden] { display: none; }
.busca-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.busca-cabeca-texto { display: grid; gap: 4px; min-width: 0; }
.busca-cabeca-rotulo { color: var(--marca-tinta); }
.busca-titulo { margin: 0; font: 600 1.12rem/1.3 var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); text-wrap: balance; }
.busca-fechar { margin-top: -2px; }
.busca-lista { margin-top: 2px; }
.busca-vazio { font: 500 .96rem/1.45 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; }
.busca-texto { font: 400 .94rem/1.5 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; max-width: 60ch; }
.busca-tentar { justify-self: start; }
.busca-nota { padding-top: 2px; }
.busca-outras { font: 400 .84rem/1.5 var(--f-texto); color: var(--tinta-3); }
.busca-outra {
  position: relative; margin: 0; padding: 0; border: 0; background: none; color: var(--marca-tinta); font: 600 .84rem/1.5 var(--f-texto);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.busca-outra::after { content: ""; position: absolute; inset: -10px -4px; }
.busca-carregando { display: grid; gap: 10px; padding: 4px 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .busca-campo { transition: none; }
}