/*------------------------------------------------------------*/
/*ESTILOS DE ENCABEZADO*/
header .menu_navegacion{
    width: 100%;
    background-color: var(--color-menu_navegacion);
    padding: 0.2rem 0;
    display: flex;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header .contenedor_menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    max-width: 1200px;
}
header .boton_menu_navegacion{
    padding: 5px 10px;
    border-radius:25px;
    background-color: var(--color-fondo-icono);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icono-volver);
}
header .boton_menu_navegacion:hover{
    background-color: var(--color-fondo-hover-icono);
}
header .boton_menu_navegacion p{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    font-size: 1rem;
}
/*modo oscuro*/
.modo_oscuro{
    display: flex;
    align-items: center;
    width: 35px;
    cursor: pointer;
}
.modo_oscuro .base{
    position: relative;/*relativo porque el circulo se desplazara sobre el*/
    display: flex;/*Sirve para centrar el circulo horizontalmente*/
    align-items: center;
    width: 100%;
    height: 20px;
    background-color: var(--color-base-modo_oscuro);/*color de la base modo oscuro*/
    border-radius: 50px;
}
.modo_oscuro .circulo{
    position: absolute;/*absolite porque el circulo puede desplazarse libremente sobre la base*/
    height: 90%;/*alto 90% de la base*/
    aspect-ratio: 1 / 1;/*ancho del circulo*/
    background-color: var(--color-circulo-modo_oscuro);/*color del circulo de modo oscuro*/
    border-radius: 50%;/*radio para todos los lados del 50%*/
    left: 2px;/*desplazamiento de 2px de derecha a isquierda*/
    transition: left 0.5s ease;
}
.modo_oscuro .circulo.prendido{/*cuando se presione left tendra este valor*/
    left: 15px;
}
/*------------------------------------------------------------*/

@media screen and (max-width: 600px){
    header .boton_menu_navegacion p{
        font-size: 0.9rem;
        gap: 0.3rem;
    }
}