/* ==========================================================================
   BARRA DE DESPLAZAMIENTO · Voice Emotions
   Carril oscuro y casi invisible; el tirador es un haz de "lifestream" que se
   enciende al pasar el ratón. Se aplica a toda la web (página y listas con scroll).
   ========================================================================== */
:root {
    --sb-acc: #00ffc3;
    --sb-acc-2: #00b8d4;
    --sb-track: rgba(8, 14, 18, 0.92);
}

/* Chrome, Edge, Safari, Opera (y los móviles que muestran barra) */
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 14px; height: 14px; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { border-width: 3px; }

::-webkit-scrollbar-track {
    background: var(--sb-track);
    box-shadow: inset 1px 0 0 rgba(0, 255, 195, 0.08);
}
::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 rgba(0, 255, 195, 0.08); }

::-webkit-scrollbar-thumb {
    min-height: 48px; min-width: 48px;
    border-radius: 999px;
    border: 2px solid transparent;           /* deja el tirador "flotando" dentro del carril */
    background-clip: padding-box;
    background-image: linear-gradient(180deg, rgba(0, 255, 195, 0.7), rgba(0, 184, 212, 0.5));
    box-shadow: inset 0 0 0 1px rgba(0, 255, 195, 0.35), inset 0 0 8px rgba(0, 255, 195, 0.25);
    transition: background-image .2s;
}
::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(90deg, rgba(0, 255, 195, 0.7), rgba(0, 184, 212, 0.5)); }
::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(180deg, var(--sb-acc), var(--sb-acc-2));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 10px rgba(255, 255, 255, 0.35);
}
::-webkit-scrollbar-thumb:horizontal:hover { background-image: linear-gradient(90deg, var(--sb-acc), var(--sb-acc-2)); }
::-webkit-scrollbar-thumb:active { background-image: linear-gradient(180deg, #7dffe0, var(--sb-acc)); }
::-webkit-scrollbar-corner { background: var(--sb-track); }

/* Mientras se desliza, el tirador se enciende como mako (lo activa js/mako-scroll.js) */
html.mako-activo::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #5dffd6, #00d4ff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.45);
}

/* Firefox: no admite degradados ni brillo; color y grosor acordes */
@supports not selector(::-webkit-scrollbar) {
    html, * { scrollbar-width: thin; scrollbar-color: rgba(0, 255, 195, 0.6) #0a1014; }
}

/* Con un efecto de scroll activo se oculta la barra y solo se ve el efecto (con «Sin efecto» la barra se queda).
   Solo en ordenadores con ratón y sin «reducir movimiento»: ahí es donde el efecto existe, así que nadie se queda sin barra. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.sb-oculta { scrollbar-width: none; }
    html.sb-oculta::-webkit-scrollbar, html.sb-oculta body::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* El zoom con dos dedos queda permitido (accesibilidad); solo se evita el zoom accidental al tocar dos veces seguidas */
html { touch-action: manipulation; }