:root{
  --bg:#0d0d0d;
  --card:#141414;
  --muted:#888;
  --text:#fff;
  --blue:#3D5A80;
  --blue-dark:#2E4466;
  --blue-dim:#0a1020;
  --green:#27ae60;
  --red:#e74c3c;
  --border:#222;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* HEADER */
.hdr{
  position:sticky;top:0;z-index:10;
  background:var(--card);
  border-bottom:2px solid var(--blue);
  padding:10px 16px;
}

.hdr-inner{
  max-width:520px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* LOGO */
.logo{
  width:180px;
  height:auto;
  object-fit:contain;
  display:block;
}

/* PAGE */
.page{
  padding:24px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  max-width:520px;
  margin:0 auto;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
}

.title{font-size:22px;font-weight:900;margin-bottom:14px}

.title-lg{
  font-size:24px;
  font-weight:900;
}

.label{
  display:block;
  color:#fff;
  font-size:12px;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.input{
  width:100%;
  padding:14px;
  font-size:16px;
  border-radius:12px;
  background:#1a1a1a;
  border:2px solid var(--border);
  color:var(--text);
  outline:none;
  margin-bottom:12px;
}
.input:focus{border-color:var(--blue)}
.input::placeholder{color:rgba(255,255,255,0.4)}

.btn{
  width:100%;
  padding:16px 14px;
  border:none;
  border-radius:12px;
  font-weight:800;
  font-size:19px;
  cursor:pointer;
}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:active{background:var(--blue-dark)}
.btn.secondary{background:#1a1a1a;color:#fff;border:1px solid var(--border);margin-top:12px}
.btn.ghost{background:transparent;border:1px solid var(--border);color:#fff;width:auto;padding:10px 12px}

.msg{margin-top:10px;font-size:13px;min-height:18px}
.msg.err{color:#ff6b6b}
.msg.info{color:#aaa}

.hidden{display:none !important}

/* ALUNO */
.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.name{font-size:24px;font-weight:900;margin-bottom:6px}

.badge{
  display:inline-block;
  padding:3px 12px;
  border-radius:999px;
  background:var(--green);
  font-size:11px;
  font-weight:900;
}

.kv{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 12px;
  padding-top:8px;
}

.k{
  color:#aaa;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.v{font-size:16px;font-weight:900}

.status{
  margin-top:14px;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  color:#fff;
  background:#0a0a0a;
}

/* BOTTOM NAV */
.bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;
  background:var(--card);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

.navbtn{
  flex:1;
  background:transparent;
  border:none;
  color:#666;
  padding:12px 6px;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.navbtn.on{color:var(--blue)}
.navbtn svg{display:block}

/* MOBILE */
@media (max-width:420px){
  .logo{ width:140px; }
  .page{ padding:12px 12px calc(88px + env(safe-area-inset-bottom, 0px)); }
  .card{ border-radius:14px; padding:14px; }
  .btn{ padding:15px 14px; font-size:18px; }
  .input{ padding:13px 14px; font-size:15px; }
}

/* CALENDAR */
.mes-header{
  font-size:13px;
  font-weight:900;
  color:var(--blue);
  background:var(--blue-dim);
  border:1px solid var(--blue);
  border-radius:8px;
  padding:5px 12px;
  margin-bottom:6px;
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:1px;
}

.dias-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 0 8px;
  scrollbar-width:none;
}
.dias-row::-webkit-scrollbar{display:none}

.dia-btn{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 14px;
  background:#1a1a1a;
  border:2px solid var(--border);
  border-radius:12px;
  color:var(--text);
  cursor:pointer;
  min-width:58px;
}
.dia-btn.active{
  border-color:var(--blue);
  background:var(--blue-dim);
  color:#fff;
}
.dia-btn.disabled{
  opacity:.3;
  cursor:default;
  pointer-events:none;
}
.dia-nome{font-size:15px;font-weight:900}
.dia-data{font-size:13px;color:#aaa}
.dia-btn.active .dia-data{color:var(--blue)}

/* SESSAO ALUNO */
#cardSessao{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  border-radius:0;
  padding:0;
  margin:0;
  overflow:hidden;
}

.sessao-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 16px 12px;
  flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.sessao-header .presenca-titulo{flex:1}

.sessao-scroll{
  flex:1;
  overflow-y:auto;
  padding:12px 16px;
  -webkit-overflow-scrolling:touch;
}

.sessao-footer{
  flex-shrink:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border);
  background:var(--card);
}

/* SESSAO PROFESSOR */
#cardProfSessao{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  border-radius:0;
  padding:0;
  margin:0;
  overflow:hidden;
}

#cardProfSessao .sessao-header{
  padding:16px 16px 12px;
  flex-shrink:0;
  border-bottom:1px solid var(--border);
}

#profSessaoPresencaLista{
  flex:1;
  overflow-y:auto;
  padding:12px 16px;
  -webkit-overflow-scrolling:touch;
}

/* SESSION CARDS */
.sessoes-lista{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.sessao-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#1a1a1a;
  border:2px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.sessao-card.active{
  border-color:var(--blue);
  background:var(--blue-dim);
}
.sessao-info{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.sessao-hor{
  font-size:17px;
  font-weight:900;
  color:var(--blue);
  min-width:44px;
  flex-shrink:0;
}
.sessao-nome{
  font-size:15px;
  font-weight:700;
  color:#fff;
  flex:1;
  min-width:0;
  white-space:normal;
  word-break:break-word;
}
.btn-sessao-action{
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:8px 12px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
}
.btn-sessao-action:active{background:var(--blue-dark)}

/* PRESENCE BOX */
.presenca-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:12px 0 8px;
  flex-wrap:wrap;
}

.presenca-titulo{
  font-size:17px;
  color:#fff;
  font-weight:900;
  letter-spacing:.5px;
}

.btn-sm{
  width:auto;
  padding:14px 28px;
  font-size:18px;
  font-weight:900;
}

.btn-cancel{
  background:transparent;
  border:1px solid var(--border);
  color:#aaa;
  margin-top:10px;
  font-size:17px;
  font-weight:800;
}

/* PRESENCE LIST */
.presenca-item{
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.presenca-item:last-child{border-bottom:none}

.presenca-info{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
}

.presenca-nome{
  font-size:17px;
  font-weight:700;
  color:#fff;
  flex:1;
  min-width:0;
  white-space:normal;
  word-break:break-word;
}

.presenca-status{
  font-size:15px;
  font-weight:900;
  padding:6px 14px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
}
.status-ok  {background:#0a2a18;color:#4cd88a}
.status-pend{background:#1a1800;color:#e8c84a}
.status-err {background:#2a0a0a;color:#e86464}

.presenca-vazia{color:#aaa;font-size:16px;padding:12px 0}
.loading{color:#aaa;font-size:13px;padding:8px 0}

/* PROFESSOR ACTIONS */
.prof-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.btn-ap{
  flex:1;
  padding:14px 10px;
  border:none;
  border-radius:10px;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}
.btn-ap.aprovar {background:#0a2a18;color:#4cd88a}
.btn-ap.reprovar{background:#2a0a0a;color:#e86464}
.btn-ap.confirmar{background:#0a2a18;color:#4cd88a}
.btn-ap:active{opacity:.75}

/* BADGE VARIANTS */
.badge-prof{background:var(--blue)}

/* UTILITIES */
.mb8{margin-bottom:8px}

.divider{
  border:none;
  border-top:1px solid var(--border);
  margin:16px 0;
}

/* BIOMETRIA */
.bio-icon{
  font-size:56px;
  text-align:center;
  margin-bottom:12px;
  line-height:1;
}

.bio-center{text-align:center;font-size:26px;font-weight:900}

.bio-subtitle{
  color:#aaa;
  font-size:18px;
  font-weight:600;
  text-align:center;
  margin-bottom:16px;
  line-height:1.5;
}

.bio-desc{
  color:#aaa;
  font-size:14px;
  line-height:1.6;
  margin-bottom:8px;
}

.bio-muted{color:#666;font-size:13px}

.bio-list{
  list-style:disc;
  padding-left:20px;
  color:#aaa;
  font-size:14px;
  line-height:1.9;
  margin-bottom:8px;
}

/* STATS ROW */
.stats-row{
  display:flex;
  gap:12px;
  margin:16px 0;
}

.stat-card{
  flex:1;
  background:#1a1a1a;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 12px;
  text-align:center;
}

.stat-card--red{
  background:var(--blue-dim);
  border-color:var(--blue);
}

.stat-num{
  font-size:2.4rem;
  font-weight:700;
  color:#fff;
  line-height:1;
  margin-bottom:6px;
}

.stat-label{
  font-size:0.85rem;
  color:#aaa;
  line-height:1.3;
  font-weight:600;
}

/* BELL */
.btn-bell{
  position:relative;
  background:transparent;
  border:1px solid var(--border);
  border-radius:50%;
  width:42px;
  height:42px;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:var(--text);
  flex-shrink:0;
}
.btn-bell:active{opacity:.75}

.bell-badge{
  position:absolute;
  top:4px;
  right:4px;
  width:9px;
  height:9px;
  background:var(--blue);
  border-radius:50%;
  border:2px solid var(--card);
}

/* NOTIFICATIONS */
.notif-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.notif-header .title{margin-bottom:0}

.btn-back{
  background:transparent;
  border:1px solid var(--border);
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  line-height:1;
  font-size:20px;
}
.btn-back:active{opacity:.75}

.notif-item{
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.notif-item:last-child{border-bottom:none}

.notif-status{
  font-size:18px;
  font-weight:900;
  margin-bottom:6px;
}
.notif-status.ok {color:#4cd88a}
.notif-status.err{color:#e86464}

.notif-detalhe{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-bottom:4px;
}

.notif-data{
  font-size:15px;
  font-weight:600;
  color:#aaa;
}

/* WHATSAPP */
#navWhatsApp{color:#25D366}
#navWhatsApp:active{opacity:.75}

/* SKELETON */
@keyframes shimmer{
  0%  {background-position:-400px 0}
  100%{background-position:400px 0}
}

.skeleton{
  background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a 50%,#1a1a1a 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite linear;
  border-radius:8px;
  display:inline-block;
}

.sk-line   {height:16px;margin-bottom:8px;width:100%}
.sk-line-sm{height:13px;margin-bottom:6px;width:60%}
.sk-title  {height:26px;margin-bottom:14px;width:70%}
.sk-badge  {height:20px;width:60px;border-radius:999px}
.sk-num    {height:38px;width:60px;margin:0 auto 6px;border-radius:8px}
.sk-block  {height:48px;width:100%;border-radius:12px;margin-bottom:8px}
.sk-card   {height:80px;width:100%;border-radius:12px;margin-bottom:8px}