:root{
    --color-scrollbar: #D3D3D4; 
    --color-background-scrollbar: white; 
}

/*scroll para navegadores chrome*/

.content__page::-webkit-scrollbar{/* todas las paginas que contengan un content__page contendran las siguientes para metos para un scroll*/
    
    width: 25px;
    background: transparent;/*barra del scroll acuerdate como se inica */
    content: "▲"; /* Puedes personalizar el contenido y el estilo según tus preferencias */
}

.content__page::-webkit-scrollbar-thumb{/*para poner la barra de scroll */
    border: 10px solid transparent; 
    box-shadow: none;
    border-radius: 40px;

}

.content__page:hover::-webkit-scrollbar-thumb:hover{
    border: 8px solid transparent; 
    box-shadow: inset 0 0 0 10px var(--color-secondary); 
}
.content__page:hover::-webkit-scrollbar-track{/*de este sentido lo que podemos hacer es que el scroll de la barra la podamos modificar */
    background-color: transparent;
    margin: 40px 0; 
  

}

/*scroll barra lateral de la parte izquierda*/


.layout__aside::-webkit-scrollbar{
    width: 25px;
    background: transparent;
}

.layout__aside::-webkit-scrollbar-thumb{
    box-shadow: none;
    border-radius: 40px;

}

.layout__aside:hover::-webkit-scrollbar-thumb:hover{
    border: 8px solid white; 
    box-shadow: inset 0 0 0 10px var(--color-secondary); 
}
.layout__aside:hover::-webkit-scrollbar-track{
    background-color: transparent;
    margin: 40px 0; 
  

}

/*scroll en nacvegador mozilla*/

.content__page{
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar);
}

.layout__aside{
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) var(--color-secondary); 

}