Inicio de desarrollo de la rama

astro.config.mjs

@@ -1,12 +1,14 @@
 import { defineConfig } from 'astro/config';
-
 import mdx from '@astrojs/mdx';
-
 import sitemap from '@astrojs/sitemap';
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
     // Enable Svelte to support Svelte components.
     integrations: [mdx(), sitemap()],
-    site: "https://ecobjetivos.h4ckdata.es"
+    site: "https://ecobjetivos.h4ckdata.es",
+    vite: {
+        plugins: [tailwindcss()],
+    },
 });

package-lock.json

@@ -10,7 +10,11 @@
       "dependencies": {
         "@astrojs/mdx": "^4.0.8",
         "@astrojs/sitemap": "^3.2.1",
+        "@tailwindcss/vite": "^4.0.12",
         "astro": "^5.3.1"
+      },
+      "devDependencies": {
+        "daisyui": "^5.0.0"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -1330,6 +1334,230 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.12.tgz",
+      "integrity": "sha512-a6J11K1Ztdln9OrGfoM75/hChYPcHYGNYimqciMrvKXRmmPaS8XZTHhdvb5a3glz4Kd4ZxE1MnuFE2c0fGGmtg==",
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "tailwindcss": "4.0.12"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.12.tgz",
+      "integrity": "sha512-DWb+myvJB9xJwelwT9GHaMc1qJj6MDXRDR0CS+T8IdkejAtu8ctJAgV4r1drQJLPeS7mNwq2UHW2GWrudTf63A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.12",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.12",
+        "@tailwindcss/oxide-darwin-x64": "4.0.12",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.12",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.12",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.12",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.12",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.12",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.12",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.12",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.12"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.12.tgz",
+      "integrity": "sha512-dAXCaemu3mHLXcA5GwGlQynX8n7tTdvn5i1zAxRvZ5iC9fWLl5bGnjZnzrQqT7ttxCvRwdVf3IHUnMVdDBO/kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.12.tgz",
+      "integrity": "sha512-vPNI+TpJQ7sizselDXIJdYkx9Cu6JBdtmRWujw9pVIxW8uz3O2PjgGGzL/7A0sXI8XDjSyRChrUnEW9rQygmJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.12.tgz",
+      "integrity": "sha512-RL/9jM41Fdq4Efr35C5wgLx98BirnrfwuD+zgMFK6Ir68HeOSqBhW9jsEeC7Y/JcGyPd3MEoJVIU4fAb7YLg7A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.12.tgz",
+      "integrity": "sha512-7WzWiax+LguJcMEimY0Q4sBLlFXu1tYxVka3+G2M9KmU/3m84J3jAIV4KZWnockbHsbb2XgrEjtlJKVwHQCoRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.12.tgz",
+      "integrity": "sha512-X9LRC7jjE1QlfIaBbXjY0PGeQP87lz5mEfLSVs2J1yRc9PSg1tEPS9NBqY4BU9v5toZgJgzKeaNltORyTs22TQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.12.tgz",
+      "integrity": "sha512-i24IFNq2402zfDdoWKypXz0ZNS2G4NKaA82tgBlE2OhHIE+4mg2JDb5wVfyP6R+MCm5grgXvurcIcKWvo44QiQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.12.tgz",
+      "integrity": "sha512-LmOdshJBfAGIBG0DdBWhI0n5LTMurnGGJCHcsm9F//ISfsHtCnnYIKgYQui5oOz1SUCkqsMGfkAzWyNKZqbGNw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.12.tgz",
+      "integrity": "sha512-OSK667qZRH30ep8RiHbZDQfqkXjnzKxdn0oRwWzgCO8CoTxV+MvIkd0BWdQbYtYuM1wrakARV/Hwp0eA/qzdbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.12.tgz",
+      "integrity": "sha512-uylhWq6OWQ8krV8Jk+v0H/3AZKJW6xYMgNMyNnUbbYXWi7hIVdxRKNUB5UvrlC3RxtgsK5EAV2i1CWTRsNcAnA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.12.tgz",
+      "integrity": "sha512-XDLnhMoXZEEOir1LK43/gHHwK84V1GlV8+pAncUAIN2wloeD+nNciI9WRIY/BeFTqES22DhTIGoilSO39xDb2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.12.tgz",
+      "integrity": "sha512-I/BbjCLpKDQucvtn6rFuYLst1nfFwSMYyPzkx/095RE+tuzk5+fwXuzQh7T3fIBTcbn82qH/sFka7yPGA50tLw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.12.tgz",
+      "integrity": "sha512-JM3gp601UJiryIZ9R2bSqalzcOy15RCybQ1Q+BJqDEwVyo4LkWKeqQAcrpHapWXY31OJFTuOUVBFDWMhzHm2Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.0.12",
+        "@tailwindcss/oxide": "4.0.12",
+        "lightningcss": "^1.29.1",
+        "tailwindcss": "4.0.12"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -1992,6 +2220,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/daisyui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.0.tgz",
+      "integrity": "sha512-U0K9Bac3Bi3zZGm6ojrw12F0vBHTpEgf46zv/BYxLe07hF0Xnx7emIQliwaRBgJuYhY0BhwQ6wSnq5cJXHA2yA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -2048,7 +2286,6 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
       "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2120,6 +2357,19 @@
       "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2917,6 +3167,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2938,6 +3197,234 @@
         "node": ">=6"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/load-yaml-file": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/load-yaml-file/-/load-yaml-file-0.2.0.tgz",
@@ -5080,6 +5567,21 @@
         "inline-style-parser": "0.2.4"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.12.tgz",
+      "integrity": "sha512-bT0hJo91FtncsAMSsMzUkoo/iEU0Xs5xgFgVC9XmdM9bw5MhZuQFjPNl6wxAE0SiQF/YTZJa+PndGWYSDtuxAg==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tinyexec": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
@@ -5658,6 +6160,20 @@
       "integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==",
       "license": "MIT"
     },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",

package.json

@@ -13,6 +13,10 @@
   "dependencies": {
     "@astrojs/mdx": "^4.0.8",
     "@astrojs/sitemap": "^3.2.1",
+    "@tailwindcss/vite": "^4.0.12",
     "astro": "^5.3.1"
+  },
+  "devDependencies": {
+    "daisyui": "^5.0.0"
   }
 }

src/components/ListadoPostsHorizontal.astro

@@ -1,51 +1,61 @@
 ---
 import { getCollection } from "astro:content";
+
 const posts = await getCollection("posts");
+// Selecciona 3 posts aleatorios
+const selectedPosts = posts.sort(() => Math.random() - 0.5).slice(0, 3);
 ---
 
-<div class="row">
+<div class="flex flex-wrap justify-center -mx-2">
-    {
+  {
-        posts.slice(0, 3).map((post) => (
+    selectedPosts.map((post) => (
-            <div class="col-md-4 mb-4 animate-on-scroll">
+      <div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll">
-                <div class="card h-100">
+        <div class="card bg-base-100 shadow-lg h-full">
-                    <div class="card-body d-flex flex-column">
+          <div class="flex flex-wrap">
-                        <h5 class="card-title">
+            <div class="w-full md:w-1/2">
-                            {post.data.titulo}
+              <div class="aspect-square overflow-hidden rounded-l">
-                        </h5>
+                <img src={post.data.imagen} class="object-cover w-full h-full" alt={post.data.titulo} />
-                        <p class="card-text post-content flex-grow-1">
+              </div>
-                            {post.data.descripcion}
-                        </p>
-                        <a href={"/posts/" + post.id} class="btn btn-success mt-auto">
-                            Ver detalles
-                        </a>
-                    </div>
-                </div>
             </div>
-        ))
+            <div class="w-full md:w-1/2">
-    }
+              <div class="card-body flex flex-col h-full p-4">
+                <h5 class="text-xl font-semibold mb-2">
+                  {post.data.titulo}
+                </h5>
+                <p class="text-base flex-grow post-content">
+                  {post.data.descripcion}
+                </p>
+                <a href={"/posts/" + post.id} class="btn btn-primary mt-auto">
+                  Ver detalles
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    ))
+  }
 </div>
 
 <style>
-    .post-content {
+  .post-content {
-        display: -webkit-box;
+    display: -webkit-box;
-        -webkit-box-orient: vertical;
+    -webkit-box-orient: vertical;
-        overflow: hidden;
+    flex-grow: 1;
-        -webkit-line-clamp: 4; /* Limita a 4 líneas */
+    overflow: hidden;
-        line-height: 1.5; /* Ajusta según el diseño */
+    -webkit-line-clamp: 3;
-        max-height: calc(1.5em * 4); /* Calcula la altura máxima */
+  }
-    }
+  .card {
-    .card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
-        background: #ffffff;
+    flex-direction: column;
-        display: flex;
+    height: 100%;
-        flex-direction: column;
+  }
-        height: 100%;
+  .card:hover {
-    }
+    transform: translateY(-5px);
-    .card:hover {
+    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
-        transform: translateY(-5px);
+  }
-        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+  .btn-primary {
-    }
+    transition: transform 0.3s ease;
-    .btn-success {
+  }
-        transition: transform 0.3s ease;
-    }
 </style>

src/components/Navbar.astro

@@ -1,57 +1,42 @@
 ---
 import { Image } from "astro:assets";
 const { home, posts, proyectos } = Astro.props;
+import "../styles/global.css";
 ---
 
 <head>
   <meta charset="utf-8" />
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </head>
 
 <main>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+  <nav class="navbar bg-base-100 fixed top-0 z-50 shadow-lg">
-    <div class="container">
+    <div class="navbar-start">
-      <a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
+      <a class="btn btn-ghost normal-case text-xl" href={home ? home : "/"}>
-        <Image
+        <Image src="/logo.png" alt="Logo Ecobjetivos" class="mr-2" height="25" width="25" />
-          src="/logo.png"
+        Ecobjetivos
-          alt="Logo Ecobjetivos"
-          class="me-2 biglogo"
-          height="25"
-          width="25"
-        />
-        &nbsp Ecobjetivos
       </a>
-      <button
+    </div>
-        class="navbar-toggler"
+    <div class="navbar-end">
-        type="button"
+      <!-- Mobile Dropdown -->
-        data-bs-toggle="collapse"
+      <div class="dropdown lg:hidden">
-        data-bs-target="#navbarNav"
+        <label tabindex="0" class="btn btn-ghost">
-        aria-controls="navbarNav"
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        aria-expanded="false"
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        aria-label="Toggle navigation"
+          </svg>
-      >
+        </label>
-        <span class="navbar-toggler-icon"></span>
+        <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
-      </button>
+          <li><a href={posts ? posts : '/posts'}>Posts</a></li>
-      <div class="collapse navbar-collapse" id="navbarNav">
+          <li><a href={proyectos ? proyectos : '/proyectos'}>Proyectos</a></li>
-        <ul class="navbar-nav ms-auto">
+        </ul>
-          <li class="nav-item">
+      </div>
-            <a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a>
+      <!-- Desktop Menu -->
-          </li>
+      <div class="hidden lg:flex">
-          <li class="nav-item">
+        <ul class="menu menu-horizontal p-0">
-            <a type="button" class="nav-link btn btn-light" href={proyectos ? proyectos : "/proyectos"}
+          <li><a href={posts ? posts : '/posts'} class="hover:scale-105 transition-transform">Posts</a></li>
-              >Proyectos</a
+          <li><a href={proyectos ? proyectos : '/proyectos'} class="hover:scale-105 transition-transform">Proyectos</a></li>
-            >
-          </li>
         </ul>
       </div>
     </div>
   </nav>
   
 </main>
-
-<style>
-  .biglogo {
-    scale: 1.5;
-  }
-</style>

src/pages/index.astro

@@ -64,43 +64,45 @@ const animateOnScroll = `
     </head>
     <body>
         <Navbar />
-        <header class="header-bg text-white">
+        <header
+            class="bg-primary text-white min-h-screen flex items-center relative overflow-hidden"
+        >
             <img
                 src="/imgs/bosqueverde.png"
                 alt="Bosque Verde"
-                class="video-bg"
+                class="absolute inset-0 w-full h-full object-cover"
             />
-            <video autoplay muted loop class="video-bg">
+            <video
+                autoplay
+                muted
+                loop
+                class="absolute inset-0 w-full h-full object-cover"
+            >
                 <source src="/imgs/bosqueverde.mp4" type="video/mp4" />
                 Tu navegador no soporta la reproducción de videos.
             </video>
-
+            <div class="container mx-auto text-center relative z-10">
-            <div class="container text-center">
+                <h1 class="text-6xl mb-4 font-bold font-londrina">
-                <h1
-                    class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
-                >
                     Ecobjetivos: Sostenibilidad y Desarrollo
                 </h1>
-                <p
+                <p class="text-xl mb-5">
-                    class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
-                >
                     Construyendo juntos un futuro más verde y equitativo
                 </p>
-                <a
+                <a href="#intro" class="btn btn-outline btn-lg">
-                    href="#intro"
+                    Descubre más
-                    class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
+                </a>
-                    >Descubre más</a
-                >
             </div>
         </header>
 
         <main>
-            <section id="intro" class="py-5 bg-light">
+            <section id="intro" class="py-10">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <div class="row align-items-center">
+                    <div class="flex flex-wrap items-center">
-                        <div class="col-md-6 animate-on-scroll">
+                        <div class="w-full md:w-1/2 mb-4 md:mb-0">
-                            <h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
+                            <h2 class="text-4xl mb-4 font-bold">
-                            <p class="lead">
+                                ¿Qué son los ODS?
+                            </h2>
+                            <p class="text-lg">
                                 Los Objetivos de Desarrollo Sostenible (ODS) son
                                 un llamado universal a la acción para erradicar
                                 la pobreza, proteger el planeta y garantizar que
@@ -111,12 +113,12 @@ const animateOnScroll = `
                                 generaciones.
                             </p>
                         </div>
-                        <div class="col-md-6 animate-on-scroll">
+                        <div class="w-full md:w-1/2">
-                            <div class="text-white p-5 text-center">
+                            <div class="p-5 text-center">
                                 <Image
                                     src="/imgs/17Objetivos.png"
                                     alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
-                                    class="img-thumbnail .img-fluid"
+                                    class="rounded shadow-lg mx-auto"
                                     width="730"
                                     height="450"
                                 />
@@ -125,12 +127,12 @@ const animateOnScroll = `
                     </div>
                 </div>
             </section>
-            <section id="objetivos" class="py-5">
+            <section id="objetivos" class="py-10 bg-base-300">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll">
+                    <h2 class="text-center mb-5 text-3xl font-bold">
                         Nuestros Objetivos Principales
                     </h2>
-                    <div class="row">
+                    <div class="flex flex-wrap -mx-2">
                         {
                             [
                                 {
@@ -158,16 +160,16 @@ const animateOnScroll = `
                                         "Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental.",
                                 },
                             ].map((obj, index) => (
-                                <div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
+                                <div class="w-full md:w-1/2 lg:w-1/4 p-2 mb-4">
-                                    <div class="card h-100 text-center">
+                                    <div class="card bg-base-100 shadow-lg text-center h-full p-4">
                                         <div class="card-body">
                                             <i
-                                                class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`}
+                                                class={`fa-solid ${obj.icon} text-3xl mb-3 text-primary`}
                                             />
-                                            <h5 class="card-title">
+                                            <h5 class="text-xl font-semibold mb-2">
                                                 {obj.title}
                                             </h5>
-                                            <p class="card-text">
+                                            <p class="text-base">
                                                 {obj.description}
                                             </p>
                                         </div>
@@ -179,16 +181,16 @@ const animateOnScroll = `
                 </div>
             </section>
 
-            <section id="impact" class="py-5 bg-success text-white">
+            <section id="impact" class="py-10 bg-success text-success-content">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll">
+                    <h2 class="text-center mb-5 text-3xl font-bold">
                         Nuestro Impacto
                     </h2>
-                    <div class="row justify-content-center text-center">
+                    <div class="flex flex-wrap justify-center text-center">
                         {
                             [
                                 {
-                                    number: "500+",
+                                    number: "1k+",
                                     description:
                                         "Personas a las que hemos concienciado.",
                                 },
@@ -198,87 +200,57 @@ const animateOnScroll = `
                                         "Proyectos creados para fomentar la sostenibilidad.",
                                 },
                             ].map((impact, index) => (
-                                <div class="col-md-3 mb-4 animate-on-scroll">
+                                <div class="w-full md:w-1/3 lg:w-1/4 p-2 mb-4">
-                                    <h3 class="display-4 fw-bold">
+                                    <h3 class="text-5xl font-bold mb-2">
                                         {impact.number}
                                     </h3>
-                                    <p class="lead">{impact.description}</p>
+                                    <p class="text-lg">{impact.description}</p>
                                 </div>
                             ))
                         }
                     </div>
                 </div>
             </section>
-            <section id="posts" class="py-5 bg-light">
+            <section id="posts" class="py-10 bg-base-100">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll pt-1">
+                  <h2 class="text-center mb-5 text-3xl font-bold pt-1">Posts Destacados</h2>
-                        Posts Recientes
+                  <ListadoPostsHorizontal />
-                    </h2>
-                    <ListadoPostsHorizontal />
                 </div>
-            </section>
+              </section>
-            <section id="proyectos" class="py-5">
+              <section id="proyectos" class="py-10">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll pt-2">
+                  <h2 class="text-center mb-5 text-3xl font-bold pt-2">Proyectos Destacados</h2>
-                        Nuestros Proyectos Destacados
+                  <div class="flex flex-wrap justify-center -mx-2">
-                    </h2>
+                    {
-                    <div class="row justify-content-center">
+                      proyectos.map((project) => (
-                        {
+                        <div class="w-full md:w-1/2 p-2 mb-4">
-                            proyectos.map((project) => (
+                          <div class="card bg-base-100 shadow-lg h-full">
-                                <div class="col-md-6 mb-4 animate-on-scroll">
+                            <div class="flex flex-wrap">
-                                    <div class="card h-100">
+                              <div class="w-full md:w-1/3">
-                                        <div class="row g-0">
+                                <img src={project.imagen} class="w-full h-auto rounded-l" alt={project.titulo} />
-                                            <div class="col-md-4">
+                              </div>
-                                                <img
+                              <div class="w-full md:w-2/3">
-                                                    src={project.imagen}
+                                <div class="card-body flex flex-col h-full p-4">
-                                                    class="img-fluid rounded-start"
+                                  <h5 class="text-xl font-semibold mb-2" aria-label=\"Proyecto\">{project.titulo}</h5>
-                                                    alt={project.titulo}
+                                  <p class="text-base flex-grow line-clamp">{project.descripcion}</p>
-                                                />
+                                  <a href={project.url} class="btn btn-primary mt-auto">Ver detalles</a>
-                                            </div>
-                                            <div class="col-md-8">
-                                                <div class="card-body d-flex flex-column h-100">
-                                                    <h5
-                                                        class="card-title"
-                                                        aria-label="Proyecto"
-                                                    >
-                                                        {project.titulo}
-                                                    </h5>
-                                                    <p class="card-text flex-grow-1 line-clamp">
-                                                        {project.descripcion}
-                                                    </p>
-                                                    <a
-                                                        href={project.url}
-                                                        class="btn btn-success mt-auto"
-                                                    >
-                                                        Ver detalles
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
                                 </div>
-                            ))
+                              </div>
-                        }
+                            </div>
-                    </div>
+                          </div>
+                        </div>
+                      ))
+                    }
+                  </div>
                 </div>
-            </section>
+              </section>
-
+              <section id="cta" class="py-10 bg-primary text-primary-content text-center">
-            <section id="cta" class="py-5 bg-primary text-white text-center">
+                <div class="container mx-auto px-4">
-                <div class="container">
+                  <h2 class="text-5xl font-bold mb-4">¡Únete al Cambio!</h2>
-                    <h2 class="display-4 mb-4 animate-on-scroll">
+                  <p class="text-lg mb-5">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
-                        ¡Únete al Cambio!
+                  <a href="/participa" class="btn btn-outline text-lg">¡Participa ahora!</a>
-                    </h2>
-                    <p class="lead mb-5 animate-on-scroll">
-                        Juntos podemos crear un impacto duradero. Descubre cómo
-                        puedes contribuir a los ODS.
-                    </p>
-                    <a
-                        href="/participa"
-                        class="btn btn-lg btn-light animate-on-scroll"
-                        >¡Participa ahora!</a
-                    >
                 </div>
-            </section>
+              </section>
         </main>
 
         <Footer />
@@ -304,7 +276,7 @@ const animateOnScroll = `
         font-weight: 400 !important;
         font-style: normal;
     }
-    .londrina-sketch-regular {
+    .font-londrina {
         font-family: "Londrina Sketch", sans-serif !important;
         font-weight: 400;
         font-style: normal;
@@ -366,9 +338,9 @@ const animateOnScroll = `
     }
 
     .line-clamp {
-      display: -webkit-box;
+        display: -webkit-box;
-      -webkit-line-clamp: 3;
+        -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
+        -webkit-box-orient: vertical;
-      overflow: hidden;
+        overflow: hidden;
     }
 </style>

src/pages/posts/index.astro

@@ -3,7 +3,7 @@ import Navbar from "../../components/Navbar.astro";
 import ListadoPosts from "../../layouts/ListadoPosts.astro";
 ---
 
-<html lang="es">
+<html lang="es" class="scroll-smooth">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -29,8 +29,8 @@ import ListadoPosts from "../../layouts/ListadoPosts.astro";
         </script>
         <title>Ecobjetivos | Posts</title>
     </head>
-    <body>
+    <body class="min-h-screen bg-base-200 text-base-content">
-        <main>
+        <main class="container mx-auto p-4">
             <Navbar />
             <ListadoPosts />
         </main>

src/styles/global.css

@@ -0,0 +1,78 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+
+
+@plugin "daisyui/theme" {
+    name: "forest";
+    default: false;
+    prefersdark: true;
+    color-scheme: "dark";
+    --color-base-100: oklch(20.84% 0.008 17.911);
+    --color-base-200: oklch(18.522% 0.007 17.911);
+    --color-base-300: oklch(16.203% 0.007 17.911);
+    --color-base-content: oklch(83.768% 0.001 17.911);
+    --color-primary: oklch(68.628% 0.185 148.958);
+    --color-primary-content: oklch(0% 0 0);
+    --color-secondary: oklch(69.776% 0.135 168.327);
+    --color-secondary-content: oklch(13.955% 0.027 168.327);
+    --color-accent: oklch(70.628% 0.119 185.713);
+    --color-accent-content: oklch(14.125% 0.023 185.713);
+    --color-neutral: oklch(30.698% 0.039 171.364);
+    --color-neutral-content: oklch(86.139% 0.007 171.364);
+    --color-info: oklch(72.06% 0.191 231.6);
+    --color-info-content: oklch(0% 0 0);
+    --color-success: oklch(64.8% 0.15 160);
+    --color-success-content: oklch(0% 0 0);
+    --color-warning: oklch(84.71% 0.199 83.87);
+    --color-warning-content: oklch(0% 0 0);
+    --color-error: oklch(71.76% 0.221 22.18);
+    --color-error-content: oklch(0% 0 0);
+    --radius-selector: 1rem;
+    --radius-field: 2rem;
+    --radius-box: 1rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+  }
+
+
+  @plugin "daisyui/theme" {
+    name: "lemonade";
+    default: true;
+    prefersdark: false;
+    color-scheme: "light";
+    --color-base-100: oklch(98% 0 0);
+    --color-base-200: oklch(97% 0 0);
+    --color-base-300: oklch(92% 0 0);
+    --color-base-content: oklch(20% 0 0);
+    --color-primary: oklch(62% 0.194 149.214);
+    --color-primary-content: oklch(98% 0.018 155.826);
+    --color-secondary: oklch(54% 0.281 293.009);
+    --color-secondary-content: oklch(96% 0.016 293.756);
+    --color-accent: oklch(60% 0.126 221.723);
+    --color-accent-content: oklch(98% 0.019 200.873);
+    --color-neutral: oklch(43% 0 0);
+    --color-neutral-content: oklch(98% 0 0);
+    --color-info: oklch(70% 0.165 254.624);
+    --color-info-content: oklch(28% 0.091 267.935);
+    --color-success: oklch(79% 0.209 151.711);
+    --color-success-content: oklch(26% 0.065 152.934);
+    --color-warning: oklch(85% 0.199 91.936);
+    --color-warning-content: oklch(28% 0.066 53.813);
+    --color-error: oklch(71% 0.194 13.428);
+    --color-error-content: oklch(27% 0.105 12.094);
+    --radius-selector: 1rem;
+    --radius-field: 2rem;
+    --radius-box: 0.5rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 1;
+  }
+  
+  
+