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

:root {

    --header-height: 78px;
    --footer-height: 28px;

    --primary: #263238;
    --primary-dark: #1c2529;

    --background: #ffffff;

    --text-primary: #263238;
    --text-secondary: #546e7a;

    --border: #d7dde1;

    --panel-background:
        rgba(255, 255, 255, 0.95);

    --shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);

}


/* ============================================================
   DOCUMENTO
   ============================================================ */

* {

    box-sizing:
        border-box;

}


html,
body {

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text-primary);

}


/* ============================================================
   ENCABEZADO
   ============================================================ */

.app-header {

    height:
        var(--header-height);

    display:
        flex;

    align-items:
        center;

    padding:
        8px 22px;

    background:
        #ffffff;

    border-bottom:
        3px solid var(--primary);

    position:
        relative;

    z-index:
        1000;

}


.header-logo {

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    padding-right:
        20px;

    margin-right:
        20px;

    border-right:
        1px solid var(--border);

}


.header-logo img {

    max-height:
        55px;

    max-width:
        180px;

    object-fit:
        contain;

}


.header-title {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.header-title h1 {

    margin:
        0;

    padding:
        0;

    font-size:
        22px;

    font-weight:
        600;

    color:
        var(--primary);

    letter-spacing:
        0.1px;

}


.header-title span {

    margin-top:
        4px;

    font-size:
        14px;

    color:
        var(--text-secondary);

}


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

#map-container {

    position:
        relative;

    width:
        100%;

    height:
        calc(
            100vh
            - var(--header-height)
            - var(--footer-height)
        );

}


#map {

    width:
        100%;

    height:
        100%;

    background:
        #e7ecef;

}


/* ============================================================
   PANELES CARTOGRÁFICOS
   ============================================================ */

.map-panel {

    position:
        absolute;

    z-index:
        800;

    background:
        var(--panel-background);

    border:
        1px solid var(--border);

    border-radius:
        4px;

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(3px);

}


.panel-title {

    padding:
        9px 12px;

    font-size:
        13px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

    color:
        var(--primary);

    border-bottom:
        1px solid var(--border);

}


/* ============================================================
   PANEL DE CAPAS
   ============================================================ */

.layers-panel {

    top:
        11px;

    right:
        18px;

    min-width:
        220px;

}


.layer-option {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        12px;

    font-size:
        13px;

    cursor:
        pointer;

}


.layer-option input {

    cursor:
        pointer;

}
.layer-option + .layer-option {
    border-top: 1px solid #eeeeee;
}

/* ============================================================
   LEYENDA
   ============================================================ */

.legend-panel {

    right:
        18px;

    bottom:
        45px;

    min-width:
        180px;

}


.legend-content {

    padding:
        10px 12px;

}


.legend-content img {

    display:
        block;

    max-width:
        240px;

    height:
        auto;

}


/* ============================================================
   NORTE
   ============================================================ */

.north-arrow {

    position:
        absolute;

    z-index:
        800;

    top:
        20px;

    left:
        20px;

    width:
        46px;

    text-align:
        center;

    color:
        #202020;

    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.9);

    pointer-events:
        none;

}


.north-letter {

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        20px;

}


.north-symbol {

    margin-top:
        -1px;

    font-size:
        32px;

    line-height:
        30px;

}


/* ============================================================
   COORDENADAS
   ============================================================ */

.coordinates {

    position:
        absolute;

    z-index:
        800;

    left:
        50%;

    bottom:
        8px;

    transform:
        translateX(-50%);

    min-width:
        210px;

    padding:
        5px 10px;

    background:
        rgba(255, 255, 255, 0.90);

    border:
        1px solid var(--border);

    border-radius:
        3px;

    text-align:
        center;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    color:
        var(--text-primary);

    pointer-events:
        none;

}


/* ============================================================
   CONTROL DE GRILLA
   ============================================================ */

.grid-control {

    background:
        rgba(255, 255, 255, 0.95);

    border:
        1px solid var(--border);

    border-radius:
        4px;

    box-shadow:
        var(--shadow);

    padding:
        6px 9px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

}


.grid-control label {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    cursor:
        pointer;

}


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

.leaflet-control-scale-line {

    background:
        rgba(255, 255, 255, 0.85);

    border-color:
        #333333;

    color:
        #222222;

}


.leaflet-control-attribution {

    font-size:
        10px;

}


/* ============================================================
   PIE
   ============================================================ */

.app-footer {

    height:
        var(--footer-height);

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        0 14px;

    background:
        var(--primary-dark);

    color:
        rgba(255, 255, 255, 0.85);

    font-size:
        10px;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    :root {

        --header-height:
            68px;

    }


    .app-header {

        padding:
            6px 12px;

    }


    .header-logo {

        height:
            48px;

        padding-right:
            10px;

        margin-right:
            10px;

    }


    .header-logo img {

        max-height:
            45px;

        max-width:
            110px;

    }


    .header-title h1 {

        font-size:
            16px;

    }


    .header-title span {

        font-size:
            12px;

    }


    .layers-panel {

        top:
            12px;

        right:
            10px;

        min-width:
            180px;

    }


    .legend-panel {

        right:
            10px;

        bottom:
            40px;

    }


    .north-arrow {

        top:
            12px;

        left:
            12px;

    }


    .coordinates {

        display:
            none;

    }


    .app-footer span:last-child {

        display:
            none;

    }

}

/* ============================================================
   POSICIÓN DE LA ESCALA
   Se desplaza a la derecha del control de zoom sin modificar
   el contenedor interno de controles de Leaflet.
   ============================================================ */

.leaflet-bottom.leaflet-left .leaflet-control-scale {
    position: absolute;
    left: 48px;
    bottom: 11px;

    margin: 0 !important;

    white-space: nowrap;
}

el-title

/* ============================================================
   ATRIBUCIONES DEL VISOR.
   ============================================================ */
.leaflet-control-attribution {
    background: rgba(255,255,255,.90);
    font-size: 11px;
    color: #37474F;
    padding: 3px 8px;
}

.leaflet-control-attribution a {
    color: #1B5E20;
    text-decoration: none;
}

.leaflet-control-attribution a:hover {
    text-decoration: underline;
}
/*==================================================
  CONTROL MAPA BASE
==================================================*/

.leaflet-top.leaflet-right .leaflet-control-layers{

    margin-top: 92px;

    margin-right: 205px;

}



.leaflet-basemap-title{

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    color:#263238;

    border-bottom:
    1px solid var(--border);


}