body {
        margin: 0;
        padding: 0;
    }
    #map {
        width: 100%;
		height: 100vh;
    }

    /* =========================
   RESET
========================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

#map{
    position:absolute;
    inset:0;
}


/* =========================
   VARIABLES
========================= */

:root{

    --margin:clamp(8px,1vw,18px);

    --radius:12px;

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

    --panel-width:
        clamp(180px,22vw,320px);

    --font:
        clamp(.80rem,.35vw + .72rem,1rem);

}


/* =========================
   PANELES
========================= */

.panel{

    position:absolute;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:12px;

    font-size:var(--font);

    z-index:1000;

    max-width:var(--panel-width);

}


/* =========================
   POSICIONES
========================= */

.top-left{

    top:var(--margin);

    left:var(--margin);

}

.top-right{

    top:var(--margin);

    right:var(--margin);

}

.bottom-left{

    bottom:var(--margin);

    left:var(--margin);

}

.bottom-right{

    bottom:var(--margin);

    right:var(--margin);

}


/* =========================
   BOTONES
========================= */

button{

    cursor:pointer;

    border:none;

    border-radius:8px;

    padding:
        .6rem
        .9rem;

    font-size:var(--font);

}


/* =========================
   LEAFLET
========================= */

.leaflet-control{

    font-size:var(--font);

}

.leaflet-popup-content{

    width:auto;

    max-width:min(320px,80vw);

    font-size:var(--font);

}

.leaflet-popup-content img{

    width:100%;

    height:auto;

}


/* =========================
   MÓVIL
========================= */

@media (max-width:600px){

    .panel{

        max-width:calc(100vw - 20px);

    }

    .top-right{

        top:auto;

        bottom:var(--margin);

        right:var(--margin);

    }

}


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

@media (min-width:601px) and (max-width:992px){

    .panel{

        max-width:260px;

    }

}


/* =========================
   ESCRITORIO
========================= */

@media (min-width:993px){

    .panel{

        max-width:320px;

    }

}


/* =========================
   PANTALLAS MUY GRANDES
========================= */

@media (min-width:1800px){

    :root{

        --font:1.05rem;

        --margin:24px;

    }

}