/* ============================================================= styles-telas.css — TELA 1 / 2 / 3 fullscreen. Layout de CADA tela é distinto; a PALETA é padronizada por MODELO (tema): · CYBER (principal) → paleta do robô TakeM7 IA Master (azul azure + verde neon) · INSTITUCIONAL → ouro institucional · CLÁSSICO → roxo puro Todas as cores saem de variáveis --t-* trocadas pelo theme-{nome} no . ============================================================= */ /* ---------- PALETA POR MODELO (variáveis) ---------- */ /* Default = CYBER (robô MT4) */ .t-shell { --t-accent: #5BA3FF; --t-accent-rgb: 91,163,255; --t-accent2: #00E5A0; --t-accent2-rgb: 0,229,160; --t-pos: #00E5A0; --t-pos-rgb: 0,229,160; --t-neg: #E85B5B; --t-neg-rgb: 232,91,91; --t-warn: #FFA640; --t-warn-rgb: 255,166,64; --t-text: #E8F4FF; --t-dim: #7fa0cc; --t-bg1: #0c0c14; --t-bg2: #08080c; --t-bg3: #060609; } body.theme-institucional .t-shell { --t-accent: #D4AF37; --t-accent-rgb: 212,175,55; --t-accent2: #E6C766; --t-accent2-rgb: 230,199,102; --t-pos: #34D399; --t-pos-rgb: 52,211,153; --t-neg: #F87171; --t-neg-rgb: 248,113,113; --t-warn: #FBBF24; --t-warn-rgb: 251,191,36; --t-text: #EFE6C8; --t-dim: #9a8a5a; --t-bg1: #0c0f16; --t-bg2: #090b11; --t-bg3: #07090d; } /* CLÁSSICO = cores da bandeira da França (azul · branco · vermelho) */ body.theme-classico .t-shell { --t-accent: #2E6BE6; --t-accent-rgb: 46,107,230; /* azul França */ --t-accent2: #FFFFFF; --t-accent2-rgb: 255,255,255; /* branco */ --t-pos: #5B9BFF; --t-pos-rgb: 91,155,255; /* ganho = azul claro */ --t-neg: #EF4135; --t-neg-rgb: 239,65,53; /* vermelho França */ --t-warn: #FFFFFF; --t-warn-rgb: 255,255,255; --t-text: #EAF1FF; --t-dim: #8aa0c4; --t-bg1: #0a0e1a; --t-bg2: #070a14; --t-bg3: #05070f; } /* ---------- shell comum ---------- */ .t-shell { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; color: var(--t-text); background: linear-gradient(160deg, var(--t-bg1) 0%, var(--t-bg2) 60%, var(--t-bg3) 100%); } .t-head { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid rgba(var(--t-accent-rgb), 0.2); } .t-head-l { display: flex; align-items: center; gap: 10px; } .t-livedot { width: 9px; height: 9px; border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 12px var(--t-accent); animation: t-pulse 1.6s ease-in-out infinite; } .t-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; color: var(--t-text); text-shadow: 0 0 14px rgba(var(--t-accent-rgb), 0.45); } .t-head-m { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--t-dim); letter-spacing: 0.06em; } .t-back { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-decoration: none; padding: 5px 12px; border-radius: 4px; border: 1px solid rgba(var(--t-accent-rgb), 0.3); color: var(--t-text); transition: all .15s; } .t-back:hover { background: rgba(var(--t-accent-rgb), 0.12); } .t-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px; gap: 14px; } @keyframes t-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } /* ============================================================= TELA 1 · NÚCLEO NEURAL em tela cheia (só o cérebro) ============================================================= */ .t1-solo { flex: 1 1 auto; min-height: 0; display: flex; } .t1-brain-solo { flex: 1 1 auto; min-height: 0; border-radius: 10px; border: 1px solid rgba(var(--t-accent-rgb),0.16); background: rgba(0,6,14,0.45); overflow: hidden; } /* ============================================================= TELA 2 · DEEP M7 INSTITUTIONAL FLOW ============================================================= */ .t2-kpis { flex: 0 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .t2 .kpi { background: linear-gradient(180deg, rgba(var(--t-accent-rgb),0.05), rgba(var(--t-accent-rgb),0.01)); border: 1px solid rgba(var(--t-accent-rgb),0.18); border-radius: 8px; padding: 10px 12px; position: relative; overflow: hidden; } .t2 .kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--t-accent), transparent); opacity: 0.6; } .t2 .kpi-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--t-dim); text-transform: uppercase; } .t2 .kpi-v { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; color: var(--t-text); margin-top: 5px; letter-spacing: -0.01em; } .t2 .kpi-v.pos { color: var(--t-pos); } .t2 .kpi-v.neg { color: var(--t-neg); } .t2-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; } .t2-card { display: flex; flex-direction: column; min-height: 0; background: rgba(255,255,255,0.015); border: 1px solid rgba(var(--t-accent-rgb),0.14); border-radius: 10px; overflow: hidden; } .t2-card-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--t-accent); background: rgba(var(--t-accent-rgb),0.05); border-bottom: 1px solid rgba(var(--t-accent-rgb),0.12); } .t2-card-head-2 { margin-top: 0; border-top: 1px solid rgba(var(--t-accent-rgb),0.12); } .t2-card-meta { font-weight: 500; color: var(--t-dim); font-size: 10px; } .t2-blot-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .t2-blot { width: 100%; border-collapse: collapse; font-size: 11px; } .t2-blot th { position: sticky; top: 0; background: var(--t-bg1); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--t-dim); text-align: left; padding: 7px 9px; border-bottom: 1px solid rgba(var(--t-accent-rgb),0.16); } .t2-blot td { padding: 6px 9px; border-bottom: 1px solid rgba(255,255,255,0.04); } .t2-blot tbody tr:hover { background: rgba(var(--t-accent-rgb),0.04); } .t2-blot .mono { font-family: 'JetBrains Mono', monospace; } .t2-blot .strong { color: var(--t-text); font-weight: 700; } .t2-blot .dim { color: var(--t-dim); } .t2-blot .pos { color: var(--t-pos); } .t2-blot .neg { color: var(--t-neg); } .t2-empty { color: var(--t-dim); padding: 14px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .tag-side { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; } .tag-side.buy { background: rgba(var(--t-pos-rgb),0.16); color: var(--t-pos); } .tag-side.sell { background: rgba(var(--t-neg-rgb),0.16); color: var(--t-neg); } .t2-exp-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .t2-exp-bars { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: center; gap: 6px; } .t2-exp-buy-wrap { display: flex; justify-content: flex-end; } .t2-exp-buy { height: 14px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(var(--t-pos-rgb),0.2), var(--t-pos)); min-width: 2px; } .t2-exp-sell { height: 14px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--t-neg), rgba(var(--t-neg-rgb),0.2)); min-width: 2px; } .t2-exp-sym { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--t-text); } .t2-exp-foot { display: flex; justify-content: space-between; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; } .t2-exp-foot .buy { color: var(--t-pos); } .t2-exp-foot .sell { color: var(--t-neg); } .t2-exp-foot .pos { color: var(--t-pos); } .t2-exp-foot .neg { color: var(--t-neg); } .t2-strat { flex: 0 0 auto; padding: 11px 13px; display: flex; flex-direction: column; gap: 11px; } .t2-strat-top { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; } .t2-strat-top .pos { color: var(--t-pos); } .t2-strat-top .neg { color: var(--t-neg); } .t2-strat-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.05); margin: 5px 0 3px; overflow: hidden; } .t2-strat-fill { height: 100%; border-radius: 3px; } .t2-strat-sub { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--t-dim); } .t2-desk { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; } .t2-desk-item { padding-bottom: 8px; border-bottom: 1px dashed rgba(var(--t-accent-rgb),0.1); } .t2-desk-src { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; color: var(--t-accent); } .t2-desk-ttl { font-size: 11px; color: var(--t-text); opacity: 0.82; margin-top: 2px; line-height: 1.32; } .t2-tape { flex: 0 0 auto; height: 34px; border: 1px solid rgba(var(--t-accent-rgb),0.16); border-radius: 8px; background: rgba(var(--t-accent-rgb),0.03); overflow: hidden; display: flex; align-items: center; } .t2-tape-track { display: flex; gap: 22px; white-space: nowrap; animation: t2-tape-scroll 40s linear infinite; padding-left: 14px; } .t2-tape-item { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .t2-tape-sym { color: var(--t-text); font-weight: 700; } .t2-tape-side.buy { color: var(--t-pos); } .t2-tape-side.sell { color: var(--t-neg); } .t2-tape-item .pos { color: var(--t-pos); } .t2-tape-item .neg { color: var(--t-neg); } @keyframes t2-tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================= TELA 3 · BOOK MULTI-ATIVO (DOM) — todos os books lado a lado ============================================================= */ /* grid que ESTICA os cards p/ preencher a tela toda (largura E altura) de forma uniforme */ .dom-board { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: minmax(240px, 1fr); gap: 10px; } .dom-card { display: flex; flex-direction: column; min-height: 0; border: 1px solid rgba(var(--t-accent-rgb),0.18); border-radius: 9px; background: rgba(0,0,0,0.28); overflow: hidden; } .dom-card-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: rgba(var(--t-accent-rgb),0.06); border-bottom: 1px solid rgba(var(--t-accent-rgb),0.12); } .dom-card-sym { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--t-accent); letter-spacing: 0.04em; } .dom-card-net { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; } .dom-card-sub { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 10px; border-bottom: 1px solid rgba(var(--t-accent-rgb),0.08); } .dom-card-px { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--t-text); } .dom-card-pnl { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; } /* ladder ROLÁVEL (book de corretora) · linhas de altura fixa, scroll cima/baixo */ .dom-mladder { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .dom-mrow { height: 22px; display: grid; grid-template-columns: 1fr 86px 1fr 26px; align-items: center; border-bottom: 1px solid rgba(var(--t-accent-rgb),0.04); } .dom-mrow.mine { background: rgba(var(--t-accent-rgb),0.07); } /* nível com ORDEM MINHA */ .dom-mrow.cur { background: rgba(var(--t-accent-rgb),0.2); box-shadow: inset 0 0 0 1px rgba(var(--t-accent-rgb),0.45); } .dom-mbuy { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 5px; overflow: hidden; } .dom-msell { display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding-left: 5px; overflow: hidden; } .dom-mbar { height: 58%; min-width: 2px; border-radius: 2px; } .dom-bar-buy { background: linear-gradient(90deg, rgba(var(--t-pos-rgb),0.12), rgba(var(--t-pos-rgb),0.7)); } .dom-bar-sell { background: linear-gradient(90deg, rgba(var(--t-neg-rgb),0.7), rgba(var(--t-neg-rgb),0.12)); } .dom-mvol { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex: 0 0 auto; } .dom-mbuy .dom-mvol { color: var(--t-pos); } .dom-msell .dom-mvol { color: var(--t-neg); } .dom-mprice { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--t-dim); border-left: 1px solid rgba(var(--t-accent-rgb),0.1); border-right: 1px solid rgba(var(--t-accent-rgb),0.1); } .dom-mrow.mine .dom-mprice { color: var(--t-text); } .dom-mrow.cur .dom-mprice { color: var(--t-accent); font-weight: 700; } .dom-mmark { display: flex; align-items: center; justify-content: center; } .dom-mtag { font-family: 'JetBrains Mono', monospace; font-size: 7px; font-weight: 700; padding: 0 3px; border-radius: 2px; line-height: 12px; } .dom-tag-sl { background: rgba(var(--t-neg-rgb),0.25); color: var(--t-neg); } .dom-tag-tp { background: rgba(var(--t-pos-rgb),0.25); color: var(--t-pos); } .dom-empty { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--t-dim); padding: 14px 8px; text-align: center; opacity: 0.75; } .dom-mladder > .dom-empty { display: flex; align-items: center; justify-content: center; height: 100%; } /* Time & Sales · fita no rodapé */ .dom-tape-wrap { flex: 0 0 auto; display: flex; align-items: center; height: 34px; border: 1px solid rgba(var(--t-accent-rgb),0.16); border-radius: 8px; overflow: hidden; background: rgba(var(--t-accent-rgb),0.03); } .dom-tape-label { flex: 0 0 auto; padding: 0 12px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--t-accent); border-right: 1px solid rgba(var(--t-accent-rgb),0.16); align-self: stretch; display: flex; align-items: center; } .dom-tape { flex: 1 1 auto; min-width: 0; overflow: hidden; } .dom-tape-track { display: flex; gap: 20px; white-space: nowrap; animation: t2-tape-scroll 38s linear infinite; padding-left: 14px; } .dom-tape-item { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .dom-tape-sym { color: var(--t-text); font-weight: 700; } .dom-tape-px { color: var(--t-dim); } .dom-ts-arrow.buy { color: var(--t-pos); } .dom-ts-arrow.sell { color: var(--t-neg); } .dom-card-net.pos, .dom-card-pnl.pos, .dom-tape-item .pos { color: var(--t-pos); } .dom-card-net.neg, .dom-card-pnl.neg, .dom-tape-item .neg { color: var(--t-neg); } /* responsivo: empilha em telas estreitas */ @media (max-width: 1100px) { .t2-grid { grid-template-columns: 1fr; } .t2-kpis { grid-template-columns: repeat(3, 1fr); } }