Añado estilos

Padel/padel/static/styles.css

@@ -9,6 +9,12 @@
     text-align: center;
   }
   
+  li {
+    list-style: square inside;
+    border: 1px solid #ccc;
+
+  }
+
   a,
   a:visited {
     color: #007bff;
@@ -31,4 +37,61 @@
   main {
     width: 80%;
     margin: 0 auto;
+  }
+
+  form {
+    text-align: left;
+    min-width: 200px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0px 0px 10px #ccc;
+    vertical-align: top;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  .form-control {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    font-size: 1em;
+  }
+  
+  .submit-btn {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 1em;
+  }
+  
+  .submit-btn:hover {
+    background-color: #0056b3;
+  }
+  
+  .eliminar-btn {
+    background-color: red;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 0.5em;
+  }
+
+
+  .form-eliminar {
+    text-align: right;
+    vertical-align: top;
+    padding: 0px;
   }

Padel/padel/templates/reservas/misreservas.html

@@ -8,8 +8,8 @@
     <ul>
         {% for reserva in reservas %}
             <li>{{reserva.id}} - {{ reserva.nombre }} - {{ reserva.fecha }} - {{ reserva.hora }}
-                <form action="{{ url_for('reservas.eliminar_reserva', id=reserva.id) }}" method="post" style="display: inline;">
-                    <button type="submit">Eliminar</button>
+                <form class="form-eliminar" action="{{ url_for('reservas.eliminar_reserva', id=reserva.id) }}" method="post" style="display: inline;">
+                    <button type="submit"  class="eliminar-btn">Eliminar</button>
                 </form>
             </li>
         {% endfor %}

Padel/padel/templates/reservas/reservar.html

@@ -1,18 +1,28 @@
 {% extends 'base.html' %}
 
 {% block header %}
-  <h2>{% block title %}Reservas de padel{% endblock title %}</h2>
+  <h2>{% block title %}Hacer una nueva reserva{% endblock title %}</h2>
 {% endblock header %}
 
 {% block content %}
-    <h2>Hacer una nueva reserva</h2>
     <form action="/reservar" method="post">
+
+      <div class="form-group">
         <label for="nombre">Nombre:</label>
-        <input type="text" id="nombre" name="nombre" required><br>
+        <input type="text" id="nombre" name="nombre" required class="form-control"><br>
+      </div>
+
+      <div class="form-group">
         <label for="fecha">Fecha:</label>
-        <input type="date" id="fecha" name="fecha" required><br>
+        <input type="date" id="fecha" name="fecha" required class="form-control"><br>
+      </div>
+
+      <div class="form-group">
         <label for="hora">Hora:</label>
-        <input type="time" id="hora" name="hora" required><br>
-        <button type="submit">Reservar</button>
+        <input type="time" id="hora" name="hora" required class="form-control"><br>
+      </div>
+      <div class="form-group">
+        <button type="submit" class="submit-btn">Reservar</button>
+      </div>
     </form>
 {% endblock content %}