Estructura inicial del frontend

src/components/Modal.jsx

@@ -0,0 +1,34 @@
+// src/components/Modal.jsx
+export default function Modal({ title, onClose, children, width = 900 }) {
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        zIndex: 1000, padding: 20,
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: "#fff", borderRadius: 16, width: "100%", maxWidth: width,
+          maxHeight: "90vh", overflow: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+        }}
+      >
+        <div style={{
+          display: "flex", justifyContent: "space-between", alignItems: "center",
+          padding: "16px 22px", borderBottom: "1px solid #e2e8f0", position: "sticky",
+          top: 0, background: "#fff", zIndex: 2,
+        }}>
+          <h3 style={{ fontSize: 16, fontWeight: 700, color: "#1e40af" }}>{title}</h3>
+          <button onClick={onClose} style={{
+            border: "none", background: "#f1f5f9", borderRadius: 8, width: 32, height: 32,
+            cursor: "pointer", fontSize: 18, color: "#475569",
+          }}>×</button>
+        </div>
+        <div style={{ padding: 22 }}>{children}</div>
+      </div>
+    </div>
+  );
+}