/* ════════════════════════════════════════════════════════════════════════ SKINS — el tema se aplica con [data-theme] en . Cada skin sólo sobreescribe estos tokens (+ unas reglas especiales). Default = CYBERPUNK. ════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; --bg: #0a0e14; --panel: #111722; --panel2: #0d1320; --surface: #16202f; /* inputs, botones ghost, tabs, chips */ --border: #1e2a3a; --text: #c7d3e0; --muted: #6b7c93; --accent: #00e0c6; --accent2: #2bd4ff; --on-accent: #0a0e14; /* texto sobre rellenos de acento */ --green: #29d398; --red: #ff5c72; --amber: #ffc14d; --shadow: 0 2px 14px rgba(0, 0, 0, 0.45); --radius: 10px; --font: "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: "Consolas", "SF Mono", "Cascadia Code", monospace; --bg-grad: radial-gradient(1200px 600px at 70% -10%, #0e1726 0%, var(--bg) 60%); --topbar-grad: linear-gradient(90deg, rgba(0,224,198,.10) 0%, rgba(43,212,255,.04) 40%, rgba(255,193,77,.06) 100%); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-grad); color: var(--text); font: 13px/1.45 var(--font); overflow-x: hidden; /* no horizontal page scroll on any device */ -webkit-text-size-adjust: 100%; transition: background-color .25s ease, color .25s ease; } img, canvas, table { max-width: 100%; } h2 { font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); } .muted { color: var(--muted); } .small { font-size: 11px; } /* Header */ .topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; position: sticky; top: 0; z-index: 10; background: var(--topbar-grad), var(--panel2); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0,224,198,.18), 0 6px 22px rgba(0,0,0,.45); } /* Brand block: logo mark + title */ .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { position: relative; width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(145deg, #0f1a2b, #08101c); border: 1px solid rgba(0,224,198,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 0 14px rgba(0,224,198,.25); } .brand-mark b { font-size: 21px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-mark i { position: absolute; right: -5px; bottom: -5px; font-style: normal; font-size: 12px; font-weight: 800; color: #0a0e14; background: linear-gradient(135deg, var(--amber), #ff9d3d); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--panel2); box-shadow: 0 0 8px rgba(255,193,77,.5); } h1 { font-size: 18px; margin: 0; letter-spacing: 3px; font-weight: 800; background: linear-gradient(100deg, #eaf6ff 0%, var(--accent) 45%, var(--accent2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(0,224,198,.18); } .brand-pro { -webkit-text-fill-color: #0a0e14; color: #0a0e14; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 1px 6px; border-radius: 5px; font-size: 12px; letter-spacing: 2px; vertical-align: 2px; box-shadow: 0 0 12px rgba(43,212,255,.4); } .topbar-title p { margin: 3px 0 0; font-size: 10px; color: var(--accent2); letter-spacing: 3px; font-weight: 700; text-transform: uppercase; opacity: .85; } /* Mode chip (replaces the old loud warning badge) */ .mode-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .mode-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; animation: pulse-dot 1.8s ease-in-out infinite; } .mode-chip.live { color: var(--amber); background: rgba(255,193,77,.10); border: 1px solid rgba(255,193,77,.5); } .mode-chip.live .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .mode-chip.paper { color: var(--accent); background: rgba(0,224,198,.10); border: 1px solid rgba(0,224,198,.5); } .mode-chip.paper .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); } @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .topbar-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; } .stat { display: flex; flex-direction: column; line-height: 1.1; } .stat i { font-style: normal; color: var(--muted); font-size: 10px; text-transform: uppercase; } .stat b { font-size: 13px; } .badge { padding: 5px 10px; border-radius: 6px; font-weight: 700; font-size: 11px; letter-spacing: 1px; } .badge.critical { background: rgba(255,92,114,.15); color: var(--red); border: 1px solid var(--red); } .badge.warning { background: rgba(255,193,77,.13); color: var(--amber); border: 1px solid var(--amber); } .pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .pill.none { background: var(--surface); color: var(--muted); } .pill.ok { background: rgba(41,211,152,.15); color: var(--green); } .pill.bad { background: rgba(255,92,114,.15); color: var(--red); } .pill.warn { background: rgba(255,193,77,.15); color: var(--amber); } .pill.buy { background: rgba(41,211,152,.18); color: var(--green); } .pill.sell { background: rgba(255,92,114,.18); color: var(--red); } .pill.wd-ok { background: rgba(41,211,152,.15); color: var(--green); } .pill.wd-stale { background: rgba(255,193,77,.18); color: var(--amber); } .pill.wd-stop { background: rgba(155,120,220,.20); color: #b79bff; } .pill.wd-err { background: rgba(255,92,114,.18); color: var(--red); } /* Layout */ .layout { display: grid; gap: 16px; padding: 12px; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } .left-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .left-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .left-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .chart-card { display: flex; flex-direction: column; } #positions-card { display: flex; flex-direction: column; } #positions-card .collapse-body { overflow-x: auto; overscroll-behavior: contain; } @media (min-width: 1001px) { #positions-card { min-height: 100%; overflow: hidden; } #positions-card .collapse-body { flex: 1; min-height: 0; overflow-y: auto; } } @media (max-width: 1000px) { #positions-card .collapse-body { max-height: 320px; overflow-y: auto; } } /* Right column grows naturally — no internal scroll, page scrolls instead. */ .side-col { display: flex; flex-direction: column; gap: 12px; } .wide { grid-column: 1 / -1; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); } .section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .section-title .pill { margin-left: auto; } .collapse-toggle { margin-left: auto; cursor: pointer; color: var(--muted); user-select: none; width: 20px; text-align: center; } .collapsible.collapsed .collapse-body { display: none; } /* REGISTROS — pestañas (Historial / Frecuencia / Eventos) */ .reg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; } .reg-tab { background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; transition: all .15s; } .reg-tab:hover { color: var(--text); border-color: var(--accent2); } .reg-tab.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; } .reg-panel { display: none; } .reg-panel.active { display: block; } /* Guía rápida */ .guide { color: var(--text); font-size: 12px; line-height: 1.5; } .guide-intro { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: rgba(0,224,198,.06); border: 1px solid var(--border); } .guide-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .guide-list { list-style: none; margin: 0; padding: 0; } .guide-list li { margin: 0 0 7px; line-height: 1.45; } .guide-list b { color: var(--text); } .guide-list i { color: var(--accent); font-style: normal; } .guide-foot { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); font-size: 11px; } /* Changelog / Actualizaciones */ .changelog { list-style: none; margin: 0; padding: 0; } .changelog li { position: relative; padding: 0 0 12px 14px; margin: 0; border-left: 2px solid var(--border); } .changelog li:last-child { border-left-color: transparent; padding-bottom: 0; } .changelog li::before { content: ""; position: absolute; left: -5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } .changelog p { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--text); } .cl-date { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .cl-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; vertical-align: middle; } .cl-tag.feat { background: rgba(0,224,198,.15); color: var(--accent); border: 1px solid var(--accent); } .cl-tag.fix { background: rgba(255,92,114,.15); color: #ff8a9c; border: 1px solid #ff5c72; } .cl-tag.tune { background: rgba(43,212,255,.15); color: var(--accent2); border: 1px solid var(--accent2); } #liveChart { width: 100%; height: clamp(420px, 58vh, 680px); min-height: 420px; touch-action: pan-y; } #chart-overlay-info { margin: 8px 0 0; } .tf-selector { display: flex; gap: 4px; } .tf-btn { background: var(--surface); color: var(--muted); border: 1px solid var(--border); padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; } .tf-btn.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; } .chart-select { background: var(--surface); color: var(--muted); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 11px; } .chart-reset { padding: 3px 10px; font-size: 11px; line-height: 1.4; font-weight: 600; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .grid2 > div { background: var(--panel2); border-radius: 6px; padding: 6px 8px; } .grid2 > div span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; } .grid2 > div strong { font-size: 13px; } .span2 { grid-column: span 2; } .signal-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .compact-list { margin: 6px 0 0; padding-left: 16px; color: var(--amber); font-size: 11px; } /* Tables */ table { width: 100%; border-collapse: collapse; } table.compact { table-layout: fixed; } table.compact th, table.compact td { padding: 4px 6px; text-align: left; font-size: 11px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.compact th { color: var(--muted); text-transform: uppercase; font-weight: 600; } /* Stable scroll box: vertical scroll only, no layout shift on refresh. */ .log-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; overscroll-behavior: contain; } .log-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .log-controls input, .log-controls select { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 11px; } .chk { display: flex; align-items: center; gap: 4px; color: var(--muted); } /* Trade History summary */ .th-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; margin-bottom: 8px; } .th-summary > div { background: var(--panel2); border-radius: 6px; padding: 6px 8px; } .th-summary > div span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; } .th-summary > div strong { font-size: 14px; } @media (max-width: 700px) { .th-summary { grid-template-columns: repeat(3, 1fr); } } /* Trade-history pager */ .th-pager { display: inline-flex; align-items: center; gap: 6px; } .th-pager .btn { padding: 4px 9px; line-height: 1; } .th-pager .btn:disabled { opacity: .4; cursor: not-allowed; } /* Config form (compact, fits the right column) */ .config-grid { display: flex; flex-direction: column; gap: 12px; } .config-grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; } .cfg-group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 12px; background: rgba(255,255,255,.015); } .cfg-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .cfg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; } .cfg-toolbar .cfg-lock-bar { flex: 1 1 260px; margin-bottom: 0; } .cfg-help { display: block; color: var(--muted); font-size: 10px; line-height: 1.3; margin-top: 2px; } .cfg-tech { display: block; color: var(--accent); font-size: 9px; margin-top: 1px; opacity: .8; } .cfg-warnings { background: rgba(255,193,77,.08); border: 1px solid var(--amber); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; } .cfg-warnings > div { color: var(--amber); font-size: 11px; } /* Candado del panel de configuración */ .cfg-lock-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; } .cfg-lock-left { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .cfg-lock-icon { font-size: 15px; line-height: 1; } #config-card.cfg-locked .cfg-lock-bar { border-color: var(--amber); background: rgba(255,193,77,.06); } #config-card.cfg-locked .cfg-lock-left { color: var(--amber); } #config-card.cfg-locked #config-form { opacity: .55; } #control-ops-card.ops-locked .cfg-lock-bar { border-color: var(--amber); background: rgba(255,193,77,.06); } #control-ops-card.ops-locked .cfg-lock-left { color: var(--amber); } #control-ops-card.ops-locked .ops-grid { opacity: .55; } /* Operation buttons with subtext */ .opbtn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; line-height: 1.2; } .opbtn small { font-weight: 400; font-size: 9px; opacity: .85; text-transform: none; letter-spacing: 0; } .config-field { display: flex; flex-direction: column; gap: 4px; justify-content: flex-start; } .config-field label { font-size: 10px; color: var(--muted); text-transform: uppercase; line-height: 1.25; } .config-field input, .config-field select { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font-size: 12px; } .config-field.readonly input, .config-field.readonly select { opacity: .55; } /* ── Tech Matrix (columna izquierda, arriba de Canasta) ── */ #tech-matrix-inchart { margin: 0; } .tm-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; } .tm-title { font-size: 10px; letter-spacing: 1.5px; color: var(--accent2); font-weight: 700; } .tm-summary { display: flex; gap: 16px; flex-wrap: wrap; } .tm-summary > span { display: flex; flex-direction: column; line-height: 1.15; } .tm-summary i { font-size: 9px; color: var(--muted); text-transform: uppercase; font-style: normal; letter-spacing: .5px; } .tm-summary strong { font-size: 12px; } .tm-grid { display: grid; gap: 2px; } .tm-cell { height: 10px; border-radius: 2px; } .tm-head { background: transparent; color: var(--muted); font-size: 9px; height: 12px; display: flex; align-items: center; justify-content: center; } .tm-rowlabel { background: transparent; color: var(--muted); font-size: 9px; font-weight: 700; display: flex; align-items: center; } .tm-s2 { background: linear-gradient(90deg, #ff6f7f, #ff2f4f); box-shadow: 0 0 8px rgba(255,47,79,.30); } /* volatilidad extrema */ .tm-s1 { background: linear-gradient(90deg, #ffb347, #ff7a1a); box-shadow: 0 0 7px rgba(255,122,26,.26); } /* volatilidad alta */ .tm-s0 { background: linear-gradient(90deg, #d2d8e0, #aeb8c4); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } /* volatilidad normal */ .tm-sm1 { background: linear-gradient(90deg, #1e5fa8, #3aa0ff); box-shadow: 0 0 6px rgba(38,117,201,.20); } /* volatilidad baja */ .tm-sm2 { background: linear-gradient(90deg, #091524, #17385d); } /* volatilidad muy baja */ .tm-na { background: #151e2b; opacity: .55; } .tm-warn { background: #f5a142; } /* alert / spread high */ .tm-thermo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel2); } .tm-tick { min-height: 18px; display: flex; align-items: center; justify-content: center; color: #eaf6ff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px; text-shadow: 0 1px 2px rgba(0,0,0,.65); white-space: nowrap; } .tm-vlow { background: linear-gradient(90deg, #091524, #17385d); } .tm-low { background: linear-gradient(90deg, #1e5fa8, #3aa0ff); } .tm-normal { background: linear-gradient(90deg, #d2d8e0, #aeb8c4); color: #111722; text-shadow: none; } .tm-high { background: linear-gradient(90deg, #ffb347, #ff7a1a); color: #211306; text-shadow: none; } .tm-extreme { background: linear-gradient(90deg, #ff6f7f, #ff2f4f); } .tm-subtitle { margin: 10px 0 4px; color: var(--accent2); font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .trend-grid { margin-top: 2px; } .trend-s2 { background: linear-gradient(90deg, #1ee889, #00a85a); box-shadow: 0 0 7px rgba(41,211,152,.24); } .trend-s1 { background: linear-gradient(90deg, #8ee6bb, #32c987); box-shadow: 0 0 6px rgba(50,201,135,.18); } .trend-s0 { background: linear-gradient(90deg, #d2d8e0, #aeb8c4); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } .trend-sm1 { background: linear-gradient(90deg, #ffb36b, #ff7f50); box-shadow: 0 0 6px rgba(255,127,80,.18); } .trend-sm2 { background: linear-gradient(90deg, #ff6f7f, #ff2f4f); box-shadow: 0 0 8px rgba(255,47,79,.28); } .trend-na { background: #151e2b; opacity: .55; } .trend-thermo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel2); } .trend-tick { min-height: 18px; display: flex; align-items: center; justify-content: center; color: #eaf6ff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .25px; text-shadow: 0 1px 2px rgba(0,0,0,.65); white-space: nowrap; } .trend-up-strong { background: linear-gradient(90deg, #1ee889, #00a85a); } .trend-up { background: linear-gradient(90deg, #8ee6bb, #32c987); color: #082014; text-shadow: none; } .trend-neutral { background: linear-gradient(90deg, #d2d8e0, #aeb8c4); color: #111722; text-shadow: none; } .trend-down { background: linear-gradient(90deg, #ffb36b, #ff7f50); color: #211306; text-shadow: none; } .trend-down-strong { background: linear-gradient(90deg, #ff6f7f, #ff2f4f); } /* Toggle switch for boolean config fields */ .switch { position: relative; display: inline-block; width: 42px; height: 22px; flex: none; } .config-field .switch input { opacity: 0; width: 0; height: 0; position: absolute; margin: 0; padding: 0; border: none; } .switch-slider { position: absolute; inset: 0; cursor: pointer; background: #2a3647; border: 1px solid var(--border); border-radius: 22px; transition: background .15s; } .switch-slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 2px; background: #c7d3e0; border-radius: 50%; transition: transform .15s; } .switch input:checked + .switch-slider { background: var(--green); border-color: var(--green); } .switch input:checked + .switch-slider::before { transform: translateX(20px); background: #07120d; } .switch input:disabled + .switch-slider { opacity: .5; cursor: not-allowed; } /* Unified Control + Operations block (horizontal) */ .ctrl-unified { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 16px; align-items: start; } .ctrl-subtitle { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); } .ctrl-status { border-right: 1px solid var(--border); padding-right: 16px; } .ctrl-actions .ops-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @media (max-width: 900px) { .ctrl-unified { grid-template-columns: 1fr; } .ctrl-status { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 12px; } } /* Buttons */ .actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .btn { background: var(--accent); color: var(--on-accent); border: none; border-radius: 7px; padding: 8px 12px; font-weight: 700; cursor: pointer; font-size: 12px; letter-spacing: .5px; } .btn:hover { filter: brightness(1.1); } .btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn.danger { background: var(--red); color: #1a0408; } .btn:disabled { opacity: .5; cursor: not-allowed; } .stale { color: var(--amber) !important; } .hidden { display: none !important; } /* Login screen */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-wrap { width: 100%; max-width: 380px; padding: 16px; } .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 28px 26px; box-shadow: 0 0 40px rgba(0,224,198,.08), var(--shadow); display: flex; flex-direction: column; gap: 10px; } .login-brand { justify-content: center; margin-bottom: 14px; } .login-title { font-size: 20px; letter-spacing: 3px; color: var(--accent); margin: 0; } .login-sub { margin: 0 0 12px; color: var(--muted); font-size: 12px; letter-spacing: 1px; } .login-label { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: 1px; } .login-input { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 16px; letter-spacing: 4px; } .login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,224,198,.2); } .login-btn { margin-top: 8px; padding: 11px; font-size: 13px; letter-spacing: 1px; } .login-error { color: var(--red); font-size: 12px; margin: 2px 0 0; } .login-note { color: var(--muted); font-size: 10px; text-align: center; margin: 10px 0 0; letter-spacing: 1px; } @media (max-height: 820px) { #liveChart { height: clamp(360px, 52vh, 560px); min-height: 360px; } } @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } .left-secondary-grid { grid-template-columns: 1fr; } #liveChart { height: 360px; min-height: 360px; } /* Una sola columna: aplanar columnas para reordenar TODOS los bloques. Orden solicitado para movil (el encabezado va fuera de .layout, queda arriba). */ .left-col, .side-col, .left-secondary-grid, .left-stack { display: contents; } #usc-usd-card { order: 1; } #signal-card { order: 2; } #risk-card { order: 3; } .chart-card { order: 4; } #tech-matrix-card { order: 5; } #positions-card { order: 6; } #basket-card { order: 7; } #recovery-card { order: 8; } #control-ops-card { order: 9; } #config-card { order: 10; } #registros-card { order: 11; } /* Historial/Frecuencia/Eventos (pestañas) */ #info-card { order: 12; } /* Actualizaciones/Guía/Skins (pestañas) */ } /* ── Tablets / small laptops ── */ @media (max-width: 768px) { .grid2 { grid-template-columns: 1fr; } .grid2 .span2 { grid-column: span 1; } .config-grid-inner { grid-template-columns: 1fr 1fr; } .ops-grid { grid-template-columns: 1fr 1fr; } } /* ── Mobile ── */ @media (max-width: 640px) { body { font-size: 12px; } h1 { font-size: 15px; letter-spacing: 1px; } /* Header NOT fixed on mobile — frees vertical space, stops overlap. */ .topbar { position: static; padding: 8px 10px; gap: 8px 10px; } .brand { gap: 9px; } .brand-mark { width: 32px; height: 32px; border-radius: 9px; } .brand-mark b { font-size: 18px; } h1 { font-size: 15px; letter-spacing: 2px; } .brand-pro { font-size: 10px; padding: 0 5px; } .topbar-title p { font-size: 9px; letter-spacing: 2px; margin-top: 2px; } #mode-badge { font-size: 9px; padding: 4px 9px; margin-left: auto; } /* Trim header info so it is not too wide: keep only essentials. */ .topbar-stats { gap: 8px 10px; margin-left: 0; width: 100%; } .topbar-stats .stat i { font-size: 9px; } .topbar-stats .stat b { font-size: 12px; } /* Hide non-essential stats on mobile (class-based — robust to reordering). */ .topbar-stats .hide-sm { display: none; } .layout { padding: 8px; gap: 10px; } .card { padding: 10px; } #liveChart { height: 280px; min-height: 280px; } .grid2 { grid-template-columns: 1fr 1fr; } /* grid2 vuelve a 2 cols aqui: restaurar span2 (lo apago el breakpoint 768px) */ .grid2 .span2 { grid-column: span 2; } .config-grid-inner { grid-template-columns: 1fr; } .ops-grid { grid-template-columns: 1fr; } .th-summary { grid-template-columns: repeat(2, 1fr); } .log-scroll table.compact { min-width: 0; } /* Narrower tables: drop non-essential columns so width fits the screen. */ /* Events: keep Time, Sev, Message — hide Type(2), Symbol(4). */ #events-table th:nth-child(2), #events-table td:nth-child(2), #events-table th:nth-child(4), #events-table td:nth-child(4) { display: none; } /* Trade History: keep Time, Direction, Profit, Status — hide Volume(3), Open(4), Close(5), Reason(8). */ /* (la tabla vive ahora en el panel #reg-history del bloque REGISTROS) */ #reg-history th:nth-child(3), #trade-history-body td:nth-child(3), #reg-history th:nth-child(4), #trade-history-body td:nth-child(4), #reg-history th:nth-child(5), #trade-history-body td:nth-child(5), #reg-history th:nth-child(8), #trade-history-body td:nth-child(8) { display: none; } } /* KPI USC -> USD */ #usc-usd-card .kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #usc-usd-card .kpi-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; text-align: center; } #usc-usd-card .kpi-span2 { grid-column: 1 / -1; } /* Session countdown ring */ #usc-usd-card .kpi-timer { display: flex; flex-direction: column; align-items: center; } .ring-wrap { position: relative; width: 58px; height: 58px; margin-top: 4px; } .ring { width: 58px; height: 58px; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 4; } .ring-track { stroke: #2a3647; } .ring-prog { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .9s linear; } .ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: .3px; } #usc-usd-card .kpi-label { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } #usc-usd-card .kpi-usc { display: block; font-size: 18px; font-weight: 700; color: var(--text); margin-top: 4px; overflow-wrap: anywhere; } #usc-usd-card .kpi-usd { display: block; font-size: 13px; color: var(--green); margin-top: 2px; } /* ── Responsive safety (tablet / mobile / tiny phones) ── */ @media (max-width: 640px) { /* Any card content that overflows scrolls inside the card, never the page. */ .collapse-body { overflow-x: auto; } #usc-usd-card .kpi-usc { font-size: 16px; } #usc-usd-card .kpi-label { font-size: 10px; } #usc-usd-card .kpi-box { padding: 8px 9px; } .btn { padding: 9px 12px; } /* bigger tap target */ .opbtn { min-height: 44px; } } @media (max-width: 380px) { #usc-usd-card .kpi-row { grid-template-columns: 1fr; } /* one KPI per row */ .th-summary { grid-template-columns: 1fr 1fr; } } /* ════════════════════════════════════════════════════════════════════════ SKINS — overrides de tema. data-theme va en . 1 Cyberpunk = :root (default). 2 Corporate 3 Matrix 4 Retro HUD 5 System OS (data-theme="mac") 6 Gothic (data-theme="dracula") ════════════════════════════════════════════════════════════════════════ */ /* 2 ── CORPORATIVA: sobria, azul formal, sin neón ───────────────────────── */ [data-theme="corporate"] { --bg: #16181b; --panel: #1e2125; --panel2: #25292d; --surface: #2d3237; --border: #3a3f45; --text: #e4e6e9; --muted: #9aa0a6; --accent: #ff8c32; --accent2: #ffb066; --on-accent: #1a1206; --green: #5bc47a; --red: #e8635f; --amber: #ffb74d; --shadow: 0 2px 12px rgba(0,0,0,.4); --radius: 8px; --bg-grad: linear-gradient(180deg, #191c1f 0%, #131517 100%); --topbar-grad: linear-gradient(90deg, rgba(255,140,50,.08) 0%, rgba(255,140,50,0) 60%); } [data-theme="corporate"] .topbar { box-shadow: 0 1px 0 rgba(255,140,50,.16), 0 4px 16px rgba(0,0,0,.45); } [data-theme="corporate"] h1 { text-shadow: none; } /* 3 ── MATRIX: terminal verde fósforo + lluvia binaria (estilo OMEGAOBFVG) ─ */ [data-theme="matrix"] { --bg: #020703; --panel: rgba(3,16,8,.86); --panel2: rgba(5,22,11,.9); --surface: rgba(0,200,83,.12); --border: rgba(0,220,90,.30); --text: #d6ffe2; --muted: #5fbf7e; --accent: #00e676; --accent2: #6bffab; --on-accent: #021a0c; --green: #19d66b; --red: #ff3157; --amber: #caff4d; --shadow: 0 0 18px rgba(0,230,118,.14); --radius: 4px; --font: var(--font-mono); --bg-grad: #020703; --topbar-grad: linear-gradient(90deg, rgba(0,230,118,.12) 0%, rgba(0,230,118,0) 60%); } [data-theme="matrix"] body { text-shadow: 0 0 4px rgba(0,230,118,.40); } [data-theme="matrix"] h1 { text-shadow: 0 0 14px rgba(0,230,118,.6); } /* lluvia binaria DETRÁS del contenido (z negativo) */ [data-theme="matrix"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .55; background-repeat: repeat; background-size: 480px 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160'%3E%3Cg fill='%2300ff6a' fill-opacity='0.22' font-family='monospace' font-size='14'%3E%3Ctext x='0' y='16'%3E01101001 00110101 01001101 10100110%3C/text%3E%3Ctext x='0' y='44'%3E11001010 01010111 00101100 10101001%3C/text%3E%3Ctext x='0' y='72'%3E00110110 10100101 01011101 11100100%3C/text%3E%3Ctext x='0' y='100'%3E01010100 11001101 00110101 01001010%3C/text%3E%3Ctext x='0' y='128'%3E10101001 01001110 00110101 11101010%3C/text%3E%3Ctext x='0' y='156'%3E01101001 00110101 01001101 10100110%3C/text%3E%3C/g%3E%3C/svg%3E"); } /* scanlines + glow superior + viñeta (encima de la lluvia, debajo del contenido) */ [data-theme="matrix"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0,255,106,.05) 1px, transparent 1px), radial-gradient(circle at 50% 0%, rgba(0,255,106,.16), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.5)); background-size: 100% 26px, 100% 100%, 100% 100%; } /* 4 ── RETRO: terminal HUD cyan (estilo FLUIDTRADES), scanlines CRT encima ── */ [data-theme="retro"] { --bg: #050810; --panel: #0a1018; --panel2: #0f1822; --surface: #0a2a2a; --border: rgba(0,255,225,.34); --text: #a0e6e0; --muted: #3a6e7e; --accent: #00ffe1; --accent2: #7fffd4; --on-accent: #021014; --green: #00ff9d; --red: #ff3366; --amber: #ffaa00; --shadow: 0 0 22px rgba(0,255,225,.12); --radius: 0; --font: var(--font-mono); --bg-grad: #050810; --topbar-grad: linear-gradient(90deg, rgba(0,255,225,.10) 0%, rgba(0,255,225,0) 60%); } [data-theme="retro"] * { border-radius: 0 !important; } [data-theme="retro"] body { letter-spacing: .02em; text-shadow: 0 0 3px rgba(0,255,225,.25); } [data-theme="retro"] h1, [data-theme="retro"] h2 { letter-spacing: 2px; } /* scanlines CRT ENCIMA de todo (z alto, no bloquea clics) */ [data-theme="retro"] body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,255,225,.035) 0 2px, transparent 2px 4px); } /* viñeta CRT encima */ [data-theme="retro"] body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at center, transparent 56%, rgba(0,0,0,.55) 100%); } /* ── Elementos HUD compartidos (matrix + retro): línea-acento estática + corner-tick. La scan-line ANIMADA se eliminó: el movimiento se sentía como "refresh/blinking" y en móvil disparaba el scroll. Queda una línea fija, sin animación. */ [data-theme="matrix"] .topbar, [data-theme="retro"] .topbar { position: relative; } [data-theme="matrix"] .topbar::after, [data-theme="retro"] .topbar::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent), transparent); } [data-theme="matrix"] .card, [data-theme="retro"] .card { position: relative; } [data-theme="matrix"] .card::after, [data-theme="retro"] .card::after { content: ""; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; pointer-events: none; background: var(--accent); box-shadow: 0 0 6px var(--accent); } /* 5 ── SYSTEM OS: claro, system font, suave y redondeado ────────────────── */ [data-theme="mac"] { color-scheme: light; --bg: #aeb8c4; --panel: #d8dee6; --panel2: #cfd6df; --surface: #bec7d1; --border: #aab4c0; --text: #1d1d1f; --muted: #535b66; --accent: #0a84ff; --accent2: #0071e3; --on-accent: #ffffff; --green: #168a3a; --red: #c92a2a; --amber: #b76a00; --shadow: 0 4px 16px rgba(0,0,0,.12); --radius: 12px; --font: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --bg-grad: linear-gradient(180deg, #bac3cf 0%, #a9b4c1 100%); --topbar-grad: linear-gradient(90deg, rgba(10,132,255,.05) 0%, rgba(10,132,255,0) 60%); } [data-theme="mac"] .topbar { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06); backdrop-filter: saturate(1.4) blur(8px); } [data-theme="mac"] h1 { text-shadow: none; } [data-theme="mac"] .brand-mark { background: linear-gradient(145deg, #cbd3dd, #b8c2ce); border-color: #a6b0bd; box-shadow: none; } /* 6 ── GOTHIC: morado/rosa sobre gris-violáceo oscuro ───────────────────── */ [data-theme="dracula"] { --bg: #1a1b24; --panel: #282a36; --panel2: #21222c; --surface: #343746; --border: #44475a; --text: #f8f8f2; --muted: #8a8fa3; --accent: #bd93f9; --accent2: #ff79c6; --on-accent: #14151d; --green: #50fa7b; --red: #ff5555; --amber: #f1fa8c; --shadow: 0 4px 18px rgba(0,0,0,.45); --radius: 10px; --bg-grad: radial-gradient(1100px 520px at 72% -12%, #322b4d 0%, #17181f 60%); --topbar-grad: linear-gradient(90deg, rgba(189,147,249,.12) 0%, rgba(255,121,198,.05) 45%, rgba(189,147,249,0) 100%); } [data-theme="dracula"] h1 { text-shadow: 0 0 16px rgba(189,147,249,.3); } [data-theme="dracula"] .topbar { box-shadow: 0 1px 0 rgba(189,147,249,.22), 0 6px 22px rgba(0,0,0,.5); } /* ── Fichas selectoras de skin (pestaña 🎨 Skins) ───────────────────────── */ .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .skin-card { display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px; transition: transform .12s, border-color .15s, box-shadow .15s; } .skin-card:hover { transform: translateY(-2px); border-color: var(--accent2); } .skin-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .skin-swatch { display: flex; height: 34px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); } .skin-swatch span { flex: 1; } .skin-name { font-size: 12px; font-weight: 700; } .skin-name .skin-check { color: var(--accent); margin-left: 4px; } .skin-desc { font-size: 10px; color: var(--muted); line-height: 1.3; } /* Los overlays position:fixed (lluvia binaria / scanlines / viñeta) de Matrix y Retro repintan al mostrarse/ocultarse la barra del navegador y se sienten como un "refresh" que mueve el scroll. Se desactivan en móvil Y modos responsivos (≤1000px = layout de una columna): la paleta del tema se conserva, solo se quita el efecto de fondo. En escritorio amplio (>1000px) quedan estáticos. */ @media (max-width: 1000px) { [data-theme="matrix"] body::before, [data-theme="matrix"] body::after, [data-theme="retro"] body::before, [data-theme="retro"] body::after { display: none !important; } }