/* CASAL FIT — design system
   Branco predominante · Inter Medium/Bold · lilás escuro no destaque ·
   preto e cinza no texto · verde só para positivo/concluído.
   Estrutura: cards grandes empilhados, números em destaque, chips de metadado,
   navegação inferior simples. Sem gradiente, sem glassmorphism. */

:root {
  /* acento do perfil — trocado em runtime (cada um tem seu lilás escuro) */
  --acento:        #C2185B;
  --acento-esc:    #8E1143;
  --acento-claro:  #FDE7F0;
  --acento-borda:  #F8C3D8;

  --verde:         #17864A;
  --verde-claro:   #EBF6F0;
  --verde-borda:   #BFE3CE;

  --tinta:         #14141C;
  --contraste:     #14141C;
  --cinza:         #6B6B78;
  --cinza-2:       #9E9EAA;
  --linha:         #F2E7EC;
  --fundo:         #FFFFFF;
  --fundo-2:       #FBF5F8;

  --r-chip: 999px;
  --r:      18px;
  --r-lg:   22px;
  --r-xl:   24px;
  --sombra: 0 1px 2px rgba(20,20,28,.04), 0 8px 22px rgba(20,20,28,.05);
  --nav-h:  108px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* A home ganha um azul acinzentado quase imperceptível, para os cards brancos
   respirarem. As outras telas seguem no branco puro do design system. */
body.home { background: #FFF8FA; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; }
h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 23px; line-height: 1.15; }
h3 { font-size: 17px; letter-spacing: -.02em; }
p  { margin: 0; }
button { font-family: inherit; font-weight: 600; cursor: pointer; border: 0; color: inherit; }
input  { font-family: inherit; font-weight: 600; }
a { color: var(--acento); }

.app { max-width: 520px; margin: 0 auto; padding: 0 20px; }
.pilha > * + * { margin-top: 14px; }      /* respiro entre blocos */
.linha  { display: flex; align-items: center; gap: 10px; }
.entre  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crescer { flex: 1; min-width: 0; }
.secundario { color: var(--cinza); font-size: 14px; }
.mini { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-2); }
.centro { text-align: center; }

/* forma decorativa atrás da saudação — profundidade sem poluir */
.blob {
  position: absolute; top: -120px; right: -90px; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 30% 30%, var(--acento-claro), transparent 70%);
  opacity: .9;
}
.app { position: relative; }

.emoji-grande { font-size: 44px; line-height: 1; filter: saturate(1.05); }

.icone-circulo {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-claro); color: var(--acento-esc);
}

/* ── topo ─────────────────────────────────────────────────────────────── */
.cab { padding: 28px 0 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cab .marca { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); margin-bottom: 10px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden; position: relative;
  background: var(--perfil-cor, var(--acento)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; padding: 0;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar { box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(20,20,28,.14); }

/* ── chips (pílula) ───────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--r-chip); font-size: 12.5px; font-weight: 600;
  background: var(--fundo-2); color: var(--cinza);
}
.chip--acento { background: var(--acento-claro); color: var(--acento-esc); }
.chip--verde  { background: var(--verde-claro); color: var(--verde); }
.chip--escura { background: var(--contraste); color: #fff; }
.chip--vidro  { background: rgba(255,255,255,.18); color: #fff; }
.chip--branca { background: #fff; color: var(--tinta); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── cards ────────────────────────────────────────────────────────────── */
.cartao { background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sombra); }
.cartao--plano  { background: var(--fundo-2); border-color: transparent; box-shadow: none; }
.cartao--alto   { padding: 24px; border-radius: var(--r-xl); }
/* único bloco de cor cheia do app: o destaque de hoje */
.cartao--destaque {
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(255,255,255,.14), transparent 60%),
    var(--acento);
  border-color: transparent; color: #fff;
}
.cartao--destaque .secundario, .cartao--destaque .mini { color: rgba(255,255,255,.7); }
/* estado positivo */
.cartao--feito  { background: var(--verde-claro); border-color: var(--verde-borda); box-shadow: none; }

.cartao.emergencia { border-style: dashed; border-color: var(--acento-borda); }
.cartao.emergencia .circ { background: var(--acento); }

.numerao { font-size: 42px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.numerao small { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--cinza); margin-left: 8px; }
.cartao--destaque .numerao small { color: rgba(255,255,255,.7); }
.numerao--verde { color: var(--verde); }

.circ { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--contraste); color: #fff; transition: transform .1s ease; }
.circ:active { transform: scale(.93); }
.circ--claro { background: #fff; color: var(--tinta); }
.circ--verde { background: var(--verde); color: #fff; }

/* ── botões ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 22px; border-radius: var(--r); font-size: 15.5px; font-weight: 600;
  background: var(--acento); color: #fff; width: 100%;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.985); filter: brightness(.94); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn--escuro   { background: var(--contraste); }
.btn--verde    { background: var(--verde); }
.btn--contorno { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha); }
.btn--fantasma { background: transparent; color: var(--cinza); }
.btn--pequeno  { padding: 10px 16px; font-size: 13px; width: auto; border-radius: var(--r-chip); }

/* ── progresso ────────────────────────────────────────────────────────── */
.barra { height: 6px; border-radius: 3px; background: rgba(20,20,28,.08); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 3px; background: var(--acento); transition: width .3s ease; }
.barra--verde i { background: var(--verde); }
.cartao--destaque .barra { background: rgba(255,255,255,.22); }
.cartao--destaque .barra i { background: #fff; }

.semana { display: flex; gap: 6px; }
.semana div { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: var(--cinza-2); }
.semana div b { display: grid; place-items: center; height: 38px; border-radius: 12px; background: var(--fundo-2); margin-bottom: 6px; color: var(--cinza-2); font-size: 13px; }
.semana div.feito b { background: var(--verde); color: #fff; }
.semana div.hoje b { box-shadow: inset 0 0 0 2px var(--acento); color: var(--acento); }
.cartao--destaque .semana div { color: rgba(255,255,255,.6); }
.cartao--destaque .semana div b { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }

/* ── check-in: pergunta grande + botões grandes ───────────────────────── */
.passos { display: flex; gap: 5px; margin: 0 0 24px; }
.passos i { height: 4px; border-radius: 2px; background: var(--linha); flex: 1; }
.passos i.ativo { background: var(--acento); }
.opcoes { display: grid; gap: 10px; }
.opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 19px 22px; border-radius: var(--r);
  font-size: 16px; font-weight: 600; background: var(--fundo-2); color: var(--tinta);
  transition: transform .08s ease, background .15s ease;
}
.opcao:active { transform: scale(.985); }
.opcao[aria-pressed="true"] { background: var(--acento); color: #fff; }
.opcao .marca-check { opacity: 0; font-size: 15px; }
.opcao[aria-pressed="true"] .marca-check { opacity: 1; }

/* ── exercícios ───────────────────────────────────────────────────────── */
.exercicio { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--fundo); overflow: hidden; }
.exercicio + .exercicio { margin-top: 10px; }
.exercicio.completo { background: var(--verde-claro); border-color: var(--verde-borda); }
.exercicio > .cabeca { display: flex; align-items: center; gap: 13px; width: 100%; padding: 17px 18px; background: transparent; text-align: left; }
.exercicio .num { width: 34px; height: 34px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--acento-claro); color: var(--acento-esc); font-size: 14px; font-weight: 700; }
.exercicio.completo .num { background: var(--verde); color: #fff; }
.exercicio .titulo { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; display: block; }
.exercicio .sub { font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.exercicio > .corpo { padding: 2px 18px 20px; }

.serie { display: grid; grid-template-columns: 46px 1fr 1fr 48px; gap: 8px; align-items: center; }
.serie--sem-carga { grid-template-columns: 46px 1fr 48px; }
.serie + .serie { margin-top: 8px; }
.serie .rotulo { display: flex; flex-direction: column; line-height: 1.15; }
.serie .rotulo b { font-size: 12.5px; font-weight: 700; color: var(--cinza-2); }
.serie .rotulo i { font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--cinza-2); opacity: .75; }
.campo { display: flex; align-items: center; background: var(--fundo-2); border-radius: 14px; padding: 0 10px; box-shadow: inset 0 0 0 1.5px transparent; }
.exercicio.completo .campo { background: #fff; }
.campo:focus-within { box-shadow: inset 0 0 0 1.5px var(--acento); background: #fff; }
.campo input { width: 100%; border: 0; background: transparent; padding: 13px 0; font-size: 15px; font-weight: 700; text-align: center; color: var(--tinta); outline: none; }
.campo input::-webkit-outer-spin-button, .campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input[type=number] { -moz-appearance: textfield; }
.campo .un { font-size: 11px; font-weight: 700; color: var(--cinza-2); }
.check { width: 48px; height: 46px; border-radius: 14px; background: var(--fundo-2); color: var(--cinza-2); display: grid; place-items: center; font-size: 17px; }
.exercicio.completo .check:not([aria-pressed="true"]) { background: #fff; }
.check[aria-pressed="true"] { background: var(--verde); color: #fff; }

.video { position: relative; padding-top: 56.25%; border-radius: var(--r); overflow: hidden; background: #000; margin-top: 14px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── cronômetro ───────────────────────────────────────────────────────── */
.relogio { font-size: 72px; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-align: center; line-height: 1; margin: 24px 0 26px; }
.relogio.acabou { color: var(--verde); }
.abas { display: flex; background: var(--fundo-2); border-radius: var(--r-chip); padding: 5px; gap: 4px; }
.abas button { flex: 1; padding: 11px; border-radius: var(--r-chip); background: transparent; color: var(--cinza); font-size: 14px; }
.abas button[aria-selected="true"] { background: var(--contraste); color: #fff; }

.descanso-flutuante[hidden] { display: none !important; }
.descanso-flutuante {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 4px + env(safe-area-inset-bottom));
  width: min(480px, calc(100% - 40px)); z-index: 40;
  background: var(--contraste); color: #fff; border-radius: var(--r);
  padding: 13px 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(20,20,28,.25);
}
.descanso-flutuante .rot { font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.descanso-flutuante .t { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.descanso-flutuante button { background: rgba(255,255,255,.15); color: #fff; border-radius: var(--r-chip); padding: 8px 12px; font-size: 12.5px; }
.descanso-flutuante.acabou { background: var(--verde); }

/* ── métricas / gráficos ──────────────────────────────────────────────── */
.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grafico { width: 100%; height: 150px; display: block; }
.vazio { text-align: center; color: var(--cinza-2); padding: 30px 12px; font-size: 14px; }
.aviso { font-size: 13px; color: var(--cinza); background: var(--fundo-2); border-radius: var(--r); padding: 13px 15px; }

/* ── navegação inferior ───────────────────────────────────────────────── */
.nav[hidden] { display: none !important; }
.nav {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  background: var(--contraste); border-radius: var(--r-chip); padding: 6px;
  box-shadow: 0 10px 28px rgba(20,20,28,.26);
}
.nav .interno { display: flex; gap: 2px; }
.nav button {
  background: transparent; color: rgba(255,255,255,.5); border-radius: var(--r-chip);
  padding: 9px 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .01em; min-width: 60px;
}
.nav button svg { width: 20px; height: 20px; }
.nav button[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }

/* ── escolha de perfil ────────────────────────────────────────────────── */
.escolha-perfil { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; max-width: 520px; margin: 0 auto; }
.escolha-perfil .marca { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--acento); text-transform: uppercase; }
.perfis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.perfil { background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-xl); padding: 14px 14px 18px; box-shadow: var(--sombra); text-align: center; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.perfil .foto { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--cor, var(--acento)); }
.perfil .foto img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil .foto b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.perfil .nome { display: block; margin-top: 13px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--tinta); }
.perfil .sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--cinza-2); }
.perfil:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,20,28,.10); }
.perfil.ativo { border-color: var(--cor, var(--acento)); transform: scale(.975); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor, var(--acento)) 18%, transparent); }

.carregando { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
.carregando--acento { border-color: var(--acento-borda); border-top-color: var(--acento); }
@keyframes girar { to { transform: rotate(360deg); } }


/* ── painel da semana ─────────────────────────────────────────────────── */
.painel-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,20,28,.42); backdrop-filter: blur(2px);
}
.painel {
  /* centralizado sem transform: o GSAP controla só o eixo Y aqui */
  position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 0; z-index: 61;
  width: min(520px, 100%); max-height: 82dvh; overflow-y: auto;
  background: var(--fundo); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 20px calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(20,20,28,.22);
}
.painel-alca { width: 42px; height: 4px; border-radius: 2px; background: var(--linha); margin: 2px auto 16px; }

.dias { display: flex; flex-direction: column; gap: 6px; }
.dia-semana {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: var(--r); background: var(--fundo-2); color: var(--tinta);
}
.dia-semana.descanso { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); }
.dia-semana.hoje { box-shadow: inset 0 0 0 1.5px var(--acento); }
.dia-semana.aberto { background: var(--acento-claro); }
.dia-semana .ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dia-semana b { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.dia-semana small { display: block; font-size: 12px; font-weight: 500; color: var(--cinza); margin-top: 1px; }
.dia-detalhe { padding: 4px 16px 12px 36px; }


/* ── baralho de treinos (aba Treino) ──────────────────────────────────── */
.pilha-treinos { display: flex; flex-direction: column; padding-bottom: 8px; }

.carta {
  background: var(--c); color: #fff; border-radius: var(--r-xl);
  box-shadow: 0 -6px 18px rgba(20,20,28,.10), 0 10px 26px rgba(20,20,28,.14);
  transition: margin .32s cubic-bezier(.4,0,.2,1), transform .2s ease, box-shadow .32s ease;
  position: relative; overflow: hidden; -webkit-user-select: none; user-select: none;
}
/* empilhadas: cada carta cobre o fim da anterior, sobrando a "lombada" com o
   dia e o grupo do treino visíveis (leitura sem precisar abrir) */
.carta + .carta { margin-top: -22px; }
/* carta aberta: sai do deck e ganha respiro em cima e embaixo */
.carta.aberta { margin-top: 16px; transform: none; box-shadow: 0 -6px 20px rgba(20,20,28,.10), 0 22px 44px rgba(20,20,28,.24); z-index: 2; }
.carta.aberta + .carta { margin-top: 16px; }
.carta:first-child { margin-top: 0; }
.carta.hoje { box-shadow: 0 0 0 2.5px var(--fundo), 0 0 0 4.5px var(--c), 0 10px 26px rgba(20,20,28,.16); }
.carta.hoje.aberta { box-shadow: 0 0 0 2.5px var(--fundo), 0 0 0 4.5px var(--c), 0 22px 44px rgba(20,20,28,.24); }

.carta-topo {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: transparent; color: inherit; padding: 18px 20px 22px; min-height: 76px;
}
.carta-dia { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.carta-titulo { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.025em; margin-top: 4px; }
.carta-meta { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.2); white-space: nowrap; }

.carta-corpo {
  padding: 0 20px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .26s ease, padding .38s cubic-bezier(.4,0,.2,1);
}
.carta.aberta .carta-corpo { max-height: 720px; opacity: 1; padding: 0 20px 20px; }
@media (prefers-reduced-motion: reduce){ .carta, .carta-corpo { transition: none; } }
.carta-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.16); }
.carta-linha b { font-weight: 700; opacity: .85; white-space: nowrap; font-size: 13px; }
.carta-rodape { font-size: 12px; font-weight: 600; opacity: .7; padding-top: 10px; }
.btn--carta { background: #fff; color: var(--acento-esc, #2A1E63); margin-top: 14px; }

@media (hover: hover) {
  .carta:hover { transform: translateY(-4px); }
}

/* ── ajustes de celular ───────────────────────────────────────────────── */
/* 16px nos campos evita o zoom automático do iOS ao focar um input */
.campo input { font-size: 16px; }

button, .carta, .dia-semana, .perfil { touch-action: manipulation; }
.painel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nav button, .opcao, .check, .circ { -webkit-user-select: none; user-select: none; }

/* ── Tela Perfil ─────────────────────────────────────────────────────────── */
.perfil-topo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 6px; }
.perfil-topo h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.foto-edit { position: relative; padding: 0; background: none; border: 0; cursor: pointer; }
.avatar-xl {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--perfil-cor, var(--acento)); color: #fff;
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  box-shadow: 0 0 0 4px #fff, 0 6px 20px rgba(20,20,28,.16);
}
.avatar-xl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-edit .cam {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff;
}
.foto-edit:active .avatar-xl { transform: scale(.97); }

.menu-perfil { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.item-perfil {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: 15px 16px; color: var(--tinta); box-shadow: var(--sombra);
  transition: transform .12s ease, border-color .12s ease;
}
.item-perfil:active { transform: scale(.99); }
.item-perfil > svg { color: var(--cinza-2); flex: none; }
.item-perfil .ic {
  width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: var(--acento-claro); color: var(--acento-esc);
}
.item-perfil b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.item-perfil small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.item-perfil[disabled] { opacity: .6; }
.item-perfil[disabled] .ic { background: var(--fundo-2); color: var(--cinza-2); }
.item-perfil--sair .ic { background: var(--fundo-2); color: var(--cinza); }

.campo-box { background: var(--fundo-2); border-radius: 14px; padding: 4px 14px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s ease, background .15s ease; }
.campo-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--acento); background: #fff; }
.campo-box input, .campo-box textarea { width: 100%; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--tinta); padding: 12px 0; line-height: 1.5; }
.campo-box textarea { resize: none; display: block; }

/* ── Gamificação ──────────────────────────────────────────────────────────── */

/* comemoração ao concluir o treino */
.comemora-fundo {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 24px; overflow: hidden;
  background: rgba(20,20,28,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
.comemora-fundo.aberto { opacity: 1; }
.comemora {
  position: relative; z-index: 2; width: 100%; max-width: 380px; text-align: center;
  background: var(--fundo); color: var(--tinta); border-radius: var(--r-xl);
  padding: 30px 24px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transform: scale(.94); transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.comemora-fundo.aberto .comemora { transform: scale(1); }
.comemora-selo { font-size: 46px; line-height: 1; }
.comemora h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 12px 0 6px; }
.comemora-frase { font-size: 15.5px; color: var(--cinza); line-height: 1.5; margin: 0 6px; }
.comemora-conquista {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--acento-claro); border-radius: 16px; padding: 12px 14px; margin: 18px 0 4px;
}
.comemora-conquista .e { font-size: 30px; }
.comemora-conquista b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-esc); }
.comemora-conquista small { font-size: 15px; font-weight: 700; color: var(--tinta); }
.comemora-pergunta { font-size: 13px; font-weight: 700; color: var(--cinza-2); text-transform: uppercase; letter-spacing: .08em; margin: 22px 0 12px; }
.comemora-humores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.humor {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--fundo-2); border: 1.5px solid transparent; border-radius: 14px; padding: 12px 8px;
  color: var(--tinta); cursor: pointer; transition: transform .12s ease, border-color .12s ease;
}
.humor .e { font-size: 24px; }
.humor .r { font-size: 12px; font-weight: 600; color: var(--cinza); }
.humor:active { transform: scale(.96); }
.humor.ativo { border-color: var(--acento); background: var(--acento-claro); }
.humor.ativo .r { color: var(--acento-esc); }
.comemora .btn { margin-top: 4px; }
.confete { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; z-index: 1; pointer-events: none; }

/* jornada por estações */
.jornada { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etapa { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--fundo-2); color: var(--cinza-2); }
.etapa.feita { background: var(--acento-claro); color: var(--acento-esc); }
.etapa.atual { background: var(--acento); color: #fff; }

/* conquistas */
.conquistas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conquista {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--fundo-2); border: 1.5px solid transparent; border-radius: 16px; padding: 14px;
}
.conquista.ganha { background: var(--acento-claro); border-color: var(--acento-borda); }
.c-emoji { font-size: 26px; }
.conquista:not(.ganha) .c-emoji { filter: grayscale(1); opacity: .45; }
.c-nome { font-size: 13.5px; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }
.conquista:not(.ganha) .c-nome { color: var(--cinza); }
.c-desc { font-size: 11.5px; font-weight: 500; color: var(--cinza-2); line-height: 1.35; }
.conquista.ganha .c-desc { color: var(--acento-esc); }

/* meta semanal */
.meta-opcoes { display: flex; gap: 10px; }
.meta-op {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--fundo-2); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 0;
  font-size: 24px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.meta-op small { font-size: 11px; font-weight: 600; color: var(--cinza-2); letter-spacing: .02em; }
.meta-op:active { transform: scale(.97); }
.meta-op.ativo { background: var(--acento); color: #fff; }
.meta-op.ativo small { color: rgba(255,255,255,.8); }

/* diário de vitórias */
.diario { display: flex; flex-direction: column; }
.vit { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); }
.vit:first-child { border-top: 0; }
.v-e { font-size: 20px; }
.v-d { font-size: 13px; font-weight: 700; color: var(--tinta); min-width: 58px; }
.v-r { font-size: 13px; color: var(--cinza); }

/* modo juntas (tela de escolha de perfil) */
.juntas {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 22px; padding: 14px 18px; border-radius: 16px;
  background: var(--fundo); border: 1px solid var(--linha); box-shadow: var(--sombra);
  font-size: 14px; color: var(--cinza); text-align: center;
}
.juntas b { color: var(--tinta); }
.j-fogo { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  .comemora-fundo, .comemora { transition: none; }
}

/* ── Tour de novidades ────────────────────────────────────────────────────── */
.novidades-fundo {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  padding: 24px; background: rgba(20,20,28,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.novidades-fundo.aberto { opacity: 1; }
.novidades {
  position: relative; width: 100%; max-width: 360px; text-align: center;
  background: var(--fundo); color: var(--tinta); border-radius: var(--r-xl);
  padding: 34px 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transform: translateY(12px) scale(.98); transition: transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.novidades-fundo.aberto .novidades { transform: none; }
.nov-pular {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fundo-2); color: var(--cinza); font-size: 20px; line-height: 1; cursor: pointer;
}
.nov-emoji { font-size: 52px; line-height: 1; }
.novidades h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 8px; text-wrap: balance; }
.novidades p { font-size: 15.5px; line-height: 1.55; color: var(--cinza); margin: 0 4px; }
.nov-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0; }
.nov-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--linha); transition: background .2s, width .2s; }
.nov-dots i.on { width: 20px; border-radius: 4px; background: var(--acento); }
.nov-acoes { display: flex; gap: 10px; }
.nov-acoes .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) { .novidades-fundo, .novidades { transition: none; } }

/* ── Revisão de ciclo (5 semanas) ─────────────────────────────────────────── */
.revisao-cta { background: var(--acento-claro); border-color: var(--acento-borda); }
.chip--alerta { background: #FBE7D6; color: #9A4A0C; }
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip--alerta { background: #3A2410; color: #E7A867; } }
:root[data-theme="dark"] .chip--alerta { background: #3A2410; color: #E7A867; }

.revisao-deload {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--fundo-2); border-left: 3px solid var(--acento);
  font-size: 13.5px; line-height: 1.5; color: var(--tinta);
}
.revisao-lista { margin-top: 14px; }
.rev-item { padding: 12px 0; border-top: 1px solid var(--linha); }
.rev-item:first-child { border-top: 0; }
.rev-item b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.rev-item p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--cinza); }

/* ── Tema escuro (azul-noite; textos entre branco e azul) ─────────────────── */
:root[data-tema="escuro"] {
  --verde: #35C08A; --verde-claro: #12281F; --verde-borda: #245B41;
  --tinta: #E9EEFF; --cinza: #9BA7C6; --cinza-2: #6D7797;
  --linha: #232A3D; --fundo: #0F1320; --fundo-2: #171D2E;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.4);
}
:root[data-tema="escuro"] body { background: var(--fundo); }
/* chip branca vive sobre o card de acento (colorido) — texto sempre escuro */
.chip--branca { color: #14141C; }
:root[data-tema="escuro"] .btn--carta { background: #EAF0FF; }
:root[data-tema="escuro"] .avatar, :root[data-tema="escuro"] .avatar-xl { box-shadow: 0 0 0 3px var(--fundo), 0 2px 10px rgba(0,0,0,.4); }
:root[data-tema="escuro"] .foto-edit .cam { box-shadow: 0 0 0 3px var(--fundo); }
:root[data-tema="escuro"] .nav { background: #05070D; }

/* ── Acompanhamento ───────────────────────────────────────────────────────── */
.sel {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 0;
  background: var(--fundo-2); box-shadow: inset 0 0 0 1.5px var(--linha);
  color: var(--tinta); font-family: inherit; font-size: 16px; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.aviso-medico {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--fundo-2); color: var(--cinza); font-size: 12.5px; line-height: 1.55;
}
.aviso-medico b { color: var(--tinta); }

/* ── Login ────────────────────────────────────────────────────────────────── */
.login-form { margin-top: 26px; }
.login-form .campo-box input { text-align: left; font-weight: 600; }

/* ── Cardio ───────────────────────────────────────────────────────────────── */
.cardio-niveis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cardio-nivel {
  text-align: left; padding: 12px 13px; border-radius: 14px; background: var(--fundo-2);
  box-shadow: inset 0 0 0 1.5px var(--linha); transition: box-shadow .15s ease, background .15s ease;
}
.cardio-nivel b { display: block; font-size: 14px; font-weight: 700; color: var(--tinta); }
.cardio-nivel small { display: block; font-size: 11.5px; color: var(--cinza); margin-top: 3px; }
.cardio-nivel.ativo { background: var(--acento-claro); box-shadow: inset 0 0 0 2px var(--acento); }
.cardio-nivel.ativo b { color: var(--acento-esc); }

.cardio-semana { display: flex; gap: 6px; }
.cardio-semana span {
  flex: 1; height: 10px; border-radius: 6px; background: var(--fundo-2);
  box-shadow: inset 0 0 0 1.5px var(--linha);
}
.cardio-semana span.on { background: var(--verde); box-shadow: none; }

/* Player guiado — ocupa a tela toda e roda sozinho */
body.sem-scroll { overflow: hidden; }
.cardio-player {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  padding: max(22px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom));
  background: var(--fundo); color: var(--tinta);
  opacity: 0; transition: opacity .22s ease, background .4s ease;
}
.cardio-player.aberto { opacity: 1; }
.cardio-player[data-tipo="forte"] { background: var(--acento); color: #fff; }
.cardio-player[data-tipo="leve"]  { background: var(--fundo-2); }
.cardio-player[data-tipo="fim"]   { background: var(--verde); color: #fff; }
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-top button { font-size: 14px; font-weight: 700; color: inherit; opacity: .85; padding: 6px 4px; }
.cp-passo { font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .8; text-transform: uppercase; }
.cp-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.cp-fase { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cp-relogio { font-size: 92px; font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: .95; margin: 6px 0; }
.cp-dica { font-size: 15px; line-height: 1.5; opacity: .9; max-width: 22em; margin: 0; }
.cp-baixo { display: flex; flex-direction: column; gap: 12px; }
.cp-prox { font-size: 13.5px; font-weight: 700; text-align: center; opacity: .85; }
.cp-barra { height: 10px; border-radius: 6px; background: rgba(127,127,127,.28); overflow: hidden; }
.cp-barra i { display: block; height: 100%; background: currentColor; opacity: .9; border-radius: 6px; transition: width .25s linear; }
.cp-acoes { display: flex; gap: 10px; }
.cp-acoes .btn { margin-top: 0; }
.cardio-player[data-tipo="forte"] .cp-acoes .btn--fantasma,
.cardio-player[data-tipo="fim"] .cp-acoes .btn--fantasma { color: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }

/* ── Entrada do produto (login, cadastro, bloqueio) ───────────────────────── */
.entrar-links { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.entrar-links .btn { margin-top: 0; text-decoration: none; }
.erro-form, .aviso-form {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
}
.erro-form  { background: #FDECEC; color: #A32020; }
.aviso-form { background: var(--acento-claro); color: var(--acento-esc); }
:root[data-tema="escuro"] .erro-form  { background: #3A1B1B; color: #FFB4B4; }
:root[data-tema="escuro"] .aviso-form { background: #1B2440; color: #C9D6FF; }
.escolha-perfil .nov-emoji { font-size: 46px; line-height: 1; }


/* Correcoes de contraste no tema escuro */
:root[data-tema="escuro"] { --contraste: #2A3348; }
:root[data-tema="escuro"] .campo-box:focus-within,
:root[data-tema="escuro"] .campo:focus-within,
:root[data-tema="escuro"] .exercicio.completo .campo,
:root[data-tema="escuro"] .exercicio.completo .check:not([aria-pressed="true"]) { background: var(--fundo-2); }
:root[data-tema="escuro"] .campo-box input,
:root[data-tema="escuro"] .campo-box textarea { color: var(--tinta); }
:root[data-tema="escuro"] .campo-box input::placeholder { color: var(--cinza-2); }
:root[data-tema="escuro"] .circ--claro,
:root[data-tema="escuro"] .chip--branca { background: #EAF0FF; color: #14141C; }

a.item-perfil { text-decoration: none; color: var(--tinta); }

/* ── Primeiro acesso: boas-vindas ─────────────────────────────────────────── */
.bv-foto { display: flex; flex-direction: column; align-items: center; margin-top: 26px; }
.bv-foto .avatar-xl { width: 116px; height: 116px; font-size: 38px; }
.bv-dica { margin-top: 12px; font-size: 13.5px; text-align: center; }

/* ── Primeiro acesso: tour com foco ───────────────────────────────────────── */
/* O buraco é um retângulo transparente com uma sombra de espalhamento enorme:
   o miolo mostra o botão de verdade e todo o resto da tela escurece. */
.tour-fundo {
  position: fixed; inset: 0; z-index: 300;
  opacity: 0; transition: opacity .22s ease;
}
.tour-fundo.aberto { opacity: 1; }

.tour-buraco {
  position: fixed; border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(6, 8, 16, .74);
  transition: left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.tour-card {
  position: fixed; left: 0; right: 0; margin: 0 auto;
  width: min(360px, calc(100% - 36px));
  background: var(--fundo); color: var(--tinta);
  border-radius: var(--r-xl); padding: 20px 20px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.tour-card h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; }
.tour-card p { font-size: 14.5px; line-height: 1.55; color: var(--cinza); }

.tour-passos { display: flex; gap: 6px; margin-bottom: 14px; }
.tour-passos i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha); transition: width .2s, background .2s; }
.tour-passos i.on { width: 18px; border-radius: 3px; background: var(--acento); }

.tour-acoes { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 18px; }
.tour-acoes .btn { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .tour-fundo, .tour-buraco { transition: none; }
}

/* ── Campo de senha com ver/esconder ──────────────────────────────────────── */
.campo-senha { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.campo-senha input { flex: 1; min-width: 0; }
.olho {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: transparent; color: var(--cinza);
  display: grid; place-items: center; cursor: pointer;
  touch-action: manipulation;
}
.olho:active { transform: scale(.94); }
.olho[aria-pressed="true"] { color: var(--acento); }

.dica-senha { margin: 8px 2px 0; font-size: 13px; color: var(--cinza); line-height: 1.45; }

/* ── Relógio com centésimos ───────────────────────────────────────────────── */
/* Os centésimos correm rápido demais para serem lidos: ficam menores e mais
   claros, para o olho pousar na hora e não neles. */
.relogio .rel-hms { font-variant-numeric: tabular-nums; }
.relogio .rel-cent {
  font-size: .42em; font-weight: 700; letter-spacing: -.02em;
  color: var(--cinza-2); margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.relogio.acabou .rel-cent { color: var(--verde); opacity: .7; }