Modificação na area do motorista

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
-    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.
+    Controles do carrossel (ver carrossel_controller.js) em DOIS layouts, porque
+    "seta flutuante na lateral" só funciona onde sobra espaço lateral:
+
+      • 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>