:root {
    --color-scrollbar: #f8c471;  /* color de escrooll */
    --color-background-scrollbar: #eee;
    --color-base-fondo: #000; /* base fondo */

    --color-blanco: #ffffff;

    --color-secondary: #0c2e50;  /* base color de caja principal*/
}
/* SCROLL */
.content__page::-webkit-scrollbar {
    width: 25px;
    background: transparent;
}

.content__page::-webkit-scrollbar-thumb{
    border: 10px solid transparent;
    box-shadow: none;
    border-radius: 40px;
}

.content__page:hover::-webkit-scrollbar-thumb{
    box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

.content__page:hover::-webkit-scrollbar-thumb:hover{
    border: 8px solid transparent;
    box-shadow: inset 0 0 0 10px var(--color-blanco);
}

.content__page::-webkit-scrollbar-track {
    background-color: transparent;
    margin: 40px 0;
}

/* SCROLL MAZILA FIREFOX 

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

*/


/* SCROLL PARA LA BARRA DE COLOR AZUL */
.layout__aside::-webkit-scrollbar {
    width: 25px;
    background: var(--color-base-fondo); /* fondo del escroll*/
}

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

.layout__aside:hover::-webkit-scrollbar-thumb{
    box-shadow: inset 0 0 0 10px var(--color-nuevo-titulos);
}

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

.layout__aside::-webkit-scrollbar-track {
    background-color: transparent;
    margin: 40px 0;
}

/* SCROLL PARA LA BARRA DE COLOR AZUL

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

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

*/