/* ============================================================
   ESTRADA PROPIEDADES - MAPA DE CAMPOS
   ============================================================ */


.mapa-oscuro {
    --mapa-fondo: #0e1b28;
    --mapa-panel: #1a2c3f;
    --mapa-linea: rgba(255, 255, 255, .14);
    --mapa-rosa: #d69fb4;

    position: relative;

    background: var(--mapa-fondo);

    font-family:
        "Montserrat",
        system-ui,
        sans-serif;

    overflow: hidden;
}


/* ============================================================
   CONTENEDOR DEL MAPA
   ============================================================ */

#campos-map {
    width: 100%;

    height:
        min(
            650px,
            calc(100vh - 140px)
        );

    min-height: 520px;

    background:
        var(--mapa-fondo);

    position: relative;

    z-index: 1;
}


/* ============================================================
   COLUMNA STICKY
   ============================================================ */



.mapa-campos__map-wrap {
    position: sticky;
    top: 90px;
    align-self: start;
    min-width: 0;
    height: fit-content;
}


/* ============================================================
   TILES
   ============================================================ */

.mapa-oscuro .leaflet-tile-pane {
    filter:
        invert(1)
        hue-rotate(180deg)
        brightness(.95)
        contrast(1)
        saturate(.6);
}


/* ============================================================
   PANE DE PINES
   ============================================================ */

.mapa-oscuro .leaflet-marker-pane {
    z-index: 650;
}


/* ============================================================
   PIN PERSONALIZADO
   ============================================================ */

.estrada-map-marker {
    background: transparent !important;
    border: 0 !important;
}


.estrada-pin {
    position: relative;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ead0da;

    color: #243142;

    border: 3px solid #fff;

    border-radius:
        50% 50% 50% 0;

    transform:
        rotate(-45deg);

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, .35);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.estrada-pin span {
    transform:
        rotate(45deg);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;
}


.estrada-map-marker:hover
.estrada-pin {
    background: #f2bfd2;

    transform:
        rotate(-45deg)
        scale(1.1);

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, .45);
}


/* ============================================================
   POPUP
   ============================================================ */

.mapa-oscuro .leaflet-popup-content-wrapper {
    background:
        #17293b;

    color:
        #fff;

    border-radius:
        0;

    padding:
        0;

    overflow:
        hidden;

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, .45);
}


.mapa-oscuro .leaflet-popup-content {
    margin: 0;

    width:
        285px !important;
}


.mapa-oscuro .leaflet-popup-tip {
    background:
        #17293b;
}


.campo-map-popup {
    display:
        block;

    color:
        inherit;

    text-decoration:
        none;
}


.campo-popup-image {
    width:
        100%;

    height:
        145px;

    overflow:
        hidden;

    background:
        #111e2b;
}


.campo-popup-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .5s ease;
}


.campo-map-popup:hover
.campo-popup-image img {
    transform:
        scale(1.04);
}


.campo-popup-body {
    padding:
        18px;
}


.campo-popup-body small {
    display:
        block;

    margin-bottom:
        6px;

    color:
        rgba(
            255,
            255,
            255,
            .55
        );

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;
}


.campo-popup-body strong {
    display:
        block;

    color:
        #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-weight:
        400;

    line-height:
        1.2;
}


.campo-popup-meta {
    display:
        flex;

    gap:
        12px;

    margin-top:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            .65
        );

    font-size:
        12px;
}


.campo-popup-link {
    margin-top:
        14px;

    padding-top:
        12px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--mapa-rosa);

    font-size:
        12px;

    font-weight:
        600;
}


/* ============================================================
   CONTROLES
   ============================================================ */

.mapa-oscuro
.leaflet-control-zoom {
    border:
        1px solid
        var(--mapa-linea);

    box-shadow:
        none;
}


.mapa-oscuro
.leaflet-control-zoom a {
    background:
        var(--mapa-fondo);

    border-bottom-color:
        var(--mapa-linea);

    color:
        #fff;
}


.mapa-oscuro
.leaflet-control-zoom a:hover {
    background:
        var(--mapa-panel);

    color:
        var(--mapa-rosa);
}


/* ============================================================
   ATRIBUCIÓN
   ============================================================ */

.mapa-oscuro
.leaflet-control-attribution {
    background:
        rgba(
            14,
            27,
            40,
            .82
        );

    color:
        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        10px;
}


.mapa-oscuro
.leaflet-control-attribution a {
    color:
        rgba(
            255,
            255,
            255,
            .7
        );
}


/* ============================================================
   AYUDA ZOOM
   ============================================================ */

.mapa-oscuro::after {
    content:
        "Usá Ctrl + rueda para hacer zoom";

    position:
        absolute;

    z-index:
        900;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(
            14,
            27,
            40,
            .72
        );

    color:
        #fff;

    font-size:
        15px;

    font-weight:
        600;

    letter-spacing:
        .3px;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .3s ease;
}


.mapa-oscuro.mostrar-ayuda::after {
    opacity:
        1;
}


/* ============================================================
   SIN TILES
   ============================================================ */

.mapa-oscuro.sin-tiles::before {
    content:
        "No se pudo cargar el mapa. Abrilo en Google Maps desde el enlace de al lado.";

    position:
        absolute;

    z-index:
        850;

    inset:
        0;

    padding:
        40px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--mapa-fondo);

    color:
        rgba(
            255,
            255,
            255,
            .6
        );

    font-size:
        15px;

    line-height:
        1.6;

    text-align:
        center;
}


/* ============================================================
   CARD ACTIVA
   ============================================================ */

[data-campo-card] {
    transition:
        background .25s ease,
        border-color .25s ease;
}


[data-campo-card].map-active {
    background:
        rgba(
            214,
            159,
            180,
            .08
        );
}


/* ============================================================
   TABLET
   ============================================================ */

@media (
    max-width: 1100px
) {

    .campos-map-column {
        position:
            relative;

        top:
            auto;
    }

    #campos-map {
        height:
            560px;

        min-height:
            500px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (
    max-width: 768px
) {

    #campos-map {
        height:
            460px;

        min-height:
            420px;
    }


    .mapa-oscuro::after {
        content:
            "Usá dos dedos para navegar el mapa";

        font-size:
            13px;
    }


    .campo-popup-image {
        height:
            120px;
    }


    .campo-popup-body strong {
        font-size:
            18px;
    }


    .mapa-oscuro
    .leaflet-popup-content {
        width:
            250px !important;
    }
}


/* ============================================================
   MOBILE CHICO
   ============================================================ */

@media (
    max-width: 480px
) {

    #campos-map {
        height:
            400px;

        min-height:
            380px;
    }


    .estrada-pin {
        width:
            34px;

        height:
            34px;
    }


    .estrada-pin span {
        font-size:
            11px;
    }
}