/* Layout oficial compacto do card Progresso. */
.tfit-progress-card {
  width: auto;
  margin: 0 16px 14px;
  padding: 12px;
  border: 1px solid rgba(40, 204, 255, .58);
  border-radius: 24px;
  background: radial-gradient(100% 100% at 8% 0%, rgba(22, 63, 119, .44), transparent 52%), linear-gradient(145deg, #07182d, #020914 72%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px rgba(255,255,255,.1), 0 0 18px rgba(28, 124, 255, .13);
}

.tfit-progress-header { align-items: center; margin-bottom: 10px; }
.tfit-progress-heading { display: flex; min-width: 0; align-items: center; gap: 9px; }
.tfit-progress-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(82, 99, 255, .78); border-radius: 12px; background: linear-gradient(145deg, rgba(91,34,177,.7), rgba(7,35,76,.85)); color: #55ddff; font-size: 18px; box-shadow: 0 0 14px rgba(117,71,255,.28); }
.tfit-progress-heading h2 { margin: 0; color: #fff; font-size: 17px; letter-spacing: .05em; line-height: 1; }
.tfit-progress-heading p { margin: 4px 0 0; color: #9baee0; font-size: 10px; line-height: 1; }
.tfit-progress-tabs { flex: 0 0 auto; padding: 2px; border-color: rgba(67, 132, 255, .58); background: rgba(3, 13, 30, .82); }
.tfit-progress-tabs button { min-width: 36px; min-height: 31px; padding: 5px 7px; color: #b9c5ed; font-size: 9px; }
.tfit-progress-tabs button.is-active { background: linear-gradient(115deg, #8e36ef, #4969ff 55%, #18d7ed); box-shadow: 0 0 12px rgba(101, 86, 255, .55); }

.tfit-progress-objective { display: grid; grid-template-columns: 76px minmax(0, 1fr) 83px; align-items: center; gap: 10px; min-height: 100px; padding: 10px; border: 1px solid rgba(42, 133, 255, .38); border-radius: 18px; background: linear-gradient(115deg, rgba(8, 31, 63, .86), rgba(7, 13, 33, .92)); }
.tfit-progress-ring { width: 76px; background: radial-gradient(circle closest-side, #071527 73%, transparent 75% 100%), conic-gradient(from 210deg, #9b4dff 0%, #277fff calc(var(--progress) * .55), #18ddea var(--progress), #193556 0); box-shadow: 0 0 14px rgba(41, 157, 255, .22); }
.tfit-progress-ring b { color: #fff; font-size: 18px; letter-spacing: -.05em; }
.tfit-progress-objective-copy { min-width: 0; }
.tfit-progress-objective-copy small, .tfit-progress-streak small { color: #9baee0; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.tfit-progress-objective-copy strong { display: inline; margin: 3px 4px 0 0; color: #fff; font-size: 26px; letter-spacing: -.06em; line-height: 1; }
.tfit-progress-objective-copy>b { color: #eaf4ff; font-size: 13px; }
.tfit-progress-objective-copy p { margin-top: 4px; color: #17e9e9; font-size: 13px; font-weight: 800; }
.tfit-progress-motivation { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-left: 1px solid rgba(78, 169, 255, .22); color: #a9b7e9; text-align: center; }
.tfit-progress-motivation i { color: #527dff; font-size: 22px; }
.tfit-progress-motivation em { font-size: 9px; line-height: 1.22; }

.tfit-progress-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; overflow: visible; margin-top: 8px; padding: 0; }
.tfit-progress-metric { min-width: 0; min-height: 78px; display: block; padding: 8px; border-color: rgba(57, 132, 255, .34); border-radius: 15px; background: linear-gradient(145deg, rgba(15, 35, 70, .88), rgba(5, 15, 32, .94)); }
.tfit-progress-metric>i { display: inline-grid; width: 24px; height: 24px; margin: 0 0 5px; place-items: center; border-radius: 9px; font-size: 14px; }
.tfit-progress-metric small { min-height: 18px; color: #b7c5e7; font-size: 7px; line-height: 1.1; }
.tfit-progress-metric strong { margin: 3px 0; color: #fff; font-size: 14px; }
.tfit-progress-metric em { color: #27e8cf; font-size: 7px; line-height: 1.12; }
.tfit-progress-metric--time>i { color: #c06aff; background: rgba(140,56,255,.14); }
.tfit-progress-metric--calories>i { color: #ff5c91; background: rgba(255,65,120,.13); }
.tfit-progress-metric--streak>i { color: #48f1a9; background: rgba(40,225,154,.13); }

.tfit-progress-streak { min-height: 58px; gap: 8px; margin-top: 8px; padding: 8px; border-color: rgba(64, 151, 255, .34); border-radius: 16px; background: linear-gradient(100deg, rgba(8, 37, 70, .9), rgba(5, 14, 31, .9)); }
.tfit-progress-streak>i { width: 34px; height: 34px; border-color: #6f63ff; color: #8c5eff; font-size: 17px; box-shadow: 0 0 13px rgba(96,88,255,.18); }
.tfit-progress-streak strong { margin: 2px 0; color: #fff; font-size: 17px; }
.tfit-progress-streak p { font-size: 8px; }
.tfit-progress-week { flex: 1; max-width: 160px; gap: 3px; }
.tfit-progress-week-day { gap: 3px; color: #b5c4e4; font-size: 8px; }
.tfit-progress-week-day i { width: 17px; height: 17px; border-color: rgba(159,184,225,.55); }
.tfit-progress-week-day.is-completed i { background: linear-gradient(135deg, #7d33e9, #a752ff); box-shadow: 0 0 8px rgba(149,71,255,.45); }

@media (max-width: 370px) {
  .tfit-progress-card { margin-inline: 10px; padding: 9px; border-radius: 20px; }
  .tfit-progress-header { align-items: flex-start; }
  .tfit-progress-icon { width: 33px; height: 33px; font-size: 15px; }
  .tfit-progress-heading h2 { font-size: 15px; }
  .tfit-progress-tabs button { min-width: 31px; padding-inline: 5px; font-size: 8px; }
  .tfit-progress-objective { grid-template-columns: 65px minmax(0,1fr) 64px; gap: 6px; min-height: 88px; padding: 8px; }
  .tfit-progress-ring { width: 65px; }
  .tfit-progress-ring b { font-size: 15px; }
  .tfit-progress-objective-copy strong { font-size: 22px; }
  .tfit-progress-objective-copy>b { font-size: 11px; }
  .tfit-progress-objective-copy p { font-size: 11px; }
  .tfit-progress-motivation em { font-size: 8px; }
  .tfit-progress-metric { min-height: 73px; padding: 6px; }
  .tfit-progress-metric strong { font-size: 12px; }
  .tfit-progress-week { max-width: 145px; }
}