INSTALE TAILWIND Y JQUERY GENTE

resources/css/app.css

@@ -1,17 +1,52 @@
-@import 'tailwindcss';
+/* 1. Importar fuente Montserrat */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');
 
+/* 2. Importar Tailwind (v4) */
+@import "tailwindcss";
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
 @source '../**/*.blade.php';
 @source '../**/*.js';
 
+/* 3. Configuración del Tema (NUEVO EN v4) */
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    /* Definimos el color personalizado 'dark-bg' */
+    --color-dark-bg: #121212; 
+    /* TRADUCCIÓN: fontFamily: { sans: [...] } */
+        --font-sans: 'Montserrat', sans-serif;
+
+    /* TRADUCCIÓN: colors: { ... } 
+       La sintaxis es: --color-nombre-del-color: valor; 
+    */
+    --color-neon-lime: #ccff00;
+    --color-dark-bg: #1a1a1a;
+    --color-panel-bg: #242424;
 }
 
-@keyframes gradientMove {
-    0%{ background-position: 0% 50%;}
-    50%{ background-position: 100% 50%;}
-    100%{ background-position: 0% 50%;}
+/* 4. Patrón de fondo estilo "Técnico" */
+.bg-grid-pattern {
+    /* CAMBIO: Usamos rgba(255,255,255, 0.1) para que las líneas sean claras sobre fondo oscuro */
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-size: 40px 40px;
+    background-position: center;
 }
+
+/* 5. Personalización del Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #444; 
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #ccff00; /* Verde Neón */
+}