/* ----------------------------------------------------------

			MENÚ HORIZONTAL CSS ESCRITORIO

---------------------------------------------------------- */

.zona-menu {
	position: relative; background-color: var(--fa-fondoclaro); color: var(--fa-colormenu); padding: 15px 0;
}
ul.menhor{
	padding-inline-start: 0px; width:100%; text-transform:uppercase;letter-spacing: 0.5px;font-size:0.9375em; font-weight:bold; list-style:none; margin:0; text-transform:uppercase;
	display: flex; flex-direction: row;  justify-content: center; align-items: center; justify-content: space-between;
}
ul.menhor > li > a {
	color: var(--fa-colormenu);
}
ul.menhor > li > a.active {
	color: var(--fa-colormenu-active);
}
ul.menhor > li:hover > a {
	color: var(--fa-colormenu-active);
}
ul.menhor > li {
	position: relative; text-align: center; padding:0 5px;
}

/*submenú primer nivel*/
ul.menhor > li ul.tiene-submenu {
	position: absolute; left: 0; top: 100%; background-color: var(--fa-submenu-fondo); min-width: 230px; padding: 20px 0px!important; -webkit-transition: all .25s ease 0s; transition: all .25s ease 0s;
	opacity: 0; visibility: hidden; margin-top: 12px; border-radius: 4px; z-index: 100; border: 1px solid var(--fa-submenu-borde); -webkit-box-shadow: var(--fa-submenu-sombra); box-shadow:  var(--fa-submenu-sombra);
}
ul.menhor > li ul.tiene-submenu li {
	line-height: 1; display: flex; margin-bottom: 15px; position: relative;
}
ul.menhor > li ul.tiene-submenu li:last-child {
	margin-bottom: 0;
}
ul.menhor > li:hover ul.tiene-submenu {
	opacity: 1; visibility: visible; margin-top: 14px;
}
ul.menhor > li ul.tiene-submenu li a {
	font-size: 0.875em; font-weight:normal; color: var(--fa-colormenu); display: block; padding: 0 15px; line-height:1.25em; text-align:left;
}
ul.menhor > li ul.tiene-submenu li a:hover {
	color:  var(--fa-colormenu);
}
ul.menhor > li ul.tiene-submenu li:hover > a {
	color:  var(--fa-colormenu);
}
ul.menhor > li ul.tiene-submenu li > a.active {
	color:  var(--fa-colormenu);
}

/*submenú segundo nivel*/
ul.menhor > li ul.tiene-submenu li ul.sub-menu {position: absolute; left: 100%; top: -21px; background-color: var(--fa-submenu-fondo); width: 200px; padding: 20px 0px!important; -webkit-transition: all .25s ease 0s; transition: all .25s ease 0s;
  opacity: 0; visibility: hidden; border-radius: 4px; margin-top: 0px; border: 1px solid var(--fa-submenu-borde); -webkit-box-shadow: var(--fa-submenu-sombra); box-shadow: var(--fa-submenu-sombra);
}

/*segundo nivel ubicación (derecha o izquierda)*/
ul.menhor > li ul.tiene-submenu li ul.sub-menu.derecha {right:auto; left:100%}
ul.menhor > li ul.tiene-submenu li ul.sub-menu.izquierda {right: 100%; left:auto}

/*flechas en primer nivel*/
ul.menhor > li ul.tiene-submenu li.indicador-flecha.derecha:after,  ul.menhor > li ul.tiene-submenu li.indicador-flecha.izquierda:after{
	display: inline-block; position: absolute; content: "\203A";/*punta flecha derecha*/ right: 10px; top: 50%; line-height: 0; vertical-align: middle; font-size: 1em; color: var(--fa-colormenu);
}
/*ul.menhor > li ul.tiene-submenu li.indicador-flecha.derecha:after {content: "\203A";}punta flecha derecha*/
/*ul.menhor > li ul.tiene-submenu li.indicador-flecha.izquierda:after{content: "\2039";}punta flecha izquierda*/

/*submenú tercer nivel*/
ul.menhor > li ul.tiene-submenu li:hover ul.sub-menu {opacity: 1; visibility: visible; margin-top: 0px;}


/* ----------------------------------------------------------

				MENÚ VERTICAL TABLET / MÓVIL
	
---------------------------------------------------------- */


/*left*/
body {
	left: 0;
}
.menuvert-opened body {
	overflow: hidden;
}
.menuvert {
	right: auto;left: 0;
}

/*contenedor opciones logo*/
.zona-top-menuvert{
	padding: 12px 15px 0px 15px; position:relative;
}
.zona-top-menuvert.logotop.active{
	background: url(../images/flecha-abajo.svg) no-repeat right center;background-position: right 40px bottom 30%; cursor:pointer;
}
.zona-top-menuvert:hover.logotop.active, .zona-top-menuvert:hover.logotop.active{
	background: url(../images/flecha-abajo-activa.svg) no-repeat right center;background-position: right 40px bottom 30%;
}
.zona-top-menuvert img.logo{
	max-width:200px
}
.cerrar-menuvert{
	position:absolute; right:5px; top:5px; color:var(--fa-gris);
}
.zona-top-menuvert > label{
	color: var(--fa-colordest); font-size: 0.8125em
}

.zona-top-menuvert.logotop.nopadding{padding:0px;}
.zona-top-menuvert.logotop.nopadding.active{background-position: right 0px bottom 50%; background-size: 9px 5px; padding-right:20px !important}
.zona-top-menuvert:hover.logotop.nopadding.active, .zona-top-menuvert:hover.logotop.nopadding.active{background-position: right 0px bottom 50%; background-size: 9px 5px;}

.zona-top-menuvert.logotop .logotipo{max-width: 260px;}
.zona-top-menuvert.logotop .logotipo img{max-width: 240px;}
@media (max-width: 480px){
	.zona-top-menuvert.logotop .logotipo {max-width:180px;}
	.zona-top-menuvert.logotop .logotipo img{max-width:160px;}
}

@media (max-width: 340px){
	.zona-top-menuvert.logotop .logotipo {max-width:150px;}
	.zona-top-menuvert.logotop .logotipo img {max-width:130px;}
}


/*opciones top logo desplegable*/
.contenedor-logotop{
	min-height:40px; display:flex;
}
.contenedor-opcionestop{
	position:absolute;bottom:auto;left:0px;background: var(--fa-color-dark-75);padding:0px;width:100%;margin-top:15px;border: 1px solid var(--fa-color-dark-65); z-index:20;
}
.menuvert .contenedor-opcionestop {background-color:var(--fa-fondomenver); border:1px solid var(--fa-menver-borde);}

.contenedor-opcionestop::before {
	display: none;left: 16px; top: -8px; content: ""; z-index: 1; position: absolute; transform: translate(50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--fa-color-dark-65);
}/*triángulo sin bordes*/
.menuvert .contenedor-opcionestop::before {border-botom:8px solid var(--fa-menver-borde);}

.contenedor-opcionestop::after {
	content: ''; height: 10px; width: 10px; position: absolute; top: -6px; left: 28px; background-color: var(--fa-color-dark-75); border-top:1px solid var(--fa-color-dark-65); border-left:1px solid var(--fa-color-dark-65); transform: rotate(45deg);
}/*triángulo con bordes*/
.menuvert .contenedor-opcionestop::after {background-color: var(--fa-fondomenver); border-top:1px solid var(--fa-menver-borde); border-left:1px solid var(--fa-menver-borde);}

.contenedor-opcionestop ul{
	margin-bottom:0px;
}

header .contenedor-opcionestop {background: var(--fa-fondoweb); border: 1px solid var(--fa-color-borde); width: 290px;}
header .contenedor-opcionestop::after {background-color: var(--fa-fondoweb); border-top: 1px solid var(--fa-color-borde); border-left: 1px solid var(--fa-color-borde);}
header .ban-canal {background-color: var(--fa-fondoclaro); border: 1px solid var(--fa-color-borde);}
header .ban-canal .logocanal {padding: 0px; width: 110px;}
header .ban-canal.lock img.logocanal[src$="svg"] {filter: brightness(0) invert(0);}
.dark header .ban-canal.lock img.logocanal[src$="svg"] {filter: brightness(0) invert(1);}

/*sidenav*/
.menuvert{
	bottom:0; overflow:hidden; -webkit-overflow-scrolling:touch; overflow-y:auto; pointer-events:none; position:fixed; top:0; transform:translateX(-100%) translateZ(0px); z-index:1000;
}
.menuvert:not(.no-transition), .menuvert .submenu:not(.no-transition){
	transition:all 250ms;
}
.menuvert-overlay{
	background-color:rgba(0,0,0,.42); bottom:0; display:none; left:0; position:fixed; right:0; top:0; z-index:500;
}
.menuvert-opened .menuvert-overlay{
	display:block;
}
.menuvert.opened{
	pointer-events:auto; transform:translateX(0px) translateZ(0px);
}
.menuvert.submenu-opened{
	overflow:hidden;
}
.menuvert .submenu{
	bottom:0; min-height:100%; overflow:hidden; -webkit-overflow-scrolling:touch; overflow-y:auto; pointer-events:none; position:fixed; top:0; width:100%;
}
.menuvert .submenu.opened{
	left:0; pointer-events:auto; z-index:10
}
.menuvert .submenu.opened:not(.current){
	overflow:hidden;
}

/*MENÚ VERTICAL lista*/
.menuvert {background-color:var(--fa-fondomenver); color: var(--fa-color-unlock); width: 295px;}

.menuvert ul {
	list-style-type: none; padding: 0; padding-left: 0px; margin-top:0px; -webkit-overflow-scrolling: touch;
}
.menuvert ul > li {
	display: block;
}
.menuvert ul > li > a {
	color: inherit; display: block; font-size: 0.9375em; font-weight: bold; padding: 12px 35px 12px 15px; /*padding: 18px 20px;*/ text-decoration: none; transition: all 150ms;
	opacity:0.8;/*nuevo*/
}
.menuvert ul > li > a:hover {
	background-color: var(--fa-fondomenver); color:var(--fa-gris-claro);
}
.menuvert ul > li.active > a {
	background-color: var(--fa-fondomenver); color:var(--fa-gris-claro);
}
.menuvert ul > li.unlock > a{
	background-image: url("../images/aspa.svg"); background-position: right 10px center; background-repeat: no-repeat; color:var(--fa-color-unlock);
}
.menuvert ul > li.lock > a{
	background-image: url("../images/candado.svg"); background-position: right 15px center; background-repeat: no-repeat; color:var(--fa-color-lock);
}
.menuvert ul > li:not(:last-child) > a {
	border-bottom: 1px solid var(--fa-menver-borde);
}
.menuvert ul > li.has-submenu > a {
  background-image: url("../images/flecha-adelante.svg");
  background-position: right 15px center;
  background-repeat: no-repeat;
  background-size: 8px 14px;
}
.menuvert ul > li.has-submenu > a:hover {
	background-image: url("../images/flecha-adelante-activa.svg");
}

/* menuvertjs submenu styles */
.menuvert .submenu {
	background-color:var(--fa-fondomenver); left: 295px;
}
.menuvert .submenu-header {
	background-image: url("../images/flecha-atras.svg"); background-position: left 20px center; background-repeat: no-repeat; background-size: 8px 14px; border-bottom: solid 1px var(--fa-menver-borde); cursor: pointer; position: relative;
}
.menuvert .submenu-header > a {
	color: inherit; display: block; font-size: 0.9375em; font-weight: bold; padding: 18px 20px; padding-left: 40px; text-decoration: none;
}
.menuvert .submenu-header > a:before {
	background-image: url("../images/flecha-adelante.svg"); background-position: right 20px center; background-repeat: no-repeat; background-size: 8px 14px; content: ""; height: 100%; left: 26px; position: absolute; top: 0; transform: rotate(-180deg); width: 20px;
}
.menuvert .submenu > label {
	color: var(--fa-colordest);; display: block; font-size: 0.8125em; font-weight: normal; margin-bottom: 8px; margin-top: 19px; padding-left: 15px; width: 100%;
}

/*idioma*/
.menuidioma {display:none; top:29px !important}
.menuser {display:none;}