/* ============================================================
   dash-vendedor.css - Dashboard personalizado del vendedor
   Componentes: greeting, KPIs, meta, status badges,
   top clientes, pedidos recientes
   ============================================================ */

/* === Header / Greeting === */
.dv-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem; flex-wrap: wrap; gap: .75rem;
}
.dv-greeting-title {
  font-size: 1.15rem; font-weight: 700; color: var(--brand-text);
  margin: 0 0 .15rem; display: flex; align-items: center; gap: .4rem;
}
.dv-greeting-sub {
  font-size: .75rem; color: var(--brand-text-muted); margin: 0;
}
.dv-actions {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
}

/* === KPI Grid vendedor === */
.dv-kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.dv-kpi-card {
  background: var(--brand-surface); border-radius: 10px;
  padding: 14px; border: 1px solid var(--brand-border);
  transition: box-shadow .2s, transform .15s;
}
.dv-kpi-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.dv-kpi-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; margin-bottom: 6px;
}
.dv-kpi-icon.green  { background: rgba(147,193,31,.15); color: var(--brand-accent); }
.dv-kpi-icon.blue   { background: rgba(14,165,233,.15); color: var(--brand-info); }
.dv-kpi-icon.amber  { background: rgba(245,158,11,.15); color: var(--brand-warning); }
.dv-kpi-icon.teal   { background: rgba(1,70,81,.15);    color: var(--brand-secondary); }
.dv-kpi-icon.red    { background: rgba(220,38,38,.15);   color: var(--brand-error); }

.dv-kpi-label {
  font-size: .62rem; color: var(--brand-text-muted);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 3px;
}
.dv-kpi-value {
  font-size: 1.1rem; font-weight: 700; color: var(--brand-text);
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === Meta mensual === */
.dv-meta-card {
  background: var(--brand-surface); border-radius: 10px;
  padding: 14px; border: 1px solid var(--brand-border);
  margin-bottom: 14px;
}
.dv-meta-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.dv-meta-label {
  font-size: .72rem; font-weight: 600; color: var(--brand-text);
}
.dv-meta-values {
  font-size: .7rem; color: var(--brand-text-muted); font-weight: 500;
}
.dv-progress-bar {
  height: 10px; background: var(--brand-border); border-radius: 5px;
  overflow: hidden; margin-bottom: 6px;
}
.dv-progress-fill {
  height: 100%; border-radius: 5px; transition: width .6s ease;
}
.dv-progress-fill.dv-complete { background: linear-gradient(90deg, var(--brand-accent), #4ade80); }
.dv-progress-fill.dv-good     { background: linear-gradient(90deg, var(--brand-accent), #93c11f); }
.dv-progress-fill.dv-mid      { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dv-progress-fill.dv-low      { background: linear-gradient(90deg, #ef4444, #f87171); }

.dv-meta-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.dv-meta-pct {
  font-size: .72rem; font-weight: 700;
}
.dv-meta-pct.dv-complete { color: #22c55e; }
.dv-meta-pct.dv-good     { color: var(--brand-accent); }
.dv-meta-pct.dv-low      { color: #ef4444; }
.dv-meta-remaining {
  font-size: .65rem; color: var(--brand-text-muted);
}

/* === Status badges (estado de pedidos) === */
.dv-status-grid {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.dv-status-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px; font-size: .72rem;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
}
.dv-status-badge i { font-size: .7rem; }
.dv-status-badge.amber i { color: var(--brand-warning); }
.dv-status-badge.blue i  { color: var(--brand-info); }
.dv-status-badge.green i { color: var(--brand-accent); }
.dv-status-badge.red i   { color: var(--brand-error); }
.dv-status-badge.teal i  { color: var(--brand-secondary); }

.dv-status-count {
  font-weight: 700; color: var(--brand-text);
}
.dv-status-label {
  color: var(--brand-text-muted); font-weight: 500;
}

/* === Top clientes === */
.dv-clients-list {
  display: flex; flex-direction: column;
}
.dv-client-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--brand-border);
}
.dv-client-row:last-child { border-bottom: none; }
.dv-client-rank {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
  background: var(--brand-accent); color: var(--brand-primary);
  flex-shrink: 0;
}
.dv-client-info { flex: 1; min-width: 0; }
.dv-client-name {
  font-size: .8rem; font-weight: 600; color: var(--brand-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-client-city {
  font-size: .65rem; color: var(--brand-text-muted);
}
.dv-client-stats { text-align: right; flex-shrink: 0; }
.dv-client-total {
  font-size: .78rem; font-weight: 700; color: var(--brand-accent);
}
.dv-client-orders {
  font-size: .62rem; color: var(--brand-text-muted);
}

/* === Pedidos recientes === */
.dv-pedidos-list {
  display: flex; flex-direction: column;
}
.dv-pedido-row {
  padding: 8px 0; border-bottom: 1px solid var(--brand-border);
  transition: background .15s;
}
.dv-pedido-row:hover { background: rgba(0,0,0,.015); }
.dv-pedido-row:last-child { border-bottom: none; }

.dv-pedido-main {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.dv-pedido-consec {
  font-size: .75rem; font-weight: 700; color: var(--brand-text);
  font-family: 'Courier New', monospace;
}
.dv-pedido-estado {
  font-size: .6rem; font-weight: 600; padding: 2px 6px;
  border-radius: 4px; text-transform: capitalize;
}

.dv-pedido-detail {
  display: flex; justify-content: space-between; align-items: center;
}
.dv-pedido-cliente {
  font-size: .72rem; color: var(--brand-text); font-weight: 500;
}
.dv-pedido-total {
  font-size: .72rem; font-weight: 700; color: var(--brand-accent);
}

.dv-pedido-meta {
  display: flex; justify-content: space-between;
  font-size: .62rem; color: var(--brand-text-muted); margin-top: 1px;
}

/* Tag colors (reutiliza del sistema) */
.tag-amber  { background: rgba(245,158,11,.12); color: #b45309; }
.tag-blue   { background: rgba(14,165,233,.12); color: #0369a1; }
.tag-green  { background: rgba(34,197,94,.12);  color: #15803d; }
.tag-teal   { background: rgba(1,70,81,.12);    color: #014651; }
.tag-red    { background: rgba(220,38,38,.12);  color: #b91c1c; }
.tag-muted  { background: rgba(107,114,128,.1); color: #6b7280; }

/* === Skeleton shell === */
.dv-progress-shell {
  margin-bottom: 14px; padding: 14px;
  background: var(--brand-surface); border-radius: 10px;
  border: 1px solid var(--brand-border);
}

/* === Desktop === */
@media (min-width: 769px) {
  .dv-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
  .dv-kpi-card { padding: 18px; border-radius: 12px; }
  .dv-kpi-icon { width: 38px; height: 38px; font-size: 1rem; }
  .dv-kpi-label { font-size: .7rem; }
  .dv-kpi-value { font-size: 1.4rem; }
  .dv-meta-card { padding: 18px; border-radius: 12px; }
  .dv-progress-bar { height: 12px; }
  .dv-greeting-title { font-size: 1.35rem; }
  .dv-status-grid { gap: 10px; }
  .dv-status-badge { padding: 8px 14px; font-size: .78rem; }
}