/* ===================================
   ACOMPANHAMENTO ORÇAMENTÁRIO - GOVHUB
   =================================== */

/* Hero Section - Title Override */
.ipea-hero-title {
    font-size: 3.75rem; /* 60px */
    font-weight: 300; /* Light */
    color: #F7F7F7;
    text-align: left;
    line-height: 1.1;
}

/* Hero Section - Subtitle */
.ipea-hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-weight: 600; /* Semi-bold */
    color: #F7F7F7;
    margin-top: 1rem;
    margin-bottom: 0;
    text-align: left;
}

/* Responsive Design para Title */
@media (max-width: 1200px) {
    .ipea-hero-title {
        font-size: 3.25rem; /* 52px */
    }
}

@media (max-width: 992px) {
    .ipea-hero-title {
        font-size: 2.75rem; /* 44px */
    }
}

@media (max-width: 768px) {
    .ipea-hero-title {
        font-size: 2.25rem; /* 36px */
        text-align: center;
    }
    
    .ipea-hero-subtitle {
        font-size: 1.25rem; /* 20px */
        text-align: center;
    }
}

@media (max-width: 576px) {
    .ipea-hero-title {
        font-size: 1.875rem; /* 30px */
    }
    
    .ipea-hero-subtitle {
        font-size: 1.125rem; /* 18px */
    }
}

/* Contract Detail Groups (sem card) */
.contract-detail-group {
    margin-bottom: 0.5rem;
}

.contract-detail-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #7A34F3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.contract-detail-value {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #202020;
    line-height: 1.4;
}

/* Objetivo Text Styling */
.objective-text {
    font-weight: 400;
    line-height: 1.6;
    text-align: justify;
    font-size: 1rem;
}

/* Responsive Design para Objetivo */
@media (max-width: 768px) {
    .objective-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .contract-detail-value {
        font-size: 0.9rem;
    }
}

/* ===================================
   DADOS CONTRATUAIS SECTION
   =================================== */

.contractual-data-section {
    background: #ffffff;
    padding: 4rem 0;
}

.contractual-data-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: #202020;
    margin-bottom: 2rem;
    text-align: left;
}

.contractual-data-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
}

.contractual-data-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.contractual-data-header {
    margin-bottom: 1rem;
}

.contractual-data-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #7A34F3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.contractual-data-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.contractual-data-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.contractual-data-value {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #202020;
    line-height: 1.2;
}

.info-note {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #202020;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.info-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #202020;
}

/* Responsive Design para Dados Contratuais */
@media (max-width: 768px) {
    .contractual-data-section {
        padding: 3rem 0;
    }
    
    .contractual-data-title {
        font-size: 1.875rem;
    }
    
    .contractual-data-value {
        font-size: 1.5rem;
    }
    
    .contractual-data-card {
        min-height: 100px;
        padding: 1.25rem;
    }
}

/* ===================================
   INDICADORES ORÇAMENTÁRIOS SECTION
   =================================== */

.budgetary-indicators-section {
    background: #ffffff;
    padding: 4rem 0;
}

.budgetary-indicators-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: #202020;
    margin-bottom: 1.5rem;
    text-align: left;
}

.subsection-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: left;
}

.subsection-title-purple {
    color: #A95EA1;
}

.subsection-title-orange {
    color: #9F5528;
}

.indicator-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
}

.indicator-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.indicator-card-purple {
    background: #FFF2FE;
}

.indicator-card-orange {
    background: #FFF3EC;
}

.indicator-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.indicator-label-purple {
    color: #A95EA1;
}

.indicator-label-orange {
    color: #9F5528;
}

.indicator-value {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #202020;
    line-height: 1.2;
}

.info-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Responsive Design para Indicadores Orçamentários */
@media (max-width: 768px) {
    .budgetary-indicators-section {
        padding: 3rem 0;
    }
    
    .budgetary-indicators-title {
        font-size: 1.875rem;
    }
    
    .subsection-title {
        font-size: 1.25rem;
    }
    
    .indicator-value {
        font-size: 1.5rem;
    }
    
    .indicator-card {
        min-height: 100px;
        padding: 1.25rem;
    }
}

/* ===================================
   HISTÓRICO ORÇAMENTÁRIO SECTION
   =================================== */

.budgetary-history-section {
    background: #ffffff;
    padding: 4rem 0;
}

.budgetary-history-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: #202020;
    margin-bottom: 1rem;
    text-align: left;
}

.budgetary-history-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #202020;
    margin-bottom: 0.5rem;
    text-align: left;
}

.budgetary-history-description {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #202020;
    margin-bottom: 1rem;
    text-align: left;
}

.chart-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 320px;
}

.chart-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.chart-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #66308F;
    margin-bottom: 0.5rem;
}

.chart-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: #66308F;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilos específicos para o gráfico ComprasNet */
.budgetary-history-section .row.g-4 > div.col-12.col-lg-6:nth-child(2) .chart-title {
    color: #9F5528 !important;
}

.budgetary-history-section .row.g-4 > div.col-12.col-lg-6:nth-child(2) .chart-subtitle {
    color: #9F5528 !important;
}

.chart-container {
    position: relative;
    height: 200px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.chart-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.budgetary-history-section .chart-legend {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: auto;
    margin-top: 0.3rem;
    margin-bottom: 0;
    padding: 0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #202020;
}

/* Responsive Design para Histórico Orçamentário */
/* ===================================
   RESPONSIVIDADE MELHORADA
   =================================== */

/* Tablets grandes */
@media (max-width: 1200px) {
    .contractual-data-card {
        min-height: 110px;
        padding: 1.25rem;
    }
    
    .indicator-card {
        min-height: 110px;
        padding: 1.25rem;
    }
    
    .contractual-data-label {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    .indicator-label {
        font-size: 0.85rem;
        line-height: 1.3;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .contractual-data-card {
        min-height: 100px;
        padding: 1rem;
    }
    
    .indicator-card {
        min-height: 100px;
        padding: 1rem;
    }
    
    .contractual-data-label {
        font-size: 0.8rem;
        line-height: 1.2;
    }
    
    .indicator-label {
        font-size: 0.8rem;
        line-height: 1.2;
    }
    
    .contractual-data-value {
        font-size: 1.2rem;
    }
    
    .indicator-value {
        font-size: 1.2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .budgetary-history-section {
        padding: 3rem 0;
    }
    
    .budgetary-history-title {
        font-size: 1.875rem;
    }
    
    .budgetary-history-subtitle {
        font-size: 1.125rem;
    }
    
    .chart-container {
        height: 180px;
    }
    
    .chart-card {
        padding: 0.5rem;
        height: 280px;
    }
    
    .contractual-data-card {
        min-height: 90px;
        padding: 0.875rem;
    }
    
    .indicator-card {
        min-height: 90px;
        padding: 0.875rem;
    }
    
    .contractual-data-label {
        font-size: 0.75rem;
        line-height: 1.1;
    }
    
    .indicator-label {
        font-size: 0.75rem;
        line-height: 1.1;
    }
    
    .contractual-data-value {
        font-size: 1.1rem;
    }
    
    .indicator-value {
        font-size: 1.1rem;
    }
}

/* Mobile pequeno */
@media (max-width: 576px) {
    .contractual-data-card {
        min-height: 80px;
        padding: 0.75rem;
    }
    
    .indicator-card {
        min-height: 80px;
        padding: 0.75rem;
    }
    
    .contractual-data-label {
        font-size: 0.7rem;
        line-height: 1.1;
    }
    
    .indicator-label {
        font-size: 0.7rem;
        line-height: 1.1;
    }
    
    .contractual-data-value {
        font-size: 1rem;
    }
    
    .indicator-value {
        font-size: 1rem;
    }
    
    .budgetary-indicators-title {
        font-size: 1.875rem;
    }
    
    .subsection-title {
        font-size: 1.25rem;
    }
    
    /* Forçar quebra de linha em telas muito pequenas */
    .row.g-3 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Ajustar espaçamento entre cards */
    .row.g-3 {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row.g-3 > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}