/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

.div-container {
		max-width: 1024px;
		width: 90%;
		margin: 20px auto;
		font-family: sans-serif;
	  }

	  .content-box {
		display: flex;
		width: 100%;
		border: 1px solid #ddd;
		background-color: #FFF;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 20px;
	  }

	 .image-container {
		  position: relative;
		  width: 300px;
		  overflow: hidden;
		  border-radius: 10px;
		  max-height: 200px;
		  max-width: 290px;
		}

	  .image-container img {
		  width: 100%;
		  display: block;
		  transition: transform 0.3s ease;
		  height: 100%;
		  object-fit: cover;
		}

	  .image-container:hover img {
		transform: scale(1.1);
	  }

	  .image-container:hover::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1; /* Asegura que el overlay esté por encima de la imagen */
	  }


	  .date-overlay {
		position: absolute;
		top: 50%; /* Centra verticalmente */
		left: 50%; /* Centra horizontalmente */
		transform: translate(-50%, -50%); /* Ajuste para centrado exacto */
		background-color: rgba(255, 255, 255, 0.8);
		padding: 5px 10px;
		border-radius: 5px;
		font-weight: bold;
	  }

	  .text-content {
		  padding: 5px 15px;
		  flex-grow: 1;
		  min-width: 350px;
		}

	  .text-content h2 {
		color: #4ab4a6;
		font-size: 1.6em; /* Tamaño de fuente más pequeño */
		margin-bottom: 8px;
	  }

	  .text-content p {
		margin: 4px 0; /* Espaciado más pequeño */
		font-size: 0.9em; /* Tamaño de fuente más pequeño */
	  }

	  .text-content .status {
		font-weight: bold;
	  }
 
	.reserve-button {
	  background-color: #4ab4a6;
	  color: white!important;
	  width: auto;
	  height: 40px;
	  padding: 8px;
	  border: none;
	  cursor: pointer;
	  text-decoration: none;
	  border-radius: 5px;
	  margin: 10px auto 0;
	  display: block;
	  font-size: 12px;
	  font-weight: bold;
	  text-align: center;
	  min-width: 160px;
	}
	
	.botonera{
		display: flex; 
		flex-direction: column; 
		align-items: center; 
		justify-content: center; 
		height: 190px;
	}

	.custom-tooltip {
	  position: relative;
	  display: inline-block;
	  cursor: pointer;
	  vertical-align: super; /* hace que se vea como un <sup> */
	  font-size: 1em;       /* opcional: más pequeño */
	}

	.custom-tooltip .custom-tooltiptext {
	  visibility: hidden;
	  width: 220px;
	  background-color: black;
	  color: #fff;
	  text-align: center;
	  border-radius: 6px;
	  padding: 6px 10px;
	  position: absolute;
	  z-index: 999;
	  bottom: 140%; /* un poco más alto */
	  left: 50%;
	  transform: translateX(-50%);
	  opacity: 0;
	  transition: opacity 0.3s;
	  font-size: 12px;
	  white-space: normal;
	}

	.custom-tooltip:hover .custom-tooltiptext {
	  visibility: visible;
	  opacity: 1;
	} 
	
	.selected{
		background:#4ab4a6;
		color:#FFF;
	}
	
	.anc33{
		width: 30%;
		font-size: 15px;
		margin: 10px 5px 5px;
	}



.text-primary {
  color: #4ab4a6!important;
}

.card-header{
	background:#4ab4a6 !important;	
}



.card-header h5{
	color:#fff !important;	
} 



.content-right {
    display: flex;
    align-items: center;     /* centra verticalmente */
    justify-content: center; /* centra horizontalmente si deseas */
    min-height: 100vh;       /* asegura que use toda la altura de la ventana */

    
}

main {
    width: 100%;
    background-color: #f0f8ff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}