/* ========== SCROLLBAR PERSONALIZADO CON VARIABLES ========== */
:root {
    --scrollbar-track-light: #f9fafb;
    --scrollbar-thumb-light-start: #d1d5db;
    --scrollbar-thumb-light-end: #9ca3af;
    --scrollbar-thumb-light-hover-start: #9ca3af;
    --scrollbar-thumb-light-hover-end: #6b7280;
    
    --scrollbar-track-dark: #1f2937;
    --scrollbar-thumb-dark-start: #7c3aed;
    --scrollbar-thumb-dark-end: #6b21a8;
    --scrollbar-thumb-dark-hover-start: #8b5cf6;
    --scrollbar-thumb-dark-hover-end: #7e22ce;
}

.scrollbar-thin-theme {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-light-end) var(--scrollbar-track-light);
}

/* Light mode */
.scrollbar-thin-theme::-webkit-scrollbar-track {
    background: var(--scrollbar-track-light);
    border-radius: 6px;
}

.scrollbar-thin-theme::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, 
        var(--scrollbar-thumb-light-start), 
        var(--scrollbar-thumb-light-end));
    border-radius: 6px;
    transition: background 0.3s ease;
}

.scrollbar-thin-theme::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, 
        var(--scrollbar-thumb-light-hover-start), 
        var(--scrollbar-thumb-light-hover-end));
}

/* Dark mode */
.dark .scrollbar-thin-theme {
    scrollbar-color: var(--scrollbar-thumb-dark-start) var(--scrollbar-track-dark);
}

.dark .scrollbar-thin-theme::-webkit-scrollbar-track {
    background: var(--scrollbar-track-dark);
}

.dark .scrollbar-thin-theme::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, 
        var(--scrollbar-thumb-dark-start), 
        var(--scrollbar-thumb-dark-end));
}

.dark .scrollbar-thin-theme::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, 
        var(--scrollbar-thumb-dark-hover-start), 
        var(--scrollbar-thumb-dark-hover-end));
}

/* Dimensions */
.scrollbar-thin-theme::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}