/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Layout principal */
.container {
    display: flex;
    min-height: 100vh;
}

/* Menu lateral */
.sidebar {
    width: 300px;
    background-color: #1E293B;
    color: white;
    padding: 20px;
    text-align: center; /* Centraliza o conteúdo */
}

.sidebar-image1 {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0px auto 5px; /* Adiciona um espaçamento superior */
}

.sidebar-image {
    width: 100%;
    max-width: 250px;
    height: auto;
    display: block;
    margin: 5px auto 10px; /* Adiciona um espaçamento superior */
}

.sidebar-image2 {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 5px auto 10px; /* Adiciona um espaçamento superior */
}

.sidebar-video {
    width: 100%;
    max-width: 250px; /* Define um tamanho máximo */
    height: auto;
    display: block;
    margin: 10px auto 10px; /* Adiciona um espaçamento superior */
}

/* Conteúdo principal */
.content {
    flex: 1;
    padding: 20px;
    background-color: #F1F5F9;
}

header {
    background-color: #1E293B;
    color: white;
    padding: 35px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

header h1 {
    display: inline-block;
    position: absolute;
    min-width: 100%;
    white-space: nowrap;
    top: 10px; /* Ajusta a altura do texto */
    left: 100%; /* Começa fora da tela à direita */
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    from {
        left: 100%;
    }
    to {
        left: -100%;
    }
}

.cards {
    display: flex;
    gap: 20px;
    margin: 10px 5px;
}

.card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 1;
    text-align: center;
} 

.negative {
    color: red;
    font-weight: bold;
}

.negative1 {
    color: blue;
    font-weight: bold;
}

.negative2 {
    color: orange;
    font-weight: bold;
}

.negative3 {
    color: blue;
    font-weight: bold;
}

.negative4 {
    color: orange;
    font-weight: bold;
}

/* Estilos para o gráfico de 2024 */
.chart-container {
    width: 45%;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    left: 780px;
}

.chart-container canvas {
    width: 85% !important;
    height: 170px !important;
}

.titulo-meta {
    font-size: 19px;
    font-weight: bold;
    position: absolute;
    color: gray;
    top:225px;
    left: 550px;
}

.kwh-label {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    color: gray;
    top: 310px;
    left: 330px;
}

.meta-indicator {
    color: blue;
    font-weight: bold;
    position: absolute;
    top: 270px;
    left: 735px;
}

.atingido-indicator {
    color: orange;
    font-weight: bold;
    position: absolute;
    top: 330px;
    left: 735px;
}

/* Estilos para o gráfico de 2025 */
.chart-container-2025 {
    width: 35%;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: -447px;
    left: 900px;
    position: absolute;
}

.chart-container-2025 canvas {
    width: 85% !important;
    height: 170px !important;
}

.titulo-meta-2025 {
    font-size: 19px;
    font-weight: bold;
    position: absolute;
    color: gray;
    top: 25px;
    left: 230px;
}

.kwh-label-2025 {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    color: gray;
    top: 110px;
    left: 10px;
}

.meta-indicator-2025 {
    color: blue;
    font-weight: bold;
    position: absolute;
    top: 95px;
    left: 430px;
}

.atingido-indicator-2025 {
    color: orange;
    font-weight: bold;
    position: absolute;
    top: 71px;
    left: 430px;
}

/* Estilos para as imagens abaixo dos gráficos */
.imagem-grafico {
    display: block;
    margin-top: 20px; /* Ajuste a margem conforme necessário */
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 10px; /* Adiciona bordas arredondadas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra suave */
}

/* Ajustes específicos para a imagem do gráfico 2024 */
.chart-container + .imagem-grafico {
    width: 45%; /* Ajuste a largura conforme necessário */
    margin-left: 0px; /* Alinha com o gráfico 2024 */
}

/* Ajustes específicos para a imagem do gráfico 2025 */
.chart-container-2025 + .imagem-grafico {
    width: 45%; /* Ajuste a largura conforme necessário */
    margin-left: 580px; /* Alinha com o gráfico 2025 */
    margin-top: -175px; /* Ajuste a margem superior conforme necessário */
}