/* ==========================================================================
   Card system — shared visual language for every card on the site
   (reference: the pill-bar "Economia do mês" direction described for the
   hero mockup). Loaded by every page except admin.html.

   Only uses CSS custom properties already defined per-page's :root
   (--paper, --paper-card, --ink, --ink-soft, --line, --emerald,
   --emerald-soft, --rust, --ochre, --neutral-a, --slate, ...). No new
   colors are introduced here.

   Classes are additive utilities — apply alongside a component's own
   class (e.g. class="dash-card card card--clickable"), never replace
   component classes outright, so page-specific layout rules keep working.
   ========================================================================== */

.card{
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: none;
}

.card--sm{
  border-radius: 16px;
  padding: 16px;
}

.card--clickable{
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card--clickable:hover{
  border-color: var(--ink-soft);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  .card--clickable{ transition: none; }
  .card--clickable:hover{ transform: none; }
}

.card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title{
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card-chevron{
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.card-value{
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.card-value .cents{ font-size: 0.55em; }

.card-value-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Variação ao lado do valor — texto colorido simples, sem badge/fundo */
.card-delta{
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: none;
}
.card-delta.up{ color: var(--emerald); }
.card-delta.down{ color: var(--rust); }

.card-label{
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Pill elements ---------- */

/* Barra horizontal em pílula (ex: gráfico de barras, progresso, trilha
   dos baldes). Aplicar em cada barra individual; o preenchimento usa uma
   cor sólida (var(--emerald) etc.) ou --line pra estado neutro. */
.pill-bar{
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

/* Tag pequena de pílula, cantos totalmente arredondados (ex:
   "Necessário"/"Impulso" no dia a dia) */
.pill-tag{
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* Estado vazio/futuro — círculo tracejado, sem preenchimento */
.pill-empty{
  border-radius: 999px;
  border: 1.5px dashed var(--line);
  background: transparent;
}