/*---------------- reset  ------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,fieldset,legend,caption,.filters ul li p,figure{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;line-height:normal;font-weight:normal;}  
html{height:100%;}  
body{font-family:Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased!important;line-height:1.54;color:#ced1d4; height:100%;font-size:11px;background:#1d203f;}  
ol,ul,li{list-style:none;font-weight:lighter;}  
clear,br{clear:both;}  
blockquote,q{quotes:none;}  
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}  
:focus{outline:0;}  
ins{text-decoration:none;}  
del{text-decoration:line-through;}  
table{border-collapse:collapse;border-spacing:0;}  
p{line-height:1.6em;}  
a{text-decoration:none!important;color:#777;font-weight:600;cursor:pointer;}  
button,#choTip,.callId,#choTipEva,.cPointer,#choTipEvaCol,.tablaPreg tr,#colPr,#mp{cursor:pointer;}  
strong,#forAjaTwo strong{font-weight:700;}  
header{position:fixed;width:100%; padding:5px 0; background:#333867!important; color:#fff; text-align:center; top:0;left:0;right:0; z-index:1000; height:69px;}  
#mediaplayer{display:flex;flex-direction:row;height:calc(100vh - 65px);padding-top:78px;overflow-y:auto;}  
.box-media{display:flex;flex-direction:column; box-sizing:border-box; border-right:1px solid #465085; height:85vh;}  
#mediaplayer form{flex:0 0 10%;display:flex;flex-direction:column;justify-content:center;gap:10px;}  
.mediaholder{background:#465085;padding:8px 10px;border:1px solid #465085;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; color:#fff}  
.mediaholder::placeholder{color:#aaa9a9;font-size:.8em;}  
#search-submit{background:#fff;color:#333766;font-weight:800;padding:10px;border-radius:4px;border:1px solid #fff;font-size:1.1em;letter-spacing:0.1px; text-transform: uppercase}  
#search-submit:hover{background:#eee;cursor:pointer;}  
.listado{flex:1;overflow-y:auto;border-top:1px solid #465085;padding:10px;box-sizing:border-box;} 
.listadoDos{flex:1;overflow-y:auto;border-top:1px solid #465085;padding:10px 0;box-sizing:border-box;}  
.listado ul, .listadoDos ul{list-style:none;margin:0;padding:0; transition: opacity 0.9s ease; }  
/* Estilo general para scrollbar vertical y horizontal */
#itinerario::-webkit-scrollbar,
.listadoDos ul::-webkit-scrollbar {
    width: 8px;   /* vertical */
    height: 8px;  /* horizontal */
}

#itinerario::-webkit-scrollbar-track,
.listadoDos ul::-webkit-scrollbar-track {
    background: #1d203f;
}

#itinerario::-webkit-scrollbar-thumb,
.listadoDos ul::-webkit-scrollbar-thumb {
    background-color: #265db4;
    border-radius: 4px;
}

#itinerario::-webkit-scrollbar-thumb:hover,
.listadoDos ul::-webkit-scrollbar-thumb:hover {
    background-color: #265db4;
}
.listado img{max-width:90px;margin-right:10px;}  
 .listadoDos img{max-width:50px; padding: 10px 0px 0 10px}  
.listado p{margin:2px 0;font-size:1em; text-transform: uppercase; color:#b3cce7; font-weight: 500;}  
.listadoDos p{margin:0px 0;font-size:1em; display: block; color:#b3cce7; font-weight:500}  
.listado li{display:flex;align-items:flex-start; border-bottom:1px solid #465085; padding-bottom:10px;}  
.listadoDos li{display: flex; align-items: flex-start;  border-bottom: 1px solid #465085; gap: 10px; background:#333766; border-top: 1px solid #1d213f; text-transform:uppercase}  
.listado span, .listadoDos span{flex:0 0 18%;display:flex;justify-content:center;align-items:center;} 
.listadoDos .active{background:#d8d8d8!important; border: 1px solid #465bc6;}
.listadoDos .active .mleft{background: url(../graphics/audio.gif) 96% 8% #465085 no-repeat!important; background-size: 30px!important;}
.listado span img{max-width:100%;height:auto;}  
.listadoDos span img{flex: 0 0 30%;  display: flex; justify-content: center;  align-items: center; }  
.listado em, .listadoDos em{font-style: normal; color:#fff; font-weight: 800;}
.mleft{flex:1;padding-left:0px;}  
.listadoDos .mleft { flex: 1;  display: flex; flex-direction: column;  gap: 0px; position: relative; padding-bottom:.75rem; padding-left:1rem;}
.listado::-webkit-scrollbar{width:8px;}  
.listado::-webkit-scrollbar-thumb{background:#888;border-radius:4px;}  
.listado::-webkit-scrollbar-thumb:hover{background:#555;}  
.listadoDos{display:flex;flex-direction:column;height:100%;}  
.redes{display:block;}
.redes a{float: left; padding:2px 0px 2px 3px;}
.redes b{float:left; line-height:24px; margin-right:3px;}
.icon{height: 13px; padding: 0px!important; margin: 2px 6px 2px 0;}
.listadoDos li:hover{background:#265db4;cursor:pointer;}  
.listadoDos strong{font-size:1.1em; padding:10px 0 4px;}  
.listadoDos b{font-size:1em;color:#fff;font-weight:bold;}  
.activeRadio{border-top:1px solid #ef6400!important;border-bottom:1px solid #ef6400!important;padding:10px 20px 8px 40px!important;background:url(../graphics/audio.png) 17px 12px #fff no-repeat;background-size:14px;}  
.activeRadio:hover{background:url(../graphics/audio.png) 17px 12px #fff no-repeat!important;background-size:14px!important;}  
.listadoDos .ubicacion{color:#666;display:block;padding:3px 0 0;font-size:1.1em;}  
.listadoDos::-webkit-scrollbar{width:8px;}  
.listadoDos::-webkit-scrollbar-thumb{background:#888;border-radius:4px;}  
.listadoDos::-webkit-scrollbar-thumb:hover{background:#555;}  
#media{height:19%;padding:10px;box-sizing:border-box; position:relative; -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;}  
#media h2 em{text-transform: capitalize; font-style: normal; color: #ffffff; font-size: 11px; font-weight: bold; padding: 5px 0 0; display:block}
#media h2 strong{color:#fff}
#itinerario{height:60%;overflow-y:hidden;box-sizing:border-box;  border: 1px solid #465085; transition: all 0.1s ease-in-out; }  
#itinerario:hover{overflow-y:auto; }
#itinerario tbody{background:#f9f9f9}
#itinerario table{width:100%;}
#itinerario th,#itinerario td{width:14%;}  
#itinerario tr{background:#333766}
#itinerario th{background: #465085; font-size: .6rem; color: #ced1d4; padding:8px 5px;}  
#itinerario td span{float:left;width:98%;padding:3px 1%;text-align:center;}  
#itinerario td span em{font-size:.75em;display:block;font-style:normal; font-weight: bold; text-transform: uppercase;  padding: 6px 0;}  
#itinerario td{border-bottom:1px solid #465085; vertical-align:top; border-right: 1px solid #465085;}  
#itinerario td span strong{font-size:.75em;display:block; padding: 6px 0 0; line-height: 12px; text-transform: uppercase}  
#itinerario p{font-size:.75em; line-height:12px; font-weight:bold; text-transform: uppercase;  padding-bottom: 5px; color:#fff}
.musical{background:#E2F4FF;}  
.noticiero{background:#F8CBAD;}  
#map{height:20%;padding:10px;box-sizing:border-box;border:1px solid #465085;}  
#map h2{padding-bottom:10px;}
#map iframe{width:100%;height:100%;}  
.listado::-moz-scrollbar{width:8px;}  
.listado::-moz-scrollbar-thumb{background:#888;border-radius:4px;}  
.listado::-moz-scrollbar-thumb:hover{background:#555;} 
.mleft h3{font-size:1.2em; font-weight:bold; margin-bottom:6px;}
.listado li{padding:20px; transition:background-color 0.3s ease; cursor:pointer}
.listado li:hover{background:#265db4;}
#media h2{font-weight:600;font-size:1.1em;text-transform:uppercase; color:#ced8e5;}  
.listado strong{font-weight:600;font-size:1.2em;text-transform:uppercase; padding-bottom:20px; display:block; padding:0 20px 10px 20px}  
.listadoDos h2{padding: 0.5rem 0 0.5rem 2rem; height: 19px; background: url(../graphics/bullets.png) 10px 9px no-repeat!important; background-size: 3px!important;}  
.tercero h2{padding: 0.5rem 0 0.5rem 1rem; height: 40px; background-size: 17px!important; padding-left:2px;} 
.tercero h2 svg {
  width: 16px;
  height: 16px;
  vertical-align: middle; /* opcional para alinear mejor con el texto */
  margin-right: .25rem;       /* espacio entre el ícono y el texto */
}


.primero{ width:24%; margin:1% 1% .5% 1%; background: #323766; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;}
.segundo{width:24%; margin:1% 1% .5% .0%; background: #323766; border-radius:8px;  -moz-border-radius:8px; -webkit-border-radius:8px}
.tercero{width:48.1%; margin:1% .0% .5% .0%; background:#323766; border-radius: 8px;  -moz-border-radius:8px; -webkit-border-radius:8px; padding:10px;}
.box-media form{padding:20px;}  
.box-media .listado{padding:20px 0;}  
.paddingSide{padding:0 1.5rem;}  
.paddingBottom{padding-bottom:12px;}  
#player{height:43px;border-radius:7px;color:#ccc;padding:0 10px 10px 10px; position: relative}
.active{background:#465085}
.bckBlack{background:#302f2f;}
.box-media h1{background: url(../graphics/bullets.png) 2px 12px no-repeat!important; background-size: 3px!important; padding:0.5rem 1rem; height: 19px;}

/* Sobrescribir estilos con más especificidad */
.plyr--audio .plyr__controls {
    background-color: #070707 !important;
    box-shadow: -1px 0px 23px #000;
    border: 1px solid #3b3b3b;
    border-radius: 8px!important;
}

.plyr--audio {
    background-color: #070707 !important; /* Fondo negro */
    color: #fff !important; /* Texto blanco */
}

.plyr__progress__buffer, .plyr__progress__filled {
    background-color: #1DB954 !important; /* Verde para progreso */
}

.plyr__controls button:hover {
    color: #1DB954 !important; /* Cambiar color de botones al hover */
}
.hidden {
    display: none!important;
}


#play-visual{    position: absolute; left:49px;
    top: 24%;
    width: 58%!important;
    max-width: 400px!important;
    margin: 0 auto!important;
    height: 29px;}
    
#pause-visual {
    position: absolute;
    left:49px;
    top: 24%;
    width: 57%!important;
    max-width: 400px!important;
    margin: 0 auto!important;
    height: 29px;
}
.gm-ui-hover-effect{display: none!important}


#pause-visual.hidden {
    display: none !important;
}




/* Cambiar color de todos los íconos a blanco */
.plyr__controls button { color: #fff !important; /* Blanco */}
.plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
    background: #00b2ff;
    background: var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
    color: #fff;
    color: var(--plyr-audio-control-color-hover,#fff);
}

.plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true]{background:#555!important;}

.plyr__controls .plyr__controls__item:first-child {
    margin-left: 0;
    margin-right: auto;
}
.plyr__controls button[data-plyr="play"], .plyr__controls button[data-plyr="pause"] {
    color: #fff !important;
}
.plyr__controls button:hover {
    color: #00b2ff !important;
}
/* Cambiar el color de los íconos de volumen y mute */
.plyr__volume button {
    color: #fff !important;
}

/* Cambiar el color del ícono de progreso */
.plyr__progress__container .plyr__progress {
    background-color: #fff !important;
}

/* Cambiar el color de los botones de reproducción y pausa */
.plyr__control[data-plyr="play"]{
    color: #fff !important; /* Blanco */
    border-radius: 83px!important;
    padding-left:9px!important;
    background: #6a6969!important;
    border: 2px solid #82878d!important;
    width: 36px!important;
}

.plyr__control--pressed[data-plyr="play"]{
    color: #fff !important; /* Blanco */
    border-radius: 83px!important;
    padding-left: 8px!important;
    background: #04b2fd!important;
    border: 2px solid #04b2fd!important;
    width: 37px!important;
}

/* Cambiar el color del botón de tiempo */
.plyr__time {
    color: #fff !important;
}

/* Cambiar el color del texto de progreso */
.plyr__progress__buffer,
.plyr__progress__filled {
    background-color: #fff !important;
}
#autocomplete-list {
    float: left;
    background-color: #333766;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0.75rem 0;
    margin: 0px 0 0;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    font-weight: bold;
}

#autocomplete-list li {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight:600
}

#autocomplete-list li:hover {
    background-color: #465085;
}

.listadoDos ul{overflow-y:auto;box-sizing:border-box; transition: all 0.9s ease; }
/* Scrollbars para listado */
.listadoDos ul::-webkit-scrollbar {
    width: 8px; /* Ancho del scrollbar */
    height: 8px; /* Altura del scrollbar horizontal */
    background-color: #f9f9f9;
    opacity: 1; /* Mostrar contenido */
    pointer-events: auto; /* Habilitar interacción */
    
}

.listado::-webkit-scrollbar-thumb,
.listadoDos ul::-webkit-scrollbar-thumb,
#itinerario td div{padding:10px 5px}
#itinerario td div strong{ width: 100%; float: left; text-transform: uppercase; font-size: .65rem; line-height: 13px; margin-bottom: 6px;}
#itinerario td div em{font-size: .7rem; font-weight: bold; font-style: normal;}

/* Estilos para Firefox */
.listado,
.listadoDos ul,
#itinerario {
    scrollbar-width: thin; /* Grosor de la barra */
    scrollbar-color: #fafafa #cccc; /* Color de la barra y del track */
    scrollbar-gutter: stable;
    transition: all 0.9s ease; 
}

/* Esquinas Transparentes */
.listado::-webkit-scrollbar-corner,
.listadoDos ul::-webkit-scrollbar-corner,
#itinerario::-webkit-scrollbar-corner {
    background: transparent;
}

.musical { background-color: #e5f5ff; }
.noticiero { background-color: #f4dccd; }
.deportes { background-color: #eefaf0; }
.entrevistas { background-color: #F4E2E2; }

.semana-container {
        display: flex;
        justify-content: space-between;
        gap:2px;
    }
    .semana-container h6{font-size: .6rem; padding:5px 0 5px 5px; font-weight:bold}
    
    .dia-container {
        width: 12.4%; 
        background-color: #f5f5f5;
        padding:2px  5px;
        border-radius: 4px;
        font-size:.6rem
    }
    .dia-container em{font-weight:600; font-style: normal; margin-top:6px; display:block}
    
    .dia-container strong {
        display: block;
        font-weight: bold;
        font-size:.55rem;
        color:#333;
         text-transform: uppercase;
         height:28px;
         line-height:13px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .programa {
        padding: 5px;
        margin-bottom:5px;
        border-radius:3px;
        color: #0a0a0a9c;
    }
    
    .programa p{
	    font-size:.55rem!important;
	    font-weight:bold;
    }

    .sinPrograma {
        display: none !important; /* 🔥 Oculta completamente los programas vacíos */
    }