/* =========================================================
   MAPA DE SETORES CENSITÁRIOS
   Censo IBGE 2022

   Padrão visual baseado no projeto:
   "Painel de Inteligência da Presença Evangélica"

   ========================================================= */


/* =========================================================
   BASE
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
}

body {
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #000;
    background-color: #fff;
}

* {
    box-sizing: border-box;
}


/* =========================================================
   TÍTULO / CABEÇALHO
========================================================= */

/* Texto do lado do globo */

h2,
.h2 {
    font-size: 30px;
    color: #770000;
}


/* =========================================================
   ENQUADRAMENTO DA PÁGINA
========================================================= */

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1170px;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.page-header {
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0 0 5px;
    font-size: 26px;
}

.page-header p {
    margin: 0;
    color: #666;
}


/* =========================================================
   SELEÇÃO DO MUNICÍPIO
========================================================= */

.municipio-section {
    margin-bottom: 20px;
}

.municipio-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#municipio {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}


/* =========================================================
DROPDOWN DO FILTRO DE MUNICÍPIO
========================================================= */

/*
 * Garante que a lista do Tom Select fique
 * acima do mapa e das camadas do Leaflet.
 */

.municipio-section {
    position: relative;
    z-index: 2000;
}

.municipio-section .ts-wrapper {
    position: relative;
    z-index: 2001;
}

.municipio-section .ts-dropdown {
    z-index: 2002 !important;
}

/* =========================================================
   INFORMAÇÕES DO MUNICÍPIO
========================================================= */

/*
 * Estrutura reaproveitada do projeto anterior:
 *
 * .main-container
 * .infoContainer
 * #info_nome
 * #info_tipo
 */

.main-container {
    display: flex;
    flex-wrap: wrap;
    vertical-align: top;
}

.infoContainer {
    width: 650px;
    padding: 5px;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: top;
}

.infoContainer p {
    margin: 2px 0;
}


/* Nome do município */

#info_nome {
    font-size: 30px;
    color: #00f;
    font-weight: bold;
    margin-bottom: 1px;
}


/* Tipo do município */

#info_tipo {
    font-size: 14px;
}


/* =========================================================
   LOADING
========================================================= */

#loading {
    padding: 12px;
    margin-bottom: 15px;
    background: #eaf3ff;
    color: #175a9c;
    border-radius: 6px;
}


/* =========================================================
   MENSAGEM DE ERRO
========================================================= */

#error {
    padding: 12px;
    margin-bottom: 15px;
    background: #ffeaea;
    color: #a00000;
    border-radius: 6px;
}


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

#map {
    width: 100%;
    height: 500px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
}


/*
 * Ajuste para o Leaflet respeitar os cantos
 * arredondados do mapa.
 */

.leaflet-container {
    border-radius: 5px;
}


/* =========================================================
   SETORES CENSITÁRIOS
========================================================= */

/*
 * O estilo visual dos polígonos é definido em mapa.js.
 *
 * Aqui ficam somente ajustes complementares
 * relacionados à apresentação do mapa.
 */


/* =========================================================
   POPUP DOS SETORES
========================================================= */

.setor-popup {
    min-width: 220px;
}

.popup-titulo {
    font-size: 16px;
    font-weight: bold;
    color: #770000;
    margin-bottom: 10px;
    text-align: center;
}

.popup-linha {
    font-size: 13px;
    margin-bottom: 5px;
}


/* =========================================================
   SEPARADORES
========================================================= */

/*
 * Mantidos do projeto anterior para preservar
 * o padrão de espaçamento entre blocos.
 */

.info-separator {
    margin-bottom: 40px;
}

.info-separator2 {
    margin-bottom: 150px;
}

.info-separator3 {
    margin-bottom: 150px;
}


/* =========================================================
   AJUSTES DO LEAFLET
========================================================= */

/*
 * O Leaflet possui alguns estilos próprios.
 * Estes ajustes evitam conflitos com estilos globais.
 */

.leaflet-popup-content {
    margin: 13px 15px;
}

.leaflet-popup-content-wrapper {
    border-radius: 5px;
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 768px) {

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }


    h2,
    .h2 {
        font-size: 25px;
    }


    .infoContainer {
        width: 100%;
    }


    #info_nome {
        font-size: 26px;
    }


    #map {
        height: 450px;
    }
}


@media (max-width: 480px) {

    h2,
    .h2 {
        font-size: 22px;
    }


    #info_nome {
        font-size: 23px;
    }


    #municipio {
        font-size: 15px;
    }


    #map {
        height: 400px;
    }
}

#contadorSetores {
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #333;
}

.info.legend {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 12px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    line-height: 20px;
    color: #333;
    font-size: 13px;
}

.info.legend strong {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.legenda-item {
    white-space: nowrap;
}

.info.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 7px;
    opacity: 0.85;
    border: 1px solid #999;
}

.tema-section {
    margin-top: 10px;
    padding: 10px;
}

.tema-section label {
    display: block;
    margin-bottom: 5px;
}

#tema {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}

/* ========================================================
   LEGENDA RECOLHÍVEL
   ======================================================== */

.legenda-recolhivel {
    background: rgba(255, 255, 255, 0.95);
    padding: 0;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    max-width: 300px;
}


/* Botão */

.legenda-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 8px 10px;

    border: 0;

    background: #ffffff;

    color: #333333;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


/* Seta */

.legenda-seta {
    margin-left: 12px;
    font-size: 11px;

    transition:
        transform 0.2s ease;
}


/* Conteúdo */

.legenda-conteudo {
    padding: 8px 10px 10px 10px;
}


/* Itens */

.legenda-recolhivel .legenda-item {
    display: flex;
    align-items: center;

    margin-top: 4px;

    line-height: 1.25;
}


/* Quadradinho da legenda */

.legenda-recolhivel .legenda-item i {
    display: inline-block;

    width: 18px;
    height: 18px;

    margin-right: 7px;

    border: 1px solid #777;

    flex-shrink: 0;
}


/* ========================================================
   LEGENDA FECHADA
   ======================================================== */

.legenda-recolhivel:not(.legenda-aberta)
.legenda-conteudo {
    display: none;
}


.legenda-recolhivel:not(.legenda-aberta)
.legenda-seta {
    transform: rotate(180deg);
}


/* ========================================================
   TELAS PEQUENAS
   ======================================================== */

@media (max-width: 768px) {

    .legenda-recolhivel {
        max-width: calc(100vw - 30px);
    }

    /*
     * No celular a legenda começa fechada.
     */

    .legenda-recolhivel
    .legenda-conteudo {
        display: none;
    }

    /*
     * Quando o usuário abrir,
     * o conteúdo aparece.
     */

    .legenda-recolhivel.legenda-aberta
    .legenda-conteudo {
        display: block;
    }

    .legenda-toggle {
        min-width: 100px;
        padding: 9px 11px;
    }
}


/* ========================================================
   TELAS MUITO PEQUENAS
   ======================================================== */

@media (max-width: 480px) {

    .legenda-recolhivel {
        max-width: calc(100vw - 20px);
    }

    .legenda-recolhivel
    .legenda-item {
        font-size: 12px;
    }

    .legenda-recolhivel
    .legenda-item i {
        width: 16px;
        height: 16px;
    }

}

/*
 * ========================================================
 * REMOVE CONTORNO DE FOCO DOS SETORES
 * ========================================================
 */

.leaflet-interactive {
    outline: none !important;
}

.leaflet-interactive:focus {
    outline: none !important;
}



/* ========================================================
   RODAPÉ
   ======================================================== */

/* Estilo para bullets no rodapé */
.bullets-footer {
    display: block;
    max-width: 685px;
    margin: 10px auto 20px;
    line-height: 140%;
    text-align: left;
}


/* ========================================================
   CAIXA "LEIA-ME"
   ======================================================== */

.pageInfoBox {
    display: none;

    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 600px;
    max-width: 90%;

    max-height: 80vh;

    overflow-y: auto;

    background: #fff;

    border: 2px solid #770000;
    border-radius: 8px;

    padding: 25px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35);

    z-index: 9999;

    font-size: 14px;
    line-height: 1.5;

    box-sizing: border-box;
}


/* Título */

.pageInfoBox h3 {
    font-size: 18px;

    color: #770000;

    text-align: center;

    margin-top: 0;
    margin-bottom: 20px;
}


/* Subtítulos */

.pageInfoBox h4 {
    margin-top: 15px;
    margin-bottom: 8px;

    color: #770000;
}


/* Lista */

.pageInfoBox ul {
    padding-left: 22px;
}

.pageInfoBox li {
    margin-bottom: 10px;
    text-align: justify;
}


/* Parágrafos */

.pageInfoBox p {
    margin-top: 5px;
    margin-bottom: 10px;
}


/* ========================================================
   BOTÃO "LEIA-ME"
   ======================================================== */

.info-button {
    display: block;

    margin: 0 auto;

    background-color: #770000;

    color: #fff;

    font-size: 14px;

    border-radius: 5px;

    border: 2px solid #770000;

    padding: 8px 16px;

    cursor: pointer;
}


/* Efeito ao passar o mouse */

.info-button:hover {
    background-color: #DCDCDC;

    border-color: #DCDCDC;

    color: #333;
}


/* ========================================================
   BOTÃO FECHAR
   ======================================================== */

.closeBtn {
    position: absolute;

    top: 5px;
    right: 10px;

    cursor: pointer;

    font-size: 16px;
    font-weight: bold;

    color: #770000;
}


/* Efeito no X */

.closeBtn:hover {
    color: #000;
}


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

@media (max-width: 480px) {

    .pageInfoBox {
        width: 95%;
        max-width: 95%;

        padding: 20px;

        font-size: 13px;
    }

    .pageInfoBox h3 {
        font-size: 17px;
    }

    .bullets-footer {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* TOOLTIP DOS SETORES */

.setor-tooltip {
    font-size: 10px;
}

.setor-tooltip strong {
    font-size: 12px;
}