Modificação na area do motorista

app/views/consolidacoes/_lista.html.erb

@@ -1,8 +1,12 @@
 <%# app/views/consolidacoes/_lista.html.erb — visão por CONSOLIDAÇÃO %>
 <% if @consolidacoes.any? %>
+  <%# Em celular/monitor pequeno a lista vira carrossel de 10 em 10; em tela
+      grande aparece inteira (ver carrossel_controller.js). %>
+  <div data-controller="carrossel" data-carrossel-tamanho-value="10">
   <div class="space-y-3">
     <% @consolidacoes.each do |c| %>
       <%= link_to consolidacao_path(c),
+          data: { carrossel_target: 'item' },
           class: 'block bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500 rounded-xl p-5 transition-colors' do %>
         <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
           <div>
@@ -28,6 +32,10 @@
       <% end %>
     <% end %>
   </div>
+
+    <%= render 'shared/carrossel_controles',
+            anterior: 'Consolidações anteriores', proximo: 'Próximas consolidações' %>
+  </div>
 <% else %>
   <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-12 text-center">
     <p class="mb-4"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>

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' %>

app/views/motorista/dashboard/index.html.erb

@@ -185,21 +185,8 @@
       <% end %>
     </div>
 
-      <%# Setas: alvos grandes (56px) porque a tela é usada de luva/no trânsito.
-          Somem sozinhas quando há uma página só (ver carrossel_controller.js). %>
-      <div data-carrossel-target="controles" class="hidden flex items-center justify-between gap-3 mt-4">
-        <button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
-                class="bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500 text-white rounded-2xl w-14 h-14 flex items-center justify-center"
-                aria-label="Fechamentos anteriores">
-          <%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
-        </button>
-        <span data-carrossel-target="indicador" class="text-gray-300 text-base font-semibold"></span>
-        <button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
-                class="bg-orange-500 hover:bg-orange-600 text-black rounded-2xl w-14 h-14 flex items-center justify-center"
-                aria-label="Próximos fechamentos">
-          <%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
-        </button>
-      </div>
+      <%= render 'shared/carrossel_controles',
+              anterior: 'Fechamentos anteriores', proximo: 'Próximos fechamentos' %>
     </div>
   <% else %>
     <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-10 text-center">

app/views/shared/_carrossel_controles.html.erb

@@ -0,0 +1,24 @@
+<%# app/views/shared/_carrossel_controles.html.erb
+    Setas + indicador do carrossel (ver carrossel_controller.js). Nascem
+    escondidos: quem decide se esta tela é pequena o bastante para paginar é o
+    JS — em monitor grande a lista aparece inteira e estes controles não voltam.
+
+    Alvos de 56px: a tela é usada no celular, em movimento.
+
+    locals: anterior:/proximo: (rótulos acessíveis, opcionais). %>
+<% anterior = local_assigns.fetch(:anterior, 'Itens anteriores') %>
+<% proximo  = local_assigns.fetch(:proximo,  'Próximos itens') %>
+
+<div data-carrossel-target="controles" class="hidden flex items-center justify-between gap-3 mt-4">
+  <button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
+          class="bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500 text-white rounded-2xl w-14 h-14 flex items-center justify-center"
+          aria-label="<%= anterior %>">
+    <%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
+  </button>
+  <span data-carrossel-target="indicador" class="text-gray-300 text-base font-semibold"></span>
+  <button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
+          class="bg-orange-500 hover:bg-orange-600 text-black rounded-2xl w-14 h-14 flex items-center justify-center"
+          aria-label="<%= proximo %>">
+    <%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
+  </button>
+</div>