From d2162507e57f57466514bd4090b245f2efe75eef Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 23:39:06 -0600
Subject: [PATCH] Scrollbars personalizadas con color del cielo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Track transparente con glassmorphism
- Thumb con gradiente de color del cielo
- Día: Celeste (#87CEEB) con brillo
- Noche: Azul oscuro con tinte morado
- Bordes y sombras para efecto de profundidad
- Hover con mayor intensidad de color
- Soporte completo para WebKit y Firefox
---
 nuxt4/app/assets/css/main.css | 69 +++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/nuxt4/app/assets/css/main.css b/nuxt4/app/assets/css/main.css
index ba1fb1d..fc9c25b 100644
--- a/nuxt4/app/assets/css/main.css
+++ b/nuxt4/app/assets/css/main.css
@@ -1,46 +1,85 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-/* Custom Scrollbar - Adaptable al tema */
+/* Custom Scrollbar - Color del cielo según el tema */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
+  /* Fondo transparente con glassmorphism */
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border-radius: 5px;
+  margin: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 220, 130, 0.5);
-  border-radius: 4px;
-  transition: background 0.3s ease;
+  /* Color del cielo diurno - celeste */
+  background: linear-gradient(
+    180deg,
+    rgba(135, 206, 235, 0.8) 0%,
+    rgba(100, 180, 220, 0.9) 100%
+  );
+  border-radius: 5px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+  box-shadow:
+    0 2px 8px 0 rgba(135, 206, 235, 0.3),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 220, 130, 0.7);
+  background: linear-gradient(
+    180deg,
+    rgba(135, 206, 235, 1) 0%,
+    rgba(100, 180, 220, 1) 100%
+  );
+  box-shadow:
+    0 4px 12px 0 rgba(135, 206, 235, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
 }
 
-/* Scrollbar para modo oscuro */
+/* Scrollbar para modo oscuro - cielo nocturno */
 .dark ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(10px);
 }
 
 .dark ::-webkit-scrollbar-thumb {
-  background: rgba(0, 220, 130, 0.6);
+  /* Color del cielo nocturno - azul oscuro con tinte morado */
+  background: linear-gradient(
+    180deg,
+    rgba(30, 40, 80, 0.9) 0%,
+    rgba(20, 30, 60, 1) 100%
+  );
+  border: 2px solid rgba(100, 120, 200, 0.3);
+  box-shadow:
+    0 2px 8px 0 rgba(30, 40, 80, 0.5),
+    inset 0 1px 1px 0 rgba(100, 120, 200, 0.2);
 }
 
 .dark ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 220, 130, 0.8);
+  background: linear-gradient(
+    180deg,
+    rgba(40, 50, 100, 1) 0%,
+    rgba(30, 40, 80, 1) 100%
+  );
+  border-color: rgba(100, 120, 200, 0.5);
+  box-shadow:
+    0 4px 12px 0 rgba(30, 40, 80, 0.7),
+    inset 0 1px 1px 0 rgba(100, 120, 200, 0.3);
 }
 
 /* Firefox scrollbar */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 220, 130, 0.5) rgba(255, 255, 255, 0.1);
+  /* Color del cielo diurno */
+  scrollbar-color: rgba(135, 206, 235, 0.8) rgba(255, 255, 255, 0.05);
 }
 
 .dark * {
-  scrollbar-color: rgba(0, 220, 130, 0.6) rgba(0, 0, 0, 0.3);
+  /* Color del cielo nocturno */
+  scrollbar-color: rgba(30, 40, 80, 0.9) rgba(0, 0, 0, 0.05);
 }