/* GERADO por scripts/ui-sync.sh a partir de @jabutee/ui 0.2.0 (v0.2.0). Não edite aqui. */
/* Origem: os@b56335b1 packages/ui/src/escolha.css */
/**
 * 🔽 A FOLHA DA `Escolha` (`@filipeos/ui/escolha`).
 *
 * 📦 **Saiu do `estilo.css` do Kula em 03/09/2026**, junto com o componente,
 * quando o Kairos passou a usar o mesmo seletor no lugar do `<select>` nativo.
 * Os valores são os do Kula, byte a byte: esta é a peça que os dois apps já
 * mostravam, e a subida não é hora de reabrir escolha de desenho.
 *
 * ⚠️ **O `.campo` NÃO mora aqui.** A moldura do campo é de cada app (o Kula e o
 * Kairos declaram o seu, com padding e raio próprios), e o que esta folha faz é
 * só encaixar o campo do app dentro da caixa da `Escolha`. Trazer `.campo` para
 * o pacote mudaria a aparência de dezenas de formulários que não pediram nada.
 *
 * 📐 A ordem de import no app: esta folha ANTES da folha local, para o app
 * continuar podendo ajustar a peça no contexto dele (`.triar-sec .escolha` etc.).
 */

.escolha { position: relative; display: block; }
.escolha > .campo { width: 100%; }
/* Dentro da célula, a Escolha recebe a MESMA compensação do campo direto
   (medido em 20/08: sem ela, o texto nascia 7px à direita dos vizinhos e a
   moldura tinha outra geometria — a mesma peça com dois acabamentos). */
.tabela td .escolha { margin-left: -4px; width: calc(100% + 4px); }
.tabela td .escolha > .campo { padding-left: 4px; padding-right: 4px; }
/* `fixed` para escapar do recorte do quadro; a posição vem do JS, que também
   decide se abre para cima ou para baixo. */
.escolha .lista {
  position: fixed; z-index: 70; min-width: 200px;
  max-height: 260px; overflow-y: auto; display: grid; padding: 4px;
  border: 1px solid var(--jb-hair); border-radius: var(--jb-radius-md);
  background: color-mix(in srgb, var(--jb-text) 6%, var(--jb-ground));
  box-shadow: var(--jb-shadow-overlay);
}
/* A lista NO FLUXO (Escolha `inline`): dentro de um popover, flutuar tapa o
   campo de baixo. Aqui ela empurra, o popover cresce, e nada some. */
.escolha .lista.no-fluxo {
  position: static; margin-top: 4px; width: 100%; min-width: 0;
  max-height: 190px;
}
.escolha .opcao {
  text-align: left; padding: 5px 9px; border: none; background: none; cursor: pointer;
  border-radius: var(--jb-radius-sm); color: var(--jb-text);
  font-family: var(--jb-font-body); font-size: var(--jb-size-small); white-space: nowrap;
}
.escolha .opcao.on { background: var(--jb-surface-2); }
.escolha .opcao.nova { color: var(--jb-accent-2); }
.escolha .opcao.empresa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.escolha .marca-empresa {
  font-family: var(--jb-font-body); font-size: var(--jb-size-micro); color: var(--jb-text-3);
  letter-spacing: var(--jb-tracking-label);
}
.escolha .opcao.limpar { color: var(--jb-text-3); border-top: 1px solid var(--jb-hair); margin-top: 3px; padding-top: 7px; }
.escolha .opcao.vazia { color: var(--jb-text-3); cursor: default; font-size: var(--jb-size-mini); }