/* =====================================================
   Analytics - Unificación visual con Dashboard MJH
   Paleta y componentes alineados a styles.css/dashboard_mjh_styles.css
   Se aplica solo a #page-analytics y #dashboard-container
   ===================================================== */

#page-analytics, #dashboard-container {
    --an-bg: #ffffff;
    --an-surface: #ffffff;
    --an-surface-2: #f8f9fa;
    --an-border: #e9ecef;
    --an-text: #212529;
    --an-muted: #6c757d;
    --an-accent: #dc3545;
    --an-accent-2: #c82333;
    --an-radius: 12px;
    --an-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--an-bg);
    color: var(--an-text);
}

/* Header de tarjeta como Dashboard */
#page-analytics .app-header,
#dashboard-container .da-header,
#dashboard-container .analytics-header { /* compat con distintos headers */
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius);
    padding: 16px 24px;
    margin: 12px;
    box-shadow: var(--an-shadow);
    position: relative;
    overflow: hidden;
}
#page-analytics .app-header::before,
#dashboard-container .da-header::before,
#dashboard-container .analytics-header::before {
    content: '';
    position: absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(135deg, var(--an-accent), var(--an-accent-2));
    border-radius: var(--an-radius) var(--an-radius) 0 0;
}

/* Tipografías y colores */
#dashboard-container .da-header-left h1,
#dashboard-container .analytics-title-section h1 { color: var(--an-text); }
#dashboard-container .da-header-left p,
#dashboard-container .analytics-subtitle { color: var(--an-muted); }

/* Tarjetas y contenedores */
#dashboard-container .da-card,
#dashboard-container .da-kpi,
#dashboard-container .metric-card,
#dashboard-container .chart-card,
#dashboard-container .insight-card,
#dashboard-container .stats-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius);
    box-shadow: var(--an-shadow);
}
#dashboard-container .da-card::before,
#dashboard-container .da-kpi::before,
#dashboard-container .chart-card::before { background: linear-gradient(135deg, var(--an-accent), var(--an-accent-2)); }

/* Títulos de sección al estilo dashboard */
#dashboard-container .da-section-header h2,
#dashboard-container .section-header h2 {
    color: var(--an-text);
}

/* Botones coherentes */
#dashboard-container .btn,
#page-analytics .btn { 
    background: var(--an-accent); color:#fff; border: 1px solid var(--an-accent); border-radius: 8px;
}
#dashboard-container .btn:hover,
#page-analytics .btn:hover { background: var(--an-accent-2); }

/* Tarjetas KPI (color y sombras suaves) */
#dashboard-container .da-kpi:hover,
#dashboard-container .metric-card:hover,
#dashboard-container .chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: var(--an-accent);
}

/* Colores de textos secundarios en gráficos/listas */
#dashboard-container .da-intent-sub,
#dashboard-container .da-badge,
#dashboard-container .detailed-stats .stat-label,
#dashboard-container .analytics-subtitle { color: var(--an-muted); }

/* Fondos de áreas */
#dashboard-container, #page-analytics { padding: 12px; }

/* Scroll y responsive sutil */
#dashboard-container::-webkit-scrollbar { width: 8px; }
#dashboard-container::-webkit-scrollbar-thumb { background: var(--an-border); border-radius: 4px; }

@media (max-width: 900px) {
    #dashboard-container { padding: 8px; }
}