/* ══════════════════════════════════════════════
   Naalli · Portal do Professor — CSS v1.0
   ══════════════════════════════════════════════ */
:root {
  --terra:#B8706A; --terra-deep:#9A5B56; --terra-soft:#D9A5A0; --terra-wash:rgba(184,112,106,.08);
  --bone:#F8F3ED; --cream:#EFE6D8; --cream-warm:#E8DDCC; --parchment:#FAF6EF; --sand:#DED0BC;
  --earth:#3D2E26; --coffee:#5A453B; --smoke:#8A7A6F;
  --sage:#8FA383; --sage-deep:#6B8560; --gold:#C99A52;
  --danger:#C75B5B; --warning:#D4A843;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter Tight',-apple-system,sans-serif;
  --r:12px; --r-lg:16px; --shadow:0 4px 20px rgba(61,46,38,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bone);color:var(--earth);line-height:1.5;font-size:14px;overflow-x:hidden}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── LOGIN ────────────────────────────── */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,var(--earth) 0%,var(--coffee) 100%)}
.login-card{background:var(--bone);border-radius:24px;padding:40px;width:100%;max-width:400px;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.login-logo{display:flex;justify-content:center;margin-bottom:24px}
.login-logo img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--cream)}
.login-logo-fallback{width:64px;height:64px;border-radius:50%;background:var(--terra);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;color:var(--bone)}
.login-title{font-family:var(--serif);font-size:26px;font-weight:500;text-align:center;margin-bottom:4px;color:var(--earth)}
.login-badge{display:inline-flex;align-items:center;gap:6px;background:var(--terra-wash);color:var(--terra);font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.08em;text-transform:uppercase;margin:0 auto 24px;display:flex;justify-content:center}
.login-err{background:rgba(199,91,91,.1);color:var(--danger);padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;display:none}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--smoke);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border-radius:var(--r);border:1px solid rgba(61,46,38,.12);background:var(--parchment);font-size:14px;color:var(--earth);outline:none;transition:border-color .2s}
.field input:focus{border-color:var(--terra)}
.btn-login{width:100%;padding:14px;border-radius:100px;background:var(--earth);color:var(--bone);font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .3s;margin-top:8px}
.btn-login:hover{background:var(--terra)}

/* ── APP SHELL ────────────────────────── */
.app{display:none;min-height:100vh;flex-direction:column}
.app.show{display:flex}
.topbar{position:sticky;top:0;z-index:50;background:rgba(248,243,237,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(61,46,38,.08);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-logo{width:32px;height:32px;border-radius:50%;object-fit:cover}
.topbar-name{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--terra)}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-user{font-size:13px;color:var(--coffee);font-weight:500}
.topbar-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--terra-soft);cursor:pointer}
.topbar-avatar-fallback{width:36px;height:36px;border-radius:50%;background:var(--terra);color:var(--bone);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;font-weight:500;cursor:pointer}
.btn-logout{padding:6px 14px;border-radius:20px;border:1px solid rgba(61,46,38,.12);background:transparent;color:var(--smoke);font-size:12px;font-weight:500;transition:all .2s}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* ── ABAS ─────────────────────────────── */
.content{flex:1;max-width:640px;margin:0 auto;width:100%;padding:0 0 80px}
.greeting{padding:24px 20px 0}
.greeting-tag{font-size:11px;font-weight:600;color:var(--terra);letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}
.greeting-name{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--earth);line-height:1.1}
.greeting-sub{font-size:14px;color:var(--smoke);margin-top:4px}
.abas{display:flex;overflow-x:auto;padding:16px 20px 0;gap:4px;scrollbar-width:none;border-bottom:1px solid rgba(61,46,38,.08)}
.abas::-webkit-scrollbar{display:none}
.aba-btn{flex-shrink:0;padding:9px 18px;border-radius:20px 20px 0 0;border:none;font-size:13px;font-weight:500;color:var(--smoke);background:transparent;transition:all .2s;cursor:pointer}
.aba-btn:hover{color:var(--terra)}
.aba-ativa{background:var(--parchment);color:var(--terra);font-weight:600;border:1px solid rgba(61,46,38,.08);border-bottom:none}

/* ── CARDS ────────────────────────────── */
.sec{padding:20px}
.card{background:var(--parchment);border-radius:var(--r-lg);padding:20px;border:1px solid rgba(61,46,38,.06);margin-bottom:16px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.card-title{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--earth)}

/* ── BUTTONS ──────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:100px;font-size:13px;font-weight:500;border:1px solid transparent;transition:all .2s;cursor:pointer;font-family:var(--sans)}
.btn-primary{background:var(--terra);color:var(--bone);border-color:var(--terra)}.btn-primary:hover{background:var(--terra-deep)}
.btn-ghost{background:transparent;color:var(--earth);border-color:rgba(61,46,38,.12)}.btn-ghost:hover{background:var(--cream)}
.btn-sm{padding:7px 14px;font-size:12px}
.btn-dark{background:var(--earth);color:var(--bone)}.btn-dark:hover{background:var(--coffee)}

/* ── FRASE ────────────────────────────── */
.frase-card{background:var(--terra);border-radius:var(--r-lg);padding:20px;color:var(--bone);margin-bottom:16px}
.frase-texto{font-family:var(--serif);font-size:16px;font-style:italic;line-height:1.5;margin-bottom:8px}
.frase-autor{font-size:12px;opacity:.7}

/* ── ALERTA ────────────────────────────── */
.alerta-card{border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;border:1px solid}
.alerta-warning{background:#FBF5E6;border-color:#E8C865;color:#7A5C10}
.alerta-badge{min-width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.alerta-warning .alerta-badge{background:#E8C865;color:#7A5C10}

/* ── STATS ROW ────────────────────────── */
.stats-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.stat-mini{background:var(--parchment);border-radius:var(--r);padding:14px 10px;text-align:center;border:1px solid rgba(61,46,38,.06)}
.stat-mini-val{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1}
.stat-mini-lbl{font-size:10px;color:var(--smoke);margin-top:4px;font-weight:500}
.stat-mini.presencas .stat-mini-val{color:var(--sage-deep)}
.stat-mini.faltas .stat-mini-val{color:var(--danger)}
.stat-mini.pendentes .stat-mini-val{color:var(--warning)}
.stat-mini.total .stat-mini-val{color:var(--earth)}

/* ── MAPA ─────────────────────────────── */
.date-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.date-nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(61,46,38,.12);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--coffee);cursor:pointer;transition:all .2s}
.date-nav-btn:hover{background:var(--cream);border-color:var(--terra)}
.date-nav-label{font-weight:600;font-size:15px;color:var(--earth);display:flex;align-items:center;gap:8px}
.date-nav-label span{font-size:12px;color:var(--smoke);font-weight:400}
.volta-hoje{font-size:12px;color:var(--terra);cursor:pointer;font-weight:600;margin-bottom:12px;display:inline-flex;align-items:center;gap:4px}
.horarios-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none}
.horarios-tabs::-webkit-scrollbar{display:none}
.hora-tab{flex-shrink:0;padding:8px 14px;border-radius:20px;border:1px solid rgba(61,46,38,.12);background:transparent;font-size:13px;font-weight:500;color:var(--coffee);cursor:pointer;transition:all .2s;position:relative;display:flex;align-items:center;gap:6px}
.hora-tab.active{background:var(--terra);color:var(--bone);border-color:var(--terra)}
.hora-tab .cnt{background:var(--terra-soft);color:var(--bone);border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700}
.hora-tab.active .cnt{background:rgba(248,243,237,.3)}

/* ── LISTA ALUNOS NO MAPA ─────────────── */
.aluno-mapa-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bone);border-radius:var(--r);border:1px solid rgba(61,46,38,.06);margin-bottom:8px}
.aluno-mapa-avatar{width:40px;height:40px;border-radius:50%;background:var(--terra);color:var(--bone);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-weight:500;flex-shrink:0;object-fit:cover}
.aluno-mapa-nome{font-weight:600;font-size:14px}
.aluno-mapa-tipo{font-size:12px;color:var(--smoke)}
.presenca-btns{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.btn-presenca{width:32px;height:32px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s;background:transparent}
.btn-presenca.presente{border-color:var(--sage-deep);color:var(--sage-deep)}
.btn-presenca.presente.ativo{background:var(--sage-deep);color:#fff}
.btn-presenca.falta{border-color:var(--danger);color:var(--danger)}
.btn-presenca.falta.ativo{background:var(--danger);color:#fff}
.status-pill{padding:4px 10px;border-radius:8px;font-size:10px;font-weight:700;text-transform:uppercase}
.status-agendado{background:#F5F0EA;color:var(--smoke)}
.status-presente{background:#EEF6F1;color:var(--sage-deep)}
.status-falta{background:#FBF0F0;color:var(--danger)}

/* ── ALUNOS BASE ──────────────────────── */
.search-input{width:100%;padding:12px 16px 12px 40px;border-radius:var(--r);border:1px solid rgba(61,46,38,.1);background:var(--bone);font-size:14px;color:var(--earth);outline:none;transition:border-color .2s}
.search-input:focus{border-color:var(--terra)}
.search-wrap{position:relative;margin-bottom:14px}
.search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--smoke)}
.filtros-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.sort-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-bottom:14px}
.sort-row::-webkit-scrollbar{display:none}
.filtro-chip{padding:6px 14px;border-radius:20px;border:1px solid rgba(61,46,38,.12);background:transparent;font-size:12px;font-weight:500;color:var(--coffee);cursor:pointer;transition:all .2s;white-space:nowrap}
.filtro-chip.active{background:var(--earth);color:var(--bone);border-color:var(--earth)}
.filtros-label{font-size:11px;font-weight:700;color:var(--smoke);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.aluno-card{background:var(--bone);border-radius:var(--r-lg);padding:16px;border:1px solid rgba(61,46,38,.06);margin-bottom:12px;transition:box-shadow .2s}
.aluno-card:hover{box-shadow:var(--shadow)}
.aluno-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.aluno-card-avatar{width:44px;height:44px;border-radius:50%;background:var(--terra);color:var(--bone);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;flex-shrink:0;object-fit:cover}
.aluno-card-nome{font-weight:700;font-size:15px;margin-bottom:2px}
.aluno-card-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.btn-social{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-insta{background:#E1306C18;color:#E1306C}.btn-insta:hover{background:#E1306C;color:#fff}
.btn-wa{background:#25D36618;color:#25D366}.btn-wa:hover{background:#25D366;color:#fff}
.aluno-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.metric-item{text-align:center;padding:8px 4px;background:var(--parchment);border-radius:var(--r)}
.metric-val{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1}
.metric-lbl{font-size:10px;color:var(--smoke);margin-top:2px}
.metric-item.presencas .metric-val{color:var(--sage-deep)}
.metric-item.faltas .metric-val{color:var(--danger)}
.metric-item.assid .metric-val{color:var(--warning)}
.aluno-bio{font-size:13px;color:var(--coffee);font-style:italic;padding:8px 0;border-top:1px solid var(--cream)}
.aluno-badge-nota{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--gold);margin-left:6px}

/* ── AVALIAÇÕES ───────────────────────── */
.rating-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cream)}
.rating-big{font-family:var(--serif);font-size:48px;font-weight:400;color:var(--earth);line-height:1}
.rating-stars{font-size:20px;color:var(--gold);margin-bottom:2px}
.rating-count{font-size:12px;color:var(--smoke)}
.avaliacao-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(61,46,38,.05)}
.avaliacao-item:last-child{border-bottom:none}
.avaliacao-nome{font-weight:600;font-size:14px}
.avaliacao-nota{font-size:14px;font-weight:600;color:var(--gold)}

/* ── AGENDAR PROF ─────────────────────── */
.select-aluno-btn{width:100%;padding:16px;border-radius:var(--r-lg);border:2px dashed rgba(61,46,38,.2);background:transparent;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s;color:var(--coffee);font-size:14px;font-weight:500;margin-bottom:20px}
.select-aluno-btn:hover{border-color:var(--terra);color:var(--terra);background:var(--terra-wash)}
.select-aluno-btn.selecionado{border-style:solid;border-color:var(--terra);background:var(--terra-wash);color:var(--terra)}
.semana-scroller{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px;scrollbar-width:none}
.semana-scroller::-webkit-scrollbar{display:none}
.dia-btn{flex-shrink:0;padding:10px 14px;border-radius:var(--r);border:1px solid rgba(61,46,38,.1);background:var(--bone);cursor:pointer;text-align:center;transition:all .2s;min-width:56px}
.dia-btn:hover{border-color:var(--terra)}
.dia-btn.selected{background:var(--terra);color:var(--bone);border-color:var(--terra)}
.dia-btn.has-reserva .dia-dot{background:var(--terra-soft)}
.dia-nome{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;opacity:.7}
.dia-btn.selected .dia-nome{opacity:.8;color:rgba(248,243,237,.8)}
.dia-num{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1}
.dia-dot{width:5px;height:5px;border-radius:50%;background:transparent;margin:4px auto 0}
.horarios-scroller{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-bottom:16px}
.horarios-scroller::-webkit-scrollbar{display:none}
.horario-btn{flex-shrink:0;padding:10px 14px;border-radius:var(--r);border:1px solid rgba(61,46,38,.1);background:var(--bone);cursor:pointer;text-align:center;min-width:80px;transition:all .2s}
.horario-btn.selected{border-color:var(--terra);background:var(--terra-wash)}
.horario-hora{font-weight:600;font-size:14px;margin-bottom:4px}
.horario-vagas{font-size:11px;color:var(--smoke)}
.bar-bg{height:3px;background:var(--sand);border-radius:2px;margin:4px 0}
.bar-fill{height:3px;border-radius:2px;transition:width .4s}
.slots-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot-card{border-radius:var(--r);padding:12px;border-left:3px solid;cursor:pointer;transition:all .2s}
.slot-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.slot-badge{width:22px;height:22px;border-radius:6px;background:rgba(61,46,38,.1);color:var(--earth);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-bottom:6px}
.slot-badge.proprio{background:var(--terra);color:var(--bone)}
.slot-nome{font-size:13px;font-weight:600;color:var(--earth);margin-bottom:2px}
.slot-action{font-size:11px;margin-top:2px}
.slot-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;float:right}
.slot-avatar-fallback{width:22px;height:22px;border-radius:50%;background:var(--terra);color:var(--bone);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;float:right}
.agenda-banner{margin-bottom:12px}

/* ── MODAL ────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(61,46,38,.65);backdrop-filter:blur(8px);z-index:999;display:none;align-items:flex-end;justify-content:center}
.modal-bg.open{display:flex}
.modal-box{background:var(--parchment);border-radius:24px 24px 0 0;max-width:640px;width:100%;max-height:85vh;overflow-y:auto;padding:28px 24px}
.modal-title{font-family:var(--serif);font-size:22px;font-weight:500;margin-bottom:16px}

/* ── SELECIONAR ALUNO SHEET ───────────── */
.aluno-lista-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);cursor:pointer;transition:background .15s}
.aluno-lista-item:hover{background:var(--cream)}
.aluno-lista-avatar{width:40px;height:40px;border-radius:50%;background:var(--terra);color:var(--bone);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-weight:500;flex-shrink:0}
.aluno-lista-nome{font-weight:600;font-size:14px}
.aluno-lista-plano{font-size:12px;color:var(--smoke)}

/* ── LOADER ───────────────────────────── */
.loader{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px;color:var(--smoke);font-size:13px}
.spin{width:20px;height:20px;border:2px solid var(--sand);border-top-color:var(--terra);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:32px 20px;color:var(--smoke);font-size:13px}

/* ── TOAST ────────────────────────────── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--earth);color:var(--bone);padding:13px 20px;border-radius:12px;font-size:13px;z-index:1001;transform:translateY(100px);opacity:0;transition:all .3s}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:var(--sage-deep)}
.toast.error{background:var(--danger)}

@media(max-width:480px){
  .stats-4{grid-template-columns:repeat(2,1fr)}
  .aluno-metrics{grid-template-columns:repeat(2,1fr)}
  .slots-grid{grid-template-columns:1fr}
  .content{padding:0 0 100px}
}

/* ── MODAL PERFIL ─────────────────────── */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-group label,
.label {
  font-size: 11px;
  font-weight: 600;
  color: var(--smoke);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(61,46,38,.12);
  background: var(--bone);
  font-size: 14px;
  color: var(--earth);
  font-family: var(--sans);
  outline: none;
  transition: border-color .2s;
}
.input:focus {
  border-color: var(--terra);
}
.textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(61,46,38,.12);
  background: var(--bone);
  font-size: 14px;
  color: var(--earth);
  font-family: var(--sans);
  outline: none;
  resize: vertical;
  transition: border-color .2s;
}
.textarea:focus {
  border-color: var(--terra);
}

/* Modal de perfil — centraliza foto */
#modal-perfil .modal-box {
  border-radius: 24px;
  max-height: 90vh;
}
#modal-perfil .modal-box > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

/* Linha de senha lado a lado */
.row-senha {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.row-senha .input {
  flex: 1;
}

/* Responsivo: em telas pequenas empilha */
@media (max-width: 480px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .row-senha   { flex-direction: column; }
}