/* La ficha se reparte en dos columnas: galeria y contenido a la izquierda,
   aside pegado con el precio y el contacto a la derecha. Por debajo de 64rem
   cae a una sola columna y el aside sube justo detras de la galeria. */
.ficha-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	column-gap: var(--s-6);
	row-gap: var(--s-5);
	align-items: start;
}

.ficha-gallery {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.ficha-content {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.ficha-aside {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: calc(var(--nav-h) + var(--s-4));
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

@media (max-width: 64rem) {
	.ficha-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ficha-aside {
		grid-column: 1;
		grid-row: 2;
		position: static;
	}

	.ficha-content {
		grid-column: 1;
		grid-row: 3;
	}
}

.ad-public-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

button.ad-public-gallery-open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ad-public-gallery-main {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--r-md);
	object-fit: cover;
}

.ad-public-gallery-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	padding: var(--s-4);
	background: var(--surface-2);
	border-radius: var(--r-md);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	text-align: center;
}

/* La fila de miniaturas scrollea dentro de la galeria: nunca empuja el ancho
   de la ficha ni encadena el scroll a la pagina, y su barra queda oculta. */
.ad-public-gallery-thumbs {
	display: flex;
	gap: var(--s-2);
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ad-public-gallery-thumbs::-webkit-scrollbar {
	display: none;
}

button.ad-public-gallery-thumb {
	flex: 0 0 96px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	background: none;
	cursor: pointer;
}

.ad-public-gallery-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-xs);
	object-fit: cover;
}

button.ad-public-gallery-thumb-active {
	border-color: var(--accent);
}

.gallery-lightbox-counter {
	color: var(--ink-on-dark);
	font-size: var(--fs-sm);
}

.ad-public-media-pane {
	min-width: 0;
}

.ad-public-media-tabs {
	display: flex;
	gap: var(--s-2);
	margin-block-end: var(--s-3);
}

button.ad-public-media-tab {
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
}

button.ad-public-media-tab-active {
	border-color: var(--accent);
	color: var(--ink);
}

.ad-public-tour-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	border: 0;
	border-radius: var(--r-md);
	background: #000;
}

.ad-public-video video {
	width: 100%;
	border-radius: var(--r-md);
}

.ad-public-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	margin: 0;
}

.ad-public-head h1 {
	margin: 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
}

.ad-public-city {
	margin: 0;
	color: var(--ink-soft);
}

.ad-public-updated {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

.ad-public-updated svg {
	width: var(--fs-md);
	height: var(--fs-md);
	flex-shrink: 0;
}

/* Pastilla de operacion: llena de navy. Las de tipo de vivienda (facts) van
   perfiladas para no competir con ella. */
.ad-public-badge {
	padding: var(--s-1) var(--s-3);
	border: 0;
	border-radius: var(--r-full);
	background: var(--navy);
	color: #ffffff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.ad-public-facts {
	margin: 0;
}

.ad-public-facts > span {
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: transparent;
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.ad-public-description {
	color: var(--ink);
	line-height: var(--lh-body);
}

.ad-public-details {
	margin: 0;
}

.ad-public-details h2,
.ad-public-details h3,
.ad-public-map h2 {
	color: var(--navy);
	font-family: var(--font-display);
}

/* Cada dato es un par valor-etiqueta apilado: el valor arriba en navy y la
   etiqueta debajo, mas discreta. */
.ad-public-detail-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--s-4);
	margin: var(--s-4) 0 var(--s-5);
}

.ad-public-detail-list > div {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.ad-public-detail-list dd {
	order: 1;
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	color: var(--navy);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.ad-public-detail-list dt {
	order: 2;
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

/* Etiqueta energetica europea: un peldano por letra, en flecha y con los
   colores estandar. Solo la letra del anuncio va a plena opacidad. */
.energy-scale {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	max-width: 180px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.energy-scale-step {
	display: flex;
	align-items: center;
	padding: 2px var(--s-2);
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
	color: #ffffff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	opacity: .35;
}

.energy-scale-step-active {
	opacity: 1;
}

.energy-scale-step-a {
	width: 46%;
	background: #008054;
}

.energy-scale-step-b {
	width: 55%;
	background: #19b459;
}

.energy-scale-step-c {
	width: 64%;
	background: #8bc63f;
}

.energy-scale-step-d {
	width: 73%;
	background: #ffe400;
	color: var(--navy);
}

.energy-scale-step-e {
	width: 82%;
	background: #fbba00;
}

.energy-scale-step-f {
	width: 91%;
	background: #ec6707;
}

.energy-scale-step-g {
	width: 100%;
	background: #e30613;
}

.ad-public-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--s-2);
	list-style: none;
	margin: var(--s-3) 0 var(--s-5);
	padding: 0;
	font-size: var(--fs-sm);
}

.ad-public-checklist li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.ad-public-checklist svg,
.ad-public-detail-list dd svg {
	width: var(--fs-lg);
	height: var(--fs-lg);
	flex-shrink: 0;
	color: var(--accent);
}

.ad-public-map-canvas {
	height: 320px;
	border-radius: var(--r-md);
	overflow: hidden;
}

.ad-public-map-circle {
	stroke: var(--accent);
	fill: var(--accent);
}

.ficha-price-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
}

.ad-public-price {
	margin: 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	line-height: var(--lh-tight);
	padding: 0;
}


.ad-public-crypto {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ficha-actions {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.ficha-actions span[id^="order-button-"] {
	flex: 1 1 auto;
	min-width: 0;
}

.ficha-actions span[id^="favourite-button-"] {
	flex: none;
}

.ficha-actions span[id^="favourite-button-"] button {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	color: var(--danger);
}

.ficha-actions span[id^="favourite-button-"] button svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.ficha-actions .favourite-button-guest {
	flex: 1 1 auto;
}

.favourite-button-guest a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	width: 100%;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
}

.favourite-button-guest svg {
	width: var(--fs-md);
	height: var(--fs-md);
	flex-shrink: 0;
	color: var(--danger);
}

.ad-public-contact {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

.ad-public-contact h3 {
	margin: 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
}

.ad-public-contact p {
	margin: 0;
}

/* Telefono y correo son la llamada a la accion del aside: boton lime a todo
   el ancho. */
.ad-public-contact a[href^="tel:"],
.ad-public-contact a[href^="mailto:"] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--accent-ink);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	transition: background var(--dur-1) var(--ease);
}

.ad-public-contact a[href^="tel:"]:hover,
.ad-public-contact a[href^="mailto:"]:hover {
	background: var(--accent-hover);
	text-decoration: none;
}

.ad-public-contact-row {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.ad-public-contact-row .icon {
	color: var(--navy);
}

.ad-public-contact-name {
	font-weight: 700;
	margin-block-end: var(--s-2);
}

.ad-public-contact-empty {
	color: var(--ink-soft);
}

.ad-public-contact-locked {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	max-width: none;
	padding: 0;
}

.ad-public-contact-locked .btn-ghost {
	display: flex;
	justify-content: center;
	margin-block-start: 0;
	border-radius: var(--r-md);
}