/*CSS*/


/******* DATE BUTTONS ****/

.change-date-dashboard-separator{
	border-left:1px solid #dedede;
	width:1px;
	height:100%;
}


/****** LOADING SPINNER INIT ******/
.loader {
	display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}
.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
	0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
	25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
	50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
	75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
	100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}




/************ LOADING FIELDS SHINE **********/


	.loadingbg{background:#ececec;display: block;width:100%;position: relative;overflow: hidden;}
	/* Brillo animado */
	.loading-shine {
		position: absolute;
		top: 0;
		left: -100%;             /* Inicia fuera de la vista a la izquierda */
		width: 100%;             /* Ancho del brillo */
		height: 100%;            /* Alto del brillo */
		background: linear-gradient(
			120deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 1) 50%,
			rgba(255, 255, 255, 0) 100%
		);                       /* Degradado que crea el efecto de brillo */
		animation: shine 2s infinite; /* Animación continua */
	}
	
	/* Definición de la animación */
	@keyframes shine {
		from {
			left: -100%; /* Inicia a la izquierda del contenedor */
		}
		to {
			left: 100%;  /* Termina fuera del contenedor, a la derecha */
		}
	}
	




/**** STYLES ***/





	.first-letter-capitalize::first-letter{  text-transform: uppercase;  }
	.capitalize{text-transform:capitalize;}
	a{text-decoration: none!important;}
	a.color{
		color:#D62B54!important;
	}
	a.color:hover{
		opacity: 0.4!important;
	}
	a.underline{text-decoration:underline!important;}
}
	a.underline-hover:hover{
		text-decoration:underline!important;
	}
	.login-container {
	  padding: 20px;
	  max-width:400px;
	  min-width:90%;
	}
	.login-logo {
	  width: 200px;
	  margin-bottom: 30px;
	}
	
	.rounded-4px {
	  border-radius: 4px;
	}
	.login-button {
	  background-color: #D62B54!important;
	  color: #fff!important;
	  border-radius: 4px!important;
	  transition: background-color .3s; 
	  cursor: pointer!important;
	}
	.login-button:hover{
		background-color:rgba(214,43,84,0.4)!important;
		color: #fff;
	}
	
	.shadow-input{
		-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
		box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
	}
	.form-control{
		padding:0.75rem!important;
	}
	.login-button{
		padding:0.75rem!important;
	}
	.fs-7{font-size:0.9rem;}
	.fs-8{font-size:0.7rem;}
	
	/* Parte derecha del contenido */
	#content {
		width: calc(100vw);
	  margin-left: 0px; /* Compensar el ancho del sidebar */
	  padding: 0px;
	  min-height: 100vh; /* La parte derecha crece según el contenido */
	  background-color:#F0F4F7;
	  
	}
	
	
	
	/* MENU PRINCIPAL*/
	
	#sidebar.closed {
		left:100vw!important;
	}
	
	#sidebar {
	  width: 100%;
	  height: 100vh;
	  position: fixed;
	  top: 0;
	  left: 0;
	  padding-top: 20px;
	  overflow-y: auto;
	  border-right:	1px solid #efefef;
	  background:#ffffff;
	  z-index:9990;
	  transition: left 0.3s;
	}
	
	#sidebar .nav {
		padding:0px 20px;
	}
	#sidebar .nav-link {
	  color: #93a5bB;
	  padding: 15px 0px 15px 10px;
	  border-radius: 4px;
	  display: flex;
	  align-items: center;
	  cursor:pointer;
	  font-size:1.2rem;
	}
	
	#sidebar .nav-link i {
	  margin-right: 15px;
	  font-size:1.2rem;
	}
	
	#sidebar .nav-link:hover {
		color:#31383E;
		background-color:#efefef;
		border-radius:4px;
	}
	
	#sidebar .nav-link.active {
		/*color: #D62B54;*/
	/*	background-color:#00efef;
		border-radius:4px;*/
	}
	
	#sidebar .logo-container {
	  text-align: center;
	  margin-bottom: 20px; /* Separación debajo del logo */
	}
	
	#sidebar .logo {
	  max-width: 130px;
	  height: auto; /* Mantiene la proporción del logo */
	}
	
	#sidebar .employee-info {
	  display: flex;
	  align-items: center;
	  padding: 10px 20px 10px 30px;
	}
	#sidebar .divider{
		border-bottom: 1px solid #C2C9CF; /* Separador debajo */
		width:calc(100% - 60px);
		margin-left:30px;
		margin-top:20px;
		margin-bottom:20px;
	}
	#sidebar .employee-photo {
	  width: 30px;
	  height: 30px;
	  border-radius: 50%;
	  margin-right: 15px;
	  border: 2px solid #31383E;
	  background:#e5e9eC;
	  
	}
	
	#sidebar .employee-name {
	  font-size: 14px;
	  color: #93a5bB;
	  text-transform: capitalize;
	}
	#sidebar .employee-icon {
	  font-size: 14px;
	  color: #31383E;
	}
	#sidebar .chevron-icon {
	  font-size: 12px;
	  margin-left: 8px; /* Espacio entre el nombre y el icono */
	  color: #93a5bB;
	}
	#sidebar .name-dropdown {
	  position: relative;
	  cursor: pointer;
	}
	/* Menú desplegable oculto */
	#sidebar .dropdown-menu {
	  display: none; /* Oculto por defecto */
	  position: absolute;
	  top: 100%;
	  left: 0;
	  background-color: #31383E;
	  padding: 10px;
	  border-radius: 4px;
	  list-style: none;
	  margin: 0;
	  width: 150px;
	}
	
	#sidebar .dropdown-menu li {
	  margin-bottom: 10px;
	  padding-left:5px;
	}
	#sidebar .dropdown-menu li:hover {
	  margin-bottom: 10px;
	  background:#C2C9CF;
	  border-radius:4px;
	}
	#sidebar .dropdown-menu li:hover > a{
	  color:#31383E;
	
	}
	
	#sidebar .dropdown-menu li:last-child {
	  margin-bottom: 0;
	}
	
	#sidebar .dropdown-menu a {
	  color: white;
	  text-decoration: none;
	  font-size:14px;
	}
	
	#sidebar .dropdown-menu a:hover {
	  color:#31383E;
	
	}
	
	/* Mostrar el menú al hacer hover sobre el nombre o el chevron */
	#sidebar .name-dropdown:hover .dropdown-menu {
	  display: block;
	}
	
	/* Logout Container */
	#sidebar .logout-container {
	  margin-top: 10px; /* Espacio encima del logout */
	  padding:0 20px 0 30px;
	}
	
	#sidebar .logout-link {
	  display: flex;
	  align-items: center;
	  color: #93a5bB;
	  font-size: 14px;
	  text-decoration: none;
	}
	
	#sidebar .logout-link:hover {
	  text-decoration: underline!important;
	  color: #31383E;
	
	}
	
	#sidebar .logout-icon {
	  margin-left: 8px; /* Espacio entre el texto y el icono */
	  font-size: 12px;
	}
	
	
	
	/* Barra fija en la parte superior derecha */
		#topbar {
		  border-bottom:1px solid #efefef;
		  position: sticky;
		  top: 0;
		  width: calc(100vw);
		  overflow:hidden;
		  height: 60px;
		  display: flex;
		  align-items: center;
		  justify-content: left;
		  z-index: 999;
		  margin-top: -50px; /* Quitar márgenes */
		  margin-left: 0px;
		  padding: 0; /* Quitar padding */
		  box-sizing: border-box; /* Asegurarse de que el ancho y alto incluyan el padding */
		 background-color:#F0F4F7;
		}
		#topbar a:nth-child(1) {
			margin: 0 30px 0 60px;
		}
		#topbar a {
		  margin: 0 30px;
		  color: #93a5bB;
		  text-decoration: none;
		  font-size:13px;
		  letter-spacing: 0.2px;
		  font-weight:500;
		  height:60px;
		  line-height:60px;
		}
		#topbar a:hover , #topbar a.active {
		  color: #31383E;
		  border-bottom:2px solid #D62B54; 
		}
		#topbar a.active {
			font-weight: bold;
		}
		
		#topbar a:hover {
		  text-decoration: underline;
		}
		#dashboard{
			padding-top:60px;
		}
		#dashboard .area{
			background-color:#ffffff;
			border-radius:8px;
			padding:20px;
			height:100%;
		}
		#dashboard .area .check{
			color:green;
			font-size:20px;
			margin-right:15px;
		}
		#dashboard .indicador-updown i{
			font-size:32px;
		}
		#dashboard .indicador-updown h6{
			font-size:24px;
			margin-left:15px;
			margin-bottom:0px;
			color:green;
		}
		#dashboard .indicador-updown h6.up{
	
			color:green;
		}
		#dashboard .indicador-updown h6.down{
			color:red;
		}
		#dashboard .indicador-updown i.up{
			color:green;
		}
		#dashboard .indicador-updown i.down{
			color:red;
		}
		.arrow-move-hover{
			transition: all 0.3s;
				cursor:pointer;
				width:20px;
		}
		.arrow-move-hover:hover{
			width:30px;
		}
		
		
		.link-area{
			text-decoration:none;
			color:#8395aB;
			cursor:pointer;
			transition:all 0.3s;
			background-color:rgba(131, 149, 171, 0);
			padding:2px 5px;
		}
		.link-area:hover{
			background-color:rgba(131, 149, 171, 0.21);
			border-radius:4px;
			
			
		}
		.bottom-separator{
			border-bottom:1px solid #E9EEF2;
		}
		.list-rows p{margin:0px!important;}
		.list-rows .row{height:40px;line-height:20px;display:flex;align-items:center;}
		
		.row-hover{
			cursor:pointer;
		}
		.row-hover:hover{
			background-color:rgba(214, 43, 84, 0.1);
		}
		.width-100{width:100%;}
		/****** CHARTS *****/
		.chart-bar-integrated{
			height:100%;top:0px;left:0px;
			
		}
	/***** BOTÓN VOLVER ******/
	.back-button{
		padding:4px 10px;
		background: #ffffff;
		border:2px solid #ffffff;
		border-radius:4px;
	}
	
	/***** BARRA DAY-MTD-YTD-CUSTOM ****/
	
	
	.datebar{
		
		border-radius:4px;
		display: inline-flex;
		flex-direction:row;
		border-radius:8px;
		
		
	}
	.datebar .cuadro{
		cursor:pointer;
	}
	.datebar .cuadro.small{
		padding:2px 6px;
		background: #efefef;
		border:2px solid #efefef;
	}
	.datebar .cuadro.big{
		padding:4px 10px;
		background: #ffffff;
		border:2px solid #ffffff;

	}

	.datebar .cuadro:first-child{border-radius:4px 0 0 4px;}
	.datebar .cuadro:last-child{border-radius: 0 4px 4px 0;}

	.datebar .cuadro:hover:not(.selected){
		/*border:2px solid #D62B54;*/
		border:2px solid #565656;
		background: #565656;
		color:#ffffff;

	}
	
	.datebar .cuadro.selected{
		border:2px solid #D62B54;
	}
	
	
	/***** FINDER *****/
	
	.finder-bar{
		display: inline-flex;
		flex-direction:row;
	}
	
	.finder-bar .finder-input{
		padding:4px 10px;
		background: #ffffff;
		border:2px solid #ffffff;
		border-radius:8px;

	}
	
	.finder-bar .finder-input input{
		padding:4px 10px;
		background: #ffffff;
		border:2px solid #ffffff;
		opacity: 0;
	}
	
	.finder-bar .finder-input {
		border-radius: 8px!important;
	  padding:0.75rem!important;
	  font-size:14px!important;
		/*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);*/
		background-color:#efefef!important;
	  }
	.finder-bar  .finder-select {
		
		border:0px solid #ffffff;
		font-size:14px!important;
		width:100%;
		padding:0px;
		/* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);*/
	  }
	.finder-bar  .finder-label {
		font-weight: bold!important;
	  }
	.finder-bar  .finder-select-container{padding:4px 10px;background: #ffffff;
		border:2px solid #ffffff;
		border-radius:8px;}
	
	
	
	/************* BLOCK HEADER DATA ******/
	
	
	.header-data{
		line-height:16px;
	}
	.l-height-16{
		line-height:16px;
	}
	/************** FOOTER **************/
	body .footer{
		  background:#ffffff;max-width: 480px;position:fixed;bottom:0px;height:90px;width:100%;z-index:9991;border-top:1px solid rgba(118,147,171,0.7);left:0px;
	  }
	  body .footer a{ 
		  /*color: rgba(118,147,171,0.9)!important; */
		  color: rgba(118,147,171,0.9)!important;
		  
	  }
	  
	  body .footer .menu-footer{
		  height:80px;display: flex;justify-content: center;align-items: center;
	  }
	  
	  body .footer .menu-footer .button-footer{
		  height:100%;font-size:24px;color:#000000;text-align:center;line-height:24px; display: flex;align-items: center; justify-content: center;color:#ffffff;
	  }
	  body .footer .menu-footer .button-footer a{
		  color:#93a5bB)!important;
	  }
	  body .footer .menu-footer .button-footer a.selected{
		  color:#D62B54!important;
		  
	  }
	  
	  body .footer .menu-footer .button-footer a i{position:relative;}
	  body .footer .menu-footer .button-footer a span{font-size:11px;}
	  body .footer .menu-footer .button-footer a.has-favorite i i{ display:block!important;}
	  body .footer .menu-footer .button-footer a i i{position:absolute;top:0px;left:0px;display:none;color:#ffaa00!important;}
	  
	  .footer-pull{height:120px;width:100%;}
	body .footer{
		background:#ffffff;max-width: 100%;
	}
	
	
	
	
	/* MENÚS PRINCIPALES */
	.menu-area{
	  background-color: #ffffff;
	  border-radius: 8px;
	  padding: 20px;
	  height: 100%;
	}
	
	/* LISTAS DE REGISTROS */
	
	.linea-registro{background:#efefef;border-radius:4px; height:40px;cursor:pointer;}
	.linea-registro:hover{background:#F7D9E0;}
	.linea-registro .campo{overflow:hidden;}
	.linea-registro .campo p{
	  
	  color:#454545;
	}

	
	/********* BAR CONTENT *********/
	
	.grafica-h-bar{}
	   .grafica-h-bar .bar-content{width:100%;position:relative;padding:0.25rem;border-radius:0.4rem;overflow:hidden;}
	   .grafica-h-bar .bar-content .bar-background{background:#c5c5c5;border-radius:0.4rem;z-index:97;width:100%;position:absolute;top:0;left:0;height:100%;overflow:hidden;}
		.grafica-h-bar .bar-content .bar-painted{background:#008000;/*border-radius:0.4rem 0rem 0rem 0.4rem ;*/z-index:98;position:absolute;top:0;left:0;height:100%;}   
		.grafica-h-bar .bar-content p{z-index:99;color:#ffffff;position:relative;padding:0 5px;}   
	   .grafica-h-bar .bar-content .bar-painted.no-border{border-radius:0!important;}
	
	
	
	
	/* Extra Small (xs): Mobile devices (portrait mode) */
	@media (max-width: 575.98px) {

	}
	
	/* Small (sm): Mobile devices (landscape mode) */
	@media (min-width: 576px) {
		
	}
	
	/* Medium (md): Tablets */
	@media (min-width: 768px)  {
		.login-container {
			min-width:50%;
		}
	}
	
	/* Large (lg): Laptops/Desktops */
	@media (min-width: 992px)  {
		.footer{display:none;}
		.imagen-portada{
			width:120%;
			margin-left:-30%;
		}
		#topbar{
			width:calc(100vw - 250px);
			margin-left:-25px;
		}
		/* Parte derecha del contenido */
		#content {
			width:calc(100vw - 250px);
		  margin-left: 250px; /* Compensar el ancho del sidebar */
		  padding: 25px;
		}
		
		/* Lateral izquierdo (menú) */
		#sidebar {
		  width: 250px;
		  height: 100vh;
		  position: fixed;
		  top: 0;
		  left: 0;
		  padding-top: 20px;
		  overflow-y: auto;
		  border-right:	1px solid #efefef;
		}
		#sidebar .nav-link{
			font-size:1rem
		}
		#sidebar .nav-link i{
			font-size:1.1rem;
		}
		#sidebar .nav-link.active {
			color: #D62B54;
		/*	background-color:#00efef;
			border-radius:4px;*/
		}
		
		#sidebar.closed {
			left:0!important;
		}
		#sidebar.open {
			left:0!important;
		}
		
	}
	
	/* Extra Large (xl): Large Desktops */
	@media (min-width: 1200px)  {
		.imagen-portada{
			width:120%;
			margin-left:-30%;
		}
		
	}
	
	/* Extra Extra Large (xxl): Very large Desktops */
	@media (min-width: 1400px) {
		
		.imagen-portada{
			width:120%;
			margin-left:-30%;
		}
		#content{
			padding:30px;
		}
		/* Estilos para pantallas mayores que 1400px */
	}