Modificação na area do motorista

app/views/consolidacoes/_por_motorista.html.erb

@@ -46,10 +46,15 @@
     <p class="text-gray-500 text-sm mt-1">Ajuste as datas acima — o recorte pega a consolidação inteira dentro da faixa.</p>
   </div>
 <% else %>
+  <%# Em celular/monitor pequeno vira carrossel de 10 em 10; em tela grande sai a
+      lista inteira. O motorista com a composição aberta define a página inicial
+      (data-carrossel-inicial) — senão o clique dele cairia numa página escondida. %>
+  <div data-controller="carrossel" data-carrossel-tamanho-value="10">
   <div class="space-y-3">
     <% @totais.linhas.each do |linha| %>
       <% aberto = @detalhe_motorista == linha[:motorista] %>
-      <div class="bg-[#1a1a1a] border rounded-xl overflow-hidden transition-colors <%= aberto ? 'border-orange-500' : 'border-[#2a2a2a] hover:border-orange-500/60' %>">
+      <div data-carrossel-target="item" data-carrossel-inicial="<%= aberto %>"
+           class="bg-[#1a1a1a] border rounded-xl overflow-hidden transition-colors <%= aberto ? 'border-orange-500' : 'border-[#2a2a2a] hover:border-orange-500/60' %>">
 
         <%# Cabeçalho do motorista — o clique abre/fecha a composição %>
         <%= link_to consolidacoes_path(ctx.merge(detalhe: (aberto ? nil : linha[:motorista])).compact_blank),
@@ -121,6 +126,10 @@
     <% end %>
   </div>
 
+    <%= render 'shared/carrossel_controles',
+            anterior: 'Motoristas anteriores', proximo: 'Próximos motoristas' %>
+  </div>
+
   <p class="text-gray-500 text-xs mt-4">
     <%= icone :dica %>
     <% if @status_totais == 'finalizada' %>