/* ============================================================
   WINLEDGER THEME SYSTEM
   Dual theme: Dark (default) + Light (Apple-inspired)
   Fuente: Inter — optimizada para UI, similar a SF Pro
   ============================================================ */

@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap';

/* ============================================================
   DARK THEME (default — comportamiento actual sin cambios)
   ============================================================ */
:root {
    /* ==================== COLOR SYSTEM ==================== */

    /* App Surface */
    --kendo-color-app-surface: #151828;
    --kendo-color-surface: #2F344C;
    --kendo-color-surface-alt: #232739;
    --kendo-color-on-app-surface: #EFF0F5;
    --kendo-color-subtle: #8E95B9;
    --kendo-color-border: rgba(239, 240, 245, .16);
    --kendo-color-border-alt: rgba(239, 240, 245, .24);

    /* Base */
    --kendo-color-base-subtle: #414762;
    --kendo-color-base-subtle-hover: #3E4565;
    --kendo-color-base-subtle-active: #464E72;
    --kendo-color-base: #4A506E;
    --kendo-color-base-hover: #4A506E;
    --kendo-color-base-active: #52587A;
    --kendo-color-base-emphasis: #6C749D;
    --kendo-color-on-base: #EFF0F5;
    --kendo-color-base-on-surface: #CDD0E0;
    --kendo-color-base-on-subtle: #EFF0F5;

    /* Primary */
    --kendo-color-primary-subtle: #453817;
    --kendo-color-primary-subtle-hover: #5C4C1F;
    --kendo-color-primary-subtle-active: #735E26;
    --kendo-color-primary: #CCB066;
    --kendo-color-primary-hover: #D4BC7D;
    --kendo-color-primary-active: #DECC9C;
    --kendo-color-primary-emphasis: #A18436;
    --kendo-color-on-primary: #1C1D22;
    --kendo-color-primary-on-surface: #CCB066;
    --kendo-color-primary-on-subtle: #EDE3C9;

    /* Secondary */
    --kendo-color-secondary-subtle: #5E668D;
    --kendo-color-secondary-subtle-hover: #6C749D;
    --kendo-color-secondary-subtle-active: #7C84AC;
    --kendo-color-secondary: #7C84AC;
    --kendo-color-secondary-hover: #8F96B8;
    --kendo-color-secondary-active: #A7ACC8;
    --kendo-color-secondary-emphasis: #A7ACC8;
    --kendo-color-on-secondary: #151828;
    --kendo-color-secondary-on-surface: #A7ACC8;
    --kendo-color-secondary-on-subtle: #EFF0F5;

    /* Tertiary */
    --kendo-color-tertiary-subtle: #1F2F5C;
    --kendo-color-tertiary-subtle-hover: #263B73;
    --kendo-color-tertiary-subtle-active: #2E468A;
    --kendo-color-tertiary: #6681CC;
    --kendo-color-tertiary-hover: #7D94D4;
    --kendo-color-tertiary-active: #94A7DC;
    --kendo-color-tertiary-emphasis: #4665B9;
    --kendo-color-on-tertiary: #1C1D22;
    --kendo-color-tertiary-on-surface: #7D94D4;
    --kendo-color-tertiary-on-subtle: #D1D9F0;

    /* Error */
    --kendo-color-error-subtle: #5E1C1C;
    --kendo-color-error-subtle-hover: #6E2121;
    --kendo-color-error-subtle-active: #852828;
    --kendo-color-error: #DD7E7E;
    --kendo-color-error-hover: #E18E8E;
    --kendo-color-error-active: #E59E9E;
    --kendo-color-error-emphasis: #A53131;
    --kendo-color-on-error: #1C1D22;
    --kendo-color-error-on-surface: #E18E8E;
    --kendo-color-error-on-subtle: #F4D7D7;

    /* Success */
    --kendo-color-success-subtle: #1C5F38;
    --kendo-color-success-subtle-hover: #206E41;
    --kendo-color-success-subtle-active: #257E4A;
    --kendo-color-success: #6AD395;
    --kendo-color-success-hover: #89DCAB;
    --kendo-color-success-active: #A9E5C2;
    --kendo-color-success-emphasis: #2F9D5D;
    --kendo-color-on-success: #1C1D22;
    --kendo-color-success-on-surface: #89DCAB;
    --kendo-color-success-on-subtle: #E0F6E9;

    /* Warning */
    --kendo-color-warning-subtle: #474300;
    --kendo-color-warning-subtle-hover: #5C5600;
    --kendo-color-warning-subtle-active: #706900;
    --kendo-color-warning: #D1C975;
    --kendo-color-warning-hover: #D9D28C;
    --kendo-color-warning-active: #DED89C;
    --kendo-color-warning-emphasis: #9E9410;
    --kendo-color-on-warning: #1C1D22;
    --kendo-color-warning-on-surface: #D9D28C;
    --kendo-color-warning-on-subtle: #F2F0D9;

    /* Info */
    --kendo-color-info-subtle: #243A56;
    --kendo-color-info-subtle-hover: #2D486C;
    --kendo-color-info-subtle-active: #365681;
    --kendo-color-info: #5A82BA;
    --kendo-color-info-hover: #658CC3;
    --kendo-color-info-active: #6F96CD;
    --kendo-color-info-emphasis: #456DA5;
    --kendo-color-on-info: #1C1D22;
    --kendo-color-info-on-surface: #658CC3;
    --kendo-color-info-on-subtle: #D1DEEF;

    /* Light */
    --kendo-color-light-subtle: #A7ACC8;
    --kendo-color-light-subtle-hover: #BABED4;
    --kendo-color-light-subtle-active: #CDD0E0;
    --kendo-color-light: #BABED4;
    --kendo-color-light-hover: #CDD0E0;
    --kendo-color-light-active: #E0E1EB;
    --kendo-color-light-emphasis: #A7ACC8;
    --kendo-color-on-light: #2F344C;
    --kendo-color-light-on-surface: #CDD0E0;
    --kendo-color-light-on-subtle: #232739;

    /* Dark */
    --kendo-color-dark-subtle: #232739;
    --kendo-color-dark-subtle-hover: #2F344C;
    --kendo-color-dark-subtle-active: #414762;
    --kendo-color-dark: #2F344C;
    --kendo-color-dark-hover: #414762;
    --kendo-color-dark-active: #4A506E;
    --kendo-color-dark-emphasis: #5E668D;
    --kendo-color-on-dark: #E0E1EB;
    --kendo-color-dark-on-surface: #414762;
    --kendo-color-dark-on-subtle: #EFF0F5;

    /* ==================== CHART SERIES ==================== */

    /* Series A */
    --kendo-color-series-a-subtler: #68273A;
    --kendo-color-series-a: #B54A6A;
    --kendo-color-series-a-bold: #C4788F;
    --kendo-color-series-a-subtle: #953753;
    --kendo-color-series-a-bolder: #D095A6;
    /* Series B */
    --kendo-color-series-b-subtler: #42676B;
    --kendo-color-series-b: #6F9FA4;
    --kendo-color-series-b-bold: #88B0B4;
    --kendo-color-series-b-subtle: #5A8B90;
    --kendo-color-series-b-bolder: #A4C8CB;
    /* Series C */
    --kendo-color-series-c-subtler: #61451A;
    --kendo-color-series-c: #A9782D;
    --kendo-color-series-c-bold: #C18B49;
    --kendo-color-series-c-subtle: #896124;
    --kendo-color-series-c-bolder: #CEA36F;
    /* Series D */
    --kendo-color-series-d-subtler: #3B3F68;
    --kendo-color-series-d: #6269A7;
    --kendo-color-series-d-bold: #767DBC;
    --kendo-color-series-d-subtle: #515790;
    --kendo-color-series-d-bolder: #9197C9;
    /* Series E */
    --kendo-color-series-e-subtler: #51511F;
    --kendo-color-series-e: #9C9C3B;
    --kendo-color-series-e-bold: #BFBF55;
    --kendo-color-series-e-subtle: #7E7E2F;
    --kendo-color-series-e-bolder: #D2D288;
    /* Series F */
    --kendo-color-series-f-subtler: #2E486B;
    --kendo-color-series-f: #5479AB;
    --kendo-color-series-f-bold: #7D99BF;
    --kendo-color-series-f-subtle: #3D608F;
    --kendo-color-series-f-bolder: #A0B4D0;

    /* ==================== TYPOGRAPHY ==================== */

    --kendo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kendo-font-size: 15px;
    --kendo-font-size-xs: 12px;
    --kendo-font-size-sm: 13px;
    --kendo-font-size-md: var(--kendo-font-size);
    --kendo-font-size-lg: 17px;
    --kendo-font-size-xl: 20px;
    --kendo-line-height: 1.5;
    --kendo-line-height-xs: 1.2;
    --kendo-line-height-sm: 1.35;
    --kendo-line-height-md: var(--kendo-line-height);
    --kendo-line-height-lg: 1.6;
    --kendo-h1-font-size: 2.5rem;
    --kendo-h2-font-size: 2rem;
    --kendo-h3-font-size: 1.75rem;
    --kendo-h4-font-size: 1.375rem;
    --kendo-h5-font-size: 1.125rem;
    --kendo-h6-font-size: 1rem;
    --kendo-h1-line-height: 1.2;
    --kendo-h2-line-height: 1.25;
    --kendo-h3-line-height: 1.3;
    --kendo-h4-line-height: 1.35;
    --kendo-h5-line-height: 1.4;
    --kendo-h6-line-height: 1.5;
    --kendo-h1-font-weight: 700;
    --kendo-h2-font-weight: 700;
    --kendo-h3-font-weight: 600;
    --kendo-h4-font-weight: 600;
    --kendo-h5-font-weight: 600;
    --kendo-h6-font-weight: 600;

    /* ==================== BORDER RADIUS ==================== */

    --kendo-border-radius-xs: 2px;
    --kendo-border-radius-sm: 4px;
    --kendo-border-radius-md: 6px;
    --kendo-border-radius-lg: 10px;
    --kendo-border-radius-xl: 14px;
    --kendo-border-radius-xxl: 24px;
    --kendo-border-radius-xxxl: 48px;
    --kendo-border-radius-full: 9999px;

    /* ==================== WINLEDGER CUSTOM ==================== */

    --card-gradient: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent) 0%, color-mix(in srgb, var(--kendo-color-surface-alt) 10%, transparent) 100%), var(--kendo-color-surface-alt);
    --wl-grid-font-size: 12px;
    --wl-kpi-font-size: 2.5rem;
    --wl-kpi-font-size-sm: 1.8rem;
    --wl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --wl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --wl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --wl-bg-glass: rgba(255, 255, 255, 0.05);
    --wl-alt-row-bg: rgba(255, 255, 255, 0.02);
}

/* ============================================================
   LIGHT THEME (Apple-inspired)
   Activado por data-theme="light" en <html>
   ============================================================ */
html[data-theme="light"] {
    /* App Surface — LegalManager palette */
    --kendo-color-app-surface: #F7FAFC;
    --kendo-color-surface: #FFFFFF;
    --kendo-color-surface-alt: #FFFFFF;
    --kendo-color-on-app-surface: #1A202C;
    --kendo-color-subtle: #718096;
    --kendo-color-border: #E2E8F0;
    --kendo-color-border-alt: #CBD5E0;

    /* Base — tonos slate inspirados en LegalManager */
    --kendo-color-base-subtle: #EDF2F7;
    --kendo-color-base-subtle-hover: #E2E8F0;
    --kendo-color-base-subtle-active: #CBD5E0;
    --kendo-color-base: #E2E8F0;
    --kendo-color-base-hover: #CBD5E0;
    --kendo-color-base-active: #A0AEC0;
    --kendo-color-base-emphasis: #A0AEC0;
    --kendo-color-on-base: #1A202C;
    --kendo-color-base-on-surface: #4A5568;
    --kendo-color-base-on-subtle: #1A202C;

    /* Primary — navy blue (LegalManager #1E3A5F) para botones y acciones */
    --kendo-color-primary-subtle: #EBF0F7;
    --kendo-color-primary-subtle-hover: #D6E1EF;
    --kendo-color-primary-subtle-active: #C1D2E7;
    --kendo-color-primary: #1E3A5F;
    --kendo-color-primary-hover: #16304F;
    --kendo-color-primary-active: #0F2640;
    --kendo-color-primary-emphasis: #2D4A6F;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-color-primary-on-surface: #1E3A5F;
    --kendo-color-primary-on-subtle: #0F2640;

    /* Secondary — slate tones */
    --kendo-color-secondary-subtle: #EDF2F7;
    --kendo-color-secondary-subtle-hover: #E2E8F0;
    --kendo-color-secondary-subtle-active: #CBD5E0;
    --kendo-color-secondary: #4A5568;
    --kendo-color-secondary-hover: #2D3748;
    --kendo-color-secondary-active: #1A202C;
    --kendo-color-secondary-emphasis: #718096;
    --kendo-color-on-secondary: #FFFFFF;
    --kendo-color-secondary-on-surface: #4A5568;
    --kendo-color-secondary-on-subtle: #2D3748;

    /* Tertiary — gold accent (LegalManager #D4A853) */
    --kendo-color-tertiary-subtle: #FDF8ED;
    --kendo-color-tertiary-subtle-hover: #FAF0D6;
    --kendo-color-tertiary-subtle-active: #F5E6BC;
    --kendo-color-tertiary: #D4A853;
    --kendo-color-tertiary-hover: #C49A45;
    --kendo-color-tertiary-active: #B38C38;
    --kendo-color-tertiary-emphasis: #E0BC6E;
    --kendo-color-on-tertiary: #1A202C;
    --kendo-color-tertiary-on-surface: #C49A45;
    --kendo-color-tertiary-on-subtle: #8B6D2E;

    /* Error */
    --kendo-color-error-subtle: #FEF0F0;
    --kendo-color-error-subtle-hover: #FDE0E0;
    --kendo-color-error-subtle-active: #FBD0D0;
    --kendo-color-error: #D32F2F;
    --kendo-color-error-hover: #C62828;
    --kendo-color-error-active: #B71C1C;
    --kendo-color-error-emphasis: #E53935;
    --kendo-color-on-error: #FFFFFF;
    --kendo-color-error-on-surface: #D32F2F;
    --kendo-color-error-on-subtle: #8E1C1C;

    /* Success */
    --kendo-color-success-subtle: #EDF7F0;
    --kendo-color-success-subtle-hover: #DBF0E1;
    --kendo-color-success-subtle-active: #C9E8D2;
    --kendo-color-success: #2E7D32;
    --kendo-color-success-hover: #27702B;
    --kendo-color-success-active: #1B5E20;
    --kendo-color-success-emphasis: #43A047;
    --kendo-color-on-success: #FFFFFF;
    --kendo-color-success-on-surface: #2E7D32;
    --kendo-color-success-on-subtle: #1B5E20;

    /* Warning */
    --kendo-color-warning-subtle: #FFF8E1;
    --kendo-color-warning-subtle-hover: #FFF0C2;
    --kendo-color-warning-subtle-active: #FFE8A3;
    --kendo-color-warning: #F9A825;
    --kendo-color-warning-hover: #F57F17;
    --kendo-color-warning-active: #E65100;
    --kendo-color-warning-emphasis: #FBC02D;
    --kendo-color-on-warning: #1D1D1F;
    --kendo-color-warning-on-surface: #E65100;
    --kendo-color-warning-on-subtle: #BF360C;

    /* Info */
    --kendo-color-info-subtle: #E8F0FE;
    --kendo-color-info-subtle-hover: #D2E3FC;
    --kendo-color-info-subtle-active: #BBDEFB;
    --kendo-color-info: #1565C0;
    --kendo-color-info-hover: #0D47A1;
    --kendo-color-info-active: #0A3880;
    --kendo-color-info-emphasis: #1E88E5;
    --kendo-color-on-info: #FFFFFF;
    --kendo-color-info-on-surface: #1565C0;
    --kendo-color-info-on-subtle: #0D47A1;

    /* Light */
    --kendo-color-light-subtle: #F7FAFC;
    --kendo-color-light-subtle-hover: #EDF2F7;
    --kendo-color-light-subtle-active: #E2E8F0;
    --kendo-color-light: #EDF2F7;
    --kendo-color-light-hover: #E2E8F0;
    --kendo-color-light-active: #CBD5E0;
    --kendo-color-light-emphasis: #CBD5E0;
    --kendo-color-on-light: #1A202C;
    --kendo-color-light-on-surface: #A0AEC0;
    --kendo-color-light-on-subtle: #2D3748;

    /* Dark */
    --kendo-color-dark-subtle: #CBD5E0;
    --kendo-color-dark-subtle-hover: #A0AEC0;
    --kendo-color-dark-subtle-active: #718096;
    --kendo-color-dark: #2D3748;
    --kendo-color-dark-hover: #1A202C;
    --kendo-color-dark-active: #171923;
    --kendo-color-dark-emphasis: #4A5568;
    --kendo-color-on-dark: #FFFFFF;
    --kendo-color-dark-on-surface: #2D3748;
    --kendo-color-dark-on-subtle: #1A202C;

    /* Chart Series — colores vibrantes para fondo claro */
    --kendo-color-series-a-subtler: #FCE4EC;
    --kendo-color-series-a: #C62828;
    --kendo-color-series-a-bold: #E53935;
    --kendo-color-series-a-subtle: #EF5350;
    --kendo-color-series-a-bolder: #B71C1C;
    --kendo-color-series-b-subtler: #E0F2F1;
    --kendo-color-series-b: #00796B;
    --kendo-color-series-b-bold: #00897B;
    --kendo-color-series-b-subtle: #26A69A;
    --kendo-color-series-b-bolder: #004D40;
    --kendo-color-series-c-subtler: #FFF3E0;
    --kendo-color-series-c: #E65100;
    --kendo-color-series-c-bold: #F57C00;
    --kendo-color-series-c-subtle: #FB8C00;
    --kendo-color-series-c-bolder: #BF360C;
    --kendo-color-series-d-subtler: #E8EAF6;
    --kendo-color-series-d: #283593;
    --kendo-color-series-d-bold: #3949AB;
    --kendo-color-series-d-subtle: #5C6BC0;
    --kendo-color-series-d-bolder: #1A237E;
    --kendo-color-series-e-subtler: #F9FBE7;
    --kendo-color-series-e: #9E9D24;
    --kendo-color-series-e-bold: #AFB42B;
    --kendo-color-series-e-subtle: #C0CA33;
    --kendo-color-series-e-bolder: #827717;
    --kendo-color-series-f-subtler: #E3F2FD;
    --kendo-color-series-f: #1565C0;
    --kendo-color-series-f-bold: #1976D2;
    --kendo-color-series-f-subtle: #42A5F5;
    --kendo-color-series-f-bolder: #0D47A1;

    /* Winledger Custom — LegalManager-inspired */
    --card-gradient: none;
    --wl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --wl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --wl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --wl-bg-glass: rgba(30, 58, 95, 0.04);
    --wl-alt-row-bg: #F7FAFC;

    /* Sidebar Navy — LegalManager sidebar */
    --wl-sidebar-bg: #1E3A5F;
    --wl-sidebar-bg-hover: rgba(255, 255, 255, 0.08);
    --wl-sidebar-bg-active: rgba(255, 255, 255, 0.12);
    --wl-sidebar-text: #CBD5E0;
    --wl-sidebar-text-active: #FFFFFF;
    --wl-sidebar-accent: #D4A853;
    --wl-sidebar-border: rgba(255, 255, 255, 0.08);
    --wl-sidebar-header-text: rgba(255, 255, 255, 0.5);

    /* Gold accent for special highlights */
    --wl-accent-gold: #D4A853;
    --wl-accent-gold-hover: #C49A45;
    --wl-accent-gold-subtle: #FDF8ED;
}

/* ==================== BOOTSTRAP OVERRIDES ==================== */

/* text-muted de Bootstrap necesita usar el color subtle del tema */
.text-muted {
    color: var(--kendo-color-subtle) !important;
}

/* ==================== GLOBAL TYPOGRAPHY — INTER OPTIMIZATIONS ==================== */

/* Inter se ve mejor con anti-aliasing subpixel y ligaduras */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Headings con letter-spacing negativo (estilo Apple) */
h1, h2, h3, .wl-title-lg, .wl-title-md {
    letter-spacing: -0.025em;
}

h4, h5, h6, .wl-title-sm {
    letter-spacing: -0.01em;
}

/* Clases de tipografia Winledger */
.wl-title-lg {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kendo-color-on-app-surface);
}

.wl-title-md {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--kendo-color-on-app-surface);
}

.wl-title-sm {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kendo-color-on-app-surface);
}

.wl-body {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--kendo-color-on-app-surface);
}

.wl-caption {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kendo-color-subtle);
}

/* ==================== LIGHT THEME — COMPONENT OVERRIDES ==================== */

/* AppBar: blanco limpio con sombra sutil estilo LegalManager */
html[data-theme="light"] .k-appbar-dark {
    background-color: #FFFFFF;
    color: #1A202C;
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .k-appbar-dark .k-text-light,
html[data-theme="light"] .k-appbar-dark .k-button-flat-light {
    color: #2D3748 !important;
}

html[data-theme="light"] .k-appbar-dark .k-button-flat-light:hover {
    color: var(--kendo-color-primary) !important;
    background: rgba(30, 58, 95, 0.06);
    border-radius: var(--kendo-border-radius-md);
}

html[data-theme="light"] .k-appbar-dark .k-color-border {
    border-color: #E2E8F0 !important;
}

html[data-theme="light"] .k-appbar-dark .k-appbar-separator {
    border-color: #E2E8F0 !important;
}

/* Drawer/Sidebar: azul marino LegalManager */
html[data-theme="light"] .k-drawer {
    background-color: var(--wl-sidebar-bg);
    border-right: none;
    box-shadow: 2px 0 8px rgba(30, 58, 95, 0.15);
}

/* Drawer items en sidebar navy */
html[data-theme="light"] .k-drawer-item {
    color: var(--wl-sidebar-text);
}

html[data-theme="light"] .k-drawer-item.k-level-0 {
    color: var(--wl-sidebar-header-text);
}

html[data-theme="light"] .k-drawer-item.k-level-1 {
    color: var(--wl-sidebar-text);
    border-left-color: transparent;
}

html[data-theme="light"] .k-drawer-item.k-level-1:hover,
html[data-theme="light"] .k-drawer-item.k-level-2:hover {
    background: var(--wl-sidebar-bg-hover);
    color: var(--wl-sidebar-text-active);
}

html[data-theme="light"] .k-drawer-item.k-selected.k-level-1 {
    background: var(--wl-sidebar-bg-active);
    border-left-color: var(--wl-sidebar-accent);
    color: var(--wl-sidebar-text-active);
}

html[data-theme="light"] .k-drawer-item.k-selected.k-level-2 {
    background: var(--wl-sidebar-bg-active);
    color: var(--wl-sidebar-text-active);
    position: relative;
}

/* Mejora 1: Punto dorado en level-2 seleccionado */
html[data-theme="light"] .k-drawer-item.k-selected.k-level-2::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wl-sidebar-accent);
}

/* Mejora 2: Padre resaltado cuando un hijo está activo */
html[data-theme="light"] .k-drawer-item.k-parent-active.k-level-1 {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--wl-sidebar-accent);
    color: var(--wl-sidebar-text-active);
}

html[data-theme="light"] .k-drawer-item.k-parent-active.k-level-1 .k-svg-icon {
    color: var(--wl-sidebar-accent);
    opacity: 1;
}

html[data-theme="light"] .k-drawer-item .k-svg-icon {
    color: var(--wl-sidebar-text);
}

html[data-theme="light"] .k-drawer-item.k-selected .k-svg-icon {
    color: var(--wl-sidebar-accent);
}

html[data-theme="light"] .k-drawer-item .k-drawer-toggle .k-svg-icon {
    color: var(--wl-sidebar-header-text);
}

/* Drawer separator en sidebar navy */
html[data-theme="light"] .k-drawer-item.k-drawer-separator {
    border-color: var(--wl-sidebar-border);
}

/* ============================================================
   DARK THEME — COMPONENT REFINEMENTS
   El dark theme usa las variables :root como base.
   Estos overrides afinan los componentes para que el dark
   se sienta igual de pulido que el light.
   ============================================================ */

/* AppBar: borde inferior sutil en dark para separar del contenido */
:root .k-appbar-dark {
    border-bottom: 1px solid var(--kendo-color-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Empresa badge en dark: glass effect refinado */
:root .empresa-appbar {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

:root .empresa-nombre {
    color: #EFF0F5;
}

:root .empresa-rif {
    color: #8E95B9;
    border-left-color: rgba(255, 255, 255, 0.12);
}

/* Drawer en dark: borde sutil + sombra */
:root .k-drawer {
    border-right: 1px solid var(--kendo-color-border);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
}

/* Popups/Dropdowns en dark: borde visible + sombra */
:root .k-popup {
    border: 1px solid var(--kendo-color-border-alt);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root .k-list-item:hover,
:root .k-list-item.k-hover {
    background: var(--kendo-color-base-subtle);
}

:root .k-list-item.k-selected {
    background: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

/* Window/Dialog en dark: titlebar con primary gold */
:root .k-window {
    border: 1px solid var(--kendo-color-border-alt);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

:root .k-window .k-window-titlebar {
    background: var(--kendo-color-surface);
    border-bottom: 1px solid var(--kendo-color-border);
}

/* Inputs focus en dark: glow dorado sutil */
:root .k-input:focus,
:root .k-input.k-focus,
:root .k-picker:focus,
:root .k-picker.k-focus {
    border-color: var(--kendo-color-primary);
    box-shadow: 0 0 0 2px rgba(204, 176, 102, 0.2);
}

/* Tiles en dark: hover refinado con glow */
:root button.wl-tile.k-button:hover,
:root .wl-tile.k-button:hover {
    border-color: var(--kendo-color-primary);
    box-shadow: 0 8px 20px rgba(204, 176, 102, 0.15);
}

/* Tile icon hover: color primary en dark */
:root button.wl-tile.k-button:hover .wl-tile-icon,
:root .wl-tile.k-button:hover .wl-tile-icon {
    color: var(--kendo-color-primary);
    transform: scale(1.1);
}

/* Tiles section header en dark */
:root .wl-tiles-section .k-svg-icon {
    color: var(--kendo-color-primary);
}

/* Cards en dark: borde más visible */
:root .k-card {
    border: 1px solid var(--kendo-color-border-alt);
}

/* Grid toolbar en dark */
:root .custom-grid .k-toolbar {
    border-bottom: 1px solid var(--kendo-color-border);
}

/* Scrollbar refinada en dark */
:root .k-drawer::-webkit-scrollbar {
    width: 4px;
}

:root .k-drawer::-webkit-scrollbar-track {
    background: transparent;
}

:root .k-drawer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

:root .k-drawer::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}