/* ===========================================================================
   scroll-sutil.css — barra de scroll fina que solo aparece al usarla
   ===========================================================================
   En reposo la barra es invisible. El thumb aparece mientras se desplaza o al
   acercar el cursor a su borde, y se esconde sola a los 900 ms.

   Quien pone y quita la clase .scroll-activo es public/js/scroll-sutil.js.
   Lo usan las dos plantillas: el panel (plantilla/app) y el sitio publico
   (principal), asi que no vive dentro del CSS de ninguna de las dos.
   =========================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

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

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background .25s ease;
}

.scroll-activo {
    scrollbar-color: rgba(138, 148, 161, .5) transparent;
}

.scroll-activo::-webkit-scrollbar-thumb {
    background: rgba(138, 148, 161, .5);
    background-clip: content-box;
}

.scroll-activo::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 148, 161, .75);
    background-clip: content-box;
}