/*
        ===================================================================
        VARIABLES CSS (Temas Claro y Oscuro)
        Se utilizan variables nativas de CSS para la gestión de temas.
        ===================================================================
        */

        /* Tema Oscuro */
        .dark-mode {
            /* Colores de fondo */
            --bg-body: #0f172a;              /* Slate 900 */
            --bg-card: #1e293b;              /* Slate 800 */
            --bg-card-hover: #334155;        /* Slate 700 */
            --bg-card-secondary: #0f172a;    /* Slate 900 */
            
            /* Textos */
            --text-main: var(--color-text-light);
            --color-text-muted: #94a3b8;     /* Slate 400 */
            
            /* Sombras más pronunciadas para modo oscuro */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
            
            /* Bordes */
            --border-color: #475569;          /* Slate 600 */
            --border-color-light: #334155;    /* Slate 700 */

            /* Gradientes ajustados para modo oscuro */
            --gradient-primary: linear-gradient(135deg, #1e40af 0%, #3730a3 100%);
            --gradient-secondary: linear-gradient(135deg, #db2777 0%, #be185d 100%);
            --gradient-tech: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
            --gradient-gaming: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
        }

        /* Media query para detectar preferencia del sistema */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-body: #0f172a;
                --bg-card: #1e293b;
                --bg-card-hover: #334155;
                --text-main: var(--color-text-light);
                --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
                --border-color: #475569;
            }
        }