/* =========================================================
   MAPA DA REDE — PÁGINA ESPECIAL
   ========================================================= */

.mapa-rede-pagina {
    --mapa-azul: #292f66;
    --mapa-azul-hover: #1f2556;
    --mapa-amarelo: #f9be09;
    --mapa-texto: #202020;
}

/* Remove a estrutura antiga do conteúdo e permite hero em largura total. */

body:has(.mapa-rede-pagina) .page-title {
    display: none !important;
}

body:has(.mapa-rede-pagina) #corpo_pagina {
    width: 100%;
    margin: 0;
    padding: 0;
}

body:has(.mapa-rede-pagina) #corpo_pagina > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.mapa-rede-pagina) #corpo_pagina > .container > .row {
    margin: 0 !important;
}

body:has(.mapa-rede-pagina)
#corpo_pagina > .container > .row > [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}

/* =========================================================
   HERO
   ========================================================= */

.mapa-rede-pagina .mapa-rede-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 20, 33, 0.52) 0%,
            rgba(0, 20, 33, 0.20) 48%,
            rgba(0, 20, 33, 0.02) 78%
        ),
        url("/scgas/assets/images/mapa-da-rede-hero.jpg") !important;

    background-position: center;
    background-size: cover;
}

/* =========================================================
   INTRODUÇÃO
   ========================================================= */

.mapa-rede-conteudo {
    padding: 54px 0 72px;
    background-color: #ffffff;
}

.mapa-rede-introducao {
    max-width: 980px;
}

.pagina-dinamica.mapa-rede-pagina .mapa-rede-titulo-secao {
    margin-bottom: 20px;
    color: var(--mapa-texto);
}

.pagina-dinamica.mapa-rede-pagina .mapa-rede-introducao p {
    margin: 0 0 18px;
    color: var(--mapa-texto);
    font-family: "Sora", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
}

/* =========================================================
   AÇÕES
   ========================================================= */

.mapa-rede-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin: 10px 0 22px;
}

.mapa-rede-link-municipios {
    color: #008bd0;
    font-family: "Sora", Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mapa-rede-link-municipios:hover,
.mapa-rede-link-municipios:focus {
    color: #006da5;
}

.botao-imprimir-mapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 11px 22px;

    border: 0;
    border-radius: 5px;

    color: #ffffff;
    background-color: var(--mapa-azul);

    font-family: "Sora", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(24, 30, 75, 0.20);

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.botao-imprimir-mapa:hover,
.botao-imprimir-mapa:focus {
    color: #ffffff;
    background-color: var(--mapa-azul-hover);
    box-shadow: 0 7px 15px rgba(24, 30, 75, 0.26);
    transform: translateY(-2px);
}

.botao-imprimir-mapa:focus-visible,
.mapa-rede-link-municipios:focus-visible {
    outline: 3px solid var(--mapa-amarelo);
    outline-offset: 3px;
}

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

.mapa-rede-mapa-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    background-color: #eef2f4;
    border: 1px solid #e1e4e8;
    border-radius: 18px;

    box-shadow: 0 7px 22px rgba(18, 31, 57, 0.16);
}

#map {
    position: relative;

    width: 100%;
    height: clamp(560px, 58vw, 720px);

    margin: 0;
    padding: 0;
}

#map:fullscreen,
#map:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
}

/* Controles do OpenLayers/QGIS */

.mapa-rede-pagina .ol-control {
    padding: 2px !important;
    background-color: rgba(255, 255, 255, 0.40) !important;
}

.mapa-rede-pagina .ol-control > * {
    color: #444444 !important;
    background-color: #f8f8f8 !important;
    border-radius: 2px;
}

.mapa-rede-pagina .ol-control > *:focus,
.mapa-rede-pagina .ol-control > *:hover {
    background-color: rgba(248, 248, 248, 0.78) !important;
}

.mapa-rede-pagina .ol-attribution a,
.mapa-rede-pagina .gcd-gl-input::placeholder,
.mapa-rede-pagina .search-layer-input-search::placeholder {
    color: #444444 !important;
}

.mapa-rede-pagina .search-layer-input-search {
    background-color: #f8f8f8 !important;
}

/* =========================================================
   AVISO FIXO SOBRE O MAPA
   ========================================================= */

.mapa-rede-aviso {
    position: absolute;
    bottom: 22px;
    left: 22px;
    z-index: 10;

    width: min(430px, calc(100% - 44px));
    padding: 24px 26px;

    overflow: hidden;

    color: #111111;
    background-color: #fff92f;
    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.34);
}

.mapa-rede-aviso h3 {
    margin: 0 0 10px;
    padding: 0;

    color: #111111;

    font-family: "Sora", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.mapa-rede-aviso p {
    margin: 0;
    padding: 0;

    color: #111111;

    font-family: "Sora", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.55;
}

/* =========================================================
   ACESSIBILIDADE — AUMENTO DE FONTE
   ========================================================= */

html.fonte-ampliada .mapa-rede-introducao,
html.fonte-ampliada .mapa-rede-aviso,
html.fonte-muito-ampliada .mapa-rede-introducao,
html.fonte-muito-ampliada .mapa-rede-aviso {
    overflow-wrap: anywhere;
}

html.fonte-muito-ampliada .mapa-rede-acoes {
    align-items: stretch;
    flex-direction: column;
}

html.fonte-muito-ampliada .botao-imprimir-mapa {
    align-self: flex-start;
}

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

@media (max-width: 1060px) {
    .mapa-rede-conteudo {
        padding: 44px 0 56px;
    }

    #map {
        height: 600px;
    }

    .mapa-rede-aviso {
        width: min(390px, calc(100% - 36px));
        bottom: 18px;
        left: 18px;
        padding: 21px 22px;
    }
}

/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 639px) {
    .mapa-rede-pagina .mapa-rede-hero {
        background-position: 58% center;
    }

    .mapa-rede-conteudo {
        padding: 32px 0 42px;
    }

    .mapa-rede-acoes {
        align-items: stretch;
        flex-direction: column;

        margin-bottom: 16px;
    }

    .botao-imprimir-mapa {
        width: 100%;
    }

    .mapa-rede-mapa-card {
        border-radius: 12px;
    }

    #map {
        height: 520px;
    }

    .mapa-rede-aviso {
        right: 12px;
        bottom: 12px;
        left: 12px;

        width: auto;
        padding: 17px 18px;

        border-radius: 9px;
    }

    .mapa-rede-aviso h3 {
        margin-bottom: 7px;
        font-size: 1rem;
    }

    .mapa-rede-aviso p {
        font-size: 0.75rem;
        line-height: 1.45;
    }
}

/* =========================================================
   CORREÇÃO DA ALTURA DO MAPA
   Deve permanecer no final do arquivo para vencer o qgis2web.css
   ========================================================= */

.mapa-rede-pagina .mapa-rede-mapa-card {
    display: block !important;

    width: 100% !important;
    height: 650px !important;
    min-height: 650px !important;

    position: relative !important;
    overflow: hidden !important;
}

.mapa-rede-pagina .mapa-rede-mapa-card #map {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 650px !important;

    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1060px) {
    .mapa-rede-pagina .mapa-rede-mapa-card {
        height: 600px !important;
        min-height: 600px !important;
    }

    .mapa-rede-pagina .mapa-rede-mapa-card #map {
        min-height: 600px !important;
    }
}

@media (max-width: 639px) {
    .mapa-rede-pagina .mapa-rede-mapa-card {
        height: 520px !important;
        min-height: 520px !important;
    }

    .mapa-rede-pagina .mapa-rede-mapa-card #map {
        min-height: 520px !important;
    }
}

/* =========================================================
   IMPRESSÃO
   ========================================================= */

@page {
    size: A4 landscape;
    margin: 8mm;
}

html.mapa-preparando-impressao .mapa-rede-mapa-card,
html.mapa-preparando-impressao .mapa-rede-mapa-card #map {
    height: 160mm !important;
    min-height: 160mm !important;
}

@media print {

    html,
    body {
        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;
    }

    /* Elementos que não participam da impressão */

    header,
    #cabecalho,
    #barra-primaria,
    #barra-secundaria,
    footer,
    #rodape,
    .page-title,
    .mapa-rede-hero,
    .mapa-rede-acoes,
    .scrollToTop,
    div[vw],
    [vw-access-button],
    [vw-plugin-wrapper] {
        display: none !important;
    }

    /* Remove limitações da estrutura legada */

    #corpo_pagina,
    #corpo_pagina > .container,
    #corpo_pagina > .container > .row,
    #corpo_pagina > .container > .row > [class*="col-"],
    .mapa-rede-pagina,
    .mapa-rede-conteudo,
    .mapa-rede-conteudo > .pagina-container {
        position: static !important;
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        overflow: visible !important;

        background: #ffffff !important;
    }

    /* Texto introdutório */

    .mapa-rede-print-texto {
        position: static !important;
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 0 5mm !important;
        padding: 0 !important;

        page-break-after: avoid !important;
        break-after: avoid-page !important;
    }

    /* Não imprime o título "Área de atuação" */

    .mapa-rede-print-texto h2 {
        display: none !important;
    }

    .mapa-rede-print-texto p {
        display: block !important;

        margin: 0 0 2.5mm !important;
        padding: 0 !important;

        color: #000000 !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 10pt !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
    }

    /* Card do mapa */

    .mapa-rede-print-mapa {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: 160mm !important;
        min-height: 160mm !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        page-break-before: avoid !important;
        page-break-inside: avoid !important;
        break-before: avoid-page !important;
        break-inside: avoid-page !important;
    }

    /* Mapa do OpenLayers */

    .mapa-rede-print-mapa #map {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: 160mm !important;
        min-height: 160mm !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    /*
     * Garante que os canvas e camadas do OpenLayers
     * continuem visíveis na impressão.
     */

    .mapa-rede-print-mapa,
    .mapa-rede-print-mapa *,
    .mapa-rede-print-mapa canvas,
    .mapa-rede-print-mapa .ol-viewport,
    .mapa-rede-print-mapa .ol-layer {
        visibility: visible !important;
    }

    .mapa-rede-print-mapa canvas {
        max-width: none !important;
    }

    /* Aviso amarelo sobre o mapa */

    .mapa-rede-print-mapa #modal {
        position: absolute !important;
        display: block !important;

        right: auto !important;
        bottom: 4mm !important;
        left: 4mm !important;

        width: 40% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 5mm !important;

        color: #111111 !important;
        background: #fff92f !important;

        border-radius: 3mm !important;
        box-shadow: 0 2mm 4mm rgba(0, 0, 0, 0.28) !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .mapa-rede-print-mapa #modalContent {
        display: block !important;
    }

    .mapa-rede-print-mapa #modal h3 {
        margin: 0 0 2mm !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 12pt !important;
        line-height: 1.2 !important;
    }

    .mapa-rede-print-mapa #modal p {
        margin: 0 !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 9pt !important;
        line-height: 1.3 !important;
    }
}