, Correçoes UX romaneios

app/views/admin/romaneios/_veiculos.html.erb

@@ -10,23 +10,40 @@
     de paradas — para 1.330px e 1.533px de rolagem, ou seja, duas telas abaixo do
     que o operador foi fazer ali. Medido em 28/08/2026 no iPhone.
 
-    Recolhido, o <summary> mostra o que importa de relance (carro atual e quantas
+    Recolhido, o rótulo mostra o que importa de relance (carro atual e quantas
     paradas) e a edição sobe para a primeira tela. Um toque abre a lista inteira.
 
-    NO DESKTOP NADA MUDA: o <summary> some (`lg:hidden`) e o conteúdo é forçado a
-    aparecer com `lg:block`, que vence o "esconder" nativo do <details> fechado —
-    continua a coluna sempre aberta ao lado da tabela. %>
-<details class="bg-[#111] border border-white/5 rounded-2xl overflow-hidden">
-  <summary class="lg:hidden cursor-pointer list-none min-h-[56px] px-4 py-3 flex items-center gap-3
+    ⚠️ NÃO VOLTE PARA <details>/<summary>. Foi a primeira tentativa e ela
+    APAGOU A COLUNA INTEIRA NO DESKTOP (28/08/2026): lista de veículos, campo do
+    motorista, "Ver prévia do PDF", "PDF deste veículo" e "PDF de todos" — tudo
+    sumiu, sobrando uma faixa vazia ao lado da tabela. O raciocínio era que
+    `lg:block` no conteúdo venceria o recolhimento do <details> fechado; não
+    vence. O navegador não esconde o conteúdo de um <details> fechado com um
+    `display` que dê para sobrescrever — nos motores atuais é `content-visibility`
+    no `::details-content` — então `display:block` no filho não traz nada de
+    volta, e como o <summary> estava `lg:hidden` não sobrava nem o que clicar.
+
+    O interruptor aqui é um checkbox + `peer`, CSS puro: sem JavaScript (o
+    romaneio_controller.js já ficou 404 em produção uma vez — ver README de
+    28/08) e sem depender de comportamento nativo de elemento nenhum. As três
+    regras são utilitárias e a ordem que o Tailwind gera resolve sozinha:
+    `hidden` (base) < `peer-checked:block` (estado) < `lg:block` (responsivo).
+    No desktop o conteúdo é block SEMPRE, marcado ou não. %>
+<div class="bg-[#111] border border-white/5 rounded-2xl overflow-hidden">
+  <%# sr-only e não `hidden`: o checkbox precisa continuar existindo no layout
+      para o `peer` funcionar e para chegar nele pelo teclado. %>
+  <input type="checkbox" id="painel-veiculos" class="peer sr-only">
+  <label for="painel-veiculos"
+         class="lg:hidden cursor-pointer min-h-[56px] px-4 py-3 flex items-center gap-3
                 text-white hover:bg-white/5">
     <span class="font-semibold truncate"><%= @veiculo %></span>
     <span class="text-xs px-2 py-0.5 rounded-lg bg-white/5 text-gray-400 shrink-0">
       <%= @romaneio.contagem_por_veiculo[@veiculo].to_i %> paradas
     </span>
     <span class="ml-auto text-xs text-orange-400 shrink-0">trocar veículo</span>
-  </summary>
+  </label>
 
-  <div class="lg:block p-4 space-y-3">
+  <div class="hidden peer-checked:block lg:block p-4 space-y-3">
   <div class="flex items-center justify-between">
     <h2 class="text-white font-semibold text-sm">Veículos</h2>
     <span class="text-xs text-gray-500"><%= @veiculos.size %> no plano</span>
@@ -128,4 +145,4 @@
     <% end %>
   </div>
   </div>
-</details>
+</div>