/*CONTENEDOR SUPERIOR*/
.contenido_superior_total{
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    left: 0;
    width: 100% !important;
    background-color: var(--fondo);
    z-index: 10;
    margin: 1em 0;
    transition: background-color 1s;
}
#body.select_modo_noche .contenido_superior_total{
    background-color: var(--fondo_noche);
    transition: background-color 1s;
}
.contenido_superior{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 80em;
    padding: .5em;
}
    /*LOGO */
    .contenido_superior_logo{
        margin-right: 1.5em;
    }
        .contenido_superior_logo .logo{
            width: 4em;
        }
    /*BUSQUEDA*/
    .contenido_superior_busqueda{
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 25em;
    }
        .contenedor_busqueda_fondo{
            background: var(--color_componentes);
            padding-left: .6em;
            border-radius: .8em;
            width: 100%;
            display: flex;
            align-items: center;
        }
            .txt_busqueda{
                margin-left: .5em;
                height: 2.7em;
                border: none;
                margin-right: 1em;
                background: transparent;
                color:black;
                width: calc(100% - 4em);
                transition: color 1s;
            }
            #body.select_modo_noche .txt_busqueda{
                color: white;
                transition: color 1s;
            }
            .txt_busqueda:focus{
              outline: none;
            }

            .icon_busqueda{
                /* color: rgba(0, 0, 0, .5); */
                cursor: pointer;
                width: 1.7em;
                height: 1.7em;
                margin-top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: .6em;
                background-color: transparent;
                transition: background-color .4s;
            }
            .icon_busqueda:hover{
                background-color: var(--color_principal_3);
            }
    /*ICONO */
    .contenido_superior_opciones{
        display: flex;
    }
        .fondo_opciones{
            margin-left: 1em;
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: .5em .6em;
            border-radius: .8em;
            border: 1px;
            border-style: dashed;
            border-color: transparent;
            transition: background-color .5s, border-color .5s;
        }
        .fondo_opciones:hover{
            border-color: var(--color_principal);
            background-color: var(--color_componentes);
        }
            .icon_opciones{
                /* color: rgba(0, 0, 0, .5); */
            }
            .lbl_num_info{
                margin-left: .5em;
                font-size: .8em;
                color: rgba(0, 0, 0, .5);
                cursor: pointer;
            }
            #body.select_modo_noche .lbl_num_info{
                color: rgba(255, 255, 255, .5);
            }
                .cont_fondo_modo_view{
                    display: flex;
                    align-items: center;
                    padding: .5em;
                    background-color: var(--color_warning_1);
                    border-radius: 1em;
                    position: relative;
                    width: 3em;
                    height: .8em;
                    cursor: pointer;
                }
                    .cont_fondo_modo_view_icon{
                        color: white;
                        display: flex;
                        justify-content: center;
                        position: absolute;
                        transform: scale(0);
                    }
                    .cont_fondo_modo_view_boton{
                        width: 1.5em;
                        height: 1em;
                        border-radius: 100%;
                        background-color: white;
                        position: absolute;
                        left:0;
                        top: 0;
                        margin-top: .15em;
                    }
                    .icon_modo_dia{
                        left: 0;
                        margin-left: .7em;
                    }
                    .icon_modo_noche{
                        right: 0;
                        margin-right: .7em;
                    }
                .cont_fondo_modo_view.select_modo_dia{
                    background-color: #FE4E58;
                }
                .cont_fondo_modo_view.select_modo_dia .icon_modo_dia{
                    animation: animation_modo_dia_icono;
                    animation-duration: .5s;
                    animation-delay: .2s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                }
                .cont_fondo_modo_view.select_modo_dia .cont_fondo_modo_view_boton{
                    animation: animation_modo_dia_boton;
                    animation-duration: .4s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                }

                @keyframes animation_modo_dia_icono{
                    0%{
                        transform: scale(0);
                    }
                    100%{
                        transform: scale(1);
                    }
                }
                @keyframes animation_modo_dia_boton{
                    0%{
                        margin-left: .3em;
                        height: 1.5em;
                    }
                    50%{
                        margin-top: .5em;
                        height: 1em;
                    }
                    100%{
                        margin-left: calc(100% - 1.75em);
                        height: 1.5em;
                    }
                }

                .cont_fondo_modo_view.select_modo_noche{
                    background-color: #507CD6;
                }
                .cont_fondo_modo_view.select_modo_noche .icon_modo_noche{
                    animation: animation_modo_noche_icono;
                    animation-duration: .5s;
                    animation-delay: .2s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                }
                .cont_fondo_modo_view.select_modo_noche .cont_fondo_modo_view_boton{
                    animation: animation_modo_noche_boton;
                    animation-duration: .4s;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                }
                @keyframes animation_modo_noche_icono{
                    0%{
                        transform: scale(0);
                    }
                    100%{
                        transform: scale(1);
                    }
                }
                @keyframes animation_modo_noche_boton{
                    0%{
                        margin-left: calc(100% - 1.7em);
                        height: 1.5em;
                    }
                    50%{
                        margin-top: .35em;
                        height: 1em;
                    }
                    100%{
                        margin-left: .2em;
                        height: 1.5em;
                    }
                }