<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formularios en 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">Registro de Nuevo Estudiante</h4>

      <form onsubmit="event.preventDefault(); alert('¡Datos recibidos correctamente!');">
        <!-- Campo de Nombre -->
        <div class="mb-3">
          <label for="nombreCompleto" class="form-label fw-semibold">Nombre Completo</label>
          <input type="text" class="form-control" id="nombreCompleto" name="nombreCompleto" placeholder="Ej. Juan Martínez" required>
        </div>

        <!-- Campo de Email con texto de ayuda -->
        <div class="mb-3">
          <label for="correoUsuario" class="form-label fw-semibold">Correo Institucional</label>
          <input type="email" class="form-control" id="correoUsuario" name="correoUsuario" placeholder="[email protected]" required>
          <div class="form-text text-muted">Recibirás las credenciales de acceso en esta dirección.</div>
        </div>

        <!-- Campo Deshabilitado de Rol -->
        <div class="mb-3">
          <label for="rolFijo" class="form-label fw-semibold">Rol Asignado</label>
          <input type="text" class="form-control" id="rolFijo" name="rolFijo" value="Estudiante Fullstack" disabled>
        </div>

        <!-- Área de texto para comentarios -->
        <div class="mb-4">
          <label for="biografia" class="form-label fw-semibold">Objetivos de Aprendizaje</label>
          <textarea class="form-control" id="biografia" name="biografia" rows="3" placeholder="Describe brevemente tus expectativas en el campus..."></textarea>
        </div>

        <button type="submit" class="btn btn-primary w-100 py-2 rounded-pill fw-semibold shadow-sm">
          Completar Registro &raquo;
        </button>
      </form>
    </div>
  </div>

</body>
</html>