Modificação na area do motorista

app/javascript/controllers/carrossel_controller.js

@@ -97,7 +97,7 @@ export default class extends Controller {
 
     if (!this.paginando) {
       this.itemTargets.forEach((item) => item.classList.remove("hidden"))
-      if (this.hasControlesTarget) this.controlesTarget.classList.add("hidden")
+      this.controlesTargets.forEach((el) => el.classList.add("hidden"))
       return
     }
 
@@ -109,15 +109,18 @@ export default class extends Controller {
     })
 
     if (!this.hasControlesTarget) return
-    this.controlesTarget.classList.remove("hidden")
+    this.controlesTargets.forEach((el) => el.classList.remove("hidden"))
 
-    if (this.hasIndicadorTarget) {
     // "1–5 de 12" e não "página 1 de 3": quem lê quer saber quantos itens
     // existem, não quantas páginas a tela tem.
-      this.indicadorTarget.textContent = `${inicio + 1}–${Math.min(fim, total)} de ${total}`
+    const rotulo = `${inicio + 1}–${Math.min(fim, total)} de ${total}`
-    }
+    this.indicadorTargets.forEach((el) => { el.textContent = rotulo })
-    if (this.hasAnteriorTarget) this.alternar(this.anteriorTarget, this.pagina === 0)
+
-    if (this.hasProximoTarget)  this.alternar(this.proximoTarget, this.pagina >= this.totalPaginas - 1)
+    // Plural: o mesmo controle aparece em dois layouts (setas laterais em tela
+    // com espaço, barra flutuante no rodapé no celular) e os dois precisam
+    // desabilitar juntos.
+    this.anteriorTargets.forEach((b) => this.alternar(b, this.pagina === 0))
+    this.proximoTargets.forEach((b) => this.alternar(b, this.pagina >= this.totalPaginas - 1))
   }
 
   // Botão de ponta: desabilitado de verdade (não só apagado), para o toque não

app/views/consolidacoes/_lista.html.erb

@@ -2,7 +2,7 @@
 <% 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 data-controller="carrossel" data-carrossel-tamanho-value="10" class="relative sm:px-16">
   <div class="space-y-3">
     <% @consolidacoes.each do |c| %>
       <%= link_to consolidacao_path(c),

app/views/consolidacoes/_por_motorista.html.erb

@@ -49,7 +49,7 @@
   <%# 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 data-controller="carrossel" data-carrossel-tamanho-value="10" class="relative sm:px-16">
   <div class="space-y-3">
     <% @totais.linhas.each do |linha| %>
       <% aberto = @detalhe_motorista == linha[:motorista] %>

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

@@ -149,7 +149,7 @@
   <p class="text-gray-400 text-base mb-3">Cada fechamento abaixo entra na soma do card branco.</p>
 
   <% if @consolidacoes.any? %>
-    <div data-controller="carrossel" data-carrossel-tamanho-value="10">
+    <div data-controller="carrossel" data-carrossel-tamanho-value="10" class="relative sm:px-16">
     <div class="space-y-3">
       <% @consolidacoes.each do |cm| %>
         <% c = cm.consolidacao %>

app/views/shared/_carrossel_controles.html.erb

@@ -1,7 +1,17 @@
 <%# app/views/shared/_carrossel_controles.html.erb
-    Setas + indicador do carrossel (ver carrossel_controller.js). Nascem
+    Controles do carrossel (ver carrossel_controller.js) em DOIS layouts, porque
-    escondidos: quem decide se esta tela é pequena o bastante para paginar é o
+    "seta flutuante na lateral" só funciona onde sobra espaço lateral:
-    JS — em monitor grande a lista aparece inteira e estes controles não voltam.
+
+      • tela com espaço (sm+): setas redondas flutuando FORA dos cards,
+        centralizadas na altura da lista — o container reserva a faixa com
+        `sm:px-16`, senão a seta passa por cima do texto do card;
+      • celular: barra flutuante colada no rodapé (sticky), com as duas setas e
+        o contador no meio. Na largura de um celular não há faixa lateral livre:
+        a seta lateral cobriria o conteúdo, e a barra inferior ainda fica no
+        alcance do polegar.
+
+    ⚠️ O container do carrossel precisa de `relative sm:px-16` — ver os usos em
+    consolidacoes/_lista, _por_motorista e motorista/dashboard/index.
 
     Alvos de 56px: a tela é usada no celular, em movimento.
 
@@ -9,16 +19,47 @@
 <% 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">
+<%# ── Setas laterais (sm+) ─────────────────────────────── %>
+<div data-carrossel-target="controles" class="hidden">
   <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"
+          class="hidden sm:flex absolute top-1/2 -translate-y-1/2 left-0 z-20
+                 w-14 h-14 rounded-full items-center justify-center
+                 bg-[#1a1a1a]/90 backdrop-blur border border-white/15 shadow-lg shadow-black/50
+                 text-white hover:bg-[#1a1a1a] hover:border-orange-500 transition-colors"
           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"
+          class="hidden sm:flex absolute top-1/2 -translate-y-1/2 right-0 z-20
+                 w-14 h-14 rounded-full items-center justify-center
+                 bg-orange-500/90 backdrop-blur border border-orange-400 shadow-lg shadow-black/50
+                 text-black hover:bg-orange-500 transition-colors"
           aria-label="<%= proximo %>">
     <%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
   </button>
+
+  <%# Contador embaixo, centralizado (vale para os dois layouts em sm+). %>
+  <div class="hidden sm:flex justify-center mt-4">
+    <span data-carrossel-target="indicador"
+          class="bg-[#1a1a1a] border border-[#2a2a2a] text-gray-300 text-sm font-semibold rounded-full px-4 py-1.5"></span>
+  </div>
+</div>
+
+<%# ── Barra flutuante no rodapé (celular) ──────────────── %>
+<div data-carrossel-target="controles" class="hidden sm:hidden sticky bottom-4 z-20 mt-4 flex justify-center">
+  <div class="flex items-center gap-3 bg-[#1a1a1a]/95 backdrop-blur border border-white/15
+              shadow-lg shadow-black/60 rounded-full pl-2 pr-2 py-2">
+    <button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
+            class="w-14 h-14 rounded-full flex items-center justify-center bg-[#0a0a0a] border border-white/15 text-white"
+            aria-label="<%= anterior %>">
+      <%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
+    </button>
+    <span data-carrossel-target="indicador" class="text-gray-200 text-base font-semibold px-1"></span>
+    <button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
+            class="w-14 h-14 rounded-full flex items-center justify-center bg-orange-500 text-black"
+            aria-label="<%= proximo %>">
+      <%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
+    </button>
+  </div>
 </div>