/* Estilos gerais */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f4f4f4; /* Cor de fundo do body */
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* Container principal */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide em duas colunas de tamanho igual */
    gap: 2rem; /* Espaçamento entre as colunas */
    padding: 2rem;
}

/* Estilos da seção de apresentação */
#apresentacao {
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#apresentacao h2 {
    margin-top: 0;
}

.contato, .redes-sociais, .curriculo {
    margin-bottom: 1.5rem;
}

.contato ul, .redes-sociais ul {
    list-style: none;
    padding: 0;
}

.contato ul li, .redes-sociais ul li {
    margin: 0.5rem 0;
}

.redes-sociais a {
    color: #0073b1; /* Cor do link do LinkedIn */
    text-decoration: none;
}

.redes-sociais a:hover {
    text-decoration: underline;
}

.curriculo a {
    color: #d35400; /* Cor do link do currículo */
    text-decoration: none;
}

.curriculo a:hover {
    text-decoration: underline;
}

/* Estilos da seção de projetos */
/* Seção de Projetos */
#projetos {
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Container das categorias */
.categorias-projetos {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 2rem; /* Espaço entre as categorias */
    margin-top: 1rem;
}

/* Estilo de cada categoria */
.categoria {
    padding: 1rem;
    border-radius: 8px;
}

#engenharia {
    background: #f8f9fa; /* Cor de fundo diferente para engenharia */
    border: 2px solid #2c3e50; /* Borda temática */
}

#dados-bi {
    background: #e8f4f8; /* Cor de fundo diferente para Dados/BI */
    border: 2px solid #2980b9; /* Borda temática */
}

.categoria h3 {
    color: #2c3e50; /* Cor do título para engenharia */
    margin-top: 0;
    font-size: 1.25rem;
}

#dados-bi h3 {
    color: #2980b9; /* Cor do título para Dados/BI */
}

/* Ajuste nos projetos individuais */
.projeto {
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    border-radius: 4px;
}

#engenharia .projeto {
    background: #ffffff; /* Fundo branco para contrastar */
}

#dados-bi .projeto {
    background: #ffffff;
}

.projeto a {
    color: #27ae60;
    text-decoration: none;
}

.projeto a:hover {
    text-decoration: underline;
}

/* Estilos para página de detalhes do projeto */
.projeto-detalhe-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 33% vs 66% */
    gap: 2rem;
    padding: 2rem;
}

.detalhes-esquerda {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detalhe-box {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

#codigo-python {
    border-left: 4px solid #3498db;
    height: 100%; /* Ocupa toda a altura disponível */
    display: flex;
    flex-direction: column;
}

#codigo-python pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin: 0;
    flex-grow: 1; /* Preenche o espaço restante */
    overflow-y: auto; /* Barra de rolagem vertical quando necessário */
    max-height: 400px; /* Altura máxima ajustável conforme necessidade */
    white-space: pre; /* Mantém a formatação original do código */
    word-wrap: normal; /* Evita quebra de linha */
}

#codigo-python code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem; /* Tamanho menor para melhor visualização */
    color: #34495e;
    display: block;
    line-height: 1.4;
    
}

/* Personalização da barra de rolagem */
#codigo-python pre::-webkit-scrollbar {
    width: 8px;
}

#codigo-python pre::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#codigo-python pre::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#codigo-python pre::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#diagrama-dados {
    border-left: 4px solid #2ecc71; /* Verde para diagrama */
}

.detalhe-box h3 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 1.2rem;
}

.detalhe-box pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

.detalhe-box code {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #34495e;
}

.dashboard-direita {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

#diagrama-dados {
    border-left: 4px solid #2ecc71;
    height: 400px; /* Altura fixa */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Impede que o conteúdo ultrapasse o container */
}

#diagrama-dados img {
    width: 80%;
    height: 80%;
    object-fit: contain; /* Mantém a proporção e mostra todo o SVG */
    padding: 1rem;
}

/* Mantenha a responsividade */
@media (max-width: 768px) {
    #diagrama-dados {
        height: 300px; /* Altura menor em mobile */
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .projeto-detalhe-container {
        grid-template-columns: 1fr;
    }
    
    .dashboard-direita iframe {
        height: 400px;
    }
}
/* Rodapé */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}