/**
 * IMPL_007: Activity Timeline Dashboard - ESTILOS SUPREMOS
 * Panel de control avanzado con visualizaciones profesionales
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE & LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.timeline-dashboard-supreme {
    padding: 1rem;
    background: var(--bg-dark);
    width: 1000px;
    max-width: 950px;
    overflow-y: auto;
    max-height: 75vh;
}

.supreme-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.dashboard-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.chart-card {
    background: var(--bg-medium);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    flex: 1;
    min-width: 200px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.chart-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.chart-card.wide {
    flex: 2;
    min-width: 400px;
}

.chart-card.full-width {
    flex: 1 1 100%;
    min-width: auto;
}

.chart-card h3 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Fila triple equilibrada */
.dashboard-row.triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.dashboard-row.triple .chart-card {
    flex: none;
    min-width: auto;
}

.no-data {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRÁFICOS COMPACTOS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Trend Compact - Sparkline */
.trend-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trend-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 50px;
    padding: 0.25rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.spark-bar {
    flex: 1;
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
    border-radius: 2px 2px 0 0;
    min-height: 3px;
    transition: all 0.2s;
}

.spark-bar:hover {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6);
    transform: scaleY(1.1);
}

.trend-compact-stats {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.compact-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.compact-stat .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.compact-stat .stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.trend-indicator.up { background: rgba(16, 185, 129, 0.2); }
.trend-indicator.up .stat-value { color: #10b981; }
.trend-indicator.down { background: rgba(239, 68, 68, 0.2); }
.trend-indicator.down .stat-value { color: #ef4444; }
.trend-indicator.stable { background: rgba(245, 158, 11, 0.2); }
.trend-indicator.stable .stat-value { color: #f59e0b; }

.trend-compact-footer {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.mini-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background: var(--bg-light);
    color: var(--text-muted);
}

.mini-badge.chat { border-left: 2px solid #8b5cf6; }
.mini-badge.ui { border-left: 2px solid #3b82f6; }

/* Donut Compact V2 - Con textos completos */
.donut-compact-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.donut-mini-v2 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
}

.donut-center-mini-v2 {
    position: absolute;
    inset: 18px;
    background: var(--bg-medium);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-total-v2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.donut-label-v2 {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.donut-legend-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.legend-item-v2 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.legend-item-v2:hover {
    background: var(--bg-light);
}

.legend-dot-v2 {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-icon-v2 {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.legend-text-v2 {
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-count-v2 {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 25px;
    text-align: right;
}

.legend-pct-v2 {
    font-size: 0.65rem;
    color: var(--text-muted);
    min-width: 35px;
}

.legend-more-v2 {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding-top: 0.25rem;
}

/* Hourly Activity Compact */
.hourly-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hourly-bars {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 45px;
    padding: 0.25rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.hourly-bar {
    flex: 1;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-radius: 1px 1px 0 0;
    min-height: 2px;
    transition: all 0.2s;
}

.hourly-bar.peak {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

.hourly-bar:hover {
    filter: brightness(1.2);
}

.hourly-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.hourly-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.hourly-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
    font-size: 0.75rem;
}

.hourly-stat .stat-icon {
    font-size: 0.8rem;
}

.hourly-stat .stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

.hourly-stat .stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.hourly-stat.peak {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.hourly-footer {
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.hour-badge {
    display: inline-block;
    padding: 0.15rem 0.3rem;
    background: var(--bg-light);
    border-radius: 3px;
    margin: 0 0.1rem;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
}

.stat-card {
    background: var(--bg-medium);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
}

.stat-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.kpi-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-light);
    flex-shrink: 0;
}

.kpi-content {
    flex: 1;
    min-width: 0;
}

.kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-sublabel {
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.kpi-trend {
    font-size: 0.65rem;
    margin-top: 0.1rem;
    font-weight: 600;
}

.kpi-trend.positive { color: var(--color-success); }
.kpi-trend.negative { color: var(--color-error); }

/* KPI Colors */
.stat-card.kpi-blue .kpi-icon { background: rgba(59, 130, 246, 0.2); }
.stat-card.kpi-green .kpi-icon { background: rgba(16, 185, 129, 0.2); }
.stat-card.kpi-purple .kpi-icon { background: rgba(139, 92, 246, 0.2); }
.stat-card.kpi-orange .kpi-icon { background: rgba(245, 158, 11, 0.2); }
.stat-card.kpi-teal .kpi-icon { background: rgba(20, 184, 166, 0.2); }
.stat-card.kpi-pink .kpi-icon { background: rgba(236, 72, 153, 0.2); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TREND CHART
   ═══════════════════════════════════════════════════════════════════════════════ */

.trend-chart {
    height: 200px;
    display: flex;
    flex-direction: column;
}

.trend-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 0 0.5rem;
}

.trend-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-bar-stack {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
}

.trend-bar-chat {
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.5s ease;
}

.trend-bar-ui {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-radius: 3px 3px 0 0;
    transition: height 0.5s ease;
}

.trend-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.trend-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.chat { background: #8b5cf6; }
.legend-color.ui { background: #3b82f6; }

/* ═══════════════════════════════════════════════════════════════════════════════
   DONUT CHART
   ═══════════════════════════════════════════════════════════════════════════════ */

.donut-chart-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.donut-chart {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--bg-medium);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.donut-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-name {
    flex: 1;
    color: var(--text-secondary);
}

.legend-value {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SOURCE COMPARISON (Chat vs UI)
   ═══════════════════════════════════════════════════════════════════════════════ */

.source-comparison {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.source-visual {
    display: flex;
    justify-content: center;
}

.source-circle {
    width: 140px;
    height: 140px;
    position: relative;
}

.source-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.source-bg {
    fill: none;
    stroke: var(--bg-light);
    stroke-width: 10;
}

.source-chat {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.source-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.source-pct {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #8b5cf6;
}

.source-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.source-stats {
    display: flex;
    gap: 1rem;
}

.source-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-light);
}

.source-stat.chat { border-left: 3px solid #8b5cf6; }
.source-stat.ui { border-left: 3px solid #3b82f6; }

.source-icon {
    font-size: 1.5rem;
}

.source-info {
    display: flex;
    flex-direction: column;
}

.source-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.source-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.source-insight {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEATMAP
   ═══════════════════════════════════════════════════════════════════════════════ */

.heatmap-container {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.heatmap-hours {
    display: flex;
    padding-left: 35px;
    font-size: 0.6rem;
}

.heatmap-hours span {
    flex: 1;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heatmap-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.heatmap-day {
    width: 35px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    padding-right: 5px;
}

.heatmap-cell {
    flex: 1;
    height: 20px;
    border-radius: 3px;
    background: var(--bg-light);
    cursor: pointer;
    transition: transform 0.2s;
}

.heatmap-cell:hover {
    transform: scale(1.2);
    z-index: 1;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.heatmap-scale {
    display: flex;
    gap: 2px;
}

.heatmap-scale div {
    width: 16px;
    height: 12px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   USER RANKING
   ═══════════════════════════════════════════════════════════════════════════════ */

.user-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--bg-light);
}

.ranking-medal {
    font-size: 1.25rem;
    width: 30px;
    text-align: center;
}

.ranking-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ranking-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.ranking-bar {
    height: 6px;
    background: var(--bg-medium);
    border-radius: 3px;
    overflow: hidden;
}

.ranking-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
    position: relative;
    transition: width 0.5s ease;
}

.ranking-chat {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #8b5cf6;
    border-radius: 0 3px 3px 0;
}

.ranking-stats {
    text-align: right;
}

.ranking-total {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
}

.ranking-chat-pct {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SESSION STATS
   ═══════════════════════════════════════════════════════════════════════════════ */

.session-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.session-card {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.session-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.session-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.session-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NOTES STATS
   ═══════════════════════════════════════════════════════════════════════════════ */

.notes-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.notes-summary {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 10px;
}

.notes-kpi {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.notes-kpi-icon {
    font-size: 1.5rem;
}

.notes-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.notes-kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notes-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.notes-category {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 1rem;
}

.notes-category h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.notes-category .category-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: -0.5rem 0 0.75rem 0;
    font-style: italic;
}

.notes-mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notes-stat {
    background: var(--bg-medium);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    min-width: 70px;
    flex: 1;
}

.notes-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.notes-stat .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.notes-stat.highlight-chat {
    background: linear-gradient(135deg, #8b5cf640, #8b5cf620);
    border: 1px solid #8b5cf650;
}

.notes-stat.highlight-chat .stat-value {
    color: #8b5cf6;
}

.notes-stat.success {
    background: linear-gradient(135deg, #10b98140, #10b98120);
    border: 1px solid #10b98150;
}

.notes-stat.success .stat-value {
    color: #10b981;
}

.notes-stat.danger {
    background: linear-gradient(135deg, #ef444440, #ef444420);
    border: 1px solid #ef444450;
}

.notes-stat.danger .stat-value {
    color: #ef4444;
}

.notes-total-bar {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notes-total-bar .mini-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
}

.notes-total-bar .mini-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--bar-width, 0%);
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.notes-top-users {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 1rem;
}

.notes-top-users h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.top-users-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--bg-medium);
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.user-chip.gold {
    background: linear-gradient(135deg, #ffd70040, #ffd70020);
    border: 1px solid #ffd70060;
    color: #ffd700;
}

.user-chip.silver {
    background: linear-gradient(135deg, #c0c0c040, #c0c0c020);
    border: 1px solid #c0c0c060;
    color: #a0a0a0;
}

.user-chip.bronze {
    background: linear-gradient(135deg, #cd7f3240, #cd7f3220);
    border: 1px solid #cd7f3260;
    color: #cd7f32;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EVENTS TABLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.events-table-wrapper {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.events-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.events-table th {
    position: sticky;
    top: 0;
    background: var(--bg-medium);
    padding: 0.75rem;
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    z-index: 1;
}

.events-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.events-table tr:hover td {
    background: var(--bg-light);
}

.event-type {
    background: var(--bg-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--accent-primary);
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chat-pct {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.chat-pct.high { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.chat-pct.medium { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.chat-pct.low { background: var(--bg-light); color: var(--text-muted); }

.mini-bar {
    width: 80px;
    height: 6px;
    background: var(--bg-light);
    border-radius: 3px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RECENT EVENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.recent-events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 350px;
    overflow-y: auto;
}

.recent-event {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-light);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.recent-event:hover {
    background: var(--bg-dark);
}

.recent-event.via-chat {
    border-left: 3px solid #8b5cf6;
}

.recent-event.via-ui {
    border-left: 3px solid #3b82f6;
}

.event-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 45px;
}

.event-icon {
    font-size: 1rem;
}

.event-user {
    color: var(--accent-primary);
    font-weight: 500;
    min-width: 80px;
}

.event-title {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-badge {
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */

.dashboard-footer {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-medium);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-left, .footer-right {
    display: flex;
    gap: 1.5rem;
}

.auto-refresh-badge {
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-success);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR & LOADING
   ═══════════════════════════════════════════════════════════════════════════════ */

.dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1000px;
    height: 500px;
    gap: 1rem;
}

.loading-pulse {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.dashboard-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    text-align: center;
}

.dashboard-error .error-icon {
    font-size: 3rem;
}

.dashboard-error h3 {
    color: var(--color-error);
    margin: 0;
}

.dashboard-error p {
    color: var(--text-muted);
    margin: 0;
}

.dashboard-error button {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Ajustado para 900px fijo
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1050px) {
    .timeline-dashboard-supreme {
        width: 100%;
        max-width: 100%;
    }
    
    .dashboard-loading {
        width: 100%;
    }
    
    .chart-card.wide {
        flex: 1 1 100%;
        min-width: auto;
    }
    
    .donut-chart-container {
        flex-direction: column;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NUEVOS PANELES ENRIQUECIDOS - IMPL_007 v2.3
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Panel sin datos */
.no-data-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.no-data-panel .no-data-icon {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.no-data-panel p {
    margin: 0;
    font-style: italic;
}

.no-data-panel.success {
    color: var(--color-success);
}

.no-data-panel.success .no-data-icon {
    opacity: 1;
}

.no-data-panel .success-message {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHAT ANALYTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.chat-analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.chat-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.chat-kpi .kpi-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.chat-kpi .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chat-kpi .kpi-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.chat-kpi.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Comparación de longitudes */
.chat-lengths {
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.length-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.length-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.length-item .length-label {
    min-width: 120px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.length-item .length-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
}

.length-item .length-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--width);
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.length-item.user .length-bar::after {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.length-item.ai .length-bar::after {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.length-item .length-value {
    min-width: 80px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

/* Sección de modelos */
.models-section,
.intents-section {
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.models-section h4,
.intents-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.model-bars {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.model-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.model-bar-item .model-name {
    min-width: 100px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-bar-item .model-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    overflow: hidden;
}

.model-bar-item .model-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.model-bar-item .model-count {
    min-width: 30px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

/* Tags de intents */
.intent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.intent-tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-dark);
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Extras del chat */
.chat-extras {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.extra-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VOICE ANALYTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.voice-analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.voice-kpis {
    display: flex;
    gap: 0.5rem;
}

.voice-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.voice-kpi.big {
    flex: 1.5;
}

.voice-kpi .kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.voice-kpi .kpi-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.voice-stats {
    display: flex;
    gap: 0.5rem;
}

.voice-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
    text-align: center;
}

.voice-stat .stat-icon {
    font-size: 1rem;
}

.voice-stat .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.voice-stat .stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.voice-stat.highlight {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Idiomas */
.languages-section {
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.languages-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.language-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lang-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    background: var(--bg-dark);
    border-radius: 4px;
    color: var(--text-secondary);
}

.voice-footer {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEARNING ANALYTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.learning-analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.learning-kpis {
    display: flex;
    gap: 0.5rem;
}

.learning-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.learning-kpi.big {
    flex: 1.5;
}

.learning-kpi .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.learning-kpi .kpi-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.learning-kpi.success { background: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.3); }
.learning-kpi.warning { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.3); }
.learning-kpi.danger { background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3); }

/* Barra de calificaciones */
.ratings-bar {
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.ratings-bar h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ratings-stacked-bar {
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-dark);
}

.rating-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.rating-segment.again { background: linear-gradient(180deg, #ef4444, #dc2626); }
.rating-segment.hard { background: linear-gradient(180deg, #f59e0b, #d97706); }
.rating-segment.good { background: linear-gradient(180deg, #10b981, #059669); }
.rating-segment.easy { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }

.ratings-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
}

.ratings-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
}

/* Estados de tarjetas */
.card-states {
    display: flex;
    gap: 0.5rem;
}

.card-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.card-state .state-icon {
    font-size: 1.25rem;
}

.card-state .state-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-state .state-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.card-state.mastered { border-left: 3px solid #f59e0b; }
.card-state.learning { border-left: 3px solid #3b82f6; }
.card-state.new { border-left: 3px solid #10b981; }

.learning-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   POLISH ANALYTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.polish-analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.polish-kpis {
    display: flex;
    gap: 0.5rem;
}

.polish-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.polish-kpi.big {
    flex: 1.5;
}

.polish-kpi .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.polish-kpi .kpi-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.polish-kpi.success {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Cambio de longitud */
.length-change {
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.length-change h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.length-change-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.length-before, .length-after {
    padding: 0.25rem 0.5rem;
    background: var(--bg-dark);
    border-radius: 4px;
    color: var(--text-secondary);
}

.length-arrow {
    font-weight: 700;
}

.length-arrow.expand { color: #10b981; }
.length-arrow.compress { color: #3b82f6; }

/* Tipos de transformación */
.transform-types {
    display: flex;
    gap: 0.5rem;
}

.transform-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
    text-align: center;
    opacity: 0.5;
}

.transform-type.active {
    opacity: 1;
    background: var(--bg-dark);
}

.transform-type .type-icon {
    font-size: 1rem;
}

.transform-type .type-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.transform-type .type-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Categorías de polish */
.categories-section {
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.categories-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.polish-cat-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    background: var(--bg-dark);
    border-radius: 4px;
    color: var(--text-secondary);
}

.polish-footer {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MESSAGE ANALYTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.message-analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message-kpis {
    display: flex;
    gap: 0.5rem;
}

.message-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.message-kpi .kpi-icon {
    font-size: 1.25rem;
}

.message-kpi .kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.message-kpi .kpi-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.message-kpi.sent { border-left: 3px solid #3b82f6; }
.message-kpi.received { border-left: 3px solid #10b981; }
.message-kpi.success { background: rgba(16, 185, 129, 0.2); }
.message-kpi.warning { background: rgba(245, 158, 11, 0.2); }
.message-kpi.danger { background: rgba(239, 68, 68, 0.2); }

/* Estadísticas de contenido */
.message-content-stats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.content-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.content-stat .stat-label {
    color: var(--text-muted);
}

.content-stat .stat-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Usuarios */
.message-users {
    display: flex;
    gap: 0.5rem;
}

.users-stat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
}

.users-stat .users-icon {
    font-size: 1rem;
}

.users-stat .users-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.users-stat .users-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.message-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR ANALYTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.error-analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.error-main-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-align: center;
}

.error-main-kpi .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.error-main-kpi .kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.error-main-kpi .kpi-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.error-main-kpi.warning {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.error-main-kpi.danger {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Desglose de errores */
.error-breakdown {
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.error-breakdown h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.error-bars {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.error-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-bar-item .error-cat {
    min-width: 90px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.error-bar-item .error-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
}

.error-bar-item .error-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 4px;
}

.error-bar-item .error-count {
    min-width: 30px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
}

/* Info adicional */
.error-info {
    display: flex;
    gap: 0.5rem;
}

.error-info-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
    text-align: center;
}

.error-info-item .info-icon {
    font-size: 1rem;
}

.error-info-item .info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.error-info-item .info-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.error-info-item.offline {
    background: rgba(107, 114, 128, 0.2);
}

/* Modelo con fallos */
.failing-model {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
}

.failing-model .model-label {
    color: var(--text-muted);
}

.failing-model .model-name {
    font-weight: 600;
    color: #f59e0b;
}

.failing-model .model-count {
    color: var(--text-muted);
}

.error-footer {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI INSIGHTS SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.insights-card {
    background: linear-gradient(135deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--accent-primary);
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.insights-card * {
    max-width: 100%;
    box-sizing: border-box;
}

.insights-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), #8b5cf6, #ec4899, var(--accent-primary));
    background-size: 200% 100%;
    animation: gradient-shift 3s linear infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.ai-insights-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    overflow: hidden;
}

/* Header */
.insights-header {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* Header compacto (sin selector de modelo) */
.insights-header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-radius: 10px;
    gap: 1rem;
    flex-wrap: wrap;
}

.insights-title-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insights-title-compact .insights-icon {
    font-size: 1.5rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

.insights-title-compact h3 {
    margin: 0;
    font-size: 1.1rem;
    border: none;
    padding: 0;
    background: linear-gradient(90deg, var(--accent-primary), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insights-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.insights-title .insights-icon {
    font-size: 1.75rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.5)); }
    50% { filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.8)); }
}

.insights-title h3 {
    margin: 0;
    font-size: 1.25rem;
    border: none;
    padding: 0;
    background: linear-gradient(90deg, var(--accent-primary), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insights-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insights-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Controls */
.insights-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 10px;
    flex-wrap: wrap;
}

.model-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.model-selector label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.insights-select {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.insights-select:hover {
    border-color: var(--accent-primary);
}

.insights-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.generate-insights-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.generate-insights-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.generate-insights-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.generate-insights-btn .btn-icon {
    font-size: 1.1rem;
}

.generate-insights-btn .btn-icon.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Result container */
.insights-result {
    min-height: 200px;
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Placeholder */
.insights-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.insights-placeholder .placeholder-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.insights-placeholder p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.insights-placeholder .placeholder-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Loading */
.insights-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--accent-primary);
    animation: pulse-ring 1.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.loading-animation .loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.insights-loading p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.insights-loading .loading-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Content */
.insights-content {
    padding: 1rem;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.insights-meta {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.meta-item {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    background: var(--bg-dark);
    border-radius: 4px;
}

.insights-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 100%;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.insights-text h2.insight-h2 {
    font-size: 1.3rem;
    margin: 1.5rem 0 1rem;
    color: var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
    padding-bottom: 0.5rem;
}

.insights-text h3.insight-h3 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.75rem;
    color: var(--text-primary);
}

.insights-text h4.insight-h4 {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
    color: var(--text-secondary);
}

.insights-text p {
    margin: 0.5rem 0;
}

.insights-text ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.insights-text li {
    margin: 0.3rem 0;
}

.insights-text li.numbered {
    list-style: decimal;
}

.insights-text strong {
    color: var(--accent-primary);
}

/* Actions */
.insights-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--bg-medium);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.action-btn.copy:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

.action-btn.regenerate:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* Error */
.insights-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.insights-error .error-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.insights-error p {
    margin: 0;
    font-size: 1rem;
    color: var(--color-error);
    font-weight: 500;
}

.insights-error .error-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.insights-error .retry-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}