/* Consultas: formulario único, panel de consulta múltiple y diálogo. */

.mdpd-consulta {
	--mdpd-consulta-radio: 0.5rem;
	/* Mismos valores que `.form-flat` de Flatsome, para que el control de
	   cantidad no se distinga de los inputs de al lado. */
	--mdpd-consulta-flat-fondo: rgba(0, 0, 0, 0.03);
	--mdpd-consulta-flat-borde: rgba(0, 0, 0, 0.09);
	/* Flatsome usa 99px: cualquier valor grande da la misma píldora. */
	--mdpd-consulta-flat-radio: 99em;
	/* El alto que Flatsome les da a inputs y selects. */
	--mdpd-consulta-flat-alto: 2.507em;
	--mdpd-consulta-icono: var(--fs-color-primary, #446084);
	display: contents;
	font-size: 0.9375rem;
}

/* Flatsome le pone margen y alto mínimo a todo lo que sea button. */
.mdpd-consulta button,
.mdpd-consulta-panel button {
	margin: 0 !important;
}

.mdpd-consulta__title {
	font-size: 1.15em;
	margin-bottom: 0.75em;
}

.mdpd-consulta__field {
	margin-bottom: 0.75em;
}

.mdpd-consulta__field label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.25em;
}

/* Obligatorio: el mismo rojo que Flatsome usa en los `abbr[title=required]`. */
.mdpd-consulta__req {
	border: 0;
	color: var(--fs-color-alert, #b20000);
	cursor: help;
	text-decoration: none;
}

.mdpd-consulta__field input,
.mdpd-consulta__field textarea {
	font-size: 1em;
	margin-bottom: 0;
	width: 100%;
}

/* Dos campos que comparten línea: fechas, y pasajeros con teléfono. */
.mdpd-consulta__par {
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.mdpd-consulta__acciones {
	margin: 0;
	text-align: right;
}

/* «Quiero que me llamen»: el checkbox del portal es un toggle (style.css), así
   que la etiqueta va al lado y no arriba como en el resto de los campos. Va con
   `.mdpd-consulta__field` adelante para ganarle al `display: block` de esas. */
.mdpd-consulta__field .mdpd-consulta__check {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9em;
	font-weight: 600;
	gap: 0.5em;
	margin: 0;
}

/* `form-flat` le pisa el fondo a todo input que no sea submit: el toggle
   necesita el suyo o el riel apagado queda invisible. */
.mdpd-consulta .mdpd-consulta__check input[type="checkbox"] {
	background-color: var(--mdpd-toggle-fondo, #d5dce0);
	border-color: var(--mdpd-toggle-borde, #c2ccd2);
}

.mdpd-consulta .mdpd-consulta__check input[type="checkbox"]:checked {
	background-color: var(--primary-color, #465f70);
	border-color: var(--primary-color, #465f70);
}

.mdpd-consulta__submit {
	font-size: 1em;
}

/* `expand` de Flatsome estira el botón, pero el contenido es un flex nuestro. */
.mdpd-consulta__submit.expand {
	justify-content: center;
}

/* Ícono dentro del campo, a la izquierda. */
.mdpd-consulta__control {
	display: block;
	position: relative;
}

.mdpd-consulta__icono {
	color: var(--mdpd-consulta-icono);
	font-size: 1.1em;
	pointer-events: none;
	position: absolute;
	right: 0.9em;
	top: 50%;
	transform: translateY(-50%);
}

/* Con `.mdpd-consulta` adelante para ganarle a `input[type=text]` de Flatsome,
   que setea el padding en shorthand. */
.mdpd-consulta .mdpd-consulta__control > input,
.mdpd-consulta .mdpd-consulta__control > textarea {
	padding-right: 2.6em;
}

/* En el textarea el ícono va arriba, a la altura de la primera línea (Flatsome
   le da 0.7em de padding arriba), no al medio de la caja. */
.mdpd-consulta__control--area .mdpd-consulta__icono {
	top: 0.8em;
	transform: none;
}

/* ---- Dos correcciones para que Flatpickr conviva con Flatsome ----
   Van sobre `.mdpd-consulta-cal`, la clase que consulta.js le pone al
   calendario: no son cuestión de estética sino de que se dibuje bien dentro
   de este tema. */

/* 1. La grilla estaba corrida y la última fila se repartía el ancho.
   En modo multi-mes Flatpickr rellena las puntas de cada mes con celdas
   marcadas `hidden`: no se ven, pero TIENEN que ocupar su lugar para que
   cada semana mida siete y los días caigan bajo su día de la semana. Solo
   les pone `visibility:hidden`, y Flatsome trae una utilidad global
   `.hidden{display:none!important}` que se las lleva puestas. Sin esas
   celdas el mes arranca pegado al lunes y la última fila queda con menos
   de siete, que es lo que `space-around` (de Flatpickr) desparrama.
   De paso vuelven a funcionar los `nth-child(7n+1/7n+7)` con que Flatpickr
   empalma el tramo del rango, que también cuentan de a siete. */
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.hidden {
	display: block !important;
	visibility: hidden !important;
}

/* 2. Al segundo mes le faltaba la última columna.
   Flatpickr mide un mes y escribe el ancho del calendario INLINE
   (`(ancho + 1) × cantidad de meses`), contando solo las grillas. Como
   Flatsome pone `box-sizing:border-box` en todo, ese ancho pasa a incluir
   el padding lateral del componente, que en la cuenta de Flatpickr no
   existía: quedan ~29px de menos y `.flatpickr-days`, que es
   `overflow:hidden`, recorta lo que sobra. Sin `!important` no se le gana
   a un estilo inline. En el celular va un solo mes y el ancho de Flatpickr da bien. */
@media (min-width: 640px) {
	.flatpickr-calendar.mdpd-consulta-cal {
		width: auto !important;
		max-width: none !important;
	}
}

/* La lista de países del teléfono, por encima de la ventana de consulta (100000). */
.iti--container, .iti__dropdown-content { z-index: 100003 !important; }

/* Calendario de la guía (23/10/2026): un campo «Llegada — Salida» + noches.
   flatpickr cuelga el calendario del body, fuera del formulario: consulta.js le
   pone `.mdpd-consulta-cal` para que estos ajustes no alcancen a otro picker. */
.mdpd-consulta__rango { cursor: pointer; }
.mdpd-consulta__noches { display: block; min-height: 1.2em; font-size: 0.8em; color: var(--mdpd-consulta-icono); margin: 0.15em 0 0 0.3em; }
.flatpickr-calendar.mdpd-consulta-cal {
	/* El calendario cuelga del <body>, fuera de .mdpd-consulta: la variable del color va acá también. */
	--mdpd-consulta-icono: var(--fs-color-primary, #446084);
	z-index: 100002 !important; /* por encima de la ventana de consulta (100000) */
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	font-family: inherit;
}
.mdpd-consulta-cal .flatpickr-day.selected, .mdpd-consulta-cal .flatpickr-day.startRange, .mdpd-consulta-cal .flatpickr-day.endRange,
.mdpd-consulta-cal .flatpickr-day.selected:hover, .mdpd-consulta-cal .flatpickr-day.startRange:hover, .mdpd-consulta-cal .flatpickr-day.endRange:hover { background: var(--mdpd-consulta-icono); border-color: var(--mdpd-consulta-icono); font-weight: 600; }
.mdpd-consulta-cal .flatpickr-day.inRange, .mdpd-consulta-cal .flatpickr-day.inRange:hover { background: color-mix(in srgb, var(--mdpd-consulta-icono) 18%, #fff); border-color: color-mix(in srgb, var(--mdpd-consulta-icono) 18%, #fff); box-shadow: -5px 0 0 color-mix(in srgb, var(--mdpd-consulta-icono) 18%, #fff), 5px 0 0 color-mix(in srgb, var(--mdpd-consulta-icono) 18%, #fff); color: #222; }
.mdpd-consulta-cal .flatpickr-day.today { border-color: color-mix(in srgb, var(--mdpd-consulta-icono) 50%, #fff); }
.mdpd-consulta-cal .flatpickr-months .flatpickr-month, .mdpd-consulta-cal .flatpickr-current-month { text-transform: capitalize; }

/* El componente usa una sola variable de texto para el día elegido y para el
   tramo del medio. Le sirve con su dorado claro, pero el color del portal es
   oscuro: sobre él el texto tiene que ser claro, y eso solo vale para los dos
   extremos del rango. */
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.selected,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.selected:hover,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.startRange,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.endRange,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.startRange:hover,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.endRange:hover {
	color: #fff !important;
}

/* Cantidad: [-] valor [+] en una sola caja, con el mismo fondo, borde, radio y
   alto que los inputs de `.form-flat`. El alto va acá y no lo pone el input de
   adentro: si no, la caja termina 2px más alta por su propio borde. */
.mdpd-consulta__qty {
	align-items: stretch;
	background-color: var(--mdpd-consulta-flat-fondo);
	border: 1px solid var(--mdpd-consulta-flat-borde);
	border-radius: var(--mdpd-consulta-flat-radio);
	display: flex;
	height: var(--mdpd-consulta-flat-alto);
	overflow: hidden;
}

.mdpd-consulta__qty-btn {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--mdpd-consulta-icono) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.15em;
	font-weight: 700;
	justify-content: center;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 2.4em;
}

.mdpd-consulta__qty-btn:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.mdpd-consulta__qty input[type="number"] {
	appearance: textfield;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 1 1 auto;
	font-weight: 700;
	height: 100%;
	-moz-appearance: textfield;
	margin: 0 !important;
	min-width: 0;
	padding: 0 !important;
	text-align: center;
	width: auto;
}

.mdpd-consulta__qty input[type="number"]::-webkit-inner-spin-button,
.mdpd-consulta__qty input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* El honeypot tiene que existir para el bot y no para la persona: fuera de
   pantalla en vez de display:none, que algunos bots detectan. */
.mdpd-consulta__hp {
	height: 1px;
	left: -9999em;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.mdpd-consulta__flash {
	border-radius: var(--mdpd-consulta-radio);
	font-size: 0.9em;
	line-height: 1.35;
}

.mdpd-consulta__flash.is-ok,
.mdpd-consulta__flash.is-error {
	margin-bottom: 0.75em;
	padding: 0.6em 0.8em;
}

.mdpd-consulta__flash.is-ok {
	background: #e7f5ec;
	color: #17663a;
}

.mdpd-consulta__flash.is-error {
	background: #fdecec;
	color: #a02222;
}

/* Lista de seleccionados: filas cortas, que ya tiene su propio scroll. */
.mdpd-consulta__items {
	list-style: none;
	margin: 0 0 1em;
	max-height: 9em;
	overflow-y: auto;
	padding: 0;
}

.mdpd-consulta__items li {
	align-items: center;
	border-bottom: 1px solid #0000001a;
	display: flex;
	font-size: 0.85em;
	gap: 0.5em;
	justify-content: space-between;
	line-height: 1.3;
	padding: 0.25em 0;
}

.mdpd-consulta__item-remove {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 1.2em;
	height: 1.4em;
	line-height: 1 !important;
	min-height: 0 !important;
	opacity: 0.6;
	padding: 0 0.25em !important;
	width: 1.6em;
}

.mdpd-consulta__item-remove:hover {
	opacity: 1;
}

/* Casillero de selección en las filas de listado */

.mdpd-consulta-check-col .col-inner {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	height: 100%;
	justify-content: center;
}

/* Botón «Consultar» de un clic: la misma píldora que ya usan mapa/cartera. */
/* button.mdpd-pill-btn... y no .mdpd-consulta-check__boton a secas: hace
   falta la especificidad extra para ganarle al border/padding de
   .mdpd-pill-btn (style.css), que también son !important. */
button.mdpd-pill-btn.mdpd-consulta-check__boton {
	border-color: #6b8592 !important;
	font-size: 0.7rem;
	padding: 0.3em 0.5em !important;
}

/* Botón de ícono solo, WhatsApp directo: solo mobile — el chip de texto de la
   columna de datos ya lo cubre en tablet/desktop (style.css, mobile-hide de
   `.mdpd-tarjeta-datos .mdpd-telephoner--wsp`, el mismo breakpoint al revés). */
.mdpd-consulta-whatsapp {
	display: none;
}

@media (max-width: 549px) {
	/* Posición y medidas: CSS del jefe de proyecto, ya editado y probado en
	   navegador (2026-08-27). Ancla contra la esquina de la tarjeta, así que
	   pide que `.mdpd-consulta-check-col` (o un ancestro suyo) sea el
	   contenedor posicionado. */
	.mdpd-consulta-whatsapp {
		align-items: center;
		background: #25d366;
		border-radius: 0 0 0 var(--mdpd-caja-radio);
		bottom: -0.5rem;
		color: #fff !important;
		display: inline-flex;
		flex: 0 0 auto;
		height: 2.5rem;
		justify-content: center;
		left: -0.6rem;
		margin: 0 !important;
		position: absolute;
		transition: background 0.15s ease;
		width: 2.5rem;
	}
}

.mdpd-consulta-whatsapp:hover,
.mdpd-consulta-whatsapp:focus-visible {
	background: #1ebe5b;
}

.mdpd-consulta-whatsapp__icon {
	font-size: 1.4rem;
}

.mdpd-consulta-check label {
	align-items: center;
	cursor: pointer;
	display: flex;
	margin: 0;
}

.mdpd-consulta-check label > span {
	align-items: center;
	display: inline-flex;
	gap: 0.4em;
}

.mdpd-consulta-check__icon {
	color: #6b8592;
	font-size: 1.6em;
}

.mdpd-consulta-check input[type="checkbox"] {
	margin: 0;
}

/* En mobile «Consultar» y la casilla de multiconsulta comparten línea (el
   salto que los separa en desktop no hace falta acá) pero siguen siendo el
   pie de la tarjeta, no un dato más: van a la derecha, igual que en desktop. */
@media (max-width: 549px) {
	.mdpd-consulta-check-col .col-inner {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding-top: 0.3em;
	}

	.mdpd-consulta-check-col {
		margin-top: 0.5em !important;
	}
}

/* Panel de consulta múltiple, arriba del listado */

/* Mismo marco que `.mdpd-caja` (style.css), que lo reusan la ficha y los datos
   del anunciante. */
.mdpd-consulta-panel {
	background: #fff;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2);
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	margin-bottom: 1.25rem;
	padding: var(--mdpd-caja-padding, 1em 1.25em);
}

.mdpd-consulta-panel__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: space-between;
}

.mdpd-consulta-panel__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.mdpd-consulta-panel__toggle,
.mdpd-consulta__submit {
	align-items: center;
	display: inline-flex;
	gap: 0.5em;
}

/* El toggle vive afuera del form, así que no le llega el radio redondeado que
   `.form-flat` le da al botón de enviar: las dos CTA tienen que verse iguales. */
.mdpd-consulta-panel__toggle {
	border-radius: 99em;
}

/* La regla de arriba le gana al display:none del atributo hidden. */
.mdpd-consulta-panel__toggle[hidden] {
	display: none;
}

/* Despliegue animado sin alto fijo: la fila del grid pasa de 0fr a 1fr. */
.mdpd-consulta-panel__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
	visibility: hidden;
}

.mdpd-consulta-panel.is-open .mdpd-consulta-panel__body {
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.28s ease, visibility 0s;
	visibility: visible;
}

.mdpd-consulta-panel__body-inner {
	/* El formulario se parte en dos columnas según el ancho de esta caja, no el de
	   la pantalla: en la columna lateral de una ficha va siempre en una sola. */
	container-type: inline-size;
	min-height: 0;
	overflow: hidden;
}

/* La separación con el encabezado va como margen adentro del contenedor que
   recorta, y no como padding: el padding se ve igual con la fila en 0fr y deja
   la barra con aire de más cuando el formulario está plegado. */
.mdpd-consulta--panel .mdpd-consulta__flash {
	margin-top: 1em;
}

.mdpd-consulta__seleccion {
	margin-bottom: 1em;
}

.mdpd-consulta__seleccion-head {
	align-items: baseline;
	display: flex;
	gap: 0.75em;
	justify-content: space-between;
	margin: 0 0 0.35em;
}

.mdpd-consulta__count {
	font-size: 0.85em;
	font-weight: 600;
}

.mdpd-consulta__select-all {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
}

.mdpd-consulta__select-all[hidden] {
	display: none;
}

/* Diálogo */

/* Backdrop de punta a punta de la pantalla — el propio [data-mdpd-modal].
   Nivel 1 de la escala de z-index del portal (style.css, :root): plano, sin
   "top layer", así Flatpickr (nivel 2) y Tooltipster (nivel 3) se dibujan
   arriba con un z-index de toda la vida. Ver assets/mdpd-modal.js. */
.mdpd-consulta-dialog {
	display: none;
	align-items: center;
	background: #00000073;
	inset: 0;
	justify-content: center;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1rem;
	position: fixed;
	z-index: var(--mdpd-z-dialog);
}

.mdpd-consulta-dialog.mdpd-modal--open {
	display: flex;
}

.mdpd-consulta-dialog__panel {
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1rem 3rem #00000040;
	max-width: 28rem;
	padding: 1.5em;
	position: relative;
	width: 100%;
}

.mdpd-consulta-dialog__close {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0.2em !important;
	position: absolute;
	right: 0.5em;
	top: 0.4em;
}

/* Pie: a quién le llega la consulta. Lo clona consulta.js de la tarjeta que
   abrió el diálogo, así que arranca vacío y oculto. */
.mdpd-consulta-dialog__pie {
	border-top: 1px solid var(--mdpd-caja-borde, #f2f2f2);
	font-size: 0.95rem;
	margin-top: 1em;
	padding-top: 1em;
}

.mdpd-consulta-dialog__pie[hidden] {
	display: none;
}

.mdpd-consulta-dialog__pie .mdpd-inmo-firma {
	margin-bottom: 0;
}

/* Formulario en la barra lateral de la ficha */

.mdpd-consulta--ficha .mdpd-consulta__title {
	margin-top: 0;
}

/* Con ancho de sobra: datos a la izquierda, mensaje a la derecha. */
@container (min-width: 40em) {
	.mdpd-consulta--panel .mdpd-consulta__grid {
		display: grid;
		gap: 0 1.5em;
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-consulta--panel .mdpd-consulta__col--mensaje {
		display: flex;
		flex-direction: column;
	}

	.mdpd-consulta--panel .mdpd-consulta__field--mensaje,
	.mdpd-consulta--panel .mdpd-consulta__field--mensaje .mdpd-consulta__control {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.mdpd-consulta--panel .mdpd-consulta__field--mensaje textarea {
		flex: 1 1 auto;
		min-height: 6em;
		resize: vertical;
	}
}


/* ---------------------------------------------------------------------------
   Mejoras guía (22/10/2026): teléfono con bandera, chips WhatsApp / llamada y «fechas flexibles».
   --------------------------------------------------------------------------- */
.mdpd-consulta .mdpd-consulta__control--tel .iti {
	display: block;
	width: 100%;
}

.mdpd-consulta .mdpd-consulta__control--tel .iti input[type="tel"] {
	padding-right: 0.9em;
	width: 100%;
}

.mdpd-consulta .iti__dropdown-content {
	font-size: 0.95em;
	z-index: 1001;
}

.mdpd-consulta__field--extras {
	margin-bottom: 0.6em;
}