/* ==========================================
   DASHBOARD.CSS — Dashboard Styles
   ========================================== */

/* KPI Grid */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card {
    background: var(--bg-glass); backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; position: relative; overflow: hidden;
    transition: var(--transition);
}
.kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #c41e2f, #d4a017);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(196,30,47,0.3); }
.kpi-card.success::before { background: linear-gradient(90deg, var(--success), #34d399); }
.kpi-card.warning::before { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.kpi-card.danger::before { background: linear-gradient(90deg, var(--danger), #f87171); }
.kpi-card.info::before { background: linear-gradient(90deg, var(--accent), #22d3ee); }

.kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kpi-icon { font-size: 1.5rem; opacity: 0.8; }
.kpi-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 1.8rem; font-weight: 800; color: var(--text); animation: countUp 0.6s ease-out; }
.kpi-change { font-size: 0.78rem; margin-top: 4px; }
.kpi-change.up { color: var(--success); }
.kpi-change.down { color: var(--danger); }

/* Chart Grid */
.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
.chart-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
}
.chart-card h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 16px; }
.chart-container { position: relative; width: 100%; min-height: 280px; }

/* Dashboard Dollar Widget */
.dashboard-dollar {
    background: linear-gradient(135deg, rgba(196,30,47,0.1), rgba(212,160,23,0.1));
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; margin-bottom: 24px;
}
.dashboard-dollar h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; }
.dollar-rates { display: flex; gap: 20px; flex-wrap: wrap; }
.dollar-rate-card {
    flex: 1; min-width: 140px; background: var(--bg-surface-2);
    border-radius: var(--radius); padding: 14px; text-align: center;
}
.dollar-rate-card .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dollar-rate-card .price { font-size: 1.4rem; font-weight: 800; margin: 4px 0; }
.dollar-rate-card .price.oficial { color: var(--success); }
.dollar-rate-card .price.blue { color: var(--accent); }
.dollar-rate-card .sub { font-size: 0.75rem; color: var(--text-muted); }

/* Top Products */
.top-products { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product-rank-list { list-style: none; }
.product-rank-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.product-rank-item:last-child { border-bottom: none; }
.rank-number {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.rank-number.gold { background: rgba(245,158,11,0.2); color: var(--warning); }
.rank-number.silver { background: rgba(148,163,184,0.2); color: var(--text-secondary); }
.rank-number.bronze { background: rgba(180,83,9,0.2); color: #b45309; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-qty { font-size: 0.78rem; color: var(--text-muted); }