/* APP DO ALUNO — ajustes do app de verdade sobre a maquete aprovada (maquete_aprovada.css fica intocada).
   A maquete desenha um celular de 390×844 com o recorte da câmera; no celular de verdade a tela É o celular. */
html, body { margin:0; background:#07090c; }
body { min-height:100vh; min-height:100dvh; }
.cel { width:100%; max-width:430px; height:auto; min-height:100vh; min-height:100dvh; margin:0 auto; border-radius:0; box-shadow:none; overflow:hidden; }
.tela { position:relative; min-height:max(100vh, 800px); min-height:max(100dvh, 800px); }   /* as posições são as da maquete; celular baixo rola */
.tela[hidden] { display:none; }
.cel > .tela > .foto { top:0 !important; }

/* campos de verdade com a cara das "caixas" da maquete */
input.caixa, input.inp { width:100%; box-sizing:border-box; outline:none; text-align:center; -webkit-appearance:none; appearance:none; }
input.inp { text-align:left; }
input.caixa { font-size:32px; padding:0; }
input.caixa::placeholder, input.inp::placeholder { color:#3d444e; letter-spacing:inherit; }
input.pin { text-align:center; letter-spacing:.5em; font-size:22px; }
input.caixa.pin { font-size:30px; }
input.caixa:focus, input.inp:focus { border-color:#5a6370; }
label.campo { display:block; }
.sexo button { height:46px; border-radius:12px; border:1.5px solid #333a44; background:transparent; display:flex; align-items:center; justify-content:center;
  font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.08em; color:#C5CAD1; cursor:pointer; }
.sexo button.on { background:#2a313b; border-color:#4a5360; color:#fff; }
button.btn { width:100%; border:0; cursor:pointer; }
button.btn:disabled { opacity:.45; cursor:default; }
button.check { width:100%; background:transparent; border:0; padding:0; text-align:left; cursor:pointer; font-family:inherit; font-size:14px; line-height:1.4; color:#d4d8de; }
.check i { border:1.5px solid #4a5360; background:transparent !important; }
.check[aria-pressed="true"] i { background:#2a313b !important; border-color:#4a5360; }
.check[aria-pressed="true"] i::after { content:'✓'; }
.link a, .obs a { color:inherit; text-decoration:none; }
.obs a { text-decoration:none; }
.erro { min-height:0; margin-top:10px; font-size:13px; line-height:1.4; color:#fca5a5; text-align:center; }
.erro:empty { display:none; }

/* termo completo */
.termo { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; padding:20px; }
.termo[hidden] { display:none; }
.termo-box { width:100%; max-width:380px; max-height:86vh; overflow:auto; background:#12161c; border:1px solid #262c35; border-radius:18px; padding:20px; }
.termo-box h2 { font-family:var(--fc); font-weight:800; font-size:22px; letter-spacing:.03em; color:#fff; margin:0 0 10px; }
.termo-txt p { font-size:13px; line-height:1.5; color:#C5CAD1; margin:0 0 10px; } /* TERMO-CURTO-20261006 (Bruno: "letras menores"): 14 -> 13 */

/* ===== PARTE 2 (03/10): início/check-in, agenda e a barra de baixo — mesmas medidas da maquete (telas 07 e 08) ===== */
.com-nav { padding-bottom:96px; }
.ola { font-family:var(--fc); font-weight:800; font-size:34px; line-height:1.05; margin-top:8px; color:#fff; }
.ola .mod { color:var(--acid); }
.tag[hidden] { display:none; }
.teclas button { height:38px; border-radius:10px; background:#0b0e13; border:1px solid #2a3038; display:flex; align-items:center; justify-content:center;
  font-family:var(--fc); font-weight:700; font-size:22px; color:#cfd3d9; cursor:pointer; padding:0; }
.teclas button:active { background:#1b2129; }
.ok[hidden], .espera-ck[hidden], .regra[hidden] { display:none; }
.btn[hidden] { display:none !important; }   /* 03/10: o .btn da maquete tem display próprio e passava por cima do hidden */
.espera-ck { margin-top:12px; border-radius:14px; padding:13px 15px; background:#12161c; border:1px solid #2c333d; display:flex; gap:12px; align-items:center; }
.espera-ck b { font-family:var(--fc); font-size:21px; letter-spacing:.04em; color:#fff; display:block; }
.espera-ck span { font-size:13px; color:#C5CAD1; }
.giro { flex:0 0 30px; height:30px; border-radius:50%; border:3px solid #39414c; border-top-color:#C5CAD1; animation:giro 1s linear infinite; }
@keyframes giro { to { transform:rotate(360deg); } }
/* aviso de REGRA (aula já começou, cinta com outra pessoa...): laranja, como nos avisos do sistema — vermelho só para erro de verdade */
.regra { margin-top:12px; border-radius:14px; padding:13px 15px; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.55); font-size:14px; line-height:1.4; color:#fde2b0; }
.barra-topo { height:56px !important; padding-bottom:10px !important; position:absolute; }
.nav { position:fixed !important; left:50%; transform:translateX(-50%); width:100%; max-width:430px; box-sizing:content-box; height:71px !important; padding:13px 0 env(safe-area-inset-bottom) !important; }   /* 84 px como a maquete */
.nav[hidden] { display:none !important; }
.nav button { background:transparent; border:0; padding:0; cursor:pointer; font-family:var(--fc); font-weight:700; font-size:14px; letter-spacing:.12em; color:#8a919b;
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.nav button::before { content:''; width:26px; height:4px; border-radius:2px; background:#2d333c; }
.nav button.on { color:#fff; } .nav button.on::before { background:var(--acid); }
.dias div { cursor:pointer; }



/* ===== PARTE 3 (03/10): ranking da aula (telas 09-13) — marcação e classes da maquete (.abas .rk .med .turma .eucard .semp) ===== */
.abas span { cursor:pointer; }
.rk .n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.rk .v { white-space:nowrap; }
.med > div:last-child { min-width:0; }
.med .n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== PARTE 4 (03/10): recibo = a página aprovada do QR (resultado-aluno.html), entre o topo e a barra de baixo ===== */
#r-quadro, #e-quadro { position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:430px; border:0; display:block;
  top:var(--r-topo, 56px); background:#07090c;
  /* iframe não estica com top+bottom (fica com 150 px, o tamanho padrão): a altura vai por conta */
  height:calc(100vh - var(--r-topo, 56px) - var(--r-base, calc(84px + env(safe-area-inset-bottom)))); height:calc(100dvh - var(--r-topo, 56px) - var(--r-base, calc(84px + env(safe-area-inset-bottom)))); }

/* ===== RANKING-MES-20261005: aba MÊS (maquete aprovada MAQUETE_RANKING_MES_2026-10-05) ===== */
.rk .n small { display:block; font-family:var(--fm); font-weight:400; font-size:11px; color:var(--txt2); letter-spacing:0; }
.rk.mes:not(.um) { padding:9px 16px; margin-bottom:6px; }
.meta { margin-top:14px; padding:14px 16px; border-radius:14px; background:var(--grafite); border:1px solid var(--linha); }
.meta .st { display:flex; justify-content:space-between; font-family:var(--fc); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--txt2); }
.meta .num { font-family:var(--fc); font-weight:800; font-size:30px; color:#fff; margin-top:4px; }
.meta .num small { font-size:14px; color:var(--txt2); margin-left:6px; letter-spacing:.1em; }
.meta .bar { height:8px; border-radius:4px; background:#1a1f26; margin-top:8px; overflow:hidden; }
.meta .bar i { display:block; height:100%; border-radius:4px; background:var(--acid); }
.meta .d { font-size:12.5px; color:var(--txt2); margin-top:6px; }
.abas[hidden] { display:none !important; }   /* RANKING-MES-20261005: o .abas tem display:flex e passava por cima do hidden */

/* TURMA-EM-DUAS-LINHAS-20261006 (Bruno: "esse texto todo quebrado"): "A turma queimou..." e "próxima meta da turma" um embaixo do outro, à esquerda */
.turma { flex-direction: column; align-items: flex-start; gap: 2px; }
/* TURMA-CARTAO-20261006 (Bruno: "texto muito grande / desproporcional"): título do cartão da turma no tamanho dos títulos das medalhas */
.eucard.turma2 .t { font-size: 15px; letter-spacing: .08em; }
.eucard.turma2 .s { font-size: 13px; }

/* RECIBO-VOLTAR-20261007 (Bruno: "como volta depois de abrir o recibo?" → "ajusta"): no iPhone o app instalado não tem voltar
   e no Android o voltar do celular fechava o app. Botão discreto no canto do topo, só no recibo. */
#t-recibo .barra-topo { display:flex; align-items:flex-end; justify-content:space-between; }
.voltar-topo { background:transparent; border:1px solid #2d333c; border-radius:999px; color:#C5CAD1; font-family:var(--fc); font-weight:700;
  font-size:12px; letter-spacing:.14em; padding:6px 12px; cursor:pointer; margin-left:auto; }
.voltar-topo:active { background:#1b2129; }
/* CHECKIN-VISIVEL-20261007 (achado no print do Bruno: FAZER CHECK-IN atrás da barra em tela baixa — medido: 360x640 e 548x630 escondido, iPhone SE com 9 px):
   em tela baixa a foto de cima encolhe e o teclado sobe 48 px; em celular alto nada muda */
@media (max-height: 720px) {
  #t-inicio > .foto { height:282px !important; }
  #t-inicio > .sobre:nth-child(3) { top:74px !important; }
  #t-inicio > .sobre:nth-child(4) { top:200px !important; }
  #t-inicio .teclas button { height:32px !important; }
}

/* BOTAO-VERDE-FECHADO-20261010 (Bruno: "sem essa cor tão berrante" → pesquisa Material Design dark theme: evitar cor saturada em
   fundo escuro; botão principal continua CHEIO → escolheu a "A"). Vale para todos os botões principais (ENTRAR, CONTINUAR, ACEITO,
   VOLTAR, COMEÇAR, FAZER CHECK-IN). O verde forte #B8EB00 fica só na marca (PULSE, barra, aba ativa). */
button.btn.prim, a.btn.prim, .btn.prim { background:#8FAE1B !important; border-color:#8FAE1B !important; color:#07090c !important; }

/* MINHA-CONTA-20261010: ícone de conta no canto da tela INÍCIO → painel de baixo (MINHA CONTA) → SAIR DO APP → confirmação.
   Área de toque 44 px (regra da Apple); cores neutras (vermelho só para erro de verdade). */
.np-conta-bt { width:44px; height:44px; margin-right:-6px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); -webkit-tap-highlight-color:transparent; }
.np-fundo { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; }
.np-folha { position:fixed; left:0; right:0; bottom:0; z-index:61; max-width:520px; margin:0 auto; background:#12161c; border-top:1px solid #262c35;
  border-radius:22px 22px 0 0; padding:10px 22px calc(26px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.6); transition:transform .18s ease-out; }
.np-folha .pega { width:42px; height:5px; border-radius:3px; background:#39414c; margin:0 auto 18px; }
.np-folha .t { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:.2em; color:#9aa0a8; margin-bottom:14px; }
.np-folha .topo { display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.np-folha .av { width:58px; height:58px; flex:0 0 58px; border-radius:50%; border:1.5px solid #39414c; display:flex; align-items:center; justify-content:center; }
.np-folha .n { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:26px; color:#fff; letter-spacing:.02em; line-height:1.05; }
.np-folha .a { font-size:14px; color:#9aa0a8; margin-top:3px; }
.np-folha .lin { display:flex; justify-content:space-between; padding:13px 0; border-top:1px solid #1f252d; font-size:15px; color:#c5cad1; }
.np-folha .lin b { color:#fff; font-weight:600; }
.np-folha .obs { font-size:13px; color:#7d848e; margin:14px 0 4px; line-height:1.4; text-align:center; }
.np-folha .sair { width:100%; height:50px; margin-top:14px; border-radius:12px; background:transparent; border:1px solid #39414c; color:#e8ebe0;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; letter-spacing:.08em; cursor:pointer; }
.np-conf { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:24px; }
.np-conf[hidden], .np-folha[hidden], .np-fundo[hidden] { display:none !important; }
.np-conf .c { width:100%; max-width:340px; background:#12161c; border:1px solid #262c35; border-radius:16px; padding:22px 20px 18px; }
.np-conf h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:24px; letter-spacing:.03em; color:#fff; margin:0 0 8px; }
.np-conf p { font-size:15px; line-height:1.45; color:#c5cad1; margin:0 0 18px; }
.np-conf .b { display:flex; gap:10px; }
.np-conf .b button { flex:1; height:48px; border-radius:12px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; letter-spacing:.08em; cursor:pointer; }
.np-conf .x { background:transparent; border:1px solid #39414c; color:#e8ebe0; }
.np-conf .s { background:#2a313b; border:1px solid #2a313b; color:#fff; }