/* ########## VISTA PARA ESCRITORIO ########## */

#contenedor_programacion{
    width: 100%;
    height: 7vh;
    position: relative;
    z-index: 9;
    padding: 0% 0% 0% 0%;
    margin: 0px auto 0vh auto;
    background-color: rgba(0, 0, 0, 0.75);
}

         #barra-progreso {
            background-color: #ffffff;
            margin: auto;
            top: 0px;
            width: 100%;
            height: 7px;
            box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
            background-color: rgba(252,252,252,0);
            z-index: 9;
            position: relative;
            border-radius: 50em;
            backdrop-filter: blur(6px) saturate(150%);
            -webkit-backdrop-filter: blur(6px) saturate(150%);
            }

                .progress-fill {
                    height: 7px;
                    background-color: rgba(252,252,252,0.5);
                    transition: width 3s ease;
                    position: relative;
                    border-radius: 50em;
                    }

                        .progress-fill::after {
                            content: "";
                            width: 14px;
                            height: 14px;
                            background-color: #FFFFFF; /* Color del círculo */
                            top: 50%;
                            transform: translateY(-50%);
                            right: -7px;
                            border-radius: 50%; /* Círculo perfecto */
                            transition: right 3s ease; /* Animación de movimiento del círculo */
                            z-index: 9;
                            position: absolute;
                            overflow-x: hidden;
                            }

        #programacion {
            width: 70%;
            max-width: 768px;
            height: 8vh;
            font-size: 1em;
            display: flex;
            align-items: center;
            margin: -7px auto;
            padding: auto;
            /*box-sizing: border-box; /* Evita que el padding expanda el div */
        }

                #horaActual, #horaProximo {
                    width: 60px;
                    text-align: center;
                    color: #FFFFFF;
                    font-family: poppins;
                    font-weight: 600;
                }

                #ahora {
                    display: none;
                }

                #programaActual, #programaProximo {
                    flex: 1;
                    text-align: left;
                    line-height: 1;
                    color: #FFFFFF;
                    font-family: poppins;
                    font-weight: 600;
                    }

/* ########## VISTA PARA SMARTPHONE ########## */

@media (max-width: 768px) {
    
#contenedor_programacion{
    width: 100%;
    margin: 0px auto 0vh auto;
    height: 7vh;
    padding: 0px 0px 0px 0px;
    z-index: 9;
    position: relative;
    }
    
        #barra-progreso {
            display: block;
            height: 5px;
            margin: auto;
            position: relative;
            top: -0px
            }

                .progress-fill {
                    height: 5px;
                    background-image: #FE330A;
                    transition: width 3s ease;
                    z-index: 9;
                    }

                        .progress-fill::after {
                            content: "";
                            width: 10px;
                            height: 10px;
                            background-color: white; /* Color del círculo */
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            right: -6.5px;
                            border-radius: 50%; /* Círculo perfecto */
                            transition: right 3s ease; /* Animación de movimiento del círculo */
                            overflow-x: hidden;
                            }

        #programacion {
            width: 95%;
            font-size: 0.8em;
            padding: 0px 0px 0px 0px;
            height: 100%;
            color: #FFFFFF;
            margin-top: -2px;

            }
    
                #ahora {
                    display: none;
                    }

                #horaActual, #horaProximo {
                    font-size: 1.1em;
                    font-weight: 600;
                     }
        
                #programaActual, #programaProximo {
                    flex: 1;
                    text-align: left;
                    line-height: 1.3;
                    color: #ffffff;
                    font-family: poppins;
                    font-weight: 500;
                    }
    
}