/* Overrides para incorporação no site (reduz espaços em branco) */
html, body {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
}

/* Remover alturas mínimas grandes das seções para evitar blocos vazios */
.simulator-section,
.loading-section,
.results-section {
    min-height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    margin: 0 !important;
}

/* Ajustar especificamente a seção de loading para centralização APENAS quando visível */
body .loading-section:not(.hidden) {
    min-height: calc(100vh - 200px) !important;
    height: calc(100vh - 200px) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Centralizar o container de loading dentro da seção */
body .loading-section:not(.hidden) .loading-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 2rem !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Garantir que não haja espaços extras entre seções */
.simulator-section + .loading-section,
.loading-section + .results-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Garantir que o container da seção de resultados mantenha a centralização */
.results-section .container {
    margin: 0 auto !important;
    max-width: 1200px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ajustes de cartões e contêineres para compactar levemente */
.form-container,
.results-main-card,
.chart-container,
.pie-chart-container,
.timeline-container {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* Ajustar container ESG para ter EXATAMENTE o mesmo tamanho do container de custos */
.esg-container,
.pie-chart-container {
    aspect-ratio: 1.6 !important;
    min-height: auto !important;
    padding: 16px !important;
    height: auto !important;
    box-sizing: border-box !important;
    border: 2px solid var(--border) !important; /* Garantir mesma borda */
}

/* Garantir mesma altura entre os containers */
.combined-section {
    align-items: stretch !important;
}

/* Manter altura consistente quando o seletor está visível */
.esg-container:has(.esg-method-selector:not(.esg-method-selector-hidden)) {
    aspect-ratio: 1.6 !important;
    min-height: auto !important;
}

/* Ajustar espaçamento do grid ESG - reduzir gaps para igualar altura */
.esg-grid {
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 8px !important; /* Reduzido de 12px para 8px */
    margin-top: 8px !important; /* Reduzido de 12px para 8px */
    height: calc(100% - 40px) !important; /* Ajustado para compensar título */
}

/* Quando mostrando comparação (após clicar) */
.esg-grid:has(.esg-comparison-card) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: calc(100% - 40px) !important; /* Mantém mesma altura */
    gap: 8px !important;
}

/* Ajustar cards ESG com padding menor para compensar altura */
.esg-card {
    padding: 10px !important; /* Reduzido de 12px para 10px */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: auto !important;
    margin: 0 !important;
}

/* Cards de comparação após clique */
.esg-comparison-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px !important;
}

/* Manter título consistente com o quadrante de custos */
.esg-container .section-title {
    margin: 0 0 8px 0 !important; /* Reduzido para 8px para match com custos */
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* Garantir que o seletor de método tenha espaço adequado */
.esg-method-selector {
    margin-bottom: 24px !important;
    flex-shrink: 0 !important;
}

/* Botão de voltar não deve afetar layout */
.esg-back-button {
    position: absolute !important;
    z-index: 10 !important;
}

/* Remover padding bottom da última seção para evitar espaço extra */
.results-section {
    padding-bottom: 0 !important;
}

/* Garantir que o último elemento não tenha margin bottom */
.results-section > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Melhorar espaçamento em telas menores */
@media (max-width: 768px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .results-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .esg-container {
        aspect-ratio: auto !important;
        min-height: auto !important;
        padding: 16px !important;
    }
    
    .esg-grid {
        gap: 10px !important;
    }
    
    .esg-card {
        padding: 10px !important;
    }
}