/*
 * Andaluza — single inmueble (ficha). Ported from web/preview/assets/pages.css
 * (ficha section) + property-card. Consumes tokens.css + base.css.
 */

/* photo slot placeholder */
.adi-photo-slot { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--adi-img-bg); color: var(--adi-muted); font-size: 13px; font-weight: 700; }
.adi-photo-slot > img { width: 100%; height: 100%; object-fit: cover; }

/* breadcrumb (light, over page bg) */
.adi-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--adi-muted); margin-bottom: 16px; flex-wrap: wrap; }
.adi-breadcrumb a { color: var(--adi-muted); text-decoration: none; }
.adi-breadcrumb a:hover { color: var(--adi-navy); }
.adi-breadcrumb__current { color: var(--adi-navy); font-weight: 700; }

/* gallery */
/* Galería: principal + tira con TODAS las fotos.
   Antes era una rejilla 2fr/1fr de 440px fijos con exactamente dos miniaturas.
   Ocupaba casi toda la primera pantalla —el título, el precio y la descripción
   nacían bajo el pliegue— y aun así solo dejaba ver tres fotos.
   La altura pasa a clamp(): se adapta al alto real de la ventana en vez de
   imponer 440px en un portátil de 768. #119 la sube a clamp(300px, 50vh,
   540px): la foto es el producto y 38vh desaprovechaba el portátil. */
.adi-gallery { display: grid; gap: 10px; }
.adi-gallery__main { position: relative; border-radius: 18px; overflow: hidden; background: var(--adi-img-bg); height: clamp(300px, 50vh, 540px); }
.adi-gallery__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.adi-gallery__slide.is-active { opacity: 1; visibility: visible; }
.adi-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adi-gallery__badge { position: absolute; top: 16px; left: 16px; }
.adi-gallery__counter { position: absolute; right: 14px; bottom: 14px; background: rgba(9, 52, 95, 0.78); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.adi-gallery__main .adi-photo-slot { height: 100%; }

.adi-gallery__strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.adi-gallery__thumb { flex: 0 0 auto; width: 104px; height: 70px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--adi-img-bg); cursor: pointer; opacity: 0.6; transition: opacity 0.15s ease; }
.adi-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adi-gallery__thumb:hover, .adi-gallery__thumb:focus-visible { opacity: 1; }
.adi-gallery__thumb.is-active { opacity: 1; outline: 2px solid var(--adi-gold); outline-offset: 2px; }

/* El alto lo marca el contenido, NUNCA una altura fija: el mapa horneado es una
   imagen 760x380 que se reescala con el ancho de la columna, así que cualquier
   `height` deja hueco vacío debajo en cuanto la columna se estrecha. Había una
   segunda regla `.adi-map` más abajo, resto del preview estático, que imponía
   280px y ganaba por orden. Ahora esa vive en `--placeholder`. */
/* `.adi-map` es solo el contenedor: quien dibuja la caja es el lienzo. Así el
   mapa la ocupa entera y el pie queda FUERA, como texto, en vez de comerse una
   franja blanca dentro del recuadro. */
.adi-map { position: relative; margin: 0; }
.adi-map img { width: 100%; height: auto; display: block; }
.adi-map__lienzo,
.adi-map--sin-datos,
.adi-map--placeholder { border-radius: 16px; overflow: hidden; border: 1px solid var(--adi-line); }
.adi-map__nota { font-size: 13px; color: var(--adi-muted); padding: 8px 2px 0; }
.adi-map--sin-datos { display: flex; align-items: center; justify-content: center; min-height: 160px; background: var(--adi-img-bg); }
.adi-map--sin-datos .adi-map__label { position: static; box-shadow: none; }
.adi-map__lienzo { position: relative; line-height: 0; }
.adi-map__lienzo--vivo { height: 380px; line-height: normal; }
.adi-map__activar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(9, 52, 95, 0.9); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s ease; }
.adi-map__activar:hover, .adi-map__activar:focus-visible { background: var(--adi-navy); }
.adi-map__activar[disabled] { opacity: 0.75; cursor: default; }
/* Leaflet pinta su propio control de atribución; que no rompa la tipografía. */
.adi-map__lienzo--vivo .leaflet-container { font-family: inherit; }

/* Botón de ampliar sobre la principal */
.adi-gallery__zoom { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(9, 52, 95, 0.72); color: #fff; cursor: pointer; transition: background 0.15s ease; }
.adi-gallery__zoom:hover, .adi-gallery__zoom:focus-visible { background: var(--adi-navy); }

/* Flechas prev/next sobre la principal (#31): pìldora hairline a media altura,
   el mismo chevron que las del visor a 20px. Sin z-index a propósito — por
   orden de DOM quedan debajo del badge, el contador y la lupa, que vienen
   después. El bloque de 900px las esconde: en móvil navega la tira. */
.adi-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--adi-line-2); border-radius: 50%; background: #fff; color: var(--adi-navy); cursor: pointer; transition: border-color 0.15s ease; }
.adi-gallery__nav--prev { left: 14px; }
.adi-gallery__nav--next { right: 14px; }
.adi-gallery__nav:hover, .adi-gallery__nav:focus-visible { border-color: var(--adi-navy); }

/* ---- Visor ----
   Se abre con la principal o con el icono de lupa. Muestra la foto a tamaño
   completo y permite pasarlas: era el hueco que quedaba, porque la tira solo
   deja verlas al tamaño de la ficha. */
.adi-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: rgba(9, 52, 95, 0.94); }
.adi-lightbox[hidden] { display: none; }
.adi-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(1100px, 100%); max-height: 100%; }
.adi-lightbox__img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 10px; display: block; }
.adi-lightbox__caption { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.adi-lightbox__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.adi-lightbox__close:hover, .adi-lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.24); }
.adi-lightbox__nav { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.adi-lightbox__nav:hover, .adi-lightbox__nav:focus-visible { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 560px) {
  /* En móvil la imagen del mapa mide poco más de 170px de alto, así que una
     píldora centrada abajo se come media zona. Se va a la esquina y encoge:
     sigue siendo el objetivo táctil de 44px que pide la pauta de accesibilidad,
     pero deja ver el círculo, que es lo que el visitante ha venido a mirar. */
  .adi-map__activar { left: auto; right: 10px; bottom: 10px; transform: none; padding: 9px 14px; font-size: 13px; gap: 6px; }

  .adi-lightbox { padding: 12px; gap: 6px; }
  .adi-lightbox__nav { position: absolute; bottom: 20px; width: 46px; height: 46px; }
  .adi-lightbox__nav--prev { left: 20px; }
  .adi-lightbox__nav--next { right: 20px; }
  .adi-lightbox__img { max-height: calc(100vh - 150px); }
}

/* ficha layout */
.adi-ficha__layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.adi-ficha__title { font-family: var(--adi-font-serif); font-weight: 500; font-size: 34px; line-height: 1.1; color: var(--adi-navy); margin: 0 0 8px; }
.adi-ficha__addr { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--adi-slate); }

/* ---- Sistema de secciones de la ficha ----
   La columna izquierda encadenaba Descripción, Características, Datos de la
   finca, Ubicación y Certificado con <h2> sueltos: sin regla ni ritmo, cada
   bloque se fundía con el siguiente. Cada sección lleva ahora el hairline de
   siempre (--adi-line-2, el separador recurrente del sistema) y el mismo aire
   a ambos lados: la frontera la pinta la sección, no el margen del
   encabezado. Los paddings que el template traía inline (24/8/32/70px) se
   mudan aquí a clases con su mismo valor: no cambia el pixel, deja de ser
   excepción. */
.adi-ficha__top { padding-top: var(--adi-sp-6); }
.adi-ficha__galeria { padding-bottom: var(--adi-sp-2); }
.adi-ficha__cuerpo { padding-top: var(--adi-sp-8); padding-bottom: 70px; }
.adi-ficha__seccion { border-top: 1px solid var(--adi-line-2); margin-top: var(--adi-sp-8); padding-top: var(--adi-sp-8); }
/* Quien abre la sección no apila su propio aire: el ritmo ya lo dio la regla.
   El 36px de .adi-prose h2 se queda para los h2 que no abren sección (p.ej.
   los que pueda traer el contenido). */
.adi-prose .adi-ficha__seccion > h2 { margin: 0 0 14px; }

/* facts strip */
.adi-facts { display: flex; margin: 24px 0; border: 1px solid var(--adi-line-2); border-radius: 16px; overflow: hidden; background: #fff; }
.adi-fact { flex: 1; padding: 20px; text-align: center; border-right: 1px solid var(--adi-line); }
.adi-fact:last-child { border-right: none; }
.adi-fact__icon { display: flex; justify-content: center; margin-bottom: 8px; color: var(--adi-teal); }
.adi-fact__value { font-family: var(--adi-font-serif); font-size: 24px; color: var(--adi-navy); line-height: 1; }
.adi-fact__label { font-size: 12px; font-weight: 700; color: var(--adi-muted); margin-top: 4px; }

/* prose + features */
.adi-prose h2 { font-family: var(--adi-font-serif); font-weight: 500; font-size: 24px; color: var(--adi-navy); margin: 36px 0 14px; }
.adi-prose p { font-size: 16px; line-height: 1.75; color: var(--adi-slate); margin: 0 0 14px; }
.adi-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.adi-feature { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--adi-line); font-size: 15px; color: var(--adi-slate); }
.adi-feature strong { color: var(--adi-ink); font-weight: 700; }
.adi-feature svg { flex: none; color: var(--adi-teal); }

/* #101: chips de características libres. Píldoras al mismo tono que los
   features: hairline --adi-line, superficie blanca y texto slate. */
.adi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.adi-chip { padding: 6px 14px; border: 1px solid var(--adi-line); border-radius: 999px; background: #fff; color: var(--adi-slate); font-size: 13px; font-weight: 600; }

/* Mapa decorativo (hoy solo /contacto/): rejilla y pin dibujados, sin datos
   reales detrás. Va con modificador propio porque antes compartía el selector
   `.adi-map` con el mapa de verdad de la ficha y le imponía su altura fija. */
.adi-map--placeholder { position: relative; border-color: var(--adi-line-2); height: 280px; background: #E3E9EE; }
.adi-map__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(9,52,95,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(9,52,95,0.06) 1px, transparent 1px); background-size: 38px 38px; }
.adi-map__pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); }
.adi-map__label { position: absolute; left: 16px; bottom: 16px; background: #fff; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--adi-slate); box-shadow: 0 4px 14px rgba(9,52,95,0.14); }

/* energy certificate */
.adi-energy { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--adi-line-2); border-radius: 16px; padding: 24px; flex-wrap: wrap; }
.adi-energy__scale { display: flex; flex-direction: column; gap: 5px; }
/* Consumo indicativo del certificado (#31): el número bajo las barras, como
   nota pequeña — la letra ya dice la banda, esto concreta cuánto. */
.adi-energy__consumo { font-size: 13px; color: var(--adi-muted); margin: 6px 0 0; }
.adi-energy__bar { height: 24px; border-radius: 4px; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; padding: 0 10px; min-width: 46px; }
.adi-energy__bar.is-active { outline: 2px solid var(--adi-navy); outline-offset: 2px; }
/* Colores de la etiqueta energética europea: son dato, no paleta — cada letra
   tiene el suyo oficial. Antes viajaban inline por barra y en un array PHP del
   template; ahora viven aquí como modificadores y el template solo imprime
   la letra. C y D son fondos claros: texto tinta en vez de blanco. */
.adi-energy__bar--a { background: #00A651; }
.adi-energy__bar--b { background: #50B848; }
.adi-energy__bar--c { background: #BFD730; }
.adi-energy__bar--d { background: #FFF200; }
.adi-energy__bar--e { background: #FCB814; }
.adi-energy__bar--f { background: #F3701B; }
.adi-energy__bar--g { background: #ED1C24; }
.adi-energy__bar--c, .adi-energy__bar--d { color: var(--adi-ink); }
.adi-energy__info { flex: 1; min-width: 200px; }
.adi-energy__info-title { font-size: 15px; font-weight: 800; color: var(--adi-navy); margin-bottom: 6px; }
.adi-energy__info p { font-size: 14px; line-height: 1.6; color: var(--adi-slate); margin: 0; }

/* sticky aside: price + agent */
.adi-ficha__aside { position: sticky; top: 94px; display: flex; flex-direction: column; gap: 16px; }
.adi-pricecard { position: relative; background: #fff; border: 1px solid var(--adi-line-2); border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(9,52,95,0.08); }
/* Ficha heart: mirrors the card one (white pill, teal when active), absolute
   inside the rounded pricecard — visible on mobile too, where the aside
   collapses above the H1. favoritos.js owns the state. */
.adi-pricecard__fav {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px; border: none; border-radius: var(--adi-r-pill);
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(9, 52, 95, 0.12);
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--adi-slate); padding: 0;
  transition: color 0.18s ease;
}
.adi-pricecard__fav:hover,
.adi-pricecard__fav.is-active { color: var(--adi-teal); }
.adi-pricecard__fav.is-active svg path { fill: currentColor; }
.adi-pricecard__price { font-family: var(--adi-font-serif); font-size: 36px; font-weight: 600; color: var(--adi-navy); line-height: 1; }
/* The /periodo suffix renders small so the price holds one line on phones. */
.adi-pricecard__periodo { font-size: 0.55em; font-weight: 600; }
.adi-pricecard__meta { font-size: 13px; color: var(--adi-muted); margin: 4px 0 20px; }
/* Botón a ancho completo: antes eran tres style= inline repartidos por el
   template. Delta mínimo sobre el .adi-btn (inline-flex) de base.css. La
   separación entre los dos botones de la tarjeta la marca el hermano que
   viene detrás, no un margen suelto en el primero. */
.adi-btn--block { display: flex; width: 100%; justify-content: center; }
.adi-pricecard .adi-btn--block + .adi-btn--block { margin-top: 10px; }
.adi-agentcard { background: #fff; border: 1px solid var(--adi-line-2); border-radius: 18px; padding: 24px; }
.adi-agentcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* Sin avatar: el cliente autorizó los nombres del equipo, no las fotos. Un
   círculo gris vacío en su lugar solo sería un hueco pidiendo una imagen que no
   va a llegar. La regla se conserva por si algún día se autorizan. */
.adi-agentcard__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--adi-img-bg); overflow: hidden; flex: none; }
.adi-agentcard__name { font-weight: 800; font-size: 15px; color: var(--adi-navy); }
.adi-agentcard__role { font-size: 13px; color: var(--adi-teal); font-weight: 600; }
.adi-agentcard__fields { display: flex; flex-direction: column; gap: 10px; }

/* sticky mobile bar */
.adi-mobilebar { position: sticky; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--adi-line-2); padding: 12px 20px; display: none; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 20px rgba(9,52,95,0.1); }
.adi-mobilebar__price { font-family: var(--adi-font-serif); font-size: 22px; color: var(--adi-navy); line-height: 1; }

/* ---- Relacionados (#31) ----
   Sección que existía en el preview estático y nunca se portó: retención y
   enlazado interno. Ancho completo y con clase propia — NO .adi-ficha__seccion,
   que es el contrato de las cinco secciones de la columna izquierda. El grid
   (.adi-grid-3, home.css) y las cards son el vocabulario de la Home, igual que
   los destacados; aquí solo vive el ritmo propio de la ficha. */
.adi-related { border-top: 1px solid var(--adi-line); padding: 48px 0 70px; }
.adi-related__title { font-family: var(--adi-font-serif); font-weight: 500; font-size: 24px; color: var(--adi-navy); margin: 0 0 24px; }

@media (max-width: 900px) {
  .adi-ficha__layout { grid-template-columns: 1fr; }
  .adi-ficha__aside { position: static; order: -1; }
  .adi-mobilebar { display: flex; }
  /* #46: con el pie a la vista el JS añade is-hidden a la barra; si no,
     queda flotando encima del pie como una sección fantasma. La especificidad
     de .is-hidden gana al display:flex de arriba sin !important. */
  .adi-mobilebar.is-hidden { display: none; }
  /* En móvil la foto ocupa media pantalla: las flechas sobre la principal
     estorban y la tira de abajo ya navega. */
  .adi-gallery__nav { display: none; }
}
@media (max-width: 560px) {
  .adi-facts { flex-wrap: wrap; }
  .adi-fact { flex: 1 0 50%; border-bottom: 1px solid var(--adi-line); }
  .adi-features { grid-template-columns: 1fr; }
  .adi-gallery__thumb { width: 84px; height: 58px; }
  /* Una barra menos de aire entre secciones: en móvil el hueco entre reglas
     pesa el doble a la vista que en la columna ancha. */
  .adi-ficha__seccion { margin-top: var(--adi-sp-6); padding-top: var(--adi-sp-6); }
}

.adi-pricecard__rebajado { display: inline-block; margin: 0 0 8px; }
.adi-map__referencia { margin: 0 0 10px; font-size: 14px; font-weight: 600; }