/* Dark Mode Styles */
        body.dark-mode {
            --xp-blue-title: #333333;
            --xp-blue-title-gradient: linear-gradient(to bottom, #333333 0%, #1a1a1a 100%);
            --xp-bg: #444444;
            --xp-window-bg: #222222;
            --xp-border: #000000;
            --xp-taskbar: #1a1a1a;
            --xp-green-start: #555555;
            --xp-text: #ffffff;
            --xp-sidebar-header: linear-gradient(to right, #444444 0%, #333333 100%);
            --xp-sidebar-bg: #333333;
            --xp-sidebar-border: #666666;
            
            /* Dark overlay on top of the original image */
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/fondo.jpg');
            background-color: #1a1a1a;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        body.dark-mode .card {
            color: #ffffff;
        }

        body.dark-mode .card:hover {
            background-color: #555555;
            border-color: #777777;
        }

        body.dark-mode .xp-panel-header {
            color: #ffffff;
            background: linear-gradient(to right, #555555 0%, #333333 100%);
        }
        
        body.dark-mode .xp-panel-header::after {
            color: #ffffff;
            border-color: rgba(255,255,255,0.3);
        }

        body.dark-mode .xp-panel-content {
            background-color: #333333;
            color: #ffffff;
        }

        body.dark-mode .sidebar .nav-item {
            color: #dddddd;
        }

        body.dark-mode .sidebar .nav-item:hover {
            color: #ffffff;
        }

        body.dark-mode .content-section h2 {
            color: #ffffff;
            border-bottom-color: #555555;
        }
        
        body.dark-mode .main-area {
            background-color: #2b2b2b;
            border-color: #555555;
            box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5);
        }

        body.dark-mode .card h3 {
            color: #ffffff;
        }
        
        body.dark-mode .win-btn {
            background: linear-gradient(to bottom, #555555 0%, #333333 100%);
            color: white;
            border-color: #777777;
            box-shadow: inset 1px 1px 0 #777777;
        }
        
        body.dark-mode .panel {
            background-color: #222222;
            color: white;
            border-color: #555555;
            box-shadow: inset 1px 1px 0 #333333, inset -1px -1px 0 #555555;
        }
        
        body.dark-mode .panel .item {
            border-bottom-color: #444444;
        }
        
        body.dark-mode .mini-calendar {
            background: transparent;
            color: white;
        }
        
        body.dark-mode table th, 
        body.dark-mode table td {
            border-color: #555555 !important;
            color: white;
        }
        
        body.dark-mode table tr[style*="background: #ECE9D8"] {
            background: #333333 !important;
        }

        body.dark-mode .repo-box {
            background-color: #222222;
            border-color: #555555;
            color: white;
        }