body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fonte mais moderna */
    margin: 0;
    padding: 0;
    background-color: #eef1f5;
    /* Fundo mais suave */
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #2c3e50;
    /* Azul escuro */
    color: #fff;
    padding: 1.5rem 0;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* Sombra mais pronunciada */
}

header h1 {
    margin: 0;
    font-size: 2.5em;
    letter-spacing: 1px;
}

main {
    max-width: 1200px;
    margin: 30px auto;
    /* Mais espaçamento superior/inferior */
    padding: 0 25px;
    /* Mais padding nas laterais */
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* Mais espaço entre os elementos principais */
    justify-content: center;
}

.chart-container {
    background-color: #ffffff;
    padding: 25px;
    /* Mais padding */
    border-radius: 12px;
    /* Cantos mais arredondados */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    /* Sombra mais suave e espalhada */
    flex: 1;
    min-width: 480px;
    /* Ajuste para ter mais espaço */
    max-width: 580px;
    /* Ajuste para ter mais espaço */
    position: relative;
    display: flex;
    /* Para flex-box interno para total */
    flex-direction: column;
    align-items: center;
    /* Centraliza conteúdo */
}

.chart-container h2 {
    text-align: center;
    color: #3498db;
    /* Azul mais vibrante */
    margin-bottom: 20px;
    /* Mais espaçamento */
    font-size: 1.8em;
    border-bottom: 2px solid #ecf0f1;
    /* Linha sutil abaixo do título */
    padding-bottom: 10px;
    width: 100%;
    /* Ocupa toda a largura */
}

.chart-wrapper {
    position: relative;
    height: 380px;
    /* Altura ligeiramente menor para compensar o padding */
    width: 100%;
    margin: auto;
}

.chart-wrapper canvas {
    max-width: 100%;
    height: auto;
}

.total-display {
    text-align: center;
    font-size: 1.3em;
    /* Fonte um pouco maior */
    font-weight: 700;
    /* Mais negrito */
    margin-top: 15px;
    /* Mais espaçamento */
    color: #2ecc71;
    /* Verde vibrante para o total */
    background-color: #f0fdf4;
    /* Fundo leve para o total */
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #d0f7d0;
    /* Borda sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.description {
    text-align: center;
    font-size: 0.95em;
    color: #7f8c8d;
    /* Cinza médio */
    margin-top: 20px;
    /* Mais espaçamento */
    line-height: 1.6;
}

/* Estilos para a nova seção da tabela */
.data-table-container {
    background-color: #ffffff;
    padding: 30px;
    /* Mais padding */
    border-radius: 12px;
    /* Cantos mais arredondados */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    /* Sombra mais pronunciada */
    flex-basis: 100%;
    /* Ocupa a largura total na linha abaixo dos gráficos */
    margin-top: 30px;
    /* Espaçamento maior entre gráficos e tabela */
}

.data-table-container h2 {
    text-align: center;
    color: #3498db;
    /* Azul mais vibrante */
    margin-bottom: 25px;
    /* Mais espaçamento */
    font-size: 2em;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 12px;
    width: 100%;
}

/* Estilos da tabela principal */
#dataTable table {
    width: 100%;
    border-collapse: separate;
    /* Permite border-spacing */
    border-spacing: 0;
    /* Remove espaçamento padrão entre células */
    margin-top: 20px;
    overflow: hidden;
    /* Para garantir que border-radius funcione */
    border-radius: 10px;
    /* Cantos arredondados na tabela inteira */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* Sombra para a tabela */
}

#dataTable th,
#dataTable td {
    padding: 15px 20px;
    /* Mais padding */
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
    /* Linha de separação mais suave */
    border-right: 1px solid #ecf0f1;
    /* Linha vertical suave */
}

#dataTable th {
    background-color: #34495e;
    /* Azul escuro para o cabeçalho */
    color: white;
    font-weight: 600;
    /* Seminegrito */
    text-transform: uppercase;
    font-size: 0.95em;
    letter-spacing: 0.5px;
}

/* Bordas arredondadas para os cantos do cabeçalho */
#dataTable th:first-child {
    border-top-left-radius: 10px;
}

#dataTable th:last-child {
    border-top-right-radius: 10px;
}


#dataTable tbody tr:nth-child(even) {
    background-color: #f8fcfd;
    /* Linhas alternadas mais claras */
}

#dataTable tbody tr:hover {
    background-color: #eef7fc;
    /* Efeito hover mais suave */
    cursor: pointer;
    /* Indica que é interativo, mesmo que não seja */
}

/* Alinhamento de texto para colunas numéricas (Custo mensal) */
#dataTable td:nth-child(5) {
    /* A 5ª coluna é "Custo mensal" */
    text-align: right;
    /* Alinha o custo à direita */
    font-weight: bold;
    color: #2980b9;
    /* Cor para os valores de custo */
}

/* Remove a borda direita da última coluna */
#dataTable th:last-child,
#dataTable td:last-child {
    border-right: none;
}

/* Remove a borda inferior da última linha */
#dataTable tbody tr:last-child td {
    border-bottom: none;
}

footer {
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 40px;
    background-color: #2c3e50;
    /* Cor igual ao cabeçalho */
    color: #ecf0f1;
    border-top: 1px solid #34495e;
    font-size: 0.9em;
}

/* Responsividade */
@media (max-width: 900px) {
    main {
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
    }

    .chart-container {
        min-width: 95%;
        padding: 20px;
    }

    .data-table-container {
        padding: 20px;
    }

    #dataTable th,
    #dataTable td {
        padding: 10px 12px;
        font-size: 0.8em;
    }

    #dataTable {
        overflow-x: auto;
        /* Adiciona scroll horizontal se a tabela for muito larga */
    }

    header h1 {
        font-size: 2em;
    }

    .chart-container h2,
    .data-table-container h2 {
        font-size: 1.5em;
    }

    .total-display {
        font-size: 1.1em;
    }
}

@media (max-width: 500px) {
    header h1 {
        font-size: 1.8em;
    }

    .chart-container {
        padding: 15px;
    }

    .data-table-container {
        padding: 15px;
    }

    #dataTable th,
    #dataTable td {
        padding: 8px;
    }

    .description {
        font-size: 0.85em;
    }

    .total-display {
        font-size: 1em;
        padding: 5px 10px;
    }
}

/* Cores distintas por área */
tr.area-BACKEND {
    background-color: #e3f2fd;
    /* azul claro */
}

tr.area-BI {
    background-color: #e8f5e9;
    /* verde claro */
}

tr.area-BALENA {
    background-color: #fff3e0;
    /* laranja claro */
}

tr.area-FRONTEND {
    background-color: #fce4ec;
    /* rosa claro */
}

tr.area-IA {
    background-color: #ede7f6;
    /* roxo claro */
}

tr.area-UNI {
    background-color: #f3e5f5;
    /* lilás claro */
}