/* Azul-marinho e branco. Barlow Condensed para títulos, Barlow para texto. */
:root{
  --azul:#0B2D5B; --azul-2:#164581; --azul-3:#2F6BB3; --tinta:#E9F0F9; --tinta-2:#D3E1F2;
  --branco:#FFFFFF; --fundo:#F3F6FA; --texto:#0E1A2B; --suave:#56677F; --linha:#D6DFEA;
  --ok:#1C7A4B; --ok-bg:#E6F4EC; --erro:#B42318; --erro-bg:#FDECEA; --ouro:#C9A227;
  --titulo:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --corpo:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fundo);color:var(--texto);font:16px/1.5 var(--corpo);-webkit-text-size-adjust:100%}
a{color:var(--azul-2)}
h1,h2,h3{font-family:var(--titulo);font-weight:700;letter-spacing:.01em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,6vw,44px)}
h2{font-size:24px;margin:28px 0 10px}

/* Barra superior */
.barra{background:var(--azul);color:var(--branco);padding-top:env(safe-area-inset-top,0px)}
.barra-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;min-height:60px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.marca{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.marca-t{font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:.02em}
.marca-s{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.quem{display:flex;align-items:center;gap:12px;font-size:14px}
.quem span{opacity:.9;text-align:right}
.quem a,.voltar{color:var(--branco);text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:6px 10px;font-weight:600}
.voltar{font-size:20px;line-height:1;padding:6px 12px}
.quem a:hover,.voltar:hover{background:rgba(255,255,255,.12)}

.wrap{max-width:820px;margin:0 auto;padding-block:24px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wide{max-width:1100px}
.lead{color:var(--suave);margin:8px 0 22px;font-size:17px;max-width:62ch}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:20px}
.muted{color:var(--suave)}

/* Botões e campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 17px/1 var(--corpo);
  border:0;border-radius:12px;padding:16px 20px;background:var(--azul);color:var(--branco);cursor:pointer;text-decoration:none;width:100%;min-height:54px}
.btn:hover{background:var(--azul-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sec{background:var(--branco);color:var(--azul);border:1.5px solid var(--tinta-2);width:auto;min-height:44px;padding:10px 14px;font-size:15px}
.btn.sec:hover{background:var(--tinta)}
.btn.sec.ativo{background:var(--azul);color:var(--branco);border-color:var(--azul)}
:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
label,.lab{font-weight:600;font-size:15px}
input[type=text],input[type=password],select{font:500 18px var(--corpo);color:var(--texto);background:var(--branco);
  border:1.5px solid var(--linha);border-radius:10px;padding:14px;width:100%}
input:focus,select:focus{border-color:var(--azul-3);outline:none;box-shadow:0 0 0 4px var(--tinta)}
.field{display:grid;gap:8px;margin-bottom:16px}
.msg{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-weight:500}
.msg.err{background:var(--erro-bg);color:var(--erro)}
.msg.ok{background:var(--ok-bg);color:var(--ok)}

/* Login */
.login{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:28px 16px 48px;
  background:linear-gradient(180deg,var(--azul) 0 210px,var(--fundo) 210px)}
.login .card{width:100%;max-width:420px;box-shadow:0 18px 40px -18px rgba(11,45,91,.45);padding:28px}
.login h1{color:var(--azul);font-size:34px}
.senha{font-size:28px!important;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.dica{font-size:14px;color:var(--suave);margin:6px 0 0}

/* Página inicial */
.ola{margin-bottom:20px}
.ola .eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-3);font-weight:700}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ex{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--branco);border:1.5px solid var(--linha);
  border-radius:16px;padding:20px;text-decoration:none;color:var(--texto);min-height:190px;transition:border-color .15s,transform .15s}
.ex:hover{border-color:var(--azul-3);transform:translateY(-2px)}
.ex .num{font-family:var(--titulo);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-3)}
.ex h3{font-size:28px;color:var(--azul)}
.ex p{margin:0;color:var(--suave);font-size:15px}
.ex .ir{margin-top:auto;font-weight:700;color:var(--azul)}
.ex.bloq{opacity:.55;pointer-events:none;border-style:dashed}
.ex.bloq .ir{color:var(--suave)}
.selo{position:absolute;top:16px;right:16px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 9px;background:var(--tinta);color:var(--azul)}
.selo.ok{background:var(--ok-bg);color:var(--ok)}

/* Perdidos na Lua */
.items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.items li{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;padding:8px 12px 8px 8px;border:1.5px solid var(--linha);border-radius:12px;background:var(--branco)}
.items li.dup{border-color:var(--erro);background:var(--erro-bg)}
.items li.ok{border-color:var(--tinta-2)}
.items select{padding:10px 6px;text-align:center;font-weight:700;font-size:20px;color:var(--azul)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--linha);border-radius:12px;padding:14px;cursor:pointer;font-weight:600;background:var(--branco)}
.seg label:has(input:checked){border-color:var(--azul);background:var(--tinta)}
.seg input{accent-color:var(--azul);width:20px;height:20px}
.status{font-size:15px;color:var(--suave);margin:12px 0}
.status.err{color:var(--erro);font-weight:600}
.status.ok{color:var(--ok);font-weight:600}
.fixo{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(243,246,250,0),var(--fundo) 30%);padding:18px 0 calc(12px + env(safe-area-inset-bottom,0px))}

/* Tabelas (professor) */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;background:var(--branco)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linha);font-size:15px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);background:var(--fundo)}
td.n,th.n{text-align:right}
.scroll{overflow-x:auto;border:1px solid var(--linha);border-radius:12px}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:13px;font-weight:600;background:var(--tinta);color:var(--azul)}
.pill.good{background:var(--ok-bg);color:var(--ok)} .pill.bad{background:var(--erro-bg);color:var(--erro)}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.kpi{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:14px}
.kpi b{display:block;font-family:var(--titulo);font-size:34px;color:var(--azul);line-height:1}
.kpi span{font-size:13px;color:var(--suave)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;background:var(--branco);border:1px solid var(--linha);border-radius:99px;padding:3px 10px}

@media (max-width:560px){
  .seg{grid-template-columns:1fr}
  .quem span{display:none}
  .items li{grid-template-columns:72px 1fr}
}
@media (prefers-reduced-motion:reduce){.ex{transition:none}.ex:hover{transform:none}}
[hidden]{display:none!important}