/* ============================================================
   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 — azul como color de acción (aprobado jul-2026): misma familia
       que el navy del tema claro, para que ambos temas se sientan el mismo
       producto; el oro pasó a acento de detalle (--wl-accent-gold, hilos del
       grid header y AppBar). Paleta oro anterior por si se quiere revertir:
       subtle #453817/#5C4C1F/#735E26, primary #CCB066, hover #D4BC7D,
       active #DECC9C, emphasis #A18436, on-primary #1C1D22,
       on-surface #CCB066, on-subtle #EDE3C9. */
    --kendo-color-primary-subtle: #1B2C4F;
    --kendo-color-primary-subtle-hover: #22375F;
    --kendo-color-primary-subtle-active: #2A426F;
    --kendo-color-primary: #4C8BF5;
    --kendo-color-primary-hover: #659AF7;
    --kendo-color-primary-active: #7FACF9;
    --kendo-color-primary-emphasis: #3E71C9;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-color-primary-on-surface: #6EA3F7;
    --kendo-color-primary-on-subtle: #D6E4FC;

    /* Acento dorado de marca (antes era el primario) — hilos y detalles */
    --wl-accent-gold: #CCB066;
    --wl-accent-gold-hover: #D4BC7D;

    /* Hero header (paneles de encabezado con degradado, .wl-hero-header):
       azul que destaca sobre el fondo oscuro del tema (#151828). */
    --wl-hero-from: var(--kendo-color-primary-subtle);
    --wl-hero-to: var(--kendo-color-primary-emphasis);

    /* 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: 13px;   /* base de toda la app (era 15px) — densidad global */
    --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;

    /* Hero header (paneles de encabezado con degradado, .wl-hero-header):
       navy sobre fondo claro. */
    --wl-hero-from: var(--kendo-color-primary);
    --wl-hero-to: var(--kendo-color-primary-emphasis);
}

/* ==================== 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-inverse {
    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-inverse .k-text-light,
html[data-theme="light"] .k-appbar-inverse .k-button-flat-light {
    color: #2D3748 !important;
}

html[data-theme="light"] .k-appbar-inverse .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-inverse .k-color-border {
    border-color: #E2E8F0 !important;
}

html[data-theme="light"] .k-appbar-inverse .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-inverse {
    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);
}

/* ============================================================
   Utilidades k-gap-* (polyfill)
   El tema kendo-theme-default de Telerik 12.2 NO incluye las
   clases de gap, pero el proyecto las usa en ~33 archivos
   (botoneras y headers quedaban pegados). Escala oficial de
   Kendo: spacer 1rem, paso 0.25rem; xs/sm/md/lg/xl = 1/2/3/4/6.
   ============================================================ */
.k-gap-0 { gap: 0; }
.k-gap-1, .k-gap-xs { gap: 0.25rem; }
.k-gap-2, .k-gap-sm { gap: 0.5rem; }
.k-gap-3, .k-gap-md { gap: 0.75rem; }
.k-gap-4, .k-gap-lg { gap: 1rem; }
.k-gap-5 { gap: 1.25rem; }
.k-gap-6, .k-gap-xl { gap: 1.5rem; }
.k-gap-8 { gap: 2rem; }

/* ============================================================
   AppBar oscuro (Telerik 14) — Button.ThemeColor.Light ya no
   existe; los botones clear dentro del AppBar Inverse heredan
   el color claro de la barra (--kendo-color-on-inverse) para
   que el icono no quede oscuro sobre fondo oscuro.
   ============================================================ */
.k-appbar-inverse .k-button.k-button-clear {
    color: inherit;
}

/* ============================================================
   Cards de estado (Telerik 14) — TelerikCard perdió el parámetro
   ThemeColor y el tema ya no trae .k-card-error/.k-card-success.
   Réplica de la paleta original sobre las variables del tema.
   Uso: <TelerikCard Class="wl-card-error"> / "wl-card-success".
   ============================================================ */
.k-card.wl-card-error {
    background-color: var(--kendo-color-error-subtle, #fcddda);
    color: var(--kendo-color-error-on-subtle, #7a0c00);
    border-color: var(--kendo-color-error-emphasis, #f76f60);
}
.k-card.wl-card-success {
    background-color: var(--kendo-color-success-subtle, #dcf0d3);
    color: var(--kendo-color-success-on-subtle, #1c5a00);
    border-color: var(--kendo-color-success-emphasis, #81d15f);
}

/* ============================================================
   Tooltips en botones deshabilitados de grids — el tema Telerik
   pone pointer-events:none en .k-disabled, lo que impide que el
   navegador muestre el title (motivo de bloqueo en los listados
   de Compras). Se reactiva el hover SOLO para el tooltip; el
   clic sigue bloqueado por el atributo disabled del <button>.
   ============================================================ */
.k-grid .k-button:disabled,
.k-grid .k-button.k-disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

/* Ventanas que se abren DESDE otra ventana (ver imagen, ver PDF, etiquetas del
   DocumentManager). Telerik NO expone un parametro ZIndex, y al hacer clic dentro
   de la ventana padre la ACTIVA subiendola de capa, asi que la hija nacia por
   debajo y la imagen aparecia detras del panel.
   🔴 Medido en el navegador, no estimado: en reposo el padre esta en 10005 y la
   hija en 10004; al pulsar "Ver" el padre salta a 11500 y ahi se queda (probado
   tres veces seguidas, no sigue trepando). De ahi el 13000: por encima de ese
   techo con margen, sin irse a un numero absurdo que tape overlays legitimos. */
.k-window.dm-ventana-encima {
    z-index: 13000 !important;
}

/* Alto de la zona de descarga del DocumentManager. El tema le da ~220px de minimo,
   que sumados a la barra de cuota, la fila de campos y los 350px de la grilla
   desbordaban el panel y obligaban a hacer scroll para ver los adjuntos ya
   cargados (medido: 805px de contenido en 750px disponibles). 120px sigue siendo
   un blanco comodo para soltar y deja la lista a la vista. */
/* Alto de la zona de descarga del DocumentManager.
   🔴 El tema fija `height: 220px` (alto FIJO, no minimo), asi que un min-height no
   la achica: hay que soltar el height. Es lo mismo que hace el propio Telerik para
   su chat (`.k-chat-upload .k-external-dropzone { height: auto }`).
   Con 220px, sumados a la barra de cuota, la fila de campos y los 350px de la
   grilla, el panel desbordaba y obligaba a hacer scroll para ver los adjuntos ya
   cargados (medido: 805px de contenido en 750px disponibles). */
.k-external-dropzone {
    height: auto;
    min-height: 120px;
}

/* Techo responsivo para el visor de comprobantes.
   El TelerikWindow NO se encoge solo: con Width="1100px" en un equipo de 1024px la
   ventana se salia por los DOS lados y quedaba cortada, sin scroll que la rescatara.
   🔴 Medido, no estimado: en un viewport de 1024 daba left=-45 / right=1055 (45px
   perdidos por lado: se comia la columna Ln por la izquierda y Tasa por la derecha).
   Con este max-width queda en 983px centrada (left=13) y en pantallas grandes la
   regla ni se activa: a 1500px sigue midiendo 1100px.
   Funciona porque Telerik NO pone left/top inline en la ventana — el centrado es
   CSS, asi que al limitar el ancho se recentra sola. */
.k-window.wl-visor-comprobante {
    max-width: 96vw;
}