/* BASE */
html, body { margin : 0; padding : 0 }

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

/* =========================
   INFO BÁSICA (Nome do Estado)
========================= */

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

/* Ajusta o bloco INFO Básica */
.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 Básica */
.infoContainer p {
    margin: 2px 0;
}

/* Estilo Nome do Estado */
    #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
========================= */

#info {
    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 */
}

/* 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 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: green; /* Mudando a cor para verde */
    font-size: 30px; /* Tamanho do ícone */
}

.card .fa-people-group {
    color: #A0522D;
    font-size: 30px; /* Tamanho do ícone */
}

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

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

#card-container {
    position:relative;
}

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

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

#info2 {
    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 */
}

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

/* padrão pequeno (3 gráficos) */
.chart-sm {
    width: 220px;
    height: 300px;
}
/* gráfico maior (pirâmide etária) */
.chart-lg {
    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-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;
}

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

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


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