Update static/style.css

static/style.css

@@ -14,17 +14,25 @@ h2 {
     color: #20603d;
 }
 
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start; /* Alinea arriba */
+    margin: 32px auto 0 auto;
+    width: 90%;
+    max-width: 1200px; /* Ajusta el ancho máximo */
+}
+
 #tabla {
     border-collapse: separate;
     border-spacing: 0;
-    margin: 32px auto 0 auto;
-    width: 90%;
-    max-width: 700px;
     background: #fff;
     box-shadow: 0 2px 18px rgba(0,0,0,0.07);
     border-radius: 12px;
     overflow: hidden;
     font-size: 15px;
+    width: 70%; /* Ocupa la mayor parte del espacio */
+    margin-right: 24px; /* Espacio entre tabla y resumen */
 }
 
 #tabla th, #tabla td {
@@ -59,8 +67,6 @@ h2 {
 }
 
 #resumen {
-    margin: 30px auto 0 auto;
-    max-width: 700px;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.04);
@@ -69,13 +75,19 @@ h2 {
     color: #20603d;
     min-height: 40px;
     transition: background 0.2s;
+    width: 30%; /* Ajusta el ancho del resumen */
 }
 
 @media (max-width: 800px) {
+    .container {
+        flex-direction: column; /* Apila verticalmente en pantallas pequeñas */
+        align-items: center;
+    }
     #tabla, #resumen {
         width: 98%;
         max-width: 98%;
         font-size: 14px;
+        margin: 12px auto;
     }
     h2 {
         font-size: 1.3em;