/* ARMET — interface (tema escuro como o app original: azul do Login, vermelho do Anônimo, laranja dos Documentos) */
:root {
  --fundo: #0b1424; --fundo2: #13213a; --tinta: #eef3fb; --tinta2: #a9b6cc; --linha: #2a3b5a;
  --azul: #1f5fd1; --vermelho: #d7262b; --laranja: #e8891a; --verde: #1fa35b; --cinza: #44506a;
  --raio: 14px; --seg-topo: env(safe-area-inset-top, 0px); --seg-base: env(safe-area-inset-bottom, 0px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--tinta); -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }
#app { position: fixed; inset: 0; }
button, input, textarea { font: inherit; }
a { color: #8fc1ff; }
.oculto { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--tinta2); font-size: .92em; }

.tela { position: absolute; inset: 0; display: none; overflow: auto; -webkit-overflow-scrolling: touch; }
.tela.ativa { display: block; }

/* botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .6em 1.4em; border: 0; border-radius: 12px;
  color: #fff; font-weight: 700; font-size: 1.05rem; cursor: pointer; text-decoration: none; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bt:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.bt.azul { background: var(--azul); } .bt.vermelho { background: var(--vermelho); } .bt.laranja { background: var(--laranja); }
.bt.cinza { background: var(--cinza); } .bt.verde { background: var(--verde); }
.bt.pequeno { min-height: 38px; padding: .4em 1em; font-size: .95rem; }
.bt[disabled] { opacity: .6; }
.voltar { width: 44px; height: 44px; border-radius: 50%; border: 3px solid currentColor; background: transparent; color: var(--tinta); cursor: pointer; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6M11 6l-6 6 6 6' fill='none' stroke='%23eef3fb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 60%; background-position: center; background-repeat: no-repeat; }

/* início */
#t-inicio { background: radial-gradient(120% 80% at 50% 0%, #17305c 0%, var(--fundo) 60%); }
.fundo-vias { position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%239fb7da' stroke-width='2'%3E%3Cpath d='M10 20h60v40h40v-30h40M30 20v100h50v30M110 60v60h40M60 120h-40v30'/%3E%3C/g%3E%3Cg fill='%239fb7da'%3E%3Ccircle cx='70' cy='20' r='4'/%3E%3Ccircle cx='110' cy='60' r='4'/%3E%3Ccircle cx='30' cy='120' r='4'/%3E%3Ccircle cx='150' cy='120' r='4'/%3E%3Ccircle cx='80' cy='150' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
.inicio-in { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: calc(24px + var(--seg-topo)) 20px calc(20px + var(--seg-base)); text-align: center; }
.idiomas { position: absolute; top: calc(12px + var(--seg-topo)); right: 14px; display: flex; gap: 8px; }
.bandeira { width: 42px; height: 42px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; opacity: .55; }
.bandeira img { width: 100%; height: 100%; display: block; }
.bandeira.ativa { border-color: #fff; opacity: 1; }
.logo { width: min(46vw, 210px); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.logo.pequeno { width: 120px; }
.titulo { font-size: clamp(2.4rem, 9vw, 3.6rem); letter-spacing: .08em; margin: 6px 0 0; font-weight: 900; }
.sub { margin: 0 0 18px; color: var(--tinta2); font-size: 1.05rem; }
.botoes-inicio { display: grid; gap: 14px; width: min(100%, 340px); }
.rodape-inicio { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; color: var(--tinta2); font-size: .9rem; }
.rodape-inicio img { height: 34px; width: auto; opacity: .9; }

/* painéis (formulários e listas) */
.painel { background: var(--fundo); }
.barra { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--seg-topo)) 14px 10px;
  background: rgba(11,20,36,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.barra h2 { margin: 0; font-size: 1.2rem; }
.form { display: grid; gap: 12px; width: min(100% - 32px, 440px); margin: 22px auto calc(30px + var(--seg-base)); }
.form.largo { width: min(100% - 32px, 760px); }
.form input[type=email], .form input[type=password], .form input[type=text], .form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--linha); background: #fff; color: #111; font-size: 1rem; }
.form input.falta, .form textarea.falta { border-color: var(--vermelho); background: #fff3f3; }
.form p { margin: 0; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; line-height: 1.35; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--azul); }
.erro { color: #ff8a8a; min-height: 1.2em; font-weight: 600; }
.ok { color: #7be0a5; font-weight: 600; }
.link { color: #8fc1ff; text-align: center; }
.link.forte { font-weight: 700; }
.linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.linha.radios { gap: 24px; }
.termo { white-space: pre-wrap; font-family: inherit; font-size: .92rem; line-height: 1.5; background: var(--fundo2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px; max-height: 52vh; overflow: auto; margin: 0; }
.lista-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-links a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--raio); background: var(--fundo2);
  border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-weight: 600; }
.lista-links a img { width: 34px; height: 34px; }
.lista-links a small { display: block; color: var(--tinta2); font-weight: 400; }
.refs { padding-left: 1.2em; line-height: 1.55; display: grid; gap: 10px; margin: 0; }
.turmas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.turmas li { padding: 12px 14px; background: var(--fundo2); border: 1px solid var(--linha); border-radius: 12px; }
.creditos { text-align: center; }
.creditos h3 { margin: 14px 0 2px; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta2); }
.creditos .logos { display: flex; justify-content: center; gap: 18px; margin: 16px 0 4px; }
.creditos .logos img { height: 46px; }

/* realidade aumentada */
#t-ar { background: #000; overflow: hidden; }
.ar-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.ar-topo { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--seg-topo)) 14px 12px;
  background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,0)); pointer-events: none; }
.ar-topo > * { pointer-events: auto; }
.ar-topo h2 { margin: 0; font-size: 1.15rem; text-shadow: 0 1px 4px #000; flex: 1; }
.ar-usuario { font-size: .85rem; color: #dde6f5; text-shadow: 0 1px 3px #000; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pergunta { position: absolute; top: calc(64px + var(--seg-topo)); left: 50%; transform: translateX(-50%); width: min(92%, 720px);
  padding: 12px 16px; border-radius: 14px; background: rgba(8,16,32,.78); backdrop-filter: blur(6px); font-size: 1.08rem; line-height: 1.45;
  text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.ar-pergunta small { display: block; color: var(--tinta2); font-size: .8rem; margin-bottom: 4px; }
.ar-cronometro { position: absolute; left: 14px; bottom: calc(20px + var(--seg-base)); font: 800 1.4rem/1 ui-monospace, Menlo, monospace; text-shadow: 0 1px 4px #000; }
.ar-slots { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px;
  background: rgba(8,16,32,.7); border-radius: 12px; max-width: 42vw; }
.ar-slots li { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); font-weight: 700; min-width: 3em; text-align: center; }
.ar-slots li.feito { background: var(--verde); }
.ar-caminho { position: absolute; left: 10px; bottom: calc(86px + var(--seg-base)); right: 10px; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .82rem; pointer-events: none; }
.ar-caminho span { background: rgba(31,163,91,.85); padding: 3px 8px; border-radius: 999px; }
.ar-caminho span + span::before { content: "→ "; }
.ar-feedback { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) scale(.6); padding: 12px 26px; border-radius: 999px;
  font-size: 1.6rem; font-weight: 900; opacity: 0; transition: opacity .2s, transform .25s; pointer-events: none; }
.ar-feedback.mostra { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ar-feedback.certo { background: rgba(31,163,91,.92); } .ar-feedback.errado { background: rgba(215,38,43,.92); }
.ar-dica { position: absolute; left: 50%; bottom: calc(92px + var(--seg-base)); transform: translateX(-50%); width: min(92%, 560px); text-align: center;
  font-size: .95rem; text-shadow: 0 1px 4px #000; pointer-events: none; transition: opacity .4s; }
.ar-menu { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; overflow-x: auto; padding: 12px 12px calc(12px + var(--seg-base));
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75)); scrollbar-width: none; }
.ar-menu::-webkit-scrollbar { display: none; }
.ar-menu button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; padding: 8px 10px; border: 0; border-radius: 12px;
  color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer; background: rgba(31,95,209,.92); }
.ar-menu button img { width: 34px; height: 34px; }
.ar-acoes { position: absolute; right: 12px; bottom: calc(14px + var(--seg-base)); display: flex; gap: 8px; }
.ar-semcamera { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(90%, 420px); text-align: center; display: grid; gap: 10px;
  padding: 18px; border-radius: 16px; background: rgba(19,33,58,.95); }
.ar-semcamera p { margin: 0; }
.folha { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; z-index: 5; }
.folha-in { width: 100%; max-height: 72%; overflow: auto; background: var(--fundo2); border-radius: 18px 18px 0 0; padding: 12px 12px calc(16px + var(--seg-base)); }
.folha-in header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.folha-in h3 { margin: 4px; }
.fechar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cinza); color: #fff; font-size: 1.4rem; cursor: pointer; }
.grade-mol { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.grade-mol button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 12px;
  background: #fff; color: #111; cursor: pointer; font-weight: 600; font-size: .82rem; line-height: 1.2; min-height: 140px; }
.grade-mol button img { width: 96px; height: 96px; }
.grade-mol button:active { border-color: var(--azul); }
.resultado, .dialogo { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.resultado-in, .dialogo-in { width: min(90%, 420px); padding: 22px; border-radius: 18px; background: var(--fundo2); text-align: center; display: grid; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.resultado-in h3 { margin: 0; font-size: 1.4rem; }
.nota { font-size: 3rem; font-weight: 900; margin: 0; color: #7be0a5; }
.resultado-in .linha, .dialogo-in .linha { justify-content: center; }
.dialogo { position: fixed; }

@media (orientation: landscape) and (max-height: 520px) {
  .logo { width: 120px; } .titulo { font-size: 2rem; } .sub { margin-bottom: 6px; }
  .botoes-inicio { grid-template-columns: repeat(3, 1fr); width: min(100%, 640px); }
  .ar-pergunta { font-size: .95rem; padding: 8px 12px; }
}