/* ============================================================
   ORDO · TELAS.CSS — estilos específicos por tela
   Tudo mobile, glass, sem empilhar cards, sem truncar.
   ============================================================ */

.w100 { width: 100%; }

/* ---------- SPLASH ---------- */
.splash-tela {
  min-height: calc(100svh - var(--safe-top) - var(--safe-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-4);
  padding-block: var(--sp-8);
}
.splash-arv { font-size: 52px; filter: sepia(.6) saturate(.8) brightness(1.05); margin-bottom: var(--sp-2); }
.splash-slogan { max-width: 30ch; color: var(--c-txt-3); }
.splash-botoes { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---------- AUTH ---------- */
.auth { padding-top: var(--sp-6); }
.link-txt { background: none; border: 0; color: var(--c-txt-3); font-size: var(--fs-peq); cursor: pointer; padding: var(--sp-3); text-align: center; }

/* ---------- INÍCIO ---------- */
.saud { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.avatar {
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda-ouro);
  display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
}
.medalhao {
  width: 60px; height: 60px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: radial-gradient(circle at 40% 35%, rgba(200,163,106,.25), transparent 60%);
  border: 1px solid var(--borda-ouro);
}
.aspas { font-family: var(--serif); font-size: 40px; color: var(--c-ouro); opacity: .4; line-height: .5; margin-bottom: var(--sp-2); }

/* Hábitos: trilha horizontal tátil (não empilha) */
.habitos-trilha { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.habitos-trilha::-webkit-scrollbar { display: none; }
.habito {
  flex: 0 0 auto; width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: none; border: 0; cursor: pointer;
}
.habito__ic {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); color: var(--c-txt-3);
  transition: all .18s ease;
}
.habito.on .habito__ic { border-color: var(--borda-ouro); background: rgba(30,52,51,.6); color: var(--c-ouro); }
.habito__lbl { font-size: 10px; color: var(--c-txt-3); }
.habito.on .habito__lbl { color: var(--c-ouro); }

/* Acessos rápidos: grade tátil (não são cards empilhados verticalmente) */
.grade-acessos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.acesso {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); border-radius: var(--r-md); cursor: pointer;
  box-shadow: var(--brilho-borda);
}
.acesso__ic { font-size: 22px; }
.acesso__nome { font-size: 11px; color: var(--c-txt-2); text-align: center; }

/* ---------- JORNADA — timeline (não empilha cards) ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: var(--sp-3); }
.timeline__col { display: flex; flex-direction: column; align-items: center; }
.timeline__dot {
  width: 36px; height: 36px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--glass-3); border: 2px solid var(--borda); color: var(--c-txt-3);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.timeline__item.concluida .timeline__dot,
.timeline__item.ativa .timeline__dot { border-color: var(--c-ouro); background: rgba(30,52,51,.6); color: var(--c-ouro); }
.timeline__linha { width: 2px; flex: 1; min-height: 20px; background: var(--borda); margin: 4px 0; }
.timeline__item.concluida .timeline__linha { background: var(--c-ouro); }
.timeline__body { flex: 1; padding-bottom: var(--sp-5); }

/* lista com ícone */
.lista__ic { width: 26px; text-align: center; font-size: 18px; color: var(--c-ouro); }

/* ---------- BIBLIOTECA ---------- */
.busca {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--glass-3); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); border-radius: var(--r-md); padding: 0 var(--sp-4);
}
.busca__ic { color: var(--c-txt-3); font-size: 18px; }
.busca .input { background: none; border: 0; backdrop-filter: none; padding-inline: 0; }
.busca .input:focus { border: 0; }

.cats { display: flex; justify-content: space-between; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); background: none; border: 0; cursor: pointer; width: 62px; }
.cat__ic {
  width: 54px; height: 54px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); color: var(--c-txt-2);
}
.cat.on .cat__ic { border-color: var(--borda-ouro); background: rgba(30,52,51,.6); color: var(--c-ouro); }
.cat__lbl { font-size: 10px; color: var(--c-txt-3); text-align: center; }

.item-leitura {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); border-radius: var(--r-md); padding: var(--sp-3);
  cursor: pointer; text-align: left; box-shadow: var(--brilho-borda);
}
.item-leitura__thumb {
  width: 56px; height: 56px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: var(--c-premium); border: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--c-ouro);
}
.bookmark { color: var(--c-txt-3); font-size: 18px; }

/* ---------- LEITURA ---------- */
.leitura { display: flex; flex-direction: column; gap: var(--sp-2); }
.divisor { height: 1px; background: var(--borda); margin: var(--sp-4) 0; }
.leitura__corpo { font-size: 16px; line-height: 1.7; color: var(--c-txt-2); max-width: var(--largura-leitura); }

/* ---------- MENTOR ---------- */
.mentor-tela { display: flex; flex-direction: column; }
.mentor-sub { font-size: var(--fs-peq); color: var(--c-txt-3); margin-bottom: var(--sp-4); }
.chat { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; padding-bottom: var(--sp-4); }
.bolha { max-width: 82%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: 14px; line-height: 1.5; }
.bolha.m {
  align-self: flex-start; border-top-left-radius: 4px;
  background: var(--glass-1); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); color: var(--c-txt-2);
}
.bolha.u { align-self: flex-end; border-top-right-radius: 4px; background: var(--c-ouro); color: var(--c-abs); }
.mentor__barra {
  position: sticky; bottom: 0;
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding-top: var(--sp-2);
}
.mentor__input { flex: 1; min-height: 44px; max-height: 120px; border-radius: var(--r-xl); }
.mentor__enviar {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r-full);
  background: var(--c-ouro); color: var(--c-abs); border: 0; font-size: 16px; cursor: pointer;
}

/* ---------- PERFIL ---------- */
.selo-admin {
  display: inline-block;
  font-size: 11px; letter-spacing: 1px;
  color: var(--c-ouro);
  background: rgba(200,163,106,.08);
  border: 1px solid var(--borda-ouro);
  border-radius: var(--r-full);
  padding: 4px 12px;
}
.avatar-grande {
  width: 72px; height: 72px; border-radius: var(--r-full); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  background: radial-gradient(circle at 40% 35%, rgba(200,163,106,.25), transparent 60%);
  border: 1px solid var(--borda-ouro);
}

/* tablet/desktop grande: mantém coluna mobile centralizada, com respiro */
@media (min-width: 640px) {
  .grade-acessos { gap: var(--sp-3); }
}