:root {
    /* Zavalla Grayscale theme variables overriding theme.css */
    --ui-appbar: #1c1c1c !important;       /* Dark Gray - AppBar */
    --ui-nav: #2d2d2d !important;          /* Medium Dark Gray - Sidebar */
    --ui-background: #f5f5f5 !important;   /* Light Gray - Fondo de página */
    --ui-card: #FFFFFF !important;
    --ui-accent: #6b7280 !important;       /* Gray Accent */
    --ui-accent-hover: #4b5563 !important;
    --ui-accent-light: rgba(107, 114, 128, 0.12) !important;
    --ui-text-primary: #111827 !important;
    --ui-text-secondary: #4b5563 !important;
    
    /* Radzen Synchronization */
    --rz-primary: #6b7280 !important;
    --rz-secondary: #4b5563 !important;
    --rz-layout-background-color: #f5f5f5 !important;
    --rz-header-background-color: #1c1c1c !important;
    --rz-sidebar-background-color: #2d2d2d !important;
    --rz-body-background-color: #f5f5f5 !important;

    /* Sidebar Specific Customization */
    --sidebar-bg: var(--ui-nav) !important;
    --sidebar-text-color: rgba(255, 255, 255, 0.7) !important;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1) !important;
    --sidebar-active-bg: rgba(255, 255, 255, 0.18) !important;
    --sidebar-icon-color: rgba(255, 255, 255, 0.5) !important;
    --ui-accent-glow: rgba(107, 114, 128, 0.6) !important;

    /* Customización de logo de Login (Zavalla usa un logo más horizontal) */
    --login-logo-max-width: 90%;
    --login-logo-container-height: 18vh;
    --login-logo-max-height: 9rem;
}

html, body, .rz-body, .rz-layout {
    background-color: #f5f5f5 !important;
}

.rz-sidebar {
    background-color: #2d2d2d !important;
}

.rz-header {
    background-color: #1c1c1c !important;
}