<%# Zona "Filtros" — busca e o rótulo do cabeçalho do PDF.
    O seletor de veículo saiu daqui para o _veiculos.html.erb, que mostra a lista
    inteira; aqui fica só o que age sobre a FOLHA em edição. %>
<div class="bg-[#111] border border-white/5 rounded-2xl p-4 space-y-4">
  <div class="grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_minmax(0,280px)] gap-3">
    <div>
      <label class="block text-sm font-medium text-gray-300 mb-1.5">Buscar nesta folha</label>
      <%# `min-w-0` no input é o que impede rolagem lateral no celular: um <input>
          tem largura intrínseca (~20 caracteres) e `flex-1` NÃO encolhe abaixo
          dela, porque o `min-width` padrão de um item flex é `auto`. Com o botão
          ao lado, o par estourava para 487px numa tela de 393px e levava a página
          junto. O `flex-wrap` é a segunda rede: em tela muito estreita o botão
          desce em vez de espremer o campo. %>
      <div class="flex flex-wrap gap-2">
        <input type="search" placeholder="NF, nome ou bairro/rua…"
               data-romaneio-target="busca" data-action="input->romaneio#filtrar"
               class="flex-1 min-w-0 bg-[#1a1a1a] border border-white/10 rounded-xl px-3 py-3 text-white
                      placeholder-gray-600 focus:outline-none focus:border-orange-500 min-h-[48px]">
        <%# Rótulo que descreve o que o controle faz (diretriz 2): limpa a BUSCA,
            não o romaneio. %>
        <button type="button" data-action="romaneio#limparBusca"
                class="px-4 min-h-[48px] bg-[#1a1a1a] border border-white/10 rounded-xl
                       text-gray-300 hover:text-white hover:bg-[#242424] whitespace-nowrap">
          Limpar busca
        </button>
      </div>
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-300 mb-1.5">
        PLANO <span class="text-gray-500 font-normal">— canto direito do PDF</span>
      </label>
      <input type="text" value="<%= @romaneio.rotulo_plano %>"
             data-romaneio-target="rotulo" data-action="change->romaneio#salvarRotulo"
             class="w-full bg-[#1a1a1a] border border-white/10 rounded-xl px-3 py-3 text-white
                    focus:outline-none focus:border-orange-500 min-h-[48px]">
    </div>
  </div>

  <%# Contador: no programa original ele fica no rodapé da tabela ("0 registros")
      e é como se percebe que a busca escondeu tudo — sem ele, a tabela vazia
      parece plano vazio. %>
  <%# Sem um segundo alvo "status" aqui: ele já existe no _tabela.html.erb
      ("Alterações salvam sozinhas") e o Stimulus devolveria só o primeiro. %>
  <p class="text-xs text-gray-500" data-romaneio-target="contador">
    <%= @linhas.size %> <%= @linhas.size == 1 ? 'parada' : 'paradas' %> nesta folha
  </p>
</div>
