/* --------------------------------------------------------------------------------------- */	
/* STYLESHEET INDEX -----------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------- */	




/* CONTROL DE COLORES -------------------------------------------------------------------- */

	:root {
	  
	  --gris-claro: #f7f7f7; /* var(--gris-claro) */
	  --gris-medio: #ECECEC; /* var(--gris-medio) */
	  --gris-oscuro: #A9A9A9; /* var(--gris-oscuro) */

	  --rojo-claro: #FFBFBF; /* var(--rojo-claro) */
	  --rojo-medio: #FF6767; /* var(--rojo-medio) */

	}


/* CONTROL DE TIPOS DE LETRA ------------------------------------------------------------- */
 /* tipos de letra para los botones */

					.btn-mod2, .btn-mod3, span  {
						font-family: Open Sans, sans-serif;
						font-size: 10px;
						font-weight: bold;
						text-align: center;

						
					}


/* CONTROL DE TÍTULOS Y SEPARADORES ------------------------------------------------------ */
	h1 {
		margin: 0.3em;
    	height: auto;
    	text-align: center;
	}
	h2 {
		margin: 0.3em;
    	height: 25px;
    	text-align: center;
	}

	h3 {
		margin: 0.3em;
    	height: 25px;
    	text-align: center;
    	vertical-align: center;
	}

	h4 {
    /* margin: 0.3em; */
    margin-top: 10px;
    /* height: 20px; */
	
	}

	hr {
		margin: 0px;
	}


	.cartela-link {
		text-decoration: none; /* Quita el subrayado */
		color: inherit;         /* Hereda el color del elemento padre */
	  }



/* --------------------------------------------------------------------------------------- */			 
/* ESTRUCTURA GENERAL  ------------------------------------------------------------------- */

	body {	
		display: grid;
		  grid-template-columns: auto 1fr;
		  gap: 20px;
		  justify-content: flex-start;
		  align-items: flex-start;
		  font-family: Open Sans, sans-serif;
		  font-size: 14px;
		  height: 100%;
		  margin: 0;
		  padding: 20px;
		  background-color: var(--gris-medio);
		  overflow: hidden;
	}


	/* BLOQUES -------------------- */
		
	/* DIV PRINCIPAL */
		.principal{
			display: grid;
			grid-template-columns: 65px 1fr; /* Establecemos un ancho fijo de 55px al primer div y 1fr al segundo div */
			gap: 20px;
			border: 1px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			padding: 10px;
			background-color: var(--gris-claro);
			border-radius: 25px;
			border-color: var(--gris-claro);
			

}


	
	/* DIV SECUNDARIO */
		.secundario {
			display: grid;
			grid-template-columns: 1fr;
			justify-items: center;
			
			width: auto;
			height: calc(100vh - 60px);	
			padding: 10px;	
			background-color: var(--gris-claro);
			border-radius: 25px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
						
		}






























/* --------------------------------------------------------------------------------------- */			 
/* BLOQUE PRINCIPAL ---------------------------------------------------------------------- */


	/* CONTENEDOR DE SIDEBAR (ML) Y MODULO APIGIP (M1+V1) ---------------------------------- */
	
		/* SIDEBAR- menú lateral de acceso a modulos ----------------------------------------- */

			.sidebar {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				
				width: 65px;
				height: calc(100vh - 60px);
				background-color: white;
				border-radius: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
				z-index:1;
			}
			
			/* botones de acceso a módulos */
				.sidebar ul {
					list-style: none;
					padding: 0px;
					margin: 0px;
					display: flex;
					flex-direction: column;
					align-items: stretch;
					justify-content: flex-start;	
				}
				.sidebar li {
					width: 54px;
					height: auto;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: contain;
					cursor: pointer;
				}

			/* estilos de los botones de acceso a modulos */
						
				.btn-ini {
					background-color: white;
					border-color: black;
					border-width:1px;
					border-radius: 13px;
					cursor: pointer;
					margin-top:5px;
					margin-left: -2px;
					margin-bottom: 15px;
				}
				.btn-mod, .btn-aux {
					background-color: white;
					border: none;
					border-radius: 10px;
					margin-top:0px;						
					cursor: pointer;
					margin-bottom: -2px;
				}
				.btn-mod-focus {
					background-color: var(--rojo-claro);
					border: none;
					border-radius: 10px;
					margin-top:0px;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
					transform: scale(1.01);
					transition: all 0.5s ease-in-out;
					margin-bottom: -2px;
				}
				.btn-mod:hover, .cartela:hover {
					background-color: var(--rojo-claro);
					border-radius: 10px;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
					transform: scale(1.01);
					transition: all 0.5s ease-in-out;
				}
				.sidebar img {
					display: block;
					width: 40px;
					height: auto;
					object-fit: cover;
					margin-top: 5px;
					margin-bottom: 5px;
				}
			





			/* BOTÓN PARA OCULTAR EL SIDEBAR*/
				.rotated {
					transform: rotate(180deg);
				}






















	/* CONTENEDOR DEL MÓDULO - menú del modulo y ventana de funciones--------------------- */
		
		.main {
			display: none;
		}

		.main-show {
			
 	 		position: relative;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			justify-items: stretch;		
			width: auto;
			height: calc(100vh - 60px);
			font-family: Open Sans, sans-serif;
			font-size: 12px;				
			padding: 0px;
			background-color: var(--gris-claro);
			
			
		}
		 
		


		/* menu del modulo (M1) ------------------------------------------------------------ */
		
			.header {		
				border-style: solid;
				border-color: black;
				border-width:1px;
				padding: 0px 10px;
				margin: 5px;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: center;
				width: min(365px);
				height: 80px;			
				
				
				background-color: white;
				border-radius: 10px;
				box-shadow: 0 0 0 5px white, 0 0 0 1px black, 0 0 10px rgba(0, 0, 0, 1);
				z-index:1;

			}



			.header-map {		
				border-style: solid;
				border-color: black;
				border-width:1px;
				padding: 0px 10px;
				margin: 11px;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: space-evenly;
				width: 165px;
				height: 80px;
				z-index:10;		
				
				
				background-color: white;
				border-radius: 10px;
				box-shadow: 0 0 0 5px white, 0 0 0 1px black, 0 0 10px rgba(0, 0, 0, 1);
				z-index:1;

			}





			.cartela {		
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: center;
				width: min(360px);
				height: 50px;			
				margin-bottom: 14.5px;
				padding: 0px 10px;
				background-color: white;
				border-radius: 10px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
				z-index:1;
				
				
			}
			.cartela-select {		
				border-color: black;
				border-width:1px;display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: center;
				width: min(360px);
				height: 50px;			
				margin-bottom: 15px;
				padding: 0px 10px;
				
				border-radius: 20px;
				background-color: var(--rojo-claro);
				
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
				z-index:1;
				
			}


			.btn-func {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;				
				gap: 10px;
    		text-align: center;
				align-items: center;
				justify-content: flex-start;
				margin: 5px;
			}

				.functions {
					text-align: center;
    			display: flex;
    			flex-direction: column;
    			align-items: stretch;

				}

									/* botones de acceso a funciones */
									.btn-mod2 {
									  outline: none;
									  border-radius: 10px;	
									  width: 100%;							  
									}

									.btn-mod2:hover {
									  outline: none;
									  border-radius: 10px;	
									  width: 100%;
									  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);					
										transform: scale(1.05);
										transition: all 0.5s ease-in-out;
										background-color: var(--rojo-claro);
										cursor:pointer;			  
									}

									.btn-mod2:focus, #boton2:focus, #boton1:focus  {
										outline: none;
										border-radius: 10px;
										background-color: var(--rojo-claro);						
									}
									


									.btn-mod3 {
									  outline: none;
									  border-radius: 10px;	
									  width: 50%;
									  margin: 40px 0px 15px 0px;									  									  
									}

									.btn-mod3:hover {
									  outline: none;
									  border-radius: 10px;	
									  width: 100%;
									  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);														
										transition: all 0.5s ease-in-out;
										background-color: var(--rojo-claro);
										cursor:pointer;									  				  
									}
									
									.btn-mod3:focus {
										outline: none;
										border-radius: 10px;
										background-color: var(--rojo-claro);
										width: 100%;
									}

			





		 
	/* ventana de fUnciones (V1) ---------------------------------------------------------- */

		.content1, .content2 {
			display:none;
			transform: translateY(-100%);
  			transition: height 1s ease;
			width: 397px;
		}

		.content1-show {
			transform: translateY(0);
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin: 0px ; /* Centrar el contenedor horizontalmente */			
			background-color: var(--gris-claro);
			 overflow-y: scroll;
			height: 770px; /*  puedes ajustar la altura según tus necesidades */
			width: 396px;
			/*margin-left: 18px;*/			
		}

		.content2-show {
			/*display:block;*/
			transform: translateY(0);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;								
			margin: 0px ;
			background-color: var(--gris-claro);
			overflow-y: scroll; 
			height: auto; /* puedes ajustar la altura según tus necesidades */
			width: 100%;
		}







		.map {
		/*position: relative;*/
    	display: flex;
    	flex-direction: column;
		align-items: flex-start;
    	margin: 0px;
    	background-color: var(--gris-claro);
    	height: 100%;
    	width: 100%;
    		
		}

		.callejero {
		 	position: absolute;
		 	width: 100%;
		 	height: 100%;
		 	overflow: clip;
		 	border-radius: 10px;
		}    


	   #modulo1 {		    	
	   	width: 330px; /* Ancho del contenedor del formulario */
	 		height: 100%;	
	   }





	.selector-capas {
		display: grid;
		grid-template-columns: 1fr 25px;
		flex-direction: row;
		gap: 5px;
		/* padding-right: 10px; */
		padding-left: 10px;
		padding-top: 15px;
		padding-bottom: 0px;
		margin-top: 10px;
		margin-bottom: 5px;
		transition: transform 0.2s ease-in-out;
		background-color: #ccc9c9;
		border-radius: 5px;
		justify-items: stretch;
		justify-content: space-evenly;
		align-content: center;
		height: 10px;
	}

	.selector-capas img:hover {
		transform: scale(1.25);
	}

	.selector-capas img {
		
		height: 15px;
		margin-top: 10px;
	}

	.tooltip {
		position: relative;
		text-align: center;
		top: -21px;
		right: 55px;
		padding: 4px;
		transform: translateX(-50%);
		width: 85px;
		background-color: #333;
		color: #fff;
		border-radius: 5px;
		font-size: 12px;
		opacity: 0;
		pointer-events: none;
		cursor: pointer;
		transition: opacity 0.2s ease-in-out;
	}

	img:hover + .tooltip {
		visibility: visible;
		opacity: 1;
	  }

	
















/* CONTROLES DEL MAPA */

	/* CONTROL DE CAPAS */	  
		  .ol-control.ol-layerswitcher {
			position: absolute;
			left: 0.5em;
			text-align: left;
			top: 100px;
			max-height: calc(100% - 6em);
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			
			width: 14em;
			display: flex;
			flex-direction: column;
			
		  }
	/* BOTON ZOOM */
		  .ol-zoom {
			top: 18px;
			left: 18px;
			z-index:10;
		  }
	/* BOTON EXTENT */
		.ol-zoom-extent {
			top: 4.643em;
			left: 18px;
		}
		.fas.fa-compress {
			margin-top: -12px;
		}
		#extentDiv {
			margin-left: -4px;
		}










/* --------------------------------------------------------------------------------------- */			 
/* BLOQUE SECUNDARIO ---------------------------------------------------------------------- */



	/* 	CALENDARIO */

	#dp {
  		width: auto;
  		height: auto; /* ajusta la altura según sea necesario */
	}

	.calendar1 {
	width: auto;
	
	margin: 0px 5px 10px 5px;
	
	}

	.calendar2 {
	width: 100%;
	height: auto;
	margin: 0 auto;
	}
















/* LEYENDA DE CAPAS */

.leyenda {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: -5px;
    background-color: #d3d3d36b;
    padding: 10px 0px 10px 20px;
    flex-wrap: wrap;
    width: 360px;
}

.btn-eliminar-capa {
	display:none;
}

  .leyenda-item {
	display: flex;
	align-items: left;
	margin: 2px;
  }
  
  .leyenda-icon-clasif, .leyenda-icon-calif, .leyenda-icon-EstActiv, .leyenda-icon-usosCateg {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 1%;
	margin-right: 5px;
	border: 0.5px solid black;
	
  }
  
  .leyenda-icon-EstEdif {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 5px;
	border: 0.5px solid black;
  }

  .btn-filtro {
	width: 80px;
  }




  #feature-data {
    z-index: 1;
    position: absolute;
   /* left: 356px;*/
   /* top: 377px;*/
	background-color: white;
}

  #tabladatos {
    background-color: white;
    z-index: 10;
	
    top: 437px;
    position: relative;
    left: 10px;
    padding: 5px;
    border-radius: 10px;
}