Modificação na area do motorista

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>