Update style.css

style.css

@@ -1,28 +1,40 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Spinner de carga */
+.spinner {
+    border: 4px solid #f3f3f3;
+    /* Gris claro */
+    border-top: 4px solid #3498db;
+    /* Azul */
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    animation: spin 2s linear infinite;
+    margin: auto;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Spinner de carga */
+#loading {
+    text-align: center;
+    display: none;
+    margin-top: 20px;
+    /* Ajuste de la distancia */
+    position: relative;
+    min-height: 60px;
+    /* Altura mínima para que el spinner tenga espacio */
 }
 
-.card p:last-child {
-	margin-bottom: 0;
-}
+
+
+/* Mensajes de flash */
+#mensaje {
+    margin-top: 20px;
+}