/* ============================================================ Ficha de la propiedad — PÁGINA /propiedad/ (buscador público). Solo se carga en esa página (layouts/header.php mira $sin_filtros). En PC: galería a la izquierda y datos a la derecha. En teléfono: una columna, con la galería arriba. Nota: fue una ventana emergente de Bootstrap hasta que la ficha pasó a ser una página. Por eso las medidas siguen siendo de "pantalla completa": lo que cambió es que ahora scrollea la página y no una caja interna. ============================================================ */ /* Ocupa todo su contenedor. Antes llevaba márgenes negativos para romper el p-4 del , que ya no existe; dejarlos la sacaría 24px por cada lado y habría scroll horizontal. NO usar 100vw: en PC incluye la barra de desplazamiento. */ .ficha-pagina { background: var(--bs-body-bg); display: flex; flex-direction: column; min-height: calc(100vh - 90px); } .ficha-head { border-bottom: 1px solid var(--bs-border-color); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Se queda arriba al bajar: desde ahí se vuelve al buscador y se comparte. Va justo debajo de la barra del sitio, que también es sticky; su altura la mide ficha.js en --dr-nav (cambia con el ancho de la pantalla). */ position: sticky; top: var(--dr-nav, 86px); z-index: 3; background: var(--bs-body-bg); } .fi-accion { text-decoration: none; } .fi-titulo { font-size: 1.15rem; } .ficha-head-izq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ficha-head-der { display: flex; align-items: center; gap: 10px; } .fi-op { background: #d4af37; color: #3a2e07; font-weight: 600; } .fi-accion { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--bs-border-color); background: transparent; color: #d4af37; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .fi-accion:hover { background: #d4af37; color: #3a2e07; border-color: #d4af37; } /* Guardada en Favoritos / Comparación: relleno, igual que en la tarjeta. */ .fi-accion.activo { background: #d4af37; color: #3a2e07; border-color: #d4af37; } /* En el teléfono la cabecera pasó a llevar 6 piezas (volver, código, operación y los tres botones): suman más que el ancho de la pantalla y se partía en dos renglones, con la flecha sola arriba. Se aprietan los botones y se retira la píldora de la operación, que está repetida en el título de justo debajo ("Apartamento en Venta"); el código, que es lo que identifica al inmueble, se queda. */ @media (max-width: 575.98px) { .ficha-head { padding: 10px 12px; gap: 6px; } .ficha-head-izq, .ficha-head-der { gap: 6px; } .fi-accion { width: 34px; height: 34px; } .ficha-head .fi-op { display: none; } } /* overflow-x oculto: la ficha se lee de arriba abajo, nunca de lado. Es la red por si algún texto o dato nuevo se pasa de ancho en una pantalla estrecha. Va en los bloques de contenido y NO en .ficha-pagina: overflow (aunque sea solo en x) convierte al elemento en contenedor de scroll, y entonces la cabecera sticky se calcula contra ÉL — se pintaba 86px más abajo, encima de la galería. */ .ficha-grid, .fi-relacionadas { overflow-x: hidden; } .ficha-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1200px; margin: 0 auto; min-width: 0; width: 100%; } .ficha-galeria, .ficha-datos { min-width: 0; } @media (min-width: 992px) { .ficha-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 24px; padding: 20px; } } /* ---------- Galería ---------- */ /* Las fotos no vienen todas en 4:3, así que sobra espacio arriba y abajo. Ese relleno va del color del tema (claro u oscuro), no en negro: las franjas negras parecían un fallo. Se usa la variable de Bootstrap para que siga al tema sin reglas duplicadas. */ .gal-marco { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--bs-tertiary-bg); overflow: hidden; } @media (min-width: 992px) { .gal-marco { border-radius: 14px; } } .gal-img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; } .gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .gal-nav:hover { background: #d4af37; color: #3a2e07; } .gal-prev { left: 10px; } .gal-next { right: 10px; } .gal-cuenta { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; } .gal-descargar { position: absolute; bottom: 10px; right: 10px; width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .gal-descargar:hover { background: #d4af37; color: #3a2e07; } .gal-tiras { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; } .gal-tira { width: 76px; height: 58px; border-radius: 9px; overflow: hidden; flex-shrink: 0; border: 2px solid transparent; background: var(--bs-tertiary-bg); padding: 0; cursor: pointer; } .gal-tira img { width: 100%; height: 100%; object-fit: cover; display: block; } .gal-tira.activa { border-color: #d4af37; } /* EN PC LAS MINIATURAS LLENAN LO QUE SOBRE DE LA COLUMNA. El hueco que se veía debajo de la galería no era de una ficha concreta: la columna izquierda medía SIEMPRE 587 px —una foto en 4:3 más UNA fila de miniaturas— y la derecha crece con el texto, así que el hueco era la resta. Medido en seis fichas de producción: de 71 a 245 px de rectángulo vacío. Lo reportó el usuario con capturas. Y había algo desaprovechado justo ahí: esa ficha tiene 27 fotos y se veían 7, arrastrando una barra horizontal fina que casi no se nota. Ahora las miniaturas bajan de fila y ocupan el alto que la columna deje libre. Medido después, a 1536 px: la de 27 fotos pasa de 238 px de hueco a 20 y se ven las 27 de golpe; la de 23, de 126 a 0. Con pocas fotos se reduce a la mitad y no llega a cero, porque las filas van completas o no van — con 18 fotos entran tres filas exactas y no hay una cuarta. LAS DOS PIEZAS QUE LO HACEN POSIBLE, y sin cualquiera de ellas no funciona: · `grid-template-rows: auto minmax(0, 1fr)` — la tira se queda con lo que sobre. Con `flex: 1` NO basta: el contenido envuelto estira el elemento y arrastra la columna entera (medido: la ficha pasaba de 825 px a 929 y el hueco se daba la vuelta). · `min-height: 0` — sin él un elemento no baja de su contenido y pasa lo mismo. EN EL TELÉFONO NO CAMBIA NADA: ahí la ficha es de una sola columna y la tira horizontal funciona bien; por eso va dentro de la media query. */ @media (min-width: 992px) { /* EL ALTO LO MANDA LA COLUMNA DE TEXTO, NUNCA LAS MINIATURAS. `height: 0` hace que la galería no aporte altura a la fila —así la fila la decide la columna de la derecha— y `min-height: 100%` la estira luego hasta llenarla. Sin esto, una ficha con MUCHAS fotos hacía lo contrario de lo que arregla todo lo demás: la tira crecía, empujaba la página y el hueco aparecía al otro lado, junto al texto. Lo reportó el usuario con una de 30 fotos: la izquierda llegaba a 1025 px y la derecha a 740 — 285 px de hueco. Con esto, esa misma ficha deja las dos columnas en 740 y la página baja de 1045 a 760. Lo que no cabe se desplaza DENTRO de la tira (ahí se ven 14 de 30), que es justo lo que `minmax(0, 1fr)` y `min-height: 0` permiten. Y no toca ninguna otra ficha: medidas las de 11, 13, 18, 20, 23 y otra de 30, todas se quedan exactamente igual. */ .ficha-galeria { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 0; min-height: 100%; } .gal-tiras { flex-wrap: wrap; /* Las FILAS se reparten el alto que sobre, en vez de amontonarse arriba y dejar el resto vacío. Es lo que lleva el hueco a cero en todas las fichas y no solo en las que tienen muchas fotos: con 18 se quedaba en 139 px. LO QUE CUESTA, y el usuario lo aprobó sabiéndolo: la miniatura deja de ser 4:3 y se pone más alta que ancha —de 76x58 pasa a entre 76x96 y 76x125, según cuánto haya que llenar—, así que la foto se recorta más por los lados. Para volver atrás basta con `align-content: flex-start` y quitar el `height` de abajo; o poner un `max-height` en `.gal-tira` para limitar cuánto crecen, a cambio de que en las fichas con pocas fotos vuelva a quedar algo de hueco. */ align-content: stretch; min-height: 0; overflow-x: hidden; overflow-y: auto; } /* Sin `height: auto` la FILA se estira pero la miniatura no: tiene el alto fijo en 58 px. Y el `max-height` es el freno: sin él la miniatura llegaba a 76x125 —más alta que ancha— y la foto se recortaba demasiado por los lados. 96 NO ES UN NÚMERO INVENTADO: es lo que le sale sola a una ficha de 8 fotos, o sea el crecimiento natural más pequeño que se midió. Con él todas las fichas enseñan la miniatura del MISMO tamaño, que antes iba de 96 a 125 según cuántas fotos tuviera cada una. Y el tope no devuelve el hueco: lo que sobra se reparte como separación ENTRE filas (medido: de 8 a 37 px según la ficha), no se acumula abajo. */ .gal-tira { height: auto; max-height: 96px; } } /* El flyer va al final y se distingue: es una pieza distinta de una foto. */ .gal-tira.es-flyer img { object-fit: contain; background: var(--bs-tertiary-bg); } /* ---------- Datos ---------- */ .ficha-datos { padding: 16px; } @media (min-width: 992px) { .ficha-datos { padding: 0; } } /* Precio y título comparten renglón (baseline: las dos letras se apoyan en la misma línea aunque tengan tamaños muy distintos). Si no caben, el título baja solo, sin desmontar nada. */ /* Precio primero y a la izquierda, con el titulo debajo: es el dato que se busca al abrir la ficha. Antes iban en la misma linea con el precio empujado a la derecha (margin-left:auto), y en el telefono el precio caia solo a un lado. */ .fi-cabecera { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; } .fi-precio { font-size: 1.7rem; font-weight: 700; color: #b8860b; line-height: 1.15; } /* Precio y costo por m2 en el mismo renglon, apoyados en la misma linea de base. La pildora (.prop-pm2) se pinta en el