/* ==========================================================================
   Estilos específicos de telas
   ========================================================================== */

/* ---------- Dashboard: hero da promessa ---------- */

.promise {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 20px;
  background:
    radial-gradient(110% 130% at 88% -10%, rgba(255, 122, 52, 0.28) 0%, rgba(255, 122, 52, 0) 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid color-mix(in srgb, var(--flame) 24%, var(--line-soft));
}
.promise__streak { display: flex; align-items: baseline; gap: 10px; }
.promise__num { font-size: 52px; font-weight: 800; line-height: 1; font-family: var(--num); }
.promise__unit { font-size: 15px; color: var(--text-2); font-weight: 650; }
.promise__label { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.promise__meter { margin-top: 16px; }
.promise__meter-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }

/* ---------- Card do treino de hoje ---------- */

.today-card {
  border-radius: var(--r-xl);
  padding: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  position: relative;
  overflow: hidden;
}
.today-card::after {
  content: "";
  position: absolute; inset: auto -30% -60% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color, var(--volt)) 22%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.today-card__kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 750; }
.today-card__title { font-size: 27px; font-weight: 800; margin: 4px 0 8px; letter-spacing: -0.03em; }
.today-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.today-card__list { margin: 0 0 16px; padding: 0; list-style: none; }
.today-card__list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  color: var(--text-2); font-size: 14px;
}
.today-card__list li:last-child { border-bottom: 0; }
.today-card__idx {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px;
  background: var(--surface-3); color: var(--text-3);
  font-size: 11px; font-weight: 750; display: grid; place-items: center;
}

/* ---------- Modo treino ---------- */

.trainer { display: flex; flex-direction: column; gap: 14px; min-height: 100dvh; }
.trainer__top {
  display: flex; align-items: center; gap: 10px;
  padding-top: calc(var(--sat) + 6px);
}
.trainer__progress { flex: 1; }
.trainer__exname { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; }
.trainer__exsub { font-size: 13px; color: var(--text-3); }
.trainer__setline {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text-2);
}
.trainer__setnum { font-size: 20px; color: var(--text); }
.trainer__prev {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 10px 12px; font-size: 13.5px; color: var(--text-2);
}
.trainer__prev b { color: var(--text); font-family: var(--num); }

.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Em coluna estreita os steppers precisam de botões menores para o número caber */
.setgrid .stepper { gap: 6px; }
.setgrid .stepper__btn { width: 42px; font-size: 20px; }
.setgrid .stepper__value { font-size: 21px; min-height: 54px; }
.setgrid .stepper__unit { display: none; }
.setgrid--3 { grid-template-columns: repeat(3, 1fr); }

.setdots { display: flex; gap: 6px; flex-wrap: wrap; }
.setdot {
  min-width: 40px; padding: 6px 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; font-family: var(--num); color: var(--text-3); text-align: center;
}
.setdot--done { background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--volt); border-color: color-mix(in srgb, var(--volt) 35%, transparent); }
.setdot--editable { cursor: pointer; font-family: var(--num); }
.setdot--editable:active { transform: scale(0.94); }
.setdot--current { border-color: var(--text); color: var(--text); }

/* Consulta rápida de pegada e posicionamento */
.setup-quick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--volt) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--volt) 22%, var(--line-soft));
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.setup-quick__icon { font-size: 16px; line-height: 1.2; }
.setup-quick .muted { font-size: 11.5px; white-space: nowrap; align-self: center; }

/* Cronômetro de descanso */
.rest {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 14px var(--pad) calc(var(--sab) + 14px);
  animation: slideup 0.2s ease;
}
.rest__label { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 750; }
.rest__time { font-size: 44px; font-weight: 800; font-family: var(--num); line-height: 1; margin: 2px 0 10px; }
.rest__time--over { color: var(--volt); }
.rest__bar { margin-bottom: 12px; }

/* ---------- Timeline do cardio ---------- */

.cardio-hero {
  border-radius: var(--r-xl);
  padding: 22px 20px;
  border: 1px solid color-mix(in srgb, var(--cardio) 25%, var(--line-soft));
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(76, 200, 255, 0.22) 0%, rgba(76, 200, 255, 0) 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  text-align: center;
}
.cardio-hero__time { font-size: 56px; font-weight: 800; font-family: var(--num); line-height: 1; }
.cardio-hero__phase { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cardio); font-weight: 750; }
.cardio-hero__targets { display: flex; justify-content: center; gap: 26px; margin-top: 14px; }
.cardio-hero__target-v { font-size: 26px; font-weight: 780; font-family: var(--num); }
.cardio-hero__target-l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }

.phases { display: flex; flex-direction: column; gap: 8px; }
.phase {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.phase--active { border-color: var(--cardio); background: color-mix(in srgb, var(--cardio) 10%, var(--surface)); }
.phase--done { opacity: 0.5; }
.phase__win { font-family: var(--num); font-size: 13px; color: var(--text-3); min-width: 92px; }
.phase__spec { font-family: var(--num); font-weight: 700; font-size: 15px; }
.phase__desc { font-size: 12px; color: var(--text-3); }

/* ---------- Calendário ---------- */

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal__dow { text-align: center; font-size: 11px; color: var(--text-3); font-weight: 750; padding-bottom: 4px; }
.cal__day {
  aspect-ratio: 1 / 1.15;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 4px 2px 2px;
  gap: 1px;
  cursor: pointer;
  position: relative;
}
.cal__day--out { opacity: 0.3; }
.cal__day--today { border-color: var(--volt); }
.cal__day--future { background: transparent; }
.cal__daynum { font-size: 11.5px; color: var(--text-3); font-family: var(--num); }
.cal__icons { font-size: 11px; line-height: 1.1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.cal__flame { position: absolute; bottom: 2px; font-size: 9px; }

/* ---------- Exercício (ficha) ---------- */

.exhead { display: flex; gap: 14px; align-items: flex-start; }
.exhead__names { flex: 1; min-width: 0; }
.exhead__pt { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.exhead__en { font-size: 13px; color: var(--text-3); font-weight: 650; }

.kv { display: flex; flex-direction: column; gap: 0; }
.kv__row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--text-3); min-width: 118px; flex: 0 0 118px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding-top: 2px; }
.kv__v { color: var(--text-2); flex: 1; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: 14.5px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--surface-3); color: var(--volt);
  font-size: 12px; font-weight: 750;
  display: grid; place-items: center;
  font-family: var(--num);
}
.mistakes { list-style: none; padding: 0; margin: 0; }
.mistakes li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 14px; color: var(--text-2); }
.mistakes li::before { content: "✕"; position: absolute; left: 0; color: var(--danger); font-size: 12px; top: 2px; }

/* ---------- Semana / programa ---------- */

.weekrow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-soft);
}
.weekrow--today { border-color: var(--volt); background: color-mix(in srgb, var(--volt) 7%, var(--surface)); }
.weekrow__day { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 750; min-width: 34px; }
.weekrow__name { font-weight: 700; font-size: 14.5px; }
.weekrow__sub { font-size: 12px; color: var(--text-3); }

/* ---------- Fotos ---------- */

.photogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photogrid img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-soft); }
.photo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-compare figcaption { font-size: 11.5px; color: var(--text-3); text-align: center; margin-top: 4px; }

/* ---------- Relatório semanal ---------- */

.report-line {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.report-line:last-child { border-bottom: 0; }
.report-line__v { font-family: var(--num); font-weight: 700; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--text-3); }

/* ---------- Cabeçalho de conclusão ---------- */

.done-hero { text-align: center; padding: 28px 10px; }
.done-hero__check { font-size: 56px; }
.done-hero__title { font-size: 24px; font-weight: 800; margin: 8px 0 4px; }