/*===============================================*/
/*==== documento para los estilos el menú el ====*/
/*====              sistema                  ====*/
/*===============================================*/
.list-unstyled.menuCont{

  padding-left:0;
 list-style:none;
 background:#343A7E;
}

.navbar-lateral.full-reset .container-menu-movile{

background:#343A7E;

}

.img{
width: 50%;
margin-left: 4.5rem;
}


.nav-lateral-list-menu ul li div:hover{
 transition: 1s all;
}
.nav-lateral-list-menu ul li div:hover{
  background-color: var(--texto_cabezera);
  transition:  1s all;
}

/*========= icono de menú =============*/
div.menu{
  position: absolute;
  left: 1.3rem;
  top: 1.3rem;
  z-index: 5000;
  width: 3.5rem;
  display: flex;
  align-items: center;
}

/* Botón */
div.menu button.menu_icon{
  position: relative;
  width: 3.5rem;
  height: 1.3rem;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* Líneas del icono */
div.menu button.menu_icon > span.div{
  position: absolute;
  left: 0;
  width: 60%;
  height: 0.13rem;
  background: var(--texto_cabezera);
  border-radius: 3rem;
  transition: transform .4s ease, opacity .4s ease, background .2s ease;
  transform-origin: center center;
}

/* Posición inicial: tres líneas */
div.menu button.menu_icon > span.div:nth-child(1){
  top: 0;
}

div.menu button.menu_icon > span.div:nth-child(2){
  top: 50%;
  width: 59%;
  transform: translateY(-50%);
}

div.menu button.menu_icon > span.div:nth-child(3){
  bottom: 0;
}

/* Hover */
div.menu:hover > button.menu_icon span.div{
  background: var(--texto_hover_cabezera);
}

/* Estado activo: convertir en X */
div.menu button.menu_icon.active > span.div:first-child{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

div.menu button.menu_icon.active > span.div:nth-child(2){
  opacity: 0;
}

div.menu button.menu_icon.active > span.div:last-child{
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Tooltip opcional */
div.menu .toolti{
 position: absolute;
	left: .5rem!important;
	top: 2.5rem!important;
  margin-left: 0.5rem;
  color: var(--texto_cabezera);
  font-size: 0.85rem;
}
/*menu del sistemma*/

.nav-list a {  
    color: var(--colorText);  
    text-decoration: none;  
    transition: color 0.3s;  
}  

.navH{
	display: block;
	border-right: solid 2px var(--boderCabezera);
    width: 250px; 
    overflow: hidden;
    overflow-y: auto;
	height: 100vh;
	position: fixed; /* Fijo a la ventana */
	top: 4rem;
	left: -500px;
	z-index: 1000;
	transition: all .7s;


}

div.contenImg{
display: flex;
overflow: hidden;
height: 10rem;
background: var(--fondo);
border-bottom: #777 solid 1px;
justify-content: center;
align-items: center;
padding-bottom: 6rem;
position: sticky;
top: 0rem;
z-index: 5000;
}

div.contenImg img{
width: 250px;
height: 250px;
position: relative;
top: 6rem;
}



.nav-list > li {
    position: relative; /* Para posicionar el submenú */
    background-color: var(--fondo); /* Rellena el li para que no queden huecos entre opciones */
}

.nav-list > li > a {
    display: block; /* Hace que el enlace ocupe todo el ancho del elemento */
    padding: 15px; /* Espaciado interno */
    text-decoration: none; /* Quita el subrayado */
    color: white; /* Color del texto */
    background-color: var(--fondo); /* Color de fondo del menú */
    color: var(--colorText);
    transition: background-color 0.3s; /* Transición suave */

}

 .navH.active { 
  
        left: 0rem;
		background: var(--cabezera);
        transition: all 1s;
		cursor: default;
		transition: all 1s;
    
		
}
		
 .navH.active::before {
    content: "";
    position: fixed; /* para ocupar toda la pantalla */
    top: 60px; /* altura de la cabecera para no taparla */
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background: #0005; /* fondo negro o el color de sombra deseado */
    z-index: -20; /* detrás del .navH.active */
    pointer-events: none; /* para que no interfiera con eventos */
    transition: all 1s;
}





  .navH.active ul {
	padding-left: 1.5rem; 
     

 }

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

/*===================================*/
/*============  Tooltip =============*/
/*===================================*/
span.toolti{
    cursor: pointer;
	position: absolute;
    z-index: 1000;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	white-space: nowrap;
	padding: 10px 15px;
	border-radius: 7px;
	display: none;
	font-size: 16px;
	transition-duration: all 1s;

}

span.toolti::before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	border: solid 15px;
	border-color: #3330 #3330 #333 #3330

}

a:hover~span.toolti, button.menu_icon:hover~span.toolti, div.salir ul li:hover > a~span.toolti{
	top:100%;
	display: block;
}
 

a:hover~span.toolti{
	top:100%;
	
}


a{
  position: relative;
    
} 

a button:hover~span.toolti{
    
    top: 250%;
    left: 2rem;
    display: block;
    
} 

 button.menu_icon:hover~span.toolti{
	top:2%;
	left: 190%;
    z-index: 20000;
	
}
/*=======================================*/
/*==== Notificaciones icono y alertas ===*/
/*=======================================*/

div.conten_notinc {
  background: #333;
}


div.conten_notinc i{
  display: none;
  color: #fff;
  font-size: 1.7rem!important;
  position: absolute;
  right: .5%;
  top: 1rem;
  z-index: 10000;
  cursor: pointer;

}

div.conten_notinc i .contador_notinc {
  background: #e43232;
  padding: 0;
  color: #fff;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  position: absolute;
  right: .7rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  top: -1rem;
  z-index: 10000000;
  cursor: pointer;
  transform: scale(.62);
  
}