/* ==========================================================================
   Select buscável — a caixa "Digite para buscar…" que o
   select_buscavel_controller põe acima de todo <select> com mais de 10 opções
   (Adendo 2, item 1). Só tokens do design system.
   ========================================================================== */

/* A caixa ocupa a largura do select que ela filtra e fica colada nele: é uma
   peça só, e não mais um campo do formulário. */
.select-buscavel__busca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.select-buscavel__campo {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: var(--esp-1) var(--esp-3) var(--esp-1) var(--esp-8);
  font-family: inherit;
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
  color: var(--cor-texto);
  background-color: var(--cor-fundo-afundado);
  /* Lupa desenhada, sem imagem externa. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236f7b8b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M13.5 13.5L17 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--esp-3) center;
  background-size: 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
}
.select-buscavel__campo::placeholder { color: var(--cor-texto-fraco); }
.select-buscavel__campo:focus {
  outline: none;
  border-color: var(--cor-acao);
  box-shadow: var(--sombra-foco);
  background-color: var(--cor-fundo-elevado);
}
.select-buscavel__campo[disabled] { cursor: not-allowed; opacity: 0.6; }

/* "3 opções encontradas": para o leitor de tela (role=status) e para quem
   olha. Vazio, não ocupa lugar. */
.select-buscavel__status {
  font-size: var(--texto-xs);
  line-height: var(--altura-normal);
  color: var(--cor-texto-fraco);
  overflow-wrap: anywhere;
}
.select-buscavel__status:empty { display: none; }