/* Quidra Frontend — estilos estructurales */
/* Los colores y bordes se controlan via --quidra-* CSS variables */

*, *::before, *::after {
	box-sizing: border-box;
}

/* ─── Botones ─────────────────────────────────────── */
.quidra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	font-size: var(--quidra-font-size-base, 16px);
	font-family: var(--quidra-font-family, sans-serif);
	font-weight: 500;
	/* Radio/ancho por defecto para botones fuera del buscador (p. ej. "Ver
	   vídeo" o "Enviar mensaje" en la página individual) — dentro del
	   buscador/filtros, cada plantilla de Área 2 los sobreescribe. */
	border-radius: var(--quidra-general-border-radius, 8px);
	border: var(--quidra-general-border-width, 1px) solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.1s;
}

.quidra-btn:active { transform: scale(0.98); }

.quidra-btn--primary {
	background: var(--quidra-color-primary, #2563eb);
	color: #fff;
	border-color: var(--quidra-color-primary, #2563eb);
}
.quidra-btn--primary:hover { opacity: 0.88; color: #fff; }

.quidra-btn--secondary {
	background: var(--quidra-color-secondary, #1e40af);
	color: #fff;
	border-color: var(--quidra-color-secondary, #1e40af);
}
.quidra-btn--secondary:hover { opacity: 0.88; color: #fff; }

.quidra-btn--ghost {
	background: transparent;
	color: var(--quidra-color-primary, #2563eb);
	border-color: var(--quidra-general-border-color, #e5e7eb);
}
.quidra-btn--ghost:hover { border-color: var(--quidra-color-primary, #2563eb); }

.quidra-btn--lg { padding: 13px 28px; font-size: calc(var(--quidra-font-size-base, 16px) + 1px); }
.quidra-btn--full { width: 100%; }

/* Solo icono, sin texto: cuadrado en vez de rectángulo con padding de
   texto (botones "Filtrar"/"Limpiar"/"Buscar propiedades"). */
.quidra-btn--icon {
	padding: 10px;
	flex: 0 0 auto;
}
.quidra-btn--icon.quidra-btn--lg { padding: 13px; }
.quidra-btn--icon svg { display: block; }

/* ─── Badges ──────────────────────────────────────── */
.quidra-badge {
	/* Controlado desde Style → Card style: mostrar/ocultar, tamaño, forma
	   y color son el mismo componente tanto en la tarjeta como en la
	   cabecera de la página individual — un único juego de controles en
	   vez de mantener dos sistemas de badge en paralelo. */
	display: var(--quidra-badge-display, inline-block);
	box-sizing: border-box;
	width: var(--quidra-badge-width, auto);
	text-align: var(--quidra-badge-align, left);
	padding: var(--quidra-badge-padding-y, 3px) var(--quidra-badge-padding-x, 10px);
	/* !important por la misma razón que el título/ubicación/precio/meta de
	   la tarjeta: algunos temas (Avada, Divi...) fuerzan el tamaño de
	   elementos tipo etiqueta/badge con su propia especificidad. */
	font-size: var(--quidra-card-badge-size, 11px) !important;
	/* Sin un valor propio, el badge hereda el line-height ambiente de la
	   página (grande en el tema real del sitio, pequeño en wp-admin) — con
	   padding-y en 0 ese interlineado heredado es el único espacio vertical
	   alrededor del texto, y difiere entre la vista previa y el front aunque
	   el padding configurado sea idéntico. Valor fijado a petición explícita
	   del usuario tras comparar preview/front (1 quedaba sin aire, 1.4 aún
	   insuficiente) — sin unidad, así que escala proporcional con cualquier
	   tamaño de fuente configurado (9-18px) y da el mismo resultado en
	   preview y en front, sin depender del interlineado del tema. */
	line-height: 2 !important;
	font-weight: var(--quidra-badge-weight, 700);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--quidra-badge-radius, 6px);
	border: var(--quidra-badge-border-width, 0) solid var(--quidra-badge-border-color, transparent);
	color: var(--quidra-badge-text-color, #fff);
}

.quidra-badge--sale          { background: var(--quidra-badge-color-sale, #2563eb); }
.quidra-badge--rent          { background: var(--quidra-badge-color-rent, #f59e0b); }
.quidra-badge--vacation      { background: var(--quidra-badge-color-vacation, #1e40af); }

/* Badge "Destacado": independiente del badge de operación (secciones de
   estilo separadas a petición explícita), ocupa el hueco que deja libre
   sobre la imagen ahora que el badge de operación se movió encima del
   título. */
.quidra-highlight-badge {
	display: var(--quidra-highlight-badge-display, inline-block);
	box-sizing: border-box;
	width: var(--quidra-highlight-badge-width, auto);
	text-align: var(--quidra-highlight-badge-align, left);
	padding: var(--quidra-highlight-badge-padding-y, 3px) var(--quidra-highlight-badge-padding-x, 10px);
	font-size: var(--quidra-highlight-badge-size, 11px) !important;
	line-height: 2 !important;
	font-weight: var(--quidra-highlight-badge-weight, 700);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--quidra-highlight-badge-radius, 6px);
	border: var(--quidra-highlight-badge-border-width, 0) solid var(--quidra-highlight-badge-border-color, transparent);
	color: var(--quidra-highlight-badge-text-color, #fff);
	background: var(--quidra-highlight-badge-bg, #f59e0b);
}

/* ─── Property Card ───────────────────────────────── */
.quidra-card {
	display: flex;
	flex-direction: column;
	/* !important: algunos temas/page builders (Avada, Divi, Elementor...)
	   centran el texto por defecto a nivel de columna/contenedor (viene
	   heredado, no de una regla en h1-h6 concreta), lo que en producción
	   (NEGOHOME) centraba el título Y el precio de la tarjeta. Se fija aquí,
	   a nivel de tarjeta, para que TODO el texto interno sea consistente
	   sin tener que repetir text-align en cada elemento uno a uno; los
	   elementos flex (ubicación, meta) no dependen de esto pero no les
	   afecta negativamente. */
	text-align: left !important;
	/* !important: algunos temas resetean article/height en sus estilos
	   globales; sin esto la tarjeta no se estira a la altura de la fila
	   y el bloque precio+características no puede fijarse al fondo. */
	height: 100% !important;
	/* min-width:0 a propósito: sin esto, un item de grid/flex no se encoge
	   por debajo del ancho mínimo de su contenido — si algo dentro (p. ej.
	   la fila de hab./baños/m² sin wrap) es más ancho que la columna
	   asignada, la tarjeta entera crece y rompe el layout del contenedor
	   padre en vez de dejar que ese contenido interno maneje su propio
	   overflow. */
	min-width: 0;
	background: var(--quidra-card-bg, #fff);
	border: var(--quidra-card-border-width, 1px) solid var(--quidra-card-border-color, #e5e7eb) !important;
	border-radius: var(--quidra-card-border-radius, 8px);
	box-shadow: var(--quidra-card-shadow, 0 2px 8px rgba(0,0,0,0.08)) !important;
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}

.quidra-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}

.quidra-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.quidra-card__image {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: var(--quidra-card-image-ratio, 4/3);
	overflow: hidden;
}

.quidra-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.quidra-card:hover .quidra-card__image img {
	transform: scale(1.04);
}

.quidra-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

/* ─── Carrusel de imágenes de la tarjeta ──────────── */
.quidra-card__carousel {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Especificidad ligeramente mayor que ".quidra-card__image img" a
   propósito, para que la transición de opacidad no quede pisada por esa
   regla más genérica (ambas fijan "transition" sobre el mismo <img>). */
.quidra-card__image .quidra-card__carousel-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.quidra-card__image .quidra-card__carousel-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.quidra-card__carousel-btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s, background 0.2s;
}

.quidra-card:hover .quidra-card__carousel-btn { opacity: 1; }
.quidra-card__carousel-btn:hover { background: rgba(0, 0, 0, 0.7); }
.quidra-card__carousel-btn--prev { left: 8px; }
.quidra-card__carousel-btn--next { right: 8px; }

.quidra-card__carousel-dots {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 5px;
}

.quidra-card__carousel-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.quidra-card__carousel-dot.is-active {
	background: #fff;
	transform: scale(1.3);
}

.quidra-card__image .quidra-highlight-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	/* Por encima del slide activo del carrusel (z-index: 1), que si no lo
	   tapa visualmente incluso con una sola imagen. */
	z-index: 2;
}

.quidra-card__body > .quidra-badge {
	margin-bottom: 10px;
	/* .quidra-card__body es flex column; sin esto el badge, como hijo
	   directo, se estira al 100% del ancho por el align-self:stretch por
	   defecto de flex — pisando el "inline-block" propio del badge y
	   haciendo que el padding configurado se vea como una franja completa
	   en vez de una píldora ajustada al texto. */
	align-self: flex-start;
}

.quidra-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding: var(--quidra-card-padding, 16px);
}

.quidra-card__title {
	margin: 0 0 6px;
	/* !important a propósito: los temas basados en page builders (Avada,
	   Divi...) suelen forzar el tamaño de los encabezados (h1-h6) con alta
	   especificidad o su propio !important, pisando el tamaño configurado
	   aquí si no lo protegemos igual. Lo mismo con text-transform: algunos
	   temas ponen Title Case por defecto en los headings, y con text-align:
	   muchos centran los h1-h6 por defecto (visto en producción en
	   NEGOHOME), dejando el título de la tarjeta centrado en vez de
	   alineado a la izquierda como el resto del contenido. */
	font-size: var(--quidra-card-title-size, calc(var(--quidra-font-size-base, 16px) * 0.9375)) !important;
	font-weight: var(--quidra-card-title-weight, 600) !important;
	color: var(--quidra-card-title-color, #1f2937) !important;
	text-transform: none !important;
	text-align: left !important;
	line-height: 1.4;
}

.quidra-card__location {
	margin: 0 0 8px;
	font-size: var(--quidra-card-location-size, calc(var(--quidra-font-size-base, 16px) * 0.8125)) !important;
	color: var(--quidra-card-location-color, #6b7280);
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Agrupa precio + características en un solo bloque empujado al fondo de la
   tarjeta con margin-top:auto — así título/ubicación quedan siempre arriba
   y precio/características siempre abajo, sin importar cuántas líneas
   ocupe el título. Antes el margin-top:auto vivía solo en <p class=
   "quidra-card__price">, y algunos temas/resets globales de <p> (Avada,
   Divi...) pueden pisar ese margen con su propia especificidad, dejando
   precio y características flotando a media altura con un hueco debajo.
   Puesto en un <div> propio con !important, no depende de cómo el tema
   trate los márgenes de párrafo. */
.quidra-card__bottom {
	margin-top: auto !important;
}

.quidra-card__price {
	margin: 0 0 10px;
	font-size: var(--quidra-card-price-size, calc(var(--quidra-font-size-base, 16px) * 1.125)) !important;
	font-weight: 700;
	color: var(--quidra-card-price-color, var(--quidra-color-primary, #2563eb));
}

.quidra-card__meta {
	display: flex;
	gap: 12px;
	/* nowrap a propósito: con habitaciones/baños/m² de varios dígitos
	   (p. ej. "123 m²"), permitir el wrap partía la fila en dos líneas y
	   rompía la alineación entre tarjetas de un mismo grid/carrusel. Si de
	   verdad no cupiera en tarjetas muy estrechas, se desliza en horizontal
	   en vez de romper el layout. */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.quidra-card__meta::-webkit-scrollbar { display: none; }

.quidra-card__meta-item {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	white-space: nowrap;
	font-size: var(--quidra-card-meta-size, calc(var(--quidra-font-size-base, 16px) * 0.8125)) !important;
	color: var(--quidra-card-meta-color, #6b7280);
}

.quidra-card__meta-item svg {
	width: var(--quidra-card-meta-icon-size, 14px);
	height: var(--quidra-card-meta-icon-size, 14px);
}

/* ─── Grid ────────────────────────────────────────── */
.quidra-grid {
	display: grid;
	/* Explícito a propósito (es el valor por defecto, pero un tema podría
	   pisarlo): todas las tarjetas de una misma fila deben estirarse a la
	   misma altura para que el bloque precio+características de cada una
	   pueda alinearse siempre al fondo. */
	align-items: stretch;
	gap: var(--quidra-card-grid-gap, 24px);
}

.quidra-grid--cols-1 { grid-template-columns: 1fr; }
.quidra-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.quidra-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.quidra-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.quidra-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.quidra-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.quidra-grid--cols-2,
	.quidra-grid--cols-3,
	.quidra-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ─── Paginación ──────────────────────────────────── */
.quidra-pagination--prev-next {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.quidra-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

.quidra-load-more__spinner {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid var(--quidra-card-border-color, #e5e7eb);
	border-top-color: var(--quidra-color-primary, #2563eb);
	animation: quidra-spin 0.7s linear infinite;
}

@keyframes quidra-spin {
	to { transform: rotate(360deg); }
}

/* ─── Listado con filtros ─────────────────────────── */
.quidra-listings {
	font-family: var(--quidra-font-family, sans-serif);
	color: var(--quidra-card-title-color, #1f2937);
}

/* ─── Filtros ─────────────────────────────────────── */
.quidra-filters {
	margin-bottom: 24px;
}

/* El fondo/radio/padding de la caja contenedora (compartidos con
   .quidra-search-bar__form) se definen junto al resto de reglas del Área 2
   más abajo. */

/* Fila de campos forzada a una sola línea: en vez de envolver a una
   segunda fila (que rompe el diseño), se encoge con flex y, si aun así
   no cabe, se desplaza con scroll horizontal. */
.quidra-filters__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: flex-end;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 2px;
}

.quidra-filters__group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 130px;
	min-width: 110px;
}

.quidra-filters__actions {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
}

/* ">" a propósito, misma razón que la regla de labels-placeholder más abajo:
   solo la etiqueta del campo (hijo directo), no cualquier <label> anidado
   más adentro — las filas de checkbox del desplegable de Habitaciones
   también son <label> y heredaban este estilo (mayúsculas, gris, 12px). */
.quidra-filters__group > label {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.quidra-filters__count {
	width: 100%;
	margin: 8px 0 0;
	font-size: 13px;
	color: #6b7280;
}

/* ─── Área 2: estilo de buscadores ───────────────────────────────────
   Comparten estos ajustes tanto la barra de filtros del listado
   (.quidra-filters) como el buscador hero (.quidra-search-bar): mismo alto
   de campo/botón, mismos colores/bordes/esquinas, y 3 plantillas de partida
   (boxed/pill/underline) que solo cambian dónde se dibuja el borde/fondo,
   no la estructura del HTML. La tipografía no se repite aquí: la definen
   las variables --quidra-font-* del Área 1 (Estilo general). */

/* Caja contenedora: fondo y radio comunes a filtros y buscador (los
   estilos "pill"/"underline" la vuelven transparente más abajo). */
.quidra-filters__form,
.quidra-search-bar__form {
	background: var(--quidra-search-container-bg, #fff) !important;
	border-radius: var(--quidra-search-border-radius, 8px) !important;
	padding: 16px;
}

/* Altura uniforme en todos los campos y en el botón.
   !important: el wp-admin (para el preview en vivo del tab Style) y algunos
   temas de frontend (Avada) traen sus propios estilos de base para
   input/select/button con la misma o mayor especificidad — ver la misma
   necesidad ya documentada para la tipografía de la tarjeta más arriba. */
.quidra-filters__group input,
.quidra-filters__group .quidra-select__trigger,
.quidra-filters__actions .quidra-btn,
.quidra-search-bar__field input,
.quidra-search-bar__field .quidra-select__trigger,
.quidra-search-bar__submit .quidra-btn {
	height: var(--quidra-search-field-height, 44px) !important;
	box-sizing: border-box;
}

.quidra-filters__group input,
.quidra-filters__group select,
.quidra-search-bar__field input,
.quidra-search-bar__field select,
.quidra-select__trigger {
	width: 100%;
	min-width: 0;
	padding: 0 12px;
	font-size: var(--quidra-font-size-base, 16px);
	font-family: var(--quidra-font-family, sans-serif);
	color: var(--quidra-search-text-color, #1f2937) !important;
}

/* Plantilla "boxed" (por defecto): caja contenedora con borde y cada campo
   con su propio borde/fondo. */
.quidra-search--style-boxed .quidra-filters__form,
.quidra-search--style-boxed .quidra-search-bar__form {
	border: var(--quidra-search-border-width, 1px) solid var(--quidra-search-border-color, #e5e7eb) !important;
}

.quidra-search--style-boxed .quidra-filters__group input,
.quidra-search--style-boxed .quidra-filters__group select,
.quidra-search--style-boxed .quidra-search-bar__field input,
.quidra-search--style-boxed .quidra-search-bar__field select,
.quidra-search--style-boxed .quidra-select__trigger {
	background: var(--quidra-search-bg, #fff) !important;
	border: var(--quidra-search-border-width, 1px) solid var(--quidra-search-border-color, #e5e7eb) !important;
	border-radius: calc(var(--quidra-search-border-radius, 8px) * 0.6) !important;
}

/* El botón usa el mismo radio que los campos en cada plantilla — antes solo
   se ajustaba en "pill", así que en "boxed"/"underline" se quedaba con el
   radio del Área 1 general, desentonando con las esquinas de los campos. */
.quidra-search--style-boxed .quidra-filters__actions .quidra-btn,
.quidra-search--style-boxed .quidra-search-bar__submit .quidra-btn {
	border-radius: calc(var(--quidra-search-border-radius, 8px) * 0.6) !important;
}

/* Plantilla "pill": la fila de campos entera es la píldora con borde;
   cada campo pierde su propio borde/fondo para fundirse con ella. */
.quidra-search--style-pill .quidra-filters__row,
.quidra-search--style-pill .quidra-search-bar__fields {
	background: var(--quidra-search-container-bg, #fff) !important;
	border: var(--quidra-search-border-width, 1px) solid var(--quidra-search-border-color, #e5e7eb) !important;
	border-radius: var(--quidra-search-border-radius, 999px) !important;
	padding: 6px;
}

.quidra-search--style-pill .quidra-filters__form,
.quidra-search--style-pill .quidra-search-bar__form {
	background: transparent !important;
	padding: 0;
}

.quidra-search--style-pill .quidra-filters__group input,
.quidra-search--style-pill .quidra-filters__group select,
.quidra-search--style-pill .quidra-search-bar__field input,
.quidra-search--style-pill .quidra-search-bar__field select,
.quidra-search--style-pill .quidra-select__trigger {
	background: transparent !important;
	border: none !important;
	border-radius: var(--quidra-search-border-radius, 999px) !important;
}

.quidra-search--style-pill .quidra-filters__actions .quidra-btn,
.quidra-search--style-pill .quidra-search-bar__submit .quidra-btn {
	border-radius: var(--quidra-search-border-radius, 999px) !important;
}

/* Plantilla "underline": sin cajas, solo una línea bajo cada campo. */
.quidra-search--style-underline .quidra-filters__form,
.quidra-search--style-underline .quidra-search-bar__form {
	background: transparent !important;
	padding: 0;
}

.quidra-search--style-underline .quidra-filters__group input,
.quidra-search--style-underline .quidra-filters__group select,
.quidra-search--style-underline .quidra-search-bar__field input,
.quidra-search--style-underline .quidra-search-bar__field select,
.quidra-search--style-underline .quidra-select__trigger {
	background: transparent !important;
	border: none !important;
	border-bottom: var(--quidra-search-border-width, 1px) solid var(--quidra-search-border-color, #e5e7eb) !important;
	border-radius: 0 !important;
	padding-left: 4px;
	padding-right: 4px;
}

/* El botón sí es una caja sólida (no una línea), así que conserva el mismo
   radio proporcional que en "boxed" en vez de ir a 0 como los campos. */
.quidra-search--style-underline .quidra-filters__actions .quidra-btn,
.quidra-search--style-underline .quidra-search-bar__submit .quidra-btn {
	border-radius: calc(var(--quidra-search-border-radius, 8px) * 0.6) !important;
}

/* Etiquetas: fuera del campo (por defecto) u ocultas visualmente para que
   solo se vea el placeholder (siguen en el DOM para lectores de pantalla).
   ">" a propósito: solo la etiqueta del campo en sí (hijo directo del
   grupo), no cualquier <label> anidado más adentro — un checkbox del
   desplegable de Habitaciones también es un <label>, y sin este límite
   quedaba igualmente colapsado a 1px, invisible. */
.quidra-search--labels-placeholder .quidra-filters__group > label,
.quidra-search--labels-placeholder .quidra-search-bar__field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Dropdown personalizado (reemplaza el <select> nativo) ───────── */
/* Se usa tanto en los filtros del listado como en el buscador; el
   <select> original se mantiene en el DOM (oculto) para que el formulario
   siga enviando su valor con normalidad. */
.quidra-select {
	position: relative;
	width: 100%;
}

.quidra-select__native {
	display: none;
}

.quidra-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s;
}

.quidra-select__trigger:hover,
.quidra-select__trigger:focus-visible {
	border-color: var(--quidra-color-primary, #2563eb);
	outline: none;
}

.quidra-select.is-open .quidra-select__trigger {
	border-color: var(--quidra-color-primary, #2563eb);
}

.quidra-select__label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.quidra-select__arrow {
	flex-shrink: 0;
	color: #9ca3af;
	transition: transform 0.2s;
}

.quidra-select.is-open .quidra-select__arrow {
	transform: rotate(180deg);
}

/* Panel de opciones: alineado abajo del trigger, con animación al abrir.
   position:fixed (no absolute) a propósito: la fila de filtros necesita
   overflow-x:auto para el scroll horizontal de una sola línea, y eso recorta
   a cualquier descendiente position:absolute que intente salir de su caja
   (el panel se abría pero quedaba invisible, recortado por la propia fila).
   fixed no respeta ese recorte porque se posiciona contra el viewport; su
   top/left/width se calculan en JS (ver positionSelectPanel() en
   frontend.js) cada vez que se abre. */
.quidra-select__panel {
	position: fixed;
	z-index: 9999;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--quidra-search-bg, #fff);
	border: var(--quidra-search-border-width, 1px) solid var(--quidra-search-border-color, #e5e7eb);
	/* min() con un tope propio: el panel de opciones no debe heredar
	   literalmente el radio del campo. En la plantilla "pill" el campo usa
	   999px, y aplicado tal cual a un panel alto y estrecho da una forma de
	   "estadio" que no encaja con una lista de opciones. */
	border-radius: min(calc(var(--quidra-search-border-radius, 8px) * 0.6), 14px);
	box-shadow: var(--quidra-search-shadow, 0 4px 16px rgba(0,0,0,0.14));
	max-height: 0;
	overflow: hidden auto;
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height 0.22s ease, opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.quidra-select.is-open .quidra-select__panel {
	max-height: 260px;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.quidra-select__option {
	padding: 9px 12px;
	border-radius: min(calc(var(--quidra-search-border-radius, 8px) * 0.4), 8px);
	font-size: var(--quidra-font-size-base, 16px);
	font-family: var(--quidra-font-family, sans-serif);
	color: var(--quidra-search-text-color, #1f2937);
	cursor: pointer;
	white-space: nowrap;
}

.quidra-select__option:hover,
.quidra-select__option.is-selected {
	background: var(--quidra-color-primary, #2563eb);
	color: #fff;
}

/* Filas de checkbox (p. ej. Habitaciones): a diferencia de las opciones de
   un select normal, aquí no se resalta toda la fila en azul al pasar el
   ratón — solo la propia casilla comunica el estado marcado/desmarcado,
   varias filas pueden estar activas a la vez. */
.quidra-multiselect__option {
	display: flex;
	align-items: center;
	gap: 8px;
}

.quidra-multiselect__option:hover {
	background: var(--quidra-general-bg-alt, #f3f4f6);
	color: inherit;
}

.quidra-multiselect__option input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--quidra-color-primary, #2563eb);
	cursor: pointer;
}

/* ─── Lista item ──────────────────────────────────── */
.quidra-list { display: flex; flex-direction: column; gap: 16px; }

.quidra-list-item {
	display: grid;
	grid-template-columns: 240px 1fr auto;
	gap: 20px;
	align-items: start;
	background: var(--quidra-card-bg, #fff);
	border: var(--quidra-card-border-width, 1px) solid var(--quidra-card-border-color, #e5e7eb);
	border-radius: var(--quidra-card-border-radius, 8px);
	box-shadow: var(--quidra-card-shadow, 0 2px 8px rgba(0,0,0,0.08));
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.quidra-list-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

.quidra-list-item__image-wrap {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.quidra-list-item__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quidra-list-item__body { padding: 16px 0; }
.quidra-list-item__aside { padding: 16px; text-align: right; }

.quidra-list-item__title a {
	/* Reutiliza los colores de la tarjeta en cuadrícula (Área 3) para que
	   Grid y Lista se vean consistentes entre sí, en vez de duplicar
	   controles casi idénticos. */
	color: var(--quidra-card-title-color, #1f2937);
	text-decoration: none;
	font-weight: 600;
}

.quidra-list-item__price {
	font-size: calc(var(--quidra-font-size-base, 16px) * 1.25);
	font-weight: 700;
	color: var(--quidra-card-price-color, #2563eb);
	margin: 0 0 12px;
}

.quidra-list-item__meta {
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: #6b7280;
	margin: 6px 0;
}

.quidra-list-item__desc {
	font-size: 13px;
	color: #6b7280;
	margin: 8px 0 0;
}

@media (max-width: 768px) {
	.quidra-list-item {
		grid-template-columns: 1fr;
	}
	.quidra-list-item__aside {
		text-align: left;
		padding: 0 16px 16px;
	}
}

/* ─── Buscador ────────────────────────────────────── */
.quidra-search-bar {
	font-family: var(--quidra-font-family, sans-serif);
}

.quidra-search-bar__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.quidra-search-bar__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 160px;
}

/* ">" a propósito: mismo motivo que .quidra-filters__group > label — solo
   la etiqueta del campo, no un <label> anidado más adentro (p. ej. si este
   buscador incorpora en el futuro un desplegable de selección múltiple). */
.quidra-search-bar__field > label {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
}

.quidra-search-bar__submit { align-self: flex-end; }

/* ─── Ficha (Single) ──────────────────────────────── */
/* Scroll suave al navegar por ancla (Vídeo/Plano/Tour virtual/Mapa) en vez
   del salto instantáneo por defecto del navegador — esta hoja solo se
   carga en páginas con contenido de Quidra, así que no afecta al resto del
   sitio. */
html { scroll-behavior: smooth; }

.quidra-single {
	font-family: var(--quidra-font-family, sans-serif);
	color: var(--quidra-general-text-color, #1f2937);
	max-width: 1200px;
	margin: 0 auto;
	/* Colchón contra cabeceras de tema en modo "transparente/superpuesto"
	   (p. ej. Avada): están pensadas para flotar sobre una imagen de héroe
	   grande, pero la ficha de propiedad no tiene esa imagen arriba, así
	   que la cabecera flota directamente sobre el título/precio en su
	   lugar. La solución de raíz es desactivar esa transparencia para las
	   páginas de propiedad desde el tema; esto es un colchón calibrado a
	   ojo mientras tanto — puede necesitar ajuste fino en el sitio real. */
	padding-top: 110px;
}

@media (max-width: 782px) {
	.quidra-single {
		padding-top: 70px;
	}
}

/* El operativo (Venta/Alquiler) ya se lee en el propio título ("... en
   venta en ..."/"... en alquiler en ..."), así que el badge de operación se
   reserva para las tarjetas de listado (donde no hay título largo que lo
   diga) y no se repite aquí — título arriba, y debajo la línea de
   ubicación+precio ambos alineados en la misma fila. */
.quidra-single__header {
	margin-bottom: 24px;
}

/* !important: igual que el título de las tarjetas, el h1 de temas basados
   en page builders (Avada) trae su propio tamaño/color con más
   especificidad y pisa el valor configurado aquí sin esto. */
.quidra-single__title {
	font-size: var(--quidra-general-title-size, 24px) !important;
	color: var(--quidra-general-title-color, #1f2937) !important;
	text-transform: none !important;
	line-height: 1.25;
	margin: 0 0 4px;
}

.quidra-single__address {
	color: #6b7280;
	margin: 0;
}

/* Ubicación y precio en la misma línea, alineados a la derecha el precio,
   en vez de apilados uno debajo del otro. */
.quidra-single__meta-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 4px;
}

.quidra-single__price-wrap {
	text-align: right;
	margin: 0;
}

@media (max-width: 600px) {
	.quidra-single__meta-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.quidra-single__price-wrap {
		text-align: left;
	}
}

.quidra-single__price {
	font-size: var(--quidra-general-price-size, 32px) !important;
	font-weight: 700;
	color: var(--quidra-general-price-color, #2563eb) !important;
	margin: 0;
	white-space: nowrap;
}

.quidra-single__price-old {
	font-size: calc(var(--quidra-font-size-base, 16px) * 1.1);
	color: #9ca3af;
	text-decoration: line-through;
	margin: 4px 0 0;
}

/* Galería */
.quidra-single__gallery { margin-bottom: 32px; }

.quidra-gallery__main {
	position: relative;
}

.quidra-gallery__main img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--quidra-general-border-radius, 8px);
	cursor: pointer;
}

/* Flechas de navegación superpuestas a cada lado de la imagen principal. */
.quidra-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s;
	z-index: 2;
}

.quidra-gallery__nav:hover { background: rgba(0, 0, 0, 0.7); }
.quidra-gallery__nav--prev { left: 12px; }
.quidra-gallery__nav--next { right: 12px; }

/* Indicador "cámara + X / N" sobre la foto principal, compartido por ambas
   plantillas (el contenedor padre ya tiene position:relative en las dos). */
.quidra-gallery__counter {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	z-index: 2;
}

/* Una sola fila siempre: con muchas fotos se convierte en un slide con
   scroll horizontal en vez de envolver a varias filas. */
.quidra-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

.quidra-gallery__thumb {
	flex: 0 0 auto;
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: calc(var(--quidra-general-border-radius, 8px) * 0.5);
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s;
	opacity: 0.7;
}

.quidra-gallery__thumb.active,
.quidra-gallery__thumb:hover {
	border-color: var(--quidra-color-primary, #2563eb);
	opacity: 1;
}

/* Botón "Ver más" al final de la fila: mismo tamaño que una miniatura. */
.quidra-gallery__more {
	flex: 0 0 auto;
	width: 80px;
	height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--quidra-general-bg, #f3f4f6);
	border: 2px solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: calc(var(--quidra-general-border-radius, 8px) * 0.5);
	color: var(--quidra-general-text-color, #1f2937);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.2s;
}

.quidra-gallery__more:hover { border-color: var(--quidra-color-primary, #2563eb); }

/* ─── Galería estilo Idealista (plantilla PRO) ──────────────────── */
/* Mismas columnas que .quidra-single__body (1fr + 340px) a propósito: así
   la foto principal queda alineada con el contenido del anuncio, y las dos
   fotos pequeñas quedan alineadas con el ancho exacto de la barra lateral,
   en vez de un reparto de ancho arbitrario (2fr/1fr) que no coincidía con
   nada más abajo en la página. */
.quidra-gallery-idealista {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 8px;
	margin-bottom: 12px;
}

.quidra-gallery-idealista__main {
	position: relative;
	/* aspect-ratio (no min/max-height) a propósito: define la altura real de
	   la fila del grid a partir de la foto principal, y .quidra-gallery-
	   idealista__side (align-items:stretch, por defecto en grid) se estira
	   para igualar esa misma altura en vez de manejar la suya propia — así
	   la foto de la izquierda es la que manda el alto, como se pidió.
	   min-height:0 (ver también __side y __side-img más abajo): un elemento
	   de grid tiene por defecto min-height:auto, que usa el tamaño NATURAL
	   (sin comprimir) de su contenido como mínimo — con fotos reales de
	   varios miles de píxeles de alto, eso puede inflar la altura de TODA la
	   fila del grid muy por encima del aspect-ratio pedido aquí. Chrome lo
	   disimula en la práctica; Firefox aplica la regla al pie de la letra y
	   deja un hueco en blanco bajo la foto principal (bug real confirmado
	   con las DevTools del usuario: la fila medía ~915px cuando la foto solo
	   ocupaba ~470px). min-height:0 permite que el elemento se encoja al
	   tamaño que el aspect-ratio/height:100% realmente piden. */
	min-height: 0;
	aspect-ratio: 16 / 11;
}

.quidra-gallery-idealista__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--quidra-general-border-radius, 8px);
	cursor: pointer;
}

.quidra-gallery-idealista__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	height: 100%;
	min-height: 0;
}

.quidra-gallery-idealista__side-img {
	position: relative;
	overflow: hidden;
	min-height: 0;
	border-radius: var(--quidra-general-border-radius, 8px);
}

.quidra-gallery-idealista__side-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
}

.quidra-gallery-idealista__view-all {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: #fff;
	color: #1f2937;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 700px) {
	.quidra-gallery-idealista { grid-template-columns: 1fr; }
	.quidra-gallery-idealista__side { display: none; }
}

/* Fila que agrupa las acciones de galería (Fotos/Vídeo/Plano/Tour) y los
   botones de compartir en la plantilla Idealista: mismo estilo de botón
   para ambos grupos, distribuidos en los extremos de una sola línea. */
.quidra-gallery-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.quidra-gallery-footer .quidra-gallery-actions,
.quidra-gallery-footer .quidra-share--inline {
	margin-bottom: 0;
}

/* Fila de botones (Fotos / Vídeo / Plano / Tour virtual), compartida por
   ambas plantillas de ficha individual. */
.quidra-gallery-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

/* height (no solo padding vertical) + line-height:1, a propósito: un botón
   solo-icono (compartir) y uno icono+texto (Fotos/Vídeo...) tienen cajas de
   línea de alto distinto si se deja que el contenido decida la altura (el
   texto con line-height por defecto del navegador es más alto que el SVG de
   16px) — con una altura fija, ambos grupos quedan exactamente igual de
   altos sin importar si llevan texto o no. */
.quidra-gallery-actions__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	background: var(--quidra-color-neutral, #f3f4f6);
	border: 1px solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: 6px;
	color: var(--quidra-general-text-color, #1f2937);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

/* !important: estos botones son <a>/<button>, y Avada tiñe el color de
   hover de enlaces/elementos interactivos a nivel global con su propia
   especificidad — sin esto, el color de marca configurado aquí se veía
   pisado por el color de hover del tema (confirmado visualmente por el
   usuario: aparecía en naranja en vez del azul de marca configurado). */
/* color (no solo border-color) también necesita !important: el icono SVG de
   estos botones usa fill="currentColor", así que hereda la propiedad CSS
   `color` — sin protegerla igual que el borde, Avada seguía tiñendo el
   icono de naranja en hover aunque el borde ya mostrara el azul de marca
   correcto (confirmado visualmente por el usuario). */
.quidra-gallery-actions__btn:hover {
	border-color: var(--quidra-color-primary, #2563eb) !important;
	color: var(--quidra-color-primary, #2563eb) !important;
}

/* Encabezado de la plantilla Quidra 1: vive DENTRO de .quidra-single__main
   (no en un contenedor propio a todo el ancho de la página), justo antes de
   la misma ficha técnica (.quidra-single__specs) que ya usa la plantilla
   por defecto — así título/precio quedan al ancho de la columna de
   contenido (no de toda la página) y la barra lateral permanece sticky
   respecto a la altura real de esa columna, igual que en la plantilla
   actual. El resto del estilo (título, meta-row) ya es compartido con la
   plantilla por defecto (ver más arriba, junto a .quidra-single__header). */
.quidra-single__header--idealista {
	margin-bottom: 20px;
}

.quidra-single__map-link {
	margin-left: 8px;
	color: var(--quidra-color-primary, #2563eb);
	text-decoration: underline;
	font-size: calc(var(--quidra-font-size-base, 16px) * 0.9);
}

/* Popup "Ver más": grid con todas las fotos en un tamaño más visible. */
.quidra-gallery-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(0, 0, 0, 0.92);
	overflow-y: auto;
}

.quidra-gallery-popup.is-open { display: block; }

.quidra-gallery-popup__header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	background: rgba(0, 0, 0, 0.92);
	color: #fff;
	z-index: 1;
}

.quidra-gallery-popup__count { font-size: 14px; font-weight: 600; }

.quidra-gallery-popup__close {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
	transition: background 0.2s;
}

.quidra-gallery-popup__close:hover { background: rgba(255, 255, 255, 0.25); }

.quidra-gallery-popup__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	padding: 0 24px 24px;
}

.quidra-gallery-popup__img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.2s;
}

.quidra-gallery-popup__img:hover { opacity: 0.85; }

@media (max-width: 600px) {
	.quidra-gallery-popup__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.quidra-gallery-popup__img { height: 140px; }
}

/* Compartir ficha */
.quidra-share {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 20px;
}

.quidra-share__label {
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.86) !important;
	font-weight: 600;
	color: #6b7280;
	margin-right: 2px;
}

.quidra-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	color: #6b7280;
	border: 1px solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

/* !important: mismo motivo que en .quidra-gallery-actions__btn:hover — Avada
   tiñe el hover de enlaces con su propio color, pisando el de marca. */
.quidra-share__btn:hover {
	color: var(--quidra-color-primary, #2563eb) !important;
	border-color: var(--quidra-color-primary, #2563eb) !important;
}

.quidra-share__btn.is-copied {
	color: #16a34a;
	border-color: #16a34a;
}

/* Variante que reutiliza el estilo de .quidra-gallery-actions__btn (botón
   rectangular con borde, no círculo) para que la fila de compartir "vaya a
   juego" con Fotos/Vídeo/Plano/Tour cuando comparten la misma línea en la
   plantilla Idealista. */
.quidra-share--inline {
	justify-content: flex-start;
	margin-bottom: 0;
}

.quidra-share--inline .quidra-gallery-actions__btn {
	padding: 0 10px;
}

.quidra-share--inline .quidra-gallery-actions__btn.is-copied {
	color: #16a34a;
	border-color: #16a34a;
}

/* Lightbox: overlay a pantalla completa al hacer clic en la imagen
   principal o cualquier miniatura. z-index muy alto para quedar por
   encima de cabeceras "pegajosas"/transparentes del tema. */
.quidra-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(0, 0, 0, 0.9);
	align-items: center;
	justify-content: center;
}

.quidra-lightbox.is-open {
	display: flex;
}

.quidra-lightbox__img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	user-select: none;
}

.quidra-lightbox__close,
.quidra-lightbox__prev,
.quidra-lightbox__next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: none;
	cursor: pointer;
	line-height: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.quidra-lightbox__close:hover,
.quidra-lightbox__prev:hover,
.quidra-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.quidra-lightbox__close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 24px;
}

.quidra-lightbox__prev,
.quidra-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 32px;
}

.quidra-lightbox__prev { left: 20px; }
.quidra-lightbox__next { right: 20px; }

.quidra-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.1);
	padding: 4px 12px;
	border-radius: 999px;
}

@media (max-width: 600px) {
	.quidra-lightbox__prev,
	.quidra-lightbox__next {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
	.quidra-lightbox__prev { left: 8px; }
	.quidra-lightbox__next { right: 8px; }
	.quidra-lightbox__close {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
}

/* Body layout */
.quidra-single__body {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
}

/* min-width:0 a propósito: por defecto un item de grid no se encoge por
   debajo del ancho mínimo de su contenido (min-width:auto). Sin esto, si
   algo dentro de la columna principal (p. ej. el carrusel de relacionadas)
   tuviera contenido que no puede partirse en varias líneas, la columna
   "1fr" se ensancha para acomodarlo y empuja la barra lateral (340px)
   fuera de la pantalla en vez de dejar que ese contenido interno haga
   scroll dentro de sus propios límites. */
.quidra-single__main {
	min-width: 0;
}

@media (max-width: 900px) {
	.quidra-single__body { grid-template-columns: 1fr; }
}

/* Ficha de agente + formulario de contacto siguen el scroll mientras el
   contenido principal (descripción, características, etc.) es más largo.
   Solo tiene sentido en el layout de 2 columnas; en el breakpoint apilado
   de arriba se anula para que no quede "flotando" sobre el resto. */
.quidra-single__sidebar {
	position: sticky;
	top: 20px;
}

@media (max-width: 900px) {
	.quidra-single__sidebar {
		position: static;
	}
}

/* Specs */
.quidra-single__specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
	background: var(--quidra-general-bg, #fff);
	border: var(--quidra-general-border-width, 1px) solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: var(--quidra-general-border-radius, 8px);
	padding: 20px;
	margin-bottom: var(--quidra-general-section-gap, 20px);
}

/* Descripción, Features, Energía, Vídeo, Tour virtual y Mapa: cada una es
   su propia caja independiente (mismo estilo "General" que la caja de
   specs/ficha de agente/formulario de contacto), en vez de texto plano
   apilado. Ocultar cualquiera desde Ajustes → Display no afecta a las
   demás, ya que no dependen del orden entre sí (a diferencia de un único
   bloque con líneas divisorias, que sí necesitaría lógica adicional para
   la primera sección visible). */
.quidra-single__section {
	background: var(--quidra-general-bg, #fff);
	border: var(--quidra-general-border-width, 1px) solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: var(--quidra-general-border-radius, 8px);
	box-shadow: var(--quidra-general-shadow, 0 2px 8px rgba(0,0,0,0.08));
	padding: 20px;
	margin-bottom: var(--quidra-general-section-gap, 20px);
	/* Al navegar por ancla (Vídeo/Plano/Tour virtual/Mapa desde la fila de
	   acciones o "Ver mapa"), el navegador colocaría el título justo debajo
	   del borde superior de la ventana — pero el header de Avada es
	   sticky/transparente y lo tapa. scroll-margin-top deja el mismo colchón
	   de 110px ya usado en .quidra-single (ver más abajo) tanto para saltos
	   nativos como para scrollIntoView(), sin necesitar JS. */
	scroll-margin-top: 110px;
}

.quidra-single__section:last-child {
	margin-bottom: 0;
}

.quidra-single__section h2 {
	font-size: var(--quidra-general-section-title-size, 19px) !important;
	color: var(--quidra-general-section-title-color, #1f2937) !important;
	text-transform: none !important;
	margin: 0 0 12px;
}

.quidra-spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.quidra-spec__label {
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.79) !important;
	font-weight: 600;
	text-transform: uppercase;
	color: #9ca3af;
	letter-spacing: 0.06em;
}

.quidra-spec__value {
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 1.21) !important;
	font-weight: 600;
	color: var(--quidra-general-text-color, #1f2937);
}

/* Description */
.quidra-single__description-text {
	font-size: var(--quidra-general-body-text-size, 14px) !important;
	line-height: 1.7;
	color: #374151;
	text-align: justify;
}

/* Features */
.quidra-features-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.quidra-features-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--quidra-general-body-text-size, 14px) !important;
}

.quidra-features-list__item svg { color: var(--quidra-color-primary, #2563eb); flex-shrink: 0; }

/* Energy certification: resumen compacto (letra + valor por línea) con un
   enlace desplegable que muestra la etiqueta completa A-G, con los valores
   de consumo/emisiones alineados en la fila de su propia letra — mismo
   diseño que usa Idealista en su propia ficha. */
.quidra-energy-summary__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: var(--quidra-general-body-text-size, 14px) !important;
	color: var(--quidra-general-text-color, #1f2937);
}

.quidra-energy-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	/* Padding derecho mayor que el izquierdo a propósito: el clip-path recorta
	   8px de la punta a la derecha, así que con el mismo padding en ambos
	   lados el contenido queda visualmente más pegado a la punta que al lado
	   recto — se compensa sumando esos 8px al padding derecho. */
	padding: 2px 23px 2px 15px;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.6;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.quidra-energy-summary__note {
	margin: 0 0 8px;
	font-size: 12px;
	color: #6b7280;
	font-style: italic;
}

.quidra-energy-summary__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: 6px;
	padding: 8px 14px;
	color: var(--quidra-color-primary, #2563eb);
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.95);
	text-decoration: underline;
	cursor: pointer;
	transition: border-color 0.2s;
}

.quidra-energy-summary__toggle:hover { border-color: var(--quidra-color-primary, #2563eb); }

.quidra-energy-summary__chevron {
	transition: transform 0.2s;
	text-decoration: none;
}

.quidra-energy-summary__toggle[aria-expanded="true"] .quidra-energy-summary__chevron {
	transform: rotate(180deg);
}

.quidra-energy-scale-panel {
	display: none;
	flex-direction: column;
	gap: 3px;
	max-width: 480px;
	margin-top: 14px;
	padding: 16px;
	background: var(--quidra-general-bg, #fff);
	border: 1px solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: var(--quidra-general-border-radius, 8px);
}

.quidra-energy-scale-panel.is-open { display: flex; }

.quidra-energy-scale-panel__row {
	display: grid;
	grid-template-columns: 1fr 90px 90px;
	align-items: center;
	gap: 8px;
}

.quidra-energy-scale-panel__row--header span {
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
	text-align: center;
	line-height: 1.3;
}

.quidra-energy-scale-panel__title {
	text-align: left !important;
	text-transform: uppercase;
}

.quidra-energy-scale__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 16px 4px 10px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.quidra-energy-scale__hint {
	font-weight: 400;
	font-size: 10px;
	white-space: nowrap;
	opacity: 0.9;
}

/* display:flex (no solo text-align:center) a propósito: para que la
   etiqueta oscura del valor pueda estirarse a width:100% y ocupar todo el
   ancho de su columna (Consumo/Emisiones), en vez de encogerse a su
   contenido como hace inline-flex por defecto. */
.quidra-energy-scale-panel__value {
	display: flex;
	justify-content: center;
}

.quidra-energy-value-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Mismo padding vertical, font-size y line-height que .quidra-energy-
	   scale__bar (la franja de color) para que ambas cajas midan exactamente
	   lo mismo de alto y no rompan el espaciado vertical de la escala. */
	padding: 4px 10px;
	line-height: 1;
	background: var(--quidra-general-text-color, #1f2937);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

@media (max-width: 480px) {
	.quidra-energy-scale-panel__row { grid-template-columns: 1fr 60px 60px; }
}

/* Plano (imagen a pantalla completa, mismo patrón que el tour virtual) */
.quidra-floorplan__img {
	width: 100%;
	max-width: 720px;
	border-radius: var(--quidra-general-border-radius, 8px);
}

/* Video */
.quidra-video-player {
	display: block;
	width: 100%;
	max-height: 480px;
	border-radius: calc(var(--quidra-general-border-radius, 8px) * 0.75);
	background: #000;
}

/* Embed de YouTube: contenedor con relación de aspecto 16:9 fija (el iframe
   no tiene una altura intrínseca como el <video>, así que necesita el truco
   del padding-top calculado sobre el ancho). */
.quidra-video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: calc(var(--quidra-general-border-radius, 8px) * 0.75);
	overflow: hidden;
	background: #000;
}

.quidra-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Map */
.quidra-map {
	width: 100%;
	height: 360px;
	border-radius: var(--quidra-general-border-radius, 8px);
	overflow: hidden;
}

/* ─── Ficha de agente ──────────────────────── */
/* Foto+texto y botones van en dos contenedores apilados (no uno dentro del
   otro), para que los botones puedan ocupar el 100% del ancho de la propia
   ficha en vez de solo el ancho de la columna de texto junto a la foto. */
.quidra-agent-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--quidra-general-bg, #fff);
	border: var(--quidra-general-border-width, 1px) solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: var(--quidra-general-border-radius, 8px);
	box-shadow: var(--quidra-general-shadow, 0 2px 8px rgba(0,0,0,0.08));
	padding: 20px;
	margin-bottom: 16px;
}

.quidra-agent-card__top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.quidra-agent-card__photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.quidra-agent-card__info {
	min-width: 0;
	flex: 1;
}

/* !important en margin/line-height: algunos temas (Avada) fuerzan su propio
   margin-bottom en <p> con más especificidad, dejando mucho más aire del
   que marcan estas reglas si no se fuerza aquí también. */
.quidra-agent-card__name {
	margin: 0 !important;
	line-height: 1.3 !important;
	font-size: var(--quidra-general-body-text-size, 14px) !important;
	font-weight: 700;
	color: var(--quidra-general-text-color, #1f2937);
}

.quidra-agent-card__office {
	margin: 4px 0 0 !important;
	line-height: 1.3 !important;
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.86) !important;
	font-weight: 400;
	color: #6b7280;
}

.quidra-agent-card__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Reutiliza .quidra-btn/--primary/--secondary, solo se ajustan tamaño y
   padding para encajar en la ficha de agente. */
.quidra-agent-card__actions .quidra-btn {
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.86) !important;
	padding: 7px 12px;
	width: 100%;
}

/* ─── Formulario de contacto ──────────────────────── */
.quidra-contact-card {
	background: var(--quidra-general-bg, #fff);
	border: var(--quidra-general-border-width, 1px) solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: var(--quidra-general-border-radius, 8px);
	box-shadow: var(--quidra-general-shadow, 0 2px 8px rgba(0,0,0,0.08));
	padding: 24px;
	position: sticky;
	top: 24px;
}

/* Mismos parámetros que los títulos de sección (H2) del contenido
   principal, para que la barra lateral no introduzca una jerarquía
   tipográfica distinta. */
.quidra-contact-card__title {
	margin: 0 0 4px !important;
	font-size: var(--quidra-general-section-title-size, 19px) !important;
	line-height: 1.3 !important;
	color: var(--quidra-general-section-title-color, #1f2937) !important;
	text-transform: none !important;
}

.quidra-contact-card__subtitle {
	margin: 0 0 20px !important;
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.86) !important;
	line-height: 1.5 !important;
	color: #6b7280;
}

.quidra-contact-card__ref {
	margin: 16px 0 0 !important;
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.79) !important;
	line-height: 1.4 !important;
	color: #9ca3af;
	text-align: center;
}

.quidra-form-field {
	margin-bottom: 14px;
}

.quidra-form-field label {
	display: block;
	font-size: calc(var(--quidra-general-body-text-size, 14px) * 0.86) !important;
	font-weight: 600;
	line-height: 1.3 !important;
	margin: 0 0 5px !important;
	color: var(--quidra-general-text-color, #1f2937);
}

.quidra-form-field label span { color: var(--quidra-color-primary, #2563eb); }

.quidra-form-field input,
.quidra-form-field textarea {
	width: 100%;
	padding: 10px 14px;
	border: var(--quidra-general-border-width, 1px) solid var(--quidra-general-border-color, #e5e7eb);
	border-radius: calc(var(--quidra-general-border-radius, 8px) * 0.6);
	font-size: var(--quidra-font-size-base, 16px);
	font-family: var(--quidra-font-family, sans-serif);
	transition: border-color 0.2s;
}

.quidra-form-field input:focus,
.quidra-form-field textarea:focus {
	outline: none;
	border-color: var(--quidra-color-primary, #2563eb);
}

.quidra-form-field__error { font-size: 12px; color: #ef4444; display: block; margin-top: 4px; }

.quidra-form-result {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: calc(var(--quidra-general-border-radius, 8px) * 0.6);
	font-size: 14px;
	text-align: center;
}

.quidra-form-result--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.quidra-form-result--error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* ─── Paginación ──────────────────────────────────── */
/* paginate_links() no envuelve su salida en ningún contenedor propio (cada
   número es un <a class="page-numbers"> suelto), así que el centrado y el
   margen se aplican sobre el div que lo envuelve en property-grid.php /
   property-list.php, no sobre los enlaces sueltos. */
.quidra-pagination-numbered {
	margin-top: 40px;
	text-align: center;
}

/* Cada número/flecha ES un elemento con clase "page-numbers" (no un
   contenedor con enlaces dentro), de ahí el selector directo sin
   combinador descendente. */
.quidra-pagination-numbered .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	margin: 0 2px;
	border-radius: var(--quidra-card-border-radius, 8px);
	border: var(--quidra-card-border-width, 1px) solid var(--quidra-card-border-color, #e5e7eb);
	font-size: 14px;
	color: var(--quidra-card-title-color, #1f2937);
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.quidra-pagination-numbered .page-numbers.dots {
	border: none;
	width: auto;
}

.quidra-pagination-numbered .page-numbers.current,
.quidra-pagination-numbered a.page-numbers:hover {
	background: var(--quidra-color-primary, #2563eb);
	color: #fff;
	border-color: var(--quidra-color-primary, #2563eb);
}

/* ─── No results ──────────────────────────────────── */
.quidra-no-results {
	padding: 40px;
	text-align: center;
	color: #6b7280;
	background: var(--quidra-card-bg, #fff);
	border: var(--quidra-card-border-width, 1px) solid var(--quidra-card-border-color, #e5e7eb);
	border-radius: var(--quidra-card-border-radius, 8px);
}

/* ─── Related properties carousel ────────────────────
   Se usa en vez de la grid normal cuando hay más de 3 relacionadas:
   siempre 3 tarjetas visibles, con scroll horizontal por tarjeta. */
.quidra-related-carousel {
	position: relative;
}

.quidra-related-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--quidra-card-grid-gap, 24px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.quidra-related-carousel__track::-webkit-scrollbar { display: none; }
.quidra-related-carousel__track { scrollbar-width: none; }

.quidra-related-carousel__track .quidra-card {
	flex: 0 0 calc((100% - (2 * var(--quidra-card-grid-gap, 24px))) / 3);
	scroll-snap-align: start;
}

.quidra-related-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #1f2937;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: background 0.2s;
	z-index: 2;
}

.quidra-related-carousel__nav:hover { background: #f3f4f6; }
/* Offset negativo algo menor que la mitad del botón (14px de 40px, no 20px):
   la sección que envuelve el carrusel (.quidra-single__section) tiene
   padding:20px, así que a -20px el botón tocaba justo el borde exterior de
   la sección sin nada de aire — a -14px queda un margen de 6px entre el
   botón y ese borde, sin arriesgar overflow horizontal de página (sigue
   dentro del padding de la sección). */
.quidra-related-carousel__nav--prev { left: -14px; }
.quidra-related-carousel__nav--next { right: -14px; }

@media (max-width: 1024px) {
	.quidra-related-carousel__track .quidra-card {
		flex: 0 0 calc((100% - var(--quidra-card-grid-gap, 24px)) / 2);
	}
}

@media (max-width: 640px) {
	.quidra-related-carousel__track .quidra-card {
		flex: 0 0 85%;
	}
	.quidra-related-carousel__nav--prev { left: -20px; }
	.quidra-related-carousel__nav--next { right: -20px; }
}

/* Red de seguridad: algunos temas (Avada, Divi...) ponen Title Case por
   defecto en TODOS los encabezados del sitio. Ya se anuló explícitamente en
   los títulos de tarjeta/ficha/secciones/formulario de contacto; esta regla
   cubre cualquier encabezado del plugin que aún no se haya identificado uno
   por uno, para no repetir el mismo hallazgo cada vez. */
.quidra-single h1, .quidra-single h2, .quidra-single h3, .quidra-single h4,
.quidra-card h1, .quidra-card h2, .quidra-card h3, .quidra-card h4,
.quidra-listings h1, .quidra-listings h2, .quidra-listings h3, .quidra-listings h4,
.quidra-widget h1, .quidra-widget h2, .quidra-widget h3, .quidra-widget h4,
.quidra-contact-card h1, .quidra-contact-card h2, .quidra-contact-card h3, .quidra-contact-card h4 {
	text-transform: none !important;
}