From 732edadcb6250296fa862bd13f7631cac7e2b299 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 28 Oct 2025 10:18:10 -0600
Subject: [PATCH] Eliminar todos los efectos de movimiento en hover

- Quitar transform translateY de UserCard hover (card-inner y botones)
- Quitar transform translateY de .icon-btn hover en styles.css
- Quitar transform translateY de .card hover en styles.css
- Quitar transform translateY de GroupCheckButton hover
- Reemplazar efectos de movimiento por cambios sutiles de opacidad
- Actualizar transiciones para remover propiedades transform innecesarias
---
 frontend/src/components/UserCard.vue              | 4 +---
 frontend/src/components/auth/GroupCheckButton.vue | 4 ++--
 frontend/src/styles.css                           | 8 ++++----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/UserCard.vue b/frontend/src/components/UserCard.vue
index 16a2df3..6032b3f 100644
--- a/frontend/src/components/UserCard.vue
+++ b/frontend/src/components/UserCard.vue
@@ -119,7 +119,6 @@ const userInitial = computed(() => {
 }
 
 .user-card:hover .card-inner {
-  transform: translateY(-4px);
   box-shadow:
     0 4px 12px rgba(0, 0, 0, 0.08),
     0 8px 32px rgba(0, 0, 0, 0.06),
@@ -246,11 +245,10 @@ const userInitial = computed(() => {
   background: rgba(var(--accent), 0.06);
   border-color: rgba(var(--accent), 0.2);
   color: rgb(var(--accent));
-  transform: translateY(-1px);
 }
 
 .action-btn:active {
-  transform: translateY(0);
+  opacity: 0.8;
 }
 
 .action-btn--danger:hover {
diff --git a/frontend/src/components/auth/GroupCheckButton.vue b/frontend/src/components/auth/GroupCheckButton.vue
index d246e95..54f3c6e 100644
--- a/frontend/src/components/auth/GroupCheckButton.vue
+++ b/frontend/src/components/auth/GroupCheckButton.vue
@@ -86,11 +86,11 @@ const handleClick = async () => {
 }
 
 .group-check-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
+  opacity: 0.9;
 }
 
 .group-check-btn:active:not(:disabled) {
-  transform: translateY(0);
+  opacity: 0.8;
 }
 
 .group-check-btn.loading {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 18af0dd..52bc202 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -65,9 +65,9 @@ a { color: inherit; }
 }
 .title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; }
 .actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
-.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); color: inherit; transition: transform .12s ease, background .2s;
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); color: inherit; transition: background .2s;
   backdrop-filter: blur(var(--glass-blur)); }
-.icon-btn:hover { transform: translateY(-1px); background: rgba(var(--card)); }
+.icon-btn:hover { background: rgba(var(--card)); }
 .icon { width: 16px; height: 16px; opacity: .9; }
 .dropdown { position: relative; }
 .menu { position: absolute; right: 0; top: calc(100% + 6px); background: rgba(var(--card)); border: 1px solid #ffcfe4; border-radius: 10px; padding: 6px; backdrop-filter: blur(var(--glass-blur)); min-width: 180px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
@@ -92,8 +92,8 @@ a { color: inherit; }
 .scroll { overflow: auto; padding: 10px; }
 
 /* Cards */
-.card { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: 12px; padding: 10px; transition: transform .12s ease, box-shadow .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
-.card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
+.card { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: 12px; padding: 10px; transition: box-shadow .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
+.card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
 
 /* Responsive */