/* Estilos del contenido HTML que devuelve el chat de datos (DataChat).
   Las clases las emite el LLM: ai-table, ai-note, echarts-chart, más el
   toggle chart/tabla que arma ai-renderers.js. */

.sf-ai-html { font-size: .9rem; color: #212529; line-height: 1.5; }
.sf-ai-html h4 { margin: .6rem 0 .35rem; font-size: .95rem; color: #0b1320; }
.sf-ai-html p { margin: .35rem 0; }
.sf-ai-html ul { margin: .35rem 0; padding-left: 1.2rem; }
.sf-ai-html strong { color: #0b1320; }

/* Tablas */
.ai-table { border-collapse: collapse; width: 100%; margin: .5rem 0; font-size: .82rem; }
.ai-table th, .ai-table td { border: 1px solid #e3e8ef; padding: 5px 9px; text-align: left; }
.ai-table th { background: #f1f5fb; color: #1d2b4a; font-weight: 600; }
.ai-table tr:nth-child(even) td { background: #fafbfd; }

/* Notas / avisos */
.ai-note { margin: .5rem 0; padding: 8px 12px; border-radius: 8px; font-size: .84rem; border: 1px solid transparent; }
.ai-note.info    { background: #eef5ff; border-color: #cfe0ff; color: #1d4ed8; }
.ai-note.warn    { background: #fff7ed; border-color: #fed7aa; color: #b45309; }
.ai-note.success { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }

.ai-empty { color: #6b7280; font-size: .82rem; font-style: italic; padding: 8px 0; }

/* Gráfico ECharts */
.echarts-chart { width: 100%; min-height: 320px; margin: .5rem 0; }

/* Toggle chart/tabla */
.chart-with-toggle { margin: .5rem 0; }
.chart-toggle-controls { display: flex; gap: 6px; margin-bottom: 6px; }
.chart-view-btn {
    border: 1px solid #d4dbe6; background: #fff; color: #475569;
    border-radius: 7px; padding: 3px 10px; font-size: .76rem; cursor: pointer;
}
.chart-view-btn.active { background: linear-gradient(135deg, #38bdf8, #1d4ed8); color: #fff; border-color: transparent; }
.chart-view { display: none; }
.chart-view.active { display: block; }
.table-view { display: none; max-height: 320px; overflow: auto; }
.table-view.active { display: block; }