/* /assets/css/style.css */
:root {
    --bg-dark: #070B14;
    --glass-bg: rgba(16, 25, 43, 0.4);
    --glass-border: rgba(255, 255, 255, 0.05);
    --cyan: #00f0ff;
    --purple: #8a2be2;
}

body.bg-dark {
    background-color: var(--bg-dark);
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Panel de Cristal (Glassmorphism) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

/* Estilización del Slider Tecnológico */
.tech-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.tech-slider:focus {
    outline: none;
}

/* Pista del slider (Track) */
.tech-slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 4px;
}

/* Pulgar del slider (Thumb) */
.tech-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* Centrar el thumb en la pista */
    background-color: var(--cyan);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--cyan);
    transition: transform 0.1s;
}

.tech-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}