/**
 * Premium Design System - Bundle CSS
 * Generated: 2026-01-28 23:20:56
 * Version: 1.0.0
 * 
 * DO NOT EDIT THIS FILE DIRECTLY
 * Edit individual modules and run build.ps1
 */

/* ========== tokens/colors.css ========== */
/**
 * DESIGN SYSTEM - COLOR TOKENS
 * =============================================================================
 * Paleta de colores sofisticada con enfoque premium
 * - Azules navales (no brillantes)
 * - Grises cálidos (no fríos)
 * - Semánticos con matiz
 * - Dark mode optimizado
 */

:root {
    /* =========================================================================
     PRIMARY - Azul Naval Sofisticado
     ========================================================================= */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e3a8a;
    /* Azul naval - tono principal */
    --primary-900: #1e293b;
    --primary-rgb: 37, 99, 235;
    /* RGB of primary-600 */

    /* =========================================================================
     SECONDARY - Índigo Profundo
     ========================================================================= */
    --secondary-50: #eef2ff;
    --secondary-100: #e0e7ff;
    --secondary-200: #c7d2fe;
    --secondary-300: #a5b4fc;
    --secondary-400: #818cf8;
    --secondary-500: #6366f1;
    --secondary-600: #4f46e5;
    --secondary-700: #4338ca;
    --secondary-800: #3730a3;
    --secondary-900: #312e81;

    /* =========================================================================
     NEUTRALS - Grises Cálidos (con tinte marrón)
     ========================================================================= */
    --neutral-50: #fafaf9;
    --neutral-100: #f5f5f4;
    --neutral-200: #e7e5e4;
    --neutral-300: #d6d3d1;
    --neutral-400: #a8a29e;
    --neutral-500: #78716c;
    /* Base cálido */
    --neutral-600: #57534e;
    --neutral-700: #44403c;
    --neutral-800: #292524;
    --neutral-900: #1c1917;
    --neutral-950: #0c0a09;

    /* =========================================================================
     SEMANTIC COLORS - Ajustados con matiz
     ========================================================================= */

    /* Success - Verde esmeralda (no brillante) */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    /* Principal */
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* Warning - Ámbar (no amarillo) */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    /* Principal */
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* Danger - Rojo menos saturado */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    /* Principal */
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* Info - Cyan sofisticado */
    --info-50: #ecfeff;
    --info-100: #cffafe;
    --info-200: #a5f3fc;
    --info-300: #67e8f9;
    --info-400: #22d3ee;
    --info-500: #06b6d4;
    --info-600: #0891b2;
    /* Principal */
    --info-700: #0e7490;
    --info-800: #155e75;
    --info-900: #164e63;

    /* =========================================================================
     SURFACE COLORS - Fondos y superficies
     ========================================================================= */
    --surface-base: #ffffff;
    --surface-elevated: #ffffff;
    --surface-overlay: rgba(0, 0, 0, 0.5);

    --background-base: var(--neutral-50);
    --background-subtle: var(--neutral-100);

    --foreground-primary: var(--neutral-900);
    --foreground-secondary: var(--neutral-600);
    --foreground-tertiary: var(--neutral-400);
    --foreground-disabled: var(--neutral-300);

    /* =========================================================================
     BORDERS - Sutiles y elegantes
     ========================================================================= */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.18);
    --border-focus: var(--primary-500);

    --divider-light: rgba(0, 0, 0, 0.04);
    --divider-default: rgba(0, 0, 0, 0.08);

    /* =========================================================================
     INTERACTIVE STATES
     ========================================================================= */
    --state-hover: rgba(0, 0, 0, 0.04);
    --state-active: rgba(0, 0, 0, 0.08);
    --state-focus: rgba(59, 130, 246, 0.1);
    --state-disabled: rgba(0, 0, 0, 0.02);
}

/* =============================================================================
   DARK MODE - Grises cálidos y contraste reducido
   ============================================================================= */

[data-theme="dark"] {
    /* =========================================================================
     PRIMARY - Ajustado para dark (más claro)
     ========================================================================= */
    --primary-50: #1e293b;
    --primary-100: #1e3a8a;
    --primary-200: #1d4ed8;
    --primary-300: #2563eb;
    --primary-400: #3b82f6;
    --primary-500: #60a5fa;
    /* Más claro en dark */
    --primary-600: #93c5fd;
    --primary-700: #bfdbfe;
    --primary-800: #dbeafe;
    --primary-900: #eff6ff;

    /* =========================================================================
     NEUTRALS - Invertidos con calidez
     ========================================================================= */
    --neutral-50: #0c0a09;
    --neutral-100: #1c1917;
    --neutral-200: #292524;
    --neutral-300: #44403c;
    --neutral-400: #57534e;
    --neutral-500: #78716c;
    --neutral-600: #a8a29e;
    --neutral-700: #d6d3d1;
    --neutral-800: #e7e5e4;
    --neutral-900: #f5f5f4;
    --neutral-950: #fafaf9;

    /* =========================================================================
     SEMANTIC COLORS - Ajustados para dark
     ========================================================================= */
    --success-500: #34d399;
    --warning-500: #fbbf24;
    --danger-500: #f87171;
    --info-500: #22d3ee;

    /* =========================================================================
     SURFACE COLORS - Dark backgrounds
     ========================================================================= */
    --surface-base: #0f0f0f;
    /* Casi negro, no puro */
    --surface-elevated: #1a1a1a;
    /* Ligeramente elevado */
    --surface-overlay: rgba(0, 0, 0, 0.8);

    --background-base: #0f0f0f;
    --background-subtle: #141414;

    --foreground-primary: #e5e5e5;
    /* Blanco suave, no puro */
    --foreground-secondary: #a8a29e;
    --foreground-tertiary: #78716c;
    --foreground-disabled: #57534e;

    /* =========================================================================
     BORDERS - Dark mode
     ========================================================================= */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-focus: var(--primary-500);

    --divider-light: rgba(255, 255, 255, 0.04);
    --divider-default: rgba(255, 255, 255, 0.06);

    /* =========================================================================
     INTERACTIVE STATES - Dark
     ========================================================================= */
    --state-hover: rgba(255, 255, 255, 0.04);
    --state-active: rgba(255, 255, 255, 0.08);
    --state-focus: rgba(96, 165, 250, 0.15);
    --state-disabled: rgba(255, 255, 255, 0.02);

    /* =========================================================================
     REDUCIR SATURACIÓN EN DARK MODE
     ========================================================================= */
    filter: saturate(0.85);
}

/* =============================================================================
   UTILITY CLASSES - Aplicación rápida de colores
   ============================================================================= */

/* Text colors */
.text-primary {
    color: var(--primary-500);
}

.text-secondary {
    color: var(--secondary-500);
}

.text-success {
    color: var(--success-600);
}

.text-warning {
    color: var(--warning-600);
}

.text-danger {
    color: var(--danger-600);
}

.text-info {
    color: var(--info-600);
}

.text-foreground {
    color: var(--foreground-primary);
}

.text-foreground-secondary {
    color: var(--foreground-secondary);
}

.text-foreground-tertiary {
    color: var(--foreground-tertiary);
}

/* Background colors */
.bg-primary {
    background-color: var(--primary-500);
}

.bg-secondary {
    background-color: var(--secondary-500);
}

.bg-success {
    background-color: var(--success-500);
}

.bg-warning {
    background-color: var(--warning-500);
}

.bg-danger {
    background-color: var(--danger-500);
}

.bg-info {
    background-color: var(--info-500);
}

.bg-surface {
    background-color: var(--surface-base);
}

.bg-elevated {
    background-color: var(--surface-elevated);
}

.bg-subtle {
    background-color: var(--background-subtle);
}

/* Border colors */
.border-subtle {
    border-color: var(--border-subtle);
}

.border-default {
    border-color: var(--border-default);
}

.border-strong {
    border-color: var(--border-strong);
}

/* Text Colors */
.text-muted {
    color: var(--foreground-secondary);
}

.text-primary-700 {
    color: var(--primary-700);
}

.text-success {
    color: var(--success-600);
}

.text-danger {
    color: var(--danger-600);
}

.text-warning {
    color: var(--warning-600);
}

/* Background Shades (used in dashboard) */
.bg-primary-50 {
    background-color: var(--primary-50);
}

.bg-primary-100 {
    background-color: var(--primary-100);
}

.bg-neutral-50 {
    background-color: var(--neutral-50);
}

.bg-neutral-200 {
    background-color: var(--neutral-200);
}

.bg-success-50 {
    background-color: var(--success-50);
}

.bg-warning-50 {
    background-color: var(--warning-50);
}

.bg-danger-50 {
    background-color: var(--danger-50);
}

.bg-info-50 {
    background-color: var(--info-50);
}

.bg-secondary-50 {
    background-color: var(--secondary-50);
}

/* Text colors for specific shades */
.text-primary-600 {
    color: var(--primary-600);
}

.text-secondary-600 {
    color: var(--secondary-600);
}

.text-warning-600 {
    color: var(--warning-600);
}

.text-info-600 {
    color: var(--info-600);
}
/* ========== tokens/spacing.css ========== */
/**
 * DESIGN SYSTEM - SPACING TOKENS
 * =============================================================================
 * Sistema de espaciado consistente basado en unidad de 4px
 * - Espaciado generoso (premium feel)
 * - Escala predecible
 * - Aplicación estratégica
 */

:root {
    /* =========================================================================
     BASE UNIT - Sistema de 4px
     ========================================================================= */
    --space-unit: 4px;

    /* =========================================================================
     SPACING SCALE - Progresión calculada
     ========================================================================= */
    --space-0: 0;
    --space-px: 1px;

    /* Micro spacing */
    --space-0-5: 2px;
    /* 0.5 * 4px */
    --space-1: 4px;
    /* 1 * 4px */
    --space-1-5: 6px;
    /* 1.5 * 4px */

    /* Small spacing */
    --space-2: 8px;
    /* 2 * 4px */
    --space-2-5: 10px;
    /* 2.5 * 4px */
    --space-3: 12px;
    /* 3 * 4px */
    --space-3-5: 14px;
    /* 3.5 * 4px */

    /* Base spacing */
    --space-4: 16px;
    /* 4 * 4px - Base unit */
    --space-5: 20px;
    /* 5 * 4px */
    --space-6: 24px;
    /* 6 * 4px */
    --space-7: 28px;
    /* 7 * 4px */

    /* Medium spacing */
    --space-8: 32px;
    /* 8 * 4px */
    --space-9: 36px;
    /* 9 * 4px */
    --space-10: 40px;
    /* 10 * 4px */
    --space-11: 44px;
    /* 11 * 4px */

    /* Large spacing */
    --space-12: 48px;
    /* 12 * 4px */
    --space-14: 56px;
    /* 14 * 4px */
    --space-16: 64px;
    /* 16 * 4px */
    --space-20: 80px;
    /* 20 * 4px */

    /* Extra large spacing */
    --space-24: 96px;
    /* 24 * 4px */
    --space-28: 112px;
    /* 28 * 4px */
    --space-32: 128px;
    /* 32 * 4px */
    --space-36: 144px;
    /* 36 * 4px */
    --space-40: 160px;
    /* 40 * 4px */
    --space-44: 176px;
    /* 44 * 4px */
    --space-48: 192px;
    /* 48 * 4px */
    --space-52: 208px;
    /* 52 * 4px */
    --space-56: 224px;
    /* 56 * 4px */
    --space-60: 240px;
    /* 60 * 4px */
    --space-64: 256px;
    /* 64 * 4px */

    /* =========================================================================
     SEMANTIC SPACING - Uso específico por contexto
     ========================================================================= */

    /* Component internal spacing */
    --spacing-component-xs: var(--space-2);
    /* 8px - Botones pequeños */
    --spacing-component-sm: var(--space-3);
    /* 12px - Inputs */
    --spacing-component-md: var(--space-4);
    /* 16px - Botones estándar */
    --spacing-component-lg: var(--space-6);
    /* 24px - Cards padding */
    --spacing-component-xl: var(--space-8);
    /* 32px - Cards grandes */

    /* Gap between elements */
    --spacing-gap-xs: var(--space-2);
    /* 8px */
    --spacing-gap-sm: var(--space-3);
    /* 12px */
    --spacing-gap-md: var(--space-4);
    /* 16px */
    --spacing-gap-lg: var(--space-6);
    /* 24px */
    --spacing-gap-xl: var(--space-8);
    /* 32px */

    /* Section spacing (generous for premium feel) */
    --spacing-section-xs: var(--space-12);
    /* 48px */
    --spacing-section-sm: var(--space-16);
    /* 64px */
    --spacing-section-md: var(--space-24);
    /* 96px */
    --spacing-section-lg: var(--space-32);
    /* 128px */
    --spacing-section-xl: var(--space-40);
    /* 160px */

    /* Container spacing */
    --spacing-container-sm: var(--space-4);
    /* 16px - Mobile */
    --spacing-container-md: var(--space-6);
    /* 24px - Tablet */
    --spacing-container-lg: var(--space-8);
    /* 32px - Desktop */
    --spacing-container-xl: var(--space-12);
    /* 48px - Large screens */

    /* =========================================================================
     LAYOUT WIDTHS - Max widths para contenido
     ========================================================================= */
    --width-xs: 320px;
    --width-sm: 384px;
    --width-md: 448px;
    --width-lg: 512px;
    --width-xl: 576px;
    --width-2xl: 672px;
    --width-3xl: 768px;
    --width-4xl: 896px;
    --width-5xl: 1024px;
    --width-6xl: 1152px;
    --width-7xl: 1280px;
    /* Max content width - premium feel */
    --width-full: 100%;
    --width-screen: 100vw;

    /* =========================================================================
     HEIGHTS - Alturas específicas
     ========================================================================= */
    --height-input: 40px;
    /* Altura estándar de inputs */
    --height-input-sm: 32px;
    /* Input pequeño */
    --height-input-lg: 48px;
    /* Input grande */
    --height-button: 40px;
    /* Botón estándar */
    --height-button-sm: 32px;
    /* Botón pequeño */
    --height-button-lg: 48px;
    /* Botón grande */
    --height-nav: 64px;
    /* Navbar height */
    --height-footer: 80px;
    /* Footer height */
}

/* =============================================================================
   UTILITY CLASSES - Margin
   ============================================================================= */

/* Margin all sides */
.m-0 {
    margin: var(--space-0);
}

.m-1 {
    margin: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.m-6 {
    margin: var(--space-6);
}

.m-8 {
    margin: var(--space-8);
}

.m-10 {
    margin: var(--space-10);
}

.m-12 {
    margin: var(--space-12);
}

.m-16 {
    margin: var(--space-16);
}

.m-20 {
    margin: var(--space-20);
}

.m-24 {
    margin: var(--space-24);
}

.m-auto {
    margin: auto;
}

/* Margin top */
.mt-0 {
    margin-top: var(--space-0);
}

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-5 {
    margin-top: var(--space-5);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-10 {
    margin-top: var(--space-10);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mt-16 {
    margin-top: var(--space-16);
}

.mt-20 {
    margin-top: var(--space-20);
}

.mt-24 {
    margin-top: var(--space-24);
}

/* Margin bottom */
.mb-0 {
    margin-bottom: var(--space-0);
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: var(--space-5);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-10 {
    margin-bottom: var(--space-10);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mb-16 {
    margin-bottom: var(--space-16);
}

.mb-20 {
    margin-bottom: var(--space-20);
}

.mb-24 {
    margin-bottom: var(--space-24);
}

/* Margin left */
.ml-0 {
    margin-left: var(--space-0);
}

.ml-1 {
    margin-left: var(--space-1);
}

.ml-2 {
    margin-left: var(--space-2);
}

.ml-3 {
    margin-left: var(--space-3);
}

.ml-4 {
    margin-left: var(--space-4);
}

.ml-6 {
    margin-left: var(--space-6);
}

.ml-8 {
    margin-left: var(--space-8);
}

.ml-auto {
    margin-left: auto;
}

/* Margin right */
.mr-0 {
    margin-right: var(--space-0);
}

.mr-1 {
    margin-right: var(--space-1);
}

.mr-2 {
    margin-right: var(--space-2);
}

.mr-3 {
    margin-right: var(--space-3);
}

.mr-4 {
    margin-right: var(--space-4);
}

.mr-6 {
    margin-right: var(--space-6);
}

.mr-8 {
    margin-right: var(--space-8);
}

.mr-auto {
    margin-right: auto;
}

/* Margin horizontal */
.mx-0 {
    margin-left: var(--space-0);
    margin-right: var(--space-0);
}

.mx-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
}

.mx-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

.mx-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
}

.mx-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.mx-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
}

.mx-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margin vertical */
.my-0 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
}

.my-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

.my-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.my-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.my-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.my-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.my-12 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
}

.my-16 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-16);
}

/* =============================================================================
   UTILITY CLASSES - Padding
   ============================================================================= */

/* Padding all sides */
.p-0 {
    padding: var(--space-0);
}

.p-1 {
    padding: var(--space-1);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: var(--space-5);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.p-10 {
    padding: var(--space-10);
}

.p-12 {
    padding: var(--space-12);
}

.p-16 {
    padding: var(--space-16);
}

.p-20 {
    padding: var(--space-20);
}

.p-24 {
    padding: var(--space-24);
}

/* Padding top */
.pt-0 {
    padding-top: var(--space-0);
}

.pt-1 {
    padding-top: var(--space-1);
}

.pt-2 {
    padding-top: var(--space-2);
}

.pt-3 {
    padding-top: var(--space-3);
}

.pt-4 {
    padding-top: var(--space-4);
}

.pt-5 {
    padding-top: var(--space-5);
}

.pt-6 {
    padding-top: var(--space-6);
}

.pt-8 {
    padding-top: var(--space-8);
}

.pt-10 {
    padding-top: var(--space-10);
}

.pt-12 {
    padding-top: var(--space-12);
}

.pt-16 {
    padding-top: var(--space-16);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pt-24 {
    padding-top: var(--space-24);
}

/* Padding bottom */
.pb-0 {
    padding-bottom: var(--space-0);
}

.pb-1 {
    padding-bottom: var(--space-1);
}

.pb-2 {
    padding-bottom: var(--space-2);
}

.pb-3 {
    padding-bottom: var(--space-3);
}

.pb-4 {
    padding-bottom: var(--space-4);
}

.pb-5 {
    padding-bottom: var(--space-5);
}

.pb-6 {
    padding-bottom: var(--space-6);
}

.pb-8 {
    padding-bottom: var(--space-8);
}

.pb-10 {
    padding-bottom: var(--space-10);
}

.pb-12 {
    padding-bottom: var(--space-12);
}

.pb-16 {
    padding-bottom: var(--space-16);
}

.pb-20 {
    padding-bottom: var(--space-20);
}

.pb-24 {
    padding-bottom: var(--space-24);
}

/* Padding left */
.pl-0 {
    padding-left: var(--space-0);
}

.pl-1 {
    padding-left: var(--space-1);
}

.pl-2 {
    padding-left: var(--space-2);
}

.pl-3 {
    padding-left: var(--space-3);
}

.pl-4 {
    padding-left: var(--space-4);
}

.pl-6 {
    padding-left: var(--space-6);
}

.pl-8 {
    padding-left: var(--space-8);
}

/* Padding right */
.pr-0 {
    padding-right: var(--space-0);
}

.pr-1 {
    padding-right: var(--space-1);
}

.pr-2 {
    padding-right: var(--space-2);
}

.pr-3 {
    padding-right: var(--space-3);
}

.pr-4 {
    padding-right: var(--space-4);
}

.pr-6 {
    padding-right: var(--space-6);
}

.pr-8 {
    padding-right: var(--space-8);
}

/* Padding horizontal */
.px-0 {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
}

.px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.px-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
}

.px-12 {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}

/* Padding vertical */
.py-0 {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.py-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.py-12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.py-16 {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

/* =============================================================================
   UTILITY CLASSES - Gap
   ============================================================================= */

.gap-0 {
    gap: var(--space-0);
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-10 {
    gap: var(--space-10);
}

.gap-12 {
    gap: var(--space-12);
}

.gap-16 {
    gap: var(--space-16);
}

/* Row gap */
.gap-y-0 {
    row-gap: var(--space-0);
}

.gap-y-2 {
    row-gap: var(--space-2);
}

.gap-y-4 {
    row-gap: var(--space-4);
}

.gap-y-6 {
    row-gap: var(--space-6);
}

.gap-y-8 {
    row-gap: var(--space-8);
}

/* Column gap */
.gap-x-0 {
    column-gap: var(--space-0);
}

.gap-x-2 {
    column-gap: var(--space-2);
}

.gap-x-4 {
    column-gap: var(--space-4);
}

.gap-x-6 {
    column-gap: var(--space-6);
}

.gap-x-8 {
    column-gap: var(--space-8);
}

/* =============================================================================
   UTILITY CLASSES - Space (para flex/grid children)
   ============================================================================= */

.space-y-0>*+* {
    margin-top: var(--space-0);
}

.space-y-2>*+* {
    margin-top: var(--space-2);
}

.space-y-3>*+* {
    margin-top: var(--space-3);
}

.space-y-4>*+* {
    margin-top: var(--space-4);
}

.space-y-6>*+* {
    margin-top: var(--space-6);
}

.space-y-8>*+* {
    margin-top: var(--space-8);
}

.space-y-12>*+* {
    margin-top: var(--space-12);
}

.space-x-0>*+* {
    margin-left: var(--space-0);
}

.space-x-2>*+* {
    margin-left: var(--space-2);
}

.space-x-3>*+* {
    margin-left: var(--space-3);
}

.space-x-4>*+* {
    margin-left: var(--space-4);
}

.space-x-6>*+* {
    margin-left: var(--space-6);
}

.space-x-8>*+* {
    margin-left: var(--space-8);
}
/* ========== tokens/typography.css ========== */
/**
 * DESIGN SYSTEM - TYPOGRAPHY TOKENS
 * =============================================================================
 * Sistema tipográfico premium con jerarquía clara
 * - Fuentes: Inter (UI), Satoshi (Headings)
 * - Escala modular 1.25 (Mayor Tercera)
 * - Espaciado generoso
 * - Pesos variados para jerarquía
 */

/* =========================================================================
   FONT IMPORTS - Fuentes premium
   ========================================================================= */

/* Inter - UI principal */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Satoshi - Headings */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap');

:root {
    /* =========================================================================
     FONT FAMILIES
     ========================================================================= */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', sans-serif;

    --font-heading: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', sans-serif;

    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
        'Fira Mono', 'Roboto Mono', monospace;

    /* =========================================================================
     FONT WEIGHTS - Pesos tipográficos
     ========================================================================= */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* =========================================================================
     FONT SIZES - Escala modular 1.25 (Mayor Tercera)
     Base: 16px (1rem)
     ========================================================================= */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px - Base */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-6xl: 3.75rem;
    /* 60px */
    --text-7xl: 4.5rem;
    /* 72px */
    --text-8xl: 6rem;
    /* 96px */
    --text-9xl: 8rem;
    /* 128px */

    /* =========================================================================
     LINE HEIGHTS - Altura de línea para legibilidad
     ========================================================================= */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* =========================================================================
     LETTER SPACING - Espaciado entre caracteres
     ========================================================================= */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* =========================================================================
     HEADING STYLES - Presets para títulos
     ========================================================================= */

    /* H1 - Hero/Display */
    --h1-size: var(--text-5xl);
    /* 48px */
    --h1-weight: var(--font-weight-bold);
    --h1-line-height: var(--leading-tight);
    --h1-letter-spacing: var(--tracking-tight);

    /* H2 - Section Title */
    --h2-size: var(--text-4xl);
    /* 36px */
    --h2-weight: var(--font-weight-bold);
    --h2-line-height: var(--leading-tight);
    --h2-letter-spacing: var(--tracking-tight);

    /* H3 - Subsection */
    --h3-size: var(--text-3xl);
    /* 30px */
    --h3-weight: var(--font-weight-semibold);
    --h3-line-height: var(--leading-snug);
    --h3-letter-spacing: var(--tracking-normal);

    /* H4 - Component Title */
    --h4-size: var(--text-2xl);
    /* 24px */
    --h4-weight: var(--font-weight-semibold);
    --h4-line-height: var(--leading-snug);
    --h4-letter-spacing: var(--tracking-normal);

    /* H5 - Small Title */
    --h5-size: var(--text-xl);
    /* 20px */
    --h5-weight: var(--font-weight-medium);
    --h5-line-height: var(--leading-normal);
    --h5-letter-spacing: var(--tracking-normal);

    /* H6 - Smallest Title */
    --h6-size: var(--text-lg);
    /* 18px */
    --h6-weight: var(--font-weight-medium);
    --h6-line-height: var(--leading-normal);
    --h6-letter-spacing: var(--tracking-wide);

    /* =========================================================================
     BODY TEXT STYLES
     ========================================================================= */
    --body-size: var(--text-base);
    /* 16px */
    --body-weight: var(--font-weight-normal);
    --body-line-height: var(--leading-relaxed);
    --body-letter-spacing: var(--tracking-normal);

    --body-sm-size: var(--text-sm);
    /* 14px */
    --body-sm-weight: var(--font-weight-normal);
    --body-sm-line-height: var(--leading-normal);

    --body-lg-size: var(--text-lg);
    /* 18px */
    --body-lg-weight: var(--font-weight-normal);
    --body-lg-line-height: var(--leading-relaxed);

    /* =========================================================================
     SPECIAL TEXT STYLES
     ========================================================================= */

    /* Lead/Intro text */
    --lead-size: var(--text-xl);
    --lead-weight: var(--font-weight-normal);
    --lead-line-height: var(--leading-relaxed);

    /* Caption/Helper text */
    --caption-size: var(--text-sm);
    --caption-weight: var(--font-weight-normal);
    --caption-line-height: var(--leading-normal);

    /* Label text */
    --label-size: var(--text-sm);
    --label-weight: var(--font-weight-medium);
    --label-line-height: var(--leading-normal);
    --label-letter-spacing: var(--tracking-wide);

    /* Code/Monospace */
    --code-size: var(--text-sm);
    --code-weight: var(--font-weight-normal);
    --code-line-height: var(--leading-normal);
}

/* =============================================================================
   BASE TYPOGRAPHY STYLES
   ============================================================================= */

body {
    font-family: var(--font-sans);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    color: var(--foreground-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =========================================================================
   HEADINGS - Jerarquía tipográfica clara
   ========================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--foreground-primary);
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

h1 {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    margin-bottom: var(--space-6);
}

h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    margin-bottom: var(--space-5);
}

h3 {
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    margin-bottom: var(--space-4);
}

h4 {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    margin-bottom: var(--space-4);
}

h5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    margin-bottom: var(--space-3);
}

h6 {
    font-size: var(--h6-size);
    font-weight: var(--h6-weight);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
    margin-bottom: var(--space-3);
}

/* =========================================================================
   BODY TEXT
   ========================================================================= */

p {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--body-size);
    line-height: var(--body-line-height);
    color: var(--foreground-primary);
}

p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph */
.lead {
    font-size: var(--lead-size);
    font-weight: var(--lead-weight);
    line-height: var(--lead-line-height);
    color: var(--foreground-secondary);
    margin-bottom: var(--space-6);
}

/* Small text */
small,
.text-small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* =========================================================================
   INLINE ELEMENTS
   ========================================================================= */

strong,
b {
    font-weight: var(--font-weight-semibold);
    color: var(--foreground-primary);
}

em,
i {
    font-style: italic;
}

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =========================================================================
   LISTS
   ========================================================================= */

ul,
ol {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-6);
}

li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
}

li:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   CODE & PRE
   ========================================================================= */

code {
    font-family: var(--font-mono);
    font-size: var(--code-size);
    font-weight: var(--code-weight);
    background-color: var(--neutral-100);
    color: var(--danger-600);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--code-size);
    line-height: var(--code-line-height);
    background-color: var(--neutral-900);
    color: var(--neutral-100);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* =========================================================================
   BLOCKQUOTE
   ========================================================================= */

blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--primary-500);
    background-color: var(--background-subtle);
    font-style: italic;
    color: var(--foreground-secondary);
}

blockquote p {
    margin-bottom: var(--space-2);
}

blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--foreground-tertiary);
}

/* =============================================================================
   UTILITY CLASSES - Font Sizes
   ============================================================================= */

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

.text-4xl {
    font-size: var(--text-4xl);
}

.text-5xl {
    font-size: var(--text-5xl);
}

.text-6xl {
    font-size: var(--text-6xl);
}

/* =============================================================================
   UTILITY CLASSES - Font Weights
   ============================================================================= */

.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* =============================================================================
   UTILITY CLASSES - Line Heights
   ============================================================================= */

.leading-none {
    line-height: var(--leading-none);
}

.leading-tight {
    line-height: var(--leading-tight);
}

.leading-snug {
    line-height: var(--leading-snug);
}

.leading-normal {
    line-height: var(--leading-normal);
}

.leading-relaxed {
    line-height: var(--leading-relaxed);
}

.leading-loose {
    line-height: var(--leading-loose);
}

/* =============================================================================
   UTILITY CLASSES - Letter Spacing
   ============================================================================= */

.tracking-tighter {
    letter-spacing: var(--tracking-tighter);
}

.tracking-tight {
    letter-spacing: var(--tracking-tight);
}

.tracking-normal {
    letter-spacing: var(--tracking-normal);
}

.tracking-wide {
    letter-spacing: var(--tracking-wide);
}

.tracking-wider {
    letter-spacing: var(--tracking-wider);
}

.tracking-widest {
    letter-spacing: var(--tracking-widest);
}

/* =============================================================================
   UTILITY CLASSES - Text Alignment
   ============================================================================= */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* =============================================================================
   UTILITY CLASSES - Text Transform
   ============================================================================= */

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.normal-case {
    text-transform: none;
}

/* =============================================================================
   UTILITY CLASSES - Text Decoration
   ============================================================================= */

.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}

/* =============================================================================
   UTILITY CLASSES - Font Families
   ============================================================================= */

.font-sans {
    font-family: var(--font-sans);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-mono {
    font-family: var(--font-mono);
}

/* =============================================================================
   UTILITY CLASSES - Truncate
   ============================================================================= */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================================
   RESPONSIVE TYPOGRAPHY - Ajustes por breakpoint
   ============================================================================= */

@media (max-width: 768px) {
    :root {
        --h1-size: var(--text-4xl);
        /* 36px en mobile */
        --h2-size: var(--text-3xl);
        /* 30px en mobile */
        --h3-size: var(--text-2xl);
        /* 24px en mobile */
        --h4-size: var(--text-xl);
        /* 20px en mobile */
    }
}

/* =============================================================================
   DARK MODE - Ajustes tipográficos
   ============================================================================= */

[data-theme="dark"] {
    body {
        color: var(--foreground-primary);
    }

    code {
        background-color: var(--neutral-800);
        color: var(--primary-400);
        border-color: var(--border-subtle);
    }

    pre {
        background-color: var(--neutral-900);
        color: var(--neutral-100);
    }

    blockquote {
        background-color: var(--neutral-800);
        border-left-color: var(--primary-500);
    }
}
/* ========== tokens/shadows.css ========== */
/**
 * DESIGN SYSTEM - SHADOW TOKENS
 * =============================================================================
 * Sistema de elevación premium con sombras más evidentes
 */

:root {
    /* =========================================================================
     ELEVATION LEVELS (Box shadows)
     ========================================================================= */

    /* Level 0 - Flat/Base */
    --shadow-none: none;

    /* Level 1 - Subtle (Cards, Buttons default) */
    --shadow-sm:
        0 2px 4px 0 rgba(0, 0, 0, 0.06),
        0 1px 2px 0 rgba(0, 0, 0, 0.04);

    /* Level 2 - Elevated (Hover states, Dropdowns) */
    --shadow-md:
        0 4px 12px -1px rgba(0, 0, 0, 0.08),
        0 2px 6px -1px rgba(0, 0, 0, 0.05);

    /* Level 3 - Floating (Modals, Toasts) */
    --shadow-lg:
        0 10px 24px -3px rgba(0, 0, 0, 0.10),
        0 6px 12px -2px rgba(0, 0, 0, 0.06);

    /* Level 4 - Overlay (Popups, large modals) */
    --shadow-xl:
        0 20px 40px -5px rgba(0, 0, 0, 0.12),
        0 12px 20px -5px rgba(0, 0, 0, 0.06);

    /* Level 5 - Highest (Sticky elements) */
    --shadow-2xl:
        0 25px 50px -12px rgba(0, 0, 0, 0.30);

    /* Inner shadows for inputs/wells */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* =========================================================================
     COLORED SHADOWS (Glow effects) - Premium
     ========================================================================= */
    --shadow-primary-sm: 0 4px 14px 0 rgba(59, 130, 246, 0.40);
    --shadow-primary-md: 0 8px 20px rgba(59, 130, 246, 0.30);
    --shadow-danger-sm: 0 4px 14px 0 rgba(220, 38, 38, 0.40);
    --shadow-success-sm: 0 4px 14px 0 rgba(5, 150, 105, 0.40);

    /* =========================================================================
     SPECIFIC USE CASES
     ========================================================================= */
    --shadow-card:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 4px rgba(0, 0, 0, 0.03),
        0 0 1px rgba(0, 0, 0, 0.02);

    --shadow-sidebar:
        2px 0 12px rgba(0, 0, 0, 0.03),
        1px 0 4px rgba(0, 0, 0, 0.02);

    --shadow-header:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
}

/* =============================================================================
   DARK MODE SHADOWS
   ============================================================================= */
[data-theme="dark"] {
    --shadow-sm:
        0 2px 4px 0 rgba(0, 0, 0, 0.4),
        0 1px 2px 0 rgba(0, 0, 0, 0.3);

    --shadow-md:
        0 4px 12px -1px rgba(0, 0, 0, 0.5),
        0 2px 6px -1px rgba(0, 0, 0, 0.3);

    --shadow-lg:
        0 10px 24px -3px rgba(0, 0, 0, 0.5),
        0 6px 12px -2px rgba(0, 0, 0, 0.3);

    --shadow-xl:
        0 20px 40px -5px rgba(0, 0, 0, 0.5),
        0 12px 20px -5px rgba(0, 0, 0, 0.3);

    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6);

    --shadow-card:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.shadow-none {
    box-shadow: var(--shadow-none);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.shadow-inner {
    box-shadow: var(--shadow-inner);
}

/* Card specific */
.shadow-card {
    box-shadow: var(--shadow-card);
}

/* Glows */
.shadow-glow-primary {
    box-shadow: var(--shadow-primary-sm);
}

.shadow-glow-danger {
    box-shadow: var(--shadow-danger-sm);
}

.shadow-glow-success {
    box-shadow: var(--shadow-success-sm);
}
/* ========== tokens/transitions.css ========== */
/**
 * DESIGN SYSTEM - TRANSITION TOKENS
 * =============================================================================
 * Control de animaciones y tiempos de respuesta
 */

:root {
    /* DURATIONS */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;

    /* EASINGS */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* SEMANTIC TRANSITIONS */
    --transition-base: all var(--duration-200) var(--ease-default);
    --transition-smooth: all var(--duration-300) var(--ease-default);
    --transition-slow: all var(--duration-500) var(--ease-default);
}
/* ========== tokens/radius.css ========== */
/**
 * DESIGN SYSTEM - RADIUS TOKENS
 * =============================================================================
 * Border radius premium - Valores más generosos
 */

:root {
    /* =========================================================================
     BORDER RADIUS SCALE (Premium Values)
     ========================================================================= */
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    /* Small inputs, tags */
    --radius-md: 12px;
    /* Default buttons, inputs */
    --radius-lg: 16px;
    /* Cards, Large buttons */
    --radius-xl: 20px;
    /* Modals, Large cards */
    --radius-2xl: 24px;
    /* High level containers */
    --radius-3xl: 32px;
    /* Dramatic curves */
    --radius-full: 9999px;
    /* Pills, Circles */

    /* =========================================================================
     SEMANTIC RADIUS
     ========================================================================= */
    --radius-button: var(--radius-md);
    --radius-input: var(--radius-md);
    --radius-card: var(--radius-2xl);
    --radius-modal: var(--radius-xl);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.rounded-none {
    border-radius: var(--radius-none);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-3xl {
    border-radius: var(--radius-3xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Specific corners */
.rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.rounded-b-lg {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
/* ========== foundations/reset.css ========== */
/**
 * DESIGN SYSTEM - RESET
 * =============================================================================
 * Normalización moderna para asegurar consistencia
 * Inspirado en Andy Bell y Josh Comeau
 */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core root defaults */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ========== foundations/base.css ========== */
/**
 * DESIGN SYSTEM - BASE
 * =============================================================================
 * Estilos globales base aplicados al HTML
 * - Define el fondo y color de texto base
 */

body {
    background-color: var(--background-base);
    background-image:
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.03) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--foreground-primary);
    font-family: var(--font-sans);
    font-size: var(--body-size);
    line-height: var(--leading-relaxed);
    transition: background-color var(--transition-base), color var(--transition-base);
    outline: none !important;

    /* Better font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--neutral-100);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--neutral-900);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--neutral-700);
    border-color: var(--neutral-900);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-600);
}

/* Selection */
::selection {
    background-color: var(--primary-200);
    color: var(--primary-900);
}

[data-theme="dark"] ::selection {
    background-color: var(--primary-800);
    color: var(--primary-50);
}

/* Focus styling - Eliminate default rectangle on ALL browsers */
button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
.btn:focus,
.btn:active,
a:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none;
    /* Reset shadow to allow specific ones below */
}

:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--primary-500) !important;
    border-radius: inherit;
}

/* Accessibility: Ensure focus is still visible but premium for buttons */
.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--primary-400) !important;
}
/* ========== foundations/gradients.css ========== */
/**
 * DESIGN SYSTEM - GRADIENTS
 * =============================================================================
 * Utilidades de gradientes sofisticados
 * - Usan los tokens de color
 * - Sutiles y premium
 */

/* =============================================================================
   TEXT GRADIENTS
   ============================================================================= */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
}

.gradient-primary {
    background-image: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
}

[data-theme="dark"] .gradient-primary {
    background-image: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-200) 100%);
}

.gradient-secondary {
    background-image: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-400) 100%);
}

.gradient-rainbow {
    background-image: linear-gradient(to right, var(--primary-500), var(--secondary-500), var(--success-500));
}

/* =============================================================================
   BACKGROUND GRADIENTS
   ============================================================================= */

/* Subtle backgrounds */
.bg-gradient-subtle {
    background: linear-gradient(180deg, var(--surface-base) 0%, var(--background-subtle) 100%);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
}

.bg-gradient-dark {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Glass effect utilities */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .glass {
    background: rgba(15, 15, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .glass-card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
/* ========== foundations/utilities.css ========== */
/**
 * DESIGN SYSTEM - UTILITIES
 * =============================================================================
 * Utilidades de propósito general mínimas
 */

/* Display & Pos */
.block {
    display: block;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* Text */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--foreground-secondary);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.uppercase {
    text-transform: uppercase;
}

/* Sizing Utils (Minimal) */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

/* Icon Sizes (Standardized) */
.icon-xs {
    width: 12px;
    height: 12px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

/* Spacing Helpers */
.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mt-auto {
    margin-top: auto;
}

.mr-2 {
    margin-right: var(--space-2);
}

.ml-2 {
    margin-left: var(--space-2);
}

/* Radius Helpers */
.rounded-full {
    border-radius: var(--radius-full);
}

.overflow-hidden {
    overflow: hidden !important;
}

/* Dividers */
.divider-h {
    width: 100%;
    height: 1px;
    background-color: var(--border-subtle);
}

.divider-v {
    width: 1px;
    height: 100%;
    background-color: var(--border-subtle);
}
/* ========== layout/grid.css ========== */
/**
 * DESIGN SYSTEM - GRID UTILITIES (Fixed & Responsive)
 * =============================================================================
 */

.grid {
    display: grid;
    width: 100%;
}

/* Spacing */
.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

/* RESPONSIVE COLUMNS (Mobile-First Approach) */
/* By default, all grids are 1 column on mobile to prevent overflow */

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* 2 columns: 1 on mobile, 2 on tablet+ */
.grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 3 columns: 1 on mobile, 2 on tablet, 3 on desktop */
.grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 4 columns: 1 on mobile, 2 on tablet, 4 on desktop */
.grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* SPANS */
.col-span-1 {
    grid-column: span 1;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* RESPONSIVE VARIANTS */

/* Tablet (md: >= 768px) */
@media (min-width: 768px) {
    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:col-span-2 {
        grid-column: span 2;
    }
}

/* Desktop (lg: >= 1024px) */
@media (min-width: 1024px) {
    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* ========== layout/flex.css ========== */
/**
 * DESIGN SYSTEM - FLEX UTILITIES
 * =============================================================================
 * Utilidades para Flexbox
 */

/* Direction */
.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

/* Wrap */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Align Items */
.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Flex Grow/Shrink */
.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-initial {
    flex: 0 1 auto;
}

.flex-none {
    flex: none;
}

.grow {
    flex-grow: 1;
}

.grow-0 {
    flex-grow: 0;
}

.shrink {
    flex-shrink: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

/* Align Self */
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-stretch {
    align-self: stretch;
}
/* ========== layout/containers.css ========== */
/* ============================================================================
   GENERIC CONTAINERS & GRID SYSTEM
   ========================================================================== */

/* Generic Bootstrap-like Containers */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

.container-fluid {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
}

/* SECTIONING UTILS */
.section {
    padding: var(--space-12) 0;
}

.section-title {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--space-8);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* ========== layout/shell.css ========== */
/* ============================================================================
   SHELL LAYOUT - Main Application Architecture (Fixed Offset System)
   ========================================================================== */

:root {
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --navbar-height: 70px;
    --navbar-mobile-height: 64px;
}

/* 1. Core Structure */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--background-base);
}

.app-shell {
    display: block;
    /* Swithing to block to handle fixed sidebar margin properly */
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    /* Prevent horizontal scroll globally */
}

/* Sidebar is part of shell but fixed */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 1020;
    transition: width var(--transition-smooth);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Main content area shifts based on sidebar */
.app-main {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    margin-left: var(--sidebar-width);
    /* Fixed offset */
    padding-top: var(--navbar-height);
    transition: margin-left var(--transition-smooth);
    min-height: 100vh;
}

.sidebar.collapsed+.app-main {
    margin-left: var(--sidebar-collapsed-width);
}

/* Page content container */
.app-content {
    flex: 1;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* 2. Responsive Rules (Mobile First) */
@media (max-width: 768px) {
    .app-main {
        margin-left: 0 !important;
        padding-top: var(--navbar-mobile-height);
        width: 100%;
        overflow-x: hidden;
    }

    /* Body lock state when sidebar is open */
    body.overflow-hidden {
        overflow: hidden !important;
        height: 100vh;
        position: fixed;
        width: 100%;
    }
}
/* ========== layout/spacing.css ========== */
/**
 * DESIGN SYSTEM - LAYOUT SPACING
 * =============================================================================
 * Patrones de espaciado específicos de layout
 * Nota: Los utilitarios de margin/padding/gap están en tokens/spacing.css
 */

/* Stack Pattern (Owl selector) - Space between flow content */
.stack>*+* {
    margin-top: var(--space-4);
}

.stack-sm>*+* {
    margin-top: var(--space-2);
}

.stack-lg>*+* {
    margin-top: var(--space-8);
}

/* Horizontal Stack */
.hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    /* Using gap instead of margins for better wrap behavior */
}

/* Horizontal Stack Variants */
.hstack-sm {
    gap: var(--space-2);
}

.hstack-lg {
    gap: var(--space-8);
}

/* Variant: No wrap (force single line) */
.hstack-nowrap {
    flex-wrap: nowrap;
}

/* Vertical Stack */
.vstack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Vertical Stack Variants */
.vstack-sm {
    gap: var(--space-2);
}

.vstack-lg {
    gap: var(--space-8);
}

/* Spacer */
.spacer {
    flex-grow: 1;
}

/* Safe areas */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}
/* ========== components/buttons.css ========== */
/* ============================================================================
   BUTTONS COMPONENT - Premium Interactions
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    height: 2.5rem;
    font-family: var(--font-base);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    text-decoration: none;
    background-color: var(--surface-base);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 1px 1px rgba(0, 0, 0, 0.05);
}

.btn:active {
    transform: scale(0.98);
}

/* Primary */
.btn-primary {
    background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    border: 1px solid var(--primary-700);
    box-shadow:
        0 4px 6px -1px rgba(59, 130, 246, 0.2),
        0 2px 4px -1px rgba(59, 130, 246, 0.1);
}

.btn-primary:hover {
    background: linear-gradient(180deg, var(--primary-400) 0%, var(--primary-500) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 10px 15px -3px rgba(59, 130, 246, 0.3),
        0 4px 6px -2px rgba(59, 130, 246, 0.1);
}

/* Secondary (Surface) */
.btn-secondary {
    background-color: var(--surface-base);
    color: var(--foreground-primary);
    border-color: var(--border-default);
}

.btn-secondary:hover {
    background-color: var(--surface-muted);
    border-color: var(--border-hover);
    color: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:active {
    background-color: var(--surface-pressed);
    transform: translateY(0);
}

/* Colors */
.btn-success {
    background: linear-gradient(180deg, var(--success-500) 0%, var(--success-600) 100%);
    color: white;
    border: 1px solid var(--success-700);
    box-shadow:
        0 4px 6px -1px rgba(16, 185, 129, 0.2),
        0 2px 4px -1px rgba(16, 185, 129, 0.1);
}

.btn-success:hover {
    background: linear-gradient(180deg, var(--success-400) 0%, var(--success-500) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 10px 15px -3px rgba(16, 185, 129, 0.3),
        0 4px 6px -2px rgba(16, 185, 129, 0.1);
}

.btn-warning {
    background-color: var(--warning-500);
    color: white;
}

.btn-warning:hover {
    background-color: var(--warning-600);
}

.btn-danger {
    background-color: var(--danger-600);
    color: white;
}

.btn-danger:hover {
    background-color: var(--danger-700);
}

/* Ghost (Transparent) */
.btn-ghost {
    background-color: transparent;
    color: var(--foreground-secondary);
    box-shadow: none;
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
    transform: none;
}

/* Outline */
.btn-outline {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--foreground-secondary);
    box-shadow: none;
}

.btn-outline:hover {
    background-color: var(--surface-base);
    border-color: var(--foreground-secondary);
    color: var(--foreground-primary);
}

/* Sizes */
.btn-sm {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
}

.btn-lg {
    height: 3rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50px;
}

/* Loading */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    color: var(--neutral-500);
}

.btn-primary.btn-loading::after {
    color: white;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dark Mode */
[data-theme="dark"] .btn-secondary {
    background-color: var(--surface-base);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--surface-muted);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .btn {
        width: auto;
        justify-content: center;
        max-width: 100%;
    }
}
/* ========== components/forms.css ========== */
/* ============================================================================
   FORMS COMPONENT - Global Premium Design
   ========================================================================== */

/* 1. Global Label Styling */
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground-secondary);
    margin-bottom: 0.875rem;
    /* Further increased for ultra-premium airy feel */
    letter-spacing: -0.01em;
}

.form-group {
    margin-bottom: 2rem;
    /* Standardized vertical rhythm for premium layout */
}

.form-group:last-child {
    margin-bottom: 0;
}

/* 2. Global Input Foundation (Tactile Depth & Dynamic Rounding) */
.form-control,
.form-select,
.datepicker-input,
.custom-select-trigger {
    display: block;
    width: 100%;
    padding: 0.8125rem 1.25rem;
    font-family: var(--font-base);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--foreground-primary);
    background-color: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    /* Standardized ultra-rounded */
    transition: all var(--transition-smooth);

    /* Enhanced Tactile Depth */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 1px rgba(0, 0, 0, 0.02);
    -webkit-appearance: none;
    appearance: none;
    cursor: text;
}

/* Specific Cursors */
.form-select,
.custom-select-trigger {
    cursor: pointer;
}

/* Global Placeholder Appearance */
.form-control::placeholder {
    color: var(--foreground-tertiary);
    opacity: 0.6;
}

/* 3. Global Interaction States (Focus & Hover) */
.form-control:hover,
.form-select:hover,
.datepicker-input:hover,
.custom-select-trigger:hover {
    border-color: var(--neutral-300);
    background-color: var(--neutral-100);
}

.form-control:focus,
.form-select:focus,
.datepicker-input:focus,
.custom-select-wrapper.open .custom-select-trigger {
    background-color: var(--surface-base);
    border-color: var(--primary-400);
    outline: 0;
    box-shadow:
        0 0 0 4px var(--state-focus),
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
    /* Elevation feel */
}

/* 4. INPUT GROUPS (Seamless Integrated Design) */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-subtle);
    background-color: var(--neutral-50);
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

.input-group .form-control,
.input-group .datepicker-input {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
    min-width: 0;
    /* Prevent overflow */
}

.input-group-text,
.input-group-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground-tertiary);
    background-color: transparent;
    user-select: none;
}

.input-group-separator {
    background-color: var(--neutral-100);
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

/* Responsive: Stack vertically on mobile */
@media (max-width: 640px) {
    .input-group {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .input-group .form-control,
    .input-group .datepicker-input {
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-lg) !important;
        background-color: var(--neutral-50) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    .input-group-separator {
        display: none;
        /* Hide separator on mobile */
    }

    .input-group-text {
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        background-color: var(--neutral-100);
        padding: 0.5rem 1rem;
    }
}

/* 5. CUSTOM SELECT (The Framework Standard - Elite Premium Edition) */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-wrapper select {
    display: none !important;
}

.custom-select-trigger {
    position: relative;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 12px 45px 12px 22px !important;
    color: #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    font-family: 'Satoshi', 'Inter', sans-serif !important;
}

/* Estado ABIERTO */
.custom-select-wrapper.open .custom-select-trigger {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
    color: #1e40af !important;
}

.custom-select-trigger:after {
    content: '' !important;
    width: 1rem !important;
    height: 1rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 9l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.5 !important;
    transition: transform 0.3s !important;
}

.custom-select-wrapper.open .custom-select-trigger:after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.custom-options {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.97);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px !important;
    overflow: hidden;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.custom-option {
    padding: 12px 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    cursor: pointer;
    border-radius: 14px !important;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    margin-bottom: 4px !important;
}

.custom-option:last-child {
    margin-bottom: 0 !important;
}

.custom-option:hover {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

.custom-option.selected {
    background-color: #2563eb !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
}

/* 5.A NATIVE SELECT (Lightweight Alternative) */
.form-select {
    display: block;
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--foreground-primary);
    background-color: var(--surface-base);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    appearance: none;
    transition: all var(--transition-bounce);
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 4px var(--primary-100);
    background-color: white;
}

.form-select-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-lg);
}

/* 6. Switch (Integrated Premium Style) */
.form-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    cursor: pointer;
}

.form-switch input {
    -webkit-appearance: none;
    appearance: none;
    width: 2.75rem;
    height: 1.5rem;
    background-color: var(--neutral-300);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-switch input::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.form-switch input:checked {
    background-color: var(--primary-600);
}

.form-switch input:checked::before {
    transform: translateX(1.25rem);
}

/* 7. Range Slider Framework Upgrade */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--neutral-200);
    border-radius: 9999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    cursor: grab;
    transition: transform 0.15s;
}

input[type=range]:active::-webkit-slider-thumb {
    transform: scale(1.15);
    cursor: grabbing;
    background-color: var(--primary-600);
}

/* 8. Datepicker Integration */
.datepicker-wrapper {
    position: relative;
    width: 100%;
}

.datepicker-icon {
    position: absolute;
    left: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--foreground-tertiary);
    z-index: 2;
    pointer-events: none;
    width: 1.125rem;
    height: 1.125rem;
}

.datepicker-input {
    padding-left: 2.875rem !important;
}

/* Dark Mode Overrides for Depth */
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .form-control:focus {
    background-color: rgba(255, 255, 255, 0.05);
}
/* ========== components/cards.css ========== */
/* ============================================================================
   CARDS COMPONENT
   ========================================================================== */

.card {
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    /* Allow dropdowns to float outside card */
}

/* Hover Effect for Interactive Cards */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

/* Card Header */
.card-header {
    padding: 1.5rem 2rem;
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--foreground-primary);
    margin: 0;
    line-height: 1.2;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--foreground-secondary);
    margin-top: 0.375rem;
}

/* Card Body */
.card-body {
    padding: 2rem;
    flex: 1 1 auto;
}

.card-body.no-padding {
    padding: 0;
}

/* Card Footer */
.card-footer {
    padding: 1rem 1.5rem;
    background-color: var(--surface-muted);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* --- STAT CARDS (Premium) --- */
.card-stat {
    display: flex;
    flex-direction: row !important;
    /* Force Horizontal */
    align-items: center;
    justify-content: flex-start;
    /* Align left */
    padding: 1.5rem;
    gap: 1.25rem;
    text-align: left;
    /* Reset alignment */
}

.card-stat .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    /* Soft Squircle */
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-stat .stat-content {
    display: flex;
    flex-direction: column;
}

.card-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--foreground-primary);
    letter-spacing: -0.02em;
}

.card-stat .stat-label {
    font-size: 0.875rem;
    color: var(--foreground-tertiary);
    font-weight: 500;
}

/* Color Variants for Icons */
.stat-icon.bg-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}

.stat-icon.bg-green {
    background-color: #f0fdf4;
    color: #22c55e;
}

.stat-icon.bg-orange {
    background-color: #fff7ed;
    color: #f97316;
}

.stat-icon.bg-purple {
    background-color: #faf5ff;
    color: #a855f7;
}

.stat-icon.bg-red {
    background-color: #fef2f2;
    color: #ef4444;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .stat-icon.bg-blue {
    background-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .stat-icon.bg-green {
    background-color: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .stat-icon.bg-orange {
    background-color: rgba(249, 115, 22, 0.15);
}


/* --- INTEGRATION FIXES --- */

/* Allow sticky header inside card */
.card .table th {
    position: relative;
    /* Override sticky if needed inside card, or keep sticky but constrained */
}

/* Dark Mode */
[data-theme="dark"] .card {
    background-color: var(--surface-base);
    box-shadow: none;
}
/* ========== components/tables.css ========== */
/* ============================================================================
   TABLES COMPONENT
   ========================================================================== */

/* Wrapper for responsive scrolling */
/* Wrapper for responsive scrolling with Premium Scroll Hints */
.table-responsive,
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* Premium Scroll Shadows (UX Indicator) */
    /* 
       Logic: 
       1. background-color: base surface
       2. linear-gradients (local): Cover the shadows when scrolled to edge
       3. radial-gradients (scroll): The actual shadows that stay fixed
    */
    background-color: var(--surface-base);

    background-image:
        /* Left Cover (Matches background) */
        linear-gradient(to right, var(--surface-base) 30%, rgba(255, 255, 255, 0)),
        /* Right Cover (Matches background) */
        linear-gradient(to left, var(--surface-base) 30%, rgba(255, 255, 255, 0)),
        /* Left Shadow */
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
        /* Right Shadow */
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;

    /* The Magic: 'local' moves with content (covering shadow), 'scroll' stays fixed */
    background-attachment: local, local, scroll, scroll;

    /* Rounded corners handling */
    border-radius: var(--radius-lg);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 0;
}

/* Header Styling - Restoring the lost background */
.table th {
    background-color: #f8fafc;
    /* Slate-50 - Explicit color to ensure visibility */
    color: var(--foreground-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.875rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.table td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--foreground-primary);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Row Hover Effect - Premium Interactive */
.table tbody tr {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border-left: 3px solid transparent;
    /* Prepare for hover indicator */
}

.table tbody tr:hover {
    background-color: var(--primary-50);
    /* Match Sidebar Hover */
    color: var(--primary-900);
    /* Darker text for readability */
    /* transform: scale(1.005); // Risky on tables, sticking to color/shadow */
}

.table tbody tr:hover td {
    color: var(--primary-900);
    /* Ensure cells inherit the premium text color */
}

/* Optional: Icon Pop in tables too */
.table tbody tr:hover .btn-icon {
    background-color: white;
    box-shadow: var(--shadow-sm);
    color: var(--primary-600);
    transform: scale(1.1);
}

/* User Profile in Table */
.table-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
}

.table-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.table-user-name {
    font-weight: 500;
    color: var(--foreground-primary);
}

.table-user-email {
    font-size: 0.75rem;
    color: var(--foreground-tertiary);
}

/* Card Integration - TABLE FLUSH */
.card .table-responsive,
.card .table-wrapper {
    margin: 0;
    border: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Flush bottom corners */
    width: 100%;
}

.card .table {
    margin-bottom: 0;
}

.card .table th:first-child,
.card .table td:first-child {
    padding-left: 1.5rem;
    /* Restore visual padding left */
}

.card .table th:last-child,
.card .table td:last-child {
    padding-right: 1.5rem;
    /* Restore visual padding right */
}

/* Remove default border top of table if under card header */
.card-header+.table-responsive .table th {
    border-top: 1px solid var(--border-subtle);
}


/* Dark Mode Support */
[data-theme="dark"] .table th {
    background-color: #1e293b;
    /* Slate-800 */
    color: var(--foreground-secondary);
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .table td {
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Dark Mode Scroll Hints */
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .table-wrapper {
    background-color: #1e293b;
    /* Match surface base in dark */
    background-image:
        linear-gradient(to right, #1e293b 30%, rgba(30, 41, 59, 0)),
        linear-gradient(to left, #1e293b 30%, rgba(30, 41, 59, 0)),
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* ============================================================================
   SMART TABLE EXTENSIONS
   ========================================================================== */

/* 1. Table Toolbar */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background-color: var(--surface-base);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 1rem;
}

.table-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground-primary);
}

.table-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* 2. Sortable Headers */
.th-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.75rem !important;
    transition: background-color 0.15s;
}

.th-sortable:hover {
    background-color: var(--neutral-100);
}

.th-sort-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--foreground-tertiary);
    opacity: 0.5;
    transition: all 0.2s;
}

.th-sortable:hover .th-sort-icon {
    opacity: 1;
}

.th-sortable.asc .th-sort-icon {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
    color: var(--primary-600);
}

.th-sortable.desc .th-sort-icon {
    opacity: 1;
    color: var(--primary-600);
}

/* 3. Column Filters */
.filter-row th {
    background-color: var(--surface-base);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.filter-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--neutral-50);
    transition: all 0.2s;
    color: var(--foreground-primary);
}

/* Specific style for SELECT filters (Premium Native Look) */
select.filter-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.75rem;
    /* Space for icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px 10px;
    cursor: pointer;
}

/* ADAPTER: Premium Custom Select inside Filter Row */
.filter-row .custom-select-wrapper {
    width: 100%;
}

.filter-row .custom-select-trigger {
    position: relative !important;
    padding: 0.4rem 2rem 0.4rem 0.75rem !important;
    /* Extra padding right for icon */
    font-size: 0.75rem !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    background-color: var(--neutral-50) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--foreground-primary) !important;
}

.filter-row .custom-select-trigger::after {
    content: '' !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Darker SVG Color for visibility (#64748b) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 10 !important;
    pointer-events: none;
    transition: transform 0.2s ease !important;
}

.filter-row .custom-select-wrapper.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.filter-row .custom-options {
    min-width: 100%;
    width: max-content;
    /* Allow wider options than input */
    font-size: 0.8125rem;
    margin-top: 4px;
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-400);
    background-color: white;
    box-shadow: 0 0 0 2px var(--state-focus);
}

/* ADAPTER: Premium Custom Select inside Table Footer (Pagination) */
.table-footer .custom-select-wrapper {
    width: auto !important;
    min-width: 80px;
}

.table-footer .custom-select-trigger {
    position: relative !important;
    padding: 0.35rem 2rem 0.35rem 0.75rem !important;
    /* Compact padding */
    font-size: 0.8125rem !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    background-color: var(--surface-base) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--foreground-secondary) !important;
}

.table-footer .custom-select-trigger::after {
    content: '' !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none;
    transition: transform 0.2s ease !important;
}

.table-footer .custom-select-wrapper.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.table-footer .custom-options {
    bottom: 100% !important;
    /* Open UPWARDS in footer */
    top: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 4px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Export Buttons */
.btn-excel {
    color: #166534;
    background-color: #dcfce7;
    border: 1px solid #bbf7d0;
}

.btn-excel:hover {
    background-color: #bbf7d0;
    color: #14532d;
}

.btn-csv {
    color: #0369a1;
    background-color: #e0f2fe;
    border: 1px solid #bae6fd;
}

.btn-csv:hover {
    background-color: #bae6fd;
    color: #0c4a6e;
}

/* 5. Smart Footer */
.table-footer {
    padding: 1rem 1.5rem;
    background-color: var(--surface-base);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-info {
    font-size: 0.875rem;
    color: var(--foreground-secondary);
}

/* Dark Mode Extensions */
[data-theme="dark"] .th-sortable:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .filter-input {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-subtle);
    color: white;
}

[data-theme="dark"] select.filter-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .filter-input:focus {
    background-color: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .btn-excel {
    background-color: rgba(22, 101, 52, 0.2);
    border-color: rgba(22, 101, 52, 0.5);
    color: #86efac;
}

[data-theme="dark"] .btn-csv {
    background-color: rgba(3, 105, 161, 0.2);
    border-color: rgba(3, 105, 161, 0.5);
    color: #7dd3fc;
}

/* Dark Mode Smart Table Selects */
[data-theme="dark"] .filter-row .custom-select-trigger,
[data-theme="dark"] .table-footer .custom-select-trigger {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-subtle) !important;
    color: var(--foreground-secondary) !important;
}

[data-theme="dark"] .filter-row .custom-options,
[data-theme="dark"] .table-footer .custom-options {
    background-color: #1e293b !important;
    border-color: var(--border-subtle) !important;
}

[data-theme="dark"] .filter-row .custom-option:hover,
[data-theme="dark"] .table-footer .custom-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
/* ========== components/modals.css ========== */
/* ============================================================================
   MODALS COMPONENT - Premium & Robust
   ========================================================================== */

/* The Modal Overlay/Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    /* Highest priority */
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* Classic dimmed bg */
    backdrop-filter: blur(4px);
    /* Premium Glass Effect */

    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;

    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Active State */
.modal-backdrop.show {
    display: flex;
    opacity: 1;
}

/* The Modal Dialog (the box itself) */
.modal-dialog {
    background-color: #ffffff;
    /* FORCE SOLID WHITE - No variables risk */
    width: 100%;
    max-width: 32rem;
    /* STANDARD WIDTH (approx 500px) */
    margin: 1rem;

    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* Stronger shadow */

    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);

    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Premium Pop Transition */
    border: none;
    /* Clean borderless look */
    overflow: visible;
    /* Allow dropdowns to pop out */
}

.modal-backdrop.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Modal Body Scroll */
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow: visible;
    /* Allow dropdowns to float outside card */
    line-height: 1.6;
    color: var(--foreground-secondary);
    background-color: #ffffff;
    /* SAFETY BACKGROUND */
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: #ffffff;
    /* SAFETY BACKGROUND */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    /* Match parent radius */
}

.modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground-primary);
    line-height: 1.4;
}

.modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    height: 2rem;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground-tertiary);
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.modal-close:hover {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
}

/* Footer (Horizontal Buttons) */
.modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.5rem;
    width: 100%;
    background-color: #f8fafc;
    /* Slate-50 - Explicit Distinction */
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Sizes */
.modal-sm {
    max-width: 24rem;
}

.modal-lg {
    max-width: 48rem;
}

.modal-xl {
    max-width: 64rem;
}

/* Dark Mode Support */
[data-theme="dark"] .modal-dialog {
    background-color: var(--surface-base);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-footer {
    background-color: rgba(0, 0, 0, 0.2);
}
/* ========== components/dropdowns.css ========== */
/* ============================================================================
   DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 200px;
    /* Ancho cómodo */
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Shadow LG */
    padding: 0.5rem;
    z-index: 100;

    /* Animation state: hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: top right;
}

/* Active State */
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--foreground-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    color: var(--foreground-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: all 0.15s;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
}

.dropdown-item i {
    width: 1rem;
    height: 1rem;
    color: var(--foreground-tertiary);
}

.dropdown-item:hover i {
    color: var(--foreground-primary);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 0.5rem 0;
}

/* Variants */
.dropdown-item.text-danger:hover {
    background-color: #fee2e2;
    color: #ef4444;
}

.dropdown-item.text-danger:hover i {
    color: #ef4444;
}

/* Rotate Chevron on Active */
[aria-expanded="true"] i[data-lucide="chevron-down"] {
    transform: rotate(180deg);
}

/* Dark Mode */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-elevated);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .dropdown-item.text-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}
/* ========== components/tabs.css ========== */
/**
 * DESIGN SYSTEM - TABS
 * =============================================================================
 * Componente de navegación por pestañas
 * - Variantes: Line (default), Pills, Segmented
 */

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-6);
}

.nav-item {
    margin-bottom: -1px;
}

.nav-link {
    display: block;
    padding: var(--space-4) var(--space-1);
    border: none;
    border-bottom: 2px solid transparent;

    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--foreground-secondary);
    text-decoration: none;
    background: transparent;
    cursor: pointer;

    transition: all var(--duration-200);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--foreground-primary);
    border-bottom-color: var(--neutral-300);
}

.nav-link.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

[data-theme="dark"] .nav-link {
    color: var(--neutral-400);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:focus {
    color: var(--neutral-200);
    border-bottom-color: var(--neutral-700);
}

[data-theme="dark"] .nav-link.active {
    color: var(--primary-400);
    border-bottom-color: var(--primary-400);
}

/* =============================================================================
   VARIANT: PILLS
   ============================================================================= */
.nav-pills {
    border-bottom: none;
    gap: var(--space-2);
}

.nav-pills .nav-item {
    margin-bottom: 0;
}

.nav-pills .nav-link {
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    border: none;
}

.nav-pills .nav-link:hover {
    background-color: var(--neutral-100);
    color: var(--foreground-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--primary-100);
    color: var(--primary-700);
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--neutral-800);
    color: var(--neutral-200);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: rgba(59, 130, 246, 0.15);
    /* Primary with opacity */
    color: var(--primary-400);
}

/* =============================================================================
   TAB CONTENT
   ============================================================================= */
.tab-content {
    margin-top: var(--space-6);
}

.tab-pane {
    display: none;
    animation: fade-in var(--duration-200);
}

.tab-pane.active {
    display: block;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ========== components/navigation.css ========== */
/* ============================================================================
   NAVIGATION SYSTEM - Premium Sidebar & Navbar (Fixed Offset System)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. SIDEBAR COMPONENT
   ------------------------------------------------------------------------- */
.sidebar {
    background: var(--surface-base);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-shadow: var(--shadow-sidebar);
}

.sidebar-header {
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--foreground-primary);
    text-decoration: none;
    white-space: nowrap;
}

.logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary-sm);
    flex-shrink: 0;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    color: var(--foreground-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.nav-item i,
.nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--foreground-tertiary);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.nav-item:hover {
    background-color: var(--primary-50);
    color: var(--primary-700);
}

.nav-item.active {
    background-color: var(--primary-600);
    color: white;
    box-shadow: var(--shadow-primary-sm);
}

.nav-item.active i,
.nav-item.active svg {
    color: white;
}

/* Navigation Dividers & Labels */
.nav-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 0.5rem 0;
}

.nav-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-tertiary);
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
}


/* Collapsed State - Icon Only Mode */
.sidebar.collapsed .logo-text {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0 1rem;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0.75rem;
}

.sidebar.collapsed .nav-item span {
    display: none;
}

.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-divider {
    display: none;
}


/* ----------------------------------------------------------------------------
   2. NAVBAR COMPONENT
   ------------------------------------------------------------------------- */
.navbar {
    height: var(--navbar-height);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    width: calc(100vw - var(--sidebar-width));
    /* Dynamic width based on sidebar */
    z-index: 1010;
    transition: left var(--transition-smooth), width var(--transition-smooth);
}

.sidebar.collapsed~.app-main .navbar {
    left: var(--sidebar-collapsed-width);
    width: calc(100vw - var(--sidebar-collapsed-width));
}

[data-theme="dark"] .navbar {
    background-color: rgba(15, 15, 15, 0.8);
}

.navbar-start,
.navbar-end {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Sidebar Toggle */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--neutral-100);
    border-radius: var(--radius-lg);
    color: var(--foreground-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.sidebar-toggle:hover {
    background-color: var(--primary-100);
    color: var(--primary-700);
    transform: scale(1.05);
}

/* Navbar Search */
.navbar-search {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.navbar-search input {
    width: 100%;
    padding: 0.75rem 1.25rem 0.75rem 2.875rem;
    background-color: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-inner);
}

.navbar-search input:focus {
    background-color: white;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 4px var(--state-focus);
}

.navbar-search input:focus~svg,
.navbar-search input:focus~i {
    color: var(--primary-500);
}

.navbar-search i,
.navbar-search svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--foreground-tertiary);
    transition: all var(--transition-base);
    pointer-events: none;
    width: 1.125rem;
    /* 18px */
    height: 1.125rem;
}

.navbar-search .shortcut-key {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    /* Small radius */
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    color: var(--foreground-tertiary);
    font-family: monospace;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    opacity: 1;
    transition: opacity 0.2s;
}

/* Hide shortcut when input is focused */
.navbar-search input:focus~.shortcut-key {
    opacity: 0;
}

/* Navbar Actions */
.navbar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    color: var(--foreground-secondary);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-base);
}

.navbar-action i,
.navbar-action svg {
    width: 1.25rem;
    height: 1.25rem;
}

.navbar-action:hover {
    background-color: var(--neutral-100);
    color: var(--foreground-primary);
}

.notification-dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    /* red-500 */
    border: 2px solid white;
    border-radius: 50%;
}

/* User Menu & Avatar */
.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem;
    padding-right: 0.75rem;
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    background: var(--primary-600);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground-primary);
}

.user-role {
    font-size: 0.6875rem;
    color: var(--foreground-tertiary);
}

/* ----------------------------------------------------------------------------
   3. RESPONSIVE (TABLET & MOBILE)
   ------------------------------------------------------------------------- */

/* Mobile Phones (Off-Canvas Sidebar) - Below 768px */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 2100;
        transition: transform var(--transition-smooth);
        transform: translateX(0);
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(280px);
        box-shadow: var(--shadow-xl);
    }

    .navbar {
        left: 0 !important;
        width: 100vw !important;
        /* Full width on mobile since sidebar is off-canvas */
        padding: 0 1rem;
    }

    .navbar-search {
        display: none;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        z-index: 2050;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-smooth);
        pointer-events: none;
    }

    .sidebar-backdrop.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Compact User Menu on Mobile */
    .user-info {
        display: none;
    }

    .user-menu-btn {
        padding: 0;
        border: none;
        background: transparent;
    }

    .user-menu-btn .user-avatar {
        width: 2.25rem;
        height: 2.25rem;
    }

    .user-menu-btn i.lucide-chevron-down {
        display: none;
    }

    .navbar-end {
        gap: 0.75rem;
    }
}

/* Tablet / Laptop (Compact Desktop Mode) - 769px to 1200px */
@media (min-width: 769px) and (max-width: 1200px) {
    .navbar-search {
        width: 200px;
        /* Reduced from 320px */
    }

    .user-info {
        display: none;
        /* Hide text, show only avatar on tablets */
    }

    .user-menu-btn {
        padding: 0;
        border: none;
        background: transparent;
    }

    .user-menu-btn .user-avatar {
        width: 2.25rem;
        height: 2.25rem;
    }

    .user-menu-btn i.lucide-chevron-down {
        display: none;
    }

    .navbar-end {
        gap: 1rem;
    }
}
/* ========== components/footer.css ========== */
/* ============================================================================
   FOOTER COMPONENT - Premium Administration Footer
   ========================================================================== */

.footer {
    padding: 1.5rem 2rem;
    margin-top: auto;
    width: 100%;
    /* Fills the .app-main container which already has dynamic margin-left */
    background-color: var(--surface-base);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--foreground-tertiary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

[data-theme="dark"] .footer {
    background-color: var(--surface-base);
    border-top: 1px solid var(--border-subtle);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer-link {
    color: var(--foreground-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-base);
    position: relative;
}

.footer-link:hover {
    color: var(--primary-600);
}

/* Subtle underline animation on hover */
.footer-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--primary-600);
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.footer-heart {
    color: var(--danger-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer:hover .footer-heart {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        padding: 1.5rem;
    }

    .footer-links {
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
}
/* ========== components/alerts.css ========== */
/* ============================================================================
   ALERTS COMPONENT
   ========================================================================== */

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    /* Rounded for premium look */
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    /* Critical for vertical centering */
    gap: 0.75rem;
    /* Consistent gap between icon and text */
}

/* Ensure icons are perfectly centered */
.alert i,
.alert svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2px;
}

/* Content wrapper if needed, or direct text alignment */
.alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Heading within alert */
.alert-heading {
    font-weight: 600;
    margin-bottom: 0.25rem;
    margin-top: 0;
    font-size: 1rem;
}

/* Dismiss button */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: currentColor;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    margin-left: auto;
    /* Push to right */
    cursor: pointer;
}

.btn-close:hover {
    opacity: 0.75;
}

/* VARIANTS - Modern/Subtle Style */

/* Primary / Info */
.alert-primary,
.alert-info {
    color: #0369a1;
    /* Sky 700 */
    background-color: #e0f2fe;
    /* Sky 100 */
    border-color: #bae6fd;
    /* Sky 200 */
}

/* Success */
.alert-success {
    color: #15803d;
    /* Emerald 700 */
    background-color: #dcfce7;
    /* Emerald 100 */
    border-color: #bbf7d0;
    /* Emerald 200 */
}

/* Warning */
.alert-warning {
    color: #b45309;
    /* Amber 700 */
    background-color: #fef3c7;
    /* Amber 100 */
    border-color: #fde68a;
    /* Amber 200 */
}

/* Danger */
.alert-danger {
    color: #b91c1c;
    /* Red 700 */
    background-color: #fee2e2;
    /* Red 100 */
    border-color: #fecaca;
    /* Red 200 */
}

/* Neutral */
.alert-neutral {
    color: var(--foreground-primary);
    background-color: var(--surface-muted);
    border-color: var(--border-subtle);
}

/* Dark Mode Adjustments */
[data-theme="dark"] .alert-primary,
[data-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, 0.15);
    color: #7dd3fc;
    border-color: rgba(14, 165, 233, 0.2);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.2);
}
/* ========== components/badges.css ========== */
/* ============================================================================
   BADGES & LABELS - Premium Status Indicators
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-md);
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

/* Rounded Pill Variant */
.badge-pill {
    border-radius: var(--radius-full);
    padding: 0.25rem 0.875rem;
}

/* Outline Variant */
.badge-outline {
    background-color: transparent !important;
    border: 1px solid currentColor !important;
}

/* Glass Variant (Subtle transparency) */
.badge-glass {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Colors - Premium Palettes */
.badge-primary {
    background-color: var(--primary-50);
    color: var(--primary-700);
    border-color: var(--primary-100);
}

.badge-success {
    background-color: #f0fdf4;
    color: #166534;
    border-color: #dcfce7;
}

.badge-warning {
    background-color: #fffbeb;
    color: #92400e;
    border-color: #fef3c7;
}

.badge-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fee2e2;
}

.badge-info {
    background-color: #f0f9ff;
    color: #075985;
    border-color: #e0f2fe;
}

.badge-neutral {
    background-color: var(--neutral-100);
    color: var(--neutral-700);
    border-color: var(--neutral-200);
}

/* High Contrast / Solid Variant */
.badge-solid {
    border: none;
    color: white !important;
}

.badge-solid.badge-primary {
    background-color: var(--primary-600);
}

.badge-solid.badge-success {
    background-color: #16a34a;
}

.badge-solid.badge-danger {
    background-color: #dc2626;
}

/* Status Glow */
.badge-glow {
    box-shadow: 0 0 8px currentColor;
}

/* Dot Indicator Badge */
.badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: currentColor;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .badge-primary {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .badge-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .badge-warning {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fde047;
    border-color: rgba(234, 179, 8, 0.2);
}

[data-theme="dark"] .badge-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .badge-info {
    background-color: rgba(14, 165, 233, 0.15);
    color: #7dd3fc;
    border-color: rgba(14, 165, 233, 0.2);
}

[data-theme="dark"] .badge-neutral {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--neutral-400);
    border-color: rgba(255, 255, 255, 0.1);
}

/* SEMANTIC COMPONENTS */

/* Role Badges: more structured, usually outline */
.badge-role {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-width: 1.5px;
    letter-spacing: 0.05em;
}

/* Status Badges: usually pill with dot */
.badge-status {
    border-radius: var(--radius-full);
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    font-weight: 600;
    text-transform: none;
    /* Lowercase or Capitalized for status feels more natural */
    letter-spacing: normal;
}

.badge-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: currentColor;
    box-shadow: 0 0 4px currentColor;
}

/* SEMANTIC COMPONENTS - High Level Shortcuts */

/* Status Shortcuts (Auto-applies badge-status + color) */
.status-active {
    @extend .badge;
    @extend .badge-status;
    background-color: #f0fdf4;
    color: #166534;
    border-color: #dcfce7;
}

.status-pending {
    @extend .badge;
    @extend .badge-status;
    background-color: #fffbeb;
    color: #92400e;
    border-color: #fef3c7;
}

.status-inactive {
    @extend .badge;
    @extend .badge-status;
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fee2e2;
}

.status-neutral {
    @extend .badge;
    @extend .badge-status;
    background-color: var(--neutral-100);
    color: var(--neutral-700);
    border-color: var(--neutral-200);
}

/* Role Shortcuts (Auto-applies badge-role + color/style) */
.role-admin {
    @extend .badge;
    @extend .badge-role;
    @extend .badge-primary;
    @extend .badge-outline;
}

.role-editor {
    @extend .badge;
    @extend .badge-role;
    @extend .badge-neutral;
    @extend .badge-outline;
}

.role-viewer {
    @extend .badge;
    @extend .badge-role;
    @extend .badge-neutral;
    @extend .badge-outline;
    opacity: 0.8;
}

/* Fallback for browsers / environments without @extend support (Standard CSS version) */
.status-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full);
    text-transform: none;
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #dcfce7;
}

.status-active::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: currentColor;
    box-shadow: 0 0 4px currentColor;
}

.status-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full);
    text-transform: none;
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fef3c7;
}

.status-pending::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: currentColor;
    box-shadow: 0 0 4px currentColor;
}

.status-inactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full);
    text-transform: none;
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fee2e2;
}

.status-inactive::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: currentColor;
    box-shadow: 0 0 4px currentColor;
}

.role-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    border: 1.5px solid var(--primary-100);
    color: var(--primary-700);
    background: var(--primary-50);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.role-editor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    border: 1.5px solid var(--neutral-200);
    color: var(--neutral-700);
    background: transparent;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.role-viewer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    border: 1.5px solid var(--neutral-200);
    color: var(--neutral-500);
    background: transparent;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Dark Mode semantic shortcuts */
[data-theme="dark"] .status-active {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .status-pending {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fde047;
    border-color: rgba(234, 179, 8, 0.2);
}

[data-theme="dark"] .status-inactive {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .role-admin {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .role-editor,
[data-theme="dark"] .role-viewer {
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--neutral-400);
}
/* ========== components/avatars.css ========== */
/* ============================================================================
   AVATARS & GROUPS - Premium Design
   ==========================================================================*/
/* Base Avatar */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;

    /* SOFT SQUIRCLE SHAPE */
    border-radius: 12px;
    /* Smooth rounded square */

    /* PREMIUM COLOR PALETTE (Lavender/Blue Tint) */
    background-color: #eef2ff;
    /* Indigo-50 equivalent */
    color: #4f46e5;
    /* Indigo-600 equivalent */

    font-size: 0.875rem;
    font-weight: 600;
    /* Bold initials */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle inner light border */
    overflow: hidden;
    user-select: none;
    text-transform: uppercase;
}


.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Sizes */
.avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.125rem;
}

.avatar-xl {
    width: 5rem;
    height: 5rem;
    font-size: 1.5rem;
}

/* Status indicator */
.avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--surface-base);
    background-color: var(--neutral-400);
}

.avatar-status.online {
    background-color: #10b981;
}

.avatar-status.offline {
    background-color: var(--neutral-400);
}

.avatar-status.busy {
    background-color: #ef4444;
}

.avatar-status.away {
    background-color: #f59e0b;
}

/* Avatar Group */
.avatar-group {
    display: inline-flex;
    align-items: center;
}

.avatar-group .avatar {
    margin-left: -0.75rem;
    border: 2px solid var(--surface-base);
    transition: transform 0.2s, z-index 0s;
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

.avatar-group .avatar:hover {
    transform: translateY(-2px);
    z-index: 10;
}

/* Avatar with badge */
.avatar-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background-color: var(--primary-600);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface-base);
}
/* ========== components/breadcrumbs.css ========== */
/* ============================================================================
   BREADCRUMBS - Premium Pill Design
   ========================================================================== */

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    /* Ajustado para ser más compacto */
    background-color: var(--surface-base);
    /* Era muted, mejor base para contraste */
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    /* Pill shape container */
    list-style: none;
    margin: 0;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item a {
    color: var(--foreground-secondary);
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    transition: all 0.2s;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    background-color: var(--surface-muted);
    color: var(--primary-600);
}

/* Active Item Style */
.breadcrumb-item.active {
    display: flex;
    align-items: center;
}

.breadcrumb-item.active span,
.breadcrumb-item.active strong {
    background-color: var(--primary-600);
    color: #ffffff !important;
    /* Force white text to fix contrast issue */
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Separator */
.breadcrumb-item+.breadcrumb-item::before {
    content: '';
    display: inline-block;
    width: 1rem;
    /* Width for chevron */
    height: 1rem;
    margin: 0 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.6;
}

/* Dark Mode */
[data-theme="dark"] .breadcrumb {
    background-color: var(--surface-base);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--primary-400);
    background-color: var(--surface-muted);
}
/* ========== components/pagination.css ========== */
/* ============================================================================
   PAGINATION - Premium Squircle Design
   ========================================================================== */

.pagination {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    line-height: 0 !important;
}

.page-item {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    /* Remove padding for perfect centering */
    border-radius: 0.75rem;
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    color: var(--foreground-secondary);
    font-size: 0.875rem !important;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    line-height: 1 !important;
}

.page-link:hover {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
    border-color: var(--border-default);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-item.active .page-link {
    background-color: var(--primary-600);
    color: white !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
    /* Premium glow */
    border-color: var(--primary-600);
    font-weight: 700;
}

.page-item.disabled:first-child,
.page-item.disabled:last-child {
    display: none !important;
    /* Hide Prev/Next arrows when at ends */
}

.page-item.disabled:not(:first-child):not(:last-child) {
    opacity: 0.6;
    pointer-events: none;
}

/* Ensure icons are perfectly centered */
.page-link i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Responsive */
@media (max-width: 768px) {
    .page-link {
        min-width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }
}
/* ========== components/accordion.css ========== */
/* ============================================================================
   ACCORDION COMPONENT - Premium Design
   ========================================================================== */

.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordion-item {
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.accordion-item:hover {
    border-color: var(--border-default);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.accordion-button {
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--foreground-primary);
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
}

.accordion-button:hover {
    background-color: var(--surface-muted);
}

.accordion-button::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.accordion-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.accordion-button[aria-expanded="true"] {
    background-color: var(--surface-muted);
}

.accordion-body {
    padding: 0 1.25rem 1.25rem;
    color: var(--foreground-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    background-color: rgba(0, 0, 0, 0.035);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.accordion-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-collapse.show {
    max-height: 500px;
}

/* Dark mode */
[data-theme="dark"] .accordion-item {
    background-color: var(--surface-base);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .accordion-body {
    background-color: rgba(255, 255, 255, 0.03);
}
/* ========== components/toasts.css ========== */
/* ============================================================================
   TOASTS COMPONENT - Premium Notifications
   ========================================================================== */

.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
    /* Allows clicking through the container area */
}

.toast {
    position: relative;
    padding: 1rem 1.25rem;
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 300px;
    max-width: 400px;
    animation: toast-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: auto;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--neutral-400);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--foreground-primary);
}

.toast-message {
    font-size: 0.875rem;
    color: var(--foreground-secondary);
    line-height: 1.4;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--foreground-tertiary);
    cursor: pointer;
    padding: 0.25rem;
    margin-left: -0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
}

/* Variants */
.toast-success::before {
    background-color: var(--success-500);
}

.toast-error::before {
    background-color: var(--danger-500);
}

.toast-info::before {
    background-color: var(--primary-500);
}

.toast-warning::before {
    background-color: var(--warning-500);
}

/* Animation */
@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-slide-out {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast.hiding {
    animation: toast-slide-out 0.3s ease-in forwards;
}

/* Responsive */
@media (max-width: 768px) {
    .toast-container {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1rem;
        gap: 0.5rem;
    }

    .toast {
        width: 100%;
        min-width: 0;
        max-width: none;
        border-radius: var(--radius-md);
    }
}
/* ========== components/datepicker.css ========== */
/* ============================================================================
   DATEPICKER COMPONENT - Premium Calendar
   ========================================================================== */

/* Wrapper created by JS */
.datepicker-wrapper {
    position: relative;
    width: 100%;
}

.datepicker-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Icon style */
.datepicker-icon {
    position: absolute;
    left: 1rem;
    color: var(--foreground-tertiary);
    pointer-events: none;
    display: flex;
    align-items: center;
    z-index: 10;
    width: 1.25rem;
    height: 1.25rem;
}

/* Input adjustment */
.datepicker-input {
    padding-left: 2.75rem !important;
    /* Make space for icon */
    cursor: pointer;
    background-color: var(--surface-base);
    width: 100%;
}

/* Calendar Container */
.datepicker-calendar {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 320px;
    background-color: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    z-index: 1000;
    display: none;
    /* Hidden by default */
    animation: fadeInScale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Active State - Matches JS 'active' class */
.datepicker-calendar.active {
    display: block;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.calendar-title {
    font-weight: 600;
    color: var(--foreground-primary);
    font-size: 1rem;
}

.calendar-nav-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--foreground-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-nav-btn:hover {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
    border-color: var(--border-default);
}

.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.5rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--foreground-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.calendar-day:hover:not(.empty) {
    background-color: var(--surface-muted);
    color: var(--foreground-primary);
}

.calendar-day.empty {
    cursor: default;
}

.calendar-day.today {
    color: var(--primary-600);
    font-weight: 600;
    background-color: var(--primary-50);
}

.calendar-day.selected {
    background-color: var(--primary-600);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.calendar-day.selected:hover {
    background-color: var(--primary-700);
}

/* Animations */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dark mode */
[data-theme="dark"] .calendar-day.today {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--primary-400);
}

/* Responsive */
@media (max-width: 768px) {
    .datepicker-calendar {
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform-origin: bottom;
        animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }
}
/* ========== components/profile-card.css ========== */
/* ============================================================================
   PROFILE CARD - Premium Layout
   ========================================================================== */

.profile-card-banner {
    height: 120px;
    width: 100%;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-500) 100%);
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 32px 32px 0 0;
    /* Mathematical match with card */
}

.profile-card-avatar-wrap {
    margin-top: -60px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Edit button inside banner styling - High Contrast Premium */
.btn-banner-action {
    background: #ffffff !important;
    border: none !important;
    color: var(--primary-700) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    /* Matches harmony with card/avatar radius scale */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 0 1.25rem !important;
    height: 2.25rem !important;
}

.btn-banner-action:hover {
    background: #f8fafc !important;
    /* Slate-50 */
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.profile-actions-gap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1.5rem;
    /* Push down to align with avatar visual top */
}

.profile-actions-gap .btn {
    height: 2rem !important;
    /* Force same height */
    padding-top: 0;
    padding-bottom: 0;
}

.profile-actions-gap .btn-icon {
    width: 2rem !important;
}

.profile-avatar-big {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    border: 4px solid var(--surface-base);
    box-shadow: var(--shadow-lg);
    background-color: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-700);
    position: relative;
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--foreground-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.profile-metric-card {
    background-color: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s;
}

.profile-metric-card:hover {
    transform: translateY(-2px);
    background-color: var(--surface-base);
    border-color: var(--primary-200);
}

.profile-metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-600);
}

.profile-metric-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--foreground-tertiary);
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Custom adjustment for the modal dialog to fit the card perfectly */
.modal-dialog-profile {
    max-width: 440px;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.modal-dialog-profile .modal {
    padding: 0 !important;
    background: transparent !important;
}
/* ========== animations/micro-interactions.css ========== */
/**
 * DESIGN SYSTEM - MICRO INTERACTIONS
 * =============================================================================
 * Clases utilitarias para interacciones sutiles
 */

/* Hover Lift */
.hover-lift {
    transition: transform var(--duration-200) var(--ease-default), box-shadow var(--duration-200) var(--ease-default);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Hover Scale */
.hover-scale {
    transition: transform var(--duration-200) var(--ease-default);
}

.hover-scale:hover {
    transform: scale(1.02);
}

.hover-scale-sm {
    transition: transform var(--duration-200) var(--ease-default);
}

.hover-scale-sm:hover {
    transform: scale(1.01);
}

/* Active Press */
.active-press {
    transition: transform var(--duration-100);
}

.active-press:active {
    transform: scale(0.98);
}

/* Focus Ring (Custom) */
.focus-ring-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.focus-ring-success:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
}

.focus-ring-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
}
/* ========== animations/transitions.css ========== */
/**
 * DESIGN SYSTEM - TRANSITION UTILITIES
 * =============================================================================
 * Clases para transiciones de estado (Enter/Leave)
 */

/* Fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity var(--duration-200) var(--ease-default);
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Slide Up */
.slide-up-enter-active {
    animation: slideUpIn var(--duration-300) var(--ease-out);
}

.slide-up-leave-active {
    transition: all var(--duration-200) var(--ease-in);
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}

/* Collapse (Accordion style) */
.collapse-enter-active,
.collapse-leave-active {
    transition: height var(--duration-200) var(--ease-default), opacity var(--duration-200) var(--ease-default);
    overflow: hidden;
}

.collapse-enter-from,
.collapse-leave-to {
    height: 0;
    opacity: 0;
}
/* ========== animations/keyframes.css ========== */
/**
 * DESIGN SYSTEM - ANIMATION KEYFRAMES
 * =============================================================================
 * Definiciones de keyframes reutilizables
 */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade Out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Slide Up (Enter) */
@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Slide Down (Enter) */
@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Scale Up (Pop) */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spin (Loading) */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Pulse (Attention) */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Shimmer (Loading Skeleton) */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Shake (Error) */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}
/* ========== themes/light.css ========== */
/**
 * DESIGN SYSTEM - LIGHT THEME
 * =============================================================================
 * Tema claro por defecto.
 * Este archivo puede usarse para forzar el tema claro usando la clase .theme-light
 */

.theme-light {
    --background-base: var(--neutral-50);
    --background-subtle: var(--neutral-100);

    --foreground-primary: var(--neutral-900);
    --foreground-secondary: var(--neutral-600);

    /* Re-assert default token values here if needed for override */
}
/* ========== themes/dark.css ========== */
/**
 * DESIGN SYSTEM - DARK THEME
 * =============================================================================
 * Tema oscuro manual.
 * Permite activar el modo oscuro mediante la clase .theme-dark o atributo [data-theme="dark"]
 */

[data-theme="dark"],
.theme-dark {
    /* Primary - More visible on dark */
    --primary-50: #1e293b;
    --primary-100: #1e3a8a;
    --primary-500: #60a5fa;
    --primary-600: #3b82f6;

    /* Neutrals - Inverted */
    --neutral-50: #0c0a09;
    --neutral-100: #1c1917;
    --neutral-200: #292524;
    --neutral-800: #e7e5e4;
    --neutral-900: #f5f5f4;

    /* Backgrounds */
    --background-base: #0f0f0f;
    --background-subtle: #141414;

    --surface-base: #0f0f0f;
    --surface-elevated: #1a1a1a;

    /* Text */
    --foreground-primary: #e5e5e5;
    --foreground-secondary: #a8a29e;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.08);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

    filter: saturate(0.85);
}