agrega toggle de modo claro/oscuro con persistencia en localStorage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/style.css

@@ -5,12 +5,30 @@
     --bg: #121212;
     --surface: #1e1e1e;
     --surface2: #2a2a2a;
+    --surface3: #333333;
     --green: #1db954;
     --green-dark: #17a349;
     --text: #e0e0e0;
     --text-muted: #888;
     --red: #e74c3c;
     --radius: 10px;
+    --nav-bg: #000000;
+    --border: #444444;
+    --border2: #333333;
+    --modal-bg: #1a1a1a;
+}
+
+[data-theme="light"] {
+    --bg: #f4f4f4;
+    --surface: #ffffff;
+    --surface2: #f0f0f0;
+    --surface3: #e4e4e4;
+    --text: #111111;
+    --text-muted: #666666;
+    --nav-bg: #f8f8f8;
+    --border: #d8d8d8;
+    --border2: #cccccc;
+    --modal-bg: #ffffff;
 }
 
 body {
@@ -28,12 +46,12 @@ a:hover { text-decoration: underline; }
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: #000;
+    background: var(--nav-bg);
     padding: 0.75rem 1.5rem;
     position: sticky;
     top: 0;
     z-index: 100;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid var(--border2);
 }
 .brand { font-size: 1.1rem; font-weight: 700; color: var(--green); letter-spacing: 1px; }
 .nav-links { display: flex; gap: 1.5rem; }
@@ -154,7 +172,7 @@ a:hover { text-decoration: underline; }
     flex: 1;
     background: var(--surface2);
     color: var(--text);
-    border: 1px solid #444;
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 0.45rem 0.6rem;
     font-size: 0.875rem;
@@ -246,7 +264,7 @@ a:hover { text-decoration: underline; }
 .input {
     background: var(--surface2);
     color: var(--text);
-    border: 1px solid #444;
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 0.55rem 0.75rem;
     font-size: 0.9rem;
@@ -265,9 +283,9 @@ a:hover { text-decoration: underline; }
     text-transform: uppercase;
     letter-spacing: 0.4px;
     padding: 0.5rem 0.6rem;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid var(--border2);
 }
-.table td { padding: 0.6rem; border-bottom: 1px solid #2a2a2a; vertical-align: middle; }
+.table td { padding: 0.6rem; border-bottom: 1px solid var(--surface2); vertical-align: middle; }
 .table tr:last-child td { border-bottom: none; }
 
 .table-thumb {
@@ -308,14 +326,14 @@ a:hover { text-decoration: underline; }
 .btn-sm {
     background: var(--surface2);
     color: var(--text);
-    border: 1px solid #444;
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 0.4rem 0.7rem;
     cursor: pointer;
     font-size: 0.82rem;
     transition: background 0.15s;
 }
-.btn-sm:hover { background: #333; }
+.btn-sm:hover { background: var(--surface3); }
 .btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
 .btn-danger:hover { background: var(--red); color: #fff; }
 
@@ -346,3 +364,17 @@ a:hover { text-decoration: underline; }
 
 /* Misc */
 .empty-msg { color: var(--text-muted); font-size: 0.9rem; }
+
+/* ── Theme toggle ── */
+.theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1rem;
+    padding: 0.3rem 0.4rem;
+    border-radius: 6px;
+    line-height: 1;
+    transition: background 0.15s;
+    color: var(--text-muted);
+}
+.theme-toggle:hover { background: var(--surface2); }