/* ==========================================================================
   DASHBOARD CHARTS - ESTILOS GLOBALES
   Aplicable a todos los componentes de charts del dashboard
   ========================================================================== */

/* ==========================================================================
   1. LAYOUT PRINCIPAL
   ========================================================================== */

/* Container principal de chart + insights */
.chart-insights-container {
    display: flex;
    min-height: 500px;
}

/* Área del gráfico (izquierda en desktop) */
.chart-area {
    flex-grow: 1;
}

/* Panel de insights (derecha en desktop) */
.insights-panel {
    border-left: 1px solid #dee2e6;
    width: 25%;
    min-width: 280px;
}


/* Contenido de insights */
.insights-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   2. MÉTRICAS PRINCIPALES
   ========================================================================== */

/* Container de métricas principales - vertical, cada una ocupa todo el ancho */
.main-metrics-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.main-metric-item {
    width: 100%;
    flex: none;
}

/* ==========================================================================
   3. MÉTRICAS SECUNDARIAS
   ========================================================================== */

/* Grid de métricas secundarias - 2x2 en desktop */
.secondary-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.secondary-metric-item {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   4. RESPONSIVE BREAKPOINTS - MOVIDOS A dashboard-responsive.css
   ========================================================================== */

/* Las reglas responsive se han consolidado en dashboard-responsive.css
   para evitar duplicación y mejorar el mantenimiento */

/* ==========================================================================
   5. UTILIDADES Y MEJORAS ADICIONALES
   ========================================================================== */

/* Altura mínima para todos los gráficos */
.chart-area > div[id*="chart"] {
    min-height: 400px;
}

/* ==========================================================================
   NOTAS DE IMPLEMENTACIÓN
   ========================================================================== */

/* 
COMPONENTES QUE USAN ESTOS ESTILOS:
- emissions-chart.blade.php
- snp-chart.blade.php
- arclim-chart.blade.php  
- huella-comunal-chart.blade.php

FUNCIONALIDAD RESPONSIVE:
- Desktop: gráfico a la izquierda, insights a la derecha
- Mobile: gráfico arriba, insights abajo
- Soporte tanto para flexbox como Bootstrap grid

Para usar estos estilos, incluir en el layout:
<link href="{{ asset('assets/css/dashboard-charts.css') }}" rel="stylesheet">
*/