/* ==========================================================================
   SGP — Design System · Camada 12: seletor com busca (.seletor)

   O combobox único (F13): busca no servidor, chip do escolhido, variante
   múltipla com vários chips. Substitui o <select> gigante que cada formulário
   desenhava com a coleção inteira dentro.

   A caixa imita o .campo__controle (mesma borda, mesmo raio, mesmo foco) para
   que um seletor e um campo de texto lado a lado tenham a MESMA altura visual;
   quem cresce é a caixa, conforme os chips entram.
   ========================================================================== */

.seletor {
  position: relative;
  /* item de grid/flex não encolhe abaixo do conteúdo sem isto — é a causa raiz
     do "campo cortado" que aparece em Listas e no layout mestre-detalhe. */
  min-width: 0;
}

.seletor__caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  min-height: 38px;
  padding: var(--esp-1) var(--esp-2);
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.seletor__caixa:hover { border-color: var(--cor-texto-fraco); }

.seletor__caixa:focus-within {
  border-color: var(--cor-foco);
  box-shadow: var(--sombra-foco);
}

.seletor__chips {
  display: contents;
}

.seletor__entrada {
  flex: 1 1 8rem;
  min-width: 6rem;
  border: 0;
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-md);
  padding: var(--esp-1) 0;
}

.seletor__entrada:focus { outline: none; }
.seletor__entrada::placeholder { color: var(--cor-texto-fraco); }

/* --- Chip do item escolhido ---------------------------------------------- */

.seletor__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: 100%;
  padding: 2px var(--esp-1) 2px var(--esp-2);
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
  border: 1px solid var(--cor-acao);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: var(--altura-apertada);
}

.seletor__chip-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seletor__chip-cor {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.seletor__chip-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: var(--texto-lg);
  line-height: 1;
  cursor: pointer;
}

.seletor__chip-remover:hover { background: rgba(0, 0, 0, .08); }
.seletor__chip-remover:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

/* --- Resultados -----------------------------------------------------------

   A lista NÃO é `position: absolute` dentro do campo, e isso é deliberado:
   `.cartao` (03_componentes.css) tem `overflow: hidden` para arredondar os
   cantos, e `.tres-colunas__coluna` tem `overflow-y: auto` — os dois cortariam
   o menu no rodapé do cartão, que é onde formulário de verdade mora. A lista
   vai para a CAMADA DE TOPO (popover nativo) e é posicionada por coordenadas
   pelo Stimulus; onde o navegador não tiver popover, `position: fixed` já
   escapa do `overflow: hidden` do mesmo jeito.
   -------------------------------------------------------------------------- */

.seletor__resultados {
  position: fixed;
  z-index: var(--z-dropdown);
  /* `inset: auto` e `margin: 0` neutralizam o estilo de fábrica de [popover],
     que centraliza o elemento na tela. */
  inset: auto;
  margin: 0;
  padding: 0;
  display: block;
  width: 20rem;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
}

.seletor__resultados[hidden] { display: none; }
.seletor__resultados:empty { display: none; }

.seletor__lista {
  list-style: none;
  margin: 0;
  padding: var(--esp-1);
}

.seletor__opcao {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--raio-xs);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-md);
  text-align: left;
  cursor: pointer;
}

.seletor__opcao:hover,
.seletor__opcao--ativa {
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
}

.seletor__opcao:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.seletor__opcao-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seletor__opcao-detalhe {
  flex: none;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.seletor__opcao--criar {
  border-top: 1px solid var(--cor-borda);
  border-radius: 0;
  color: var(--cor-acao-forte);
  font-weight: var(--peso-medio);
}

.seletor__criar { padding: 0 var(--esp-1) var(--esp-1); }

.seletor__aviso {
  margin: 0;
  padding: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

/* --- Sugestão antes de criar (o anti-"Saúde/saude") ----------------------- */

.seletor__sugestao { padding: var(--esp-1); }

.seletor__sugestao-titulo {
  margin: 0;
  padding: var(--esp-2) var(--esp-3) 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
}