Ajustes en distribucion de mobile y desktop, validacion de contrast ratio de texto-fondos

backend/src/signals/finnhub.client.js

@@ -0,0 +1,74 @@
+/**
+ * Cliente para la API de Finnhub — noticias financieras.
+ *
+ * Exporta:
+ *   - fetchFinancialNews(limit): obtiene headlines de Finnhub.
+ *   - filterNewsByRelevance(news, question): filtra noticias por relevancia
+ *     con el texto de la pregunta del mercado.
+ */
+
+import { config } from '../config.js';
+import { logger } from '../utils/logger.js';
+
+const FINNHUB_BASE = 'https://finnhub.io/api/v1';
+
+/**
+ * Obtiene noticias financieras generales de Finnhub.
+ * @param {number} limit - Máximo de noticias a devolver.
+ * @returns {Promise<Array<{headline:string, source:string, url:string, summary:string, datetime:number}>>}
+ */
+export async function fetchFinancialNews(limit = 30) {
+  if (!config.FINNHUB_API_KEY) {
+    logger.warn('FINNHUB_API_KEY not set; skipping news fetch');
+    return [];
+  }
+
+  const url = `${FINNHUB_BASE}/news?category=general&token=${config.FINNHUB_API_KEY}`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Finnhub returned ${res.status}`);
+  }
+
+  const data = await res.json();
+  if (!Array.isArray(data)) {
+    return [];
+  }
+
+  // Finnhub devuelve: { category, datetime, headline, id, image, related, source, summary, url }
+  return data.slice(0, limit).map((item) => ({
+    headline: item.headline || '',
+    source: item.source || '',
+    url: item.url || '',
+    summary: item.summary || '',
+    datetime: item.datetime || 0,
+  }));
+}
+
+/**
+ * Filtra noticias por relevancia respecto a la pregunta del mercado.
+ * Usa coincidencia de palabras clave extraídas de la pregunta.
+ * @param {Array} news - Lista de noticias.
+ * @param {string} question - Pregunta del mercado.
+ * @returns {Array} Noticias relevantes.
+ */
+export function filterNewsByRelevance(news, question) {
+  if (!news || !news.length || !question) return [];
+
+  // Extrae palabras clave: elimina stopwords en español/inglés y puntuación
+  const stopwords = new Set([
+    'a','an','the','and','or','but','in','on','at','to','for','of','with','by','is','are','was','were','be','been','being','have','has','had','do','does','did','will','would','could','should','may','might','can','shall','this','that','these','those','i','you','he','she','it','we','they','me','him','her','us','them','my','your','his','its','our','their','mine','yours','hers','ours','theirs','el','la','los','las','un','una','unos','unas','y','o','pero','en','de','con','por','para','es','son','fue','fueron','ser','estar','ha','han','había','hace','hizo','hacer','este','ese','esta','esa','estos','esas','aquellos','aquel','aquella','yo','tú','él','ella','nosotros','vosotros','ellos','ellas','me','te','le','les','nos','os','mi','tu','su','nuestro','vuestra','suyo',
+  ]);
+
+  const keywords = question
+    .toLowerCase()
+    .replace(/[^a-záéíóúüñ0-9\s]/g, ' ')
+    .split(/\s+/)
+    .filter((w) => w.length > 2 && !stopwords.has(w));
+
+  if (!keywords.length) return news.slice(0, 5);
+
+  return news.filter((item) => {
+    const text = `${item.headline} ${item.summary}`.toLowerCase();
+    return keywords.some((kw) => text.includes(kw));
+  });
+}

frontend/index.html

@@ -122,6 +122,11 @@
                 Mapa global de predicciones
                 <span class="panel-subtitle">· tamaño = volumen · color = señal IA</span>
               </div>
+              <div class="map-legend desktop-only">
+                <div class="legend-item"><div class="legend-dot green"></div>alcista</div>
+                <div class="legend-item"><div class="legend-dot red"></div>bajista</div>
+                <div class="legend-item"><div class="legend-dot gray"></div>neutral</div>
+              </div>
               <span class="panel-toggle">▼</span>
             </div>
             <div class="panel-body">

frontend/src/app.js

@@ -498,9 +498,8 @@ function buildDetailDOM(m, sig, prefix = '') {
   // ── AI box ──
   const aiBadge = el('span', `signal-badge ${getSignalBadgeClass(sig.signal)}`)
   aiBadge.textContent = `${translateSignal(sig.signal).toUpperCase()} · ${Math.round(sig.confidence * 100)}%`
-  const aiMeta = el('span', 'text-xs text-neutral font-mono ml-auto', 'actualizado hace 2m')
-  const aiHeader = el('div', 'flex-row gap-8 mb-4 flex-wrap')
-  aiHeader.append(el('div', 'ai-label', 'Análisis IA · HuggingFace Qwen3-8B'), aiBadge, aiMeta)
+  const aiHeader = el('div', 'flex-between mb-4')
+  aiHeader.append(el('div', 'ai-label', 'Análisis IA'), aiBadge)
 
   // Texto IA construido con nodos DOM — ninguna cadena externa toca innerHTML
   const aiText = el('div', 'ai-text')
@@ -532,7 +531,6 @@ function buildDetailDOM(m, sig, prefix = '') {
     simAmount,
     simYes,
     simNo,
-    el('span', 'sim-disclaimer', 'Simulado · sin trading real'),
   )
 
   simYes.addEventListener('click', () => simulator.openPosition(m.id, 'YES', simAmount.value))
@@ -606,11 +604,23 @@ function selectMarket(marketId) {
     wrapper.appendChild(content)
     card.after(wrapper)
 
-    // Charts require the canvas to be in the DOM before rendering
+    // Charts require the canvas to be in the DOM before rendering.
+    // Scroll after paint so the layout height is settled.
     requestAnimationFrame(() => {
       charts.renderDetailChart(chartId, m.yesPrice)
       charts.renderSparkline(sparkYesId, m.yesPrice, 'yes')
       charts.renderSparkline(sparkNoId, m.noPrice, 'no')
+
+      // Scroll .main so the detail wrapper's top sits just below the sticky signals header,
+      // pushing the clicked card out of the viewport
+      const main = document.querySelector('.main')
+      const stickyHeader = document.querySelector('#panel-signals .panel-header')
+      if (main) {
+        const stickyH = stickyHeader ? stickyHeader.offsetHeight : 0
+        const mainRect = main.getBoundingClientRect()
+        const wrapperTop = wrapper.getBoundingClientRect().top - mainRect.top + main.scrollTop - stickyH
+        main.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+      }
     })
   } else {
     state.activeMarketId = marketId

frontend/src/style.css

@@ -9,7 +9,7 @@
   --border2: rgba(255,255,255,0.13);
   --text: #e8eaf0;
   --text2: #8b90a0;
-  --text3: #555b6e;
+  --text3: #7e8494;
   --green: #22d37a;
   --green2: #0d6e3a;
   --green3: #052a17;
@@ -366,7 +366,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 /* ─── Dashboard layout ─── */
 .dashboard-grid {
   display: grid;
-  grid-template-columns: 1fr 280px;
+  grid-template-columns: 1fr 336px;
   grid-template-rows: 1fr minmax(280px, 40%);
   gap: var(--panel-gap);
   height: 100%;
@@ -456,6 +456,26 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 .desktop-only { display: initial; }
 .mobile-only { display: none; }
 
+/* ID-level rules beat class rules — ensure circle buttons and auth dot stay off in desktop */
+#btn-notif,
+#btn-auth-mobile {
+  display: none;
+}
+
+/* Hide topbar legend in all views — desktop uses the map panel legend instead */
+.topbar-stats .legend {
+  display: none;
+}
+
+/* Map panel legend (desktop only) */
+.map-legend {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  margin-right: 8px;
+}
+
 /* Panel mapa */
 .map-panel {
   grid-row: 1 / 2;
@@ -742,6 +762,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   gap: 16px;
   align-items: center;
   flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .sim-label {
@@ -1183,7 +1204,7 @@ td {
 }
 
 .modal-submit {
-  background: var(--blue);
+  background: #2563eb;
   border: none;
   color: #fff;
   font-family: var(--font-sans);
@@ -1419,6 +1440,12 @@ td {
   flex: 1;
 }
 
+/* Duplicate stats are only needed for the mobile infinite-scroll animation */
+.stats-track .legend.end ~ .stat,
+.stats-track .legend.end ~ .legend {
+  display: none;
+}
+
 /* ─── Lazy loading sentinel ─── */
 .signals-sentinel {
   padding: 12px;
@@ -1456,7 +1483,67 @@ td {
     grid-template-rows: auto 1fr;
   }
   .sidebar { display: none; }
-  .outcomes-row { flex-direction: column; }
+
+  /* ── Detail: header stacks, metrics row below ── */
+  .detail-header {
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .detail-metrics {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .metric {
+    text-align: left;
+  }
+
+  /* ── Outcomes: Yes/No side-by-side, chart full-width below ── */
+  .outcomes-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .outcomes-row .chart-container {
+    grid-column: 1 / -1;
+    height: 130px;
+    max-height: 130px;
+    min-height: 0;
+  }
+
+  /* ── Simulator: label full-width, input+buttons in one row, disclaimer below ── */
+  .sim-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .sim-row .sim-label {
+    grid-column: 1 / -1;
+    font-size: 0.875rem;
+  }
+
+  .sim-row .sim-input {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sim-row .sim-btn-yes,
+  .sim-row .sim-btn-no {
+    padding: 8px 12px;
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+
+  .sim-row .sim-disclaimer {
+    grid-column: 1 / -1;
+    font-size: 0.75rem;
+  }
 
   .desktop-only { display: none !important; }
   .mobile-only { display: initial; }
@@ -1534,6 +1621,17 @@ td {
     display: none;
   }
 
+  /* Restore duplicate stats (and their legend) for the scroll animation */
+  .stats-track .legend.end ~ .stat,
+  .stats-track .legend.end ~ .legend {
+    display: flex;
+  }
+
+  /* Restore the primary legend in the scroll track */
+  .topbar-stats .legend.end {
+    display: flex;
+  }
+
   /* Dashboard grid scrolls instead of stretching to fill viewport */
   .dashboard-grid {
     height: auto;
@@ -1560,6 +1658,7 @@ td {
     border-color: var(--blue2);
   }
 
+  #btn-notif,
   #btn-auth-mobile {
     display: flex;
   }