/* `.contenido` trae `margin-top: 88px` de la hoja global, pensada para
   páginas de texto. Acá el contenido ya arranca debajo del header fijo, así
   que esos 88px eran una franja blanca muerta sobre el mapa. Se acorta solo
   para esta pantalla: la regla global la usa todo el sitio. */
.contenido--mapa {
    margin-top: 24px;
}

.mapa-exploracion {
    /* Mismo aire a los dos lados que el `nav` del encabezado, que ya usa
       20px: así el mapa queda alineado con el resto del sitio en vez de
       irse a sangre contra el borde de la ventana. */
    padding: 0 20px;
    width: 100%;
}

.mapa-exploracion__toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* `.btnBlanco` es `position: absolute` por definición global (flota arriba a
   la derecha con right/top fijos). Acá eso la dejaba encima del mapa,
   tapando pines, y en móvil encima del botón de ubicación. Vuelve al flujo:
   la barra ya es flex con space-between, así que el botón de volver queda a
   la izquierda -- que es donde corresponde, lleva una flecha "atrás" -- y el
   de ubicación a la derecha. */
.mapa-exploracion__toolbar .btnBlanco {
    padding-right: 15px;
    position: static;
    /* `z-index` aplica a un elemento estático cuando es hijo de un flex, y la
       barra lo es. Sin resetear el 99 que trae de la hoja global, el botón se
       pintaba por encima del header fijo (z-index 14) al hacer scroll. */
    z-index: auto;
}

.mapa-exploracion__location,
.mapa-exploracion__retry {
    align-items: center;
    background: #fff;
    border: 1px solid #202b2b;
    border-radius: 22px;
    color: #202b2b;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    gap: 7px;
    min-height: 40px;
    padding: 8px 15px;
}

.mapa-exploracion__location:hover,
.mapa-exploracion__location:focus-visible,
.mapa-exploracion__retry:hover,
.mapa-exploracion__retry:focus-visible {
    background: #eef8f0;
}

.mapa-exploracion__location:disabled {
    cursor: wait;
    opacity: .65;
}

.mapa-exploracion__surface {
    display: flex;
    gap: 16px;
    min-height: 560px;
}

/* El lienzo es el contexto de posicionamiento de los overlays (estado, panel
   de detalle), que antes colgaban de la superficie entera. Al entrar el
   listado como columna hermana, la superficie dejó de ser la caja del mapa. */
.mapa-exploracion__lienzo {
    flex: 1;
    min-width: 0;
}

.mapa-listado {
    display: flex;
    flex-direction: column;
    flex: 0 0 340px;
    gap: 10px;
    height: min(70vh, 720px);
    min-height: 520px;
}

.mapa-listado__titulo {
    color: #202b2b;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.mapa-listado__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.mapa-listado__vacio {
    color: #5a6a6a;
    font-size: 14px;
    margin: 0;
}

.mapa-listado__item {
    background: #fff;
    border: 1px solid #e3e8e8;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    padding: 8px;
    text-align: left;
    width: 100%;
}

.mapa-listado__item:hover,
.mapa-listado__item:focus-visible,
.mapa-listado__item.is-activo {
    border-color: #2fae60;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}

.mapa-exploracion__canvas {
    border-radius: 12px;
    height: min(70vh, 720px);
    min-height: 520px;
    overflow: hidden;
    width: 100%;
}

.mapa-exploracion__status {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
    display: flex;
    gap: 12px;
    left: 50%;
    max-width: min(90%, 420px);
    padding: 11px 15px;
    position: absolute;
    top: 18px;
    transform: translateX(-50%);
    z-index: 30;
}

.mapa-exploracion__status.is-error {
    border-left: 4px solid #b42318;
}

.mapa-exploracion__status.is-empty,
.mapa-exploracion__status.is-empty-area {
    border-left: 4px solid #567;
}

.mapa-exploracion__status.is-loading {
    color: #405050;
}

.map-point-layer {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.map-price-pin,
.map-cluster-pin {
    cursor: pointer;
    font-family: inherit;
    pointer-events: auto;
    position: absolute;
}

.map-price-pin {
    background: #fff;
    border: 2px solid #202b2b;
    border-radius: 22px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    color: #202b2b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    overflow: visible;
    padding: 0 9px;
    transform-origin: center bottom;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
    white-space: nowrap;
}

.map-price-pin::after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #202b2b;
    bottom: -10px;
    content: '';
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.map-price-pin::before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #fff;
    bottom: -7px;
    content: '';
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 1;
}

.map-price-pin.is-selected {
    background: #3f9b55;
    border-color: #27733a;
    color: #fff;
    transform: scale(1.08);
}

/* Resaltado al pasar por su tarjeta del listado. Se distingue del
   seleccionado: este solo crece y se levanta, sin pintarse de verde, para
   que se siga viendo cuál es el que está abierto en el panel. El z-index no
   se toca acá: los pines lo llevan en su atributo style, que le gana a la
   hoja de estilos, así que lo sube highlight() por JS. */
.map-price-pin.is-highlighted,
.map-cluster-pin.is-highlighted {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
    transform: scale(1.12);
}

.map-price-pin.is-selected::after {
    border-top-color: #27733a;
}

.map-price-pin.is-selected::before {
    border-top-color: #3f9b55;
}

.map-cluster-pin {
    align-items: center;
    background: #3f9b55;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .25);
    color: #fff;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 50px;
    justify-content: center;
    width: 50px;
}

.map-user-location {
    background: #1b83e8;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 9px rgba(27, 131, 232, .2), 0 2px 5px rgba(0, 0, 0, .25);
    height: 12px;
    pointer-events: none;
    position: absolute;
    width: 12px;
    z-index: 15;
}

.map-place-panel {
    background: #fff;
    border-radius: 12px;
    bottom: 20px;
    box-shadow: 0 5px 24px rgba(0, 0, 0, .24);
    left: 20px;
    max-height: calc(100% - 40px);
    overflow: hidden;
    position: absolute;
    width: 360px;
    z-index: 40;
}

.map-place-panel__close {
    align-items: center;
    background: rgba(0, 0, 0, .5);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 23px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    z-index: 2;
}

.map-place-panel__close:focus-visible {
    outline: 3px solid #3f9b55;
}

.map-place-panel__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 17px 48px 12px 16px;
}

.map-place-panel__heading strong {
    color: #202b2b;
    font-size: 18px;
}

.map-place-panel__heading span,
.map-place-panel__summary-copy span,
.map-place-panel__space-copy small {
    color: #5f6c6c;
    font-size: 13px;
}

.map-place-panel__summary {
    align-items: center;
    border-bottom: 1px solid #e4e9e7;
    display: flex;
    gap: 10px;
    padding: 0 16px 12px;
}

.map-place-panel__summary img {
    border-radius: 8px;
    height: 54px;
    object-fit: cover;
    width: 70px;
}

.map-place-panel__summary-copy,
.map-place-panel__space-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.map-place-panel__property-list,
.map-place-panel__space-list {
    max-height: 310px;
    overflow-y: auto;
}

.map-place-panel__property {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e4e9e7;
    cursor: pointer;
    display: block;
    padding: 10px 0;
    text-align: left;
    width: 100%;
}

.map-place-panel__property:hover,
.map-place-panel__property:focus-visible {
    background: #f2faf3;
}

.map-place-panel__space {
    align-items: center;
    border-bottom: 1px solid #e4e9e7;
    color: inherit;
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
}

.map-place-panel__space:hover,
.map-place-panel__space:focus-visible {
    background: #f2faf3;
}

.map-place-panel__space img {
    border-radius: 8px;
    height: 58px;
    object-fit: cover;
    width: 76px;
}

.map-place-panel__loading,
.map-place-panel__error {
    margin: 0;
    padding: 15px 16px 20px;
}

.map-place-panel__error {
    color: #b42318;
}

@media (max-width: 767px) {
    /* En este ancho el `nav` del encabezado baja a 10px; el mapa lo sigue
       para no quedar con más aire que el resto de la página. */
    .mapa-exploracion {
        padding: 0 10px;
    }

    .mapa-exploracion__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .mapa-exploracion__toolbar .btn,
    .mapa-exploracion__location {
        justify-content: center;
        width: 100%;
    }


    /* En pantalla angosta no hay lugar para dos columnas: el listado pasa a
       ir debajo del mapa, con su propio alto y su propio scroll. */
    .mapa-exploracion__surface {
        flex-direction: column;
        min-height: 0;
    }

    .mapa-listado {
        flex: 0 0 auto;
        height: auto;
        max-height: 46vh;
        min-height: 0;
        order: 2;
    }

    .mapa-exploracion__lienzo {
        order: 1;
    }

    /* Más bajo que los 76vh de antes: ahora hay un listado abajo, y con el
       mapa a pantalla casi completa quedaba entero debajo del pliegue, sin
       nada que insinuara que estaba ahí. */
    .mapa-exploracion__canvas {
        height: 56vh;
        min-height: 360px;
    }

    .mapa-exploracion__status {
        top: 12px;
    }

    .map-place-panel {
        bottom: 12px;
        left: 12px;
        max-height: 45%;
        right: 12px;
        width: auto;
    }

    .map-place-panel__property-list,
    .map-place-panel__space-list {
        max-height: 210px;
    }
}