/* ═══════════════════════════════════════════════════════════════════════════
MZSQUAD · PAINEL DO ALUNO — THEME v3 (icefield)
Camada carregada POR ÚLTIMO em student.html, por cima de styles.css.
Mesmo contrato da camada do consultor (theme-v3.css):
· nada de !important — onde precisa vencer a cascata antiga, o seletor é
qualificado com .student-page (a classe do );
· styles.css não é editado;
· reverter o visual inteiro = apagar o de theme-v3-student.css.
Premissa de layout: MOBILE-FIRST. Ninguém entra pelo PC. Toda medida aqui
foi resolvida primeiro em 390px de largura; desktop é consequência.
Especificação: 00 · MARCA/identidade-visual/theme-v3-aluno-spec.md
Kit de origem: 00 · MARCA/identidade-visual/console-v3-ui-kit/
ÍNDICE
1 Tokens 8 Login 15 Dieta
2 Atmosfera 9 Cabeçalho 16 Progresso
3 Animações 10 Ilha de navegação 17 Plano
4 Tipografia 11 Troca de aba 18 Check-in
5 Vidro 12 Superfícies wf- 19 Notificações
6 Botões 13 Home 20 Modais e folhas
7 Campos 14 Treino
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 1 · TOKENS ══════════════════════════════════════════════════════════ */
:root {
--display: Inter, system-ui, sans-serif;
--body: Inter, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--void: #05080a;
--ice: #edf4f6;
--blue: #5aa7ff;
--blue-soft: #8fc2ff;
--bright: #cfe9ff;
--ink: #edf4f6;
--ink-75: rgba(237, 244, 246, .75);
--ink-62: rgba(237, 244, 246, .62);
--ink-50: rgba(237, 244, 246, .5);
--ink-38: rgba(237, 244, 246, .38);
--ink-28: rgba(237, 244, 246, .28);
--hair: rgba(237, 244, 246, .10);
--hair-soft: rgba(237, 244, 246, .08);
--muted: var(--ink-62);
--ghost: var(--ink-38);
--line: var(--hair);
--line2: rgba(237, 244, 246, .18);
--glass: rgba(10, 15, 20, .30);
--glass-dark: rgba(10, 15, 20, .88);
/* O kit v3 não tem verde, vermelho nem âmbar: bom/ativo é azul, atenção e
risco são azul-gelo. Reapontar os tokens converte de uma vez os badges,
chips e barras herdados do tema antigo. */
--green: var(--blue);
--amber: var(--blue-soft);
--red: var(--bright);
--glass-bg: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .012) 45%), rgba(10, 15, 20, .30);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 34px rgba(237, 244, 246, .025), 0 4px 12px rgba(0, 0, 0, .25), 0 20px 50px -20px rgba(0, 0, 0, .6);
--r-card: 26px;
/* Uma curva só no painel inteiro. Redefinir --ease aqui converte de uma vez
as transições que styles.css já escreve com var(--ease). */
--ease: cubic-bezier(.22, 1, .36, 1);
--spring: cubic-bezier(.22, 1, .36, 1);
/* Altura reservada para a ilha flutuante + respiro. Toda aba usa este valor
no padding de baixo — muda num lugar só. */
--island-clear: 104px;
}
/* ═══ 2 · ATMOSFERA ═══════════════════════════════════════════════════════
Os 3 radiais + vinheta + grão do v3, no lugar do fundo antigo. */
body.student-page::before {
background:
radial-gradient(46% 40% at 14% 14%, rgba(86, 126, 145, .20), transparent 70%),
radial-gradient(58% 48% at 64% 100%, rgba(60, 93, 108, .17), transparent 70%),
radial-gradient(34% 30% at 86% 22%, rgba(96, 140, 165, .12), transparent 70%),
radial-gradient(120% 120% at 50% 30%, transparent 40%, rgba(0, 0, 0, .72) 100%);
}
body.student-page::after {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E');
background-size: 240px 240px;
opacity: .05;
mix-blend-mode: overlay;
mask-image: none;
-webkit-mask-image: none;
}
.student-page ::selection { background: var(--ink); color: var(--void); }
/* Barra de rolagem fina e visível — o tema antigo escondia todas. */
.student-page * { scrollbar-width: thin; scrollbar-color: rgba(237, 244, 246, .14) transparent; }
.student-page *::-webkit-scrollbar { display: block; width: 6px; height: 6px; }
.student-page *::-webkit-scrollbar-thumb { background: rgba(237, 244, 246, .14); border-radius: 999px; }
.student-page *::-webkit-scrollbar-track { background: transparent; }
/* ═══ 3 · ANIMAÇÕES DO v3 ═════════════════════════════════════════════════ */
@keyframes csIn { from { opacity: 0; transform: translateY(22px) scale(.988); filter: blur(8px); } }
@keyframes csView { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
@keyframes csRise { from { opacity: 0; transform: translateY(7px); } }
@keyframes csFade { from { opacity: 0; } }
@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes csSheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
.student-page *, .student-page *::before, .student-page *::after {
animation-duration: .01ms; transition-duration: .01ms;
}
}
/* ═══ 4 · TIPOGRAFIA ══════════════════════════════════════════════════════ */
.student-page { font-family: var(--body); }
.student-page .word {
font-family: var(--display); font-weight: 600; letter-spacing: .24em;
color: var(--ink-50);
}
.student-page .panel-title {
font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0;
}
.student-page .micro {
font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-38);
}
.student-page .status { font-family: var(--body); font-size: 12.5px; color: var(--ink-50); }
/* Todo número do painel em alinhamento tabular. */
.student-page b, .student-page strong { font-variant-numeric: tabular-nums; }
/* A wake-line pulsante do tema antigo vira filete estático. */
.student-page .wake-line {
animation: none; width: 40px;
background: linear-gradient(90deg, var(--hair), transparent);
}
/* ═══ 5 · SUPERFÍCIES DE VIDRO ════════════════════════════════════════════ */
.student-page .glass-panel {
border: 0;
border-radius: var(--r-card);
background: var(--glass-bg);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: var(--glass-shadow);
animation: csIn 850ms var(--ease) both;
}
/* ═══ 6 · BOTÕES ══════════════════════════════════════════════════════════ */
.student-page .primary-action,
.student-page .ghost-action {
border: 0; border-radius: 12px; min-height: 44px; padding: 0 18px;
font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
transition: transform 300ms var(--ease), background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.student-page .primary-action {
background: var(--ink); color: var(--void);
box-shadow: 0 2px 10px rgba(237, 244, 246, .12);
}
.student-page .primary-action:hover { box-shadow: 0 6px 20px rgba(237, 244, 246, .2); transform: translateY(-1px); }
.student-page .ghost-action { background: rgba(237, 244, 246, .06); color: var(--ink-75); }
.student-page .ghost-action:hover { background: rgba(237, 244, 246, .1); color: var(--ink); transform: translateY(-1px); }
.student-page .primary-action:active,
.student-page .ghost-action:active { transform: scale(.96); opacity: 1; }
.student-page .compact-action { min-height: 34px; padding: 0 13px; border-radius: 10px; font-size: 11px; }
.student-page .text-action {
font-family: var(--mono); font-size: 11px; letter-spacing: .15em; color: var(--ink-38);
transition: color 300ms ease;
}
.student-page .text-action:hover { color: var(--ink); }
.student-page button:focus-visible,
.student-page a:focus-visible,
.student-page input:focus-visible,
.student-page textarea:focus-visible {
outline: 1px solid rgba(90, 167, 255, .7); outline-offset: 2px;
}
/* Botões da família wf- (o par primário/fantasma que o app usa de verdade). */
.student-page .wf-pa,
.student-page .wf-ga {
border: 0; border-radius: 12px; min-height: 46px;
font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
transition: transform 300ms var(--ease), background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.student-page .wf-pa { background: var(--ink); color: var(--void); box-shadow: 0 2px 10px rgba(237, 244, 246, .12); }
.student-page .wf-pa:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(237, 244, 246, .2); }
.student-page .wf-ga { background: rgba(237, 244, 246, .06); color: var(--ink-75); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07); }
.student-page .wf-ga:hover { background: rgba(237, 244, 246, .1); color: var(--ink); }
.student-page .wf-pa:active, .student-page .wf-ga:active { transform: scale(.96); }
.student-page .wf-pa.sm, .student-page .wf-ga.sm { min-height: 36px; border-radius: 10px; font-size: 11px; }
.student-page .wf-link { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-50); }
.student-page .wf-link:hover { color: var(--ink); }
/* ═══ 7 · CAMPOS ══════════════════════════════════════════════════════════ */
.student-page .line-input,
.student-page .area-input {
border-bottom: 0;
box-shadow: 0 1px 0 rgba(237, 244, 246, .1);
font-family: var(--body); font-size: 12.5px;
transition: box-shadow 500ms ease;
}
.student-page .line-input:focus,
.student-page .area-input:focus {
border-bottom-color: transparent;
box-shadow: 0 1px 0 rgba(90, 167, 255, .55);
}
.student-page input::placeholder,
.student-page textarea::placeholder { color: var(--ink-28); }
.student-page input[type="date"] { color-scheme: dark; }
.student-page .seg-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-38); }
/* ═══ 8 · LOGIN ═══════════════════════════════════════════════════════════
Uma coisa só na tela: marca, campo, entrar. */
.student-page .login-panel { gap: 14px; padding: 30px 26px 26px; }
.student-page .login-or span {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .login-reset-btn { color: var(--ink-28); }
.student-page .login-reset-btn:hover { color: var(--ink-62); }
/* ═══ 9 · CABEÇALHO ═══════════════════════════════════════════════════════
Decisão: "minimalista — só data em mono + 2 ícones". O título de página
sai da tela (o conteúdo de cada aba já se apresenta sozinho) e sobra uma
linha de contexto de 9px à esquerda, sino e conta à direita. Sair não mora
aqui: vive dentro do menu de conta, como no painel do consultor. */
.student-page .sa-header {
align-items: center;
gap: 14px;
padding: 18px 20px 10px;
min-height: 0;
}
.student-page .sa-header-sub {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink-38);
margin-bottom: 0;
}
/* O título grande ("Boa tarde, Fulano") sai: era o maior bloco de informação
sem função da tela. Fica no DOM porque o JS ainda escreve nele. */
.student-page .sa-header-title { display: none; }
.student-page .sa-header-right { display: flex; align-items: center; gap: 8px; }
/* Os dois botões do topo têm a mesma pele. O avatar do aluno, quando existe,
preenche o círculo; sem foto, fica o ícone. */
.student-page .sa-avatar-btn,
.student-page .sa-bell-btn {
position: relative;
width: 36px; height: 36px; border: 0; border-radius: 999px;
display: grid; place-items: center; cursor: pointer;
background: rgba(237, 244, 246, .05); color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
transition: background 400ms ease, color 400ms ease, transform 300ms var(--ease);
}
.student-page .sa-avatar-btn:hover,
.student-page .sa-bell-btn:hover { background: rgba(237, 244, 246, .1); color: var(--ink); transform: translateY(-1px); }
.student-page .sa-avatar-btn:active,
.student-page .sa-bell-btn:active { transform: scale(.94); opacity: 1; }
.student-page .sa-avatar-btn.has-photo { box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .35); }
.student-page .sa-avatar-btn svg,
.student-page .sa-bell-btn svg { width: 17px; height: 17px; stroke-width: 1.7; fill: none; stroke: currentColor; }
/* Marca de novidade: ponto azul do v3, não a bolinha vermelha do tema antigo.
Sem novidade o sino continua na tela — só perde o ponto. */
.student-page .sa-bell-dot {
position: absolute; top: 6px; right: 7px;
width: 6px; height: 6px; border-radius: 999px;
background: var(--blue); box-shadow: 0 0 6px rgba(90, 167, 255, .7);
animation: csPulse 2.2s ease infinite;
}
.student-page .sa-bell-btn[data-count="0"] .sa-bell-dot { display: none; }
/* Menu de conta: mesma linguagem de vidro dos balões do consultor. */
.student-page .sa-account-menu {
border: 0; border-radius: 16px; overflow: hidden;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .92);
backdrop-filter: blur(24px) saturate(1.08);
-webkit-backdrop-filter: blur(24px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 50px -20px rgba(0, 0, 0, .8);
}
.student-page .sa-account-menu button {
border: 0; background: transparent; color: var(--ink-62);
font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
transition: background 300ms ease, color 300ms ease;
}
.student-page .sa-account-menu button:hover { background: rgba(237, 244, 246, .06); color: var(--ink); }
/* Sair é neutro: o v3 não usa vermelho. */
.student-page .sa-account-menu .sa-account-danger { color: var(--ink-38); }
.student-page .sa-account-menu .sa-account-danger:hover { color: var(--bright); }
/* ═══ 10 · ILHA DE NAVEGAÇÃO ══════════════════════════════════════════════
Mesma peça da ilha do consultor, ancorada embaixo porque aqui o polegar é
quem navega. Cinco alvos de largura idêntica: a simetria é o que mantém os
ícones no centro, sem spacer e sem position:absolute.
styles.css entrega esta barra como grid colado no bottom:0, ocupando a
largura toda, com border-top. Todas essas quatro propriedades precisam ser
revertidas explicitamente — desencostar do fundo sem zerar o border-top
deixa um filete solto atravessando o vidro. */
.student-page .sa-tabbar {
position: fixed;
left: 50%; right: auto;
transform: translateX(-50%);
width: min(420px, calc(100vw - 32px));
height: auto;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; justify-content: center; gap: 2px;
padding: 6px; border-top: 0; border-radius: 999px;
background: linear-gradient(150deg, rgba(237, 244, 246, .055), rgba(237, 244, 246, .012) 45%), rgba(10, 15, 20, .46);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05),
0 4px 12px rgba(0, 0, 0, .25), 0 20px 50px -20px rgba(0, 0, 0, .6);
animation: csIn 900ms var(--ease) both;
}
.student-page .sa-tab {
flex: 1 1 0; min-width: 0;
height: 48px; border: 0; border-radius: 999px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
background: transparent; color: var(--ink-38);
font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
padding: 0;
transition: color 420ms ease, background 420ms ease, transform 300ms var(--ease);
}
.student-page .sa-tab svg {
width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; fill: none;
transition: transform 420ms var(--ease);
}
/* O rótulo só existe na aba ativa: cinco palavras acesas competem com o
conteúdo e é o ícone que o polegar procura. */
.student-page .sa-tab span {
opacity: 0; max-height: 0; overflow: hidden;
transform: translateY(-3px);
transition: opacity 380ms ease, max-height 380ms var(--ease), transform 380ms var(--ease);
}
.student-page .sa-tab:hover { color: var(--ink-62); }
.student-page .sa-tab:active { transform: scale(.94); opacity: 1; }
.student-page .sa-tab-on {
background: rgba(237, 244, 246, .1);
color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.student-page .sa-tab-on span { opacity: 1; max-height: 12px; transform: none; }
.student-page .sa-tab-on svg { transform: translateY(-1px); }
/* Cada aba rola por dentro (.sa-panel é absolute inset:0) — o respiro da ilha
é padding do painel, não da moldura. */
.student-page .sa-panel {
padding: 6px 20px var(--island-clear);
gap: 14px;
}
/* ═══ 11 · TROCA DE ABA ═══════════════════════════════════════════════════
Uma animação só para todas as abas: mesma curva, mesma duração, mesmo
stagger. Trocar de aba tem sempre a mesma sensação — foi essa unificação
que resolveu a sensação de "outra tela" no painel do consultor. */
.student-page .sa-panel:not(.hidden) { animation: none; }
.student-page .sa-panel:not(.hidden) > * { animation: csView 460ms var(--ease) both; }
.student-page .sa-panel:not(.hidden) > *:nth-child(2) { animation-delay: 60ms; }
.student-page .sa-panel:not(.hidden) > *:nth-child(3) { animation-delay: 120ms; }
.student-page .sa-panel:not(.hidden) > *:nth-child(4) { animation-delay: 180ms; }
.student-page .sa-panel:not(.hidden) > *:nth-child(n+5) { animation-delay: 240ms; }
/* ═══ 12 · SUPERFÍCIES DA UI ATUAL (família wf-) ══════════════════════════
As telas do aluno são desenhadas pela família wf-*, que já consome os
tokens — por isso a cor veio junto com o bloco 1. O que falta é a pele:
a borda de 1px sólida vira anel interno e o card ganha o vidro canônico.
Blur só onde algo passa por baixo (ilha, overlays, balões). Card parado com
backdrop-filter não muda de aparência e ainda custa uma camada de
composição por item — a lição da fila de 40 alunos do painel do consultor. */
.student-page .wf-gp {
border: 0;
border-radius: 22px;
padding: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 55%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: box-shadow 400ms ease, transform 300ms var(--ease);
}
/* wf-lit era "card com aura azul". No v3 o destaque é o anel, não o brilho. */
.student-page .wf-gp.wf-lit {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .22);
}
.student-page .wf-tile {
border: 0; border-radius: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: box-shadow 400ms ease, transform 300ms var(--ease);
}
/* Só o que é clicável reage ao toque. */
.student-page .wf-tile:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(237, 244, 246, .14), 0 18px 40px -24px rgba(0, 0, 0, .9);
}
.student-page .wf-tile:active { transform: scale(.985); }
/* Rótulos e números: mono para etiqueta, display para o número que importa. */
.student-page .wf-cap,
.student-page .wf-lbl {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-38);
}
.student-page .wf-name { font-family: var(--body); font-weight: 500; color: var(--ink); }
.student-page .wf-name.big { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.student-page .wf-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-38); }
.student-page .wf-muted { font-family: var(--body); font-size: 12.5px; color: var(--ink-50); }
.student-page .wf-big,
.student-page .wf-mid,
.student-page .wf-kpi-v {
font-family: var(--display); font-weight: 600;
font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.student-page .wf-val { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.student-page .wf-val.b { color: var(--blue); }
.student-page .wf-tt { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
/* Linhas de lista: o mesmo deslize de 450ms das filas do consultor. */
.student-page .wf-prow {
border-radius: 12px;
transition: padding-left 450ms var(--ease), background 400ms ease;
}
.student-page .wf-prow:hover { padding-left: 8px; background: rgba(237, 244, 246, .03); }
.student-page .wf-chev { width: 15px; height: 15px; stroke: var(--ink-28); stroke-width: 1.8; fill: none; flex: none; }
/* Ponto de estado: azul pulsante para o que pede ação, gelo para alerta. */
.student-page .wf-dot.bl { background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .7); animation: csPulse 2.2s ease infinite; }
.student-page .wf-dot.am { background: var(--blue-soft); box-shadow: none; }
/* Segmento (dia/semana/mês): pílula do v3, ativo em tinta cheia. */
.student-page .wf-seg {
border: 0; border-radius: 999px; padding: 4px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
}
.student-page .wf-seg button {
border-radius: 999px; padding: 9px 15px;
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
transition: background 400ms ease, color 400ms ease;
}
.student-page .wf-seg button.on { background: var(--ink); color: var(--void); }
/* Caixa de marcar / rádio. */
.student-page .wf-ck { border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(237, 244, 246, .16); background: transparent; }
.student-page .wf-ck.on,
.student-page .set-ck-done.wf-ck { background: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.student-page .wf-radio { border: 0; box-shadow: inset 0 0 0 1.5px rgba(237, 244, 246, .16); }
.student-page .wf-radio.on { box-shadow: inset 0 0 0 1.5px var(--blue); }
/* Avatar do consultor. */
.student-page .wf-avatar {
border: 0;
background: linear-gradient(150deg, rgba(90, 167, 255, .3), rgba(237, 244, 246, .06));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.student-page .wf-avatar.blue { box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .45); }
/* Barras de progresso genéricas da família wf-. */
.student-page .wf-track { background: rgba(237, 244, 246, .07); border-radius: 999px; overflow: hidden; }
.student-page .wf-track i { transition: width 700ms var(--ease); }
/* Estado vazio: sem caixa tracejada, só o ícone e o texto. */
.student-page .wf-evo-empty-ic {
border: 0; border-radius: 16px;
background: rgba(90, 167, 255, .08);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .2);
}
.student-page .wf-evo-empty strong { font-family: var(--display); font-weight: 600; font-size: 19px; }
.student-page .wf-evo-empty p { color: var(--ink-50); }
/* ═══ 13 · HOME (aba Hoje) ════════════════════════════════════════════════
Decisão: "a ação de hoje, grande". O treino domina a primeira dobra com o
botão de abrir; dieta, check-in e protocolo descem para linhas compactas —
informação de relance, sem um card inteiro para cada uma. */
/* — Herói: o treino do dia — */
.student-page .wf-hero {
gap: 10px;
padding: 22px 20px 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .2);
}
.student-page .wf-hero-name {
font-family: var(--display); font-weight: 600;
font-size: 25px; line-height: 1.02; letter-spacing: -.02em;
color: var(--ink);
}
.student-page .wf-hero .wf-meta { font-size: 11px; letter-spacing: .1em; }
.student-page .wf-hero .wf-pa { margin-top: 8px; width: 100%; }
/* Dia de descanso: o herói continua sendo o bloco maior, mas apagado — não é
o dia de agir. */
.student-page .wf-hero.is-rest { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06); }
.student-page .wf-hero.is-rest .wf-hero-name { color: var(--ink-50); }
.student-page .wf-hero.is-rest .wf-pa { background: rgba(237, 244, 246, .06); color: var(--ink-75); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07); }
/* — Etiquetas de grupo muscular no herói —
O rótulo do consultor vira nome + etiquetas. Em uma linha corrida, "Perna —
Quadriceps / Posterior / Panturrilhas" era um bloco de texto ilegível. */
.student-page .wf-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.student-page .wf-hero-tags:empty { display: none; }
.student-page .wf-hero-tags span {
border-radius: 999px; padding: 4px 10px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-50);
white-space: nowrap;
}
.student-page .wf-hero-meta {
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-28);
}
/* — Trocar a sessão do dia, na Home —
Discreto por decisão: trocar é exceção. Compete com o botão de iniciar se
tiver o mesmo peso, e o aluno começa a escolher treino todo dia em vez de
seguir a rotina. */
.student-page .wf-swap-link {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; margin-top: 2px; padding: 10px;
border: 0; border-radius: 12px; background: transparent;
color: var(--ink-38); cursor: pointer;
font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
box-shadow: none;
transition: color 300ms ease, background 300ms ease;
}
.student-page .wf-swap-link:hover { color: var(--ink-75); background: rgba(237, 244, 246, .04); }
.student-page .wf-swap-link.hidden { display: none; }
.student-page .wf-swap-link svg { width: 15px; height: 15px; }
/* — Cartões de resumo: dieta, check-in, protocolo —
Grade de dois. As linhas largas que estavam aqui deixavam um vão morto no
meio em 390px: rótulo colado à esquerda, valor colado à direita, nada entre
os dois. No cartão o valor manda e o rótulo o serve. */
/* Uma coluna, cartões largos. A grade de dois deixava um vão morto sempre que
um cartão saía da tela (protocolo vazio, check-in ocupando a linha inteira) —
e em 390px meia largura não cabe "2.244 kcal" sem apertar. */
.student-page .wf-cards { display: flex; flex-direction: column; gap: 10px; }
.student-page .wf-cards:empty { display: none; }
.student-page .wf-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
column-gap: 14px; row-gap: 5px;
padding: 15px 17px;
border: 0; border-radius: 18px; text-align: left; cursor: pointer; color: inherit;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: box-shadow 400ms ease, transform 300ms var(--ease);
}
.student-page .wf-card:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(237, 244, 246, .14);
}
.student-page .wf-card:active { transform: scale(.99); }
.student-page .wf-card-k {
grid-column: 1 / -1;
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-38);
}
.student-page .wf-card-v {
grid-column: 1;
font-family: var(--display); font-weight: 600; font-size: 19px;
font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink);
line-height: 1.05;
}
.student-page .wf-card-m {
grid-column: 2; text-align: right;
font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-28);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O cartão que pede ação hoje (janela de check-in aberta) acende. */
.student-page .wf-card.is-live {
background: linear-gradient(150deg, rgba(90, 167, 255, .12), rgba(90, 167, 255, .03) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.student-page .wf-card.is-live .wf-card-k { color: var(--blue); }
/* Fechado: continua na tela para o aluno aprender o ritmo, mas recuado. */
.student-page .wf-card.is-off { background: none; box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .045); }
.student-page .wf-card.is-off .wf-card-v { color: var(--ink-38); font-size: 19px; }
/* — Linhas de protocolo: cardio, suplementação, hormônios, manipulados —
Empilhadas, uma altura só, cada uma abrindo a prescrição em modal. */
.student-page .wf-rows {
display: flex; flex-direction: column;
border-radius: 18px; overflow: hidden;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .wf-row {
display: grid; grid-template-columns: 20px 1fr auto 15px;
align-items: center; gap: 12px;
width: 100%; padding: 14px 16px;
border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
transition: background 400ms ease, padding-left 450ms var(--ease);
}
.student-page .wf-row + .wf-row { box-shadow: inset 0 1px 0 rgba(237, 244, 246, .05); }
.student-page .wf-row:hover { background: rgba(237, 244, 246, .035); padding-left: 22px; }
.student-page .wf-row > svg:first-child { width: 18px; height: 18px; stroke: var(--blue); stroke-width: 1.5; fill: none; }
.student-page .wf-row-k { font-family: var(--body); font-weight: 500; font-size: 15px; color: var(--ink); }
.student-page .wf-row-m {
font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-28);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
}
/* Cabeça de seção entre o herói e as linhas. */
.student-page .wf-sec {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink-28);
padding: 4px 2px 0;
}
/* Faixa de sequência no topo da Hoje. */
.student-page .sa-streak {
border: 0; border-radius: 999px; padding: 9px 16px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-50);
}
.student-page .sa-streak svg { color: var(--blue); }
/* ═══ 14 · TREINO ═════════════════════════════════════════════════════════
Decisão: "treino de hoje em destaque + os 7 dias abaixo"; recordes e cargas
moram aqui; sessão ativa com um exercício por tela; descanso em faixa fixa
no rodapé — nunca overlay de tela cheia, porque ele precisa continuar
ajustando carga enquanto descansa. */
/* — Entrada da aba: destaque + lista de sessões — */
.student-page .wk-b1 { display: flex; flex-direction: column; gap: 14px; }
.student-page .wk-b1-eyebrow {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-b1-today,
.student-page .wk-today,
.student-page .wk-resume-card {
border: 0; border-radius: 22px; padding: 20px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .2);
}
.student-page .wk-b1-today strong,
.student-page .wk-today strong {
font-family: var(--display); font-weight: 600;
font-size: 19px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
}
.student-page .wk-b1-meta,
.student-page .wk-today-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-38); }
.student-page .wkday-muscles span {
border: 0; border-radius: 999px; padding: 4px 10px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-50);
}
.student-page .wk-b1-start,
.student-page .wk-today-start,
.student-page .wk-iniciar-btn { width: 100%; }
.student-page .wk-b1-week { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055); }
.student-page .wk-b1-week-row {
border: 0; border-radius: 0; background: transparent;
padding: 15px 18px;
font-family: var(--body); font-size: 15px; color: var(--ink);
transition: background 400ms ease, padding-left 450ms var(--ease);
}
.student-page .wk-b1-week-row + .wk-b1-week-row { box-shadow: inset 0 1px 0 rgba(237, 244, 246, .05); }
.student-page .wk-b1-week-row:hover { background: rgba(237, 244, 246, .035); padding-left: 24px; }
.student-page .wk-b1-row-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-28); }
.student-page .wk-b1-week-row.done { color: var(--ink-50); }
.student-page .wk-b1-chev { color: var(--ink-28); }
.student-page .wk-b1-restday { color: var(--ink-38); }
.student-page .wk-week-streak {
border: 0; border-radius: 999px; padding: 9px 16px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
}
/* — Faixa semanal —
Uma representação de semana, não três. Sete células de largura igual: o dia
em cima, o estado embaixo. Feito é ✓, hoje é a célula acesa, agendado é a
sigla da sessão, descanso é um ponto. Nada de lista, contador e calendário
dizendo a mesma coisa em três lugares da mesma tela. */
.student-page .wk-week { margin-bottom: 18px; }
.student-page .wk-week-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px;
}
.student-page .wk-week-lbl {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-week-count {
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-50);
}
.student-page .wk-week-strip {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.student-page .wk-wd {
display: flex; flex-direction: column; align-items: center; gap: 6px;
border-radius: 14px; padding: 10px 0 11px;
background: rgba(237, 244, 246, .022);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .05);
}
.student-page .wk-wd-d {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-28);
}
.student-page .wk-wd-s {
font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1;
color: var(--ink-50);
}
.student-page .wk-wd.is-rest .wk-wd-s { color: var(--ink-16, rgba(237, 244, 246, .16)); }
.student-page .wk-wd.is-done { background: rgba(90, 167, 255, .1); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .22); }
.student-page .wk-wd.is-done .wk-wd-s { color: var(--blue); }
.student-page .wk-wd.is-today {
background: rgba(237, 244, 246, .07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(237, 244, 246, .18);
}
.student-page .wk-wd.is-today .wk-wd-d { color: var(--ink-75); }
.student-page .wk-wd.is-today .wk-wd-s { color: var(--ink); }
.student-page .wk-wd.is-today.is-done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .4); }
/* Dia agendado que passou em branco: registrado, sem alarme. Cobrança é
conversa de consultor, não cor de interface. */
.student-page .wk-wd.is-missed .wk-wd-s { color: var(--ink-28); }
/* — A rotina —
A aba Treino é o programa: as sessões da semana, uma por linha, com o dia
que a rotina declara. A de hoje fica acesa e traz a ação; as outras abrem
quando o aluno quiser. O card grande de "treino de hoje" saiu daqui — ele
vive na Home, e aparecia duas vezes nesta mesma tela. */
.student-page .wk-routine { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.student-page .wk-routine-head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
}
.student-page .wk-routine-plan {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
color: var(--ink-38);
}
/* Grade responsiva: a rotina é um conjunto, não uma fila. Em lista vertical
cada sessão ocupava a largura toda e o aluno rolava para ver quatro coisas
que cabem numa tela. O número de colunas segue a quantidade de sessões — com
3 elas ficam alinhadas; com 5, três em cima e duas embaixo. */
.student-page .wk-routine-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-page .wk-routine-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.student-page .wk-routine-grid[data-n="3"],
.student-page .wk-routine-grid[data-n="5"],
.student-page .wk-routine-grid[data-n="6"],
.student-page .wk-routine-grid[data-n="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 520px) {
.student-page .wk-routine-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.student-page .wk-routine-row {
display: flex; flex-direction: column; gap: var(--sp-1);
width: 100%; min-height: 116px; text-align: left; cursor: pointer;
border: 0; border-radius: 18px; padding: var(--sp-4);
background: linear-gradient(150deg, rgba(237, 244, 246, .04), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(237, 244, 246, .055);
transition: background 400ms ease, box-shadow 400ms ease, transform 300ms var(--ease);
}
.student-page .wk-routine-row:hover { background: rgba(237, 244, 246, .06); }
.student-page .wk-routine-row:active { transform: scale(.99); }
/* O nome é o herói do card e quebra em duas linhas quando a coluna aperta —
"TREINO / A" continua legível onde "TREINO A" numa linha só encolheria. */
.student-page .wk-routine-name { color: var(--ink); margin-top: auto; }
.student-page .wk-routine-when { color: var(--ink-38); }
.student-page .wk-routine-meta { color: var(--ink-28); }
.student-page .wk-routine-go { color: var(--blue); margin-top: var(--sp-1); }
.student-page .wk-routine-row.is-today {
background: linear-gradient(150deg, rgba(90, 167, 255, .1), rgba(90, 167, 255, .03) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.student-page .wk-routine-row.is-today .wk-routine-when { color: var(--blue); }
/* Sessão já feita na semana: recolhe, não desaparece. */
.student-page .wk-routine-row.is-done .wk-routine-name { color: var(--ink-50); }
/* — Trocar a sessão do dia —
As "outras sessões" deixaram de ser uma lista de botões grandes competindo
com o treino em foco: viram uma substituição, atrás de um link discreto. */
.student-page .wk-swap-btn {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; margin-top: 2px; padding: 11px;
border: 0; border-radius: 12px; background: transparent;
color: var(--ink-38); cursor: pointer;
font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
transition: color 300ms ease, background 300ms ease;
}
.student-page .wk-swap-btn:hover { color: var(--ink-75); background: rgba(237, 244, 246, .04); }
.student-page .wk-swap-btn svg { width: 15px; height: 15px; }
.student-page .wk-swap-overlay {
position: fixed; inset: 0; z-index: 1300;
display: flex; align-items: flex-end; justify-content: center;
background: rgba(5, 8, 10, .5);
backdrop-filter: blur(10px) saturate(1.05);
-webkit-backdrop-filter: blur(10px) saturate(1.05);
opacity: 0; transition: opacity 260ms ease;
}
.student-page .wk-swap-overlay.on { opacity: 1; }
.student-page .wk-swap-overlay .wk-sheet {
width: min(430px, 100vw);
border: 0; border-radius: 28px 28px 0 0;
padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: column; gap: 14px;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(9, 13, 18, .96);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -20px 60px -20px rgba(0, 0, 0, .85);
transform: translateY(100%); transition: transform 360ms var(--ease);
}
.student-page .wk-swap-overlay.on .wk-sheet { transform: translateY(0); }
.student-page .wk-swap-overlay .wk-sheet-grip { width: 38px; height: 4px; border-radius: 9px; background: rgba(237, 244, 246, .16); align-self: center; }
.student-page .wk-swap-overlay .wk-sheet-head { display: flex; flex-direction: column; gap: 4px; }
.student-page .wk-swap-overlay .wk-sheet-head strong {
font-family: var(--display); font-weight: 600; font-size: 19px;
letter-spacing: -.01em; color: var(--ink);
}
.student-page .wk-sheet-sub {
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-swap-list { display: flex; flex-direction: column; gap: 8px; }
.student-page .wk-swap-row {
position: relative; display: flex; flex-direction: column; gap: 4px;
width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
border: 0; border-radius: 16px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: background 320ms ease, box-shadow 320ms ease;
}
.student-page .wk-swap-row:hover { background: rgba(237, 244, 246, .08); }
.student-page .wk-swap-row.is-current { box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3); }
.student-page .wk-swap-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.student-page .wk-swap-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-28); }
.student-page .wk-swap-tag {
position: absolute; top: 13px; right: 14px;
border-radius: 999px; padding: 3px 9px;
background: rgba(90, 167, 255, .12);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--blue);
}
/* — Histórico como calendário —
Dia treinado aceso e clicável, dia parado apagado. A lista de cartões dizia
"o que eu fiz"; o calendário responde "com que frequência", que é a pergunta
do acompanhamento. */
.student-page .wk-cal {
display: flex; flex-direction: column; gap: 12px;
border-radius: 20px; padding: 16px;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .wk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* capitalize maiúsculo cada palavra e vira "Agosto De 2026". Só a primeira. */
.student-page .wk-cal-month {
font-family: var(--display); font-weight: 600; font-size: 15px;
letter-spacing: -.01em; color: var(--ink);
}
.student-page .wk-cal-month::first-letter { text-transform: uppercase; }
.student-page .wk-cal-nav {
width: 30px; height: 30px; flex: none;
border: 0; border-radius: 999px; cursor: pointer;
display: grid; place-items: center;
background: rgba(237, 244, 246, .05); color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
transition: color 300ms ease, background 300ms ease, opacity 300ms ease;
}
.student-page .wk-cal-nav:hover { color: var(--ink); background: rgba(237, 244, 246, .1); }
.student-page .wk-cal-nav svg { width: 14px; height: 14px; }
.student-page .wk-cal-nav[disabled] { opacity: .22; cursor: default; }
.student-page .wk-cal-week,
.student-page .wk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.student-page .wk-cal-week span {
text-align: center;
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-cal-cell {
aspect-ratio: 1; border: 0; border-radius: 10px;
display: grid; place-items: center;
background: rgba(237, 244, 246, .025);
font-family: var(--mono); font-size: 11px;
font-variant-numeric: tabular-nums; color: var(--ink-28);
transition: background 320ms ease, color 320ms ease, transform 300ms var(--ease);
}
.student-page .wk-cal-cell.is-void { background: none; }
.student-page .wk-cal-cell.is-future { opacity: .35; }
/* Dia treinado: aceso, com tinta cheia e alvo de toque. */
.student-page .wk-cal-cell.is-done {
cursor: pointer; color: var(--void); font-weight: 500;
background: var(--blue);
box-shadow: 0 0 14px rgba(90, 167, 255, .35);
}
.student-page .wk-cal-cell.is-done:hover { transform: scale(1.08); }
.student-page .wk-cal-cell.is-done:active { transform: scale(.94); }
/* Hoje sem treino: só o anel, para não competir com os dias acesos. */
.student-page .wk-cal-cell.is-today:not(.is-done) { box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .28); color: var(--ink-62); }
.student-page .wk-cal-foot {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-28); line-height: 1.6;
}
/* Aviso de simulação: precisa ser impossível confundir com dado real. */
.student-page .sa-sim-warn {
align-self: center; border-radius: 999px; padding: 6px 14px;
background: rgba(207, 233, 255, .1);
box-shadow: inset 0 0 0 1px rgba(207, 233, 255, .3);
font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--bright);
}
/* — Histórico navegável (estilo Hevy): cada sessão abre o registro do dia — */
.student-page .wk-hist-title {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink-28);
margin-bottom: 10px;
}
.student-page .wk-hist-card {
position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
border: 0; border-radius: 18px; padding: 15px 17px;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
transition: box-shadow 400ms ease, transform 300ms var(--ease);
}
.student-page .wk-hist-card:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(237, 244, 246, .13);
}
.student-page .wk-hist-card:active { transform: scale(.99); }
.student-page .wk-hist-top strong { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.student-page .wk-hist-top span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-28); }
.student-page .wk-hist-stats span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-28); }
.student-page .wk-hist-stats b { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.student-page .wk-hist-prtag {
position: absolute; top: 14px; right: 16px;
border-radius: 999px; padding: 3px 9px;
background: rgba(90, 167, 255, .12);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--blue);
}
.student-page .wk-hist-pr { color: var(--blue); }
.student-page .wk-hist-more { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-28); }
/* — Registro de uma sessão passada (somente leitura) — */
.student-page .wk-log { display: flex; flex-direction: column; gap: 14px; }
.student-page .wk-log-back {
align-self: flex-start; display: flex; align-items: center; gap: 6px;
border: 0; border-radius: 999px; padding: 8px 14px 8px 10px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
color: var(--ink-62);
font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
transition: color 300ms ease, background 300ms ease;
}
.student-page .wk-log-back:hover { color: var(--ink); background: rgba(237, 244, 246, .1); }
.student-page .wk-log-back svg { width: 14px; height: 14px; }
.student-page .wk-log-head { display: flex; flex-direction: column; gap: 5px; }
.student-page .wk-log-date {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-log-name {
font-family: var(--display); font-weight: 600;
font-size: 19px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.student-page .wk-log-ex.is-blank { box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .045); background: none; }
.student-page .wk-log-ex.is-blank .wk-log-ex-name { color: var(--ink-50); }
.student-page .wk-log-blank {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-log-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
border-radius: 18px; overflow: hidden;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .wk-log-stats > div {
padding: 15px 8px; text-align: center;
display: flex; flex-direction: column; gap: 5px;
box-shadow: inset -1px 0 0 rgba(237, 244, 246, .05);
}
.student-page .wk-log-stats > div:last-child { box-shadow: none; }
.student-page .wk-log-stats b {
font-family: var(--display); font-weight: 600; font-size: 19px;
font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink);
}
.student-page .wk-log-stats span {
font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wk-log-ex {
border-radius: 18px; padding: 15px 17px;
display: flex; flex-direction: column; gap: 10px;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .wk-log-ex.is-pr { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .28); }
.student-page .wk-log-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.student-page .wk-log-ex-name {
font-family: var(--display); font-weight: 600; font-size: 15px;
letter-spacing: -.01em; color: var(--ink);
}
.student-page .wk-log-pr {
flex: none; border-radius: 999px; padding: 3px 9px;
background: rgba(90, 167, 255, .12);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--blue); white-space: nowrap;
}
.student-page .wk-log-sets { display: flex; flex-direction: column; gap: 1px; }
.student-page .wk-log-set {
display: grid; grid-template-columns: 26px 1fr 14px 1fr;
align-items: center; gap: 8px; padding: 8px 0;
box-shadow: inset 0 1px 0 rgba(237, 244, 246, .045);
}
.student-page .wk-log-set:first-child { box-shadow: none; }
.student-page .wk-log-set-n {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-28); text-align: center;
}
.student-page .wk-log-set-v {
font-family: var(--mono); font-size: 12.5px;
font-variant-numeric: tabular-nums; color: var(--ink-75);
}
.student-page .wk-log-set-x { font-family: var(--mono); font-size: 11px; color: var(--ink-28); text-align: center; }
.student-page .wk-log-set.is-best .wf-log-set-v,
.student-page .wk-log-set.is-best .wk-log-set-v { color: var(--blue); }
.student-page .wk-log-set.is-best .wk-log-set-n { color: var(--blue); }
/* — Sessão ativa: um exercício por tela (o renderer já entrega só o ativo) — */
.student-page .wf-workout-head { padding-bottom: 2px; }
.student-page .wf-timer {
border: 0; border-radius: 999px; padding: 8px 13px;
background: rgba(90, 167, 255, .1);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28);
font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--blue);
}
.student-page .wf-session-cancel {
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
color: var(--ink-38);
transition: color 300ms ease, background 300ms ease;
}
.student-page .wf-session-cancel:hover { color: var(--ink); background: rgba(237, 244, 246, .1); }
.student-page .wk-prog-bar { height: 3px; border-radius: 999px; background: rgba(237, 244, 246, .07); overflow: hidden; }
.student-page .wk-prog-fill { background: var(--blue); box-shadow: 0 0 10px rgba(90, 167, 255, .5); transition: width 600ms var(--ease); }
.student-page .wf-set-card { padding: 20px 18px; }
.student-page .wf-set-card .wf-name.big { font-size: 19px; }
.student-page .wk-rest-chip {
border: 0; border-radius: 999px; padding: 6px 12px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-38);
align-self: flex-start;
}
.student-page .wk-set-group-title { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.student-page .wk-set-group-hint { font-family: var(--body); font-size: 12.5px; color: var(--ink-28); }
.student-page .wf-chip {
border: 0; border-radius: 10px; padding: 10px 0;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .09);
font-family: var(--mono); font-size: 12.5px; color: var(--ink);
transition: box-shadow 400ms ease, background 400ms ease;
}
.student-page .wf-chip:focus { box-shadow: inset 0 0 0 1.5px rgba(90, 167, 255, .7); }
.student-page .set-row-done .wf-chip { background: rgba(90, 167, 255, .1); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .32); }
.student-page .set-badge { font-family: var(--mono); font-size: 11px; color: var(--ink-38); }
.student-page .set-badge-done { color: var(--blue); }
.student-page .ex-technique,
.student-page .ex-tip {
border: 0; border-radius: 14px; padding: 12px 14px;
background: rgba(90, 167, 255, .06);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .16);
}
.student-page .ex-notes { font-family: var(--body); font-size: 12.5px; color: var(--ink-50); }
/* A faixa de ações da sessão gruda no fim da tela, acima da ilha. */
.student-page .wf-session-actions { position: sticky; bottom: 0; padding-top: 10px; }
/* — Descanso: faixa fixa no rodapé, acima da ilha. Nunca tela cheia: ele
precisa continuar vendo (e corrigindo) a carga enquanto descansa. — */
.student-page .rest-timer-overlay {
position: fixed;
inset: auto 0 0 0;
z-index: 140;
display: flex; align-items: flex-end; justify-content: center;
padding: 0 16px calc(var(--island-clear) - 22px);
background: linear-gradient(to top, rgba(5, 8, 10, .92), rgba(5, 8, 10, 0));
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
pointer-events: none;
animation: csFade 260ms ease both;
}
.student-page .rest-timer-overlay > * { pointer-events: auto; }
.student-page .rest-b3 { max-width: 420px; gap: 10px; }
.student-page .rest-b3-card {
border: 0; border-radius: 20px; padding: 14px 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .9);
backdrop-filter: blur(26px) saturate(1.08);
-webkit-backdrop-filter: blur(26px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(90, 167, 255, .22), 0 18px 50px -18px rgba(0, 0, 0, .85);
display: grid; grid-template-columns: auto 1fr; align-items: center;
column-gap: 16px; row-gap: 8px; text-align: left;
animation: csSheet 380ms var(--ease) both;
}
.student-page .rest-b3-label { grid-column: 1; grid-row: 1; color: var(--ink-38); letter-spacing: .2em; }
.student-page .rest-b3 .rest-count {
grid-column: 1; grid-row: 2;
font-family: var(--display); font-weight: 600; font-size: 25px; letter-spacing: -.02em;
margin: 0; color: var(--ink); cursor: pointer;
}
.student-page .rest-b3 .rest-count.warn { color: var(--blue-soft); }
.student-page .rest-b3 .rest-count.urgent { color: var(--bright); }
.student-page .rest-b3-bar { grid-column: 1 / 3; grid-row: 3; margin: 0; height: 3px; background: rgba(237, 244, 246, .08); }
.student-page .rest-b3-bar-fill { background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .5); }
.student-page .rest-b3-actions { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; gap: 6px; }
.student-page .rest-b3-pill {
border: 0; border-radius: 999px; padding: 8px 13px;
background: rgba(237, 244, 246, .06);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-62);
transition: background 300ms ease, color 300ms ease, transform 260ms var(--ease);
}
.student-page .rest-b3-pill:hover { background: rgba(237, 244, 246, .11); color: var(--ink); }
.student-page .rest-b3-pill.primary { background: var(--ink); color: var(--void); box-shadow: none; }
/* Numa faixa de 3 linhas, a dica escrita é ruído: o alvo já é o número. */
.student-page .rest-b3-hint { display: none; }
/* O bloco "A SEGUIR" com campos de carga só cabe na faixa em telas altas. */
.student-page .rest-b3-next-label { display: none; }
.student-page .rest-b3-next {
border: 0; border-radius: 16px; padding: 13px 15px;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .9);
backdrop-filter: blur(26px) saturate(1.08);
-webkit-backdrop-filter: blur(26px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(237, 244, 246, .07), 0 18px 50px -18px rgba(0, 0, 0, .85);
}
.student-page .rest-b3-next-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; margin-bottom: 10px; }
.student-page .rest-b3-field span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-28); }
.student-page .rest-b3-field input {
border: 0; border-radius: 10px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .35);
font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink);
}
.student-page .rest-b3-done { border-radius: 11px; background: var(--ink); color: var(--void); font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; padding: 12px; }
@media (max-height: 720px) {
.student-page .rest-b3-next { display: none; }
}
/* Recorde: aviso azul, sem confete. */
.student-page .wk-pr-toast {
border: 0; border-radius: 999px; padding: 11px 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .92);
backdrop-filter: blur(24px) saturate(1.08);
-webkit-backdrop-filter: blur(24px) saturate(1.08);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3), 0 18px 50px -18px rgba(0, 0, 0, .85);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink);
}
.student-page .wk-pr-toast-weight { font-family: var(--display); font-weight: 600; color: var(--blue); }
/* ═══ 15 · DIETA ══════════════════════════════════════════════════════════
Decisão: "anel de kcal + macros no topo, refeições fechadas por horário". */
.student-page .wf-diet-screen { gap: 16px; }
.student-page .wf-diary-ring { padding: 24px 20px; }
.student-page .wf-ring .g {
background: conic-gradient(var(--blue) calc(var(--p, 60) * 1%), rgba(237, 244, 246, .06) 0);
transition: background 700ms var(--ease);
}
.student-page .wf-ring .in .wf-big { font-size: 25px; }
.student-page .wf-ring .in .wf-lbl { color: var(--ink-38); }
.student-page .wf-meal { padding: 16px 18px; gap: 12px; }
.student-page .wf-meal.collapsed { padding: 15px 18px; }
.student-page .wf-mealhd .wf-name.big { font-size: 15px; }
.student-page .wf-next svg { stroke: var(--ink-28); transition: transform 400ms var(--ease); }
.student-page .wf-meal.collapsed:hover .wf-next svg { transform: translateX(2px); }
.student-page .wf-foodgrid .diet-food-name { font-family: var(--body); font-weight: 400; color: var(--ink-75); }
.student-page .wf-foodgrid .diet-food-qty { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-38); }
.student-page .wf-swap-link {
border: 0; border-radius: 10px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
transition: background 300ms ease;
}
.student-page .wf-swap-link:hover { background: rgba(237, 244, 246, .1); }
.student-page .wf-m1 .wf-meta { letter-spacing: .16em; text-transform: uppercase; font-size: 11px; }
.student-page .wf-register-food { width: 100%; }
/* ═══ 16 · PROGRESSO ══════════════════════════════════════════════════════
Decisão: entra curva de peso, fotos lado a lado e adesão/constância.
Recordes saíram daqui — moram na aba Treino, junto do histórico de carga. */
.student-page .wf-weight-card { padding: 22px 20px; gap: 12px; }
.student-page .wf-weight-card .wf-big { font-size: 25px; }
.student-page .wf-weight-card .wf-meta.unit { font-family: var(--mono); font-size: 12.5px; color: var(--ink-38); }
.student-page .wf-axis span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-28); }
.student-page .wf-kpi-strip {
border: 0; border-radius: 20px; overflow: hidden;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .wf-kpi { border-right: 0; box-shadow: inset -1px 0 0 rgba(237, 244, 246, .05); padding: 18px 10px; }
.student-page .wf-kpi:last-child { box-shadow: none; }
.student-page .wf-kpi-v { font-size: 25px; color: var(--ink); }
.student-page .wf-kpi-v small { font-family: var(--mono); font-size: 11px; color: var(--ink-38); }
.student-page .wf-volume-card { padding: 20px; }
.student-page .wf-barsv .wf-vbar { border-radius: 5px 5px 0 0; background: rgba(90, 167, 255, .18); transition: height 700ms var(--ease); }
.student-page .wf-barsv .wf-vbar.hi { background: linear-gradient(180deg, var(--blue), rgba(90, 167, 255, .22)); box-shadow: 0 0 14px rgba(90, 167, 255, .28); }
/* — Curva de peso: a mesma peça do painel do consultor —
renderWeightChart entrega curva suave + área em gradiente + delta. Aqui ela
só recebe a tipografia do v3; o desenho já era o certo. */
/* O gráfico vive DENTRO do card de peso: styles.css o desenha como card
próprio e o resultado era caixa dentro de caixa. Aqui ele é só conteúdo. */
.student-page .weight-chart {
display: flex; flex-direction: column; gap: 10px;
border: 0; border-radius: 0; padding: 0; margin: 0;
background: none; box-shadow: none;
}
.student-page .weight-chart:empty { display: none; }
.student-page .chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.student-page .chart-head .micro {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .chart-delta {
font-family: var(--display); font-weight: 600; font-size: 15px;
font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink-50);
}
/* Perder e ganhar peso não são bom e ruim: dependem do objetivo. Os dois
sentidos usam a mesma tinta, e o sinal já diz a direção. */
.student-page .chart-delta.delta-down,
.student-page .chart-delta.delta-up { color: var(--blue); }
.student-page .chart-svg { width: 100%; height: 118px; display: block; overflow: visible; }
.student-page .chart-axis { display: flex; justify-content: space-between; gap: 12px; }
.student-page .chart-axis span {
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .evo-empty-card {
border: 0; border-radius: 16px; padding: 26px 16px; text-align: center;
background: rgba(237, 244, 246, .025);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .05);
}
.student-page .evo-empty-msg { font-family: var(--body); font-size: 12.5px; color: var(--ink-38); }
/* — Evolução fotográfica: primeira do acompanhamento × última enviada — */
.student-page .photo-evo-wrap {
border: 0; border-radius: 22px; padding: 18px;
display: flex; flex-direction: column; gap: 12px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.student-page .photo-evo-wrap > .micro {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-38);
}
.student-page .photo-evo-labels-fixed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.student-page .photo-evo-labels-fixed .micro {
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-28); text-align: center;
}
.student-page .photo-evo-grid { display: flex; flex-direction: column; gap: 14px; }
.student-page .photo-evo-row { display: flex; flex-direction: column; gap: 7px; }
.student-page .photo-evo-row .micro {
font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .photo-evo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.student-page .photo-evo-pair img {
width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
}
.student-page .photo-evo-empty {
aspect-ratio: 3 / 4; border-radius: 14px;
display: grid; place-items: center;
background: rgba(237, 244, 246, .025);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .05);
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .evo-photo-empty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.student-page .evo-photo-ph {
aspect-ratio: 3 / 4; border: 0; border-radius: 14px;
display: grid; place-items: center;
background: rgba(237, 244, 246, .025);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .05);
color: var(--ink-28);
}
.student-page .evo-photo-ph svg { width: 24px; height: 24px; }
.student-page .evo-photo-empty .evo-empty-msg { grid-column: 1 / 3; text-align: center; }
.student-page .wf-photo-row { gap: 10px; }
.student-page .wf-photo {
border: 0; border-radius: 16px; overflow: hidden;
background: rgba(237, 244, 246, .03);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
}
.student-page .wf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.student-page .wf-photo span {
font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-75);
background: rgba(5, 8, 10, .6); border-radius: 999px; padding: 4px 9px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.student-page .wf-photo svg { stroke: var(--ink-28); }
.student-page .wf-session-row { padding: 4px 0; }
.student-page .wf-right .wf-mid { font-size: 19px; }
/* ═══ 17 · PLANO ══════════════════════════════════════════════════════════
Decisão: "foco em renovação" — quanto falta e o botão de renovar em
destaque; plano, consultor e conta discretos abaixo. */
.student-page .wf-plan { gap: 16px; }
/* Faixa de renovação. Era um número de 54px ocupando meia tela — o prazo é
informação de referência, não manchete. Agora: nome à esquerda, prazo à
direita, barra fina, ação em botão fantasma. */
.student-page .wf-renew {
border: 0; border-radius: 22px; padding: 20px;
display: flex; flex-direction: column; gap: 16px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.student-page .wf-renew-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.student-page .wf-renew-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.student-page .wf-renew-name {
font-family: var(--display); font-weight: 600;
font-size: 19px; line-height: 1.1;
letter-spacing: -.02em; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.student-page .wf-renew-when { text-align: right; flex: none; display: flex; flex-direction: column; gap: 4px; }
.student-page .wf-renew-days {
font-family: var(--display); font-weight: 600; font-size: 19px;
line-height: 1; letter-spacing: -.01em;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.student-page .wf-renew-sub {
font-family: var(--mono); font-size: 11px;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-28);
}
.student-page .wf-renew-bar { height: 2px; border-radius: 999px; background: rgba(237, 244, 246, .07); overflow: hidden; }
.student-page .wf-renew-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .5); transition: width 800ms var(--ease); }
.student-page .wf-renew .wf-ga { width: 100%; }
/* — Linha do tempo do contrato —
Início à esquerda, fim à direita, e um marcador dizendo onde ele está hoje.
O trilho precisa de overflow visível para o marcador poder sair da linha. */
.student-page .wf-track-line { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.student-page .wf-track-rail {
position: relative; height: 3px; border-radius: 999px;
background: rgba(237, 244, 246, .08);
}
.student-page .wf-track-rail i {
position: absolute; inset: 0 auto 0 0; height: 100%;
border-radius: 999px; background: var(--blue);
box-shadow: 0 0 10px rgba(90, 167, 255, .55);
transition: width 900ms var(--ease);
}
.student-page .wf-track-rail b {
position: absolute; top: 50%;
width: 11px; height: 11px; border-radius: 999px;
transform: translate(-50%, -50%);
background: var(--blue);
box-shadow: 0 0 0 3px rgba(5, 8, 10, .9), 0 0 14px rgba(90, 167, 255, .7);
transition: left 900ms var(--ease);
}
.student-page .wf-track-ends { display: flex; justify-content: space-between; gap: 12px; }
.student-page .wf-track-ends span {
display: flex; flex-direction: column; gap: 3px;
font-family: var(--mono); font-size: 11px;
font-variant-numeric: tabular-nums; color: var(--ink-62);
}
.student-page .wf-track-ends .right { text-align: right; }
.student-page .wf-track-ends em {
font-style: normal; font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .wf-track-now {
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-38);
}
/* Fatos do plano em linhas, dentro do mesmo card do contrato: rótulo à
esquerda, valor à direita, filete entre eles. Antes eram duas caixas lado a
lado num card separado — moldura demais para três dados. */
.student-page .wf-facts {
display: flex; flex-direction: column;
margin: 4px 0 0;
padding-top: 14px;
box-shadow: inset 0 1px 0 rgba(237, 244, 246, .07);
}
.student-page .wf-facts > div {
display: flex; align-items: baseline; justify-content: space-between;
gap: 14px; padding: 9px 0;
}
.student-page .wf-facts > div + div { box-shadow: inset 0 1px 0 rgba(237, 244, 246, .045); }
.student-page .wf-facts dt {
font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-38);
}
.student-page .wf-facts dd {
margin: 0;
font-family: var(--display); font-weight: 600; font-size: 15px;
font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink);
}
/* O tempo bônus é a única linha que merece cor: é o que ela ganhou. */
.student-page .wf-facts .is-bonus dt { color: var(--blue-soft); }
.student-page .wf-facts .is-bonus dd { color: var(--blue); }
.student-page .wf-plan-actions { display: flex; flex-direction: column; }
.student-page .wf-plan-actions .wf-pa { width: 100%; }
/* — Indicação —
Card próprio, com anel azul e ícone. O peso vem do anel, não de tinta cheia:
renovar continua sendo a única ação em branco sólido da aba, e as duas não
brigam. Como link de texto isto sumia embaixo do botão de renovar. */
.student-page .wf-refer {
display: grid;
grid-template-columns: 40px 1fr;
align-items: start;
column-gap: 14px; row-gap: 13px;
border: 0; border-radius: 20px; padding: 18px;
background: linear-gradient(150deg, rgba(90, 167, 255, .11), rgba(90, 167, 255, .02) 62%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .26);
}
.student-page .wf-refer-ic {
width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center;
background: rgba(90, 167, 255, .14);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3);
color: var(--blue);
}
.student-page .wf-refer-ic svg { width: 20px; height: 20px; }
.student-page .wf-refer-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.student-page .wf-refer-txt strong {
font-family: var(--display); font-weight: 600; font-size: 19px;
letter-spacing: -.01em; color: var(--ink);
}
.student-page .wf-refer-txt p {
margin: 0;
font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--ink-62);
}
.student-page .wf-refer .wf-ga {
grid-column: 1 / -1; width: 100%;
background: rgba(90, 167, 255, .12); color: var(--bright);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.student-page .wf-refer .wf-ga:hover { background: rgba(90, 167, 255, .2); color: var(--ink); }
/* — Instalar na tela de início —
Mesma anatomia do card de indicação, em cinza: é utilidade, não oferta. */
.student-page .wf-install {
display: grid;
grid-template-columns: 40px 1fr;
align-items: start;
column-gap: 14px; row-gap: 13px;
border: 0; border-radius: 20px; padding: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .wf-install-ic {
width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50);
}
.student-page .wf-install-ic svg { width: 20px; height: 20px; }
.student-page .wf-install-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.student-page .wf-install-txt strong {
font-family: var(--display); font-weight: 600; font-size: 15px;
letter-spacing: -.01em; color: var(--ink);
}
.student-page .wf-install-txt p {
margin: 0;
font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--ink-50);
}
.student-page .wf-install .wf-ga { grid-column: 1 / -1; width: 100%; }
/* Passo a passo da instalação. */
.student-page .wf-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.student-page .wf-howto li { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 13px; }
.student-page .wf-howto span {
width: 26px; height: 26px; border-radius: 999px;
display: grid; place-items: center;
background: rgba(90, 167, 255, .12);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28);
font-family: var(--mono); font-size: 11px; color: var(--blue);
}
.student-page .wf-howto p { margin: 0; font-family: var(--body); font-size: 12.5px; line-height: 1.55; color: var(--ink-75); }
.student-page .wf-howto b { font-weight: 500; color: var(--ink); }
.student-page .wf-howto-note {
margin-top: 18px;
font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--ink-38);
}
/* — Modal de renovação: plano atual × recomendado — */
.student-page .sa-renew { display: flex; flex-direction: column; gap: 12px; }
.student-page .sa-renew-card {
display: flex; flex-direction: column; gap: 6px;
border-radius: 20px; padding: 17px 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .055);
}
.student-page .sa-renew-card.is-best {
background: linear-gradient(150deg, rgba(90, 167, 255, .1), rgba(90, 167, 255, .02) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.student-page .sa-renew-tag {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .sa-renew-card.is-best .sa-renew-tag { color: var(--blue); }
.student-page .sa-renew-name {
font-family: var(--display); font-weight: 600; font-size: 19px;
letter-spacing: -.02em; color: var(--ink);
}
.student-page .sa-renew-price {
font-family: var(--display); font-weight: 600; font-size: 19px;
font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink-75);
}
.student-page .sa-renew-month {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .sa-renew-save {
display: flex; flex-direction: column; gap: 3px;
border-radius: 12px; padding: 11px 13px; margin-top: 6px;
background: rgba(90, 167, 255, .1);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .24);
}
.student-page .sa-renew-save b {
font-family: var(--display); font-weight: 600; font-size: 15px;
font-variant-numeric: tabular-nums; color: var(--blue);
}
.student-page .sa-renew-save span {
font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-38);
}
.student-page .sa-renew-why { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.student-page .sa-renew-why li {
position: relative; padding-left: 16px;
font-family: var(--body); font-size: 12.5px; line-height: 1.45; color: var(--ink-62);
}
.student-page .sa-renew-why li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 5px; height: 5px; border-radius: 999px; background: var(--blue);
}
.student-page .sa-renew-card button { margin-top: 8px; width: 100%; }
/* Vencendo: o v3 não tem vermelho — a urgência é o anel mais forte. */
.student-page .wf-renew.is-due { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1.5px rgba(207, 233, 255, .4); }
.student-page .wf-renew.is-due .wf-renew-sub { color: var(--bright); }
/* Conta: fim da última aba, em texto. Sair não é um botão de ícone no topo. */
.student-page .wf-account { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.student-page .wf-account-btn {
border: 0; background: transparent; text-align: left;
padding: 12px 2px; color: var(--ink-28);
font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
transition: color 300ms ease;
}
.student-page .wf-account-btn:hover { color: var(--ink-75); }
.student-page .wf-tiles { gap: 12px; }
.student-page .wf-tile .wf-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
/* Tile sem nada publicado recua, mas continua clicável: some do primeiro
plano sem sumir da tela — ele ainda explica o que o plano cobre. */
.student-page .wf-tile.is-empty { box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .045); background: none; }
.student-page .wf-tile.is-empty .wf-name { color: var(--ink-50); }
.student-page .wf-tile.is-empty svg { stroke: var(--ink-28); }
.student-page .wf-coach { padding: 16px 18px; }
/* Faixa de renovação herdada (styles.css) alinhada ao v3. */
.student-page .renewal-banner {
border: 0; border-radius: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(90, 167, 255, .22);
}
.student-page .renewal-banner-btn,
.student-page .renewal-action-btn { border: 0; border-radius: 11px; background: var(--ink); color: var(--void); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.student-page .renewal-days-chip { border: 0; border-radius: 999px; background: rgba(90, 167, 255, .12); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28); color: var(--bright); font-family: var(--mono); }
.student-page .renewal-card { border: 0; border-radius: 20px; background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06); }
.student-page .renewal-card-current { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3); }
.student-page .renewal-card-name { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
/* ═══ 18 · CHECK-IN ═══════════════════════════════════════════════════════
Decisão: "4 passos com barra de progresso, um passo por tela, barra fina no
topo, botão único avançando". O formulário já é passo-a-passo; o que muda é
a hierarquia — a barra vira filete, VOLTAR vira texto, PRÓXIMO ocupa a
largura e vira o único alvo grande da tela. */
.student-page #checkinForm { gap: 18px; padding: 26px 22px 24px; }
.student-page .stepbar { height: 2px; border-radius: 999px; background: rgba(237, 244, 246, .07); overflow: hidden; }
.student-page .stepbar span { background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .5); transition: width 600ms var(--ease); }
.student-page .step { animation: csView 460ms var(--ease) both; gap: 18px; }
.student-page .step-header { gap: 5px; }
.student-page .step-title { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.student-page .field-note { font-family: var(--body); font-size: 12.5px; line-height: 1.55; color: var(--ink-38); }
.student-page .checkline { font-family: var(--body); font-size: 12.5px; color: var(--ink-62); }
/* Um botão só manda na tela. VOLTAR fica discreto à esquerda. */
.student-page .actions { display: flex; align-items: center; gap: 12px; }
.student-page .actions #nextBtn { flex: 1; min-height: 50px; border-radius: 14px; font-size: 11px; }
.student-page .actions #backBtn {
flex: none; min-height: 44px; padding: 0 4px;
background: transparent; box-shadow: none; color: var(--ink-28);
font-size: 11px;
}
.student-page .actions #backBtn:hover { background: transparent; color: var(--ink-62); transform: none; }
/* Roleta de peso: o número é o herói do passo 1. */
.student-page .peso-drum-label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-28); }
.student-page .peso-drum-wrap { border: 0; border-radius: 20px; background: rgba(237, 244, 246, .035); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06); }
.student-page .drum-item { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-28); transition: color 300ms ease, opacity 300ms ease; }
.student-page .drum-near { color: var(--ink-38); }
.student-page .drum-active { color: var(--ink); }
.student-page .drum-center { box-shadow: inset 0 1px 0 rgba(90, 167, 255, .3), inset 0 -1px 0 rgba(90, 167, 255, .3); background: rgba(90, 167, 255, .05); border: 0; }
.student-page .peso-drum-sep,
.student-page .peso-drum-unit { font-family: var(--display); font-weight: 600; color: var(--ink-50); }
/* Sliders e segmentos. */
.student-page .drum-control { border: 0; border-radius: 16px; padding: 14px 16px; background: rgba(237, 244, 246, .035); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06); }
.student-page .drum-control span { font-family: var(--body); font-size: 12.5px; color: var(--ink-75); }
.student-page .drum-control output { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.student-page .drum-control input[type="range"] { accent-color: var(--blue); }
.student-page .seg-group { gap: 7px; }
.student-page .seg-opt {
border: 0; border-radius: 999px; padding: 9px 15px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-50);
transition: background 350ms ease, color 350ms ease, transform 260ms var(--ease);
}
.student-page .seg-opt:hover { background: rgba(237, 244, 246, .09); color: var(--ink); }
.student-page .seg-opt.on { background: var(--ink); color: var(--void); box-shadow: none; }
.student-page .seg-opt:active { transform: scale(.95); }
/* Fotos do check-in. */
.student-page .photo-drop {
border: 0; border-radius: 18px;
background: rgba(237, 244, 246, .035);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-38);
transition: box-shadow 400ms ease, background 400ms ease;
}
.student-page .photo-drop:hover { background: rgba(237, 244, 246, .06); }
.student-page .photo-ready { box-shadow: inset 0 0 0 1.5px rgba(90, 167, 255, .5); background: rgba(90, 167, 255, .07); color: var(--bright); }
.student-page .photo-error { box-shadow: inset 0 0 0 1.5px rgba(207, 233, 255, .5); }
/* ═══ 19 · NOTIFICAÇÕES ═══════════════════════════════════════════════════
Decisão: o sino abre um painel de novidades do plano — folha de vidro
subindo. Estado vazio existe e é discreto: uma frase. */
.student-page .mz-notify-modal,
.mz-notify-modal {
background: rgba(5, 8, 10, .5);
backdrop-filter: blur(10px) saturate(1.05);
-webkit-backdrop-filter: blur(10px) saturate(1.05);
align-items: flex-end;
}
.mz-notify-card {
width: min(430px, 100vw);
border: 0; border-radius: 28px 28px 0 0;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(9, 13, 18, .95);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -20px 60px -20px rgba(0, 0, 0, .85);
padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
animation: csSheet 380ms var(--ease) both;
}
.mz-notify-head h2 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--ice); }
.mz-notify-head .micro { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(237, 244, 246, .38); }
.mz-change {
border: 0; border-radius: 18px; padding: 16px 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.mz-change-head strong { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.mz-change-go { border: 0; border-radius: 10px; background: rgba(237, 244, 246, .06); color: var(--ice); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; }
.mz-notify-dot { background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .7); }
.mz-diff-row { font-family: var(--body); font-size: 12.5px; }
.mz-diff-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237, 244, 246, .38); }
.mz-before { color: rgba(237, 244, 246, .38); text-decoration: line-through; }
.mz-after { color: var(--blue); font-variant-numeric: tabular-nums; }
.mz-arrow { color: rgba(237, 244, 246, .28); }
.mz-added { color: var(--blue); }
.mz-removed { color: rgba(237, 244, 246, .38); text-decoration: line-through; }
.mz-diff-note { font-family: var(--body); font-size: 12.5px; color: rgba(237, 244, 246, .5); }
/* Estado vazio do sino: uma frase, sem ilustração e sem caixa. */
.mz-notify-empty {
padding: 34px 8px 26px; text-align: center;
font-family: var(--body); font-size: 12.5px; line-height: 1.6;
color: rgba(237, 244, 246, .38);
}
/* A faixa flutuante de "seu plano foi atualizado" segue existindo, mas em
vidro do v3 — e agora divide o sino como segundo caminho. */
.mz-notify-banner {
border: 0; border-radius: 999px;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(9, 13, 18, .92);
backdrop-filter: blur(26px) saturate(1.08);
-webkit-backdrop-filter: blur(26px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(90, 167, 255, .22), 0 18px 50px -18px rgba(0, 0, 0, .85);
}
.mz-notify-banner strong { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.mz-notify-cta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
/* ═══ 20 · MODAIS E FOLHAS ════════════════════════════════════════════════ */
.student-page .student-tweak { background: rgba(5, 8, 10, .5); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); }
.student-page .student-tweak-panel {
border: 0; border-radius: 28px;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(9, 13, 18, .95);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.student-page .student-tweak-head h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.student-page .tweak-close {
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
color: var(--ink-38);
transition: color 300ms ease, background 300ms ease;
}
.student-page .tweak-close:hover { color: var(--ink); background: rgba(237, 244, 246, .1); }
.student-page .sa-protocol-modal-row {
border: 0; border-radius: 14px;
background: rgba(237, 244, 246, .035);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
font-family: var(--body);
}
.student-page .sa-protocol-modal-text { font-family: var(--body); color: var(--ink-75); }
.student-page .sa-protocol-modal-empty { font-family: var(--body); font-size: 12.5px; color: var(--ink-38); }
/* Folha inferior de substituição de alimento. */
.student-page .wf-sub-sheet {
border: 0; border-radius: 28px 28px 0 0;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(9, 13, 18, .95);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -20px 60px -20px rgba(0, 0, 0, .85);
}
.student-page .wf-grip { background: rgba(237, 244, 246, .16); }
.student-page .wf-sub-option {
border: 0; border-radius: 16px;
background: rgba(237, 244, 246, .035);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: background 350ms ease, box-shadow 350ms ease;
}
.student-page .wf-sub-option.on { background: rgba(90, 167, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(90, 167, 255, .4); }
.student-page .wf-target-pill { border: 0; border-radius: 999px; background: rgba(237, 244, 246, .04); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07); }
/* Folha de escolha de exercício / confirmação de saída. */
.student-page .wk-sheet,
.student-page .wk-exit-card,
.student-page .wk-confirm-card,
.student-page .wk-start-card {
border: 0; border-radius: 28px;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(9, 13, 18, .95);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.student-page .wk-sheet-grip { background: rgba(237, 244, 246, .16); }
.student-page .wk-sheet-chip {
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-50);
}
.student-page .wk-sheet-chip.on { background: var(--ink); color: var(--void); box-shadow: none; }
/* ═══ 21 · CAMADA ESTRUTURAL (mesma âncora do styles.css) ═════════════════
IMPORTANTE — o motivo deste bloco existir.
`.student-page` NÃO é um namespace livre: styles.css já tem 237 regras
qualificadas assim, e as estruturais estão ancoradas em
`.student-page #studentDashboard.wf-shell …` — que carrega um ID e vence
qualquer `.student-page .x` por especificidade, esteja meu arquivo depois
ou não. Era isso que derrubava a ilha, o cabeçalho e o respiro dos painéis
silenciosamente: a regra era escrita, aceita pelo parser, e perdia.
Aqui eu repito a MESMA âncora. Especificidade idêntica, ordem decide, e
como esta folha carrega por último, ganha. Continua sem !important e
continua reversível apagando o . */
/* — Cabeçalho: existe em TODAS as abas, e é só uma linha de data centrada —
styles.css esconde o cabeçalho fora da Hoje (4048) e desliga o clique da
faixa inteira (4046), devolvendo pointer-events só ao avatar.
O fundo é TRANSPARENTE de propósito. O gradiente escuro que estava aqui era
a "vinheta forte" do topo: uma faixa opaca que não desfocava nada, só tampava
o conteúdo. Agora quem separa o cabeçalho do conteúdo é o blur do que passa
por baixo, com máscara para o desfoque morrer suavemente na borda de baixo
em vez de terminar num corte reto. */
.student-page #studentDashboard.wf-shell .sa-header,
.student-page #studentDashboard.wf-shell.wf-tab-treino .sa-header,
.student-page #studentDashboard.wf-shell.wf-tab-dieta .sa-header,
.student-page #studentDashboard.wf-shell.wf-tab-evolucao .sa-header,
.student-page #studentDashboard.wf-shell.wf-tab-plano .sa-header {
display: flex;
align-items: center;
justify-content: center;
padding: calc(env(safe-area-inset-top, 0px) + 15px) 20px 13px;
background: transparent;
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
pointer-events: none;
}
/* Só os alvos voltam a receber toque — o resto da faixa continua deixando o
conteúdo rolar por baixo. */
.student-page #studentDashboard.wf-shell .sa-header-right,
.student-page #studentDashboard.wf-shell .sa-header .sa-bell-btn { pointer-events: auto; }
/* A data é o único conteúdo do topo: centrada, discreta, sem competir. */
.student-page #studentDashboard.wf-shell .sa-header-left {
flex: 0 1 auto; min-width: 0; text-align: center;
}
.student-page #studentDashboard.wf-shell .sa-header-sub {
font: 8.5px var(--mono); letter-spacing: .26em;
text-transform: uppercase; color: var(--ink-28);
margin: 0;
}
.student-page #studentDashboard.wf-shell .sa-header-title { display: none; }
/* Sair não é alvo de primeiro nível — o botão de desligar saiu do topo.
A ação vive no fim da aba Plano, onde ninguém esbarra nela sem querer. */
.student-page #studentDashboard.wf-shell .sa-avatar-btn { display: none; }
/* O sino só existe quando há novidade; sem nada novo não ocupa lugar. */
.student-page #studentDashboard.wf-shell .sa-header-right {
position: absolute; right: 18px;
top: calc(env(safe-area-inset-top, 0px) + 11px);
display: flex; align-items: center; gap: 8px;
}
.student-page #studentDashboard.wf-shell .sa-bell-btn {
width: 34px; height: 34px; border: 0; border-radius: 999px;
display: grid; place-items: center;
background: rgba(237, 244, 246, .05); color: var(--ink-62);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
animation: csFade 400ms ease both;
}
.student-page #studentDashboard.wf-shell .sa-bell-btn[data-count="0"] { display: none; }
.student-page #studentDashboard.wf-shell .sa-bell-btn:active { transform: scale(.94); opacity: 1; }
/* — Respiro dos painéis: o conteúdo rola POR BAIXO das duas barras —
Este era o retângulo que "cortava" o conteúdo. styles.css põe o padding no
.sa-panels (que tem overflow:hidden) e deixa o .sa-panel rolar dentro dele:
o conteúdo era recortado na borda do padding, então nada passava por baixo
das barras e não havia o que desfocar. O padding tem de morar no elemento
que ROLA — aí o conteúdo desliza por baixo e o blur ganha substrato. */
.student-page #studentDashboard.wf-shell .sa-panels { padding: 0; }
.student-page #studentDashboard.wf-shell.wf-tab-dieta .sa-panels,
.student-page #studentDashboard.wf-shell.wf-tab-evolucao .sa-panels,
.student-page #studentDashboard.wf-shell.wf-tab-plano .sa-panels,
.student-page #studentDashboard.wf-shell.wf-tab-treino .sa-panels { padding-top: 0; }
.student-page #studentDashboard.wf-shell .sa-panel {
gap: 14px;
padding: 64px 20px var(--island-clear);
scroll-padding-top: 64px;
}
/* — A ilha —
4056 e 4125 a colam no rodapé com left/right:0, width:100%, transform:none.
Reverter exige desfazer as três coisas, não só mudar a largura.
Sem fundo sólido: só um véu de vidro e o blur do que passa por baixo. */
.student-page #studentDashboard.wf-shell .sa-tabbar {
position: absolute;
left: 50%; right: auto;
width: min(360px, calc(100% - 40px));
max-width: none;
transform: translateX(-50%);
bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
display: flex; align-items: center; justify-content: center; gap: 2px;
padding: 6px;
border: 0; border-top: 0; border-radius: 999px;
overflow: visible;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 55%);
backdrop-filter: blur(26px) saturate(1.5);
-webkit-backdrop-filter: blur(26px) saturate(1.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07),
0 8px 32px -8px rgba(0, 0, 0, .5);
}
.student-page #studentDashboard.wf-shell .sa-tab {
flex: 1 1 0; min-width: 0; max-width: none;
height: 46px; border-radius: 999px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
padding: 0; color: var(--ink-38);
font: 7.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
transition: color 420ms ease, background 420ms ease;
}
.student-page #studentDashboard.wf-shell .sa-tab svg {
width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; fill: none;
}
/* Rótulo só na aba ativa: cinco palavras acesas competem com o conteúdo, e é
o ícone que o polegar procura. */
.student-page #studentDashboard.wf-shell .sa-tab span {
font: inherit; color: inherit;
opacity: 0; max-height: 0; overflow: hidden;
transition: opacity 380ms ease, max-height 380ms var(--ease);
}
.student-page #studentDashboard.wf-shell .sa-tab.sa-tab-on {
background: rgba(237, 244, 246, .1);
color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.student-page #studentDashboard.wf-shell .sa-tab.sa-tab-on svg { stroke: var(--ink); }
.student-page #studentDashboard.wf-shell .sa-tab.sa-tab-on span { opacity: 1; max-height: 12px; }
/* — Herói da Hoje —
O rótulo do dia vem do consultor e pode ser longo ("Perna — Quadríceps /
Posterior / Panturrilhas"). Sem teto ele ocupa três linhas e empurra o
resto para fora da primeira dobra; duas linhas é o limite. */
.student-page #studentDashboard.wf-shell .wf-hero-name {
font-family: var(--display); font-weight: 600;
font-size: 19px; line-height: 1.08; letter-spacing: -.02em;
color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.student-page #studentDashboard.wf-shell .wf-chev { width: 15px; height: 15px; stroke: var(--ink-28); margin-left: 0; }
/* — Seletores de plano (treino e dieta) —
Duas famílias diferentes fazendo a mesma coisa que o .wf-seg já faz: virar
a mesma pílula, senão a mesma tela tem dois desenhos de seletor.
Centrado e responsivo por contagem: grid de colunas automáticas de 1fr, então
dois planos dividem a largura em dois e três em três, sem media query e sem
número mágico. */
.student-page .workout-plan-tabs,
.student-page .diet-strategy-tabs {
align-self: center;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: 4px; padding: 4px; width: 100%; max-width: 340px;
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
}
.student-page .workout-plan-tab,
.student-page .diet-strategy-tab {
border: 0; border-radius: 999px; padding: 9px 10px;
background: transparent; color: var(--ink-38);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: background 400ms ease, color 400ms ease;
}
.student-page .workout-plan-tab:hover,
.student-page .diet-strategy-tab:hover { color: var(--ink-75); }
.student-page .workout-plan-tab.on,
.student-page .diet-strategy-tab.on { background: var(--ink); color: var(--void); }
.student-page .diet-tab-today { font-style: normal; opacity: .6; }
/* — Sombras cortadas nas refeições —
As refeições herdavam a sombra externa de .wf-gp (0 22px 64px) e o pai
recortava: aparecia um retângulo escuro atrás de cada card, cortado na
borda do contêiner. No v3 a profundidade é o anel interno, não a sombra
projetada — então ela some e o corte deixa de existir. */
.student-page .wf-meal,
.student-page .wf-plan-meal,
.student-page .wf-diary-meal,
.student-page .wf-diary-ring {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.student-page .wf-diet,
.student-page .wf-diet-screen,
.student-page .wf-plan-meals,
.student-page .wf-diary-meals { overflow: visible; }
/* Nome do plano no topo da renovação: uma linha. Vem digitado pelo consultor
e pode ser longo ("elite semestral lifetime teste operador"). */
.student-page .wf-renew > .wf-lbl {
display: block; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Barras de volume: 4 colunas largas viravam blocos, não um gráfico. */
.student-page .wf-barsv { height: 72px; gap: 8px; justify-content: center; }
.student-page .wf-barsv .wf-vbar { max-width: 46px; }
/* O "%" ao lado do número do KPI é sufixo, não expoente. */
.student-page .wf-kpi-v small { font-family: var(--mono); font-size: 11px; color: var(--ink-38); vertical-align: baseline; margin-left: 1px; }
/* ═══ 22 · DIETA — A FAMÍLIA QUE A TELA USA DE VERDADE ════════════════════
O bloco 15 vestia .wf-meal, que NÃO é o que renderiza: a aba Nutrição sai
pela família diet-v2-* / diet-consumo-* / dc-* / diet-food-*. Era por isso
que a dieta parecia de outro tema — a pele nunca chegou nela.
styles.css:4034 dá a esses cards `background: rgba(14,19,25,.60)` e uma
sombra externa de 64px, herança do tema antigo. Aqui eles recebem a mesma
superfície de todos os outros cards do painel. */
.student-page .diet-v2-card,
.student-page .diet-consumo {
border: 0;
border-radius: 20px;
padding: 0;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: box-shadow 420ms ease, transform 320ms var(--ease);
}
.student-page .diet-consumo { padding: 20px; margin-bottom: 0; gap: 20px; }
.student-page .diet-v2-cards { display: flex; flex-direction: column; gap: 10px; }
.student-page .diet-v2-card.diet-v2-open {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .24);
}
.student-page .diet-v2-head { padding: 15px 17px; gap: 12px; }
.student-page .diet-v2-name {
font-family: var(--display); font-weight: 600; font-size: 15px;
letter-spacing: -.01em; color: var(--ink);
}
.student-page .diet-v2-mtime {
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-28);
}
.student-page .diet-v2-info { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-50); }
.student-page .diet-v2-chev { color: var(--ink-28); transition: transform 420ms var(--ease), color 320ms ease; }
.student-page .diet-v2-card.diet-v2-open .diet-v2-chev { color: var(--blue); }
/* Acordeão fluido, sem número mágico.
styles.css alterna display:none/block, que não anima. A técnica correta é
grid de 0fr para 1fr — o navegador interpola fração de linha de verdade, e a
altura final é a que o conteúdo tiver, sem max-height chutado.
O truque só governa a PRIMEIRA linha do grid, então ele exige um filho único:
por isso diet.js embrulha o conteúdo em .diet-v2-inner. Com vários filhos as
linhas extras nasciam "auto" e o card fechado continuava com altura cheia.
O min-height:0 no filho é o que permite ele encolher abaixo do conteúdo. */
.student-page .diet-v2-body {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
padding: 0 17px;
opacity: 0;
transition: grid-template-rows 420ms var(--ease), opacity 260ms ease, padding-bottom 420ms var(--ease);
}
.student-page .diet-v2-inner { min-height: 0; overflow: hidden; }
/* display repetido: styles.css força block no estado aberto com especificidade
maior, e block descarta a animação de grid. */
.student-page .diet-v2-card.diet-v2-open .diet-v2-body {
display: grid;
grid-template-rows: 1fr;
opacity: 1;
padding-bottom: 16px;
}
/* Navegador sem interpolação de fr (Safari < 17) cairia no corte seco. Ali o
max-height volta como rede, e só ali. */
@supports not (grid-template-rows: 0fr) {
.student-page .diet-v2-body { display: block; max-height: 0; transition: max-height 380ms var(--ease), opacity 240ms ease, padding-bottom 380ms var(--ease); }
.student-page .diet-v2-card.diet-v2-open .diet-v2-body { display: block; max-height: 1800px; }
}
/* Anel de consumo e macros. */
.student-page .diet-consumo-center .wf-big,
.student-page .diet-consumo-center strong {
font-family: var(--display); font-weight: 600;
font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink);
}
/* Sem text-transform aqui: a linha traz rótulo E valor, e maiúsculo em bloco
transformava "204g" em "204G". O rótulo já vem escrito como deve. */
.student-page .dc-macro-top {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
font-variant-numeric: tabular-nums; color: var(--ink-50);
}
.student-page .dc-bar { height: 4px; border-radius: 999px; background: rgba(237, 244, 246, .07); margin-top: 6px; }
.student-page .dc-bar > * { transition: width 700ms var(--ease); }
.student-page .dc-bar-p > * { background: var(--blue); }
.student-page .dc-bar-c > * { background: rgba(237, 244, 246, .5); }
.student-page .dc-bar-g > * { background: rgba(237, 244, 246, .26); }
/* Macro por refeição saiu (2026-08-18): a conta que importa é a do dia, no
cartão do topo. O JS remove os chips depois do wire; a regra abaixo evita o
piscar entre render e wire. */
.student-page .wf-diet-track .diet-opt-total { display: none; }
/* O invólucro das refeições existe para a meta do dia saber o que somar —
prescrições ficam de fora da conta. Sem estilo próprio de propósito. */
.student-page .diet-meals-wrap { display: block; }
/* Linhas de alimento. */
.student-page .diet-food-row {
padding: 9px 0;
box-shadow: inset 0 -1px 0 rgba(237, 244, 246, .05);
transition: opacity 320ms ease;
}
.student-page .diet-food-row:last-child { box-shadow: none; }
.student-page .diet-food-name { font-family: var(--body); font-weight: 400; font-size: 12.5px; color: var(--ink-75); }
.student-page .diet-food-qty { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-38); }
.student-page .diet-ck {
width: 20px; height: 20px; border: 0; border-radius: 6px;
background: transparent;
box-shadow: inset 0 0 0 1.5px rgba(237, 244, 246, .16);
transition: background 300ms ease, box-shadow 300ms ease, transform 260ms var(--ease);
}
.student-page .diet-ck:active { transform: scale(.88); }
.student-page .diet-ck.on,
.student-page .diet-ck[aria-checked="true"] { background: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.student-page .diet-sub-btn {
width: 30px; height: 30px; border: 0; border-radius: 9px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
color: var(--ink-38);
transition: background 300ms ease, color 300ms ease, transform 260ms var(--ease);
}
.student-page .diet-sub-btn:hover { background: rgba(237, 244, 246, .1); color: var(--ink); }
.student-page .diet-sub-btn:active { transform: scale(.9); }
/* Opções de substituição dentro da refeição. */
.student-page .diet-opt-panel {
border: 0; border-radius: 14px; padding: 12px 14px;
background: rgba(237, 244, 246, .035);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.student-page .diet-opt-label-text { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38); }
.student-page .diet-opt-total { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-50); }
.student-page .diet-opt-dot { background: rgba(237, 244, 246, .2); transition: background 320ms ease, transform 320ms var(--ease); }
.student-page .diet-opt-dot.on { background: var(--blue); transform: scale(1.25); }
/* ═══ 23 · MOVIMENTO ══════════════════════════════════════════════════════
Uma gramática só: entrada sobe e desfoca, saída desce e apaga, toque
encolhe. Nada anima sozinho sem motivo — cada curva responde a uma ação. */
/* — Check-in aberto: o alvo principal da semana —
O aluno tende a não mandar check-in, então quando a janela abre este cartão
sai da grade de dois e ocupa a largura toda, respirando devagar. A pulsação
é do ANEL, não do card inteiro: card que pisca vira banner de anúncio. */
@keyframes csBreathe {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3), 0 0 0 0 rgba(90, 167, 255, .22); }
50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(90, 167, 255, .55), 0 0 26px 2px rgba(90, 167, 255, .16); }
}
@keyframes csSweep {
0% { transform: translateX(-130%); opacity: 0; }
12% { opacity: 1; }
55% { transform: translateX(130%); opacity: 0; }
100% { transform: translateX(130%); opacity: 0; }
}
.student-page .wf-card.is-live {
position: relative;
overflow: hidden;
padding: 17px 18px;
animation: csBreathe 3.4s var(--ease) infinite;
}
.student-page .wf-card.is-live .wf-card-k { color: var(--blue); }
.student-page .wf-card.is-live .wf-card-v { font-size: 25px; }
/* Lâmina de luz atravessando a cada ciclo: chama o olho sem piscar. */
.student-page .wf-card.is-live::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(207, 233, 255, .14) 50%, transparent 65%);
animation: csSweep 3.4s var(--ease) infinite;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.student-page .wf-card.is-live { animation: none; box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .5); }
.student-page .wf-card.is-live::after { display: none; }
}
/* — Troca de aba: o conteúdo entra, a ilha acompanha —
O ícone ativo dá um passo à frente e o rótulo abre junto. Sem isso a barra
ficava estática enquanto a página inteira se movia. */
.student-page #studentDashboard.wf-shell .sa-tab {
transition: color 420ms ease, background 420ms var(--ease), transform 360ms var(--ease);
}
.student-page #studentDashboard.wf-shell .sa-tab svg {
transition: transform 460ms var(--ease), stroke 420ms ease;
}
.student-page #studentDashboard.wf-shell .sa-tab.sa-tab-on svg { transform: translateY(-1px) scale(1.06); }
.student-page #studentDashboard.wf-shell .sa-tab:active { transform: scale(.9); }
/* — Modais: a entrada ganha a mesma curva da saída —
O fechamento já era animado por JS (studentTweakOut, .34s). A abertura vinha
de um viewIn genérico com outra curva, então abrir e fechar pareciam dois
movimentos diferentes. Agora é o mesmo gesto invertido. */
.student-page .student-tweak { animation: csFade 260ms ease both; }
.student-page .student-tweak-panel { animation: csIn 420ms var(--ease) both; }
/* — Toque: tudo que é alvo encolhe um pouco —
Confirmação física imediata, antes mesmo de a tela responder. */
.student-page button,
.student-page .link-action { transition: transform 260ms var(--ease), background 380ms ease, color 380ms ease, box-shadow 380ms ease; }
/* — Listas: cada item entra atrasado em relação ao anterior —
O escalonamento dá direção à leitura em vez de despejar tudo de uma vez. */
.student-page .wf-cards > *,
.student-page .wf-rows > *,
.student-page .diet-v2-cards > *,
.student-page .wk-swap-list > * { animation: csRise 420ms var(--ease) both; }
.student-page .wf-cards > *:nth-child(2),
.student-page .wf-rows > *:nth-child(2),
.student-page .diet-v2-cards > *:nth-child(2),
.student-page .wk-swap-list > *:nth-child(2) { animation-delay: 50ms; }
.student-page .wf-cards > *:nth-child(3),
.student-page .wf-rows > *:nth-child(3),
.student-page .diet-v2-cards > *:nth-child(3),
.student-page .wk-swap-list > *:nth-child(3) { animation-delay: 100ms; }
.student-page .wf-cards > *:nth-child(n+4),
.student-page .wf-rows > *:nth-child(n+4),
.student-page .diet-v2-cards > *:nth-child(n+4),
.student-page .wk-swap-list > *:nth-child(n+4) { animation-delay: 150ms; }
/* Calendário: os dias nascem em cascata da esquerda para a direita. */
.student-page .wk-cal-grid > * { animation: csFade 340ms ease both; }
.student-page .wk-cal-grid > *:nth-child(7n+2) { animation-delay: 20ms; }
.student-page .wk-cal-grid > *:nth-child(7n+3) { animation-delay: 40ms; }
.student-page .wk-cal-grid > *:nth-child(7n+4) { animation-delay: 60ms; }
.student-page .wk-cal-grid > *:nth-child(7n+5) { animation-delay: 80ms; }
.student-page .wk-cal-grid > *:nth-child(7n+6) { animation-delay: 100ms; }
.student-page .wk-cal-grid > *:nth-child(7n+7) { animation-delay: 120ms; }
/* ── Desktop: o painel é uma coluna de telefone centrada. Ninguém entra pelo
PC, mas quando entra não pode virar uma faixa esticada. ────────────── */
@media (min-width: 720px) {
.student-page .student-shell { max-width: 460px; margin-inline: auto; }
.student-page #studentDashboard.wf-shell .sa-panel { max-width: 460px; margin-inline: auto; width: 100%; }
}
.student-page .wk-cal-foot { margin: var(--sp-3) 0 0; color: var(--ink-28); }
/* ═══ 99 · SISTEMA TIPOGRÁFICO ════════════════════════════════════════════════
Inter na interface, Newsreader no que se lê como texto. Antes eram três
famílias de estética techy (Chakra Petch, Space Grotesk, JetBrains) com
metade da tela em caixa alta espaçada — a interface lia como painel de
instrumento, não como produto. A caixa alta ficou restrita ao rótulo curto de
seção; todo o resto é caixa baixa com espacejamento levemente negativo nos
títulos, que é o que dá o assentamento editorial.
Inter → interface: rótulo, título, número, botão
Newsreader → leitura: o que o consultor escreve para o aluno
mono → só dado tabular de treino (carga, série), onde alinhar importa */
.student-page {
--display: Inter, system-ui, sans-serif;
--body: Inter, system-ui, sans-serif;
--read: Newsreader, Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--t-d1: 25px; --lh-d1: 1.08;
--t-d2: 19px; --lh-d2: 1.12;
--t-b1: 15px; --lh-b1: 1.5;
--t-b2: 12.5px; --lh-b2: 1.45;
--t-m: 11px; --lh-m: 1.35;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px;
}
/* — Rótulo: nomeia o bloco e sai da frente. Caixa baixa, peso médio, cor fraca —
um rótulo não precisa de caixa alta para ser reconhecido como rótulo; a
posição e a cor já fazem esse trabalho. */
.student-page .wf-lbl,
.student-page .wf-cap,
.student-page .wf-card-k,
.student-page .wk-week-lbl,
.student-page .wk-routine-lbl,
.student-page .wk-routine-when,
.student-page .micro {
font-family: var(--body); font-weight: 500;
font-size: var(--t-m); line-height: var(--lh-m);
letter-spacing: 0; text-transform: none;
color: var(--ink-38);
}
/* — Metadado: a linha de apoio sob o valor — */
.student-page .wf-meta,
.student-page .wf-card-m,
.student-page .wf-row-m,
.student-page .wf-hero-meta,
.student-page .wk-week-count,
.student-page .wk-routine-plan,
.student-page .wk-routine-meta,
.student-page .wk-routine-go,
.student-page .wk-cal-foot,
.student-page .wf-swap-link-link {
font-family: var(--body); font-weight: 500;
font-size: var(--t-b2); line-height: var(--lh-b2);
letter-spacing: -.005em; text-transform: none;
}
/* — Título: o nome da coisa. Espacejamento negativo aperta a palavra e é o
detalhe que separa "texto grande" de tipografia desenhada. — */
.student-page .wf-hero-name,
.student-page .wf-big,
.student-page .wf-card-v {
font-family: var(--display); font-weight: 600;
font-size: var(--t-d1); line-height: var(--lh-d1); letter-spacing: -.022em;
text-transform: none;
}
.student-page .wf-tt,
.student-page .wf-name,
.student-page .wf-name.big,
.student-page .wk-routine-name,
.student-page .wk-cal-title {
font-family: var(--display); font-weight: 600;
font-size: var(--t-d2); line-height: var(--lh-d2); letter-spacing: -.018em;
text-transform: none;
}
/* — Interface corrente e botões — */
.student-page .wf-row-k,
.student-page .status,
.student-page .field-note {
font-family: var(--body); font-weight: 500;
font-size: var(--t-b1); line-height: var(--lh-b1);
letter-spacing: -.006em; text-transform: none;
}
.student-page .wf-pa,
.student-page .wf-ga,
.student-page .primary-action,
.student-page .ghost-action {
font-family: var(--body); font-weight: 500;
font-size: 14px; letter-spacing: -.01em; text-transform: none;
}
/* — Leitura: o que o consultor escreve. Única serifada do app, e o único lugar
onde o texto é para ser lido de ponta a ponta em vez de escaneado. — */
.student-page .wf-coach .wf-meta,
.student-page .wf-prosa,
.student-page .msg-body,
.student-page .feedback-text {
font-family: var(--read); font-weight: 400;
font-size: 16.5px; line-height: 1.5;
letter-spacing: 0; text-transform: none; color: var(--ink-75);
}
/* — Etiqueta de grupo muscular: pílula, caixa baixa — */
.student-page .wf-hero-tags span,
.student-page .wk-routine-tags i {
font-family: var(--body); font-weight: 500;
font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-50);
}
/* — Caixa alta sobrevive em um lugar só: o rótulo de seção, que separa blocos
da tela e se beneficia de parecer uma etiqueta. — */
.student-page .wk-week-lbl,
.student-page .wk-routine-lbl {
font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-28);
}
/* — Números alinhados: mesma largura de dígito em qualquer valor, para a
coluna não dançar quando 9 vira 10. — */
.student-page .wf-card-v,
.student-page .wf-big,
.student-page .wk-routine-meta,
.student-page .wk-week-count { font-variant-numeric: tabular-nums; }
/* — Espaço: rótulo → valor → metadado, igual em todo cartão do app — */
.student-page .wf-hero { gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.student-page .wf-hero .wf-pa { margin-top: var(--sp-3); }
.student-page .wf-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); }
.student-page .wf-card-k, .student-page .wf-card-v, .student-page .wf-card-m { grid-column: auto; }
.student-page .wf-card-m { color: var(--ink-28); }
.student-page .wf-card.is-off .wf-card-v { font-size: var(--t-d2); line-height: var(--lh-d2); color: var(--ink-38); }
.student-page .wf-cards { gap: var(--sp-2); }
.student-page .wf-rows { margin-top: var(--sp-2); }
.student-page .wk-routine-when { color: var(--ink-38); }
.student-page .wk-routine-go { color: var(--blue); }
.student-page .wk-routine-row.is-today .wk-routine-when { color: var(--blue); }
/* ═══ 100 · NORMALIZAÇÃO DE HERANÇA ══════════════════════════════════════════
O app do aluno divide o styles.css com o painel do consultor: 323 usos de
mono, 200 declarações de caixa alta e 28 tamanhos de fonte que a camada v3
nunca alcançou. Era daí que vinha a sensação de "cada tela é de um app" —
qualquer elemento não coberto por uma regra .wf-* caía no legado e voltava
a ser Fragment Mono maiúsculo.
Esta camada fecha a herança dentro de .student-page. Ela não edita o legado
(o consultor continua exatamente como está); apenas garante que, no app do
aluno, o que não tiver regra própria já nasça dentro do sistema. */
.student-page :where(h1, h2, h3, h4, h5, h6, p, span, div, li, dt, dd,
button, a, label, input, textarea, select, strong, b, em, small, td, th) {
font-family: var(--body);
}
/* Dado tabular continua em mono: carga, série, repetição e relógio precisam de
dígito de largura fixa para a coluna não dançar entre 9 e 10. */
.student-page :where(.wk-set-input, .wk-set-weight, .wk-set-reps, .wk-timer,
.wk-rest-time, .wk-elapsed, .wk-vol-value, .wk-cal-day, .wk-log-value,
.peso-drum-col, .drum-item) {
font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* Leitura fica na serifada: o que o consultor escreve e o que o aluno responde
são texto, não interface. */
.student-page :where(.wf-coach .wf-meta, .wf-prosa, .msg-body, .feedback-text,
.checkin-feedback, .wk-note-body, .diet-note, .plan-note) {
font-family: var(--read); font-weight: 400;
font-size: 16.5px; line-height: 1.5; letter-spacing: 0; text-transform: none;
}
/* — Pesos: três, não sete —
700/800 em fonte de interface engorda o texto sem criar hierarquia; a
hierarquia vem de tamanho e cor. 300 desaparece no fundo escuro. */
.student-page :where(h1, h2, h3, h4, strong, b, .panel-title, .step-title, .wf-tt) { font-weight: 600; }
.student-page :where(p, span, li, td, label, input, textarea) { font-weight: 400; }
.student-page :where(button, .wf-pa, .wf-ga, .primary-action, .ghost-action, .sa-tab) { font-weight: 500; }
/* — Caixa alta: só onde etiqueta blocos —
Espalhada, ela lê como painel de instrumento e destrói a leitura. Sobrevive
no rótulo de seção e no botão curto; some do resto. */
.student-page :where(p, span, li, td, th, label, .status, .field-note,
.wf-name, .wf-meta, .wf-card-v, .wf-card-m, .wf-hero-name, .wf-hero-meta,
.panel-title, .step-title, .wk-routine-name, .wk-routine-meta, .wk-routine-when) {
text-transform: none;
}
/* Espacejamento largo é da caixa alta. Em caixa baixa ele só afrouxa a palavra
e faz o texto perder o corpo. */
.student-page :where(p, span, li, td, .wf-name, .wf-meta, .wf-card-v,
.wf-card-m, .wf-hero-name, .wk-routine-name) { letter-spacing: -.006em; }
.student-page :where(.wf-hero-name, .wf-card-v, .wf-tt, .panel-title) { letter-spacing: -.022em; }
/* — Escala: nada fora dos cinco degraus —
Alcança o que veio do legado (títulos de painel, passos do check-in, notas). */
.student-page :where(h1, .panel-title) { font-size: var(--t-d1); line-height: var(--lh-d1); }
.student-page :where(h2, h3, .step-title) { font-size: var(--t-d2); line-height: var(--lh-d2); }
.student-page :where(p, li, td, label, input, textarea, select, .status) { font-size: var(--t-b1); line-height: var(--lh-b1); }
.student-page :where(.field-note, small, .wf-card-m, .wf-meta) { font-size: var(--t-b2); line-height: var(--lh-b2); }
.student-page :where(.micro, .wf-lbl, .wf-cap) { font-size: var(--t-m); line-height: var(--lh-m); }
/* — Ritmo vertical: o mesmo respiro em todas as abas —
Cada tela tinha sua própria margem entre blocos, e é isso que faz duas telas
do mesmo app parecerem de produtos diferentes. */
.student-page .sa-panel > * + * { margin-top: var(--sp-3); }
.student-page :where(.sa-panel) > :where(h2, h3, .wf-sec, .wk-week-lbl, .wk-routine-lbl) { margin-top: var(--sp-6); }
.student-page :where(.wf-gp, .glass-panel, .sa-ice-card) { padding: var(--sp-5); border-radius: 18px; }
.student-page :where(.wf-gp, .glass-panel) + :where(.wf-gp, .glass-panel) { margin-top: var(--sp-2); }
.student-page p { margin: 0 0 var(--sp-2); }
.student-page p:last-child { margin-bottom: 0; }
/* — Alvo de toque: 44px é o mínimo do dedo, não uma sugestão — */
.student-page :where(button, .sa-tab, .wf-row, .wf-card, .wk-routine-row) { min-height: 44px; }
/* ═══ 101 · A RAIZ DA INCOERÊNCIA ════════════════════════════════════════════
styles.css redefine as três famílias em `.student-page #studentDashboard.wf-shell`
— um seletor com id, que vence qualquer redefinição feita em `.student-page`.
Como custom property é resolvida no elemento, TODO `var(--body)` dentro do app
voltava a ser Anek Latin, e todo `var(--mono)` voltava a ser Fragment Mono,
mesmo com a camada de sistema declarada depois. Era essa a origem das
"várias incoerências em todas as páginas": não era regra faltando, era a
variável sendo sequestrada um nível acima.
Reancorado no mesmo seletor (mais um, para o painel sem .wf-shell). Mexer no
styles.css resolveria também — e quebraria o painel do consultor, que divide
o arquivo e continua em Michroma por decisão de marca. */
.student-page #studentDashboard.wf-shell,
.student-page #studentDashboard,
.student-page .glass-panel,
.student-page #checkinForm {
--display: Inter, system-ui, sans-serif;
--body: Inter, system-ui, sans-serif;
--read: Newsreader, Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
/* O shorthand `font:` do legado reescreve família E tamanho de uma vez, então
não basta corrigir a variável nos controles que ele atinge. */
.student-page #studentDashboard :where(.wf-pa, .wf-ga, .primary-action, .ghost-action, .seg-opt, .diet-opt-tab, .chip) {
font-family: var(--body); font-size: 14px; font-weight: 500;
letter-spacing: -.01em; text-transform: none;
}
.student-page #studentDashboard :where(.wf-pa.sm, .wf-ga.sm, .chip, .seg-opt, .diet-opt-tab) { font-size: 12.5px; }
.student-page #studentDashboard :where(.seg-label, .diet-meal-name, .diet-food-name, .wf-link) {
font-family: var(--body); text-transform: none; letter-spacing: -.006em;
}
.student-page #studentDashboard :where(.diet-food-qty, .diet-meal-time, .wk-wd-d) {
font-family: var(--mono); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0;
}
/* Últimos degraus órfãos do legado, medidos na tela renderizada: o nome da
refeição vinha a 13px (menor que o texto ao redor, sendo o título do cartão),
o horário a 10px, a tira de macros a 7,5px — ilegível — e o índice da série a
16px. Todos reancorados na escala. */
.student-page #studentDashboard :where(.diet-meal-name) { font-size: var(--t-d2); line-height: var(--lh-d2); font-weight: 600; }
.student-page #studentDashboard :where(.diet-meal-time) { font-size: var(--t-b2); }
.student-page #studentDashboard :where(.diet-macros-strip, .diet-macros-strip span, .diet-hyd-l, .diet-hydration span) { font-size: var(--t-b2); letter-spacing: -.005em; }
.student-page #studentDashboard :where(.wk-set-idx) { font-size: var(--t-b1); font-family: var(--mono); }
/* A barra de abas — a navegação principal — estava com rótulo de 7,5px. É o
controle mais usado do app e o menos legível de todos. */
.student-page #studentDashboard :where(.sa-tab span, .sa-tab) {
font-family: var(--body); font-size: 10.5px; font-weight: 500;
letter-spacing: .02em; text-transform: none;
}
.student-page #studentDashboard :where(.sa-tab.sa-tab-on span, .sa-tab.on span) { font-weight: 600; }
/* O rótulo da aba estava preso por `#studentDashboard.wf-shell .sa-tab span`,
que também limitava a altura a 12px — foi assim que 7,5px virou o tamanho da
navegação principal. Reancorado no mesmo nível de especificidade. */
.student-page #studentDashboard.wf-shell .sa-tab,
.student-page #studentDashboard.wf-shell .sa-tab span {
font-family: var(--body); font-size: 10.5px; line-height: 1.2;
font-weight: 500; letter-spacing: .02em; text-transform: none;
max-height: none;
}
.student-page #studentDashboard.wf-shell .sa-tab.sa-tab-on span { font-weight: 600; max-height: none; }
/* ═══ 102 · CONTROLES ════════════════════════════════════════════════════════
Quatro defeitos que o inventário de componentes expôs, todos invisíveis numa
leitura de código: campo de texto sem estilo nenhum (fundo BRANCO do
navegador dentro de um app dark), checkbox nativo do sistema, opção
selecionada sem destaque e chip sem forma. */
/* — Campo de texto: não existia regra para text/textarea/number no app do
aluno, então o user-agent entregava caixa branca com texto preto. — */
.student-page #studentDashboard :where(input[type="text"], input[type="number"],
input[type="email"], input[type="tel"], input[type="date"], textarea, select) {
width: 100%; min-height: 44px; padding: 12px 14px;
border: 0; border-radius: 12px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .09);
color: var(--ink); font-family: var(--body); font-size: var(--t-b1);
letter-spacing: -.006em; -webkit-appearance: none; appearance: none;
transition: box-shadow 300ms ease, background 300ms ease;
}
.student-page #studentDashboard :where(input, textarea, select)::placeholder { color: var(--ink-28); }
.student-page #studentDashboard :where(input, textarea, select):focus {
outline: none; background: rgba(237, 244, 246, .06);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .55);
}
.student-page #studentDashboard textarea { min-height: 88px; line-height: 1.5; resize: vertical; }
/* — Caixa de seleção: a nativa é azul-Windows e ignora o tema. Aqui ela vira
um quadrado do sistema, com o azul da marca só quando marcada. — */
.student-page #studentDashboard :where(.checkline, .diet-ck, label:has(> input[type="checkbox"])) {
display: flex; align-items: center; gap: 12px;
min-height: 44px; padding: 8px 0; cursor: pointer;
font-family: var(--body); font-size: var(--t-b1); color: var(--ink-75);
letter-spacing: -.006em; text-transform: none; line-height: 1.4;
}
.student-page #studentDashboard input[type="checkbox"],
.student-page #studentDashboard input[type="radio"] {
flex: none; width: 20px; height: 20px; margin: 0; padding: 0;
-webkit-appearance: none; appearance: none; cursor: pointer;
border: 0; border-radius: 6px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .18);
transition: background 220ms ease, box-shadow 220ms ease;
}
.student-page #studentDashboard input[type="radio"] { border-radius: 50%; }
.student-page #studentDashboard :where(input[type="checkbox"], input[type="radio"]):checked {
background: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);
}
.student-page #studentDashboard input[type="checkbox"]:checked::after {
content: ""; display: block; width: 6px; height: 11px; margin: 2px auto 0;
border: solid #05080a; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.student-page #studentDashboard input[type="radio"]:checked::after {
content: ""; display: block; width: 8px; height: 8px; margin: 6px auto;
border-radius: 50%; background: #05080a;
}
.student-page #studentDashboard :where(input[type="checkbox"], input[type="radio"]):focus-visible {
outline: 2px solid rgba(90, 167, 255, .6); outline-offset: 2px;
}
/* — Opção selecionada: a escala do check-in (1 a 5) não mostrava qual estava
marcada. Numa pergunta de nota, isso é o estado mais importante da tela. — */
.student-page #studentDashboard :where(.seg-opt, .diet-opt-tab) {
min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50);
transition: background 260ms ease, box-shadow 260ms ease, color 260ms ease;
}
.student-page #studentDashboard :where(.seg-opt:hover, .diet-opt-tab:hover) { color: var(--ink-75); }
.student-page #studentDashboard :where(.seg-opt.on, .seg-opt.selected, .seg-opt[aria-pressed="true"],
.diet-opt-tab.on, .diet-opt-tab.selected) {
background: rgba(90, 167, 255, .14); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .5);
}
.student-page #studentDashboard .seg-group { display: flex; flex-wrap: wrap; gap: 8px; }
.student-page #studentDashboard .seg-field { display: flex; flex-direction: column; gap: 10px; }
.student-page #studentDashboard .seg-label { color: var(--ink-75); font-size: var(--t-b1); }
/* — Chip: existia como classe no HTML e não tinha nenhuma regra; virava texto
solto, sem forma nem separação. — */
.student-page #studentDashboard .chip {
display: inline-flex; align-items: center; min-height: 28px;
margin: 0 6px 6px 0; padding: 0 12px; border-radius: 999px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50); font-family: var(--body); font-size: var(--t-b2);
letter-spacing: -.005em; text-transform: none; white-space: nowrap;
}
/* ═══ 103 · DEFAULTS DE COMPONENTE ═══════════════════════════════════════════
O que garante que um elemento NOVO nasça dentro da identidade sem ninguém
lembrar de estilizá-lo. Regra da empresa: seção 3½ de MZSQUAD_IDENTIDADE_VISUAL.md.
Tudo aqui usa :where() — especificidade zero — para ser piso, nunca teto:
qualquer componente com regra própria continua vencendo. */
/* Superfície: um cartão é sempre o mesmo cartão. */
.student-page #studentDashboard :where(.card, .panel, .box, .tile, .sheet, .modal, .glass-panel, .wf-gp) {
border: 0; border-radius: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .014) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
/* Botão sem classe: nasce como ação secundária, nunca como botão do sistema
operacional. */
.student-page #studentDashboard button:where(:not([class])) {
min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-75);
font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: -.01em;
transition: background 260ms ease, color 260ms ease;
}
.student-page #studentDashboard button:where(:not([class])):hover { background: rgba(237, 244, 246, .08); color: var(--ink); }
.student-page #studentDashboard button:where(:disabled) { opacity: .45; cursor: not-allowed; }
/* Selo e marcador: o azul da marca é o único destaque; verde e vermelho ficam
para erro e confirmação de sistema, nunca para decoração. */
.student-page #studentDashboard :where(.badge, .tag, .pill, .label-pill) {
display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
border-radius: 999px; background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50); font-family: var(--body); font-size: var(--t-b2);
letter-spacing: -.005em; text-transform: none; white-space: nowrap;
}
.student-page #studentDashboard :where(.dot, .status-dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
/* Link: azul da marca, sem sublinhado permanente. */
.student-page #studentDashboard :where(a:not([class]), .link, .wf-link) {
color: var(--blue); text-decoration: none; font-family: var(--body);
font-size: var(--t-b1); letter-spacing: -.006em;
}
.student-page #studentDashboard :where(a:not([class]), .link, .wf-link):hover { text-decoration: underline; text-underline-offset: 3px; }
/* Divisor, lista e tabela: sem borda sólida, sem zebra. Separação é sombra
interna de 1px, o mesmo recurso do resto do sistema. */
.student-page #studentDashboard :where(hr, .divider) {
border: 0; height: 1px; margin: var(--sp-5) 0;
background: rgba(237, 244, 246, .08);
}
.student-page #studentDashboard :where(ul, ol):where(:not([class])) { margin: 0 0 var(--sp-3); padding-left: 18px; }
.student-page #studentDashboard :where(table) { width: 100%; border-collapse: collapse; }
.student-page #studentDashboard :where(th, td) {
padding: var(--sp-3) var(--sp-2); text-align: left;
box-shadow: inset 0 -1px 0 rgba(237, 244, 246, .06);
}
.student-page #studentDashboard :where(th) { color: var(--ink-38); font-size: var(--t-m); font-weight: 500; }
.student-page #studentDashboard :where(td) { font-size: var(--t-b1); color: var(--ink-75); }
.student-page #studentDashboard :where(td):where(:last-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* Folha inferior e overlay: mesma gramática do swap sheet que já existe. */
.student-page #studentDashboard :where(.overlay, .backdrop) {
position: fixed; inset: 0; z-index: 1300;
background: rgba(5, 8, 10, .5);
backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
/* Foco visível em tudo que recebe teclado — acessibilidade não é opcional e
o outline branco do navegador não pertence a este tema. */
.student-page #studentDashboard :where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid rgba(90, 167, 255, .6); outline-offset: 2px; border-radius: 10px;
}
/* Movimento: uma curva e duas durações para o app inteiro. */
.student-page #studentDashboard :where(button, a, .wf-card, .wf-row, .wk-routine-row, .seg-opt, .chip) {
transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
.student-page #studentDashboard * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* === 104 · DIETA ============================================================
Os controles da aba Dieta nasceram antes do sistema e ficaram com gramática
própria: opções de refeição desenhadas como abas de navegador, item marcável
com checkbox nativo e substituição de alimento num botão que herdava a
classe de um link. Aqui eles passam a usar as mesmas peças do resto do
produto — mesma pílula de seleção, mesmo alvo de toque, mesma folha inferior. */
/* Opções da refeição são ALTERNATIVAS, não abas de navegação: só uma vale por
vez e a conta do dia usa a escolhida, então a marcação precisa ser
inequívoca — mesmo padrão da escala de check-in. */
.student-page #studentDashboard .diet-opt-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.student-page #studentDashboard :where(.diet-opt-tab) {
min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50);
font-family: var(--body); font-size: var(--t-b2); font-weight: 500;
letter-spacing: -.005em; text-transform: none;
transition: background 260ms var(--ease), box-shadow 260ms var(--ease), color 260ms var(--ease);
}
.student-page #studentDashboard :where(.diet-opt-tab.on, .diet-opt-tab.selected) {
background: rgba(90, 167, 255, .14); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .5);
}
.student-page #studentDashboard .diet-opt-dots { display: flex; gap: 6px; align-items: center; }
.student-page #studentDashboard .diet-opt-dots > * { width: 6px; height: 6px; border-radius: 50%; background: rgba(237, 244, 246, .18); transition: background 260ms var(--ease); }
.student-page #studentDashboard .diet-opt-dots > .on { background: var(--blue); }
.student-page #studentDashboard .diet-opt-label-text { color: var(--ink-38); font-size: var(--t-m); }
.student-page #studentDashboard .diet-opt-total { color: var(--ink-28); font-size: var(--t-b2); font-variant-numeric: tabular-nums; }
/* Item da refeição: linha inteira é alvo de toque, nome à esquerda, quantidade
em dígito tabular, substituição como ícone à direita. */
.student-page #studentDashboard .diet-food-row {
display: flex; align-items: center; gap: var(--sp-3);
min-height: 48px; padding: var(--sp-2) 0;
box-shadow: inset 0 -1px 0 rgba(237, 244, 246, .05);
}
.student-page #studentDashboard .diet-food-row:last-child { box-shadow: none; }
.student-page #studentDashboard .diet-food-name { flex: 1; min-width: 0; color: var(--ink-75); font-size: var(--t-b1); letter-spacing: -.006em; }
.student-page #studentDashboard .diet-food-qty { flex: none; color: var(--ink-38); font-family: var(--mono); font-size: var(--t-b2); font-variant-numeric: tabular-nums; }
.student-page #studentDashboard .diet-food-row--swapped .diet-food-name { color: var(--blue); }
/* Botão de substituir: ícone circular de 40px, não um link de largura total.
Ele dividia a classe .wf-swap com um link da Home — o link virou
.wf-swap-link e esta regra volta a mandar no botão. */
.student-page #studentDashboard :where(.diet-sub-btn) {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; min-height: 40px; padding: 0;
border: 0; border-radius: 50%; cursor: pointer;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50);
transition: background 260ms var(--ease), color 260ms var(--ease);
}
.student-page #studentDashboard :where(.diet-sub-btn):hover { background: rgba(90, 167, 255, .12); color: var(--blue); }
.student-page #studentDashboard :where(.diet-sub-btn) svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.student-page #studentDashboard .wf-swap.ghost { width: 40px; height: 40px; flex: none; background: none; box-shadow: none; }
/* Folha de substituição: mesma gramática da folha de troca de treino. */
.student-page #studentDashboard :where(.diet-sub-sheet) {
width: min(430px, 100vw); border-radius: 24px 24px 0 0; border: 0;
padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
background: rgba(12, 17, 22, .96);
box-shadow: 0 -20px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
display: flex; flex-direction: column; gap: var(--sp-3);
}
.student-page #studentDashboard .diet-sub-grip { width: 38px; height: 4px; border-radius: 9px; background: rgba(237, 244, 246, .2); align-self: center; }
.student-page #studentDashboard .diet-sub-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.student-page #studentDashboard .diet-sub-head > :first-child { font-family: var(--display); font-weight: 600; font-size: var(--t-d2); letter-spacing: -.018em; color: var(--ink); }
.student-page #studentDashboard .diet-sub-info { color: var(--ink-38); font-size: var(--t-b2); }
.student-page #studentDashboard .diet-sub-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.student-page #studentDashboard :where(.diet-sub-chip) {
min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
color: var(--ink-50); font-family: var(--body); font-size: var(--t-b2); font-weight: 500;
letter-spacing: -.005em; text-transform: none;
}
.student-page #studentDashboard :where(.diet-sub-chip.on) { background: rgba(90, 167, 255, .14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .5); }
.student-page #studentDashboard .diet-sub-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 52vh; overflow-y: auto; }
.student-page #studentDashboard :where(.diet-sub-item) {
display: flex; align-items: center; gap: var(--sp-3);
width: 100%; min-height: 56px; padding: var(--sp-3) var(--sp-4);
border: 0; border-radius: 14px; cursor: pointer; text-align: left;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
color: var(--ink); font-family: var(--body); font-size: var(--t-b1); letter-spacing: -.006em;
transition: background 260ms var(--ease), box-shadow 260ms var(--ease);
}
.student-page #studentDashboard :where(.diet-sub-item):hover { background: rgba(237, 244, 246, .07); }
.student-page #studentDashboard :where(.diet-sub-item.on) { background: rgba(90, 167, 255, .1); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .4); }
/* Equivalência em macros é o dado que justifica a troca: em mono, alinhado à
direita, para o aluno comparar de relance entre uma opção e outra. */
.student-page #studentDashboard .diet-sub-eq, .student-page #studentDashboard .diet-sub-av { margin-left: auto; flex: none; text-align: right; color: var(--ink-38); font-family: var(--mono); font-size: var(--t-b2); font-variant-numeric: tabular-nums; }
.student-page #studentDashboard .diet-sub-empty { padding: var(--sp-5) 0; text-align: center; color: var(--ink-38); font-size: var(--t-b2); }
.student-page #studentDashboard :where(.diet-sub-go) { width: 100%; }
/* Marcar item comido: o alvo é a linha inteira, não o quadradinho. */
.student-page #studentDashboard :where(.diet-ck) { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; cursor: pointer; color: var(--ink-75); font-size: var(--t-b1); letter-spacing: -.006em; }
.student-page #studentDashboard :where(.diet-ck):has(input:checked) { color: var(--ink-38); }
.student-page #studentDashboard :where(.diet-ck):has(input:checked) .diet-food-name { text-decoration: line-through; text-decoration-color: rgba(237, 244, 246, .25); }
/* Cartão da refeição e barra de macros */
.student-page #studentDashboard .diet-meal-card { padding: var(--sp-4) var(--sp-5); border-radius: 18px; margin-bottom: var(--sp-2); }
.student-page #studentDashboard .diet-meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.student-page #studentDashboard .diet-macros-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--ink-38); }
.student-page #studentDashboard .diet-macros-strip > * { font-variant-numeric: tabular-nums; }
/* Folha de troca de sessao: era o ultimo bloco em caixa alta do fluxo de
treino. Titulo, subtitulo, nome e etiqueta passam para a escala do sistema. */
.student-page :where(.wk-sheet) {
width: min(430px, 100vw); border-radius: 24px 24px 0 0; border: 0;
padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
background: rgba(12, 17, 22, .96);
box-shadow: 0 -20px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
display: flex; flex-direction: column; gap: var(--sp-3);
}
.student-page .wk-sheet-grip { width: 38px; height: 4px; border-radius: 9px; background: rgba(237, 244, 246, .2); align-self: center; }
.student-page .wk-sheet-head { display: flex; flex-direction: column; gap: var(--sp-1); text-align: left; }
.student-page .wk-sheet-head > strong {
font-family: var(--display); font-weight: 600; font-size: var(--t-d2);
line-height: var(--lh-d2); letter-spacing: -.018em; color: var(--ink); text-transform: none;
}
.student-page .wk-sheet-sub {
font-family: var(--body); font-size: var(--t-b2); line-height: var(--lh-b2);
letter-spacing: -.005em; text-transform: none; color: var(--ink-38);
}
.student-page .wk-swap-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.student-page :where(.wk-swap-row) {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
width: 100%; min-height: 64px; padding: var(--sp-3) var(--sp-4);
border: 0; border-radius: 16px; cursor: pointer; text-align: left;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: background 260ms var(--ease), box-shadow 260ms var(--ease);
}
.student-page :where(.wk-swap-row):hover { background: rgba(237, 244, 246, .07); }
.student-page :where(.wk-swap-row.is-current) { background: rgba(90, 167, 255, .1); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .4); }
.student-page .wk-swap-name {
flex: 1 1 auto; font-family: var(--display); font-weight: 600;
font-size: var(--t-d2); line-height: var(--lh-d2); letter-spacing: -.018em;
color: var(--ink); text-transform: none;
}
.student-page .wk-swap-meta {
flex: 1 1 100%; font-family: var(--body); font-size: var(--t-b2);
letter-spacing: -.005em; text-transform: none; color: var(--ink-38);
}
.student-page .wk-swap-tag {
flex: none; min-height: 24px; padding: 0 10px; border-radius: 999px;
display: inline-flex; align-items: center;
background: rgba(90, 167, 255, .16); color: var(--blue);
font-family: var(--body); font-size: var(--t-b2); font-weight: 500;
letter-spacing: -.005em; text-transform: none;
}
/* O texto herdava centralizacao da folha legada: nome e metadado sao lista, e
lista se le alinhada a esquerda. */
.student-page .wk-sheet-head, .student-page .wk-swap-name, .student-page .wk-swap-meta { text-align: left; }
/* Botao-icone nao tem texto, mas herdava o tamanho do user-agent (13.33px) e
aparecia na auditoria como degrau fora da escala. */
.student-page :where(.diet-sub-btn, .wf-swap) { font-size: var(--t-b2); line-height: 1; }
/* CORRECAO — o piso de 44px de alvo de toque nao pode valer para controle que
nao e um alvo de texto: `.diet-opt-dot` e uma BARRINHA de 48x3px (indicador
de opcao da refeicao) e virou um circulo de 44px; o checkbox esticou na
vertical dentro do flex do item. Alvo de toque continua garantido pela area
invisivel (::after) que o proprio componente ja tinha. */
.student-page #studentDashboard :where(.diet-opt-dot) {
min-height: 3px; height: 3px; flex: 1 1 auto; max-width: 48px;
padding: 0; border-radius: 99px;
background: rgba(237, 244, 246, .16);
}
.student-page #studentDashboard :where(.diet-opt-dot.on) { background: var(--blue); }
.student-page #studentDashboard .diet-opt-dots > * { width: auto; height: 3px; border-radius: 99px; }
.student-page #studentDashboard :where(input[type="checkbox"], input[type="radio"]) {
align-self: center; min-height: 0; height: 20px; width: 20px; flex: none;
}
/* Rotulo da opcao segue a escala e volta para caixa baixa. */
.student-page #studentDashboard .diet-opt-label-text { text-transform: none; letter-spacing: 0; font-size: var(--t-m); }
/* === 105 · DIETA · CARTAO DE REFEICAO E SELETOR DE OPCAO ====================
O cartao fechado mostrava nome + horario + chevron: o aluno abria uma por uma
para descobrir o cardapio. Agora ele traz previa dos alimentos e kcal, e a
refeicao da janela de agora (+-40min) recebe o mesmo destaque azul do treino
de hoje. O seletor de opcao virou segmentado — options[] sao alternativas
excludentes e o desenho precisa dizer isso sozinho. */
.student-page #studentDashboard .diet-v2-card { border-radius: 18px; margin-bottom: var(--sp-2); }
.student-page #studentDashboard .diet-v2-head { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; padding: var(--sp-4) var(--sp-5); text-align: left; }
.student-page #studentDashboard .diet-v2-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.student-page #studentDashboard .diet-v2-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.student-page #studentDashboard .diet-v2-name {
font-family: var(--display); font-weight: 600; font-size: var(--t-d2);
line-height: var(--lh-d2); letter-spacing: -.018em; color: var(--ink); text-transform: none;
}
.student-page #studentDashboard .diet-v2-mtime {
font-family: var(--body); font-weight: 500; font-size: var(--t-b2);
letter-spacing: -.005em; text-transform: none; color: var(--ink-38);
}
.student-page #studentDashboard .diet-v2-kcal {
margin-left: auto; font-family: var(--body); font-weight: 500; font-size: var(--t-b2);
letter-spacing: -.005em; color: var(--ink-50); font-variant-numeric: tabular-nums;
}
/* A previa e uma linha so: em duas ela compete com o nome da refeicao. */
.student-page #studentDashboard .diet-v2-previa {
font-family: var(--body); font-weight: 400; font-size: var(--t-b2);
letter-spacing: -.005em; color: var(--ink-38);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.student-page #studentDashboard .diet-v2-card.is-now {
background: linear-gradient(150deg, rgba(90, 167, 255, .1), rgba(90, 167, 255, .03) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.student-page #studentDashboard .diet-v2-card.is-now .diet-v2-mtime { color: var(--blue); }
/* Seletor segmentado: um trilho, uma lamina clara sobre a opcao ativa. */
.student-page #studentDashboard .diet-opt-seg {
display: inline-flex; gap: 2px; margin: 0 0 var(--sp-3);
padding: 3px; border-radius: 999px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
max-width: 100%; overflow-x: auto;
}
.student-page #studentDashboard :where(.diet-opt-seg-btn) {
display: inline-flex; align-items: center; justify-content: center;
min-height: 28px; height: 28px; padding: 0 14px; flex: none;
border: 0; border-radius: 999px; cursor: pointer; background: transparent;
color: var(--ink-50);
font-family: var(--body); font-weight: 500; font-size: var(--t-b2);
letter-spacing: -.005em; text-transform: none; white-space: nowrap;
transition: background 260ms var(--ease), color 260ms var(--ease);
}
.student-page #studentDashboard :where(.diet-opt-seg-btn):hover { color: var(--ink-75); }
.student-page #studentDashboard :where(.diet-opt-seg-btn.on) {
background: rgba(237, 244, 246, .1); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .12);
}
/* Rodape da aba Dieta: agua e protocolo. A meta de agua estava escondida dentro
de um acordeao — agua e para lembrar, nao para consultar. */
.student-page #studentDashboard .diet-rodape-lbl {
display: block; margin: var(--sp-6) 0 var(--sp-3);
font-family: var(--body); font-weight: 500; font-size: 10.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-28);
}
/* O cartão .diet-agua saiu em 2026-08-18: a água virou linha de .wf-row dentro
de "Prescrições". Estilo removido junto — regra sem markup é lixo que a
próxima pessoa lê como se ainda valesse. */
/* CORRECAO — .diet-ck nao e um label com input dentro: e o PROPRIO botao de
marcar, 18x18 com um check em svg. Tratei como linha de formulario e ele
virou um retangulo alto de 18x48. Volta a ser quadrado, so um pouco maior
para caber melhor no dedo; o alvo de toque de verdade e a linha inteira. */
.student-page #studentDashboard :where(.diet-ck) {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; min-height: 0; padding: 0; flex: none;
align-self: center; border-radius: 6px; gap: 0;
border: 1.5px solid rgba(237, 244, 246, .18); background: none; cursor: pointer;
}
.student-page #studentDashboard :where(.diet-ck.diet-ck-on) { border-color: var(--blue); background: var(--blue); }
.student-page #studentDashboard :where(.diet-ck) svg { width: 12px; height: 12px; }
/* Item marcado recolhe — o estado vem de .diet-ck-checked na linha, nao de
:has(input:checked): nao existe input aqui. */
.student-page #studentDashboard .diet-ck-checked .diet-food-name { text-decoration: line-through; text-decoration-color: rgba(237, 244, 246, .25); }
/* Seletor de opcao centralizado no cartao. */
.student-page #studentDashboard .diet-opt-seg { display: flex; width: fit-content; margin-left: auto; margin-right: auto; justify-content: center; }
/* CORRECAO — o botao de substituir estava com 40px e fundo circular: pesava
mais que o proprio alimento e, por so existir em ALGUMAS linhas, empurrava a
quantidade para lados diferentes em cada linha. Agora e um icone discreto de
26px e o espaco dele fica SEMPRE reservado (.ghost), entao a coluna de
quantidade fica alinhada com ou sem substituicao disponivel. */
.student-page #studentDashboard :where(.diet-sub-btn) {
width: 26px; height: 26px; min-height: 26px; flex: none;
border-radius: 8px; background: none; box-shadow: none;
color: var(--ink-28);
transition: color 220ms var(--ease), background 220ms var(--ease);
}
.student-page #studentDashboard :where(.diet-sub-btn):hover { background: rgba(90, 167, 255, .1); color: var(--blue); box-shadow: none; }
.student-page #studentDashboard :where(.diet-sub-btn) svg { width: 14px; height: 14px; stroke-width: 1.6; }
.student-page #studentDashboard .wf-swap.ghost, .student-page #studentDashboard :where(.diet-food-row) > .ghost { width: 26px; height: 26px; flex: none; }
/* A quantidade ganha coluna propria: sem largura minima, "150g" e "livre"
comecavam em pontos diferentes e a lista parecia desalinhada. */
.student-page #studentDashboard .diet-food-qty { min-width: 56px; text-align: right; }
/* ═══ 24 · AVISO DO SISTEMA (TOAST) ═══════════════════════════════════════
O aviso de "check-in fora da janela" era uma caixa em mono 10px CAIXA ALTA
plantada no meio da tela — e nem no meio ficava: styles.css centralizava com
transform: translate(-50%,-50%) e a animação viewIn termina em
transform: none, apagando a centralização (o canto da caixa parava em 50%/50%
da viewport). Três defeitos numa peça só: posição, tipografia e hierarquia.
Agora é toast de rodapé, mobile-first: nasce acima da barra de abas, largura
pelo conteúdo, centrado por layout (margin-inline) — nunca por transform, que
fica livre para a animação. Tipografia do sistema de produto: Inter 500 a
15px (--t-b1), caixa baixa. */
.student-page .student-copy-notice {
position: fixed;
z-index: 60;
/* top: auto é obrigatório: styles.css deixa top:50% na regra antiga e, com
top E bottom resolvidos, a caixa estica de 50% da tela até o rodapé. */
top: auto;
left: var(--sp-4); right: var(--sp-4);
bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); /* dock: 14 do fundo + 60 de altura + 22 de folga */
width: max-content;
max-width: min(420px, calc(100vw - 32px));
margin-inline: auto;
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border: 0; border-radius: 16px;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .018) 55%), rgba(10, 15, 20, .72);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06),
0 4px 12px rgba(0, 0, 0, .25), 0 20px 50px -20px rgba(0, 0, 0, .7);
color: var(--ink);
font-family: var(--body); font-weight: 500;
font-size: var(--t-b1); line-height: var(--lh-b1); letter-spacing: -.006em;
text-transform: none; text-align: left;
cursor: pointer;
/* Neutraliza o translate(-50%,-50%) da regra antiga: sem isso o toast anima
certo e, no último quadro, salta para fora da tela — o keyframe sem `to`
explícito volta ao transform declarado na cascata. */
transform: none;
animation: noticeIn 420ms var(--ease) both;
}
/* Ponto de estado: azul é o sinal padrão do sistema, vermelho é falha real.
flex:none para o disco não achatar quando a frase quebra em duas linhas. */
.student-page .student-copy-notice::before {
content: ""; flex: none;
width: 6px; height: 6px; border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 0 3px rgba(90, 167, 255, .16);
}
/* O tema v3 do aluno não tem vermelho por decisão (--red aponta para o
azul-gelo): falha se marca por contraste, não por cor de alarme. */
.student-page .student-copy-notice.is-erro::before {
background: var(--bright);
box-shadow: 0 0 0 3px rgba(207, 233, 255, .16);
}
.student-page .student-copy-notice.is-leaving {
opacity: 0; transform: translateY(6px);
transition: opacity 300ms var(--ease), transform 300ms var(--ease);
animation: none;
}
@keyframes noticeIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
.student-page .student-copy-notice { animation: none; }
.student-page .student-copy-notice.is-leaving { transition: opacity 160ms linear; transform: none; }
}
/* ── 104 · Renovação — cartões de plano ───────────────────────────────────────
Um preço, um botão. Toda medida sai da escala fechada da §3½.
Herda família, peso e caixa alta da normalização de .student-page acima. */
.student-page .rnw-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.student-page .rnw-card {
border: 1px solid var(--line);
border-radius: 14px;
background: var(--glass-mid);
padding: var(--sp-4);
}
/* Só o degrau superior ganha peso visual. Dois destaques viram zero destaque. */
.student-page .rnw-card.is-upgrade {
border-color: rgba(90,167,255,.34);
background: rgba(90,167,255,.06);
}
.student-page .rnw-role {
display: block;
font-size: var(--t-m); line-height: var(--lh-m);
letter-spacing: .1em; text-transform: uppercase;
font-weight: 500; color: var(--ghost); margin-bottom: var(--sp-2);
}
.student-page .rnw-card.is-upgrade .rnw-role { color: var(--blue); }
.student-page .rnw-name {
font-size: var(--t-b1); line-height: var(--lh-b1); letter-spacing: -.006em;
font-weight: 500; color: var(--muted); margin: 0 0 var(--sp-1);
}
/* O valor é a manchete; a parcela acompanha na mesma linha, em apoio. */
.student-page .rnw-price {
font-size: var(--t-d1); line-height: var(--lh-d1); letter-spacing: -.022em;
font-weight: 600; color: var(--ice); margin: 0;
display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.student-page .rnw-price span {
font-size: var(--t-b2); line-height: var(--lh-b2); letter-spacing: 0;
font-weight: 400; color: var(--ghost);
}
.student-page .rnw-why {
font-size: var(--t-b2); line-height: var(--lh-b2);
color: var(--muted); margin: var(--sp-2) 0 0;
}
/* Alvo de toque 44px, exigência do checklist da §3½. Duas linhas: a forma de
pagar em cima, o que ela significa embaixo — é a única maneira de o total
parcelado aparecer sem virar uma quarta gramática de preço dentro do cartão. */
.student-page .rnw-btn {
display: block; width: 100%; min-height: 44px; margin-top: var(--sp-3);
padding: var(--sp-2) var(--sp-4);
border-radius: 10px; border: 1px solid var(--line2);
background: transparent; color: var(--ice);
font-family: inherit; font-size: 14px; letter-spacing: -.01em; font-weight: 500;
text-align: center;
cursor: pointer; transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.student-page .rnw-btn span {
display: block; margin-top: 2px;
font-size: var(--t-m); line-height: var(--lh-m);
letter-spacing: 0; font-weight: 400; color: var(--ghost);
}
.student-page .rnw-btn.is-primary {
background: var(--blue); border-color: var(--blue); color: #05080a;
}
.student-page .rnw-btn.is-primary span { color: rgba(5,8,10,.62); }
/* Parcelar é alternativa, não competidor: sem borda, para a decisão principal
continuar sendo uma só. */
.student-page .rnw-btn.is-ghost {
border-color: transparent; color: var(--muted); min-height: 40px;
}
.student-page .rnw-btn.is-ghost span { color: var(--ghost); }
.student-page .rnw-btn:hover:not(:disabled) { border-color: rgba(237,244,246,.4); }
.student-page .rnw-btn.is-primary:hover:not(:disabled) { background: #6fb3ff; }
.student-page .rnw-btn:disabled { opacity: .5; cursor: default; }
.student-page .rnw-error {
font-size: var(--t-b2); line-height: var(--lh-b2);
color: var(--red); margin: var(--sp-3) 0 0;
}
/* Tela de plano vencido: mesma linguagem, sem dock nem abas. */
.student-page .rnw-gate { padding: var(--sp-6) var(--sp-4); max-width: 460px; margin: 0 auto; }
.student-page .rnw-gate-label {
font-size: var(--t-m); line-height: var(--lh-m);
letter-spacing: .1em; text-transform: uppercase;
font-weight: 500; color: var(--amber); margin: 0 0 var(--sp-2);
}
/* Âmbar avisa; azul confirma. O rótulo é o que dá o tom da tela inteira. */
.student-page .rnw-gate-label.is-ok { color: var(--blue); }
.student-page .rnw-gate-title {
font-size: var(--t-d1); line-height: var(--lh-d1); letter-spacing: -.022em;
font-weight: 600; color: var(--ice); margin: 0 0 var(--sp-2);
}
.student-page .rnw-gate-sub {
font-size: var(--t-b2); line-height: var(--lh-b2);
color: var(--muted); margin: 0 0 var(--sp-5);
}
.student-page .rnw-gate .rnw-stack { margin-bottom: var(--sp-5); }
.student-page .rnw-fallback {
font-size: var(--t-b2); line-height: var(--lh-b2); color: var(--ghost); text-align: center;
}
/* Alvo de toque de 44px também aqui: o link é a saída de quem quer negociar em
vez de pagar, e errar o toque nele é perder a conversa. */
.student-page .rnw-fallback a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2);
color: var(--muted); text-decoration: underline;
}
/* ═══ "Sua última semana" — devolutiva do check-in (item 3.1) ═══════════════
Nenhum tamanho novo: rótulo, valor e metadado herdam a normalização acima
(.wf-lbl, .wf-card-v, .wf-meta). Só o que é estrutural mora aqui. */
.student-page .wf-lastweek { gap: var(--sp-4); }
.student-page .wf-lastweek-peso {
display: flex; flex-direction: column; gap: var(--sp-1);
}
.student-page .wf-lastweek-bars {
display: flex; flex-direction: column; gap: var(--sp-3);
}
.student-page .wf-lastweek-bar-top {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
margin-bottom: var(--sp-1);
}
/* A trilha é fina de propósito: adesão é contexto do peso, não manchete. */
.student-page .wf-lastweek-track {
height: 4px; border-radius: 999px; overflow: hidden;
background: rgba(237, 244, 246, .08);
}
.student-page .wf-lastweek-track > i {
display: block; height: 100%; border-radius: 999px;
background: var(--blue);
transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
/* A conquista é frase do próprio aluno, escrita por ele: é leitura, e leitura
é Newsreader — a única família que tem esse papel no sistema. */
.student-page .wf-lastweek-quote {
margin: 0; padding-left: var(--sp-3);
border-left: 2px solid rgba(90, 167, 255, .32);
font-family: var(--read); font-weight: 400;
font-size: 16.5px; line-height: 1.5; letter-spacing: 0;
color: var(--ice);
}
.student-page .wf-lastweek-foot { color: var(--ink-38); }
@media (prefers-reduced-motion: reduce) {
.student-page .wf-lastweek-track > i { transition: none; }
}