/* RESET BÁSICO */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f4f6f9;
display:flex;
min-height:100vh;
}

/* MENU LATERAL */

.menu{
width:230px;
height:100vh;
background:#0d47a1;
color:white;
padding-top:20px;
position:fixed;
left:0;
top:0;
}

.menu h2{
text-align:center;
margin-bottom:30px;
font-size:22px;
}

.menu a{
display:block;
padding:15px;
color:white;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.2);
transition:0.2s;
}

.menu a:hover{
background:#1565c0;
}

/* CONTEÚDO */

.conteudo{
margin-left:230px;
flex:1;
padding:25px;
}

.conteudo h1{
margin-bottom:25px;
color:#333;
}

/* CARDS */

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px;
}

.card{
padding:20px;
border-radius:10px;
color:white;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.azul{
background:#1565c0;
}

.vermelho{
background:#c62828;
}

.card h3{
font-size:15px;
font-weight:normal;
}

.valor{
font-size:28px;
margin-top:10px;
font-weight:bold;
}

/* ÁREA DOS GRÁFICOS */

.graficos{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

/* CAIXA DOS GRÁFICOS */

canvas{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 0 5px rgba(0,0,0,0.1);
height:350px !important;
max-width:100%;
}

/* RESPONSIVIDADE */

@media(max-width:1200px){

.cards{
grid-template-columns:repeat(2,1fr);
}

.graficos{
grid-template-columns:1fr;
}

}

@media(max-width:700px){

.menu{
width:180px;
}

.conteudo{
margin-left:180px;
}

.cards{
grid-template-columns:1fr;
}

}