Solucionado problema de estilos

This commit is contained in:
David Arranz 2025-11-16 20:28:58 +01:00
parent 57ef20a69c
commit 8d0002bfb4
4 changed files with 154 additions and 121 deletions

View File

@ -1 +1 @@
@source "./components";
@source "**/*.{ts,tsx}";

View File

@ -1,2 +1 @@
@source "./components";
@source "./pages";
@source "**/*.{ts,tsx}";

View File

@ -1,4 +1,4 @@
@source "../components";
@source "**/*.{ts,tsx}";
@layer components {
/**
@ -8,36 +8,28 @@
/* Fondo suave diagonal */
.brand-surface-50-br {
@apply bg-gradient-to-br from-blue-50 via-violet-50 to-purple-50
dark:from-blue-950 dark:via-violet-950 dark:to-purple-950;
@apply bg-gradient-to-br from-blue-50 via-violet-50 to-purple-50 dark:from-blue-950 dark:via-violet-950 dark:to-purple-950;
}
.brand-surface-100-br {
@apply bg-gradient-to-br from-blue-100 via-violet-100 to-purple-100
dark:from-blue-900 dark:via-violet-900 dark:to-purple-900;
@apply bg-gradient-to-br from-blue-100 via-violet-100 to-purple-100 dark:from-blue-900 dark:via-violet-900 dark:to-purple-900;
}
/* Fondo suave horizontal */
.brand-surface-50-x {
@apply bg-gradient-to-r from-blue-50 to-violet-50
hover:from-blue-50 hover:to-violet-50
dark:from-blue-900 dark:to-violet-900;
@apply bg-gradient-to-r from-blue-50 to-violet-50 hover:from-blue-50 hover:to-violet-50 dark:from-blue-900 dark:to-violet-900;
}
.brand-surface-100-x {
@apply bg-gradient-to-r from-blue-100 to-violet-100
hover:from-blue-100 hover:to-violet-100
dark:from-blue-900 dark:to-violet-900;
@apply bg-gradient-to-r from-blue-100 to-violet-100 hover:from-blue-100 hover:to-violet-100 dark:from-blue-900 dark:to-violet-900;
}
.brand-surface-200-x {
@apply bg-gradient-to-r from-blue-200 to-violet-200
dark:from-blue-800 dark:to-violet-800;
@apply bg-gradient-to-r from-blue-200 to-violet-200 dark:from-blue-800 dark:to-violet-800;
}
/* Gradiente para texto (intenso) */
.brand-text-strong-x {
@apply bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent antialiased
dark:from-blue-400 dark:to-violet-400;
@apply bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent antialiased dark:from-blue-400 dark:to-violet-400;
}
}

View File

@ -10,109 +10,7 @@
@custom-variant dark (&:is(.dark *));
/**
*
* https://tweakcn.com/
* https://themux.vercel.app/shadcn-themes
* https://shadcnstudio.com/theme-generator
*
**/
:root {
--font-sans: "Noto Sans", ui-sans-serif, sans-serif, system-ui;
--font-serif: "Noto Serif", ui-serif, serif;
--font-mono: "Noto Sans Mono", ui-monospace, monospace;
--background: oklch(1 0 0);
--foreground: oklch(13.636% 0.02685 282.25);
--card: oklch(1.0 0 0);
--card-foreground: oklch(0.2035 0.0139 285.1021);
--popover: oklch(1.0 0 0);
--popover-foreground: oklch(0.2035 0.0139 285.1021);
--primary: oklch(0.623 0.214 259.815);
--primary-foreground: oklch(1.0 0 0);
--secondary: oklch(0.9574 0.0011 197.1383);
--secondary-foreground: oklch(0.2069 0.0098 285.5081);
--muted: oklch(0.9674 0.0013 286.3752);
--muted-foreground: oklch(0.5466 0.0216 285.664);
--accent: oklch(0.9299 0.0334 272.7879);
--accent-foreground: oklch(0.3729 0.0306 259.7328);
--destructive: oklch(0.583 0.2387 28.4765);
--destructive-foreground: oklch(1.0 0 0);
--border: oklch(0.9273 0.0067 286.2663);
--input: oklch(0.9173 0.0067 286.2663);
--ring: oklch(0.6187 0.2067 259.2316);
--chart-1: oklch(0.6471 0.2173 36.8511);
--chart-2: oklch(37.973% 0.0506 187.591);
--chart-3: oklch(0.4247 0.0852 230.5827);
--chart-4: oklch(0.829 0.1712 81.0381);
--chart-5: oklch(0.7724 0.1728 65.367);
--sidebar: oklch(0.957 0.007 272.5840410480741);
--sidebar-foreground: oklch(0.2035 0.0139 285.1021);
--sidebar-primary: oklch(0.623 0.214 259.815);
--sidebar-primary-foreground: oklch(1.0 0 0);
--sidebar-accent: oklch(0.9674 0.0013 286.3752);
--sidebar-accent-foreground: oklch(0.2069 0.0098 285.5081);
--sidebar-border: oklch(0.9173 0.0067 286.2663);
--sidebar-ring: oklch(0.623 0.214 259.815);
--radius: 0.40rem;
--shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0rem;
--spacing: 0.22rem;
}
.dark {
--background: oklch(0.1448 0 0);
--foreground: oklch(0.9851 0 0);
--card: oklch(0.2046 0 0);
--card-foreground: oklch(0.9851 0 0);
--popover: oklch(0.2046 0 0);
--popover-foreground: oklch(0.9851 0 0);
--primary: oklch(0.5471 0.2506 262.8726);
--primary-foreground: oklch(0.9705 0.0142 254.6042);
--secondary: oklch(0.2707 0.0092 285.7705);
--secondary-foreground: oklch(0.9851 0 0);
--muted: oklch(0.2686 0 0);
--muted-foreground: oklch(0.709 0 0);
--accent: oklch(0.3729 0.0306 259.7328);
--accent-foreground: oklch(0.8717 0.0093 258.3382);
--destructive: oklch(0.7022 0.1892 22.2279);
--destructive-foreground: oklch(0.2558 0.0412 235.1561);
--border: oklch(1.0 0 0);
--input: oklch(1.0 0 0);
--ring: oklch(0.4915 0.2776 263.8724);
--chart-1: oklch(0.4915 0.2776 263.8724);
--chart-2: oklch(0.7019 0.1577 160.4375);
--chart-3: oklch(0.7724 0.1728 65.367);
--chart-4: oklch(0.6217 0.2589 305.309);
--chart-5: oklch(0.6435 0.2452 16.501);
--sidebar: oklch(0.2046 0 0);
--sidebar-foreground: oklch(0.9851 0 0);
--sidebar-primary: oklch(0.5471 0.2506 262.8726);
--sidebar-primary-foreground: oklch(0.9705 0.0142 254.6042);
--sidebar-accent: oklch(0.2686 0 0);
--sidebar-accent-foreground: oklch(0.9851 0 0);
--sidebar-border: oklch(1.0 0 0);
--sidebar-ring: oklch(0.4915 0.2776 263.8724);
--radius: 0.25rem;
--shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25);
}
@theme inline {
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
@ -163,6 +61,150 @@
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
@layer utilities {
body {
font-family: Arial, Helvetica, sans-serif;
}
}
/**
*
* https://tweakcn.com/
* https://themux.vercel.app/shadcn-themes
* https://shadcnstudio.com/theme-generator
*
**/
@layer base {
:root {
--font-sans: "Noto Sans", ui-sans-serif, sans-serif, system-ui;
--font-serif: "Noto Serif", ui-serif, serif;
--font-mono: "Noto Sans Mono", ui-monospace, monospace;
--background: oklch(1 0 0);
--foreground: oklch(13.636% 0.02685 282.25);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2035 0.0139 285.1021);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.2035 0.0139 285.1021);
--primary: oklch(0.623 0.214 259.815);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.9574 0.0011 197.1383);
--secondary-foreground: oklch(0.2069 0.0098 285.5081);
--muted: oklch(0.9674 0.0013 286.3752);
--muted-foreground: oklch(0.5466 0.0216 285.664);
--accent: oklch(0.9299 0.0334 272.7879);
--accent-foreground: oklch(0.3729 0.0306 259.7328);
--destructive: oklch(0.583 0.2387 28.4765);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.9273 0.0067 286.2663);
--input: oklch(0.9173 0.0067 286.2663);
--ring: oklch(0.6187 0.2067 259.2316);
--chart-1: oklch(0.6471 0.2173 36.8511);
--chart-2: oklch(37.973% 0.0506 187.591);
--chart-3: oklch(0.4247 0.0852 230.5827);
--chart-4: oklch(0.829 0.1712 81.0381);
--chart-5: oklch(0.7724 0.1728 65.367);
--sidebar: oklch(0.957 0.007 272.5840410480741);
--sidebar-foreground: oklch(0.2035 0.0139 285.1021);
--sidebar-primary: oklch(0.623 0.214 259.815);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.9674 0.0013 286.3752);
--sidebar-accent-foreground: oklch(0.2069 0.0098 285.5081);
--sidebar-border: oklch(0.9173 0.0067 286.2663);
--sidebar-ring: oklch(0.623 0.214 259.815);
--radius: 0.4rem;
--shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0rem;
--spacing: 0.22rem;
}
.dark {
--background: oklch(0.1448 0 0);
--foreground: oklch(0.9851 0 0);
--card: oklch(0.2046 0 0);
--card-foreground: oklch(0.9851 0 0);
--popover: oklch(0.2046 0 0);
--popover-foreground: oklch(0.9851 0 0);
--primary: oklch(0.5471 0.2506 262.8726);
--primary-foreground: oklch(0.9705 0.0142 254.6042);
--secondary: oklch(0.2707 0.0092 285.7705);
--secondary-foreground: oklch(0.9851 0 0);
--muted: oklch(0.2686 0 0);
--muted-foreground: oklch(0.709 0 0);
--accent: oklch(0.3729 0.0306 259.7328);
--accent-foreground: oklch(0.8717 0.0093 258.3382);
--destructive: oklch(0.7022 0.1892 22.2279);
--destructive-foreground: oklch(0.2558 0.0412 235.1561);
--border: oklch(1 0 0);
--input: oklch(1 0 0);
--ring: oklch(0.4915 0.2776 263.8724);
--chart-1: oklch(0.4915 0.2776 263.8724);
--chart-2: oklch(0.7019 0.1577 160.4375);
--chart-3: oklch(0.7724 0.1728 65.367);
--chart-4: oklch(0.6217 0.2589 305.309);
--chart-5: oklch(0.6435 0.2452 16.501);
--sidebar: oklch(0.2046 0 0);
--sidebar-foreground: oklch(0.9851 0 0);
--sidebar-primary: oklch(0.5471 0.2506 262.8726);
--sidebar-primary-foreground: oklch(0.9705 0.0142 254.6042);
--sidebar-accent: oklch(0.2686 0 0);
--sidebar-accent-foreground: oklch(0.9851 0 0);
--sidebar-border: oklch(1 0 0);
--sidebar-ring: oklch(0.4915 0.2776 263.8724);
--radius: 0.25rem;
--shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25);
}
}
@layer base {