/**
* Mapa interactivo de propiedades (inc/front/prop-map.php / assets/prop-map.js).
* El contenedor reemplaza al iframe estático que había en la sección "Mapa"
* de zona-info.php / ciudad-info.php — mismo lugar, mismo ancho.
*
* "mark" (burbujita de precio) y "strip" (tarjeta grande al abrir un mark)
* son overlays HTML propios, no un ícono de Maps ni su InfoWindow — pueden
* heredar la tipografía del theme como cualquier otro elemento de la
* página... salvo que Maps JS inyecta su propio `.gm-style{font-family:
* Roboto,Arial,sans-serif}` en el contenedor del mapa, y esa regla pisa
* cualquier fuente heredada de más arriba porque apunta directo a un
* ancestro nuestro, no algo que nosotros controlemos. Por eso `-mark` y
* `-strip` fijan `font-family` explícito acá — es la misma fuente que usa
* el resto del sitio (Poppins, ver el de Google Fonts en el ),
* simplemente no había forma de heredarla sin pisar antes lo de Maps.
*/
.mdpd-prop-map__mark,
.mdpd-prop-map__strip,
.mdpd-prop-map__debug-label {
font-family: Poppins, sans-serif;
}
/* Solo debug (?mdpd_map_debug=1 + admin, ver prop-map.php) — margen de
outliers en metros, arriba a la izquierda del mapa. */
.mdpd-prop-map__debug-label {
margin: 0.5rem;
padding: 0.3rem 0.6rem;
background: #fff;
border: 1px solid #dce4e8;
border-radius: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
color: #10222a;
box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}
/* El mapa toma la proporción de la pantalla en vez de un alto fijo en px:
16:9 en desktop (lo que usa la mayoría de los monitores) y más vertical
en mobile, donde un 16:9 quedaría una franja finita e inservible.
`aspect-ratio` con `height:auto` — el alto sale del ancho real de la
columna, así que no hay que tocar nada cuando cambia el layout. */
.mdpd-prop-map {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
min-height: 18rem;
border: 1px solid #dce4e8;
border-radius: var(--mdpd-caja-radio, 0.75rem);
overflow: hidden;
}
@media (max-width: 849px) {
.mdpd-prop-map {
aspect-ratio: 4 / 3;
}
}
@media (max-width: 549px) {
.mdpd-prop-map {
aspect-ratio: 4 / 5;
}
}
/* --- Botonera sobre el mapa (tipos de propiedad + POIs nativos) ---
Los botones de tipo filtran markers de verdad y los de POI prenden/apagan
capas nativas de Google (ver prop-map.js): nada decorativo acá. */
.mdpd-prop-map__toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-bottom: 0.75rem;
}
.mdpd-prop-map__grupo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
}
.mdpd-prop-map__grupo-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.6;
margin-right: 0.125rem;
}
.mdpd-prop-map__btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin: 0;
padding: 0.3rem 0.7rem;
border: 1px solid #dce4e8;
border-radius: 2rem;
background: #fff;
color: inherit;
font-size: 0.8125rem;
line-height: 1.3;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.mdpd-prop-map__btn:hover {
border-color: var(--fs-color-primary, #168ea6);
}
.mdpd-prop-map__btn-n {
font-size: 0.6875rem;
font-weight: 600;
opacity: 0.65;
}
/* Apagado = atenuado pero legible; el estado real lo lleva aria-pressed. */
.mdpd-prop-map__btn[aria-pressed="false"] {
opacity: 0.45;
background: #f5f7f8;
}
.mdpd-prop-map__btn--tipo[aria-pressed="true"] {
border-color: var(--fs-color-primary, #168ea6);
background: color-mix(in srgb, var(--fs-color-primary, #168ea6) 10%, #fff);
}
.mdpd-prop-map__btn--poi[aria-pressed="true"] {
border-color: var(--fs-color-secondary, #465f70);
background: color-mix(in srgb, var(--fs-color-secondary, #465f70) 12%, #fff);
font-weight: 600;
}
/* --- Mark: pill de texto + colita + punto, siempre anclado al punto real ---
Vive en la pane `overlayMouseTarget` de Maps (ver prop-map.js) — la única
que entrega clicks de forma confiable a un div puesto a mano; por eso
pointer-events:auto explícito, sin depender del default de esa pane. */
.mdpd-prop-map__mark {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
transform: translate(-50%, -100%);
cursor: pointer;
pointer-events: auto;
z-index: 1;
}
/* Mapa de un solo punto (ficha, etc.): no abre nada al click. */
.mdpd-prop-map__mark--static {
cursor: default;
}
/*
* En el mapa de la ficha la pastilla lleva el título de la propiedad, no un
* precio: promedio 35 caracteres y hasta 108 en el peor caso medido. Con el
* `white-space: nowrap` de la pastilla genérica, todo lo que pasaba de los
* 14rem se recortaba con puntos suspensivos y el dato quedaba escondido.
*
* Se deja que corte en varias líneas en vez de ensanchar la caja: el ancho
* máximo es el que hace que el globo entre en un celular, y tocarlo para que
* quepa un título largo rompería la vista chica, que es la que más importa.
*
* `overflow-wrap: anywhere` es para el caso patológico de una sola palabra más
* ancha que la caja (una URL o un nombre pegado sin espacios): sin eso,
* desbordaría igual aunque el resto envuelva bien.
*/
.mdpd-prop-map__mark--static .mdpd-prop-map__mark-pill {
display: inline-block;
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
text-align: center;
}
.mdpd-prop-map__mark-pill {
display: inline-flex;
align-items: center;
max-width: 14rem;
padding: 0.25rem 0.6rem;
background: #fff;
border: 1.5px solid;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
}
.mdpd-prop-map__mark-tail {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-width: 6px;
border-top-style: solid;
margin-top: -1px;
}
.mdpd-prop-map__mark-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
margin-top: -1px;
}
/*
* Ubicación aproximada: la coordenada salió de geocodificar la calle, no la
* puerta (`coord_origen = geocode_apx`). El pin va con el borde punteado —la
* convención de "esto es un límite difuso"— y el globo dice el motivo con
* todas las letras. Se mantiene el color de la operación: lo que es incierto
* es DÓNDE está, no si es venta o alquiler.
*/
.mdpd-prop-map__mark--aprox .mdpd-prop-map__mark-pill {
border-style: dashed;
}
.mdpd-prop-map__mark--aprox .mdpd-prop-map__mark-dot {
opacity: 0.5;
}
.mdpd-prop-map__strip-aprox {
display: block;
margin-top: 0.15rem;
color: #6b7280;
font-size: 0.68rem;
font-style: italic;
line-height: 1.2;
}
/* --- Strip: tarjeta horizontal (miniatura + tipo/operación + precio + "Ver") --- */
.mdpd-prop-map__strip {
position: absolute;
transform: translate(-50%, calc(-100% - 0.7rem));
z-index: 2;
}
/*
* Las "patas" del abanico: el SVG que une el punto real con cada pastilla
* desplegada. Centrado sobre el punto, y sin capturar el mouse — el click
* tiene que llegar a las pastillas que están encima.
*/
.mdpd-prop-map__legs {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
/*
* Con un abanico abierto, el resto de las marcas se esconde: desplegar nueve
* pastillas encima de las cuarenta que ya había alrededor no se lee. Quedan
* solo las del abanico y sus patas, hasta que se cierre.
*/
.mdpd-prop-map--abanico .mdpd-prop-map__mark:not(.mdpd-prop-map__mark--abanico) {
display: none;
}
/*
* Punto compartido por MUCHAS propiedades (más de 12): slider de a 4 fichas
* por página,
* con bullets y sin flechas. Reemplaza al abanico que desplegaba las pastillas
* alrededor del punto.
*
* Sin scroll a propósito: la lista scrolleable se peleaba con la rueda del
* mouse, que en un mapa hace zoom. Con páginas, la rueda le queda al mapa.
*
* OJO con el nombre: `__grupo` ya está tomado por los grupos de botones de la
* botonera de arriba. Estas clases van con `__multi`.
*/
.mdpd-prop-map__strip--multi .mdpd-prop-map__multi {
width: 17rem;
max-width: 80vw;
padding-bottom: 0.4rem;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.mdpd-prop-map__multi-titulo {
margin: 0;
padding: 0.45rem 0.7rem;
background: var(--fs-color-primary, #168ea6);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
}
/* `touch-action: pan-y` deja el scroll vertical de la página al dedo y nos
reserva el horizontal para pasar de página. `user-select: none` evita que
arrastrar seleccione el texto de las fichas. */
.mdpd-prop-map__multi-viewport {
overflow: hidden;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.mdpd-prop-map__multi-viewport:active {
cursor: grabbing;
}
.mdpd-prop-map__multi-viewport img {
-webkit-user-drag: none;
user-drag: none;
}
.mdpd-prop-map__multi-track {
display: flex;
transition: transform 0.25s ease;
}
/* `min-width: 0` es lo que impide que una página se ensanche con su contenido
y desarme el cálculo de 100% por página. */
.mdpd-prop-map__multi-slide {
flex: 0 0 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(0, 0, 0, 0.08);
}
/* Adentro del slider la tarjeta es un renglón, no un globo suelto: sin sombra,
sin radio y con el ancho que le dé la página. */
.mdpd-prop-map__strip--multi .mdpd-prop-map__strip-card {
width: initial;
box-shadow: none;
border-radius: 0;
}
.mdpd-prop-map__multi-bullets {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.3rem;
padding: 0.5rem 0.5rem 0.15rem;
}
/*
* Flatsome le pone a todo `button` un piso de tamaño pensado para botones de
* verdad: `min-width: 24px` y `min-height: 2.5em`. Sobre un bullet de 0.5rem
* eso mandaba, y quedaban unas pelotas de 24×40 px. Se bajan los dos mínimos —
* con solo el ancho seguirían altos.
*/
.mdpd-prop-map__multi-bullet {
width: 0.5rem;
height: 0.5rem;
min-width: 0.1rem;
min-height: 0.1rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.mdpd-prop-map__multi-bullet:hover {
background: rgba(0, 0, 0, 0.4);
}
.mdpd-prop-map__multi-bullet.is-on {
background: var(--fs-color-primary, #168ea6);
transform: scale(1.25);
}
.mdpd-prop-map__strip-card {
position: relative;
display: flex;
align-items: stretch;
width: 15.5rem;
text-decoration: none;
color: inherit;
background: #fff;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.18);
}
/* Shimmer mientras carga: el fondo pinta detrás del bitmap de la foto — en
cuanto la imagen real decodifica y pinta encima lo tapa sola, sin JS que
escuche `load`. Cada propiedad publicada tiene foto sí o sí, así que este
estado siempre es transitorio, nunca uno final. */
@keyframes mdpd-prop-map-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.mdpd-prop-map__strip-img {
flex: 0 0 auto;
width: 4rem;
height: 4rem;
object-fit: cover;
background: linear-gradient(100deg, #e4e9ec 30%, #f4f6f7 50%, #e4e9ec 70%);
background-size: 200% 100%;
animation: mdpd-prop-map-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.mdpd-prop-map__strip-img {
animation: none;
background: #e9ecef;
}
}
/* Sin miniatura: caso de borde real (no debería pasar — ninguna propiedad se
publica sin fotos), no una carga en curso — fondo fijo, sin shimmer. */
.mdpd-prop-map__strip-img--vacia {
background: #e9ecef;
animation: none;
display: block;
}
.mdpd-prop-map__strip-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.15rem;
min-width: 0;
padding: 0.4rem 0.55rem;
}
.mdpd-prop-map__strip-tipo {
font-size: 0.72rem;
font-weight: 600;
color: #4a5b63;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mdpd-prop-map__strip-precio {
font-size: 0.95rem;
font-weight: 800;
line-height: 1.15;
}
/* "Consulte su valor" (sin precio real): más chico y liviano — el color
sigue siendo el de la operación (inline, ver prop-map.js), esto solo
achica el tratamiento tipográfico. */
.mdpd-prop-map__strip-precio--consulta {
font-size: 0.8rem;
font-weight: 600;
}
.mdpd-prop-map__strip-ver {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
font-size: 0.78rem;
font-weight: 700;
color: #fff;
background: var(--primary-color, #465f70);
}
.mdpd-prop-map__strip-tail {
position: absolute;
left: 50%;
bottom: -0.45rem;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid #fff;
}
/* --------------------------------------------------------------------------
* Página /mapa/ ([mdpd_mapa]) — barra superior, botón de volver y el globo con
* el nombre del lugar que sigue al mouse sobre los contornos.
* -------------------------------------------------------------------------- */
.mdpd-mapa-page {
position: relative;
}
.mdpd-mapa-page__barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.9rem;
margin-bottom: 0.75rem;
}
.mdpd-mapa-page__titulo {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #10222a;
}
.mdpd-mapa-page__hub {
margin-left: auto;
font-size: 0.85rem;
font-weight: 600;
color: var(--fs-color-primary, #168ea6);
}
/* El globo del hover: sigue al puntero, nunca lo intercepta. */
.mdpd-mapa-page__hint {
position: absolute;
z-index: 5;
transform: translate(0.9rem, -50%);
padding: 0.28rem 0.6rem;
background: #10222a;
color: #fff;
border-radius: 0.35rem;
font-family: Poppins, sans-serif;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
}
/* Sobre los contornos el cursor invita a entrar. */
.mdpd-mapa-page__lienzo {
cursor: default;
}
@media (max-width: 549px) {
.mdpd-mapa-page__hub {
margin-left: 0;
}
}
/* Preguntas frecuentes del mapa ([mdpd_mapa_faqs]). `` nativo: abre y
cierra sin JavaScript, y el texto está en el HTML aunque esté plegado. */
.mdpd-mapa-faqs {
margin: 2rem 0 0;
}
.mdpd-mapa-faqs__titulo {
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.mdpd-mapa-faqs__item {
border-bottom: 1px solid #e7edf0;
}
.mdpd-mapa-faqs__item > summary {
padding: 0.75rem 0;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.mdpd-mapa-faqs__item > summary::-webkit-details-marker {
display: none;
}
/* El signo lo pone el CSS y no el markup: así el texto de la pregunta que lee
un buscador es exactamente el de la FAQ, sin caracteres de adorno. */
.mdpd-mapa-faqs__item > summary::before {
content: '+';
display: inline-block;
width: 1.1em;
color: var(--fs-color-primary, #168ea6);
font-weight: 700;
}
.mdpd-mapa-faqs__item[open] > summary::before {
content: '−';
}
.mdpd-mapa-faqs__item > p {
margin: 0 0 0.9rem 1.1em;
color: #46626f;
}