/* ═══════════════════════════════════════════════════════════════════
   KPIS.CSS — KpiGrid e KpiCard.
   ═══════════════════════════════════════════════════════════════════ */

/* ── KPI Grid ────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:     var(--sp-4);
}

/* ── KPI Card ────────────────────────────────────────────────────── */
.kpi-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding:       var(--sp-4) var(--sp-5);
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-2);
  transition:    all var(--t-fast);
  box-shadow:    var(--shadow-xs);
  animation:     fadeIn var(--t-normal) both;
  border-left:   3px solid transparent;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-1px);
}

/* ── Variantes de cor (border-left accent) ───────────────────────── */
.kpi-card-primary   { border-left-color: var(--c-primary); }
.kpi-card-success   { border-left-color: var(--c-success); }
.kpi-card-warning   { border-left-color: var(--c-warning); }
.kpi-card-danger    { border-left-color: var(--c-danger); }
.kpi-card-info      { border-left-color: var(--c-info); }
.kpi-card-secondary { border-left-color: var(--c-secondary); }
.kpi-card-neutral   { border-left-color: var(--c-neutral); }

/* ── Header ──────────────────────────────────────────────────────── */
.kpi-card-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--sp-2);
}
.kpi-card-label {
  font-size:   var(--text-xs);
  font-weight: 600;
  color:       var(--c-text-tertiary);
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height: 1.3;
  flex:        1;
}

/* ── Ícone ───────────────────────────────────────────────────────── */
.kpi-card-icon {
  width:           32px;
  height:          32px;
  min-width:       32px;
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       15px;
  flex-shrink:     0;
}
.kpi-icon-primary   { background:var(--c-primary-light);   color:var(--c-primary); }
.kpi-icon-success   { background:var(--c-success-light);   color:var(--c-success); }
.kpi-icon-warning   { background:var(--c-warning-light);   color:var(--c-warning); }
.kpi-icon-danger    { background:var(--c-danger-light);    color:var(--c-danger); }
.kpi-icon-info      { background:var(--c-info-light);      color:var(--c-info); }
.kpi-icon-secondary { background:var(--c-secondary-light); color:var(--c-secondary); }
.kpi-icon-neutral   { background:var(--c-neutral-light);   color:var(--c-neutral); }

/* ── Valor ───────────────────────────────────────────────────────── */
.kpi-card-value {
  font-size:   var(--text-2xl);
  font-weight: 800;
  color:       var(--c-text-primary);
  line-height: 1.15;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* Skeleton placeholder */
.kpi-skeleton-value {
  height:        28px;
  border-radius: var(--r-md);
  background:    linear-gradient(90deg, var(--c-divider) 25%, var(--c-neutral-light) 50%, var(--c-divider) 75%);
  background-size: 200% 100%;
  animation:     shimmer 1.2s ease-in-out infinite;
  width:         80%;
}

/* ── Footer / sub-texto ──────────────────────────────────────────── */
.kpi-card-footer {
  font-size:  var(--text-xs);
  color:      var(--c-text-tertiary);
  line-height:1.4;
  border-top: 1px solid var(--c-divider);
  padding-top:var(--sp-2);
  margin-top: var(--sp-1);
}

/* ── Skeleton cards (grid) ───────────────────────────────────────── */
.kpi-skeleton {
  background:    var(--c-surface);
  border:        1px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding:       var(--sp-4) var(--sp-5);
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-3);
}
.skeleton-line {
  height:        10px;
  border-radius: var(--r-full);
  background:    linear-gradient(90deg, var(--c-divider) 25%, var(--c-neutral-light) 50%, var(--c-divider) 75%);
  background-size: 200% 100%;
  animation:     shimmer 1.2s ease-in-out infinite;
}
.skeleton-line.short  { width: 40%; }
.skeleton-line.medium { width: 65%; height:22px; }
.skeleton-line.long   { width: 90%; }