/* 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;
}

/* 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;
}

/* =========================
   FILTRO SELECT
========================= */
#filter-container {
    margin-bottom: 20px;
}

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

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

/* =========================
   OCULTAR ELEMENTOS INICIAIS
========================= */

        #data-container,
		#card-container,
		#graph-container,
		#info-container,
		.graph-container,
        #graph-title {
            display: none;
        }

/* =========================
   CONTENEINERS DAS SEÇÕES
========================= */

#overview-container {
    position:relative;
}

#profile-container {
    position:relative;
}

#context-container {
    position:relative;
}

#presence-container {
    position:relative;
}

#challenge-container {
    position:relative;
}

#opportunity-container {
    position:relative;
}

/* =========================
   INFO NOME
========================= */

/* Ajusta o bloco INFO NOME */
.main-container {
    display: flex;
    flex-wrap: wrap;
	vertical-align: top; /* Adiciona alinhamento vertical ao topo */
}

/* Ajusta o bloco INFO NOME */
.infoContainer {
    width: 650px; /* Largura desejada */
    /*height: 80px;  Altura desejada */
	padding: 5px;
	margin-bottom: 5px; /* Adiciona espaço entre os gráficos */
    display: inline-block; /* Permite que os contêineres dos gráficos fiquem lado a lado */
	vertical-align: top; /* Adiciona alinhamento vertical ao topo */
}
/* Defini o tamanho de p no bloco INFO NOME */
.infoContainer p {
    margin: 2px 0;
}

/* Estilo Nome da Localidade no bloco  INFO NOME*/
#info_nome {
        font-size: 30px; /* Ajusta o tamanho da fonte */
        color: #00f; /* Define a cor do texto para azul */
        font-weight: bold; /* Aplica negrito ao texto */
        margin-bottom: 1px; /* Adiciona um espaço maior abaixo do campo */
    }

/* =========================
   TABELAS INFORMAÇÕES + Outras
========================= */

table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
      }
	  
      td {	/* Representa células de dados */
      padding: 15px;
      text-align: left;
      font-size: 16px;
      }
	  
      th {  	/* Representa células de cabeçalhos */
	  padding: 15px;
      text-align: left;
      font-size: 16px;
      font-weight: bold; /* Deixa o texto em negrito */
	  white-space: nowrap; /* Evita que o texto quebre para uma nova linha */
      }
	  
      tr:nth-child(even) {
      background-color: #ffffff; /* cor branca para linhas pares */
      }
	  
      tr:nth-child(odd) {
      background-color: #f0f0f0; /* cor cinza para linhas ímpares */
      }
	  
	  tr:hover {
      background-color: #dcdcdc; /* cor de fundo ao passar o mouse */
      }

/* Formato do ano exibido na tabela INFORMAÇÕES */
.ano-tab {
    font-size: 0.85em;      /* menor que o número */
    color: #666;            /* cinza */
    font-style: italic;     /* opcional */
}
		
/* Estilo para o ICONS (Font Awesome) da TABELA INFORMAÇÕES*/
#info-container th i {
    margin-right: 8px;
    color: #1e88e5; /* escolha a cor desejada */
    width: 18px;    /* mantém todos alinhados */
    text-align: center;
}

/* Estilo para o ICONS (Font Awesome) da TABELA DEFICIÊNCIA*/
#deficiencia-container th i {
    margin-right: 8px;
    color: #1e88e5; /* escolha a cor desejada */
    width: 18px;    /* mantém todos alinhados */
    text-align: center;
}

/* Estilo para o ICONS (Font Awesome) da TABELA DOMICÍLIOS*/
#domicilios-container th i {
    margin-right: 8px;
    color: #1e88e5; /* escolha a cor desejada */
    width: 18px;    /* mantém todos alinhados */
    text-align: center;
}

/* Estilo para o ICONS (Font Awesome) da TABELA ESTABELECIMENTOS*/
#establishments-container th i {
    margin-right: 8px;
    color: #1e88e5; /* escolha a cor desejada */
    width: 18px;    /* mantém todos alinhados */
    text-align: center;
}

/* Estilo para o BOTÃO de informação das TABELAS */
.table-help{
    position:relative;
    left:1px;
    bottom:8px;
    background:transparent;
    border:none;
    color:#777;
    font-size:18px;
    cursor:pointer;
    padding:0;
    z-index:10;
    transition:.2s;
}

/* Estilo para o botão de informação das TABELAS */
.table-help i {
    font-size: 14px;
}

/* Estilo para o botão de informação das TABELAS */
.table-help:hover i {
    color: red;
}

#deficiencia-container {
    position:relative;
}

#domicilios-container {
    position:relative;
}

#establishments-container {
    position:relative;
}

/* Estilo para a Caixa Popup das TABELAS */
.tabelaInfoBox {
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%) !important;
    width:350px !important;
    max-width:90% !important;
    box-sizing:border-box;
}
/* Estilo para o texto Popup das TABELAS */
.tabelaInfoBox h3 {
    font-size:14px !important;
}
/* Estilo para o texto Popup das TABELAS */
.tabelaInfoBox p {
    font-size:14px;
}
/* Estilo para o texto Popup das TABELAS */
.info-content {
    text-align:left;
}

/* =========================
   CARDS CONTAINERS DE LAYOUT
========================= */

#cards-overview {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

#cards-context {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

#cards-challenge {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

#cards-presence {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

#cards-opportunity{
    display:flex;	/* Utiliza flexbox para alinhar os cards lado a lado */
    flex-wrap:wrap;	/* Permite que os cards quebrem para a próxima linha se não couberem na largura */
    justify-content:center;
    gap:15px;
}

/* =========================
   CARDS
========================= */

/* Estilo para o CARDS */
.card {
	position:relative; /* inserido */
	width: 220px;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin: 10px auto;    /* Margem entre os cards */
	margin-bottom: 20px; /* Espaçamento entre os cartões */
    background-color: #f5f5f5;
    padding: 20px; 	/* Espaçamento interno */
    display: flex;
    flex-direction: column;  /* Alinha os filhos em coluna */
	/*flex: 0 1 calc(30% - 20px);  Define o tamanho inicial dos cards */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    text-align: center; /* Alinha texto no centro */
}

.card i {
    font-size: 24px; /* Tamanho do ícone */
    margin-bottom: 10px; /* Espaçamento abaixo do ícone */
}

.card-data {
    font-size: 24px; /* Tamanho da fonte para o dado */
    font-weight: bold; /* Negrito para destaque */
    margin-bottom: 10px; /* Espaçamento entre o dado e o campo */
}

.card-label h5 {
    font-size: 18px; /* Tamanho da fonte para o campo */
    margin: 0; /* Remove margens padrão */
}

/* Estilo dos títulos dos Cards do BLOCO 4 */
.texto-nao{
    color: #800000;
    font-weight: bold;
}

/* Estilo para o ICONS dos CARDS*/

.card .fa-globe-americas {
    color: blue; /* Mudando a cor para azul */
    font-size: 24px; /* Tamanho do ícone */
}

.card .fa-users {
    color: #A0522D; /* Mudando a cor população */
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-people-group {
    color: green;		/* Mudando a cor evangélicos */
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-user-group {
    color: #4169E1;		/* Mudando a cor evangélicos */
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-cross {
    color: red;		/* Mudando a cor evangélicos */
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-wheelchair {
    color: red;
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-chart-line {
    color: red;
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-venus-mars {
    color: blue;
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-ranking-star {
    color: #FFD700;
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-chart-pie {
    color: green;
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-receipt {
    color: #8B008B;
    font-size: 30px; /* Tamanho do ícone extrato */
}

.card .fa-percent {
    color: #191970;
    font-size: 30px; /* Tamanho do ícone extrato */
}

.card .fa-church {
    color: 	#4169E1;
    font-size: 30px; /* Tamanho do ícone extrato */
}

.card-ranking {
    font-size: 22px;
}


/* Estilo para o BOTÃO de informação dos CARDS */
.card-help{
    position:absolute;
    left:8px;
    bottom:4px;
    background:transparent;
    border:none;
    color:#777;
    font-size:18px;
    cursor:pointer;
    padding:0;
    z-index:10;
    transition:.2s;
}

/* Estilo para o botão de informação dos CARDS */
.card-help i {
    font-size: 14px;
}

/* Estilo para o botão de informação dos CARDS */
.card-help:hover i {
    color: red;
}

/* Estilo para o texto Popup dos CARDS */
.cardInfoBox h3 {
    font-size: 12px;
	margin-top:0;
}
/* Estilo para o texto Popup dos CARDS */
.cardInfoBox p {
    font-size:10px;
}
/* Estilo para o texto Popup dos CARDS */
.cardInfoBox-content {
    text-align:left;
}

/* Estilo para os CARDS OPORTUNIDADES */

#cards-opportunity .card-data{
    color:#1976D2;
}

#cards-opportunity .card{
    width:calc(20% - 12px);
    margin:10px 0;
    box-sizing:border-box;
}

@media (max-width:1100px){
    #cards-opportunity .card{
        width:calc(25% - 12px);
    }
}

@media (max-width:768px){
    #cards-opportunity .card{
        width:90%;
    }
}

.card-tipo{
    margin-top:8px;
    font-size:12px;
    font-weight:bold;
    color:#777;
}

/* =========================
   GRÁFICOS CONTEINERS DE LAYOUT
========================= */

#charts-profile {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

#charts-context {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

#charts-opportunity {
    display: flex; /* Utiliza flexbox para alinhar os cards lado a lado */
    justify-content: space-around; /* Distribui os cards com espaçamento uniforme */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha se não couberem na largura */
}

/* =========================
   GRÁFICOS
========================= */

/* classes para os gráficos */
.graph-container {
    display: flex;
    flex-wrap: wrap;
	padding: 20px;
}

@media (max-width: 768px) {
.chart-container {
        max-width: 100%; /* Em telas menores, ocupa toda a largura */
    }
}

/* gráficos padrão pequeno */
.chart-sm {
    width: 220px;
    height: 300px;
}
/* gráfico padrão maior (ex.: pirâmide etária) */
.chart-lg {
    width: 300px;
    height: 250px;
}

/* gráfico padrão maior (ex.: pirâmide etária) */
.chart-se {
    width: 300px;
    height: 250px;
}

/* Aplica estilos aos cards dos Gráficos */
.tichart {
	width: 220px;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin: 10px auto;    /* Margem entre os cards */
	margin-bottom: 20px; /* Espaçamento entre os cartões */
    background-color: #FFFFFF;
    padding: 20px; 	/* Espaçamento interno */
    display: flex;
    flex-direction: column;  /* Alinha os filhos em coluna */
	/*flex: 0 1 calc(30% - 20px);  Define o tamanho inicial dos cards */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    text-align: center; /* Alinha texto no centro */
	position: relative; /* Adiciona posição relativa para posicionamento absoluto */
}

/* Define que os estilos se aplicam aos elementos canvas dentro de .tichart. */
.tichart canvas {
    margin-top: 40px; /* Distância entre o título e o gráfico */
	max-width: 100%; /* Garante que o gráfico não ultrapasse o tamanho do seu contêiner */
    height: auto; /* Permite que o gráfico se ajuste automaticamente à altura */
}

/* Aplica estilos ao título */
.tichart h5 {
	color: #0040FF; /* Cor do texto do título */
	font-size: 14px; /* Tamanho da fonte do título */
    position: absolute; /* Posicionamento absoluto em relação ao .tichart */
    top: 20px; /* Distância do topo do .tichart */
    left: 50%; /* Alinha o título no centro horizontal */
    transform: translateX(-50%); /* Corrige o alinhamento centralizado */
	
	width: 90%;              /* controla a área do título */
    text-align: center;      /* centraliza */
    line-height: 1.2;        /* aproxima as linhas */
	
    margin: 0; /* Remove margem padrão */
    z-index: 1; /* Garante que o título fique acima do canvas */
	/* margin-bottom: 10px; /* Espaçamento abaixo do título */
}

.chart-subtitle{
    position:absolute;
    top:40px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    text-align:center;
    font-size:11px;
    color:#666;
    font-style:italic;
    line-height:1.2;
}

.chart-container {
    display: flex;
    gap: 20px; /* Espaçamento entre os gráficos */
}

.chart-item {
    flex: 1; /* Ocupa espaço igualmente */
    max-width: 300px; /* Largura máxima de cada gráfico */
    height: 300px; /* Altura dos gráficos */
}

.chart-item canvas {
    height: 100%; /* Garante que o canvas ocupe toda a altura do seu contêiner */
}


/* CAIXA INFORMAÇÕES DOS GRÁFICOS */

/* Definições da Caixa Popup dos Gráficos */
.infoBox {
	font-size:10px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:95%;
    box-sizing:border-box;
    overflow:hidden;
    background:white;
    border:2px solid #770000;
    padding:10px;
    z-index:1000;
}

.infoBox h3 {
    font-size: 12px;
	margin-top:0;
}
/* Definições da Tabela Popup dos Gráficos */
.popup-tabela td {
    font-size: 12px;
}

.popup-tabela th {
    font-size: 10px;
}



/* ======================================================
   TABELAS DOS POPUPS
====================================================== */

.popup-tabela{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.popup-tabela th,
.popup-tabela td{
    padding:2px;
    line-height:1.3;
}

.popup-tabela th{
    font-size:10px;
}

.popup-tabela td{
    font-size:10px;
}

.popup-tabela h3{
    font-size:12px;
}

.popup-tabela tr:last-child td{
    padding-bottom:0;
}



/* ESTILO DA TABELA POPUP DOS GRÁFICOS */
/* BOTÕES DOS GRÁFICOS
/* 1. Definições do BOTÃO de INFORMAÇÃO dos gráficos */
.chart-help{
    position:absolute;
    left:8px;
    bottom:8px;
    background:transparent;
    border:none;
    color:#777;
    font-size:18px;
    cursor:pointer;
    padding:0;
    z-index:10;
    transition:.2s;
}

/* Estilo para o BOTÃO de INFORMAÇÃO dos gráficos */
.chart-help i {
    font-size: 14px;
}

/* Estilo para o BOTÃO de INFORMAÇÃO dos gráficos */
.chart-help:hover i {
    color: red;
}

/* 2. Definições do BOTÃO TABELA nos gráficos */
.chart-info{
    position:absolute;
    left:28px;
    bottom:8px;
    background:transparent;
    border:none;
    color:#777;
    font-size:18px;
    cursor:pointer;
    padding:0;
    z-index:10;
    transition:.2s;
}

/* Estilo para o BOTÃO TABELA nos gráficos */
.chart-info i {
    font-size: 14px;
}

/* Estilo para o BOTÃO TABELA nos gráficos */
.chart-info:hover i {
    color: red;
}

/* 3. Definições do BOTÃO DOWNLOAD nos gráficos */
.chart-download{
    position:absolute;
    left:48px;
    bottom:8px;
    background:transparent;
    border:none;
    color:#777;
    font-size:18px;
    cursor:pointer;
    padding:0;
    z-index:10;
    transition:.2s;
}

/* Definições do BOTÃO DOWNLOAD nos gráficos */
.chart-download i {
    font-size: 14px;
}

/* Definições do BOTÃO DOWNLOAD nos gráficos */
.chart-download:hover i {
    color: red;
}

/* CAIXA POPUP DA PÁGINA */

/* Estilo para o botão Notas */
button {
    background-color: #00BFFF;
    color: white;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 8px 16px;
}

.info-button {
    display: block;
    margin: 0 auto; /* Define margem automática para centralizar */
    background-color: #770000;
    color: white;
    font-size: 14px;
    border-radius: 5px;
    border: 2px solid #770000;
}

.info-button:hover {
    background-color: #DCDCDC;
	border: 2px solid #DCDCDC;
}

/* Estilo para o botão de fechar da tabela dos gráficos */
.closeBtn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
}

/* =========================
   EXTRAS
========================= */

/* Adiciona espaço entre os BLOCOS de informações no HTML*/
    .info-separator {
        margin-bottom: 40px;
    }

.info-separator2 {
        margin-bottom: 150px;
    }
	
	
.optgroup-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    color: #333;
    background-color: #f1f1f1;
    padding: 8px 10px;
}

/* =========================
 ESTILO DO BLOCO RESUMO DE CADA SEÇÃO
========================= */

.bloco-resumo{
    width:calc(100% - 40px);
    margin:20px auto 20px;
    box-sizing:border-box;
    padding:18px 22px;
    background:#f8faf9;
    border-left:5px solid #009A79;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.bloco-resumo h3{
    margin:0 0 10px;
    font-size:16px;
    color:#009A79;
}

.bloco-resumo p{
    margin:0;
    font-size:15px;
    line-height:1.6;
    color:#333;
}

/* ================================
   BOTÕES TOOGLER DOS GRÁFICOS
================================ */

.grafico-toggle{
    width:100%;
    display:flex;
    justify-content:center;
	margin-top:0px;
    transform:translateY(-3px);
}

.toggle-btn{
    background:#eee;
    color:#555;
    border:1px solid #ccc;
    border-radius:12px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
}

.toggle-btn.ativo{
    background:#009A79;
    color:white;
    border-color:#009A79;
}

.grafico-toggle[data-chart="alcance-etaria"] .toggle-btn.ativo{
    background:#1976D2;
    color:white;
    border-color:#1976D2;
}

/* ================================
   BOTÕES TOOGLER DOS CARDS OPORTUNIDADES
================================ */
.cards-filtro{
    width:100%;
    text-align:center;
    margin-top:15px;
    margin-bottom:10px;
}

.cards-filtro-titulo{
    font-size:13px;
    font-weight:bold;
    color:#555;
    margin-bottom:6px;
}

.cards-toggle{
    width:100%;
    display:flex;
    justify-content:center;
    gap:5px;
}

.card-toggle-btn{
    background:#eee;
    color:#555;
    border:1px solid #ccc;
    border-radius:12px;
    padding:4px 14px;
    font-size:11px;
    cursor:pointer;
    height:auto;
}

.card-toggle-btn:hover{
    background:#1976D2;
    color:white;
}

.card-toggle-btn.ativo{
    background:#009A79;
    color:white;
    border-color:#009A79;
}


/* =====================================================
   CARD CLASSIFICAÇÃO DA PRESENÇA EVANGÉLICA
   ===================================================== */
.classificacao-presenca{
    font-weight:bold;
    padding:8px 15px;
    border-radius:20px;
    display:inline-block;
    font-size:24px;
}

.card-label h5{
    margin-bottom:12px;
}

/* Até 10% */
.presenca-muito-baixa{
    background:#D32F2F;
    color:white;
}

/* 10-15% */
.presenca-baixa{
    background:#E64A19;
    color:white;
}

/* 15-20% */
.presenca-moderada-baixa{
    background:#F57C00;
    color:white;
}

/* 20-25% */
.presenca-moderada{
    background:#FBC02D;
    color:#333;
}

/* 25-30% */
.presenca-intermediaria-alta{
    background:#7CB342;
    color:white;
}

/* 30-40% */
.presenca-alta{
    background:#388E3C;
    color:white;
}

/* acima de 40% */
.presenca-muito-alta{
    background:#1976D2;
    color:white;
}


/* ================================
   CARD DEMANDA EVANGELIZAÇÃO
================================ */
.demanda-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    font-weight:600;
	font-size:24px;
}

.status-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
}

/* CORES */
.status-dot.prioritaria{
    background:#D32F2F;
}

.status-dot.muito-alta{
    background:#E64A19;
}

.status-dot.alta{
    background:#F57C00;
}

.status-dot.significativa{
    background:#FBC02D;
}

.status-dot.relevante{
    background:#7CB342;
}

.status-dot.estrategica{
    background:#388E3C;
}

.status-dot.continua{
    background:#1976D2;
}

.card-data .ano-tab{
    margin-left:5px;
}

.percentual-card{
    font-size: 0.55em;
    font-weight: 400;
    color: #777;
    margin-left: 5px;
}

.card-demanda .ano-tab{
    display:block;
    margin-top:16px;
}

/* ESTILO DA TABELA POPUP DOS GRÁFICOS COM LEGENDA*/
.classificacao-tabela{
    font-size:10px;
}

.classificacao-tabela td,
.classificacao-tabela th {
	font-size:10px;
    padding: 2px 2px;
    line-height: 1.3;
}

.cardInfoBox-content .classificacao-tabela {
    margin-bottom: 0;
}

.cardInfoBox-content .classificacao-tabela tr:last-child td {
    padding-bottom: 0;
}

/* Classe comum dos cards Cenário Religioso*/
.card-cenario{
    width:100%;
    margin-top:8px;
}

/* ESTILO para os Cards do Bloco Cenário Religioso*/
.cenario-item{
    display:flex;
    align-items:center;
    padding:2px 0;
    font-size:0.92rem;
	justify-content:space-between;
}
.cenario-label{
    color:#444;
}
.cenario-valor{
    font-weight:600;
}

/* Estilo do Card Dinâmica Religiosa*/
.dinamica-item{
    display:flex;
    align-items:center;
    padding:2px 0;
    font-size:0.92rem;
}

/* Estilo da coluna religão*/
.dinamica-religiao{
    flex:0 0 120px;   /* largura fixa da primeira coluna */
    color:#444;
	font-size:14px;
    text-align:left;
}

/* Estilo da coluna Classificação */
.dinamica-categoria{
    display:flex;
    align-items:center;
    gap:6px;
	font-size:13px;
    font-weight:600;
    text-align:left;
}

/* Estilo dos circulos de cores */
.categoria-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    flex-shrink:0;
}


/* ESTILO para exibir os valores negativos em vermelho*/
.saldo-negativo{
    color:#c62828;
}

/* =====================================================
   INDICADOR VISUAL DO GRÁFICO RANKING
===================================================== */

.ranking-faixa{
    position:relative;
    margin:14px 0 10px;
}

.ranking-linha{
    height:4px;
    background:#d8d8d8;
    border-radius:10px;
}

.ranking-marker{
    position:absolute;
    top:-8px;
    transform:translateX(-50%);
    text-align:center;
}

.ranking-marker i{
    color:#1976D2;
    font-size:18px;
}

.ranking-marker div{
    font-size:.80rem;
    font-weight:600;
}

.ranking-extremos{
    display:flex;
    justify-content:space-between;
    font-size:.78rem;
    color:#666;
    margin-top:-34px;
    margin-bottom:34px;
}

.ranking-top{
    text-align:center;
    margin-top:50px;
    font-weight:600;
    color:#1976D2;
}

.ranking-percentual{
    text-align:center;
    margin-top:4px;
	margin-bottom:25px;
    font-size:1.25rem;
    font-weight:700;
    color:#222;
}

.nota-popup {
    margin-bottom: 10px;
    line-height: 1.4;
}