/*VARIABLES PARA EL SCROLL*/
:root{
    --color-scrollbar:#D3D3D3;
    --color-background:#eee;
}

/*NOTA:LOS DOS NAVEGADORES TIENEN DISTINTOS ::PSEUDOELEMENTOS PARA DAR ESTILO AL SCROLL*/

/*SCROLL EN WEBKIT (EN CHROME) PARA EL <section class="content__page*/

.content__page::-webkit-scrollbar{/*ESTILO CON EL :PSEUDOELEMENTO SCROLLBAR A LA BARRA DEL SCROLL. 
    ESTILO A TODA LA PARTE QUE LLEVA LA BARRA SCROLL/<section class="content__page */

 width: 25px;/*ANCHO DEL SCROLL*/
 background-color:transparent;/*COLOR DEL FONDO TRANSPARENTE Y AL HACER HOVER LE PONE UN COLOR*/

}
/*(THUMB)=ES LA PARTE DEL ELEMENTO DE LA BARRA QUE SE VE DEL SCROLL ,QUE SE PUEDE MOVER Y CLICKAR,
ES LA PARTE QUE SUBE Y BAJA, NO LA BARRA COMPLETA.
*/
.content__page::-webkit-scrollbar-thumb{
   border:10px solid transparent;
    box-shadow:none;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
   
}
/*NOTA:EL HOVER  DA ESTILO AL PULSAR EL ELEMENTO QUE ESTÁ DETRAS DEL HOVER.EJEMPLO:  PINCHA AQUI Y DA ESTILO:HOVER  
NOTA:SI :HOVER NO TIENE NADA DELANTE,LE DARA ESTILO A LO DE ATRAS,PERO SI TIENE UN ELEMENTO DETRAS Y OTRO DELANTE,EL DE ATRAS SERA PARA 
PULSAR Y DAR ESTILO AL DE ADELANTE*/
.content__page:hover::-webkit-scrollbar-thumb{/*PARA CUANDO HAGA (HOVER) EN <section class="content__page"ESTILO AL SCROLL-THUMB.*/
 box-shadow: inset 0 0 0 10px var(--color-scrollbar);/*SOMBRA AL THUMB CUANDO HAGA HOVER*/
}
.content__page:hover::-webkit-scrollbar-thumb:hover{/*ESTILO A ALA BARRA DEL SCROLL-THUMB CUANDO HAGA HOVER EN EL (content_page)Y EN EL (thumb)*/
  border:8px solid transparent;/*CUANDO HAGA HOVER DE HAGA MAS GORDA */
  box-shadow:inset 0 0 0 10px var(--color-scrollbar);/*SOMBRA EN LA CAJA AL HACER HOVER*/
}

/*(TRACK)=ES TODA LA BARRA COMPLETA DE ARRIBA HACIA ABAJO,DENTRO DE TRACK ESTA EL THUMB*/
.content__page:hover::-webkit-scrollbar-track{/*ESTILO CUANDO LE HAGA HOVER EN EL (content_page) AL (TRACK)*/
    margin:40px 0;/*MARGEN POR ARRIBA Y POR ABAJO DE 40 Y 0= IZ, DER*/
    background-color: transparent;/*COLOR DEL FONDO TRANSPARENTE*/

}

/*SCROLL EN -MOZ (EN MOZILLA)*/
/*NOTA:MOZILLA NO TIENE SCROLLBAR/USAMOS LOS ESTILOS PARA EL SCROLLBAR QUE TRAE EL CSS*/
.content__page{/*ESTILO A LA CAJA <section class="content__page*/
    scrollbar-width: thin;/*thin:SE VA A VER EL ANCHO DE LA BARRA DEL SCROLL MAS FINA*/
    scrollbar-width: auto;/*auto:*/
    scrollbar-color:var(--color-scrollbar) transparent;/*MODIFICAR EL COLOR DEL (TRUMB)=var(..)Y PUEDES TAMBIEN (TRACK)=transparent*/
}

/*#################################################################################################################3*/

/*#### SCROLL EN WEBKIT EN (CHROME) PARA EL (BARRA LATERAL) <section class= "layout_aside"> ####*/

.layout__aside::-webkit-scrollbar{/*ESTILO CON EL :PSEUDOELEMENTO SCROLLBAR A LA BARRA DEL SCROLL. 
    ESTILO A TODA LA PARTE QUE LLEVA LA BARRA SCROLL/ <aside class="layout__aside">*/

 width: 25px;/*ANCHO DEL SCROLL*/
 background-color:var(--color-secondary);/*METO EL MISMO COLOR DEL FONDO DEL ASIDE,PARA QUE NO SE VEA EL SCROOL Y DESPUES LE METO UN HOVER*/

}

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

.layout__aside:hover::-webkit-scrollbar-thumb{/*PARA CUANDO HAGA (HOVER) EN <section class="layout_aside"ESTILO AL SCROLL-THUMB.*/
    box-shadow: inset 0 0 0 10px var(--color-principal);/*SOMBRA AL THUMB CUANDO HAGA HOVER*/
}

.layout__aside:hover::-webkit-scrollbar-thumb:hover{/*ESTILO A ALA BARRA DEL SCROLL-THUMB CUANDO HAGA HOVER EN  EL(layout_aside)Y EN EL (thumb)*/
    border:8px solid var(--color-principal);/*CUANDO HAGA HOVER DE HAGA MAS GORDA */
    
}


/*(TRACK)=ES TODA LA BARRA COMPLETA DE ARRIBA HACIA ABAJO,DENTRO DE TRACK ESTA EL THUMB*/
.layout__aside:hover::-webkit-scrollbar-track{/*ESTILO CUANDO LE HAGA HOVER EN EL (layout_aside) AL (TRACK)*/
    margin:40px 0;/*MARGEN POR ARRIBA Y POR ABAJO DE 40 Y 0= IZ, DER*/
    background-color: transparent;/*COLOR DEL FONDO TRANSPARENTE*/

}




/*SCROLL EN -MOZ EN (MOZILLA) A LA (BARRA LATERAL) <section class= "layout_aside">*/
/*NOTA:MOZILLA NO TIENE SCROLLBAR/USAMOS LOS ESTILOS PARA EL SCROLLBAR QUE TRAE EL CSS*/
.layout_aside{/*ESTILO A LA CAJA <section class="content__page*/
    scrollbar-width: thin;/*thin:SE VA A VER EL ANCHO DE LA BARRA DEL SCROLL MAS FINA*/
   
    scrollbar-color:var(--color-scrollbar) var(--color-secondary);/*MODIFICAR EL COLOR DEL (TRUMB)=var(..)Y PUEDES TAMBIEN (TRACK)=var(..)*/
}