<%# app/views/shared/_carrossel_controles.html.erb
    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.

    locals: anterior:/proximo: (rótulos acessíveis, opcionais). %>
<% anterior = local_assigns.fetch(:anterior, 'Itens anteriores') %>
<% proximo  = local_assigns.fetch(:proximo,  'Próximos itens') %>

<%# ── Setas laterais (sm+) ─────────────────────────────── %>
<div data-carrossel-target="controles" class="hidden">
  <button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
          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>

  <button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
          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>
