/* Tema oscuro IA futurista: colores, brillos y detalles */

body {
  background-color: #050510;
  color: #f5f5ff;
}

/* Scrollbars sutiles */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 5, 16, 0.9);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7df9ff, #ff4bcb);
  border-radius: 999px;
}

/* Glow suave en títulos y elementos clave */

.topbar h1,
.sidebar-header h2 {
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.6);
}

/* Borde neón en tarjetas activas */

.section-block {
  box-shadow:
    0 0 18px rgba(125, 249, 255, 0.18),
    0 0 32px rgba(255, 75, 203, 0.12);
}

/* IA widget extra glow */

.ai-avatar {
  animation: aiPulse 2.4s infinite ease-in-out;
}

@keyframes aiPulse {
  0% {
    box-shadow:
      0 0 10px rgba(125, 249, 255, 0.7),
      0 0 24px rgba(255, 75, 203, 0.4);
  }
  50% {
    box-shadow:
      0 0 18px rgba(125, 249, 255, 1),
      0 0 40px rgba(255, 75, 203, 0.8);
  }
  100% {
    box-shadow:
      0 0 10px rgba(125, 249, 255, 0.7),
      0 0 24px rgba(255, 75, 203, 0.4);
  }
}

/* Hover de navegación más marcado */

.sidebar-nav button:hover {
  box-shadow: 0 0 12px rgba(125, 249, 255, 0.4);
}

/* Quiz feedback más dramático */

.quiz-option.correct {
  box-shadow: 0 0 14px rgba(77, 255, 136, 0.7);
}

.quiz-option.incorrect {
  box-shadow: 0 0 14px rgba(255, 75, 107, 0.7);
}