/* ==========================================================================
   Ficha de propiedad (Plugin Inmobiliario / .contenedor-ficha)
   Prototype styling applied over the plugin markup — structure NOT changed.
   If the project manager asks for the prototype layout (#page-inmueble), we
   will restructure the markup separately. Scope: body.gai-ficha-page.
   ========================================================================== */

/* Full-width content area + centre the ficha to the design wrap (1180px) */
body.gai-ficha-page .site-content > .ast-container {
	max-width: 100% !important;
	padding-inline: 0 !important;
}
body.gai-ficha-page .fl-builder-content > .fl-row {
	max-width: none !important;
}
body.gai-ficha-page .fl-row-content-wrap {
	padding: 0 !important;
}
body.gai-ficha-page .fl-row-content {
	max-width: none !important;
	padding-inline: 0 !important;
}
body.gai-ficha-page .contenedor-ficha {
	float: none;
	width: auto;
	max-width: 1180px;
	margin: 0 auto;
	padding: 44px 24px 110px;
	overflow: hidden;
}

/* --- Property title band (the plugin black bar) -> ink + berry accent --- */
body.gai-ficha-page .property-content-titulo {
	margin: 0 0 18px;
}
body.gai-ficha-page .title-header {
	background: var(--ink);
	border-left: 6px solid var(--berry);
	padding: 24px 32px;
}
body.gai-ficha-page .title-header h1 {
	color: #fff;
	font-family: "Source Serif 4", Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}

/* --- Gallery (Galleria plugin) --- */
/* custom.js (and an early <head> copy in functions.php) moves #galleria into
   the left content column so it sits above the description cards (same width /
   left edge), with the sidebar form + action buttons rising to the same top
   line. Only the root element sets the height; Galleria sizes its stage and
   thumbnails from it. Galleria's own .galleria-container can come out a bit
   wider than #galleria (it measures the column), so the layout boxes below are
   pinned to 100% to match the cards. Heights and thumbnails are left untouched
   so the arrows/thumbnails keep working. */
body.gai-ficha-page #galleria {
	width: 100%;
	height: 400px;
	margin: 0 0 26px;
}
body.gai-ficha-page #galleria .galleria-container,
body.gai-ficha-page #galleria .galleria-stage,
body.gai-ficha-page #galleria .galleria-images {
	width: 100% !important;
}
body.gai-ficha-page #galleria .galleria-bar,
body.gai-ficha-page #galleria .galleria-image-nav,
body.gai-ficha-page #galleria .galleria-progress {
	width: 100% !important;
}

/* --- Main column cards --- */
body.gai-ficha-page .col-md-9 .fondo-ficha,
body.gai-ficha-page .contenedor-ficha > .row > .col-md-9 > .fondo-ficha {
	background: var(--cream);
	border: 1px solid var(--line);
	padding: 28px 30px;
	margin: 0 0 22px;
}
body.gai-ficha-page .fondo-ficha hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 4px 0 18px;
}

/* Section headings (Descripción / Características / Extras ...) */
body.gai-ficha-page .title-left {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--ink);
	font-family: "Manrope", Arial, sans-serif;
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.2;
}
body.gai-ficha-page .title-left::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	background: var(--berry);
}

/* Description. The CRM returns each feature separated by <br><br>; keep those
   line breaks so the text keeps its paragraph structure (as in production). */
body.gai-ficha-page .descripcion {
	color: #4e4c4e;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}

/* Características rows (label/value) */
body.gai-ficha-page .fila2 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.92rem;
}
body.gai-ficha-page .fila2:last-child {
	border-bottom: 0;
}
body.gai-ficha-page .fila2 .pull-left,
body.gai-ficha-page .fila2 .pull-right {
	float: none;
}
/* The plugin's .clearfix sits inside each .fila2; as a flex child it pushes
   the value to the middle. Remove it so label/left and value/right align. */
body.gai-ficha-page .fila2 .clearfix {
	display: none !important;
}
body.gai-ficha-page .fila2 .info-adicional-iz,
body.gai-ficha-page .fila2 .info-adicional-iz-der {
	color: var(--muted);
	font-weight: 500;
}
body.gai-ficha-page .fila2 .info-adicional-der {
	color: var(--ink);
	font-weight: 700;
	text-align: right;
}

/* Price row inside Características */
body.gai-ficha-page #precio .info-adicional-der {
	color: var(--berry);
	font-size: 1.25rem;
}

/* Extras list (generic text items) */
body.gai-ficha-page .fondo-ficha .col-md-12 {
	font-size: 0.95rem;
}

/* Map + energy cards inherit the cream card; keep inner height */
body.gai-ficha-page .mapa #map-canvas {
	border: 0;
}

/* Energy: black "Consumo/Emisiones" pointer (marks the used grade A-G),
   sized at 80% of the column width. */
body.gai-ficha-page #energy-efficiency span.x-efficiency-pointer[data-calification="X"] {
	background: #000000 !important;
	border: 0;
	opacity: 1 !important;
	width: 80% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
	color: #fff !important;
}
body.gai-ficha-page #energy-efficiency .content-legend-top,
body.gai-ficha-page #energy-efficiency .content-legend-bottom {
	color: var(--muted);
}

/* --- Sidebar contact form (plugin panel) -> design card --- */
body.gai-ficha-page #formulario_contacto {
	background: var(--cream);
	border: 1px solid var(--line);
	color: var(--ink);
	padding: 26px 24px;
	/* The plugin adds a 22px top margin; the gallery now sits in the left
	   column, so drop it so the form starts level with the gallery. */
	margin-top: 0;
}
body.gai-ficha-page .formulario_contacto_wrapper {
	background: transparent;
}
body.gai-ficha-page #formulario_contacto .row.title {
	margin: 0 0 14px;
}
body.gai-ficha-page #formulario_contacto .row.title span {
	display: block;
	color: var(--ink);
	font-family: "Source Serif 4", Georgia, serif;
	font-weight: 500;
	font-size: 1.35rem;
	line-height: 1.2;
}
body.gai-ficha-page #formulario_contacto input[type="text"],
body.gai-ficha-page #formulario_contacto textarea {
	width: 100% !important;
	display: block !important;
	min-height: 46px;
	margin: 0 0 12px !important;
	padding: 11px 13px !important;
	border: 1px solid #cbc7c1;
	border-radius: 0;
	background: #fff;
	color: var(--ink);
	font-family: "Manrope", Arial, sans-serif;
	font-size: 0.95rem;
}
body.gai-ficha-page #formulario_contacto textarea {
	min-height: 100px;
	resize: vertical;
}
body.gai-ficha-page #formulario_contacto input:focus,
body.gai-ficha-page #formulario_contacto textarea:focus {
	border-color: var(--berry);
	box-shadow: 0 0 0 3px rgba(177, 0, 57, 0.1);
	outline: 0;
}
body.gai-ficha-page #formulario_contacto input::placeholder,
body.gai-ficha-page #formulario_contacto textarea::placeholder {
	color: #a5a2a6;
}
body.gai-ficha-page .content-condiciones {
	margin: 4px 0 14px;
	font-size: 0.72rem;
	line-height: 1.5;
}
body.gai-ficha-page #formulario_contacto .content-condiciones a {
	/* The plugin paints this link white via an id selector; keep it readable */
	color: #414043 !important;
	font-weight: 700;
}
/* Consent row: checkbox + link side by side with a small gap. The plugin's
   inline layout (whitespace text node + negative margins) makes the label
   overlap the box, so this row is switched to flex. */
body.gai-ficha-page .content-condiciones > .col-md-12 {
	display: flex;
	align-items: center;
	gap: 8px;
}
body.gai-ficha-page .content-condiciones input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	min-height: 18px;
	margin: 0 !important;
	accent-color: var(--berry);
}
body.gai-ficha-page .content-condiciones a {
	min-width: 0;
}
body.gai-ficha-page #contenedor-enviar {
	margin-top: 6px;
}
body.gai-ficha-page #enviar-form-propiedad-vertical,
body.gai-ficha-page .formulario_contacto_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The plugin's col-md-* classes float the button right with side margins;
	   reset them so the button lines up with the input column above it. */
	float: none !important;
	margin: 0 !important;
	width: 100% !important;
	min-height: 50px;
	padding: 0 20px;
	border: 1px solid var(--berry);
	border-radius: 0;
	background: var(--berry);
	color: #fff;
	font-family: "Manrope", Arial, sans-serif;
	font-size: 0.83rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: transform 0.2s, background 0.2s, border 0.2s;
}
body.gai-ficha-page #enviar-form-propiedad-vertical:hover {
	transform: translateY(-2px);
	background: var(--berry-dark);
	border-color: var(--berry-dark);
}

/* Sidebar utility buttons (PDF / imprimir / oferta / cita ...) */
/* (grid widths come from the plugin's col-md-* classes so the buttons align
   with the contact form column) */
/* Remove the PDF and Imprimir actions (keep Enviar Propiedad) */
body.gai-ficha-page .botones-imprimibles > .row > .col-md-12:nth-child(-n+2) {
	display: none !important;
}
/* Fix the remaining "Enviar Propiedad" button: icon + label on one line. The
   row is centred and every label uses the same fixed slot width so the icon
   and text columns stay aligned while the whole content reads centred. */
body.gai-ficha-page .botones-imprimibles .icon-property .icon-prop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: left;
}
body.gai-ficha-page .botones-imprimibles .icon-property .icon-prop-text {
	white-space: nowrap;
	font-size: 0.95rem;
	line-height: 1.2;
	color: var(--ink) !important;
	/* The plugin adds a 10px left margin here that breaks column alignment */
	margin-left: 0 !important;
}
/* Keep the same vertical rhythm between all four action buttons (the plugin
   adds an extra container margin above .botones-ficha). */
body.gai-ficha-page .botones-imprimibles {
	margin-bottom: 0 !important;
}
body.gai-ficha-page .botones-ficha {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/* Unify the three right action buttons with the same flex row (icon + label),
   matching "Enviar Propiedad". Rows are centred; labels share a fixed-width
   slot so every row's icon and label fall in the same column. */
body.gai-ficha-page .botones-ficha .icon-property .imprimir1-oferta,
body.gai-ficha-page .botones-ficha .icon-property .imprimir1-cita,
body.gai-ficha-page .botones-ficha .icon-property .imprimir1-llamamos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	box-sizing: border-box;
	padding: 0;
	text-align: left;
	font-size: 0.95rem;
	line-height: 1.2;
}
/* Vertically centre the "Enviar Propiedad" icon with its label. No extra
   transform is needed once the plugin's icon margins are neutralized; the
   flex row's align-items:center handles it. */
/* Give every action icon a fixed slot so all icons and all labels align in
   vertical columns across the four rows. The plugin adds asymmetric margins
   to these icons (10px 6px on the right group, ~12px on Enviar) that break
   the shared icon/text columns, so margins are zeroed here. */
body.gai-ficha-page .botones-imprimibles .icon-property i,
body.gai-ficha-page .botones-ficha .icon-property i {
	width: 20px;
	flex: 0 0 auto;
	margin: 0 !important;
	text-align: center;
	line-height: 1;
}
/* Every action label uses the same fixed-width slot so the icon/text columns
   line up across the four centred buttons (widest label ~125px at 0.95rem). */
body.gai-ficha-page .botones-imprimibles .icon-property .icon-prop-text,
body.gai-ficha-page .botones-ficha .icon-property .imprimir1-oferta > span,
body.gai-ficha-page .botones-ficha .icon-property .imprimir1-cita > span,
body.gai-ficha-page .botones-ficha .icon-property .imprimir1-llamamos > span {
	display: inline-block;
	width: 132px;
	max-width: 132px;
	white-space: nowrap;
	text-align: left;
}
/* Unify both action groups to the design (white card + berry icons + ink text).
   The plugin styles the print/PDF block with id selectors (#sidebarPDF), so the
   left group needs !important overrides. */
body.gai-ficha-page .botones-imprimibles .icon-property,
body.gai-ficha-page .botones-ficha .icon-property {
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
body.gai-ficha-page .botones-imprimibles .icon-property {
	background: #fff !important;
	border-color: var(--line) !important;
	color: var(--ink) !important;
}
body.gai-ficha-page .botones-imprimibles .icon-property:hover,
body.gai-ficha-page .botones-ficha .icon-property:hover {
	border-color: var(--berry);
	box-shadow: 0 8px 22px rgba(20, 16, 18, 0.08);
	transform: translateY(-2px);
}
body.gai-ficha-page .botones-imprimibles .icon-property:hover {
	border-color: var(--berry) !important;
}
body.gai-ficha-page .botones-imprimibles .icon-property i,
body.gai-ficha-page .botones-ficha .icon-property i {
	color: var(--berry);
}
body.gai-ficha-page .botones-imprimibles .icon-property i {
	color: var(--berry) !important;
}
body.gai-ficha-page .botones-ficha .icon-property i {
	color: var(--berry) !important;
}
body.gai-ficha-page .botones-imprimibles .icon-property:hover i,
body.gai-ficha-page .botones-ficha .icon-property:hover i {
	color: var(--berry-dark);
}
body.gai-ficha-page .botones-imprimibles .icon-property .icon-prop-text,
body.gai-ficha-page .botones-imprimibles .icon-property span,
body.gai-ficha-page .botones-imprimibles .icon-property div,
body.gai-ficha-page .botones-ficha .icon-property div,
body.gai-ficha-page .botones-ficha .icon-property span {
	color: var(--ink);
}
body.gai-ficha-page .botones-imprimibles .icon-property .icon-prop-text,
body.gai-ficha-page .botones-imprimibles .icon-property span,
body.gai-ficha-page .botones-imprimibles .icon-property div {
	color: var(--ink) !important;
}
body.gai-ficha-page .botones-imprimibles a:hover,
body.gai-ficha-page .botones-ficha a:hover {
	color: inherit;
}

/* The plugin paints the "Imprimir" dropdown-toggle black via its #sidebarPDF
   id. Neutralize it so it follows the white design card. */
body.gai-ficha-page .botones-imprimibles .dropdown-toggle,
body.gai-ficha-page .botones-imprimibles a[data-toggle="dropdown"] {
	background: transparent !important;
	color: var(--ink) !important;
}
body.gai-ficha-page .botones-imprimibles .dropdown-toggle:hover,
body.gai-ficha-page .botones-imprimibles .dropdown-toggle:focus {
	background: transparent !important;
	color: var(--berry) !important;
}
/* Dropdown menu (Imprimir vertical / horizontal) */
body.gai-ficha-page .botones-imprimibles .dropdown-menu {
	position: absolute;
	z-index: 30;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
body.gai-ficha-page .botones-imprimibles .dropdown-menu li a {
	display: block;
	padding: 8px 14px;
	background: #fff !important;
	color: var(--ink) !important;
	font-size: 0.85rem;
	white-space: nowrap;
}
body.gai-ficha-page .botones-imprimibles .dropdown-menu li a:hover {
	color: var(--berry) !important;
	background: var(--cream) !important;
}

/* Disclaimer */
body.gai-ficha-page .text-advertencia {
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.6;
	margin-top: 8px;
}

/* --- Responsive --- */
@media (max-width: 860px) {
	body.gai-ficha-page .contenedor-ficha {
		padding-top: 28px;
	}
	body.gai-ficha-page .title-header h1 {
		font-size: 1.6rem;
	}
}