/* ═══════════════════════════════════════════════════════════
   dashboard.css — KPIs, cards, saldo, gás, prog, donut, gauge
   ═══════════════════════════════════════════════════════════ */

/* ── KPI GRID ────────────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.kpi {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--tr), box-shadow var(--tr);
  animation:fadeUp .4s ease both;
  cursor:pointer;
}
.kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.kpi::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:3px 3px 0 0;
}
.kpi.cg::before { background:var(--green); }
.kpi.cr::before { background:var(--rose);  }
.kpi.ct::before { background:var(--teal);  }
.kpi.ca::before { background:var(--amber); }

.kpi:nth-child(1) { animation-delay:.04s; }
.kpi:nth-child(2) { animation-delay:.08s; }
.kpi:nth-child(3) { animation-delay:.12s; }
.kpi:nth-child(4) { animation-delay:.16s; }

.kpi-clickable-hint {
  position:absolute; bottom:10px; right:12px;
  font-size:9px; color:var(--text-muted); letter-spacing:.5px;
}
.kpi-icon  { font-size:17px; margin-bottom:11px; }
.kpi-label {
  font-size:10px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;
}
.kpi-value {
  font-family:'Sora',sans-serif; font-size:25px; font-weight:800;
  letter-spacing:-1px; line-height:1; margin-bottom:8px; color:var(--text);
}
.kpi-delta { font-size:11px; display:flex; align-items:center; gap:4px; }

/* ── CARD ────────────────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow);
  transition:background var(--tr), border-color var(--tr);
  animation:fadeUp .4s ease both;
}
.card-title {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700;
  color:var(--text); margin-bottom:3px;
}
.card-sub   { font-size:11px; color:var(--text-muted); margin-bottom:16px; }
.card-clickable {
  cursor:pointer;
  transition:transform var(--tr), box-shadow var(--tr);
}
.card-clickable:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.card-clickable .click-hint {
  font-size:10px; color:var(--green); font-weight:500;
  margin-top:10px; display:flex; align-items:center; gap:5px;
}

/* ── SALDO CARD ──────────────────────────────────────────────────────── */
.saldo-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); text-align:center;
  cursor:pointer;
  transition:transform var(--tr), box-shadow var(--tr);
}
.saldo-card:hover  { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.saldo-val {
  font-family:'Sora',sans-serif; font-size:24px; font-weight:800;
  letter-spacing:-1px; margin:10px 0 6px;
}
.saldo-meta      { font-size:11px; color:var(--text-muted); }
.saldo-breakdown { display:flex; gap:8px; margin-top:8px; justify-content:center; flex-wrap:wrap; }
.saldo-item      { font-size:10px; padding:3px 8px; border-radius:20px; }
.saldo-rec       { background:var(--green-dim); color:var(--green); }
.saldo-desp      { background:var(--rose-dim);  color:var(--rose);  }

/* ── PROGRESS LIST ───────────────────────────────────────────────────── */
.prog-list  { display:flex; flex-direction:column; gap:12px; }
.prog-head  { display:flex; justify-content:space-between; margin-bottom:5px; }
.prog-name  { font-size:12px; font-weight:500; color:var(--text-soft); }
.prog-val   { font-size:12px; font-weight:700; color:var(--text); font-family:'Sora',sans-serif; }
.prog-track { height:5px; background:var(--surface2); border-radius:10px; overflow:hidden; }
.prog-fill  { height:100%; border-radius:10px; transition:width 1s ease; }

/* ── DONUT LAYOUT ────────────────────────────────────────────────────── */
.dnut { display:flex; align-items:center; gap:18px; }
.leg  { display:flex; flex-direction:column; gap:9px; flex:1; }
.li   { display:flex; align-items:center; gap:8px; font-size:12px; }
.ld   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ll   { flex:1; color:var(--text-soft); }
.lv   { font-weight:700; font-family:'Sora',sans-serif; font-size:12.5px; color:var(--text); }

/* ── GAUGE ───────────────────────────────────────────────────────────── */
.gauge-wrap { text-align:center; padding:6px 0 2px; }
.gauge-val  { font-family:'Sora',sans-serif; font-size:27px; font-weight:800; color:var(--rose); margin-top:-6px; line-height:1; }
.gauge-sub  { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* ── GÁS GRID ────────────────────────────────────────────────────────── */
.gas-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.gas-item { background:var(--surface2); border-radius:var(--radius-sm); padding:12px; text-align:center; }
.gas-val  { font-family:'Sora',sans-serif; font-size:17px; font-weight:700; color:var(--rose); }
.gas-lbl  { font-size:10px; color:var(--text-muted); margin-top:3px; }

/* ── MONTH TABS ──────────────────────────────────────────────────────── */
.month-tabs {
  display:flex; gap:4px; margin-bottom:18px;
  background:var(--surface2); border-radius:var(--radius-sm); padding:4px;
}
.mtab {
  flex:1; text-align:center; padding:8px; border-radius:7px;
  font-size:12px; font-weight:500; cursor:pointer; color:var(--text-soft);
  transition:all var(--tr);
}
.mtab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }