/**
 * Estilos base del sistema
 * Migrado desde base.html (Jinja2) - Solo CSS, sin HTML
 */

:root {
    --primary-fluor: #FF6B00;
    --primary-glow: rgba(255, 107, 0, 0.4);
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #0A0A0B;
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 0);
    background-size: 32px 32px;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar-active {
    color: var(--primary-fluor);
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--primary-fluor);
}

.glow-orange {
    box-shadow: 0 0 15px var(--primary-glow);
}

.glow-text {
    text-shadow: 0 0 8px var(--primary-glow);
}

.card-gradient {
    background: linear-gradient(145deg, #141416 0%, #0D0D0E 100%);
}

.metric-gradient {
    background: linear-gradient(180deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0A0A0B;
}

::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #333;
}

/* Responsive Sidebar */
#sidebar {
    transition: transform 0.3s ease-in-out;
}

@media (max-width: 1024px) {
    #sidebar {
        transform: translateX(-100%);
    }
    #sidebar.open {
        transform: translateX(0);
    }
}