/* Styles definition here */


/* ----- ESTILO 1 - Por defecto + Colores + Botón "Añadir día seleccionado" + Arreglar fallos ----- */

/* Colores celdas calendario */
.ahb_m2 #fbuilder .notavailslot.ui-datepicker-today	{ background: #d2ffc8; }	/* Día actual */
.ahb_m2 #fbuilder .notavailslot						{ background: #dbd0d0; }	/* Día no disponible */
.ahb_m2 #fbuilder .notavailslot span				{ text-shadow:none; }

.ahb_m2 #fbuilder 									{ padding: 1%; }			/* Contenedor principal */
.ahb_m2 #fbuilder .fieldCalendarService 			{ display: none; }			/* Selector del nombre del servicio, innecesario, siempre muestra el mismo calendario */
.ahb_m2 #fbuilder .fieldCalendar 					{ display: block; }			/* Evitar que el calendario se solape al menú principal */
.ahb_m2 #fbuilder .usedSlots .t 					{ display: none; } 			/* Hora del día seleccionado */
.ahb_m2 #fbuilder .ui-datepicker-inline 			{ max-width: 100%; }		/* Anchura calendario */
.ahb_m2 #fbuilder .ui-datepicker-title 				{ line-height: inherit; }	/* Alinear títulos si pones en pantalla más de un calendario */

.ahb_m2 #fbuilder td a {														/* Celdas calendario */
	width:			100%;
	max-width:		none !important;
	border-radius:	0;
	}

.ahb_m2 #fbuilder .slotsCalendar.slotsCalendarfieldname1_1 {					/* Contenedor del botón "Añadir día seleccionado" */
	display:		flex;
	flex-direction:	column;
	align-items:	center;
	height:			190px;
	}
	.ahb_m2 #fbuilder .slots div a:hover 	{ background: #517df5 !important; }	/* Botón "Añadir día seleccionado" */
	.ahb_m2 #fbuilder .slots div a {
		background-color:	#1246d6;
		display: 			inline-flex;
		align-items: 		center;
		column-gap: 		0.5em;
		border: 			1px solid #0038d3;
		border-radius: 		5px;
		padding: 			0.5rem 2rem;
		font-size: 			1px;												/* Esconder el 00:00 de la hora que genera el plugin */
		font-weight: 		600;
		text-decoration: 	none;
		color: 				transparent !important;
		transition: 		all 0.3s ease-in-out 0s;
		}
		.ahb_m2 #fbuilder .slots div a::after { 								/* Generar el icono + y el texto del botón */
			content: 	url('data:image/svg+xml,<svg aria-hidden="true" role="img" height="0.7em" width="0.7em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>')" Añadir día seleccionado";
			color: 		#fff;
			font-size: 	16px;
			}
		.ahb_m2 #fbuilder .slots div.currentSelection.htmlUsed a {
			background-color: 	#1246d6 !important;
			transition: 		all 0.3s ease-in-out 0s;
			}
		div:has(> div.htmlUsed.currentSelection.choosen) {						/* Difuminar el padre del botón tras pincharlo */
			opacity: 	30%;
			transition: all 0.3s ease-in-out 0s;
			}

.ahb_m2 #fbuilder .usedSlots { 													/* Lista de días seleccionados */
	position: 			absolute;
	height: 			145px;
	margin-top:			-180px;
	overflow-y:			auto;
	width:				30%;
	}

#field_1-0.fields { margin-bottom: 20px; }
#field_1-0.fields::after {														/* Encabezado formulario */
	content:		"Rellene la información de contacto:";
	padding-bottom:	20px;
	font-size:		18px;
	font-weight:	bold;
}
#fbuilder input.field, input.email, #fbuilder input#hdcaptcha_cp_appbooking_post_1 { background: #faf1e5; padding: 10px; } 					/* Campos formulario */
#fbuilder .fields.cff-checkbox-field { margin-bottom: 30px; }																				/* Checkbox Acepto */
#fbuilder .pbSubmit {															/* Botón Enviar formulario */
	background-color:	#1246d6;
	border:				1px solid #0038d3;
	border-radius: 		5px;
	padding: 			0.5rem 2rem;
	font-size: 			16px;
	font-weight: 		600;
	text-decoration: 	none;
	color:				#fff;
	}
	#fbuilder .pbSubmit:hover { background: #517df5; transition: all 0.3s ease-in-out 0s; }
	div:has(> .pbSubmit:focus)::after {											/* Tras pinchar el botón, se añade al padre para que no se muestre dentro del botón */
		content: 		"Enviando... " url('/shared-assets/images/examples/fire.png');
		font-style:		italic;
		font-weight:	lighter;
		font-size:		15px;
		color:			grey;
		}


/*----- FIN ESTILO 1 -----*/


/*----- ESTILO 2 - UI moderno + Botón "Añadir día seleccionado" -----*/