/* ═══════════════════════════════════════════════════════════════════
   NOVA GESTION - DESIGN SYSTEM TOKENS v2.0
   Premium SaaS Visual Architecture
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ═══ COLORS - BASE (Default: Corporate Theme) ═══ */
    --bg-app: #F1F3F6;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-hover: #F1F5F9;

    --border-subtle: #D6DAE1;
    --border-light: #CBD5E1;
    --border-muted: #E2E8F0;
    --border-color: #D6DAE1; /* Legacy Alias */
    --border: #D6DAE1;
    --border-focus: #0F2A44;

    --bg-surface-strong: #F8FAFC;
    --bg-surface-muted: #F1F5F9;
    --bg-input: #FFFFFF;
    --bg-table: #FFFFFF;
    --bg-control: #FFFFFF;
    --surface: var(--bg-card);
    --surface-strong: var(--bg-surface-strong);
    --surface-muted: var(--bg-surface-muted);
    --surface-hover: var(--bg-hover);

    --text-primary: #0F2A44;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-inverse: #FFFFFF;
    --text-link: #2563eb;
    --focus-ring: rgba(59, 130, 246, 0.25);
    --shadow-inner: inset 0 2px 6px rgba(15, 42, 68, 0.08);

    --accent: #0F2A44;
    --accent-hover: #0a1929;
    --accent-light: #004d99;

    --success: #10B981;
    --success-light: #D1FAE5;
    --success-dark: #059669;

    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --danger-dark: #DC2626;

    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --warning-dark: #D97706;

    --info: #0EA5E9;
    --info-light: #E0F2FE;

    --primary: #1e40af;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;

    --header-bg: #0284c7;
    --header-text: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --sidebar-text: #0F2A44;

    /* ═══ SPACING ═══ */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* ═══ BORDER RADIUS ═══ */
    --radius-sm: 0.75rem;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* ═══ SHADOWS ═══ */
    --shadow-soft: 0 4px 12px rgba(15, 42, 68, 0.1);
    --shadow-md: 0 6px 16px rgba(15, 42, 68, 0.12);
    --shadow-lg: 0 12px 30px rgba(15, 42, 68, 0.15);
    --shadow-glow: 0 0 20px rgba(15, 42, 68, 0.2);

    /* ═══ TYPOGRAPHY ═══ */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ═══ LAYOUT ═══ */
    --sidebar-width: 140px;
    --header-height: 82px;
    --content-max-width: 1400px;

    /* ═══ TRANSITIONS ═══ */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* ═══ MODAL SPECIFIC (v3.1) ═══ */
    --modal-backdrop: rgba(15, 23, 42, 0.65);
    --modal-accent-gradient: linear-gradient(90deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME - Premium Enterprise Design System v3.0
   References: Linear, Notion, Stripe Dashboard, Vercel, Atlassian
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    /* ═══ BACKGROUNDS - LAYERED SURFACE HIERARCHY ═══ */
    /* App Background: Neutral, clean base */
    --bg-app: #f9fafb;
    
    /* Surface Base: Primary working surface */
    --bg-surface: #ffffff;
    
    /* Elevated: Subtle raised surfaces (cards, modals, dropdowns) */
    --bg-elevated: #f3f4f6;
    
    /* Card: Content containers */
    --bg-card: #ffffff;
    
    /* Hover: Interactive hover state */
    --bg-hover: #f3f4f6;
    
    /* Surface variations for hierarchy */
    --bg-surface-strong: #f9fafb;
    --bg-surface-muted: #f3f4f6;
    --bg-input: #ffffff;
    --bg-table: #fafbfc;
    --bg-control: #ffffff;

    /* Alias surfaces */
    --surface: #ffffff;
    --surface-strong: #f9fafb;
    --surface-muted: #f3f4f6;
    --surface-hover: #f3f4f6;

    /* ═══ BORDERS - SUBTLE & REFINED ═══ */
    --border-subtle: #e5e7eb;
    --border-light: #d1d5db;
    --border-muted: #f3f4f6;
    --border-color: #e5e7eb;
    --border: #e5e7eb;
    --border-focus: #3b82f6;

    /* ═══ TYPOGRAPHY COLORS ═══ */
    /* Primary: Headlines, high emphasis */
    --text-primary: #111827;
    
    /* Secondary: Body text, descriptions */
    --text-secondary: #4b5563;
    
    /* Muted: Subtle text, placeholders */
    --text-muted: #6b7280;
    
    /* Links: Interactive text */
    --text-link: #2563eb;
    
    /* Inverse: Text on colored backgrounds */
    --text-inverse: #ffffff;

    /* ═══ ACCENT & PRIMARY COLORS ═══ */
    /* Modern blue: Professional, not flashy */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: #3b82f6;

    /* Primary buttons & CTAs */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;

    /* ═══ SEMANTIC COLORS ═══ */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-dark: #059669;

    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #dc2626;

    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #d97706;

    --info: #0ea5e9;
    --info-light: #e0f2fe;

    /* ═══ HEADER & SIDEBAR ═══ */
    /* Header: Clean, minimal topbar */
    --header-bg: #ffffff;
    --header-text: #111827;
    
    /* Sidebar: Match header for cohesion */
    --sidebar-bg: #ffffff;
    --sidebar-text: #111827;

    /* ═══ SHADOWS - MODERN & SUBTLE ═══ */
    /* Soft: Minimal elevation (inputs, small cards) */
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    
    /* Medium: Standard cards & modals */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    
    /* Large: Modals & overlays */
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
    
    /* Glow: Hover states & focus */
    --shadow-glow: 0 0 15px rgba(37, 99, 235, 0.12);

    /* Inner shadow for embossed elements */
    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.06);

    /* ═══ FOCUS & INTERACTIVE ═══ */
    --focus-ring: rgba(37, 99, 235, 0.15);

    /* ═══ MODAL ═══ */
    --modal-backdrop: rgba(17, 24, 39, 0.40);
    --modal-accent-gradient: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
}

/* Corporate Theme (Specific Override) */
html[data-theme="corporate"],
html.corporate-mode {
    --bg-app: #F3F4F6;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F9FAFB;
    --bg-card: #FFFFFF;
    --card-bg: #FFFFFF;
    --bg-hover: #EDF0F4;
    --bg-input: #FFFFFF;
    --bg-table: #FFFFFF;

    /* Muted Slate/Grey palette instead of intense blue */
    --header-bg: #334155;
    --header-text: #F8FAFC;
    --sidebar-bg: #FFFFFF;
    --sidebar-text: #1E293B;

    --accent: #475569;
    --accent-hover: #334155;
    --primary: #475569;
    --primary-light: #64748B;
    --primary-dark: #1E293B;

    --border: #CBD5E1;
    --border-subtle: #CBD5E1;
    --border-light: #94A3B8;
    --border-color: #CBD5E1;

    --text-primary: #1E293B;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-inverse: #FFFFFF;

    /* Slightly toned down shadow for a flatter, more sober look */
    --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 6px 16px rgba(15, 42, 68, 0.08);
    --shadow-lg: 0 12px 30px rgba(15, 42, 68, 0.1);
}

/* Dark Theme Override */
html[data-theme="dark"],
html.dark-mode {
    --bg-app: #0B0F19;
    --bg-surface: #111827;
    --bg-elevated: #1F2937;
    --bg-card: #111827;
    --card-bg: #111827; /* Alias for convenience */
    --bg-hover: #1F2937;

    --border: #1F2937;
    --border-subtle: #1F2937;
    --border-light: #374151;
    --border-color: #1F2937;

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-inverse: #0B0F19;

    --accent: #60A5FA;
    --accent-hover: #3B82F6;
    --primary: #60A5FA;

    --header-bg: #111827;
    --header-text: #F8FAFC;
    --sidebar-bg: #111827;
    --sidebar-text: #F8FAFC;

    --bg-surface-strong: #1F2937;
    --bg-surface-muted: #111827;
    --bg-input: #1F2937;
    --bg-table: #111827;
    --bg-control: #111827;
    --surface: var(--bg-card);
    --surface-strong: var(--bg-surface-strong);
    --surface-muted: var(--bg-surface-muted);
    --surface-hover: #1F2937;
    --border-muted: #4B5563;
    --text-link: #93C5FD;

    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    --modal-backdrop: rgba(0, 0, 0, 0.82);
    --focus-ring: rgba(96, 165, 250, 0.25);
    --shadow-inner: inset 0 2px 8px rgba(255, 255, 255, 0.05);
}

/* Logo visibility in dark mode */
html[data-theme="dark"] .sidebar-header img,
html[data-theme="dark"] .sidebar-logo img,
html[data-theme="dark"] .header-logo,
html[data-theme="dark"] .brand-header-zone img,
html.dark-mode .sidebar-header img,
html.dark-mode .sidebar-logo img,
html.dark-mode .header-logo,
html.dark-mode .brand-header-zone img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.95;
    transition: filter 0.3s ease;
}