/* ═══════════════════════════════════════════════════════════════════
   KPIS.CSS — KPI Cards com anatomia exata do design system _ref2.
   Anatomia: overline → valor clamp → unit → label → delta → sparkline
   Variantes: .kpi-card--featured | .kpi-card--ghost | .kpi-card--sm
   Fonte única de tokens: _ref2/tokens.css via base.css
   ⚠ Nomes de classe preservados — JS bound throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── KPI Grid ─────────────────────────────────────────────────────── */
/* PRESERVED: .kpi-grid — JS renders cards into this container */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, var(--sp-4));
}

@media (min-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════
   KPI CARD BASE
   Anatomia direta do _ref2/data-components.css
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .kpi-card — JS targets this for rendering */
.kpi-card {
  background: var(--color-surface-02);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-6, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-out-quart),
    background var(--duration-base) var(--ease-out-quart);
  animation: fadeIn var(--t-normal, 250ms) both;
}

@media (min-width: 640px) {
  .kpi-card { padding: var(--space-7, 28px); }
}

.kpi-card:hover {
  border-color: var(--color-border-default);
  background: var(--color-surface-03);
}

/* ── Variante: featured — destaque editorial ─────────────────────── */
/* PRESERVED: .kpi-card-featured → legacy; .kpi-card--featured → DS */
.kpi-card--featured,
.kpi-card-featured {
  background: var(--color-surface-03);
  border-color: var(--color-border-default);
}

.kpi-card--featured::before,
.kpi-card-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-6, 24px);
  right: var(--space-6, 24px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* ── Variante: ghost — fundo transparente ────────────────────────── */
/* PRESERVED: .kpi-card-ghost → legacy */
.kpi-card--ghost,
.kpi-card-ghost {
  background: transparent;
  border-color: var(--color-border-subtle);
}

/* ── Variante: sm — compacto para grids densos ───────────────────── */
/* PRESERVED: .kpi-card-sm → legacy; .kpi-card--sm → DS */
.kpi-card--sm,
.kpi-card-sm {
  padding: var(--space-5, 20px);
  gap: var(--space-3, 12px);
}

/* ════════════════════════════════════════════════════════════════════
   ANATOMIA INTERNA — Overline / Header
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .kpi-card-header — layout anchor */
.kpi-card-header,
.kpi-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  min-width: 0;
}

/* Overline — uppercase label acima do valor */
/* PRESERVED: .kpi-card-label — JS writes text into this */
.kpi-card-label,
.kpi-card__overline {
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  overflow-wrap: break-word;
  min-width: 0;
  flex: 1;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
  line-height: 1.3;
}

/* ── Ícone do card — 28×28, monocromático ────────────────────────── */
/* PRESERVED: .kpi-card-icon — JS inserts icon here */
.kpi-card-icon,
.kpi-card__icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-04);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-secondary);
  font-size: 12px;
}

/* PRESERVED: icon color variants — JS sets these classes */
.kpi-icon-primary   { background: rgba(255,255,255,0.06); color: var(--color-text-sub); }
.kpi-icon-success   { background: var(--color-semantic-positive-dim);  color: var(--color-semantic-positive-text); }
.kpi-icon-warning   { background: var(--color-semantic-warning-dim);   color: var(--color-semantic-warning-text); }
.kpi-icon-danger    { background: var(--color-semantic-negative-dim);  color: var(--color-semantic-negative-text); }
.kpi-icon-info      { background: var(--color-semantic-info-dim);      color: var(--color-semantic-info-text); }
.kpi-icon-secondary { background: rgba(167,139,250,0.10);              color: #A78BFA; }
.kpi-icon-neutral   { background: var(--color-surface-04);             color: var(--color-text-secondary); }

/* ════════════════════════════════════════════════════════════════════
   VALOR PRINCIPAL — editorial weight, clamp responsivo
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .kpi-card-value — JS writes numeric value here */
.kpi-card-value,
.kpi-card__value {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: var(--font-weight-light, 300);
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* Variante sm */
.kpi-card--sm .kpi-card__value,
.kpi-card-sm .kpi-card-value {
  font-size: clamp(22px, 4vw, 34px);
}

/* ── Sufixo/unidade ao lado do valor ── */
.kpi-card__unit {
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-text-tertiary);
  letter-spacing: 0;
  margin-left: var(--space-2, 8px);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ── Label descritivo abaixo do valor ── */
/* PRESERVED: .kpi-card__label — DS companion to .kpi-card-label */
.kpi-card__label {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug, 1.22);
  overflow-wrap: break-word;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ════════════════════════════════════════════════════════════════════
   RODAPÉ — microtendência / delta / data
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .kpi-card-footer — JS may append context text here */
.kpi-card-footer,
.kpi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: auto;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-secondary);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
  line-height: 1.4;
}

.kpi-card__date {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-disabled);
  white-space: nowrap;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ── Delta / microtendência ── */
/* PRESERVED: .kpi-delta, .kpi-delta--up/down/warning/info/neutral — JS bound */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}
.kpi-delta--up      { color: var(--color-semantic-positive-text); }
.kpi-delta--down    { color: var(--color-semantic-negative-text); }
.kpi-delta--warning { color: var(--color-semantic-warning-text); }
.kpi-delta--info    { color: var(--color-semantic-info-text); }
.kpi-delta--neutral { color: var(--color-text-disabled); }

.kpi-delta__arrow {
  font-size: 10px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   SPARKLINE INLINE
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .kpi-spark, .kpi-card__spark-area — JS renders charts here */
.kpi-spark {
  width: 100%;
  height: 36px;
  display: block;
  overflow: visible;
}

.kpi-spark--sm { height: 24px; }

.kpi-card__spark-area {
  margin: 0 calc(var(--space-7, 28px) * -1);
  padding: 0 var(--space-7, 28px);
  height: 48px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

@media (min-width: 640px) {
  .kpi-card__spark-area { height: 56px; }
}

/* ════════════════════════════════════════════════════════════════════
   VARIANTES DE BORDA ESQUERDA (legacy — dashboard padrão)
   PRESERVED: all border-left variant names — JS bound
   ════════════════════════════════════════════════════════════════════ */

.kpi-card { border-left: 2px solid transparent; }

.kpi-card-primary   { border-left-color: rgba(255, 255, 255, 0.35); }
.kpi-card-success   { border-left-color: var(--color-semantic-positive-text); }
.kpi-card-warning   { border-left-color: var(--color-semantic-warning-text); }
.kpi-card-danger    { border-left-color: var(--color-semantic-negative-text); }
.kpi-card-info      { border-left-color: var(--color-semantic-info-text); }
.kpi-card-secondary { border-left-color: #A78BFA; }
.kpi-card-neutral   { border-left-color: var(--color-border-default); }

/* ════════════════════════════════════════════════════════════════════
   SKELETON PLACEHOLDERS
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .kpi-skeleton, .kpi-skeleton-value — JS renders these while loading */
.kpi-skeleton {
  background: var(--color-surface-02);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-6, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.kpi-skeleton-value {
  height: 28px;
  border-radius: var(--radius-sm, 4px);
  background: linear-gradient(90deg,
    var(--color-surface-04) 25%,
    var(--color-surface-05) 50%,
    var(--color-surface-04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  width: 60%;
}

/* PRESERVED: .skeleton-line — JS uses these */
.skeleton-line {
  height: 10px;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(90deg,
    var(--color-surface-04) 25%,
    var(--color-surface-05) 50%,
    var(--color-surface-04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line.short  { width: 38%; }
.skeleton-line.medium { width: 62%; height: 22px; }
.skeleton-line.long   { width: 88%; }

/* ════════════════════════════════════════════════════════════════════
   TREND BADGE (utilitário de dados)
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .trend-badge + variants — may be used in KPI footers */
.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  padding: 2px var(--space-3, 12px);
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.trend-badge--up {
  background: var(--color-semantic-positive-dim);
  color: var(--color-semantic-positive-text);
  border: 1px solid var(--color-semantic-positive-border);
}
.trend-badge--down {
  background: var(--color-semantic-negative-dim);
  color: var(--color-semantic-negative-text);
  border: 1px solid var(--color-semantic-negative-border);
}
.trend-badge--warning {
  background: var(--color-semantic-warning-dim);
  color: var(--color-semantic-warning-text);
  border: 1px solid var(--color-semantic-warning-border);
}
.trend-badge--info {
  background: var(--color-semantic-info-dim);
  color: var(--color-semantic-info-text);
  border: 1px solid var(--color-semantic-info-border);
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS — Mobile-first
   ════════════════════════════════════════════════════════════════════ */

/* ── ≤1024 px — Tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
  /* KPI grid: 3 colunas no máximo */
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }

  /* KPI card: valor ligeiramente menor */
  .kpi-card-value,
  .kpi-card__value { font-size: clamp(24px, 4vw, 38px); }
}

/* ── ≤768 px — Tablet portrait ────────────────────────────────────── */
@media (max-width: 768px) {
  /* KPI grid: 2 colunas */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  /* KPI card: padding reduzido */
  .kpi-card     { padding: var(--space-5, 20px); gap: var(--space-3, 12px); }
  .kpi-card--sm,
  .kpi-card-sm  { padding: var(--space-4, 16px); gap: var(--space-2, 8px); }

  /* Valor principal */
  .kpi-card-value,
  .kpi-card__value { font-size: clamp(22px, 5vw, 32px); }

  /* Spark area: reduzir altura */
  .kpi-card__spark-area { height: 40px; }

  /* Footer: empilhar se necessário */
  .kpi-card-footer,
  .kpi-card__footer { padding-top: var(--space-3, 12px); gap: var(--space-2, 8px); }
}

/* ── ≤480 px — Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* KPI grid: 2 colunas em mobile */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3, 12px); }

  /* KPI card: padding compacto */
  .kpi-card     { padding: var(--space-4, 16px) var(--space-3, 12px); gap: var(--space-2, 8px); }
  .kpi-card--sm,
  .kpi-card-sm  { padding: var(--space-3, 12px); gap: var(--space-2, 8px); }

  /* Valor: usar clamp para escalar com largura */
  .kpi-card-value,
  .kpi-card__value { font-size: clamp(20px, 6vw, 28px); letter-spacing: -0.02em; }

  /* Variante sm */
  .kpi-card--sm .kpi-card__value,
  .kpi-card-sm .kpi-card-value { font-size: clamp(17px, 5vw, 24px); }

  /* Overline */
  .kpi-card-label,
  .kpi-card__overline { font-size: 9px; letter-spacing: 0.09em; }

  /* Ícone do card */
  .kpi-card-icon,
  .kpi-card__icon { width: 24px; height: 24px; min-width: 24px; font-size: 11px; }

  /* Delta */
  .kpi-delta { font-size: 10px; }

  /* Footer */
  .kpi-card-footer,
  .kpi-card__footer { padding-top: var(--space-3, 12px); font-size: 10px; }

  /* Spark area: ocultar em mobile pequeno para ganhar espaço */
  .kpi-card__spark-area { height: 32px; }
  .kpi-spark            { height: 28px; }

  /* Skeleton: reduzir */
  .kpi-skeleton { padding: var(--space-4, 16px); gap: var(--space-2, 8px); }
  .kpi-skeleton-value { height: 22px; }
}

/* ── ≤360 px — Small mobile ───────────────────────────────────────── */
@media (max-width: 360px) {
  /* KPI grid: 1 coluna em telas muito pequenas */
  .kpi-grid { grid-template-columns: 1fr; }

  /* Com 1 coluna o valor pode crescer */
  .kpi-card-value,
  .kpi-card__value { font-size: clamp(26px, 7vw, 34px); }

  .kpi-card { padding: var(--space-4, 16px); }

  /* Ocultar spark area para economizar espaço */
  .kpi-card__spark-area { display: none; }
}

/* ── Touch: ajustes de interação ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .kpi-card:hover {
    border-color: var(--color-border-subtle);
    background:   var(--color-surface-02);
  }
}