/* =============================================
   STARTER THEME - ÚNICA FUENTE DE VERDAD

   Este archivo contiene TODO el design system del theme.
   Editar este archivo para customizar colores, tipografía y tokens.
   NO importa globals.css del core - es completamente independiente.
   ============================================= */

/* =============================================
   IMPORTS
   ============================================= */
@import "tailwindcss";

/* =============================================
   TAILWIND v4 DARK MODE CONFIGURATION

   Por defecto Tailwind v4 usa @media (prefers-color-scheme: dark)
   para las variantes dark:. Esto causa problemas porque:
   - next-themes usa la clase .dark en el HTML
   - El sistema operativo puede tener dark mode aunque la app use light

   Esta configuración hace que Tailwind use el selector de clase .dark
   en lugar de la media query, sincronizándose con next-themes.
   ============================================= */
@custom-variant dark (&:where(.dark, .dark *));

@import "@nextsparkjs/core/styles/utilities.css";
@import "@nextsparkjs/core/styles/docs.css";
@source "../../../**/*.{js,ts,jsx,tsx}";
/* Core package: monorepo (short path) + npm projects (long path) */
@source "../node_modules/@nextsparkjs/core/dist/**/*.js";
@source "../../../../node_modules/@nextsparkjs/core/dist/**/*.js";

/* =============================================
   THEME VARIABLES - LIGHT MODE (OKLCH)

   Formato OKLCH: oklch(lightness chroma hue)
   - lightness: 0 (negro) a 1 (blanco)
   - chroma: 0 (gris) a 0.4 (muy saturado)
   - hue: 0-360 grados (rojo=0, amarillo=90, verde=150, azul=240)

   Para colores neutros (grises), chroma = 0
   ============================================= */
:root {
  /* Surface Colors - Fondos principales */
  --background: oklch(1 0 0);              /* Blanco puro */
  --foreground: oklch(0.145 0 0);          /* Casi negro */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);

  /* Interactive Colors - Acciones principales */
  --primary: oklch(0.205 0 0);             /* Negro para acciones principales */
  --primary-foreground: oklch(0.985 0 0);  /* Blanco para texto sobre primary */
  --secondary: oklch(0.97 0 0);            /* Gris muy claro */
  --secondary-foreground: oklch(0.205 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);

  /* State Colors - Estados del sistema */
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);    /* Gris medio para texto secundario */
  --destructive: oklch(0.577 0.245 27.325); /* Rojo para errores/danger */
  --destructive-foreground: oklch(0.985 0 0);

  /* Border & Input - Bordes e inputs */
  --border: oklch(0.922 0 0);              /* Gris claro para bordes */
  --input: oklch(0.922 0 0);
  --ring: oklch(0.205 0 0);                /* Color del focus ring */

  /* Chart Colors - Para gráficos */
  --chart-1: oklch(0.646 0.222 41.116);    /* Naranja */
  --chart-2: oklch(0.6 0.118 184.704);     /* Teal */
  --chart-3: oklch(0.398 0.07 227.392);    /* Azul oscuro */
  --chart-4: oklch(0.828 0.189 84.429);    /* Amarillo */
  --chart-5: oklch(0.769 0.188 70.08);     /* Dorado */

  /* Sidebar - Barra lateral del dashboard */
  --sidebar-background: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.395 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.205 0 0);

  /* Design Tokens */
  --radius: 0.5rem;

  /* Custom spacing (opcional) */
  --spacing-xs: 0.125rem;
  --spacing-sm: 0.25rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
}

/* =============================================
   THEME VARIABLES - DARK MODE

   El dark mode invierte lightness pero mantiene el mismo hue y chroma.
   Esto asegura consistencia visual entre modos.
   ============================================= */
.dark {
  /* Surface Colors */
  --background: oklch(0.145 0 0);          /* Casi negro */
  --foreground: oklch(0.985 0 0);          /* Casi blanco */
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);

  /* Interactive Colors */
  --primary: oklch(0.985 0 0);             /* Invertido: blanco como primary */
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);

  /* State Colors */
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --destructive: oklch(0.396 0.141 25.723); /* Rojo más oscuro en dark */
  --destructive-foreground: oklch(0.985 0 0);

  /* Border & Input */
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);

  /* Chart Colors - Ajustados para dark mode */
  --chart-1: oklch(0.488 0.243 264.376);   /* Azul */
  --chart-2: oklch(0.696 0.17 162.48);     /* Verde */
  --chart-3: oklch(0.769 0.188 70.08);     /* Naranja */
  --chart-4: oklch(0.627 0.265 303.9);     /* Púrpura */
  --chart-5: oklch(0.645 0.246 16.439);    /* Rosa */

  /* Sidebar */
  --sidebar-background: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.97 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.97 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

/* =============================================
   TAILWIND v4 THEME MAPPING

   Este bloque @theme conecta las CSS variables con las clases de Tailwind.
   Ejemplo: --color-primary permite usar bg-primary, text-primary, etc.
   ============================================= */
@theme {
  /* Main semantic colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Chart colors */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* Sidebar colors */
  --color-sidebar: var(--sidebar-background);
  --color-sidebar-background: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

/* =============================================
   BASE STYLES
   ============================================= */
* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}