/* =========================================
   SCROLLBARS PROFESIONALES (Webkit)
   - Invisibles/Sutiles por defecto
   - Visibles al pasar el mouse
   ========================================= */

/* Ancho y alto de la barra */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

/* El "carril" o track (siempre transparente) */
::-webkit-scrollbar-track {
    background: transparent;
}

/* La "manija" o thumb (el indicador movible) */
::-webkit-scrollbar-thumb {
    background-color: rgba(144, 149, 160, 0);
    /* Invisible por defecto */
    border-radius: 4px;
    border: 2px solid transparent;
    /* Truco para dar margen si se usa background-clip: content-box */
    background-clip: content-box;
    transition: background-color 0.3s ease;
}

/* =========================================
   VISIBILIDAD EN HOVER
   ========================================= */

/* Opción 1: Mostrar cuando el mouse está sobre el elemento scroleable */
/* Esto funciona en la mayoría de navegadores modernos para contenedores */
*:hover::-webkit-scrollbar-thumb {
    background-color: rgba(144, 149, 160, 0.5);
    /* Gris semitransparente */
}

/* Opción 2: Mostrar cuando el mouse está sobre la propia barra */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 149, 160, 0.8);
    /* Gris más oscuro al intentar agarrar */
}

/* 
   Para Firefox (Estándar futuro, soporte limitado aún de personalización avanzada)
   scrollbar-width: thin;
   scrollbar-color: thumb track;
*/
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(144, 149, 160, 0) transparent;
    transition: scrollbar-color 0.3s ease;
}

*:hover {
    scrollbar-color: rgba(144, 149, 160, 0.5) transparent;
}