Feature: Scrollbar personalizada, arreglos SVG y mejoras de transparencia

- Agregar scrollbar personalizada compacta (8px) adaptable al tema
- Estilo de scrollbar verde (#00DC82) con opacidad diferente para día/noche
- Soporte para WebKit (Chrome/Safari) y Firefox
- Arreglar SVG de colinas para usar 100% del ancho horizontal (preserveAspectRatio=none)
- Revertir modal a estructura funcional (v-model:open, title prop, #content slot)
- Igualar transparencia en modo oscuro usando rgba(0,0,0,0.3-0.4) en lugar de rgba(15,15,25)
- Aplicar tintado negro puro para reducir brillo en modo oscuro manteniendo misma transparencia

nuxt4/app/assets/css/main.css

@@ -1,2 +1,46 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+/* Custom Scrollbar - Adaptable al tema */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 220, 130, 0.5);
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 220, 130, 0.7);
+}
+
+/* Scrollbar para modo oscuro */
+.dark ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(0, 220, 130, 0.6);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 220, 130, 0.8);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 220, 130, 0.5) rgba(255, 255, 255, 0.1);
+}
+
+.dark * {
+  scrollbar-color: rgba(0, 220, 130, 0.6) rgba(0, 0, 0, 0.3);
+}