/* Estilos específicos de tela. Nada aqui é reaproveitado fora do seu contexto —
   o que vira peça comum sobe para componentes.css. */

/* ------------------------------------------------------------------ */
/* Carregando                                                         */
/* ------------------------------------------------------------------ */
.esqueleto {
  border-radius: var(--r-lg);
  background: linear-gradient(100deg,
    var(--superficie) 30%, var(--superficie-2) 46%, var(--superficie) 62%);
  background-size: 300% 100%;
  animation: brilho 1.5s linear infinite;
}
@keyframes brilho { to { background-position: -160% 0 } }

.mono, .num.mono {
  font-family: var(--fonte-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  font-weight: 700;
}

.lista-marcada {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lista-marcada li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

/* ------------------------------------------------------------------ */
/* Porta de entrada                                                   */
/* ------------------------------------------------------------------ */
.porta {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
  max-width: 460px;
  margin-inline: auto;
  padding-top: 8vh;
  padding-bottom: var(--e-7);
}

.porta-topo { display: flex; flex-direction: column; gap: var(--e-4); }
.porta-frase {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--texto-2);
  letter-spacing: -0.01em;
}

.porta-portas { display: flex; flex-direction: column; gap: var(--e-3); }

.porta-opcao {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
}
.porta-opcao strong { display: block; font-size: var(--t-lg); letter-spacing: -0.02em; }
.porta-opcao .seta { color: var(--texto-3); }
.porta-opcao .seta svg { width: 20px; height: 20px; }

.porta-icone {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--superficie-3);
  color: var(--texto-2);
}
.porta-icone--acento { background: var(--acento); color: var(--sobre-acento); }

.porta-lista { display: flex; flex-direction: column; gap: var(--e-4); }

.porta-dif { display: flex; gap: var(--e-3); align-items: flex-start; }
.porta-dif strong { font-size: var(--t-md); letter-spacing: -0.01em; }
.porta-dif p { margin-top: 2px; line-height: 1.5; }
.porta-dif-ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--acento-fraco);
  color: var(--acento);
  margin-top: 1px;
}

.porta-rodape { text-align: center; line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Entrada por código                                                 */
/* ------------------------------------------------------------------ */
.entrar-topo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-5);
}
.entrar-ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--acento-fraco);
  color: var(--acento);
}

/* ------------------------------------------------------------------ */
/* Anamnese                                                           */
/* ------------------------------------------------------------------ */
.anam { display: flex; flex-direction: column; gap: var(--e-5); }

.anam-trilha { display: flex; gap: 5px; }
.anam-trilha i {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--superficie-3);
  transition: background var(--normal);
}
.anam-trilha i.feito { background: var(--acento-escuro); }
.anam-trilha i.atual { background: var(--acento); }

.anam-cabeca { display: flex; flex-direction: column; gap: var(--e-2); }
.anam-cabeca h2 { letter-spacing: -0.03em; }
.anam-cabeca p { line-height: 1.55; }

.parq { display: flex; flex-direction: column; gap: var(--e-2); }
.parq-pergunta {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--t-md);
  line-height: 1.45;
}
.parq-n {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-3);
  font-size: 11px;
  margin-top: 2px;
}

/* Semáforo do resultado */
.semaforo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  text-align: center;
  padding: var(--e-7) var(--e-4);
  border-radius: var(--r-xl);
  border: 1px solid var(--borda);
  background: var(--superficie);
}
.semaforo h2 { letter-spacing: -0.03em; }
.semaforo p { line-height: 1.55; max-width: 34ch; }

.semaforo-luz {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: var(--e-2);
}
.semaforo--verde { background: linear-gradient(180deg, var(--verde-fraco), transparent 62%), var(--superficie); border-color: rgba(61,220,132,.3); }
.semaforo--verde .semaforo-luz { background: var(--verde-fraco); color: var(--verde); box-shadow: 0 0 0 8px rgba(61,220,132,.07); }
.semaforo--ambar { background: linear-gradient(180deg, var(--ambar-fraco), transparent 62%), var(--superficie); border-color: rgba(255, 197, 61,.3); }
.semaforo--ambar .semaforo-luz { background: var(--ambar-fraco); color: var(--ambar); box-shadow: 0 0 0 8px rgba(255, 197, 61,.07); }
.semaforo--vermelho { background: linear-gradient(180deg, var(--alerta-fraco), transparent 62%), var(--superficie); border-color: rgba(255,140,26,.32); }
.semaforo--vermelho .semaforo-luz { background: var(--alerta-fraco); color: var(--alerta); box-shadow: 0 0 0 8px rgba(255,140,26,.07); }

/* ------------------------------------------------------------------ */
/* Aluno — hoje                                                       */
/* ------------------------------------------------------------------ */
.saudacao {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.saudacao h2 { font-size: var(--t-2xl); letter-spacing: -0.035em; }

.treino-hoje h2 { font-size: var(--t-2xl); letter-spacing: -0.035em; }

.hora {
  flex: none;
  min-width: 52px;
  font-size: var(--t-lg);
  color: var(--texto);
}

.cartao--transferida { border-color: rgba(88, 166, 255, .3); }

/* ------------------------------------------------------------------ */
/* Aluno — execução do treino                                         */
/* ------------------------------------------------------------------ */
.exec-cabeca { display: flex; gap: var(--e-4); align-items: flex-start; }
.exec-cabeca h2 { font-size: var(--t-xl); letter-spacing: -0.03em; }
.exec-corpo { flex: none; width: 84px; }
.exec-corpo .corpo-svg { width: 84px; }

.serie {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-md);
  border: 1px solid var(--borda);
  background: var(--superficie);
}

.serie--feita {
  flex-direction: row;
  align-items: center;
  gap: var(--e-3);
  background: var(--acento-fraco);
  border-color: transparent;
  padding: 10px var(--e-3);
}
.serie--feita .serie-n { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
.serie-ok { color: var(--acento); display: grid; place-items: center; }

.serie-n {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: var(--t-sm);
}

.serie-campos { display: flex; gap: var(--e-2); }

/* Passo de carga e repetições: alvos grandes de propósito — a mão está suada
   e o celular na horizontal em cima do banco. */
.passo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.passo-btn {
  flex: none;
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: var(--superficie-3);
  color: var(--texto-2);
  transition: background var(--rapido), color var(--rapido);
}
.passo-btn:hover { background: var(--borda-forte); color: var(--texto); }
.passo-btn:active { transform: scale(.94); }

.passo-valor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.passo-valor input {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--t-xl);
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}
.passo-valor input::-webkit-outer-spin-button,
.passo-valor input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.passo-valor span { font-size: 10px; color: var(--texto-3); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* RIR: cinco opções, sempre visíveis, com a do alvo destacada. */
.rir { display: flex; gap: 4px; }
.rir-op {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 2px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: all var(--rapido);
}
.rir-op .num { font-size: var(--t-lg); }
.rir-op:hover { border-color: var(--borda-forte); }
.rir-op.alvo { border-color: var(--acento-fraco-2); color: var(--texto); }
.rir-op.escolhido {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}

/* Descanso */
.descanso {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
}
.descanso-ico { color: var(--acento); display: grid; place-items: center; }
.descanso-tempo { font-size: var(--t-2xl); line-height: 1.05; }
.descanso.acabando { border-color: var(--acento); background: var(--acento-fraco); }
.descanso.acabando .descanso-tempo { color: var(--acento); }

/* Fim do treino */
.fim { align-items: center; padding-top: var(--e-6); }
.fim > * { width: 100%; }
.fim-selo {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento-fraco);
  color: var(--acento);
  box-shadow: 0 0 0 10px rgba(255, 46, 46, .06);
  margin-inline: auto;
  width: 84px;
}

/* ------------------------------------------------------------------ */
/* Histórico                                                          */
/* ------------------------------------------------------------------ */
.data-caixa {
  flex: none;
  width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  line-height: 1.1;
}
.data-caixa .num { font-size: var(--t-md); }
.data-caixa span:last-child { font-size: 9px; color: var(--texto-3); font-weight: 700; text-transform: uppercase; }

/* ------------------------------------------------------------------ */
/* Painel do personal                                                 */
/* ------------------------------------------------------------------ */
.painel-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .painel-grade { grid-template-columns: 1fr 1fr; }
  .painel-grade--construtor { grid-template-columns: 1.25fr 1fr; }
}

.aviso--clicavel {
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: filter var(--rapido);
}
.aviso--clicavel:hover { filter: brightness(1.14); }
.aviso--clicavel .seta { color: currentColor; opacity: .55; display: grid; place-items: center; }

.busca {
  position: relative;
  display: flex;
  align-items: center;
}
.busca > svg {
  position: absolute;
  left: 13px;
  color: var(--texto-3);
  pointer-events: none;
}
.busca .entrada { padding-left: 40px; }

/* Radar de evasão */
.risco { border-left: 3px solid var(--borda); }
.risco--medio { border-left-color: var(--ambar); }
.risco--alto { border-left-color: var(--alerta); }
.risco-nota {
  flex: none;
  font-size: var(--t-lg);
  color: var(--texto-3);
}
.risco--alto .risco-nota { color: var(--alerta); }
.risco--medio .risco-nota { color: var(--ambar); }

.aula .hora { min-width: 48px; font-size: var(--t-md); }

.codigo-linha {
  font-size: var(--t-xl);
  letter-spacing: .14em;
  color: var(--acento);
}

.aluno-selos {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
@media (min-width: 720px) {
  .aluno-selos { display: flex; }
}

.so-desktop { display: none; }
.so-desktop-inline { display: none; }
@media (min-width: 1024px) {
  .so-desktop { display: flex; }
  .so-desktop-inline { display: inline; }
}

/* Rótulo que some quando a linha aperta: no celular o ícone do botão já diz o
   que ele faz, e o nome do aluno precisa do espaço mais do que a palavra. */
.so-largo { display: none; }
@media (min-width: 560px) {
  .so-largo { display: inline; }
}

/* Ficha do aluno */
.ficha-topo {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
.ficha-topo h2 { letter-spacing: -0.03em; }
.ficha-acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
@media (max-width: 560px) {
  .ficha-acoes { width: 100%; }
  .ficha-acoes > * { flex: 1; }
}

/* ------------------------------------------------------------------ */
/* Biblioteca de exercícios                                           */
/* ------------------------------------------------------------------ */
.grade-exercicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
}
@media (min-width: 700px) { .grade-exercicios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .grade-exercicios { grid-template-columns: 1fr 1fr 1fr; } }

.ex-cartao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
}
.ex-cartao .titulo { display: block; font-weight: 650; font-size: var(--t-sm); }
.ex-cartao .sub { display: block; font-size: var(--t-xs); color: var(--texto-3); margin-top: 1px; }
.ex-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-2);
}

.ponto-legenda { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ponto-primario { background: var(--acento); }
.ponto-secundario { background: var(--acento-escuro); }

/* ------------------------------------------------------------------ */
/* Rotinas                                                            */
/* ------------------------------------------------------------------ */
.grade-rotinas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
}
@media (min-width: 760px) { .grade-rotinas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .grade-rotinas { grid-template-columns: 1fr 1fr 1fr; } }

.rotina-cartao strong { display: block; font-size: var(--t-md); letter-spacing: -0.015em; }
.rotina-cartao p { margin-top: 3px; line-height: 1.45; }

/* Construtor */
.item-rotina {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.item-n {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--t-xs);
}
.item-campos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-2);
}
.mini-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.mini-campo > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.mini-campo .entrada {
  height: 38px;
  padding: 0 8px;
  text-align: center;
  font-size: var(--t-md);
  background: var(--superficie);
}
.mini-campo i {
  position: absolute;
  right: 8px;
  bottom: 11px;
  font-size: 10px;
  font-style: normal;
  color: var(--texto-3);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Agenda do personal                                                 */
/* ------------------------------------------------------------------ */
.semana {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e-2);
}
.dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 2px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-2);
  transition: all var(--rapido);
}
.dia:hover { border-color: var(--borda-forte); }
.dia.ativo { background: var(--acento-fraco); border-color: var(--acento); color: var(--texto); }
.dia.hoje .dia-num { color: var(--acento); }
.dia-nome { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dia-num { font-family: var(--fonte-num); font-weight: 800; font-size: var(--t-lg); letter-spacing: -.03em; }
.dia-pontos { display: flex; gap: 2px; height: 6px; }
.dia-pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--texto-3); }
.dia-pontos i.marcada { background: var(--acento); }
.dia-pontos i.concluida { background: var(--verde); }
.dia-pontos i.faltou { background: var(--alerta); }

/* ------------------------------------------------------------------ */
/* Transferência                                                      */
/* ------------------------------------------------------------------ */
.escopo { gap: 10px; }
.escopo-ico {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--verde-fraco);
  color: var(--verde);
}
.escopo--nao { opacity: .6; }
.escopo--nao .escopo-ico { background: var(--alerta-fraco); color: var(--alerta); }
.escopo--nao .t-sm { text-decoration: line-through; text-decoration-color: var(--texto-3); }

/* ------------------------------------------------------------------ */
/* Código e vitrine                                                   */
/* ------------------------------------------------------------------ */
.codigo-grande {
  font-size: clamp(30px, 9vw, 44px);
  letter-spacing: .12em;
  color: var(--acento);
  line-height: 1.1;
}

.qr {
  padding: 10px;
  border-radius: var(--r-md);
  background: #eef3f7;
  line-height: 0;
}

.link-caixa {
  width: 100%;
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  border: 1px dashed var(--borda-forte);
  color: var(--texto-2);
  text-align: center;
  letter-spacing: .02em;
  word-break: break-all;
}

.mensagem {
  padding: var(--e-3);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-2);
  line-height: 1.55;
}

.vitrine { display: flex; gap: var(--e-4); align-items: center; }
.vitrine h3 { letter-spacing: -0.025em; }

/* ------------------------------------------------------------------ */
/* Assinatura                                                         */
/* ------------------------------------------------------------------ */
.grade-planos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
}
@media (min-width: 700px) { .grade-planos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .grade-planos { grid-template-columns: repeat(4, 1fr); } }

.plano {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.plano ul { flex: 1; }
.plano--atual { border-color: var(--acento-fraco-2); }