:root{
  --roxo:#4C1D95; --roxo-claro:#6D28D9; --roxo-suave:#EDE9FE;
  --verde:#16A34A; --verde-suave:#DCFCE7;
  --vermelho:#DC2626; --vermelho-suave:#FEE2E2;
  --amber:#D97706; --amber-suave:#FEF3C7;
  --azul:#2563EB; --azul-suave:#DBEAFE;
  --tinta:#1E1B2E; --cinza:#6B7280; --linha:#E5E7EB;
  --fundo:#F7F6FB; --branco:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--fundo); color:var(--tinta);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.oculto{display:none !important}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px 24px;
  background:linear-gradient(160deg,var(--roxo) 0%,var(--roxo-claro) 100%);
}
.marca{color:#fff; text-align:center; margin-bottom:40px}
.marca .logo{
  width:72px; height:72px; border-radius:22px; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  font-size:34px;
}
.marca h1{font-size:22px; font-weight:700; letter-spacing:-.02em}
.marca p{font-size:14px; opacity:.8; margin-top:4px}
.card-login{
  background:#fff; border-radius:20px; padding:24px; width:100%; max-width:360px;
  box-shadow:0 20px 40px rgba(76,29,149,.25);
}
.card-login label{display:block; font-size:13px; font-weight:600; color:var(--cinza); margin-bottom:8px}
.card-login input{
  width:100%; padding:15px 16px; border:2px solid var(--linha); border-radius:12px;
  font-size:16px; outline:none; transition:border-color .15s;
}
.card-login input:focus{border-color:var(--roxo-claro)}
.btn-primario{
  width:100%; margin-top:16px; padding:15px; border:none; border-radius:12px;
  background:var(--roxo); color:#fff; font-size:16px; font-weight:600; cursor:pointer;
  transition:transform .1s, background .15s;
}
.btn-primario:active{transform:scale(.98)}
.btn-primario:disabled{opacity:.5}
.erro-login{color:var(--vermelho); font-size:13px; margin-top:12px; text-align:center; min-height:16px}

/* ---------- HEADER ---------- */
header{
  background:var(--roxo); color:#fff; padding:16px 20px;
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 2px 12px rgba(76,29,149,.2);
}
header .esq{display:flex; align-items:center; gap:12px; min-width:0}
header .voltar{background:rgba(255,255,255,.15); color:#fff; border:none; width:34px; height:34px; border-radius:9px; font-size:18px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center}
header .titulo{font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
header .sair{background:rgba(255,255,255,.15); color:#fff; border:none; padding:8px 12px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0}

/* ---------- HUB (menu) ---------- */
.hub{padding:24px 20px}
.hub .ola{margin-bottom:20px}
.hub .ola h2{font-size:20px; font-weight:700}
.hub .ola p{color:var(--cinza); font-size:14px; margin-top:2px}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tile{
  background:#fff; border:1px solid var(--linha); border-radius:18px; padding:20px 16px;
  text-decoration:none; color:var(--tinta); display:flex; flex-direction:column; gap:10px;
  min-height:120px; justify-content:space-between; transition:transform .1s, box-shadow .15s;
}
.tile:active{transform:scale(.97)}
.tile .ic{font-size:30px}
.tile .nome{font-size:16px; font-weight:700; line-height:1.2}
.tile .desc{font-size:12px; color:var(--cinza); line-height:1.3}
.tile.soon{opacity:.55}
.tile.soon .badge{font-size:10px; font-weight:700; color:var(--amber); background:var(--amber-suave); padding:2px 7px; border-radius:6px; align-self:flex-start; text-transform:uppercase; letter-spacing:.04em}

/* ---------- CONTROLES / CAMPOS ---------- */
.controles{padding:16px 20px; display:flex; flex-direction:column; gap:12px}
.campo{background:#fff; border:1px solid var(--linha); border-radius:12px; padding:12px 14px}
.campo label{font-size:12px; font-weight:600; color:var(--cinza); text-transform:uppercase; letter-spacing:.03em}
.campo select, .campo input, .campo textarea{
  width:100%; border:none; outline:none; font-size:16px; color:var(--tinta);
  background:transparent; margin-top:4px; font-weight:500; font-family:inherit;
}
.campo textarea{resize:vertical; min-height:80px; line-height:1.4; font-weight:400}

/* ---------- LISTA ALUNOS ---------- */
.lista{padding:4px 16px 120px}
.aluno{
  background:#fff; border:1px solid var(--linha); border-radius:14px;
  padding:14px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.aluno .nome{font-size:15px; font-weight:600; flex:1; line-height:1.3}
.aluno.clic{cursor:pointer; transition:transform .1s}
.aluno.clic:active{transform:scale(.99)}

/* status buttons (chamada) */
.status-btns{display:flex; gap:6px; flex-shrink:0}
.sbtn{
  width:44px; height:44px; border-radius:11px; border:2px solid var(--linha);
  background:#fff; font-size:15px; font-weight:700; color:var(--cinza);
  cursor:pointer; transition:all .12s; display:flex; align-items:center; justify-content:center;
}
.sbtn:active{transform:scale(.92)}
.sbtn.on.p{background:var(--verde); border-color:var(--verde); color:#fff}
.sbtn.on.a{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
.sbtn.on.j{background:var(--amber); border-color:var(--amber); color:#fff}

/* badges de status do relatório */
.badge-st{font-size:11px; font-weight:700; padding:4px 9px; border-radius:7px; white-space:nowrap; flex-shrink:0}
.badge-st.pendente{color:var(--cinza); background:#F1F1F4}
.badge-st.rascunho{color:var(--azul); background:var(--azul-suave)}
.badge-st.pronto{color:var(--verde); background:var(--verde-suave)}
.badge-st.aprovado{color:#fff; background:var(--verde)}
.badge-st.enviado{color:#fff; background:var(--roxo)}

/* resumo pills */
.resumo{display:flex; gap:12px; padding:0 20px 8px; font-size:13px; color:var(--cinza); flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:5px; font-weight:600}
.dot{width:9px; height:9px; border-radius:50%}
.dot.p{background:var(--verde)} .dot.a{background:var(--vermelho)} .dot.j{background:var(--amber)}

/* ---------- FORM DETALHE (relatório) ---------- */
.detalhe{padding:16px 20px 140px}
.detalhe .aluno-nome{font-size:20px; font-weight:700; margin-bottom:4px}
.detalhe .aluno-sub{font-size:13px; color:var(--cinza); margin-bottom:18px}
.grupo{margin-bottom:16px}
.grupo > label{display:block; font-size:13px; font-weight:700; margin-bottom:8px}
.select-box{
  width:100%; padding:14px; border:2px solid var(--linha); border-radius:12px;
  font-size:15px; background:#fff; outline:none; color:var(--tinta); font-family:inherit;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}
.select-box:focus{border-color:var(--roxo-claro)}
.textarea-box{
  width:100%; padding:14px; border:2px solid var(--linha); border-radius:12px;
  font-size:15px; background:#fff; outline:none; color:var(--tinta); font-family:inherit;
  resize:vertical; min-height:90px; line-height:1.45;
}
.textarea-box:focus{border-color:var(--roxo-claro)}

.ia-box{
  background:var(--roxo-suave); border:1px solid #DDD6FE; border-radius:14px; padding:16px; margin-top:8px;
}
.ia-box .ia-titulo{font-size:12px; font-weight:700; color:var(--roxo); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:flex; align-items:center; gap:6px}
.ia-box textarea{
  width:100%; border:none; background:transparent; outline:none; font-size:15px;
  line-height:1.55; color:var(--tinta); resize:vertical; min-height:120px; font-family:inherit;
}
.btn-ia{
  width:100%; margin-top:10px; padding:14px; border:2px solid var(--roxo); border-radius:12px;
  background:#fff; color:var(--roxo); font-size:15px; font-weight:700; cursor:pointer;
  transition:transform .1s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-ia:active{transform:scale(.98)}
.btn-ia:disabled{opacity:.5}

/* ---------- RODAPÉ FIXO ---------- */
.rodape{
  position:fixed; bottom:0; left:0; right:0; padding:14px 20px 22px;
  background:linear-gradient(to top,var(--fundo) 70%,transparent);
  display:flex; gap:10px;
}
.btn-salvar{
  flex:1; padding:16px; border:none; border-radius:14px;
  background:var(--roxo); color:#fff; font-size:16px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 24px rgba(76,29,149,.35); transition:transform .1s;
}
.btn-salvar:active{transform:scale(.98)}
.btn-salvar:disabled{opacity:.45; box-shadow:none}

.vazio{text-align:center; color:var(--cinza); padding:48px 24px; font-size:15px; line-height:1.5}

/* ---------- TOAST ---------- */
#toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--tinta); color:#fff; padding:13px 22px; border-radius:12px;
  font-size:14px; font-weight:600; opacity:0; transition:all .3s; z-index:50; pointer-events:none;
  max-width:88%; text-align:center;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.erro{background:var(--vermelho)}

/* spinner */
.spin{width:16px; height:16px; border:2px solid rgba(76,29,149,.3); border-top-color:var(--roxo); border-radius:50%; animation:girar .7s linear infinite; display:inline-block}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- BOTÃO APAGAR CHAMADA ---------- */
.btn-apagar{
  padding:16px 18px; border:2px solid var(--vermelho-suave); border-radius:14px;
  background:#fff; color:var(--vermelho); font-size:14px; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:transform .1s, background .15s;
}
.btn-apagar:active{transform:scale(.98); background:var(--vermelho-suave)}
.btn-apagar:disabled{opacity:.5}