/* Animações simples e agradáveis (sem exagero) */
.quiz-fade-in {
  animation: quizFadeIn 220ms ease-out;
}

@keyframes quizFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-answer {
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn-answer:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* Navbar (Bootstrap) */
.ava-navbar {
  background-color: #6f42c1;
}

.ava-navbar .navbar-brand,
.ava-navbar .nav-link {
  color: #fff !important;
  text-decoration: none !important;
}

.ava-navbar .nav-link:hover {
  color: #fff !important;
  opacity: 0.92;
}

.ava-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.ava-navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* ---------- Área do aluno: estilo "Glass" (mínimo de CSS; Bootstrap primeiro) ---------- */
.ava-student-bg {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(111, 66, 193, 0.55), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(20, 184, 166, 0.25), transparent 55%),
    radial-gradient(900px 600px at 60% 90%, rgba(168, 85, 247, 0.25), transparent 60%),
    #0b1020;
}

.ava-glass-nav {
  background: rgba(15, 18, 35, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ava-glass-nav .nav-link {
  opacity: 0.92;
}

.ava-glass-nav .nav-link:hover {
  opacity: 1;
}

.ava-brand-dot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #22c1c3, #6f42c1);
}

.ava-btn-primary {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #22c1c3, #6f42c1) !important;
}

.ava-btn-primary:hover {
  filter: brightness(1.05);
}

.ava-glass-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.ava-glass-card:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px);
  transition: transform 120ms ease, border-color 120ms ease;
}

.ava-icon-tile {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 66, 193, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #9be7ff;
  font-size: 1.6rem;
}

.ava-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.10);
}

.ava-progress-bar {
  background: linear-gradient(90deg, #22c1c3, #6f42c1);
}

/* Linha do tempo (estilo da imagem, com cards glass) */
.ava-timeline {
  position: relative;
  padding-left: 0;
}

.ava-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 14px;
  /* centro do nó (28px) */
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
  z-index: 0;
}

.ava-timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.ava-timeline-node {
  position: relative;
  z-index: 2;
  /* acima da linha */
  width: 28px;
  height: 28px;
  margin-top: 18px;
  /* alinha visualmente com o topo do card */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.20);
  background: rgba(15, 18, 35, 0.55);
  color: #9be7ff;
}

.ava-timeline-node.is-done {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.35);
  color: #a7f3d0;
}

.ava-timeline-node.is-active {
  background: rgba(111, 66, 193, 0.18);
  border-color: rgba(111, 66, 193, 0.40);
  color: #e9d5ff;
}

.ava-timeline-node.is-locked {
  opacity: 0.65;
}

.ava-timeline-card {
  border-radius: 14px;
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}

/* Locked + animação de desbloqueio */
.ava-locked {
  opacity: 0.65;
  filter: saturate(0.7);
}

.ava-unlock-anim {
  animation: avaUnlockPulse 900ms ease-out 1;
}

@keyframes avaUnlockPulse {
  0% {
    box-shadow: 0 0 0 rgba(34, 193, 195, 0.0);
    transform: translateY(0);
  }

  35% {
    box-shadow: 0 0 0 6px rgba(34, 193, 195, 0.18);
    transform: translateY(-1px);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(111, 66, 193, 0.14);
    transform: translateY(-1px);
  }

  100% {
    box-shadow: 0 0 0 rgba(111, 66, 193, 0.0);
    transform: translateY(0);
  }
}

/* Estilos para novos tipos de questão */
.code-input {
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  tab-size: 2;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.code-input:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

.textarea-input {
  border: 1px solid rgba(255, 255, 255, 0.15);
  resize: vertical;
}

.textarea-input:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

.char-counter,
.word-counter {
  display: block;
  margin-top: 0.5rem;
}

.lacunas-container {
  font-size: 1.1rem;
  line-height: 2.2;
  color: #fff;
}

.lacuna-input {
  width: 150px;
  margin: 0 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.lacuna-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #6f42c1;
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

.lacuna-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-vf {
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
}

.btn-vf i {
  font-size: 1.3rem;
}

.card,
.accordion,
.nav-bar {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(4px);
}

.card-body,
.accordion-item {
  background: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color:rgb(16, 15, 15) !important;
}
.accordion-button {
  background: none !important;
  border: none !important;
  color:rgb(15, 15, 15) !important;
}
.nav-link {
  color: inherit !important;
}
.accordion-header,.accordion-body {
  background: rgba(255, 255, 255, 0.9) !important;
}
.ava-glass-nav .nav-link {
  color: #fff !important;
}