/* ==========================================================================
   Tarjeta de gráfico (bero_charts.chart_html) — v1, 16/10/2026
   Mismo lenguaje que las tarjetas de Inicio: filete menta, título en mayúsculas
   chicas, subtítulo gris y el gráfico sin título interno.
   ========================================================================== */
.bero-chart {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--bw-radius, 16px);
    overflow: hidden;
    height: 100%;
}
.bero-chart .bchart-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-color);
}
.bero-chart .bchart-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-headers);
}
.bero-chart .bchart-title::before {
    content: ''; width: 4px; height: 16px; border-radius: 2px;
    background: var(--bero-mint, #59C2AB); flex: 0 0 auto;
}
.bero-chart .bchart-sub {
    font-size: .72rem; color: var(--text-muted, #64748B); margin: 2px 0 0 12px;
}
.bero-chart .bchart-body { padding: 6px 8px 4px; }

/* Botonera de Plotly (períodos / escala) con la tipografía de la web */
.js-plotly-plot .updatemenu-button text,
.js-plotly-plot .rangeselector text { font-weight: 700 !important; }

/* Tooltip con esquinas como el resto de la web */
.js-plotly-plot .hoverlayer .hovertext path { stroke-width: 1px; }

/* Muestras de color por entidad (mismo color que la serie en el gráfico) */
.bchart-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.bchart-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--bchart-c, #94A3B8); }
.bchart-c-mep { --bchart-c: #001D3B; }  .bchart-c-ccl { --bchart-c: #59C2AB; }
.bchart-c-oficial { --bchart-c: #E8833A; } .bchart-c-minorista { --bchart-c: #7C5CC4; }
[data-theme="dark"] .bchart-c-mep { --bchart-c: #4F93EC; } [data-theme="dark"] .bchart-c-ccl { --bchart-c: #33A88D; }
[data-theme="dark"] .bchart-c-oficial { --bchart-c: #DA7630; } [data-theme="dark"] .bchart-c-minorista { --bchart-c: #9A78E2; }