/* Signal Lab — hoja de estilo Tratamiento: extracto de cuenta / ficha de fondo. Papel frío, tinta, filetes, un acento petróleo. Tipografía: IBM Plex Sans Condensed (titulares), IBM Plex Sans (texto), IBM Plex Mono (cifras). */ :root { color-scheme: light; --paper: #f4f5f7; --surface: #ffffff; --ink: #1a1d23; --ink-2: #3c4250; --muted: #6c7482; --rule: #d8dce3; --rule-strong: #b9bfca; --accent: #2b5f73; --accent-soft: rgba(43, 95, 115, 0.1); --buy: #24734f; --buy-tint: #e4f1ea; --sell: #a93a34; --sell-tint: #f6e5e3; --wait: #8a6a1f; --wait-tint: #f4edda; --chart-grid: #e3e6eb; --chart-market: #9aa2b0; --font-display: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; } /* La versión papel es la principal para todos. La variante oscura solo se activa a propósito con ; no sigue el modo oscuro del sistema. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #15171b; --surface: #1c1f25; --ink: #e9ebef; --ink-2: #c4c9d2; --muted: #8d95a3; --rule: #2c313a; --rule-strong: #3f4652; --accent: #7fb3c4; --accent-soft: rgba(127, 179, 196, 0.14); --buy: #62bf90; --buy-tint: rgba(98, 191, 144, 0.14); --sell: #e07d76; --sell-tint: rgba(224, 125, 118, 0.14); --wait: #d3aa4d; --wait-tint: rgba(211, 170, 77, 0.14); --chart-grid: #2a2f38; --chart-market: #6f7887; } /* ── Base ────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { min-width: 320px; background: var(--paper); } body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; } button { font: inherit; color: inherit; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); } h2 { font-size: 1.45rem; } p { margin: 0; overflow-wrap: anywhere; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .skip-link { position: fixed; z-index: 100; top: 0.5rem; left: 0.5rem; padding: 0.5rem 0.75rem; color: var(--paper); background: var(--ink); transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* Etiquetas en versalitas: la forma pequeña que recorre toda la página. */ .eyebrow, .signal-label, .metric > span, .comparison-strip span, th, .mode-pill, .table-count, .legend { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .eyebrow { margin: 0 0 0.3rem; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .positive { color: var(--buy); } .negative { color: var(--sell); } /* ── Cabecera ────────────────────────────────────────────────────────────── */ .masthead { border-bottom: 1px solid var(--ink); background: var(--paper); } .masthead-inner, .page, .colophon { width: min(960px, calc(100% - 2.5rem)); margin: 0 auto; } .masthead-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0 1rem; } .brand { display: grid; gap: 0.15rem; color: var(--ink); text-decoration: none; } .brand-name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .brand-sub { color: var(--muted); font-size: 0.82rem; } .masthead-actions { display: flex; align-items: center; gap: 1rem; } .mode-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); white-space: nowrap; } .mode-pill span { width: 0.45rem; height: 0.45rem; background: var(--accent); border-radius: 50%; } .mode-pill[data-phase="trading"] span { background: var(--buy); } .refresh-control { display: grid; justify-items: end; gap: 0.2rem; } .refresh-control small { color: var(--muted); font-size: 0.68rem; } .refresh-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px; font-size: 0.82rem; cursor: pointer; } .refresh-button:hover { border-color: var(--ink); } .refresh-button:disabled { cursor: wait; opacity: 0.6; } .refresh-button svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .refresh-button[aria-busy="true"] svg { animation: spin 900ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Página ──────────────────────────────────────────────────────────────── */ .page { padding: 1.5rem 0 3rem; } .notice { padding: 0.6rem 0 0.6rem 0.9rem; border-left: 3px solid var(--wait); color: var(--ink-2); font-size: 0.86rem; } .notice strong { color: var(--ink); } .page-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 2rem 0 1rem; } .data-state { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.8rem; white-space: nowrap; } .data-state::before { width: 0.45rem; height: 0.45rem; background: var(--buy); border-radius: 50%; content: ""; } .data-state[data-kind="loading"]::before { background: var(--muted); } .data-state[data-kind="error"]::before { background: var(--sell); } .data-state[data-kind="demo"]::before { background: var(--wait); } /* ── Banda de cifras ─────────────────────────────────────────────────────── */ .summary-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); } .metric { display: grid; align-content: start; gap: 0.35rem; padding: 1rem 1.1rem 1.1rem 0; min-width: 0; } .metric + .metric { padding-left: 1.1rem; border-left: 1px solid var(--rule); } .metric strong { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .metric small { color: var(--muted); font-size: 0.78rem; line-height: 1.4; } /* ── Última señal ────────────────────────────────────────────────────────── */ .primary-signal { display: grid; gap: 0.6rem; margin: 1.5rem 0 0; padding: 1.1rem 0 1.25rem 1.25rem; border-left: 3px solid var(--wait); } .primary-signal[data-signal="BUY"] { border-left-color: var(--buy); } .primary-signal[data-signal="SELL"] { border-left-color: var(--sell); } .signal-topline, .confidence-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .signal-time, .signal-source, .confidence-row span { color: var(--muted); font-size: 0.8rem; } .signal-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .signal-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; } .signal-icon { font-family: var(--font-mono); font-size: 1.4rem; line-height: 1; color: var(--wait); } .primary-signal[data-signal="BUY"] .signal-icon, .primary-signal[data-signal="BUY"] .signal-action { color: var(--buy); } .primary-signal[data-signal="SELL"] .signal-icon, .primary-signal[data-signal="SELL"] .signal-action { color: var(--sell); } .signal-action { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wait); } .signal-main h2 { flex-basis: 100%; font-size: clamp(1.6rem, 3vw, 2.2rem); } .signal-summary { max-width: 62ch; color: var(--ink-2); } .confidence-row { margin-top: 0.4rem; } .confidence-row strong { font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; } .confidence-track { height: 3px; max-width: 24rem; background: var(--rule); } .confidence-track span { display: block; width: 0; height: 100%; background: var(--ink); transition: width 400ms ease; } .primary-signal[data-empty="true"] .signal-icon, .primary-signal[data-empty="true"] .signal-action, .primary-signal[data-empty="true"] .confidence-row, .primary-signal[data-empty="true"] .confidence-track, .primary-signal[data-empty="true"] .signal-source { display: none; } .primary-signal[data-empty="true"] .signal-main h2 { color: var(--muted); } /* ── Secciones ───────────────────────────────────────────────────────────── */ .section { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--ink); } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .section-heading > div { min-width: 0; } .table-count { white-space: nowrap; } .columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 0.8fr); gap: 0 3rem; } .side-column { display: grid; align-content: start; } .side-note { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8rem; } .side-note strong { color: var(--ink-2); } /* ── Gráfica ─────────────────────────────────────────────────────────────── */ .chart-controls { display: grid; justify-items: end; gap: 0.5rem; } .range-switch { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 2px; } .range-switch button { padding: 0.3rem 0.65rem; background: transparent; border: 0; border-right: 1px solid var(--rule-strong); color: var(--ink-2); font-size: 0.78rem; cursor: pointer; } .range-switch button:last-child { border-right: 0; } .range-switch button[aria-pressed="true"] { color: var(--paper); background: var(--ink); } .legend { display: flex; gap: 1rem; letter-spacing: 0.06em; } .legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .legend i { display: inline-block; width: 1.1rem; height: 0; border-top: 2px solid var(--accent); } .legend .legend-market { border-top: 2px dashed var(--chart-market); } .comparison-strip { display: flex; gap: 2.5rem; padding: 0.25rem 0 1rem; } .comparison-strip > div { display: grid; gap: 0.2rem; } .comparison-strip strong { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; } .chart-wrap { overflow-x: auto; } .performance-chart { display: block; width: 100%; height: auto; min-width: 480px; } .chart-grid { stroke: var(--chart-grid); stroke-width: 1; } .chart-label, .chart-date-label { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); } .chart-area-bot { fill: var(--accent); fill-opacity: 0.06; } .chart-line-bot { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } .chart-line-market { fill: none; stroke: var(--chart-market); stroke-width: 1.5; stroke-dasharray: 5 4; } .chart-point { fill: var(--accent); } .chart-point-market { fill: var(--chart-market); } .chart-note { margin-top: 0.5rem; color: var(--muted); font-size: 0.78rem; } #chart-body[data-points="single"] .comparison-strip, #chart-body[data-points="single"] .chart-wrap { display: none; } #chart-body[data-points="single"] .chart-note { margin-top: 0; padding: 0.25rem 0 0.5rem; color: var(--ink-2); font-size: 0.9rem; } .chart-empty { padding: 1.25rem 0 0.5rem; } .chart-empty strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .chart-empty p { max-width: 62ch; margin-top: 0.35rem; color: var(--ink-2); font-size: 0.9rem; } /* ── Diario de noticias ──────────────────────────────────────────────────── */ .signal-list { display: grid; } .signal-item { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.25rem 0.5rem; padding: 0.95rem 0; border-top: 1px solid var(--rule); } .signal-item:first-child { border-top: 0; } .signal-item-badge { padding-top: 0.15rem; font-family: var(--font-mono); font-size: 1rem; line-height: 1; color: var(--wait); } .signal-item[data-signal="BUY"] .signal-item-badge { color: var(--buy); } .signal-item[data-signal="SELL"] .signal-item-badge { color: var(--sell); } .signal-item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-wrap: pretty; } .signal-item h3 a { color: inherit; text-decoration: none; } .signal-item h3 a:hover { color: var(--accent); text-decoration: underline; } .signal-item-source { margin-top: 0.2rem; color: var(--muted); font-size: 0.78rem; } .signal-item-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; padding-top: 0.2rem; } .signal-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; } .signal-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: 2px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--wait); white-space: nowrap; } .signal-chip strong { color: var(--ink); font-weight: 500; } .signal-chip[data-signal="BUY"] { color: var(--buy); background: var(--buy-tint); border-color: transparent; } .signal-chip[data-signal="SELL"] { color: var(--sell); background: var(--sell-tint); border-color: transparent; } /* Señal accionable que el motor mantiene en espera (mercado cerrado, etc.): rojo perfilado, no relleno, para no confundirla con una señal de venta. */ .signal-chip-note { color: var(--sell); border-color: var(--sell); background: transparent; } .signal-chip-note[hidden] { display: none; } .signal-chip[data-status="OPEN"]::after { content: "· abierta"; color: var(--accent); } .signal-chip[data-status="CLOSED"]::after { content: "· cerrada"; color: var(--muted); } .signal-details { margin-top: 0.5rem; } .signal-details summary { display: inline-block; color: var(--accent); font-size: 0.8rem; cursor: pointer; list-style: none; } .signal-details summary::-webkit-details-marker { display: none; } .signal-details summary::before { content: "▸ "; } .signal-details[open] summary::before { content: "▾ "; } .signal-details p { max-width: 68ch; margin-top: 0.5rem; color: var(--ink-2); font-size: 0.85rem; line-height: 1.5; } .signal-details p strong { color: var(--ink); font-weight: 500; } .signal-event { padding-left: 0.75rem; border-left: 2px solid var(--rule-strong); font-style: italic; } .signal-engine { color: var(--accent); } .inline-empty, .empty-state { padding: 1rem 0; color: var(--muted); font-size: 0.88rem; } /* ── Activos con señal ───────────────────────────────────────────────────── */ .consensus-list { display: grid; } .consensus-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; align-items: baseline; padding: 0.6rem 0 0.6rem 0.75rem; border-top: 1px solid var(--rule); border-left: 3px solid var(--wait); } .consensus-item:first-child { border-top: 0; } .consensus-item[data-signal="BUY"] { border-left-color: var(--buy); } .consensus-item[data-signal="SELL"] { border-left-color: var(--sell); } .consensus-name strong { display: block; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; } .consensus-name small { display: block; overflow: hidden; color: var(--muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } .consensus-counts { display: flex; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; } .consensus-counts span[data-signal="BUY"] { color: var(--buy); } .consensus-counts span[data-signal="SELL"] { color: var(--sell); } .consensus-detail { grid-column: 1 / -1; color: var(--muted); font-size: 0.74rem; } /* ── Guía ────────────────────────────────────────────────────────────────── */ .explainer dl { display: grid; gap: 0.75rem; margin: 0; } .explainer dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.92rem; } .explainer dd { margin: 0.15rem 0 0 1.1rem; color: var(--ink-2); font-size: 0.85rem; } .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; } .dot.buy { background: var(--buy); } .dot.sell { background: var(--sell); } .dot.wait { background: var(--wait); } /* ── Registro de operaciones ─────────────────────────────────────────────── */ .engine-state { margin-top: 0.35rem; color: var(--muted); font-size: 0.8rem; } .engine-state[data-kind="error"] { color: var(--sell); } .table-wrap { overflow-x: auto; } table { width: 100%; min-width: 640px; border-collapse: collapse; } th, td { padding: 0.65rem 0.75rem 0.65rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); } th { border-bottom-color: var(--rule-strong); } td { font-size: 0.9rem; } th.num, td:nth-child(4), td:nth-child(5), td:nth-child(6) { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } td:last-child { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; } td strong { display: block; font-family: var(--font-mono); font-weight: 500; } td small { color: var(--muted); font-size: 0.76rem; } .status-chip, .side-chip { display: inline-block; padding: 0.12rem 0.45rem; border: 1px solid var(--rule-strong); border-radius: 2px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; } .status-chip.open { color: var(--accent); border-color: var(--accent); } .status-chip.closed { color: var(--ink-2); } .status-chip.cancelled { color: var(--muted); } .side-chip.long { color: var(--buy); border-color: var(--buy); } .side-chip.short { color: var(--sell); border-color: var(--sell); } .trade-reason { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.72rem; } /* ── Método y pie ────────────────────────────────────────────────────────── */ .method p { max-width: 68ch; color: var(--ink-2); font-size: 0.92rem; } .colophon { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.76rem; } .colophon a { color: inherit; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .columns { grid-template-columns: 1fr; } } @media (max-width: 640px) { .masthead-inner { align-items: flex-start; flex-direction: column; gap: 0.75rem; } .masthead-actions { width: 100%; justify-content: space-between; } .refresh-control small { display: none; } .page-heading { align-items: flex-start; flex-direction: column; gap: 0.35rem; } .summary-band { grid-template-columns: 1fr 1fr; } .metric + .metric { padding-left: 0; border-left: 0; } .metric:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--rule); } .metric:nth-child(n + 3) { border-top: 1px solid var(--rule); } .metric strong { font-size: 1.7rem; } .section-heading { align-items: flex-start; flex-direction: column; gap: 0.5rem; } .chart-controls { justify-items: start; } .comparison-strip { gap: 1.5rem; } .signal-item { grid-template-columns: 1.2rem minmax(0, 1fr); } .signal-item-meta { display: none; } .colophon { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }