.body-style {
	margin: 0;
	padding: 0;
	border: 0;
	position: 0;
}


/* ======================================================= */
/*				8. ESTILOS CABEÇALHO                 
/* ======================================================= */

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	padding-top: 0;
	padding-bottom: 0;
}



.cabecalho {
	display:flex;
	align-items: center;
	justify-content: none;
	width: 100%;
	height:3cm;
	background-color: #eeeeee;
	padding-top: 0;
	padding-bottom: 0;
}


.logo-agergs {
	display: flex;
    text-align: center;
    margin-bottom: 0.0m; 
	margin-top: 0.0cm;
    }
	
.logo-agergs img {
     width: 1.5cm;
  
    }


/* ======================================================= */
/*				8. ESTILOS DOS BOTÕES                   
/* ======================================================= */


.botoes-container {
	align-items: center;
	justify-content: column;
	width: 100%;
	height: 2cm;
	background-color: #0c5b79;
}
/* alinha os botões */
.botoes {
	padding-top: 0.5cm;
    display: flex;       /* Alinha os botões lado a lado */
    flex-wrap: wrap;     /* Deixa quebrar a linha em telas menores */
    gap: 15px;           /* Espaço de 15px entre cada botão */
}

/* Estilo padrão para os botões (funciona em <button> e <a>) */
.btn-mashup {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none; /* Remove sublinhado dos links */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    /* Faz os botões se ajustarem e crescerem */
    flex: 1 1 160px; /* Cresce/encolhe, com base de 160px */
}

.btn-mashup a {
    color: #fff; /* Garante que a fonte do link seja branca em todos os botões */
    text-decoration: none; /* Mantém o sublinhado removido para todos os links de botão */
    
    /* Configuração para o link cobrir todo o botão (conforme seu pedido) */
    display: block;
    width: 100%;
    height: 100%;
}

/* Efeito ao passar o mouse */
.btn-mashup:hover {
	transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    background-color: #004a75; /* Tom de azul mais escuro */
    /* Aplica o hover também ao link, caso necessário,
       embora o 'a' herde o hover do pai 'button' */
}


#btn-portal {
    background-color: #39844b;
}


#clearButton {
    background-color: #f3bd1f;
	color: #fff;
	
}


#btn-atendimento {
    background-color: #87000d;
}



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

/* ======================================================= */
/* 4. KPIS - Layout e Spacing */
/* ======================================================= */
.kpi-row { 
    display: flex; 
    /* Adicionando espaçamento entre os KPIs */
    gap: 20px; 
    /* Centraliza os KPIs se eles não preencherem 100% da largura */
    justify-content: center; 
    width: 100%;
    margin-bottom: 30px; /* Bom espaço abaixo da linha de KPIs */
    margin-top: 20px;
    
    /* REMOVIDO: A borda, padding e box-shadow foram movidos para o .kpi-object */
    border: none;
    box-shadow: none;
    padding: 0;
}
 
.kpi-object { 
    /* Permite que o KPI cresça, mas não mais do que 300px (controla a largura) */
    flex: 1 1 200px; 
    max-width: 300px; /* Limita a largura máxima individual */
    
    min-height: 120px;
    background: #fff; 
 
    /* ADIÇÃO: Borda e Sombra para o efeito de "caixa" */
    border: 1px solid #ccc; /* Adiciona a borda */
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adiciona a sombra */
    padding: 15px; /* Adiciona padding interno para afastar o conteúdo da borda */

    margin: 0; 
} 

/* Opcional: Estilos para alinhar o texto dentro do KPI, se necessário */
.kpi-object > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.flex-container{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items: center;
	
}
	
/* ======================================================= */
/*				8. ESTILOS DO MAPA                 
/* ======================================================= */

/* 5. SEÇÕES DE GRÁFICOS E TABELAS - Estilos visuais */
.mapa-style {
	display: flex; 
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	height: 80%;
	width: 50%;
	max-width: 100%;
	margin-bottom: 25px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.1);
}


.mapa1-style {
	width: 100%;
	height: 95%;
}


/* ======================================================= */
/*				8. ESTILOS DAS TABELAS                   
/* ======================================================= */

/* TABELAS- Style pai e suas divisões*/
.tabela-style {
	display: flex; 
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	flex: 1 1 auto;
    height: 80%; /* Altura padrão, será alterada */
    width: 50%; /* Largura mínima padrão, será alterada */
    margin: 0; /* Remove a margem conflitante (45px 0 0 45px) */
	box-shadow: 0 2px 4px rgba(0,40,0,0.10);
	margin-bottom: 25px;
}


.tabela1-style {
	width:100%;
	height:100%;
}



/* Padrão da tabela*/

.qvplaceholder, .qvobject {
    flex: 1 1 auto;
    height: 600px; /* Altura padrão, será alterada */
    width: 800px; /* Largura mínima padrão, será alterada */
    margin: 0; /* Remove a margem conflitante (45px 0 0 45px) */
}


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

.kpi-section { 
    display: flex; 
    flex-direction: column ; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    min-width: 200px; 
}


.kpi-object { 
    flex: 1; /* Permite que os 3 KPIs dividam o espaço igualmente */
    min-height: 120px; 
    background: #fff; 

    border-radius: 6px;
    margin: 0; /* Remove margem padrão */
}   

/* 6. LARGURA TOTAL - Usada para Filtro, Mapa e Tabelas para forçar a quebra de linha */
.full-width {
    flex-basis: 100%; /* Ocupa a largura total */
    min-width: 100%;  
    margin-bottom: 20px; /* Garante espaço entre os blocos (Mapa e Tabelas) */
}
  
/* 7. FILTRO COMPACTO - Configuração para alinhar filtros lado a lado (ROW) */
.filtro-compacto {
    /* CORREÇÃO ESSENCIAL: Usa display: flex para alinhar itens em linha */
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row; /* Garante alinhamento horizontal */
    width: 100%; 
    height: auto; 
    margin-top: 5px; 
    margin-bottom: 20px; 
}


/* Espaçamento e Dimensionamento dos ITENS INDIVIDUAIS do Filtro (Qlik Object) */
.filtro-compacto > * { 
    /* Adiciona 15px de espaçamento à direita e 15px abaixo (para quebras) */
   
    
    /* Configurações de tamanho do placeholder do filtro */
    height: 40px; 
    min-width: 150px; 
    flex: 1 1 180px; /* Cresce/Encolhe um pouco, base de 180px */
}



/* ======================================================= */
/* AJUSTES PARA DISPOSITIVOS MÓVEIS              */
/* ======================================================= */

/* Aplica estes estilos APENAS se a tela for menor que 768px (Celulares/Tablets pequenos) */
@media screen and (max-width: 768px) {

    /* 1. Ajuste do Cabeçalho */
    .cabecalho {
        height: auto; /* Remove altura fixa de 3cm */
        padding: 10px 0;
        flex-direction: column; /* Empilha logo e botões se necessário */
    }

    .logo-agergs img {
        width: 2.5cm; /* Aumenta um pouco a logo no mobile para legibilidade */
        max-width: 80%;
    }

    /* 2. Ajuste dos Botões */
    .botoes {
        justify-content: center; /* Centraliza botões */
        padding-top: 10px;
    }

    .btn-mashup {
        flex: 1 1 30%; /* Botões ocupam 100% da largura no celular */
        margin: 5px 0;
    }

    /* 3. Ajuste dos KPIs (Indicadores) */
    .kpi-row {
        flex-wrap: wrap; /* Permite que os KPIs caiam para a linha de baixo */
        height: auto;
        padding: 0 10px;
    }

    .kpi-object {
        flex: 1 1 100%; /* KPI ocupa toda a largura */
        max-width: 100%;
        margin-bottom: 10px;
    }
	
	#Kpi3 {
		display: none;
	}

    /* 4. Ajuste do Mapa e Tabela */
    /* No seu CSS original estava 50%. No celular precisa ser 100% */
    .mapa-style, 
    .tabela-style {
        width: 95% !important; /* Força largura total com margem de segurança */
        height: 400px; /* Altura fixa razoável para celular */
        margin-bottom: 20px;
    }

    /* 5. Correção Crítica dos Objetos Qlik */
    /* Seu CSS original força width: 800px, o que quebra o layout no celular */
    .qvplaceholder, 
    .qvobject {
        width: 100% !important; /* Sobrescreve os 800px fixos */
        height: 100% !important; /* Ajusta à altura do container pai */
        min-width: 0; /* Evita overflow flexbox */
    }
    

    
    .filtro-compacto > * {
        width: 90%; /* Filtros ocupam quase toda a tela */
        margin-bottom: 10px;
    }
}