<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Checks, Radios y Switches Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 580px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Configuración de Preferencias</h4>

      <!-- 1. Menú Select Estilizado -->
      <div class="mb-3">
        <label for="selectNivel" class="form-label fw-semibold">Nivel de Conocimiento Técnico</label>
        <select class="form-select" id="selectNivel">
          <option selected>Selecciona tu nivel actual...</option>
          <option value="1">Principiante (Sin experiencia previa)</option>
          <option value="2">Intermedio (HTML y CSS básico)</option>
          <option value="3">Avanzado (Desarrollador en ejercicio)</option>
        </select>
      </div>

      <!-- 2. Radios Excluyentes -->
      <label class="form-label fw-semibold mb-2 d-block">Modalidad de Tutoría</label>
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tutoria" id="radioAuto" checked>
          <label class="form-check-label" for="radioAuto">Aprendizaje Autónomo a mi propio ritmo</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tutoria" id="radioAI">
          <label class="form-check-label" for="radioAI">Asistencia personalizada con Sócrates AI</label>
        </div>
      </div>

      <!-- 3. Switches Deslizantes -->
      <label class="form-label fw-semibold mb-2 d-block">Notificaciones del Campus</label>
      <div class="mb-4">
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" role="switch" id="switchEmail" checked>
          <label class="form-check-label" for="switchEmail">Avisos de nuevas lecciones por correo</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switchSonido">
          <label class="form-check-label" for="switchSonido">Efectos sonoros al completar ejercicios</label>
        </div>
      </div>

      <button class="btn btn-primary w-100 rounded-pill fw-semibold shadow-sm" onclick="alert('¡Preferencias guardadas!')">
        Guardar Ajustes
      </button>
    </div>
  </div>

</body>
</html>