body { font-family: sans-serif; background-color: #f4f7f6; margin: 0; }
header { background-color: #fff; padding: 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
h1, h2, h3 { color: #333; }
main { padding: 20px; }
.area-negocio { background-color: #fff; padding: 20px; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.indicador-container { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; position: relative; }
.indicador-container.loading::before { /* Estilo de loading */ content: 'Carregando...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.8); padding: 20px; border-radius: 5px; }
.info-indicador { color: #666; font-size: 0.9em; }
.grafico-wrapper { position: relative; height: 300px; margin-top: 15px; }
.tabela-wrapper { margin-top: 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; border: 1px solid #ddd; text-align: center; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #f9f9f9; }

.graficos-individuais-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.grafico-bloco {
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 5px;
}
.grafico-bloco.comparativo {
    width: 100%;
}
.grafico-bloco.individual {
    flex: 1;
    min-width: 300px; /* Evita que fiquem muito espremidos */
}
.grafico-bloco h4 {
    margin-top: 0;
    text-align: center;
    color: #555;
}


/* Adicione este bloco ao seu style.css */

.filtros-container {
    display: flex;
    gap: 20px; /* Espaçamento entre os filtros */
    align-items: center;
}

.filtro-item {
    display: flex;
    flex-direction: column; /* Coloca o label em cima do select */
}

.filtro-item label {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 4px;
}

.filtro-item select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}


/* Adicione este bloco ao seu style.css */

.tabela-wrapper tfoot .total-row {
    background-color: #f2f2f2; /* Cor de fundo para destacar */
    border-top: 2px solid #ccc; /* Linha mais grossa para separar */
}


/* --- Estilos para os Cards de KPI --- */

.kpi-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espaçamento entre os cards */
    margin-bottom: 30px; /* Espaçamento antes dos gráficos */
    justify-content: center;
}

.kpi-card {
    flex: 1;
    min-width: 200px; /* Largura mínima para cada card */
    max-width: 250px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    background-color: #f9f9f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    /* Borda superior grossa que mudará de cor */
    border-top: 5px solid;
    transition: all 0.3s ease;
}

/* Cores de performance */
.kpi-card.positivo {
    border-top-color: #28a745; /* Verde */
}
.kpi-card.negativo {
    border-top-color: #dc3545; /* Vermelho */
}
.kpi-card.neutro {
    border-top-color: #6c757d; /* Cinza */
}

.kpi-card h4 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #333;
}

.kpi-card .valor {
    font-size: 2.5em;
    font-weight: 600;
    color: #212529;
    margin-bottom: 5px;
}

.kpi-card .detalhe {
    font-size: 0.9em;
    color: #6c757d;
}



/* ... (todo o seu CSS existente) ... */


/* ### MODIFICADO: Estilos para Responsividade ### */

/* Para tablets e celulares (telas menores que 768px) */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Reduz um pouco a fonte base */
    }

    header {
        flex-direction: column; /* Empilha o título e os filtros */
        align-items: flex-start; /* Alinha à esquerda */
        gap: 15px; /* Espaço entre título e filtros */
    }

    h1 {
        font-size: 1.5em; /* Reduz o tamanho do título principal */
    }
    
    .filtros-container {
        flex-direction: column; /* Empilha os filtros em telas muito pequenas */
        align-items: stretch; /* Faz os filtros ocuparem a largura toda */
        width: 100%;
        gap: 10px;
    }

    .filtro-item select {
        width: 100%; /* Ocupa toda a largura disponível */
    }

    main {
        padding: 10px; /* Reduz o espaçamento principal */
    }

    .area-negocio {
        padding: 15px; /* Reduz o padding das seções */
    }

    .graficos-individuais-container {
        flex-direction: column; /* Força os gráficos a empilharem verticalmente */
    }

    .grafico-bloco.individual {
        /* A configuração de flex já os fará ocupar 100% da largura no container de coluna */
        min-width: unset; /* Remove a largura mínima */
    }

    .grafico-wrapper {
        height: 250px; /* Reduz a altura dos gráficos */
    }

    .kpi-cards-container {
        justify-content: center; /* Centraliza os cards */
        gap: 15px;
    }

    .kpi-card {
        flex-basis: 100%; /* Faz cada card ocupar a largura total */
        max-width: none;
    }

    /* A Mágica para a Tabela Responsiva */
    .tabela-wrapper {
        overflow-x: auto; /* Adiciona a barra de rolagem horizontal */
        -webkit-overflow-scrolling: touch; /* Melhora a experiência de rolagem em iOS */
        border: 1px solid #ddd;
        border-radius: 4px;
        padding-bottom: 5px; /* Espaço para a barra de rolagem não colar no conteúdo abaixo */
    }

    table {
        /* Garante que a tabela não quebre, forçando a rolagem */
        white-space: nowrap; 
    }
}


/* ... final do seu arquivo style.css ... */

.kpi-card .detalhe-link {
    display: inline-block;
    margin-top: 15px;
    padding: 6px 12px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.kpi-card .detalhe-link:hover {
    background-color: #0056b3;
}