agrega toggle de modo claro/oscuro con persistencia en localStorage

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

app/templates/index.html

@@ -456,7 +456,7 @@ setInterval(fetchVotingStatus, 5000);
 .vote-bar-wrap {
     width: 100%;
     height: 4px;
-    background: #333;
+    background: var(--surface3);
     border-radius: 2px;
     overflow: hidden;
     margin-top: 4px;
@@ -498,7 +498,7 @@ setInterval(fetchVotingStatus, 5000);
 }
 .vote-btn:hover:not(:disabled) { background: var(--green-dark); }
 .vote-btn:disabled {
-    background: #333;
+    background: var(--surface3);
     color: var(--text-muted);
     cursor: not-allowed;
     opacity: .8;
@@ -516,8 +516,8 @@ setInterval(fetchVotingStatus, 5000);
     padding: 1rem;
 }
 .modal-box {
-    background: #1a1a1a;
-    border: 1px solid #333;
+    background: var(--modal-bg);
+    border: 1px solid var(--border2);
     border-radius: 12px;
     width: 100%;
     max-width: 520px;
@@ -531,7 +531,7 @@ setInterval(fetchVotingStatus, 5000);
     align-items: center;
     justify-content: space-between;
     padding: 1rem 1.2rem;
-    border-bottom: 1px solid #2a2a2a;
+    border-bottom: 1px solid var(--surface2);
     gap: .8rem;
 }
 .modal-title-wrap {
@@ -574,7 +574,7 @@ setInterval(fetchVotingStatus, 5000);
     border-radius: 4px;
     flex-shrink: 0;
 }
-.modal-close:hover { color: #fff; background: #2a2a2a; }
+.modal-close:hover { color: var(--text); background: var(--surface2); }
 .modal-track-list {
     overflow-y: auto;
     padding: .4rem 0;
@@ -587,7 +587,7 @@ setInterval(fetchVotingStatus, 5000);
     cursor: pointer;
     transition: background .12s;
 }
-.modal-track-row:hover { background: #2a2a2a; }
+.modal-track-row:hover { background: var(--surface2); }
 .modal-track-num {
     font-size: .8rem;
     color: var(--text-muted);