<%# Lista do ranking de motoristas — markup COMPARTILHADO pelas abas "Estimado" e
    "Consolidado" do dashboard. Os dois conjuntos têm a mesma forma
    (:nome, :valor, :entregas); só muda a origem dos números, então duplicar o
    markup faria as duas abas divergirem visualmente na primeira alteração.

    Locais: itens (array de hashes), vazio (texto do estado sem dados). %>
<% if itens.any? %>
  <div class="space-y-3">
    <%# A barra é proporcional ao VALOR, que é o número pelo qual as duas abas são
        ordenadas — assim ela sempre encurta de cima para baixo.
        ⚠️ Não voltar a usar :entregas aqui: na aba Estimado dá no mesmo (valor =
        qtd × preço), mas na Consolidada quem tem mais entregas nem sempre tem o
        maior valor (bônus/retirada/termo mudam o preço unitário) e a barra do 3º
        ficava MAIOR que a do 2º, contradizendo a ordem do ranking.
        Zero vira barra vazia em vez de divisão por zero. %>
    <% max = itens.map { |x| x[:valor].to_f }.max.to_f %>
    <% itens.each_with_index do |m, i| %>
      <div class="flex items-center gap-3">
        <span class="text-xs font-bold w-5 text-center
                     <%= i == 0 ? 'text-yellow-400' : i == 1 ? 'text-gray-300' : i == 2 ? 'text-orange-600' : 'text-gray-400' %>">
          <%= i + 1 %>
        </span>
        <div class="flex-1 min-w-0">
          <div class="flex items-center justify-between mb-1">
            <span class="text-white text-sm font-medium truncate"><%= m[:nome] %></span>
            <span class="text-[#f97316] text-sm font-semibold ml-2 flex-shrink-0">
              <%= moeda(m[:valor]) %>
            </span>
          </div>
          <%# Barra de progresso %>
          <div class="w-full bg-white/5 rounded-full h-1.5">
            <div class="h-1.5 rounded-full bg-[#f97316]"
                 style="width: <%= max.zero? ? 0 : [(m[:valor] / max * 100).round, 100].min %>%"></div>
          </div>
          <span class="text-gray-400 text-xs"><%= m[:entregas] %> entregas</span>
        </div>
      </div>
    <% end %>
  </div>
<% else %>
  <div class="text-center py-8 text-gray-400">
    <div class="mb-2"><%= icone :caminhao, tamanho: 'w-8 h-8', cor: 'text-gray-600', espaco: false %></div>
    <p class="text-sm"><%= vazio %></p>
  </div>
<% end %>
