/* ============================================== */
/* ===      CSS for Transparency Section      === */
/* ============================================== */

.transparency-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Fondo blanco para esta sección */
}

/* Título principal de la sección (reutilizado) */
.transparency-section .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block; /* Asegura que centre bien */
    margin-bottom: 50px;
}

/* Bloques individuales (Resultados 2024, Presupuesto 2025) */
.transparency-block {
    margin-bottom: 50px;
    padding: 30px;
    background-color: #f9f9f9; /* Fondo ligero para los bloques */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.transparency-block:last-child {
    margin-bottom: 0; /* Sin margen inferior en el último bloque */
}

/* Subtítulos dentro de los bloques */
.transparency-block .subsection-title {
    font-size: 1.8rem; /* Ligeramente más pequeño que el título principal */
    color: #333;
    text-align: center;
    font-weight: 600;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f98930; /* Línea naranja debajo */
    display: inline-block; /* Ajustar borde al texto */
}

/* --- CORRECCIÓN KPI Cards --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Columnas adaptables */
    gap: 25px;
    margin-bottom: 20px;
}

/* Estilo individual de las tarjetas KPI */
.kpi-card {
    background-color: #ffffff;
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #f98930; /* Borde superior naranja */
    display: flex; /* Usar Flexbox para alinear contenido */
    flex-direction: column; /* Apilar elementos verticalmente */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente */
    min-height: 180px; /* Altura mínima para consistencia */
}

.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.kpi-icon {
    font-size: 2.5rem;
    color: #f98930;
    margin-bottom: 15px; /* Aumentar espacio debajo del icono */
    line-height: 1; /* Asegurar que el icono no añada espacio extra */
}

.kpi-value {
    font-size: 2rem; /* Ligeramente reducido */
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: 8px; /* Aumentar espacio debajo del valor */
    line-height: 1.1;
}

.kpi-value.positive { color: #4CAF50; }
.kpi-value.negative { color: #f44336; }

.kpi-label {
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
    line-height: 1.3; /* Mejorar espaciado si el texto ocupa 2 líneas */
}
/* --- FIN CORRECCIÓN KPI Cards --- */


/* --- CORRECCIÓN Budget Summary --- */
.budget-summary {
    display: flex;
    justify-content: space-around; /* Mantiene espacio alrededor */
    align-items: center; /* Centra verticalmente los items */
    flex-wrap: wrap; 
    gap: 30px; /* Aumentar espacio */
    margin-bottom: 40px;
    padding: 25px; /* Más padding */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    text-align: center; /* Centrar texto por defecto */
}

.budget-item {
    font-size: 1.1rem;
    color: #333;
    flex: 1; /* Permite que crezcan pero con base igual */
    min-width: 150px; /* Ancho mínimo para evitar compresión */
}

.budget-item span:first-child {
    display: block; 
    font-weight: 500;
    color: #555;
    margin-bottom: 8px; /* Más espacio */
    font-size: 0.95rem;
}

.budget-amount {
    font-weight: bold;
    font-size: 1.4rem; /* Ligeramente más grande */
}

.budget-item.budget-surplus .budget-amount {
    color: #4CAF50; /* Verde para el excedente */
}
/* --- FIN CORRECCIÓN Budget Summary --- */

/* Grid para los gráficos */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 30px;
    margin-bottom: 20px;
}

/* Contenedor de cada gráfico */
.chart-container {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    /* Quitar altura fija, dejar que el contenido defina la altura */
    /* height: 350px; */ 
    position: relative; 
    min-height: 350px; /* Asegura un espacio mínimo */
}

.chart-container h4 {
    text-align: center;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px; /* Más espacio */
    font-weight: 600;
}

/* Ajuste canvas para ocupar espacio disponible */
.chart-container canvas {
    max-width: 100%;
    max-height: 280px; /* Limita la altura del gráfico en sí */
    margin: 0 auto; /* Centrar el canvas si es más pequeño */
}


/* Nota aclaratoria al final de los bloques */
.transparency-note {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 20px;
    font-style: italic;
}


/* === Responsive === */
@media (max-width: 992px) {
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    }
}


@media (max-width: 768px) {
    .transparency-section {
        padding: 40px 15px;
    }
    .transparency-block {
        padding: 20px;
    }
    .subsection-title {
        font-size: 1.6rem;
    }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablet */
        gap: 15px;
    }
     .kpi-card {
        padding: 20px 15px;
        min-height: 160px; /* Reducir altura mínima */
    }
     .kpi-value {
        font-size: 1.8rem;
    }
    .kpi-label {
        font-size: 0.85rem;
    }
    
    .chart-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 25px;
    }
    .chart-container {
        /* height: 300px; No fija */
        min-height: 300px;
        padding: 20px;
    }
     .chart-container canvas {
        max-height: 240px; 
    }
    .chart-container h4 {
        font-size: 1rem;
    }
    .budget-summary {
        /* Se mantiene flex-wrap, se ajustará solo */
         padding: 20px;
         gap: 15px;
    }
     .budget-item {
        min-width: 120px; /* Reducir ancho mínimo */
    }
     .budget-amount {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
     .kpi-grid {
        grid-template-columns: 1fr; /* Una columna en móvil pequeño */
    }
     .kpi-value {
        font-size: 1.6rem;
    }
    .kpi-card {
        min-height: auto; /* Dejar que el contenido defina la altura */
        padding: 15px;
    }
}