Separado los contenidos de html, css y javascript en diferentes directorios \ Creado primera actividad de JavaScript

JavaScript/A01-SAD/assets/css/style.css

@@ -0,0 +1,59 @@
+*
+{
+    box-sizing: border-box;
+}
+
+body 
+{
+    margin: 0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    transition: background 0.2s ease, color 0.2s ease;
+}
+
+:root
+{
+    --bg: #ffffff;
+    --bg-secondary: #f5f5f5;
+    --text: #111111;
+    --text-muted: #555555;
+    --border: #e5e7eb;
+    --accent: #2563eb;
+}
+
+[data-theme="dark"] 
+{
+    --bg: #111827;
+    --bg-secondary: #1f2937;
+    --text: #e5e7eb;
+    --text-muted: #9ca3af;
+    --border: #374151;
+    --accent: #60a5fa;
+}
+
+.header
+{
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.content
+{
+    padding: 1rem;
+}
+
+.card
+{
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+a 
+{
+    color: var(--accent);
+}

JavaScript/A01-SAD/assets/js/index.js

@@ -0,0 +1,15 @@
+const root = document.documentElement;
+const toggleBtn = document.getElementById("theme-toggle");
+
+const savedTheme = localStorage.getItem("theme");
+if (savedTheme) {
+  root.dataset.theme = savedTheme;
+}
+
+toggleBtn.addEventListener("click", () => {
+  const current = root.dataset.theme;
+  const next = current === "dark" ? "light" : "dark";
+
+  root.dataset.theme = next;
+  localStorage.setItem("theme", next);
+});