From 279e9a54a117e72df2d901fed5a5d35a25638df6ca663a6d801c36f294f54b09 Mon Sep 17 00:00:00 2001
From: victor <victor@paravatti.com.br>
Date: Fri, 3 Jul 2026 15:18:51 -0300
Subject: [PATCH] Aumento do card inicial

---
 .../operacoes_dashboard/_painel.html.erb      | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/views/operacoes_dashboard/_painel.html.erb b/app/views/operacoes_dashboard/_painel.html.erb
index 6c9a3d6..138a425 100644
--- a/app/views/operacoes_dashboard/_painel.html.erb
+++ b/app/views/operacoes_dashboard/_painel.html.erb
@@ -20,25 +20,34 @@
   <div class="flex flex-col lg:flex-row gap-4">
 
     <%# Coluna esquerda — 4 cards de status EMPILHADOS na vertical (orientação da img 13). %>
-    <div class="w-full lg:w-60 lg:shrink-0 space-y-3">
-      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+    <div class="w-full lg:w-[21rem] lg:shrink-0 space-y-4">
+      <div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-7 transition-all duration-200 hover:border-white/20 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
         <p class="text-gray-400 text-sm font-medium mb-1">Total de Entregas</p>
-        <p class="text-4xl font-black text-white leading-none"><%= metricas.total %></p>
+        <p class="text-6xl font-black text-white leading-none inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.total %></p>
+        <p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
+          ✅ <%= metricas.sucesso %> · <span class="text-blue-500">●</span> <%= metricas.recusas %> · ⏳ <%= metricas.pendentes %>
+        </p>
       </div>
-      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+      <div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-7 transition-all duration-200 hover:border-green-500/40 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
         <p class="text-gray-400 text-sm font-medium mb-1">Total de Sucesso</p>
-        <p class="text-4xl font-black text-green-400 leading-none"><%= metricas.sucesso %></p>
-        <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.sucesso) %>% do total</p>
+        <p class="text-6xl font-black text-green-400 leading-none inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.sucesso %></p>
+        <p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
+          <%= pct_total.(metricas.sucesso) %>% do total
+        </p>
       </div>
-      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+      <div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-7 transition-all duration-200 hover:border-blue-500/40 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
         <p class="text-gray-400 text-sm font-medium mb-1">Total de Recusas</p>
-        <p class="text-4xl font-black text-blue-500 leading-none"><%= metricas.recusas %></p>
-        <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.recusas) %>% do total</p>
+        <p class="text-6xl font-black text-blue-500 leading-none inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.recusas %></p>
+        <p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
+          <%= pct_total.(metricas.recusas) %>% do total
+        </p>
       </div>
-      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+      <div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-7 transition-all duration-200 hover:border-yellow-500/40 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
         <p class="text-gray-400 text-sm font-medium mb-1">Entregas Pendentes</p>
-        <p class="text-4xl font-black text-yellow-400 leading-none"><%= metricas.pendentes %></p>
-        <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.pendentes) %>% do total</p>
+        <p class="text-6xl font-black text-yellow-400 leading-none inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.pendentes %></p>
+        <p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
+          <%= pct_total.(metricas.pendentes) %>% do total
+        </p>
       </div>
     </div>