/*=====================================================
                    MAPA PRINCIPAL
======================================================*/


.mapa-card{

    width:100%;
    height:900px;

    background:#f8fafc;

    border-radius:25px;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);

}



#mapaCliente{

    width:100%;
    height:100%;

    overflow:hidden;

    position:relative;

    cursor:grab;

    background:white;

    touch-action:none;

}



#mapaCliente:active{

    cursor:grabbing;

}



#mapaCliente svg{

    width:100%;

    height:auto;

    display:block;

    user-select:none;

    transform-origin:0 0;

}






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


.mapa-toolbar{

    position:absolute;

    top:20px;

    left:20px;

    z-index:2000;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.mapa-toolbar button{

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:white;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;


    box-shadow:
    0 12px 30px rgba(0,0,0,.15);

    transition:.25s;

}



.mapa-toolbar button:hover{

    transform:scale(1.08);

    background:#2563eb;

    color:white;

}






/*=====================================================
                    LOTES
======================================================*/


.lote-svg,
.lote-grupo{

    cursor:pointer;

}



.lote-grupo polygon,
.lote-grupo path,
.lote-grupo rect{

    transition:.25s;

}



.lote-hover{

    opacity:.75;

}





.lote-seleccionado,
.lote-seleccionado polygon,
.lote-seleccionado path,
.lote-seleccionado rect{

    fill:#22c55e !important;

    stroke:#166534 !important;

    stroke-width:5 !important;


    filter:

    drop-shadow(
        0 0 10px rgba(34,197,94,.8)
    );

}







/*=====================================================
                    ESTADOS
======================================================*/


.estado-disponible{

    fill:#86efac !important;

}



.estado-reservado{

    fill:#fde047 !important;

}



.estado-vendido{

    fill:#f87171 !important;

}



.estado-promocion{

    fill:#60a5fa !important;

}







/*=====================================================
                    TOOLTIP
======================================================*/


.map-tooltip{

    position:fixed;

    display:none;

    padding:8px 12px;

    background:#111827;

    color:white;

    border-radius:10px;

    font-size:12px;

    pointer-events:none;

    z-index:999999;

    box-shadow:
    0 8px 20px rgba(0,0,0,.25);

}








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


.mapa-card{

    position:relative;

}



.mapa-popup{

    position:absolute;

    display:none;

    width:300px;

    background:white;

    border-radius:18px;

    padding:0;

    box-shadow:
    0 15px 45px rgba(0,0,0,.25);

    z-index:9999;

}



/* COLITA */

.mapa-popup::after{


    content:"";


    position:absolute;


    bottom:-14px;


    left:50%;


    transform:translateX(-50%);



    width:0;

    height:0;



    border-left:14px solid transparent;

    border-right:14px solid transparent;

    border-top:14px solid white;


}




/* HEADER */


.popup-header{

    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:15px 18px;


    background:#1c4fc7;


    color:white;


    border-radius:

    22px 22px 0 0;

}



.popup-header button{

    border:none;

    background:none;

    color:white;

    font-size:24px;

    cursor:pointer;

}







/* BODY */


.popup-body{

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:12px;

    font-size:14px;

}





.popup-btn{

    display:block;

    margin:15px;

    padding:12px;


    text-align:center;


    border-radius:12px;


    background:#35bd63;


    color:white;


    text-decoration:none;


    font-weight:bold;

}



.popup-btn:hover{

    background:#1d4ed8;

}







/* ANIMACION */


@keyframes popup{


from{

    opacity:0;

    transform:

    translateY(20px)

    scale(.9);

}


to{

    opacity:1;

    transform:

    translateY(0)

    scale(1);

}


}








/*=====================================================
                    FILTROS
======================================================*/


.mapa-filtros{

    position:absolute;


    top:20px;


    right:20px;


    z-index:2000;


    background:white;


    padding:15px;


    border-radius:18px;


    display:flex;


    gap:10px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.15);

}




.mapa-filtros select,
.mapa-filtros input{


    height:38px;


    border-radius:10px;


    border:1px solid #ddd;


    padding:0 12px;

}



.mapa-filtros button{

    border:none;

    border-radius:10px;

    padding:0 18px;


    background:#16a34a;


    color:white;

    cursor:pointer;

}








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


@media(max-width:768px){


.mapa-card{

    height:70vh;

    border-radius:18px;

}




.mapa-toolbar{

    top:10px;

    left:10px;

}




.mapa-toolbar button{

    width:42px;

    height:42px;

    font-size:20px;

}




#mapaPopup{


    width:90%;

    max-width:330px;


}




.popup-body{

    font-size:13px;

    padding:15px;

}





.mapa-filtros{


    top:auto;


    bottom:15px;


    left:10px;


    right:10px;


    flex-wrap:wrap;


    justify-content:center;


}



.mapa-filtros select,
.mapa-filtros input,
.mapa-filtros button{


    width:100%;

}



}





@media(max-width:480px){



#mapaPopup{

    width:85%;

}



.popup-header{

    padding:12px 15px;

}



.popup-btn{

    margin:12px;

    padding:10px;

}



}