/* ============================================================
   APP DO ALUNO — feito pro celular, com modo claro e escuro.
   Nenhuma cor mora aqui: tudo vem de design/tokens.css
   No computador, aparece dentro de um "celular" pra demonstração.
   ============================================================ */
body.app{ background:var(--corpo-fundo); color:var(--txt); }
.tela{
  max-width:430px; margin:0 auto; min-height:100vh; background:var(--fundo);
  padding-bottom:92px; position:relative; overflow-x:hidden;
}
@media(min-width:900px){
  /* No computador o app vira um "celular": a tela rola POR DENTRO do aparelho,
     e as barras de baixo ficam coladas na base (27px = 26 do respiro + 1 da borda). */
  body.app{ padding:26px 0; height:100vh; overflow:hidden; }
  .tela{ min-height:0; height:calc(100vh - 52px); overflow-y:auto; overflow-x:hidden;
         border-radius:38px; border:1px solid var(--aparelho-borda);
         box-shadow:var(--aparelho-sombra); scrollbar-width:none; }
  .tela::-webkit-scrollbar{ display:none }
}

/* --- topo --- */
.topo{ display:flex; align-items:center; gap:12px; padding:20px 20px 12px; }
.topo h1{ font-size:20px; margin:0; font-weight:800; letter-spacing:-.3px; flex:1 }
.topo .sub{ font-size:13px; color:var(--txt2); margin:2px 0 0 }
.voltar{ width:38px;height:38px;border-radius:var(--r-max);background:var(--carta);
  color:var(--txt); display:grid;place-items:center;font-size:18px;flex:none;
  border:1px solid var(--borda) }
.avatar{ width:42px;height:42px;border-radius:var(--r-max);background:var(--carta2);
  display:grid;place-items:center;font-size:22px;flex:none }

/* --- blocos --- */
.wrap{ padding:0 20px }
.carta{ background:var(--carta); border:1px solid var(--borda);
  border-radius:var(--r-g); padding:18px; margin-bottom:14px }
.carta.plana{ background:var(--carta2) }
.titulo-secao{ font-size:13px; text-transform:uppercase; letter-spacing:.9px;
  color:var(--txt2); font-weight:700; margin:22px 20px 10px }
.linha{ display:flex; align-items:center; gap:12px }
.entre{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.crescer{ flex:1; min-width:0 }
.mudo{ color:var(--txt2); font-size:13px }
.grande{ font-size:30px; font-weight:800; letter-spacing:-1px }

/* --- botões --- */
.btn{ display:block; width:100%; padding:16px; border-radius:var(--r-m);
  background:var(--marca-lima); color:var(--sobre-lima); font-weight:800; font-size:16px; text-align:center }
.btn:active{ transform:scale(.98) }
.btn.fantasma{ background:transparent; border:1.5px solid var(--borda); color:var(--txt) }
.btn.coral{ background:var(--marca-coral); color:var(--sobre-coral) }
.btn.peq{ padding:10px 16px; font-size:14px; width:auto; display:inline-block }
.chip{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px; border-radius:var(--r-max);
  background:var(--carta2); color:var(--txt2); font-size:13px; font-weight:600; white-space:nowrap;
  border:1px solid transparent }
.chip.on{ background:var(--marca-lima); color:var(--sobre-lima) }
.rolagem{ display:flex; gap:8px; overflow-x:auto; padding:4px 20px 12px; scrollbar-width:none }
.rolagem::-webkit-scrollbar{ display:none }

/* --- etiquetas --- */
.tag{ font-size:11px;font-weight:800;padding:4px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px }
.tag.ok{ background:var(--tag-ok-bg); color:var(--tag-ok-txt) }
.tag.cheia{ background:var(--tag-cheia-bg); color:var(--tag-cheia-txt) }
.tag.espera{ background:var(--tag-espera-bg); color:var(--tag-espera-txt) }
.tag.info{ background:var(--tag-info-bg); color:var(--tag-info-txt) }

/* --- barra de progresso --- */
.barra{ height:8px;border-radius:var(--r-max);background:var(--carta2);overflow:hidden }
.barra i{ display:block;height:100%;background:var(--marca-lima);border-radius:var(--r-max) }

/* --- menu de baixo --- */
.menu{ position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; display:flex; background:var(--menu-fundo);
  backdrop-filter:blur(18px); border-top:1px solid var(--borda); z-index:50 }
@media(min-width:900px){ .menu{ bottom:27px; border-radius:0 0 37px 37px } }
.menu a{ flex:1; padding:11px 4px 16px; text-align:center; color:var(--txt2); font-size:10px; font-weight:700 }
.menu a b{ display:block; font-size:21px; font-weight:400; margin-bottom:3px; opacity:.75 }
.menu a.on{ color:var(--lima-txt) } .menu a.on b{ opacity:1 }

/* --- aviso de protótipo --- */
.proto{ background:var(--proto-bg); border:1px dashed var(--proto-borda);
  color:var(--proto-txt); font-size:12px; padding:10px 14px; border-radius:var(--r-p); margin:0 20px 14px }

/* --- toast --- */
#toast{ position:fixed; left:50%; bottom:120px; transform:translate(-50%,20px);
  background:var(--carta2); border:1px solid var(--borda); color:var(--txt);
  padding:14px 18px; border-radius:var(--r-m); font-size:14px; font-weight:600; max-width:360px;
  opacity:0; pointer-events:none; transition:.25s; z-index:99; box-shadow:var(--sombra-g) }
#toast.ver{ opacity:1; transform:translate(-50%,0) }