/* ===========================================================================
   ONLY15 — web app · estilo das telas da fase 2 (Movimentos e Progresso)
   Folha separada de `estilo.css`, carregada depois dela, para as duas telas
   novas não colidirem com quem mexe na folha principal. Usa só os tokens de
   lá — nenhuma cor nova nasce aqui.
   =========================================================================== */

/* A barra de abas mora inteira em `estilo.css` (a pílula flutuante). */

/* ---------------------------------------------------------------- Movimentos */
.tela--movimentos { gap: 18px; }
.tela--movimentos .cabecalho { gap: 6px; }
.tela--movimentos .cabecalho .apoio { font-size: 15px; }

/* O campo de busca de 46pt do nativo, com a lupa dentro. */
.campo-busca { position: relative; }
.campo-busca__lupa {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--esmaecido); display: inline-flex; pointer-events: none;
}
.campo--busca {
  min-height: 48px; padding: 12px 44px 12px 40px; border-color: var(--borda);
  font-size: 16px; /* abaixo de 16px o Safari dá zoom ao focar */
  -webkit-appearance: none; appearance: none;
}
.campo--busca::-webkit-search-cancel-button { display: none; }
.campo-busca__limpar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1;
  color: var(--esmaecido);
}

/* A lista: um cartão de vidro por movimento (o mesmo cartão de exercício do
   Detalhe do Treino), em vez das divisórias de 1px do nativo — no vidro, a
   divisória some e o cartão é o que dá o alvo. Tocar abre a ficha (#/movimento/:id). */
.movimentos { display: flex; flex-direction: column; gap: 6px; }
.movimento {
  background: var(--vidro-fundo); border: 1px solid var(--vidro-borda); border-radius: 16px;
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce), var(--vidro-sombra);
}
.movimento__cabecalho { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; }
.movimento__alvo {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 12px 0; text-align: left;
}
/* Raio concêntrico: o do cartão (16) menos o afastamento (12) = 4 — arredondado a 6 para o ícone não parecer quadrado. */
.movimento__miniatura {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--vidro-borda); color: var(--esmaecido);
}
.movimento__nome { font: 700 17px/1.2 var(--sans); letter-spacing: -0.01em; }
.movimento__play {
  flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
/* O glifo é o `.selo-de-play` de `estilo.css` — o mesmo círculo laranja com o
   triângulo que abre o vídeo no Detalhe do Treino. */
.movimento__seta { flex: 0 0 12px; color: var(--esmaecido); font-size: 22px; line-height: 1; text-align: center; }
/* Fora da amostra (1.0.2): nome esmaecido e cadeado no lugar do play e da seta. */
.movimento--bloqueado .movimento__nome { color: var(--apoio); }
.movimento--bloqueado .movimento__miniatura { opacity: 0.55; }
.movimento__cadeado { flex: 0 0 44px; text-align: center; font-size: 14px; opacity: 0.7; }
.movimentos__aviso { margin-top: 8px; color: var(--acao); }

/* ---------------------------------------------------------------- a ficha (#/movimento/:id)
   Tela cheia, sem barra. O topo é o player próprio do nativo
   (`PlayerProprioDeVideo.swift`, medidas do bloco `s_video` do protótipo):
   fundo preto da altura da tela, o vídeo 9:16 encaixado, dois véus com os
   controles. Abaixo, rolando, o corpo da sanfona nativa. Sangra a área do
   `.app` (áreas seguras e gutter) para o vídeo encostar nas bordas. */
.tela--movimento {
  gap: 0;
  margin: calc(-1 * (var(--seguro-topo) + 12px)) calc(-1 * var(--gutter)) 0;
  min-height: 100vh; min-height: 100dvh;
  background: var(--fundo);
}

/* ---- o palco ---- */
.player {
  --veu: 10, 9, 8;               /* Cores.veuDoVideo = #0A0908 */
  position: relative; width: 100%;
  height: 100vh; height: 100svh;
  background: #000; overflow: hidden; color: var(--texto);
  -webkit-user-select: none; user-select: none;
}
.player--tela-cheia, .player:fullscreen, .player:-webkit-full-screen { height: 100%; width: 100%; }
.player__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #000; cursor: pointer;
}
/* Sem vídeo, o palco encolhe ao que há: cabeçalho, painel, identificação e faixa. */
.player--sem-video { height: auto; min-height: 0; display: flex; flex-direction: column; }
.player--sem-video .player__veu-inferior,
.player--sem-video .player__veu-superior { position: relative; }
.player--sem-video .player__veu-superior { order: 0; padding-bottom: 8px; height: auto; }
/* Sem vídeo os véus são só o cabeçalho e o rodapé, no fluxo: sem máscara (ela
   apagaria o ✕) e sem o que desfocar. */
.player--sem-video .player__veu-superior, .player--sem-video .player__veu-inferior {
  -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.player--sem-video .player__painel { order: 1; padding-top: 12px; }
.player--sem-video .player__veu-inferior { order: 2; padding-top: 24px; }

/* O botão redondo laranja de 78px, que aparece e some (900 ms) ao tocar. */
.player__central {
  position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%; background: rgba(255, 107, 0, 0.94); color: var(--fundo);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.86); pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.player__central--visivel { opacity: 1; transform: scale(1); }
.player__central svg { display: block; }
.player__central--play svg { margin-left: 4px; } /* o triângulo parece descentrado sem isto */

/* A roda sobre um disco escuro — contraste em qualquer quadro. */
.player__roda {
  position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%; background: rgba(var(--veu), 0.55);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.player__roda-giro {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255, 107, 0, 0.25); border-top-color: var(--acao);
  animation: player-girar 0.9s linear infinite;
}
@keyframes player-girar { to { transform: rotate(360deg); } }

/* Os painéis do meio: sem vídeo, ou falhou. */
.player__painel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 8px var(--gutter) 0;
}
.player--falhou .player__painel {
  position: absolute; inset: 0; align-items: center; justify-content: center; padding: 24px;
}
.player__painel-etiqueta { font: 600 9px/1 var(--mono); letter-spacing: 0.16em; color: var(--acao); text-transform: uppercase; }
.player__painel-texto { font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.player__painel-texto--centrado { text-align: center; }
.player__tentar { margin-top: 8px; min-height: 44px; max-width: 220px; width: 100%; }

/* ---- véu superior: ✕ · MOVIMENTO · tela cheia · PiP ---- */
.player__veu-superior {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 170px; box-sizing: border-box;
  padding: calc(var(--seguro-topo) + 16px) var(--gutter) 0;
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(to bottom, rgba(var(--veu), 0.88), rgba(var(--veu), 0));
  /* Um desfoque leve que some junto com o degradê (a máscara vale para o que
     está por baixo também): o vídeo fica nítido onde o véu não chega. */
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.player__redondo {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--vidro-fundo-forte); border: 1px solid var(--vidro-borda); color: var(--texto);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 150ms ease-out;
}
.player__redondo:disabled { opacity: 0.35; }
.player__contexto { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 38px; }
.player__etiqueta { font: 600 9px/1 var(--mono); letter-spacing: 0.16em; color: var(--acao); text-transform: uppercase; }
/* O rótulo do bloco sob a etiqueta ("BLOCO 1"), quando o vídeo veio de um bloco do treino. */
.player__subtitulo { margin-top: 6px; font: 800 15px/1.2 var(--sans); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- véu inferior: identificação, barra, controles, faixa ---- */
.player__veu-inferior {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-top: 120px;
  background: linear-gradient(to top, rgba(var(--veu), 0.94) 55%, rgba(var(--veu), 0));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent); mask-image: linear-gradient(to top, #000 60%, transparent);
}
.player__rodape { padding: 0 var(--gutter) calc(var(--seguro-base) + 22px); }
.player__identificacao { display: flex; flex-direction: column; }
.player__posicao { font: 600 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--apoio); text-transform: uppercase; }
.player__nome { margin: 10px 0 0; font: 900 30px/1 var(--sans); letter-spacing: -0.025em; color: var(--texto); text-wrap: balance; }
.player__dica {
  margin-top: 9px; font: 400 13px/1.45 var(--sans); color: var(--apoio); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.player__barra { margin-top: 18px; display: flex; align-items: center; gap: 11px; }
.player__tempo { font: 500 11px/1 var(--mono); color: var(--apoio); font-variant-numeric: tabular-nums; }
/* A linha tem 4px; o alvo do dedo, 22. */
.player__trilho { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: 11px; }
.player__trilho:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.player__trilho-linha { display: block; width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.player__preenchimento { display: block; height: 4px; border-radius: 99px; background: var(--acao); width: 0; }

.player__controles { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.player__controle {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--vidro-borda); background: var(--vidro-fundo-forte); color: var(--texto);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.player__controle:disabled { opacity: 0.35; }
.player__controle--tocar { border: 0; background: var(--acao); color: var(--fundo); box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35); }
.player__controle--tocar:active { background: var(--acao-clara); }
.player__controle--musica, .player__controle--loop { color: var(--apoio); }
.player__controle--velocidade { width: auto; padding: 0 12px; font: 700 12px/1 var(--mono); }
.player__controle--ligado { color: var(--acao); border-color: rgba(255, 107, 0, 0.55); }
.player__volume {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--vidro-borda); border-radius: 11px; background: var(--vidro-fundo-forte);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce);
}
.player__mudo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 40px; color: var(--texto); }
.player__mudo--mudo { color: var(--esmaecido); }
.player__barras { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.player__barra-de-volume { flex: 1; min-width: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.2); padding: 0; }
.player__barra-de-volume--acesa { background: var(--acao); }

/* A faixa de exercícios da trilha: a atual em laranja, tocar troca sem fechar. */
.player__faixa {
  margin: 16px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 2px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.player__faixa::-webkit-scrollbar { display: none; }
.player__item {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 11px;
  background: var(--vidro-fundo-forte); border: 1px solid var(--vidro-borda); color: var(--texto);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce);
}
.player__item--atual { background: rgba(255, 107, 0, 0.16); border-color: rgba(255, 107, 0, 0.55); color: var(--acao); }
.player__miniatura { flex: none; width: 26px; height: 32px; border-radius: 5px; background: var(--vidro-fundo-forte); border: 1px solid var(--vidro-borda); }
.player__item-nome { font: 600 12px/1 var(--sans); white-space: nowrap; }

/* Sete controles numa linha de 335px: abaixo de 400px os quadrados encolhem
   de 40 para 36 e os vãos de 8 para 6, para as seis barrinhas terem chão. */
@media (max-width: 400px) {
  .player__controles { gap: 6px; }
  .player__controle { width: 36px; height: 36px; }
  .player__controle--velocidade { width: auto; padding: 0 8px; font-size: 11px; }
  .player__volume { height: 36px; padding: 0 8px; gap: 6px; }
  .player__mudo { width: 18px; height: 36px; }
  .player__barras { gap: 2px; min-width: 30px; }
}

/* Em telas baixas (paisagem no telefone) a faixa e a dica cedem lugar ao vídeo. */
@media (max-height: 560px) {
  .player__faixa, .player__dica { display: none; }
  .player__veu-inferior { padding-top: 60px; }
}

/* ---- o corpo da ficha: a sanfona nativa aberta (`LinhaDeMovimento.detalhes`) ---- */
.ficha {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px var(--gutter) calc(var(--seguro-base) + 32px);
  background: var(--fundo);
}
.ficha > * { flex-shrink: 0; }
.ficha__etiqueta { font: 600 9px/1 var(--mono); letter-spacing: 0.16em; color: var(--esmaecido); text-transform: uppercase; }
.ficha__etiqueta--acao { color: var(--acao); }
.ficha__campo { display: flex; flex-direction: column; gap: 8px; }
.ficha__texto { font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.ficha__texto--apoio { color: var(--apoio); }
.ficha__texto-compacto { font-size: 12px; line-height: 1.45; color: var(--texto-suave); }
.ficha__versao { display: flex; flex-direction: column; gap: 4px; }
.ficha__voltar-versao { align-self: flex-start; min-height: 32px; padding: 4px 0; font: 600 12px/1.4 var(--sans); color: var(--esmaecido); text-align: left; }
.ficha__par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ficha__variacao {
  display: flex; flex-direction: column; gap: 8px; padding: 13px;
  border-radius: 16px; background: var(--vidro-fundo); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce), var(--vidro-sombra);
}
.ficha__variacao--ativa { border-color: var(--acao-borda); }
.ficha__ver-variacao {
  margin-top: 4px; padding: 8px 10px; border-radius: 6px; text-align: left; /* concêntrico: 16 − 13 ≈ 6 */
  border: 1px solid var(--vidro-borda); background: var(--vidro-fundo-forte); color: var(--texto); font: 600 12px/1.3 var(--sans);
}
.ficha__ver-variacao:active { background: var(--vidro-fundo); }
/* Abaixo de 360px as duas colunas viram uma (o nativo empilha no Dynamic Type ampliado). */
@media (max-width: 359px) {
  .ficha__par { grid-template-columns: 1fr; }
}

.movimentos__vazio { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.movimentos__vazio .botao { margin-top: 8px; min-height: 48px; }

/* ---------------------------------------------------------------- Progresso */
.tela--progresso { gap: 26px; }

/* Três cartões de métrica lado a lado. */
.metricas-progresso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cartao--metrica { padding: 16px 12px 14px; gap: 0; min-width: 0; }
.cartao--metrica .etiqueta { font-size: 10px; letter-spacing: 0.14em; }
.cartao--metrica__valor { font: 700 clamp(20px, 6.2vw, 26px) / 1 var(--mono); padding-top: 10px; letter-spacing: -0.02em; white-space: nowrap; }
.cartao--metrica__apoio { font-size: 12px; color: var(--apoio); padding-top: 4px; }
.cartao--metrica__rodape { font-size: 11px; color: var(--esmaecido); padding-top: 6px; }
@media (max-width: 359px) {
  .metricas-progresso { grid-template-columns: 1fr 1fr; }
  .metricas-progresso > :last-child { grid-column: 1 / -1; }
}

/* A grade numerada da Missão 50: 10 colunas de células quadradas. */
.grade-missao__contador { font-size: 15px; color: var(--esmaecido); }
.grade-missao__contador b { color: var(--texto); font-weight: 600; }
.grade-missao { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.grade-missao__celula {
  aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--vidro-borda); background: var(--vidro-fundo);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--mono); color: var(--esmaecido); letter-spacing: -0.02em;
}
.grade-missao__celula--comecada { background: var(--acao-tenue); border-color: var(--acao-borda); color: var(--texto-suave); }
.grade-missao__celula--atual { border-color: var(--acao); color: var(--acao); }
.grade-missao__celula--feita { background: var(--acao); border-color: var(--acao); color: var(--fundo); }
.grade-missao__legenda { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--esmaecido); padding-top: 2px; }
.grade-missao__amostra { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--vidro-borda); background: var(--vidro-fundo); }
.grade-missao__amostra--comecada { background: var(--acao-tenue); border-color: var(--acao-borda); }

/* POR MÉTODO: barras horizontais; só a maior leva a cor de ação. */
.barras-metodo { display: flex; flex-direction: column; gap: 11px; }
.barra-metodo { display: grid; grid-template-columns: 88px 1fr 24px; align-items: center; gap: 12px; }
.barra-metodo__rotulo { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--apoio); }
.barra-metodo__trilho { display: block; height: 10px; border-radius: 999px; background: var(--vidro-fundo-forte); box-shadow: inset 0 0 0 1px var(--vidro-borda); overflow: hidden; }
/* refine: mudança de largura = resize → --resize-dur / --resize-ease (era 0.3s ease-out). */
.barra-metodo__cheio { display: block; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.28); transition: width var(--resize-dur) var(--resize-ease); }
.barra-metodo__cheio--destaque { background: var(--acao); }
.barra-metodo__numero { font-size: 11px; font-weight: 600; color: var(--esmaecido); text-align: right; }

/* ÚLTIMAS 8 SEMANAS: colunas com uma barra que sobe da base. */
.grafico-semanas { display: flex; align-items: flex-end; gap: 8px; }
.grafico-semanas__coluna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.grafico-semanas__area { height: 96px; display: flex; align-items: flex-end; overflow: hidden; }
.grafico-semanas__barra { display: block; width: 100%; border-radius: 5px; background: rgba(255, 255, 255, 0.28); }
.grafico-semanas__barra--atual { background: var(--acao); }
.grafico-semanas__barra--vazia { height: 3px; background: var(--vidro-fundo-forte); border: 1px solid var(--vidro-borda); }
.grafico-semanas__rotulo { font-size: 9px; color: var(--esmaecido); text-align: center; white-space: nowrap; }

/* O histórico: uma linha por sessão, a mais recente no alto. */
.historico { display: flex; flex-direction: column; gap: 8px; }
.sessao {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 12px 14px; text-align: left;
  background: var(--vidro-fundo); border: 1px solid var(--vidro-borda); border-radius: 16px;
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-realce), var(--vidro-sombra);
}
.sessao:active { background: var(--vidro-fundo-forte); }
.sessao__numero { font: 700 18px/1 var(--mono); color: var(--acao); }
.sessao--incompleta .sessao__numero { color: var(--apoio); }
.sessao__meio { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sessao__metodo { font: 800 15px/1.1 var(--sans); }
.sessao--incompleta .sessao__metodo { color: var(--texto-suave); }
.sessao__data { font-size: 10px; letter-spacing: 0.08em; color: var(--esmaecido); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sessao__direita { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; }
.sessao__tempo { font-weight: 600; }
.sessao__rpe, .sessao__estado { font-size: 10px; letter-spacing: 0.1em; color: var(--esmaecido); }
.tela--progresso .botao--texto { min-height: 40px; }

/* ---------------------------------------------------------------- comprar (o checkout Pix)
   Mora em `checkout.css`, carregada pela própria tela quando abre. */