@layer componentes {
  #form-busca,
  .busca {
    display: flex;
    flex: 1 1 240px;
    align-items: center;
    gap: var(--espaco-gap-estreito);
    min-width: 0;
  }

  #busca,
  .campo-busca {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--alvo);
    padding: var(--espaco-em-0-4) var(--espaco-em-0-8);
    border: var(--borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
  }

  #microfone,
  #buscar {
    flex: 0 0 auto;
  }

  #microfone[data-estado="ouvindo"],
  .botao[data-estado="ouvindo"] {
    background: var(--cor-selecionado);
    font-family: var(--titulo);
  }
}