/* ============================================================ Tema: escuro e claro ============================================================ ⚠️ O `data-tema` esta SEMPRE no , nunca ausente — quem escreve e o script no do index.html, antes da primeira pintura. Por isso aqui nao ha `@media (prefers-color-scheme)`: a paleta clara existe uma vez so, em vez de duplicada entre a media query (tema automatico) e o seletor de atributo (tema escolhido). Duas copias da mesma paleta e como nascem telas em que so metade das cores muda. O modo automatico (seguir o sistema) continua existindo: e o script que resolve "auto" para "claro" ou "escuro" e reage quando o sistema muda. */ :root, :root[data-tema="escuro"]{ --bg:#0f1216; --surface:#171c22; --surface-2:#1f262e; --line:#2b333d; --text:#e8edf2; --muted:#96a3b2; --accent:#3f8cff; --ok:#2fbf71; --warn:#f0a136; --err:#e5484d; --radius:10px; /* Papel quadriculado da tela de login. No escuro o "papel" e um azul grafite: papel branco de verdade cegaria quem abre o painel a noite. */ --papel:#121821; --quadro-fino:rgba(125,160,205,.16); --quadro-forte:rgba(130,175,235,.34); } :root[data-tema="claro"]{ --bg:#f4f6f9; --surface:#fff; --surface-2:#eef1f5; --line:#d9e0e8; --text:#131a21; --muted:#5c6a79; --accent:#3f8cff; --ok:#2fbf71; --warn:#f0a136; --err:#e5484d; --radius:10px; --papel:#fbfcfd; --quadro-fino:rgba(60,110,170,.13); --quadro-forte:rgba(45,95,160,.26); } *{box-sizing:border-box} /* ⚠️ O iOS AUMENTA A LETRA SOZINHO quando a pagina gira para deitado ("text size adjust"), e so em alguns blocos: a tabela do relatorio saia com fonte maior que o cabecalho dela e as colunas desalinhavam sem ninguem ter mexido em nada. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--text); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif} /* ⚠️ O PADDING LATERAL RESPEITA O RECORTE DA TELA. O `viewport-fit=cover` do index.html manda a pagina ate embaixo do entalhe e das bordas curvas — e sem `env(safe-area-inset-*)` o logo e o botao "Sair" ficam DEBAIXO do entalhe com o celular deitado. `max()` mantem os 20px de sempre onde nao ha recorte. */ header{display:flex;align-items:center;gap:12px; padding:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left)); background:var(--surface);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:10} header h1{font-size:16px;margin:0;letter-spacing:.2px} header .logo{width:28px;height:28px;border-radius:8px;object-fit:cover;transform:scale(1.8);transform-origin:left center;margin-right:16px} header .sp{flex:1} main{max-width:960px;margin:0 auto; padding:20px max(20px,env(safe-area-inset-right)) max(20px,calc(env(safe-area-inset-bottom) + 20px)) max(20px,env(safe-area-inset-left))} .card{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:18px;margin-bottom:16px} h2{font-size:15px;margin:0 0 14px;text-transform:uppercase; letter-spacing:.6px;color:var(--muted)} label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px} /* ⚠️ 16px NAO E ESCOLHA DE ESTILO, E O PONTO EM QUE O IPHONE PARA DE DAR ZOOM. Campo com letra menor que 16px faz o Safari aproximar a pagina inteira ao tocar nele — e ele NAO desfaz o zoom ao sair: o professor digita o nome do aluno e o resto da correcao continua numa tela ampliada, com o botao de salvar fora do quadro. Era o caso de todos os campos daqui (15px) e do assunto da questao (13px). ⚠️ E os 44px de altura sao o alvo de toque minimo (o mesmo que Apple e Google publicam): com 10px de padding o campo tinha 40px, e errar o toque num formulario significa abrir o teclado no campo errado. */ input,select,textarea{width:100%;padding:11px 12px;background:var(--surface-2); border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:16px} input:not([type=checkbox]):not([type=radio]),select{min-height:44px} textarea{min-height:56px} /* ⚠️ TODO BOTAO TEM 44px DE ALTURA, inclusive os que so tem uma palavra. `padding:10px` com letra de 14px dava 38px — abaixo do alvo minimo de toque, e a lista de correcoes e uma coluna de botoes "Renomear"/"Excluir" a 8px um do outro: errar o toque ali apaga a nota de um aluno. ⚠️ `touch-action:manipulation` mata a espera de 300ms que o navegador guarda para ver se vem um segundo toque (zoom de duplo-toque). Sem isso todo botao do app responde com atraso perceptivel no celular — e atraso vira toque repetido, que na camera vira duas fotos. */ button{padding:10px 16px;border-radius:8px;border:1px solid var(--line); background:var(--surface-2);color:var(--text);font-size:15px;cursor:pointer; min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent} button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} button.danger{color:var(--err)} /* Botao esperando o segundo toque (ver `confirmarNoBotao` em base.js): tem de parecer OUTRO botao, senao o professor acha que o primeiro toque nao pegou e sai clicando em volta. */ button.confirmando{background:var(--err);border-color:var(--err);color:#fff} button:disabled{opacity:.5;cursor:not-allowed} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:600px){.grid2{grid-template-columns:1fr}} .muted{color:var(--muted);font-size:13px} /* Contador de caracteres — some enquanto sobra espaco, e fica vermelho quando o campo trava. Ver `limitarTitulo` em avaliacoes.js. */ .conta-chars{float:right;font-weight:400;font-size:12px;color:var(--muted); font-variant-numeric:tabular-nums} .conta-chars.no-limite{color:var(--warn)} .hidden{display:none!important} /* Editor de gabarito */ .key-grid{display:grid;gap:6px} .key-row{display:grid;grid-template-columns:38px repeat(5,1fr);gap:6px;align-items:center} .qn{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px} /* ⚠️ A BOLHA E O ELEMENTO MAIS TOCADO DO APP — sao 15 questoes vezes 5 alternativas, marcadas com o celular na mao. Tinha 36px de altura e 6px de respiro: no polegar, mirar em B e acertar A e um gabarito errado que contamina a prova inteira da turma. Agora tem 46px, o alvo de toque cheio. */ .opt{padding:0 2px;min-height:46px;display:flex;align-items:center; justify-content:center;text-align:center;border:1px solid var(--line); border-radius:8px;background:var(--surface-2);cursor:pointer;font-weight:600; font-size:15px;user-select:none;-webkit-user-select:none; touch-action:manipulation;-webkit-tap-highlight-color:transparent} .opt.sel{background:var(--accent);border-color:var(--accent);color:#fff} .opt.right{background:var(--ok);border-color:var(--ok);color:#06231a} .opt.wrong{background:var(--err);border-color:var(--err);color:#fff} /* Listas */ .item{display:flex;gap:12px;align-items:center;padding:12px; border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--surface-2)} .item .grow{flex:1;min-width:0} /* O editor do nome ocupa a linha inteira, embaixo dos dados da correcao — `.item` e flex, entao sem o `flex-wrap` ele seria espremido ao lado da nota. */ .item{flex-wrap:wrap} .editor-nome{flex-basis:100%;margin-top:10px;padding-top:10px; border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px} .editor-nome input{flex:1;min-width:160px;margin:0} /* Folha gravada sem nome e PENDENCIA, nao registro pronto: a nota nao entra no boletim de ninguem e some do relatorio da turma. */ .item.sem-nome{border-color:var(--warn); background:color-mix(in srgb, var(--warn) 7%, var(--surface-2))} .item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .score{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums} /* Camera */ .frame-hint{border:2px dashed var(--accent);border-radius:8px;padding:8px; text-align:center;color:var(--muted);font-size:13px;margin-top:8px} img.evidence{width:100%;border-radius:8px;border:1px solid var(--line)} .badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px; border:1px solid var(--line)} .badge.b-ok{color:var(--ok);border-color:var(--ok)} .badge.b-warn{color:var(--warn);border-color:var(--warn)} .badge.b-err{color:var(--err);border-color:var(--err)} /* ⚠️ O AVISO SOBE ACIMA DA BARRA DE GESTOS. Preso em `bottom:24px`, no iPhone ele nasce debaixo da barrinha de "voltar ao inicio": some metade da frase, e e justamente por ela que o professor descobre que a foto foi recusada. */ #toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--surface-2);border:1px solid var(--line);padding:12px 18px; border-radius:8px;max-width:90vw;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.35)} /* Abas */ .tabs{display:flex;gap:8px;margin-bottom:16px} .tab{flex:1;padding:11px;font-weight:600;min-height:46px} .tab.active{background:var(--accent);border-color:var(--accent);color:#fff} /* Camera com guia de enquadramento */ /* ⚠️ ESTILO DA CAMERA E POR CLASSE, NUNCA POR ID (#preview, #cam-overlay). Sao DUAS cameras na mesma pagina — corrigir e editor de gabarito. Enquanto estas regras moravam nos ids da tela de corrigir, a do gabarito nascia CRUA, e o estrago era em cascata: