cataRio/nuxt4/app.config.ts

export default defineAppConfig({
  ui: {
    // ========================================================================
    // COLORES PERSONALIZADOS - MODO CLARO Y OSCURO
    // ========================================================================
    colors: {
      // Modo claro: Paleta de azules (celeste a oscuro)
      primary: {
        50: '#e0f2fe',   // Azul muy claro
        100: '#bae6fd',  // Azul celeste claro
        200: '#87CEEB',  // Azul celeste (SkyBlue)
        300: '#7dd3fc',  // Azul celeste medio
        400: '#38bdf8',  // Azul medio
        500: '#4682B4',  // Azul acero (SteelBlue)
        600: '#0284c7',  // Azul más intenso
        700: '#0369a1',  // Azul oscuro
        800: '#075985',  // Azul muy oscuro
        900: '#00008B',  // Azul oscuro intenso (DarkBlue)
        950: '#000066',  // Azul casi negro
      },
    },

    // ========================================================================
    // CONFIGURACIÓN DE VARIABLES CSS PERSONALIZADAS
    // ========================================================================
    variables: {
      light: {
        background: '0 0% 100%',        // Blanco puro
        foreground: '0 0% 0%',          // Negro puro

        // Colores primarios para modo claro (azul)
        primary: '203 92% 54%',         // #4682B4 (SteelBlue)
        'primary-foreground': '0 0% 0%', // Texto negro sobre azul

        // Bordes y outlines en azul
        border: '203 50% 70%',          // Azul celeste para bordes
        muted: '203 30% 40%',           // Azul oscuro para texto secundario
        'muted-foreground': '0 0% 20%', // Gris oscuro

        // Superficies con outline
        elevated: '0 0% 100%',          // Blanco (sin relleno)
        accented: '203 92% 94%',        // Azul muy claro para hover
      },
      dark: {
        background: '0 0% 0%',          // Negro puro
        foreground: '120 100% 50%',     // Verde terminal (#00FF00)

        // Colores primarios para modo oscuro (verde terminal)
        primary: '120 100% 50%',        // #00FF00 (Verde terminal)
        'primary-foreground': '0 0% 0%', // Negro sobre verde

        // Bordes y outlines en verde
        border: '120 100% 40%',         // Verde oscuro para bordes
        muted: '120 80% 30%',           // Verde apagado
        'muted-foreground': '120 50% 60%', // Verde claro para texto secundario

        // Superficies con outline
        elevated: '0 0% 0%',            // Negro (sin relleno)
        accented: '120 100% 10%',       // Verde muy oscuro para hover
      },
    },

    // ========================================================================
    // PERSONALIZACIÓN DE COMPONENTES
    // ========================================================================

    // Accordion: Solo outlines, sin rellenos
    accordion: {
      slots: {
        root: 'w-full',
        item: 'border border-primary/30 last:border-b dark:border-primary/50',
        header: 'flex',
        trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 dark:font-mono',
        content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
        body: 'text-sm pb-3.5 px-4',
        leadingIcon: 'shrink-0 size-5',
        trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
        label: 'text-start break-words dark:font-mono',
      },
    },

    // Tabs: Estilo minimalista con outlines
    tabs: {
      slots: {
        root: 'flex items-center gap-2',
        list: 'relative flex p-0 group border-b border-primary/30 dark:border-primary/50',
        indicator: 'absolute transition-[translate,width] duration-200 border-b-2 border-primary dark:border-primary',
        trigger: [
          'group relative inline-flex items-center min-w-0 px-4 py-2',
          'data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default',
          'font-medium dark:font-mono',
          'transition-colors',
          'border-b-2 border-transparent',
          'data-[state=active]:text-primary data-[state=active]:border-primary',
        ],
        leadingIcon: 'shrink-0',
        label: 'truncate dark:font-mono',
        content: 'focus:outline-none w-full py-4',
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex-col',
            list: 'w-full',
            indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) bottom-0',
          },
          vertical: {
            list: 'flex-col border-r border-b-0',
            indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) right-0 border-r-2 border-b-0',
          },
        },
      },
    },

    // Slider: Personalización para intensidades
    slider: {
      slots: {
        root: 'relative flex items-center select-none touch-none',
        track: 'relative bg-transparent border border-primary/30 dark:border-primary/50 overflow-hidden rounded-full grow',
        range: 'absolute rounded-full bg-primary/20 dark:bg-primary/30',
        thumb: 'rounded-full bg-background ring-2 ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:ring-primary',
      },
    },

    // CheckboxGroup: Estilo outline
    checkboxGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex gap-x-2',
        legend: 'mb-1 block font-medium text-default dark:font-mono',
        item: 'border border-primary/30 dark:border-primary/50 px-3 py-2 rounded-md has-data-[state=checked]:border-primary dark:has-data-[state=checked]:border-primary',
      },
    },

    // Button: Estilo outline
    button: {
      slots: {
        base: 'border border-primary/50 dark:border-primary dark:font-mono',
      },
      variants: {
        variant: {
          outline: {
            base: 'bg-transparent border-2 border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20',
          },
        },
      },
    },

    // Card: Solo outlines
    card: {
      slots: {
        root: 'bg-transparent border border-primary/30 dark:border-primary/50 rounded-lg',
        header: 'border-b border-primary/30 dark:border-primary/50 px-4 py-3',
        body: 'px-4 py-3',
      },
    },

    // Input: Outlines con focus
    input: {
      slots: {
        root: 'bg-transparent border border-primary/50 dark:border-primary focus:ring-2 focus:ring-primary dark:font-mono',
      },
    },

    // Toasts: Usar clases personalizadas definidas en main.css
    toast: {
      slots: {
        root: 'cata-toast-root',
        wrapper: 'cata-toast-wrapper',
        title: 'cata-toast-title',
        description: 'cata-toast-description',
        icon: 'cata-toast-icon',
        avatar: 'shrink-0',
        actions: 'cata-toast-actions',
        close: 'cata-toast-close',
        progress: 'cata-toast-progress',
      },
      variants: {
        color: {
          primary: {
            root: 'cata-toast-primary',
          },
          success: {
            root: 'cata-toast-success',
          },
          error: {
            root: 'cata-toast-error',
          },
          warning: {
            root: 'cata-toast-warning',
          },
          info: {
            root: 'cata-toast-info',
          },
          neutral: {
            root: 'cata-toast-neutral',
          },
        },
      },
    },
  },
})