/* Telas do aluno — Fase 4.
   Tudo aqui é desenhado para o celular na mão, de pé, entre séries: alvo de
   toque grande, número grande, nada que exija mira fina. */

/* ---------- treino do dia ---------- */

.treino-do-dia { max-width: 760px; }
.treino-progresso { margin-bottom: var(--sp-4); position: sticky; top: 8px; z-index: 5; }
.treino-fim { margin-top: var(--sp-5); }

.exercicio-do-treino { padding-bottom: var(--sp-4); }
.exercicio-topo { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-3); }
/* O nome do exercício quebra em duas linhas em vez de virar reticências: num
   treino com "Tríceps na corda" e "Tríceps testa", "Tríceps…" não identifica
   nada. */
.exercicio-topo h3 { font-size: 18px; letter-spacing: -0.02em; white-space: normal; overflow-wrap: anywhere; }
.exercicio-topo .btn { flex: 0 0 auto; }
.exercicio-identidade { flex: 1 1 auto; min-width: 0; }
.exercicio-miniatura {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px;
  object-fit: contain; background: #f0f0f0; filter: grayscale(1);
}
.exercicio-miniatura-vazia { display: block; }

.exercicio-recado {
  margin: 0 0 var(--sp-3); padding: 10px 14px; font-size: 14px; line-height: 1.5;
  border-left: 3px solid #111; background: #f7f7f7; border-radius: 0 10px 10px 0;
}

/* "Da última vez" é a informação que faz a tela existir: fica acima dos campos,
   não escondida num histórico. */
.ultima-vez {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; margin-bottom: var(--sp-3);
  border: 1px dashed #d4d4d4; border-radius: 12px; background: #fafafa;
}
.ultima-vez .numeric { font-weight: 700; letter-spacing: -0.01em; }

.series { display: flex; flex-direction: column; gap: 10px; }
/* Grade, não flex: com flex-wrap as duas caixas caíam uma embaixo da outra no
   celular e cada série ocupava meia tela. Peso e reps precisam ficar lado a
   lado — é um gesto só, entre uma série e outra. */
.serie {
  display: grid; grid-template-columns: 30px 1fr 1fr 16px; align-items: end; gap: 10px;
  padding: 10px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fff;
}
.serie-feita { border-color: #111; background: #fbfbfb; }
.serie-numero { font-size: 13px; font-weight: 700; padding-bottom: 12px; color: #666; }
.serie .field-inline { margin: 0; min-width: 0; }
.serie .field-inline input { width: 100%; font-size: 17px; font-weight: 600; text-align: center; }
.serie-ok { min-width: 20px; padding-bottom: 12px; font-weight: 700; }

/* Guardado no aparelho não é erro: nada de vermelho, nada de alarme. */
.aviso-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding: 12px 16px;
  border: 1px dashed #999; border-radius: 12px; background: #fafafa; font-size: 14px;
}
.aviso-fila.precisa-atencao { border-style: solid; border-width: 2px; background: #f5f5f5; }
.serie-pendente { border-style: dashed; border-color: #999; }

.descanso { margin-top: var(--sp-3); }
.descanso[data-rodando="1"] { background: #111; color: #fff; border-color: #111; }

.video-embed { aspect-ratio: 16 / 9; margin-top: var(--sp-4); border-radius: 12px; overflow: hidden; background: #000; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- frequência ---------- */

.calendario-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendario-mes .dia-rotulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #aaa; text-align: center;
  padding-bottom: 6px;
}
.dia-celula {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px;
  border: 1px solid #e8e8e8; font-size: 14px; font-weight: 600; color: #555;
  line-height: 1;
}
.dia-celula.vazia { border-color: transparent; background: transparent; }
.dia-celula.treinou { background: #111; border-color: #111; color: #fff; }
.dia-celula.hoje { outline: 2px solid #111; outline-offset: 2px; }

/* ---------- evolução ---------- */

.grafico-progressao { width: 100%; height: auto; display: block; }
.grafico-progressao .linha { fill: none; stroke: #111; stroke-width: 2; }
.grafico-progressao .ponto { fill: #111; }
.grafico-progressao .grade { stroke: #e5e5e5; stroke-width: 1; }
.grafico-progressao .rotulo { font-size: 10px; fill: #999; }

/* Treinos realizados. Mora aqui junto do resto do treino, mas o professor usa
   as mesmas classes na aba do perfil do aluno — o histórico é o mesmo, e duas
   folhas de estilo para a mesma leitura divergiriam na primeira mudança.

   Fechado por padrão: a data e a divisão respondem "não apagou nada", que é a
   pergunta; as cargas só interessam a quem abre. */
.treino-feito { border: 1px solid #e5e5e5; border-radius: 12px; background: #fff; }
.treino-feito[open] { border-color: #111; }
.treino-feito-resumo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  min-height: var(--tap); padding: 10px 16px;
  cursor: pointer; list-style: none;
}
/* O triângulo nativo desalinha o `flex` e aparece diferente em cada navegador. */
.treino-feito-resumo::-webkit-details-marker { display: none; }
.treino-feito-identidade { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.treino-feito-corpo { padding: 12px 16px 14px; border-top: 1px solid #f0f0f0; }
.treino-feito-exercicio {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 8px 0;
}
.treino-feito-exercicio + .treino-feito-exercicio { border-top: 1px dashed #ebebeb; }
/* Cada série é indivisível: com o texto corrido, a linha quebrava entre o "×" e
   a repetição e "30 kg × 10" virava "30 kg ×" numa linha e "10" na outra. O
   espaçamento separa as séries — ponto entre elas viraria um item solto no
   início da linha seguinte. */
.treino-feito-series {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  font-weight: 700; justify-content: flex-end;
}
.treino-feito-serie { white-space: nowrap; }

@media (max-width: 700px) {
  .treino-progresso { position: static; }

  /* Nome e cargas um sobre o outro: lado a lado, "42,5 kg × 10 · 45 kg × 8"
     quebrava no meio de um número e ficava ilegível. */
  .treino-feito-exercicio { flex-direction: column; gap: 2px; }
  .treino-feito-series { justify-content: flex-start; }
  .exercicio-miniatura { width: 52px; height: 52px; flex-basis: 52px; }
  .exercicio-topo { gap: 10px; }
  .exercicio-topo h3 { font-size: 16px; }

  /* A 390px sobravam 116px para a identidade do exercício, espremida entre a
     miniatura e o "Como fazer": o nome quebrava em duas linhas e
     "4 × 8-10 · descanso 90s · Peito" em três. O botão desce para a própria
     linha, alinhado com o texto — 48px de alvo de toque inteiros, e o nome
     ganha a largura do cartão. Os 62px são a miniatura (52) mais o gap (10). */
  .exercicio-topo { flex-wrap: wrap; align-items: flex-start; }
  .exercicio-identidade { flex-basis: calc(100% - 62px); }
  .exercicio-topo .btn { margin-left: 62px; }
  .ultima-vez .numeric { font-size: 15px; }
  .serie { grid-template-columns: 26px 1fr 1fr 14px; gap: 8px; padding: 8px; }

  /* calendário: sem padding no card, grade ocupa 100% */
  .card-calendario { padding: 0; }
  .card-calendario .calendario-mes { gap: 3px; }
  .card-calendario .calendarios-legenda,
  .card-calendario > .muted { padding: 8px 12px 12px; }
}

/* Dois toques para excluir: o segundo estado precisa parecer outro botão. */
.btn-perigo { background: #111; color: #fff; border-color: #111; }

/* Setas de reordenar no editor de ficha. Quadradas e estreitas para caberem ao
   lado de "Renomear"/"Excluir" sem empurrar a linha, mas com a mesma altura
   mínima dos outros botões — o professor mexe nisso no celular.

   Desabilitado importa aqui: nos extremos da lista a seta continua visível e
   apagada, em vez de desaparecer. Botão que some muda o lugar dos vizinhos a
   cada movimento, e o dedo acerta o errado. */
.btn-mover { padding: 0; width: 40px; min-width: 40px; font-size: 15px; line-height: 1; }
.btn-mover:disabled { opacity: 0.3; cursor: default; }
.prescricao-exercicio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 13px;
}