/*
 * Consulta con fechas en Dónde dormir (ver includes/viaje.php y viaje.js).
 *
 * Con la línea del panel para reservar de Dónde comer (comer.css): rótulos
 * oscuros, bordes verdes suaves, el botón naranja de WhatsApp y la hoja que
 * sube desde abajo en el celular. En el celular la letra va un punto más
 * grande, como en el resto de lo nuevo.
 */

.areco-contacto [hidden],
.areco-contacto-barra [hidden],
.areco-viaje-hoja [hidden],
.areco-viaje-tira [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * "¿Cuándo venís?": los campos (tarjeta de contacto y hoja)
 * ------------------------------------------------------------------------ */

.areco-contacto .areco-viaje__titulo {
	margin: 0 0 8px;
	color: #24301f;
	font-size: 13.5px;
	font-weight: 600;
}

.areco-viaje__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 8px;
}

.areco-viaje__campo {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.areco-viaje__campo--llegada {
	grid-column: 1 / -1;
}

.areco-viaje__campos .areco-viaje__campo label {
	display: block;
	margin: 0;
	color: #6f746c;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
}

.areco-viaje__campos .areco-viaje__campo input,
.areco-viaje__campos .areco-viaje__campo select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #d9ddd5;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: none;
	color: #24301f;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.2;
}

.areco-viaje__campos .areco-viaje__campo input:hover,
.areco-viaje__campos .areco-viaje__campo select:hover {
	border-color: #4f7a43;
}

.areco-viaje__campos .areco-viaje__campo input:focus,
.areco-viaje__campos .areco-viaje__campo select:focus {
	border-color: #4f7a43;
	outline: 2px solid #4f7a43;
	outline-offset: 1px;
}

.areco-viaje__campos .areco-viaje__nota {
	grid-column: 1 / -1;
	margin: 0;
	color: #6f746c;
	font-size: 13.5px;
	line-height: 1.4;
}

.areco-viaje__campos button.areco-viaje__borrar,
.areco-viaje__campos button.areco-viaje__borrar:hover,
.areco-viaje__campos button.areco-viaje__borrar:focus {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #3f6b35;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * "WhatsApp" de la barra y la banda: un <button> que abre la hoja, con el
 * aspecto del WhatsApp principal (que es un enlace).
 * ------------------------------------------------------------------------ */

.areco-contacto button.areco-contacto__boton--viaje,
.areco-contacto button.areco-contacto__boton--viaje:hover,
.areco-contacto button.areco-contacto__boton--viaje:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #e86238;
	border-radius: 999px;
	background: #e86238;
	box-shadow: 0 4px 14px rgba(232, 98, 56, 0.28);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	cursor: pointer;
}

.areco-contacto button.areco-contacto__boton--viaje:hover {
	border-color: #cc532e;
	background: #cc532e;
}

.areco-contacto button.areco-contacto__boton--viaje:focus-visible {
	outline: 2px solid #cc532e;
	outline-offset: 2px;
}

.areco-contacto button.areco-contacto__boton--viaje .areco-icono {
	width: 19px;
	height: 19px;
}

.areco-contacto--fila > button.areco-contacto__boton--viaje {
	flex: 3 1 auto;
}

.areco-contacto--banda .areco-contacto__botones > button.areco-contacto__boton--viaje {
	flex: 1 1 180px;
}

/* ---------------------------------------------------------------------------
 * Hoja del celular (y, en escritorio, una ventana centrada)
 * ------------------------------------------------------------------------ */

.areco-viaje-hoja {
	position: fixed;
	inset: auto 0 0 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: 92vh;
	/* En el celular vh mide la pantalla como si no estuviera la barra del navegador; dvh, lo que se ve. */
	max-height: 92dvh;
	margin: 0;
	padding: 12px 20px 20px;
	overflow: auto;
	border: 0;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: #535a50;
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	overflow-wrap: break-word;
}

.areco-viaje-hoja::backdrop {
	background: rgba(20, 26, 18, 0.5);
}

.areco-viaje-hoja__cabeza {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.areco-viaje-hoja .areco-viaje-hoja__titulo {
	margin: 4px 0 0;
	color: #24301f;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

.areco-viaje-hoja .areco-viaje-hoja__lugar {
	margin: 2px 0 0;
	color: #6f746c;
	font-size: 15px;
}

.areco-viaje-hoja button.areco-viaje-hoja__cerrar,
.areco-viaje-hoja button.areco-viaje-hoja__cerrar:hover,
.areco-viaje-hoja button.areco-viaje-hoja__cerrar:focus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f6f7f4;
	color: #24301f;
	cursor: pointer;
}

.areco-viaje-hoja .areco-viaje__vista {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 5px;
	background: #f6f7f4;
}

.areco-viaje-hoja .areco-viaje__vista-rotulo {
	margin: 0 0 4px;
	color: #6f746c;
	font-size: 12.5px;
	font-weight: 600;
}

.areco-viaje-hoja .areco-viaje__mensaje {
	margin: 0;
	color: #24301f;
	font-size: 14.5px;
	line-height: 1.45;
}

.areco-viaje-hoja a.areco-viaje__enviar,
.areco-viaje-hoja a.areco-viaje__enviar:focus,
.areco-viaje-hoja button.areco-viaje__listo,
.areco-viaje-hoja button.areco-viaje__listo:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	margin: 16px 0 0;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #bf4b27;
	box-shadow: 0 4px 14px rgba(232, 98, 56, 0.28);
	color: #fff;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.areco-viaje-hoja a.areco-viaje__enviar:hover {
	background: #a8431f;
	color: #fff;
}

.areco-viaje-hoja button.areco-viaje__listo,
.areco-viaje-hoja button.areco-viaje__listo:focus {
	background: #3f6b35;
	box-shadow: none;
}

.areco-viaje-hoja button.areco-viaje__listo:hover {
	background: #335a2b;
	color: #fff;
}

.areco-viaje-hoja a.areco-viaje__enviar .areco-icono {
	width: 21px;
	height: 21px;
}

.areco-viaje-hoja a.areco-viaje__sin-fechas,
.areco-viaje-hoja a.areco-viaje__sin-fechas:focus {
	display: block;
	margin: 14px 0 2px;
	color: #3f6b35;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* El kit de Elementor pinta de naranja los enlaces al pasar el mouse. */
.areco-viaje-hoja a.areco-viaje__sin-fechas:hover {
	color: #24301f;
}

@media (min-width: 768px) {
	.areco-viaje-hoja {
		inset: 0;
		width: min(440px, calc(100% - 32px));
		max-height: 90vh;
		margin: auto;
		border-radius: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * Listado: "¿Cuándo venís?" arriba de los filtros
 * ------------------------------------------------------------------------ */

.areco-viaje-tira {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 14px;
	padding: 10px 12px 10px 14px;
	border: 1px solid #e3e5e0;
	border-radius: 5px;
	background: #fff;
	color: #535a50;
	font-size: 14.5px;
	line-height: 1.4;
}

.areco-viaje-tira.es-elegida {
	border-color: #cfdcc8;
	background: #eef3ea;
}

.areco-viaje-tira > .areco-icono {
	flex: none;
	width: 18px;
	height: 18px;
	color: #618d53;
}

.areco-viaje-tira__texto {
	flex: 1 1 200px;
	min-width: 0;
}

.areco-viaje-tira__texto strong {
	color: #24301f;
	font-weight: 600;
}

.areco-viaje-tira button.areco-viaje-tira__boton,
.areco-viaje-tira button.areco-viaje-tira__boton:hover,
.areco-viaje-tira button.areco-viaje-tira__boton:focus {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #618d53;
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: #3f6b35;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	cursor: pointer;
}

.areco-viaje-tira button.areco-viaje-tira__boton:hover {
	background: #eef3ea;
}

.areco-viaje-tira button.areco-viaje-tira__borrar,
.areco-viaje-tira button.areco-viaje-tira__borrar:hover,
.areco-viaje-tira button.areco-viaje-tira__borrar:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #535a50;
	cursor: pointer;
}

.areco-viaje-tira button.areco-viaje-tira__borrar:hover {
	background: #fff;
}

.areco-viaje-tira button:focus-visible {
	outline: 2px solid #4f7a43;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Celular: letra un punto más grande (como en el resto del plugin).
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.areco-viaje__campos .areco-viaje__campo input,
	.areco-viaje__campos .areco-viaje__campo select {
		font-size: 16.5px;
	}

	.areco-viaje__campos .areco-viaje__campo label,
	.areco-viaje-hoja .areco-viaje__vista-rotulo {
		font-size: 13.5px;
	}

	.areco-viaje__campos .areco-viaje__nota,
	.areco-contacto .areco-viaje__titulo {
		font-size: 14.5px;
	}

	.areco-viaje-hoja .areco-viaje__mensaje,
	.areco-viaje-tira {
		font-size: 15.5px;
	}
}