/* https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-navigation-bar-with-flexbox--cms-33535 */
/*Basic styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html{
	font-size:16px;  /*100%=16px;  */
}
body {
  font-family: Sans-serif, Arial, Verdana, Tahoma ;
  font-size:1rem;
  }
 #container{
	/*para evitar los márgenes iniciales*/
	position:absolute;
	top:0px;
	width:100%;
	/*crear y activar rejilla grid*/
	display:grid;
	grid-template-columns:2fr 1fr ; /*2 columnas*/
	grid-auto-rows:minmax(50px,auto); /*filas incluyendo filas vacias*/
	column-gap:20px; /*espacio entre columnas*/
	row-gap:0px;/*espacio entre filas*/
	
}
/*DISEÑO MOVIL*/
/*Fuentes*/
 h1 {
	font-family: Sans-serif;
	font-size: 2rem;
    color: #FAFDE0;   /*casi blanco*/
    margin-top: 5px;
    text-align: center;
    margin-right:5%;
	 }
 h2{
	padding: 10px;
    font-size:1.5rem;
	color: #FAFDE0;   /*casi blanco*/
    text-align: center;
}
h3{
	margin-top:20px;
	margin-left:40px;
	padding: 10px;
    font-size:1.3rem;
	color: #385739 ; 
    text-align: left;
}
#article_main h2{
	color: #385739;
}
p{
	font-size:1.1rem;
	color: #385739; /*verde oscuro*/
    text-align: justify;
	margin:10px  40px;
	
}

 /*cabecera*/
 header{
  background-color: #385739  ;
  padding:20px 20px 0px 20px;
  grid-column:1 / 3; /*columna 1y2*/
  grid-row:1; /*fila 1*/
 
 }
 .box-logo-nombre{
	display: flex;
	flex-direction:row;
	justify-content: space-around; /* coloca las divs separadas y centradas  */
	align-items: center;  /* alinea en vertical  */
}
.logo{
	align-items: center;  /* alinea en vertical  */
}
	 .logo img{
		margin: 5px 10px 0px 0px; /*arriba- dcha*/
		max-width:100px;
		max-height:97px;
		}
.nombre{
	align-items: center;  /* alinea en vertical  */
}

 /*nav*/

	nav {
		  background: #385739  ;
		  padding: 0 0px 0 50px;   /*arriba-derecha-ábajo- izdda*/
		  color: #FAFDE0;
		  font-size:0.8rem;
		  font-weight:bold;
		  grid-column:1 / 3; /*columna 1y2*/
			grid-row:2; /*fila2*/
		  }
	nav li{
			 list-style:none;
			 margin-left:0px;
			 padding:0px 20px 10px 20px;	 /*arriba-derecha-ábajo- izdda*/
			}

	nav a {
		  color: #FAFDE0;
		  text-decoration: none;
		}
	nav a:hover{
				text-decoration: underline;
			}
			
	#menu_bloques{
		display:flex;
		flex-direction:row; /*coloca sus divs en columnas*/
		flex-wrap:wrap;/*ajuste flexible si no cabe*/
		grid-column:1 / 3; /*columna 1y2*/
		grid-row:2; /*fila2*/
		justify-content:space-around;/* coloca las divs separadas y centradas  */
		align-items: center;  /* centra en vertical*/	
		color: #385739;
		display:none; /*oculta en versión móvil*/

		}
	.menu_bloques {  /*6 divs*/
		display:flex;
		flex-direction:row; /*coloca las divs en columnas*/
		flex-wrap:wrap;/*ajuste flexible si no cabe*/
		justify-content:center; /* centra en horizontal*/
		align-items: center;  /* centra en vertical*/	
		background-color:#385739 ;
		color: #e7f3e8 ; /*claro*/
		width:150px;
		height:50px;
		margin:auto;
		margin-bottom:20px;
		font-size:0.9rem;
		font-weight:bold;
		text-align:center;
		border:1px inset #FAFDE0 ;
		border-radius:5px;
		}
		
	#menu_boton{
			display:block;
			cursor: pointer;
			padding-bottom:10px;
		}
	#menu_lista{
			display:none;
		}

	.language-selector {
			margin-top: 20px;
			text-align:right;
		}

	.lang-button {
			background-color: #FAFDE0;  /* Color de fondo */
			border: none;
			color: #385739;
			padding: 5px 10px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 0.8rem;
			margin: 0px 3px;
			cursor: pointer;
			border-radius: 5px;  /* Bordes redondeados */
			transition: background-color 0.3s ease;
		}

	.lang-img {
			background-color: #385739;
			border: none;
			display: inline-block;
			margin: 0px 0px;
			transition: background-color 0.3s ease;
		}

	.lang-button:hover {
			background-color: #45a049;  /* Color más oscuro cuando se pasa el ratón */
		}

	.lang-button:active {
			transform: scale(0.98);  /* Efecto de "presionar" el botón */
		}	
/*Cajas no visibles para separar*/		
div{
	grid-column:1 / 3; /*columna 1y2*/
}
/*main*/

	main {
    grid-column:1 / 3; /*columna 1y2*/
	grid-row:4 / 6; /*fila 4y5*/
	margin: 0px 5px;
	background-image:url(images/buganvilla_mia_peque_clara3.png);
	background-repeat:no-repeat;
	background-position:top right;
	
    }
	main a{
		text-decoration:none;
		color: #21c777    ; /*verde*/
		margin-left:10px;
		font-weight:bold;
}
	main a:hover{
		text-decoration: underline;
	}	
	
	article a{
		text-decoration:none;
		color: #21c777    ; /*verde*/
		margin-left:10px;
		font-weight:bold;
}
	article a:hover{
		text-decoration: underline;
	}	

	#article_main{
		
		grid-column:1 / 3; /*columna 1y2*/
		grid-row:4; /*fila 4*/
		height:500px;
		margin-left:20px;
		margin-right:20px;
		overflow-y:auto;
		border:1px inset #385739 ;
		border-radius:10px;
		padding:0;
		
		}
	#article_main2{
		grid-column:1 / 3; /*columna 1y2*/
		grid-row:5; /*fila 5*/
		margin-top:50px;
		}
	
/* Estilos para la barra de scroll  */
	::-webkit-scrollbar {
		width: 10px; /* Ancho de la barra de scroll */
		height: 8px; /* Altura de la barra de scroll */
	}

	/* Estilos para el "thumb" (la parte móvil de la barra) */
	::-webkit-scrollbar-thumb {
		background-color: #385739; /* Color de fondo del thumb */
		border-radius: 20px; /* Redondeo de las esquinas del thumb */
		border: 1px solid #fff; /* Borde del thumb */
	}	
#centrar_images {
		text-align:center;
	}
	#centrar_images img{
		margin-left:5px;
		border-radius: 10px; /* Redondeo de las esquinas del thumb */
	}
#centrar_images_index{
		margin:auto;
		text-align:center;
	}	
	#centrar_images_index img{
		border-radius: 10px; /* Redondeo de las esquinas del thumb */
		margin:auto;
		margin-top:10px;
	}

#flecha {
	grid-column:1 / 3 ; /*columna 1y2*/
	grid-row:9; /*fila 9*/
	text-align:right;
	}
aside a{
		text-decoration:none;
		color: #e7f3e8 ; /*claro*/
}
	aside a:hover{
		text-decoration: underline;
	}
/*Aside con logos*/
	aside{
		grid-column:1 / 3; /*columna 1y2*/
		grid-row:7; /*fila 7*/
		justify-content:space-around;
		align-items: center;  /* centra en vertical*/	
		color: #385739;
		
		}
	aside section {
		
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;/*ajuste flexible si no cabe*/
		justify-content:center;
		align-items: center;  /* centra en vertical*/	
		background-color:#385739 ;
		color: #e7f3e8 ; /*claro*/
		width:250px;
		height:125px;
		margin:auto;
		margin-bottom:20px;
		font-size:1rem;
		font-weight:bold;
		text-align:center;
		border:1px inset #8aed60 ;
		border-radius:5px;
		}
		
	hr{
		width:95%;
		height:3px;
		background-color:#385739 ;
		margin:auto; 
		margin-top:50px;
		margin-bottom:50px;
	}
/* Tarifas */	
	#tabla{
		width:90%;
		text-align:center;
		margin:auto;
		overflow-x:auto;
		}
	table{
		padding:10px;
		border-collapse:collapse;
		margin:auto;
	}
	th{background-color:#385739;
		color:#FAFDE0; 
		padding:10px;
		text-align:center;
	}
	td{
		border-bottom-style:solid;
		border-bottom-color:#385739;
		border-bottom-width:1px;
		padding:10px;
	}
	.tiempo{
		width:130px;
		}
/* Listas */	
	li{
		list-style-image:url("images/bolaVerde1.png");
		margin-left:50px;
		padding-left:10px;	
	}
/* Footer */	
	footer{
		grid-column:1 / 3; /*columna 1y2*/
		grid-row:10; /*fila 10*/
		align-items: center; 
		color: #e7f3e8 ; /*claro*/
		font-size: 1rem;
		font-weight: bold;
		text-align: center;
		background-color: #385739  ;
		padding:20px;
}
	footer a{
		text-decoration:none;
		color: #e7f3e8 ; /*claro*/
		margin-left:10px;
}
	footer a:hover{
		text-decoration: underline;
	}
	#footer1{
		display:flex;
		flex-direction:row;
		padding: 10px 0;
		align-items: center;/* centra en horizontal */	
		justify-content: center; /* coloca las divs centradas  */
	}
	#footer2{
		
	    margin-top:10px;
		align-items: center;/* centra en horizontal */	
	}		
/*RESERVAS	*/
/*https://www.bebetterhotels.com/como-implementar-el-boton-de-reservas/*/
	#calendario_meses{ /*items alineados abajo*/
		display:flex;
		flex-direction:column;
		align-items: bottom;
		flex-wrap:wrap;  /*ajuste flexible si no cabe*/
		margin-left:20px;
		height:200px;
		width:80%;
		margin:auto;
		overflow-x:auto;
		overflow-y:hidden;
		border:1px inset #385739 ;
		border-radius:5px;
		padding:20px;
	}
	
	.reservas_form_div, .ficha_huesped_div{
		width:90%;
		margin:auto;
	}
	#reservas_form, #ficha_huesped{
	padding: 15px;
	
	}
	#hotel_select{
		display:none!important;
	}
	
	.inputs{
		height: 40px;
		width: 100%;
		background-color: #385739;
		color: #FAFDE0; 
		border-radius: 5px;
		border: none;
		box-sizing: border-box;
		font-size: 16px;
		padding: 10px;
		margin-bottom: 10px;
	}
	
	
	input::placeholder {
		color: #FAFDE0; /* Cambia el color del texto */
	}
	.inputs::placeholder{
		color: #FAFDE0; /* Cambia el color del texto */
		font-family: Sans-serif, Arial, Verdana, Tahoma ;
		font-size:1rem;
	}
	input[type="date"]::-webkit-calendar-picker-indicator {
		filter: invert(1); /* Invierte el color del icono calendar de negro a blanco */
	}
	.boton_reserva{
		font-size: 18px;
		height: 40px;
		width: 100%;
		color: #FAFDE0; 
		border-radius: 5px;
		box-sizing: border-box;
		background-color: #385739;
		border: none;
	}
	buttom{
		color: #FAFDE0; /* Cambia el color del texto */
		}
		
	/*FICHA HUESPED*/
		
	label{font-size: 18px;
		height: 40px;
		color: #385739; 
		width: 100%;
		}
	

	
	
	/*PC*/
@media all and (min-width: 960px) {
	
	h1{font-size:2.5rem;}
	p{font-size:0.95rem;
		margin:10px 80px;
		}
	article p{margin:10px 40px;}
	
	.logo img{
	max-width:149px;
	max-height:145px;
	}
	
	main{
		grid-column:1 / 3;
		grid-row:4;
	}
    #article_main{
		grid-column:1 / 2;
		grid-row:4;
		margin-left:50px;
		justify-content:space-around;
		height:auto;
		border:0px inset #385739 ;
		border-radius:10px;
		padding-bottom:10px;
		}
	#article_main2{
		grid-column:2 / 3;
		grid-row:4;
		margin-right:50px;
		margin-left:50px;
		padding:0;
		justify-content:space-around;
		height:360px;
		overflow-y:auto;
		/*border:1px inset #385739 ;
		border-radius:10px;*/
		
		}
	
	aside{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-items: center;  /* centra en vertical*/	
		}
	
	#flecha {
	grid-column:1 / 3 ;
	grid-row:9;
	text-align:right;
	column-gap:0px;
	row-gap:0px;
	}
	footer {
	grid-column:1 / 3 ;
	grid-row:10;
	
	}	
	#centrar_images{
		margin-left:40px;
	}
	#centrar_images_index{ /*desplazamiento horizontal*/
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;  /*ajuste flexible si no cabe*/
		height:350px;
		padding:15px 15px 35px 15px; /*arriba-derecha-abajo-izquierda*/
		margin:auto;
		overflow-x:auto;
		overflow-y:hidden;
		position: relative; /* Necesario para el posicionamiento absoluto de los botones */
	}
	/*LISTAS*/
	li{
		margin-left:100px;
		}
	/*RESERVAS*/
	#tabla{
		width:auto;
		
		}
		
	.tiempo{
		width:420px;
		}
	#calendario_meses{ /*items alineados abajo*/
		width:60%;
		}
	
	#reservas_form{
		margin: 0 auto;	
		max-width: 970px;
		padding: 30px 20px 10px 20px;
		border-radius: 5px;
		}
	
	#ch, #ad {width: 12%!important;}
	#no {width: 27%!important;}
	#ma, #ap {width: 35%!important;}
	#tf, #in, #out {width: 18%!important;}
	#mascota {width: 20%!important;}
	#mensaje {vertical-align: top; width: 50%!important;}
	.boton_reserva{
		display: inline-block;
		vertical-align: top;
		width: 18%!important;
	}
	

	/*NAVEGADOR*/
	nav {
	  font-size:0.8rem;
	  }
	nav li{
	 display: inline-block ; /*en horizontal*/
	 }
	#menu_boton{
	display:none;
}
	#menu_lista{
		display:none;
	}
	#menu_bloques{
		display:block;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		margin-top:30px;
	}
	
	
}