/*
 * LM-WP-OBSERVACOES-CSS-V1
 */

.lm-obs-page{
    --lmobs-bg:#f5f7fa;
    --lmobs-card:#ffffff;
    --lmobs-card-2:#f8fafc;
    --lmobs-text:#172033;
    --lmobs-muted:#64748b;
    --lmobs-border:#dfe6ee;
    --lmobs-accent:#1769aa;
    --lmobs-shadow:0 8px 28px rgba(15,23,42,.08);

    color:var(--lmobs-text);
}

.lm-obs-page-header{
    margin-bottom:12px;
}

.lm-obs-intro{
    margin:8px 0 0;
    max-width:900px;
    color:var(--lmobs-muted);
    font-size:14px;
    line-height:1.55;
}

.lm-obs-app{
    width:100%;
}

.lm-obs-loading,
.lm-obs-error{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    border:1px solid var(--lmobs-border);
    border-radius:16px;
    background:var(--lmobs-card);
    color:var(--lmobs-muted);
}

.lm-obs-error{
    color:#9b1c1c;
}

.lm-obs-spinner{
    width:18px;
    height:18px;
    margin-right:10px;
    border:2px solid #d7e0e9;
    border-top-color:var(--lmobs-accent);
    border-radius:50%;
    animation:lmObsSpin .8s linear infinite;
}

@keyframes lmObsSpin{
    to{transform:rotate(360deg)}
}

.lm-obs-topline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.lm-obs-updated{
    font-size:12px;
    color:var(--lmobs-muted);
}

.lm-obs-updated.is-delay{
    color:#a15c00;
}

.lm-obs-updated.is-stale{
    color:#b42318;
    font-weight:700;
}

.lm-obs-region-switch{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.lm-obs-region{
    appearance:none;
    border:1px solid var(--lmobs-border);
    background:var(--lmobs-card);
    color:var(--lmobs-text);
    border-radius:999px;
    padding:8px 13px;
    font:inherit;
    font-size:13px;
    font-weight:650;
    cursor:pointer;
}

.lm-obs-region.is-active{
    color:#fff;
    background:var(--lmobs-accent);
    border-color:var(--lmobs-accent);
}

.lm-obs-toolbar{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);
    gap:10px;
    margin-bottom:12px;
}

.lm-obs-field{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.lm-obs-field > span{
    font-size:11px;
    font-weight:700;
    color:var(--lmobs-muted);
    text-transform:uppercase;
    letter-spacing:.04em;
}

.lm-obs-field select,
.lm-obs-field input{
    width:100%;
    min-height:42px;
    border:1px solid var(--lmobs-border);
    border-radius:10px;
    padding:0 11px;
    background:var(--lmobs-card);
    color:var(--lmobs-text);
    font:inherit;
    font-size:14px;
    box-sizing:border-box;
}

.lm-obs-main-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);
    gap:14px;
    align-items:stretch;
}

.lm-obs-map-card,
.lm-obs-station-card,
.lm-obs-chart-card,
.lm-obs-table-card{
    background:var(--lmobs-card);
    border:1px solid var(--lmobs-border);
    border-radius:16px;
    box-shadow:var(--lmobs-shadow);
}

.lm-obs-map-card{
    overflow:hidden;
    min-height:590px;
    position:relative;
}

#lm-obs-map{
    width:100%;
    height:590px;
    background:#dfe8ee;
}

.lm-obs-map-caption{
    position:absolute;
    z-index:500;
    left:10px;
    bottom:10px;
    max-width:calc(100% - 20px);
    padding:7px 10px;
    border-radius:9px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(148,163,184,.35);
    box-shadow:0 3px 12px rgba(15,23,42,.12);
    font-size:11px;
    color:#475569;
    pointer-events:none;
}

.lm-obs-station-card{
    padding:17px;
    min-height:590px;
    box-sizing:border-box;
}

.lm-obs-empty{
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--lmobs-muted);
    font-size:14px;
    line-height:1.6;
}

.lm-obs-station-head{
    padding-bottom:13px;
    border-bottom:1px solid var(--lmobs-border);
}

.lm-obs-station-region{
    margin-bottom:4px;
    font-size:11px;
    color:var(--lmobs-muted);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.lm-obs-station-name{
    margin:0;
    font-size:21px;
    line-height:1.2;
    color:var(--lmobs-text);
}

.lm-obs-station-time{
    margin-top:6px;
    font-size:12px;
    color:var(--lmobs-muted);
}

.lm-obs-station-time.is-stale{
    color:#b42318;
    font-weight:700;
}

.lm-obs-current-temp{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:18px 0 15px;
}

.lm-obs-current-temp strong{
    font-size:44px;
    line-height:.95;
    font-weight:750;
    letter-spacing:-.04em;
}

.lm-obs-current-temp span{
    padding-bottom:3px;
    color:var(--lmobs-muted);
    font-size:13px;
}

.lm-obs-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.lm-obs-metric{
    min-width:0;
    padding:11px;
    background:var(--lmobs-card-2);
    border:1px solid var(--lmobs-border);
    border-radius:11px;
}

.lm-obs-metric-label{
    display:block;
    margin-bottom:4px;
    color:var(--lmobs-muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.lm-obs-metric-value{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--lmobs-text);
    font-size:17px;
    font-weight:720;
}

.lm-obs-summary-title{
    margin:17px 0 8px;
    font-size:12px;
    color:var(--lmobs-muted);
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.lm-obs-chart-card{
    margin-top:14px;
    padding:15px;
}

.lm-obs-chart-top{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.lm-obs-chart-title{
    margin:0;
    font-size:17px;
    color:var(--lmobs-text);
}

.lm-obs-chart-field{
    min-width:210px;
}

#lm-obs-chart{
    width:100%;
    min-height:250px;
    overflow:hidden;
}

.lm-obs-chart-svg{
    display:block;
    width:100%;
    height:auto;
    color:var(--lmobs-accent);
}

.lm-obs-chart-grid{
    stroke:#dfe6ee;
    stroke-width:1;
}

.lm-obs-chart-line{
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lm-obs-chart-dot{
    fill:currentColor;
}

.lm-obs-chart-text{
    fill:var(--lmobs-muted);
    font-size:11px;
}

.lm-obs-chart-empty{
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lmobs-muted);
}

.lm-obs-table-card{
    margin-top:14px;
    overflow:hidden;
}

.lm-obs-table-head{
    padding:14px 15px;
    border-bottom:1px solid var(--lmobs-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.lm-obs-table-title{
    margin:0;
    font-size:16px;
}

.lm-obs-table-count{
    font-size:12px;
    color:var(--lmobs-muted);
}

.lm-obs-table-wrap{
    max-height:430px;
    overflow:auto;
}

.lm-obs-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.lm-obs-table th,
.lm-obs-table td{
    padding:10px 12px;
    border-bottom:1px solid var(--lmobs-border);
    text-align:left;
}

.lm-obs-table th{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--lmobs-card);
    color:var(--lmobs-muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.lm-obs-table tr{
    cursor:pointer;
}

.lm-obs-table tbody tr:hover{
    background:var(--lmobs-card-2);
}

.lm-obs-dot{
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:7px;
    border-radius:50%;
    vertical-align:middle;
}

.lm-obs-disclaimer{
    margin:14px 0 4px;
    padding:12px 14px;
    border:1px solid var(--lmobs-border);
    border-radius:12px;
    background:var(--lmobs-card-2);
    color:var(--lmobs-muted);
    font-size:11px;
    line-height:1.55;
}

.lm-obs-source-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:10px;
    padding:5px 8px;
    border-radius:999px;
    background:var(--lmobs-card-2);
    border:1px solid var(--lmobs-border);
    color:var(--lmobs-muted);
    font-size:10px;
    font-weight:650;
}

.lm-obs-page .leaflet-container{
    font-family:inherit;
}

.lm-obs-page .leaflet-popup-content-wrapper{
    border-radius:11px;
}

.lm-obs-popup-name{
    font-weight:750;
    margin-bottom:4px;
}

.lm-obs-popup-value{
    font-size:15px;
    font-weight:700;
}

@media (max-width:900px){

    .lm-obs-main-grid{
        grid-template-columns:1fr;
    }

    .lm-obs-map-card,
    .lm-obs-station-card{
        min-height:0;
    }

    #lm-obs-map{
        height:520px;
    }

    .lm-obs-empty{
        min-height:220px;
    }
}

@media (max-width:640px){

    .lm-obs-toolbar{
        grid-template-columns:1fr;
    }

    .lm-obs-chart-top{
        align-items:stretch;
        flex-direction:column;
    }

    .lm-obs-chart-field{
        min-width:0;
        width:100%;
    }

    #lm-obs-map{
        height:440px;
    }

    .lm-obs-station-card{
        padding:14px;
    }

    .lm-obs-current-temp strong{
        font-size:39px;
    }

    .lm-obs-table th,
    .lm-obs-table td{
        padding:9px 10px;
    }
}

html[data-theme="dark"] .lm-obs-page,
body[data-theme="dark"] .lm-obs-page,
body.dark .lm-obs-page{
    --lmobs-bg:#111827;
    --lmobs-card:#172033;
    --lmobs-card-2:#1d293d;
    --lmobs-text:#f1f5f9;
    --lmobs-muted:#a6b2c3;
    --lmobs-border:#334155;
    --lmobs-accent:#68b6f5;
    --lmobs-shadow:0 8px 28px rgba(0,0,0,.22);
}

/*
 * LM-OBS-HIDDEN-FIX-V1
 *
 * Garantir que o atributo HTML hidden prevalece
 * sobre display:flex/block definido nas classes do viewer.
 */
.lm-obs-app [hidden]{
    display:none !important;
}


/*
 * LM-OBS-VISUAL-REAL-V1
 *
 * Usa os seletores reais do viewer.
 */


/* ==========================================================
   CONTROLOS
   ========================================================== */

.lm-obs-region-switch{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}

.lm-obs-region{
    width:142px !important;
    height:50px !important;
    min-height:50px !important;
    padding:0 16px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    border-radius:16px !important;
    font-size:15px !important;
    line-height:1 !important;
}

#lm-obs-map-variable,
#lm-obs-chart-variable,
#lm-obs-search{
    height:50px !important;
    min-height:50px !important;
    box-sizing:border-box !important;
    padding:0 16px !important;
    border-radius:12px !important;
    font-size:16px !important;
    line-height:1.2 !important;
}


/* ==========================================================
   MAPA — retirar espaço vazio causado pelo stretch do grid
   ========================================================== */

.lm-obs-main-grid{
    align-items:start !important;
}

.lm-obs-map-card{
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
}

#lm-obs-map{
    height:470px !important;
    min-height:470px !important;
}

.lm-obs-map-caption{
    min-height:0 !important;
}


/* ==========================================================
   MARCADORES COM VALORES
   ========================================================== */

.lm-obs-value-marker{
    background:transparent !important;
    border:0 !important;
}

.lm-obs-value-pill{
    width:max-content;
    min-width:46px;
    height:28px;

    padding:0 7px;

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

    transform:translateX(
        calc((82px - 100%) / 2)
    );

    border-radius:9px;

    background:
        var(--lm-marker-color, #2878b8);

    border:
        1.5px solid
        rgba(255,255,255,.95);

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.28);

    color:#fff;

    font-size:11px;
    font-weight:750;
    line-height:1;
    letter-spacing:-.1px;

    white-space:nowrap;

    pointer-events:auto;
}


/* ==========================================================
   DARK MODE REAL DO SMARTMAG / LUSO METEO
   html.s-dark
   ========================================================== */

html.s-dark .lm-obs-page{
    color:#e8eef7 !important;
}

html.s-dark .lm-obs-intro,
html.s-dark .lm-obs-updated,
html.s-dark .lm-obs-field > span,
html.s-dark .lm-obs-map-caption,
html.s-dark .lm-obs-table-count,
html.s-dark .lm-obs-disclaimer{
    color:#9fb0c6 !important;
}

html.s-dark .lm-obs-region{
    background:#1b2c40 !important;
    border-color:#344960 !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-region.is-active{
    background:#2379b9 !important;
    border-color:#2379b9 !important;
    color:#fff !important;
}

html.s-dark #lm-obs-map-variable,
html.s-dark #lm-obs-chart-variable,
html.s-dark #lm-obs-search{
    background:#17283b !important;
    border-color:#344960 !important;
    color:#edf3fb !important;
}

html.s-dark #lm-obs-search::placeholder{
    color:#8396ac !important;
}

html.s-dark #lm-obs-map-variable option,
html.s-dark #lm-obs-chart-variable option{
    background:#17283b !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-map-card,
html.s-dark .lm-obs-station-card,
html.s-dark .lm-obs-chart-card,
html.s-dark .lm-obs-table-card{
    background:#16263a !important;
    border-color:#30465d !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-metric,
html.s-dark .lm-obs-empty{
    background:#1b2d43 !important;
    border-color:#334961 !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-metric-label{
    color:#93a6bd !important;
}

html.s-dark .lm-obs-metric-value{
    color:#f5f8fc !important;
}

html.s-dark .lm-obs-station-card h2,
html.s-dark .lm-obs-chart-title,
html.s-dark .lm-obs-table-title{
    color:#f5f8fc !important;
}

html.s-dark .lm-obs-table th{
    background:#1a2b40 !important;
    color:#aebdd0 !important;
    border-color:#30465d !important;
}

html.s-dark .lm-obs-table td{
    color:#e6edf7 !important;
    border-color:#2b4057 !important;
}

html.s-dark .lm-obs-table tbody tr:hover{
    background:#1d3149 !important;
}

html.s-dark #lm-obs-map{
    background:#172536 !important;
}

/* escurecer cartografia OSM sem destruir leitura */
html.s-dark #lm-obs-map .leaflet-tile{
    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.80);
}

html.s-dark #lm-obs-map .leaflet-control-zoom a{
    background:#17283b !important;
    color:#fff !important;
    border-color:#33485f !important;
}

html.s-dark #lm-obs-map .leaflet-control-attribution{
    background:rgba(18,34,50,.88) !important;
    color:#9db0c7 !important;
}

html.s-dark #lm-obs-map .leaflet-control-attribution a{
    color:#70b8ee !important;
}

html.s-dark .leaflet-tooltip{
    background:#17283b !important;
    color:#f3f7fc !important;
    border-color:#33485f !important;
    box-shadow:
        0 4px 14px
        rgba(0,0,0,.35) !important;
}

html.s-dark .leaflet-tooltip-top::before{
    border-top-color:#33485f !important;
}


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

@media (max-width:767px){

    .lm-obs-region-switch{
        display:grid !important;
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;
        width:100% !important;
    }

    .lm-obs-region{
        width:100% !important;
        height:46px !important;
        min-height:46px !important;
        padding:0 8px !important;
        font-size:13px !important;
    }

    #lm-obs-map-variable,
    #lm-obs-chart-variable,
    #lm-obs-search{
        height:48px !important;
        min-height:48px !important;
    }

    #lm-obs-map{
        height:430px !important;
        min-height:430px !important;
    }

    .lm-obs-value-pill{
        min-width:40px;
        height:25px;
        padding:0 5px;
        font-size:10px;
    }
}


/*
 * LM-OBS-VISUAL-REAL-SAFE-V1
 */


/* ----------------------------------------------------------
   BOTÕES DE REGIÃO — MESMO TAMANHO
   ---------------------------------------------------------- */

.lm-obs-region-switch{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}

.lm-obs-region{
    width:140px !important;
    min-width:140px !important;
    height:50px !important;
    min-height:50px !important;

    padding:0 14px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    border-radius:14px !important;

    line-height:1 !important;
}


/* ----------------------------------------------------------
   SELECT + PESQUISA — ALTURA IDÊNTICA
   ---------------------------------------------------------- */

#lm-obs-map-variable,
#lm-obs-chart-variable,
#lm-obs-search{
    height:50px !important;
    min-height:50px !important;

    padding-top:0 !important;
    padding-bottom:0 !important;

    box-sizing:border-box !important;

    border-radius:12px !important;
}


/* ----------------------------------------------------------
   MAPA — NÃO ESTICAR À ALTURA DO PAINEL LATERAL
   ---------------------------------------------------------- */

.lm-obs-main-grid{
    align-items:start !important;
}

.lm-obs-map-card{
    align-self:start !important;
    height:auto !important;
    min-height:0 !important;
}

#lm-obs-map{
    height:470px !important;
    min-height:470px !important;
}

.lm-obs-map-caption{
    min-height:0 !important;
}


/* ----------------------------------------------------------
   VALORES DIRETAMENTE NO MAPA
   ---------------------------------------------------------- */

.lm-obs-value-marker{
    background:transparent !important;
    border:0 !important;
}

.lm-obs-value-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:44px;
    height:27px;

    padding:0 6px;

    border:
        1.5px solid
        rgba(255,255,255,.96);

    border-radius:8px;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.28);

    color:#fff;

    font-size:11px;
    font-weight:750;
    line-height:1;

    white-space:nowrap;
}


/* ----------------------------------------------------------
   DARK MODE REAL DO SITE
   O site usa html.s-dark
   ---------------------------------------------------------- */

html.s-dark .lm-obs-page{
    color:#e8eef7 !important;
}

html.s-dark .lm-obs-intro,
html.s-dark .lm-obs-updated,
html.s-dark .lm-obs-field > span,
html.s-dark .lm-obs-map-caption,
html.s-dark .lm-obs-table-count,
html.s-dark .lm-obs-disclaimer{
    color:#93a7bf !important;
}

html.s-dark .lm-obs-region{
    background:#192a3e !important;
    border-color:#344b63 !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-region.is-active{
    background:#247bb9 !important;
    border-color:#247bb9 !important;
    color:#fff !important;
}

html.s-dark #lm-obs-map-variable,
html.s-dark #lm-obs-chart-variable,
html.s-dark #lm-obs-search{
    background:#17283b !important;
    border-color:#344b63 !important;
    color:#edf3fb !important;
}

html.s-dark #lm-obs-search::placeholder{
    color:#8396ad !important;
}

html.s-dark #lm-obs-map-variable option,
html.s-dark #lm-obs-chart-variable option{
    background:#17283b !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-map-card,
html.s-dark .lm-obs-station-card,
html.s-dark .lm-obs-chart-card,
html.s-dark .lm-obs-table-card{
    background:#16263a !important;
    border-color:#30465e !important;
    color:#edf3fb !important;
}

html.s-dark .lm-obs-metric{
    background:#1c2e44 !important;
    border-color:#354b63 !important;
}

html.s-dark .lm-obs-metric-label{
    color:#91a5bd !important;
}

html.s-dark .lm-obs-metric-value,
html.s-dark .lm-obs-station-card h2,
html.s-dark .lm-obs-chart-title,
html.s-dark .lm-obs-table-title{
    color:#f5f8fc !important;
}

html.s-dark .lm-obs-table th{
    background:#1a2c41 !important;
    color:#aebed1 !important;
    border-color:#30465e !important;
}

html.s-dark .lm-obs-table td{
    color:#e5edf7 !important;
    border-color:#2b4057 !important;
}

html.s-dark .lm-obs-table tbody tr:hover{
    background:#1d3149 !important;
}

html.s-dark #lm-obs-map{
    background:#172536 !important;
}

/* OSM não tem tiles dark nativos:
   escurecimento visual moderado */
html.s-dark #lm-obs-map .leaflet-tile{
    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.82);
}

html.s-dark #lm-obs-map .leaflet-control-zoom a{
    background:#17283b !important;
    color:#fff !important;
    border-color:#344b63 !important;
}

html.s-dark #lm-obs-map .leaflet-control-attribution{
    background:
        rgba(17,33,49,.90)
        !important;

    color:#9fb2c8 !important;
}

html.s-dark #lm-obs-map .leaflet-control-attribution a{
    color:#72b9ed !important;
}

html.s-dark .leaflet-tooltip{
    background:#17283b !important;
    border-color:#344b63 !important;
    color:#f4f7fc !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:767px){

    .lm-obs-region-switch{
        display:grid !important;
        grid-template-columns:
            repeat(3,minmax(0,1fr))
            !important;
        width:100% !important;
    }

    .lm-obs-region{
        width:100% !important;
        min-width:0 !important;
        height:46px !important;
        min-height:46px !important;
        padding:0 5px !important;
        font-size:13px !important;
    }

    #lm-obs-map-variable,
    #lm-obs-chart-variable,
    #lm-obs-search{
        height:48px !important;
        min-height:48px !important;
    }

    #lm-obs-map{
        height:430px !important;
        min-height:430px !important;
    }

    .lm-obs-value-pill{
        min-width:38px;
        height:24px;
        padding:0 4px;
        font-size:10px;
    }
}

/*
 * LM-OBS-MAP-HEIGHT-V2
 *
 * O mapa deve ocupar de forma útil a área disponível
 * do ecrã, em vez de ficar limitado aos antigos 470px.
 */

#lm-obs-map{
    height: calc(100vh - 250px) !important;
    min-height: 620px !important;
    max-height: 900px !important;
}

.lm-obs-map-card{
    height:auto !important;
    min-height:0 !important;
}

/*
 * Em ecrãs mais baixos não deixar o mapa exagerado.
 */
@media (max-height: 800px) and (min-width: 768px){

    #lm-obs-map{
        height: calc(100vh - 210px) !important;
        min-height: 520px !important;
    }
}


/*
 * Tablet.
 */
@media (max-width: 1200px){

    #lm-obs-map{
        height: 68vh !important;
        min-height: 560px !important;
        max-height: 820px !important;
    }
}


/*
 * Mobile.
 */
@media (max-width: 767px){

    #lm-obs-map{
        height: 62vh !important;
        min-height: 460px !important;
        max-height: 650px !important;
    }
}


/*
 * LM-OBS-INTERACTIVE-V1
 */


/* ==========================================================
   LEGENDA DO MAPA
   ========================================================== */

.lm-obs-map-legend-real{
    position:absolute;

    left:12px;
    bottom:12px;

    z-index:500;

    max-width:
        min(720px, calc(100% - 24px));

    padding:
        9px 11px;

    border:
        1px solid
        rgba(80,100,120,.24);

    border-radius:12px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.12);

    color:#34445a;

    font-size:11px;

    pointer-events:none;
}


.lm-obs-map-legend-name{
    margin-bottom:6px;

    font-weight:750;
}


.lm-obs-map-legend-items{
    display:flex;

    flex-wrap:wrap;

    gap:
        5px 10px;
}


.lm-obs-map-legend-item{
    display:inline-flex;

    align-items:center;

    gap:4px;

    white-space:nowrap;
}


.lm-obs-map-legend-item i{
    width:9px;
    height:9px;

    flex:0 0 9px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 1px
        rgba(0,0,0,.10);
}


/* ==========================================================
   LABELS QUE APARECEM COM ZOOM
   ========================================================== */

.lm-obs-zoom-value-marker{
    background:transparent !important;

    border:0 !important;
}


.lm-obs-zoom-value{
    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;
    height:100%;

    box-sizing:border-box;

    padding:
        0 5px;

    border:
        1.5px solid
        rgba(255,255,255,.96);

    border-radius:7px;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.27);

    color:#fff;

    font-size:10px;

    font-weight:750;

    line-height:1;

    white-space:nowrap;
}


/* ==========================================================
   CAPTION — retirar branco no dark mode
   ========================================================== */

html.s-dark .lm-obs-map-caption{
    background:#17283b !important;

    border-color:#344b63 !important;

    color:#a7b8cc !important;

    box-shadow:none !important;
}


/* ==========================================================
   GRÁFICO
   ========================================================== */

.lm-obs-chart-card{
    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    box-sizing:border-box !important;
}


#lm-obs-chart{
    position:relative;

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;
}


.lm-obs-chart-svg{
    display:block !important;

    width:100% !important;

    max-width:none !important;

    height:auto !important;

    overflow:visible;
}


.lm-obs-chart-hit{
    fill:transparent;

    stroke:transparent;

    cursor:pointer;

    pointer-events:all;
}


.lm-obs-chart-dot{
    pointer-events:none;

    transition:
        r .12s ease,
        stroke-width .12s ease;
}


.lm-obs-chart-dot.is-active{
    r:5.2px;

    stroke:#ffffff;

    stroke-width:2px;
}


.lm-obs-chart-readout{
    position:absolute;

    top:7px;
    right:8px;

    z-index:4;

    padding:
        6px 9px;

    border:
        1px solid
        #d7e0ea;

    border-radius:9px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.10);

    color:#33465e;

    font-size:12px;

    font-weight:700;

    line-height:1.25;

    pointer-events:none;
}


html.s-dark
.lm-obs-chart-readout{
    background:
        rgba(23,40,59,.96);

    border-color:#344b63;

    color:#edf4fc;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.25);
}


html.s-dark
.lm-obs-chart-empty,
html.s-dark
.lm-obs-empty{
    background:#17283b !important;

    border-color:#344b63 !important;

    color:#a7b8cc !important;
}


/* cartão da estação não ficar escondido atrás do header */
.lm-obs-station-card{
    scroll-margin-top:90px;
}


/* ==========================================================
   DARK MODE — LEGENDA
   ========================================================== */

html.s-dark
.lm-obs-map-legend-real{
    background:
        rgba(23,40,59,.94);

    border-color:#344b63;

    color:#d9e4f0;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.26);
}


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

@media (max-width:767px){

    .lm-obs-chart-card{
        width:100% !important;

        max-width:none !important;

        padding-left:12px !important;
        padding-right:12px !important;
    }


    #lm-obs-chart{
        width:100% !important;

        min-height:320px !important;
    }


    .lm-obs-chart-svg{
        width:100% !important;

        height:320px !important;

        min-height:320px !important;

        max-height:none !important;
    }


    .lm-obs-chart-readout{
        top:5px;
        right:5px;

        max-width:
            calc(100% - 10px);

        font-size:11px;
    }


    .lm-obs-map-legend-real{
        left:8px;
        bottom:8px;

        max-width:
            calc(100% - 16px);

        padding:
            7px 8px;

        font-size:9.5px;
    }


    .lm-obs-map-legend-name{
        margin-bottom:4px;
    }


    .lm-obs-map-legend-items{
        gap:
            4px 7px;
    }


    .lm-obs-zoom-value{
        font-size:9px;
    }
}

/*
 * LM-OBS-MAP-FILL-V3
 *
 * O mapa deve acompanhar a altura real da coluna
 * da estação e o caption fica fora da cartografia.
 */

/* grid: ambas as colunas com a mesma altura */
.lm-obs-main-grid{
    align-items:stretch !important;
}

/* coluna do mapa */
.lm-obs-map-card{
    align-self:stretch !important;

    display:flex !important;
    flex-direction:column !important;

    height:100% !important;
    min-height:0 !important;
}

/* mapa ocupa todo o espaço restante */
#lm-obs-map{
    flex:1 1 auto !important;

    width:100% !important;

    height:auto !important;
    min-height:620px !important;
    max-height:none !important;
}

/*
 * Caption deixa de estar sobre o mapa.
 * Fica numa linha própria por baixo.
 */
.lm-obs-map-caption{
    position:static !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:auto !important;
    max-width:none !important;

    margin:10px 12px 12px !important;
    padding:9px 11px !important;

    box-sizing:border-box !important;
}


/*
 * Legenda fica no canto superior direito.
 * Assim nunca colide com o caption.
 */
.lm-obs-map-legend-real{
    left:auto !important;
    right:12px !important;

    top:12px !important;
    bottom:auto !important;

    max-width:
        min(
            560px,
            calc(100% - 90px)
        ) !important;
}


/* dark caption */
html.s-dark .lm-obs-map-caption{
    background:#17283b !important;
    border:1px solid #344b63 !important;
    color:#a7b8cc !important;
}


/* mobile */
@media (max-width:767px){

    #lm-obs-map{
        height:auto !important;

        min-height:500px !important;

        max-height:none !important;
    }

    .lm-obs-map-legend-real{
        top:8px !important;
        right:8px !important;

        max-width:
            calc(100% - 65px)
            !important;
    }

    .lm-obs-map-caption{
        margin:
            8px
            8px
            10px
            !important;

        font-size:11px !important;
    }
}

/*
 * LM-OBS-MAP-CAPTION-WHITE-V1
 */
html.s-dark .lm-obs-map-caption{
    color:#ffffff !important;
}

/*
 * LM-OBS-CHART-DARK-V2
 * Grelha discreta no dark mode.
 * Light mode permanece inalterado.
 */

html.s-dark .lm-obs-chart-grid{
    stroke:#506176 !important;
    stroke-width:1 !important;
    opacity:.42 !important;
}

html.s-dark .lm-obs-chart-text{
    fill:#8fa2b9 !important;
}

html.s-dark .lm-obs-chart-line{
    stroke:#2e86c9 !important;
    stroke-width:2.6 !important;
}

html.s-dark .lm-obs-chart-dot{
    fill:#2e86c9 !important;
    stroke:#2e86c9 !important;
}

html.s-dark .lm-obs-chart-dot.is-active{
    fill:#4aa3e3 !important;
    stroke:#ffffff !important;
    stroke-width:2 !important;
}


/*
 * LM-OBS-DISCLAIMER-DARK-V1
 * Nota final / fonte IPMA em dark mode.
 */

html.s-dark .lm-obs-disclaimer{
    background:#16263a !important;
    border:1px solid #30465e !important;
    color:#a7b8cc !important;
    box-shadow:none !important;
}

html.s-dark .lm-obs-disclaimer a{
    color:#72b9ed !important;
}

/*
 * ============================================================
 * LM-OBS-FOOTER-COMPACT-V1
 *
 * Remove o espaço vazio criado pelo SmartMag entre
 * Observações Meteorológicas e o footer.
 * ============================================================
 */


/* página termina logo após o conteúdo */
body.page-template-lm-observacoes
.lm-obs-page,
body.page-template-page-templateslm-observacoes-php
.lm-obs-page{
    min-height:0 !important;
    margin-bottom:0 !important;
    padding-bottom:14px !important;
}


/* aplicação sem reserva inferior adicional */
body.page-template-lm-observacoes
#lm-obs-app,
body.page-template-page-templateslm-observacoes-php
#lm-obs-app{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}


/*
 * SmartMag imprime upper-footer mesmo vazio.
 * Colapsar totalmente nesta página.
 */
body.page-template-lm-observacoes
.main-footer
.upper-footer,
body.page-template-page-templateslm-observacoes-php
.main-footer
.upper-footer{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}


/* segurança para o wrap interno */
body.page-template-lm-observacoes
.main-footer
.upper-footer > .wrap,
body.page-template-page-templateslm-observacoes-php
.main-footer
.upper-footer > .wrap{
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}


/* footer começa imediatamente após a página */
body.page-template-lm-observacoes
.main-footer,
body.page-template-page-templateslm-observacoes-php
.main-footer{
    margin-top:0 !important;
    padding-top:0 !important;
    min-height:0 !important;
}


/* acabamento igual aos restantes viewers */
body.page-template-lm-observacoes
.main-footer
.lower-footer,
body.page-template-page-templateslm-observacoes-php
.main-footer
.lower-footer{
    margin:0 !important;
    padding:18px 0 !important;
    min-height:0 !important;
}


/* wrappers residuais do SmartMag */
body.page-template-lm-observacoes
.post-bottom-share,
body.page-template-page-templateslm-observacoes-php
.post-bottom-share,
body.page-template-lm-observacoes
.below-post,
body.page-template-page-templateslm-observacoes-php
.below-post,
body.page-template-lm-observacoes
.main-content,
body.page-template-page-templateslm-observacoes-php
.main-content,
body.page-template-lm-observacoes
.the-content,
body.page-template-page-templateslm-observacoes-php
.the-content{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/*
 * LM-OBS-LOADING-DARK-V1
 */

html.s-dark .lm-obs-loading,
html.site-s-dark .lm-obs-loading,
body.s-dark .lm-obs-loading,
body.site-s-dark .lm-obs-loading{
    background:#17283b !important;
    border-color:#30465e !important;
    color:#dce7f3 !important;
}

html.s-dark .lm-obs-loading .lm-obs-spinner,
html.site-s-dark .lm-obs-loading .lm-obs-spinner,
body.s-dark .lm-obs-loading .lm-obs-spinner,
body.site-s-dark .lm-obs-loading .lm-obs-spinner{
    border-color:#40566f !important;
    border-top-color:#4aa3e3 !important;
}


/*
 * ============================================================
 * LM-OBS-VALUES-INSIDE-POINTS-V1
 * ============================================================
 */

.lm-obs-point-value-marker{
    background:transparent !important;
    border:0 !important;
    pointer-events:none !important;
}

.lm-obs-point-value{
    width:100%;
    height:100%;

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

    color:#fff;

    font-size:7px;
    font-weight:800;
    line-height:1;

    letter-spacing:-.4px;

    text-align:center;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.72);

    pointer-events:none !important;
    user-select:none;
}

@media (max-width:767px){

    .lm-obs-point-value{
        font-size:6.5px;
    }
}



/*
 * LM-OBS-ZOOM-SCALED-POINTS-V1
 *
 * O tamanho da fonte passa a ser definido por zoom inline.
 */
.lm-obs-point-value{
    transition:
        font-size .16s ease;
}



/*
 * ============================================================
 * LM-OBS-PERIOD-LAYOUT-V6
 * ============================================================
 */


/*
 * Desktop:
 * Período | Variável | Procurar estação
 */
.lm-obs-toolbar{
    grid-template-columns:
        minmax(150px,.72fr)
        minmax(210px,1fr)
        minmax(260px,1.35fr)
        !important;
}


/*
 * O mapa mantém a dimensão original.
 * Apenas deixa de acompanhar a altura variável
 * do cartão lateral.
 */
.lm-obs-main-grid{
    align-items:start !important;
}

.lm-obs-map-card{
    align-self:start !important;
}


/*
 * Nota dos valores provisórios:
 * texto preto inclusive em dark mode.
 */
.lm-obs-provisional-note,
html.s-dark .lm-obs-provisional-note{
    color:#111827 !important;
}


/*
 * Tablet/mobile continuam empilhados
 * como antes.
 */
@media (max-width:900px){

    .lm-obs-toolbar{
        grid-template-columns:
            1fr 1fr !important;
    }

    .lm-obs-field:last-child{
        grid-column:
            1 / -1 !important;
    }
}

@media (max-width:640px){

    .lm-obs-toolbar{
        grid-template-columns:
            1fr !important;
    }

    .lm-obs-field:last-child{
        grid-column:auto !important;
    }
}



/*
 * ============================================================
 * LM-OBS-MAP-HEIGHT-FLOOR-V7B
 * ============================================================
 */


/*
 * Recuperar comportamento estrutural anterior à V6.
 */
.lm-obs-main-grid{
    align-items:stretch !important;
}

.lm-obs-map-card{
    align-self:stretch !important;
}


/*
 * Período = mesmo aspeto do seletor Variável.
 */
#lm-obs-map-period{
    width:100% !important;

    height:50px !important;
    min-height:50px !important;

    padding:0 16px !important;

    box-sizing:border-box !important;

    border:
        1px solid
        var(--lmobs-border)
        !important;

    border-radius:12px !important;

    background:
        var(--lmobs-card)
        !important;

    color:
        var(--lmobs-text)
        !important;

    font:inherit !important;
    font-size:16px !important;
    line-height:1.2 !important;
}


/*
 * Dark mode.
 */
html.s-dark #lm-obs-map-period{
    background:#17283b !important;
    border-color:#344b63 !important;
    color:#edf3fb !important;
}

html.s-dark #lm-obs-map-period option{
    background:#17283b !important;
    color:#edf3fb !important;
}


/*
 * Mobile — mesma altura dos restantes controlos.
 */
@media (max-width:767px){

    #lm-obs-map-period{
        height:48px !important;
        min-height:48px !important;
    }
}



/*
 * ============================================================
 * LM-OBS-MAP-FLOOR-V8
 * ============================================================
 */


/*
 * Badges dentro do cartão da estação.
 *
 * Inclui:
 * - Fonte: IPMA Open Data
 * - nota de temperaturas provisórias
 */
html.s-dark .lm-obs-source-badge,
html.s-dark .lm-obs-provisional-note{

    background:
        #1c2e44
        !important;

    border:
        1px solid
        #354b63
        !important;

    color:
        #dbe7f4
        !important;

    box-shadow:
        none
        !important;
}


/*
 * A regra anterior da nota provisória tinha
 * texto escuro; no dark fica agora coerente.
 */
html.s-dark .lm-obs-source-badge *,
html.s-dark .lm-obs-provisional-note *{

    color:
        #dbe7f4
        !important;
}



/*
 * ============================================================
 * LM-OBS-DESKTOP-HEIGHT-FINAL-V1
 * ============================================================
 *
 * Desktop:
 * mapa e coluna lateral pertencem à mesma linha.
 * O mapa mantém pelo menos a maior altura capturada em "Agora".
 *
 * Mobile não é alterado.
 */

@media (min-width: 768px){

    .lm-obs-main-grid{
        align-items:
            stretch
            !important;
    }

    .lm-obs-map-card{
        align-self:
            stretch
            !important;

        display:
            flex
            !important;

        flex-direction:
            column
            !important;

        height:
            100%
            !important;
    }

    #lm-obs-map{
        flex:
            1 1 auto
            !important;

        width:
            100%
            !important;

        height:
            auto
            !important;

        max-height:
            none
            !important;
    }
}



/*
 * ============================================================
 * LM-OBS-MOBILE-LEGEND-BELOW-CSS-V1
 * ============================================================
 */

@media (max-width:767px){

    /*
     * O texto:
     *
     * "Temperatura · cores segundo a legenda ·
     * valores arredondados nos pontos"
     *
     * deixa de ser necessário.
     */
    .lm-obs-map-caption{
        display:none !important;
    }


    /*
     * A legenda deixa de estar sobre o mapa.
     * O JS coloca-a imediatamente abaixo da cartografia.
     */
    .lm-obs-map-legend-real{
        position:static !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        width:
            calc(100% - 16px)
            !important;

        max-width:none !important;

        margin:
            8px
            8px
            10px
            !important;

        box-sizing:
            border-box !important;

        z-index:auto !important;
    }

}


/* LM-OBS-FUNDO-HOMEPAGE-V1 */
html:is(.s-dark,.site-s-dark,[data-theme="dark"]) .lm-obs-page,
body:is(.dark,[data-theme="dark"]) .lm-obs-page{
    --lmobs-bg:#0E1A2F;
    background-color:#0E1A2F !important;
}


/* LM-OBS-CABECALHO-SEM-MOLDURA-V1 */
.lm-obs-page > .lm-mapas-wp-header.lm-obs-page-header{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* LM-OBS-LEAFLET-BRIGHT-TILES-V1 */
/* Mais luminosidade e disfarce das juntas entre tiles. */
.lm-obs-page #lm-obs-map .leaflet-tile-pane .leaflet-tile{
    filter:brightness(1.03) saturate(1.03) contrast(1.01) !important;
    outline:1px solid transparent !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}