/* Tema ESCURO (default histórico — nenhuma mudança pra quem nunca escolheu tema). O claro é opt-in via [data-theme="light"] no , emitido pelo servidor a partir da preferência da conta (perfil > Aparência; ver page_top() em auth.php e o bloco de em index.php). Sem atributo = escuro, sempre — não há detecção de prefers-color-scheme aqui: o toggle é sempre explícito, pra não fingir "sistema" quando na verdade é só o valor salvo em user_prefs.theme (ou a ausência dele). */ :root { --bg: #06080d; --bg-soft: #0b0f18; --panel: rgba(18, 24, 38, 0.65); --panel-border: rgba(120, 140, 180, 0.14); --text: #e8edf7; --text-dim: #8893a8; --accent: #00ffa3; --accent-soft: rgba(0, 255, 163, 0.12); --buy: #2ecc71; --sell: #ff4d6d; --patrimonio: #b892ff; --btc: #f7931a; --eth: #8a92ff; --sol: #19f5b0; --xrp: #ff5c8a; /* validado contra laranja/violeta/verde (CVD); azul colidia com o ETH */ --warn: #ffb020; /* linhas/bordas de gráfico (lightweight-charts, SVG de projeção) e "superfícies" neutras (input, hover de botão/linha) — tokens à parte de --panel-border/--accent pra poder inverter de "branco sobre escuro" pra "preto sobre claro" sem herdar semântica de cor (borda de painel, marca). */ --chart-grid: rgba(255, 255, 255, 0.04); --chart-border: rgba(255, 255, 255, 0.08); --surface: rgba(255, 255, 255, 0.045); --surface-strong: rgba(255, 255, 255, 0.08); --radius: 16px; font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif; } /* Tema CLARO. As cores de marca/status (accent, buy, sell, patrimonio, btc, eth, sol, warn) foram escurecidas em relação ao escuro — no dark elas são texto claro sobre painel escuro (alto brilho == contraste); em texto sobre painel/bg quase-branco o MESMO tom vira baixo contraste (ex.: --accent #00ffa3 em texto sobre branco é quase ilegível). Onde a cor só aparece como tinta translúcida (badges, .mov-tag, .ref-badge) o literal rgba(...) continua fixo nos dois temas — a tinta em alpha baixo funciona igual sobre fundo escuro OU claro; só o texto sólido precisava do tom mais escuro. */ :root[data-theme="light"] { --bg: #eef1f7; --bg-soft: #ffffff; --panel: rgba(255, 255, 255, 0.78); --panel-border: rgba(15, 23, 42, 0.10); --text: #131a26; --text-dim: #5b6472; --accent: #00a876; --accent-soft: rgba(0, 168, 118, 0.12); --buy: #1f9d58; --sell: #d63157; --patrimonio: #7c4fe0; --btc: #b06a08; --eth: #5b63d9; --sol: #0aa876; --xrp: #c9245a; --warn: #b3790a; --chart-grid: rgba(15, 23, 42, 0.06); --chart-border: rgba(15, 23, 42, 0.12); --surface: rgba(15, 23, 42, 0.035); --surface-strong: rgba(15, 23, 42, 0.07); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); } body { position: relative; padding: 28px 32px 64px; background: radial-gradient(1200px 600px at 15% -10%, rgba(0, 255, 163, 0.08), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(247, 147, 26, 0.08), transparent 55%), var(--bg); } .bg-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(120, 160, 220, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 220, 0.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 0%, black, transparent 75%); } .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .brand { display: flex; align-items: center; gap: 14px; } /* A marca (assets/logo.svg, emitida por brand_mark() no config.php). Era um glifo de texto (◈) tingido por --accent; virou um ícone com cores PRÓPRIAS, idênticas nos dois temas — é o mesmo arquivo do favicon, que aparece sobre a aba do navegador e não sobre o painel, então não pode seguir o tema daqui. O border-radius repete o rx do SVG só pra que a sombra acompanhe a silhueta; quem desenha o canto é o próprio arquivo. */ .brand-mark { width: 34px; height: 34px; flex: none; border-radius: 27%; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .brand-mark--sm { width: 26px; height: 26px; } .brand h1 { margin: 0; font-size: 22px; letter-spacing: 0.02em; } .subtitle { margin: 2px 0 0; color: var(--text-dim); font-size: 13px; } .status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; background: var(--panel); border: 1px solid var(--panel-border); padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(10px); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 0 transparent; } .dot.live { background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: pulse 1.8s infinite; } .dot.err { background: var(--sell); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 163, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(0, 255, 163, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 163, 0); } } .sep { opacity: 0.4; } .loading, .error-banner { color: var(--text-dim); font-family: monospace; } .error-banner { border: 1px solid rgba(255, 77, 109, 0.4); background: rgba(255, 77, 109, 0.08); color: var(--sell); padding: 16px 18px; border-radius: var(--radius); white-space: pre-wrap; } /* 5 cards de resultado (cofre · ROI do cofre · patrimônio · ROI do patrimônio · APR). O minmax menor que o das demais grades é o que permite os 5 lado a lado em telas largas; abaixo disso o auto-fit quebra em 3+2 sozinho. */ .summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin-bottom: 24px; } /* --- tooltip de card ("i" no canto superior direito) ---------------------- Os textos explicativos saíram do corpo dos cards (que agora mostram só NÚMERO) e abrem neste balão ao clique do ícone. Ver INFO_TEXT/infoBtn no app.js. O ícone é `position:absolute` no canto do card e precisa de z-index: os SVGs decorativos dos cards de resumo ocupam justamente aquele canto — eles são `pointer-events:none`, então não roubam o clique, mas passariam por cima do botão sem isto. */ .card-info { position: absolute; top: 10px; right: 10px; z-index: 3; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--panel-border); border-radius: 999px; background: var(--surface); color: var(--text-dim); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.15s, color 0.15s, border-color 0.15s; } .card-info:hover, .card-info:focus-visible, .card-info[aria-expanded="true"] { opacity: 1; color: var(--text); border-color: var(--text-dim); background: var(--surface-strong); } /* variante inline: seções que vivem DENTRO de um card e têm explicação própria — o canto do card já pertence à outra metade. `margin-left:auto` o joga pro fim da linha, que é o "canto" daquela seção. (Sem uso desde que o seletor de regime saiu do card Regime, 20/09/2026; fica pra quem precisar.) */ .card-info.inline { position: static; margin-left: auto; } /* O balão vive no , com position:fixed: `.stat-card` é overflow:hidden e cortaria qualquer filho; fixed também o mantém acima dos gráficos. Fundo OPACO (--bg-soft, não --panel, que é translúcido) — texto sobre o card de trás seria ilegível. */ .info-pop { position: fixed; z-index: 60; max-width: calc(100vw - 24px); padding: 13px 15px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--panel-border); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85); color: var(--text-dim); font-size: 12.5px; line-height: 1.55; } .info-pop[hidden] { display: none; } .info-pop p { margin: 0; } .info-pop p + p { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--panel-border); } .card { position: relative; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 18px 20px; backdrop-filter: blur(14px); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.7); } .stat-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; } .stat-card .value { font-family: "JetBrains Mono", Consolas, monospace; font-size: 26px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; } .stat-card .value small { font-size: 13px; color: var(--text-dim); font-weight: 400; } .stat-card .value .sats { font-size: 15px; font-weight: 400; color: var(--text-dim); letter-spacing: 0.02em; } .stat-card .hint { margin-top: 6px; font-size: 12px; color: var(--text-dim); } /* taxas pagas, logo abaixo do "≈ X USDC" do Patrimônio: colada nele e um tom abaixo — é informação de apoio, não um segundo número do card */ .stat-card .hint.pat-fees { margin-top: 2px; font-size: 11px; opacity: .85; } .stat-card .hint.pat-fees[hidden] { display: none; } .stat-card.btc .value { color: var(--btc); } .stat-card.btc .value small, .stat-card.btc .value .sats { color: var(--btc); } .stat-card.estoque .value { color: var(--accent); } .stat-card.patrimonio .value { color: var(--patrimonio); } .stat-card.potencial .value { color: #ffd76a; } .stat-card.apr .value { color: var(--buy); } /* cards de ROI: a cor definitiva vem do sinal (setRoiCard), estas são só o estado "—" antes de haver número. */ .stat-card.roi-cofre .value { color: var(--btc); } .stat-card.roi-patrimonio .value { color: var(--patrimonio); } /* moedas de bitcoin empilhadas no card do cofre */ .stat-card.btc { position: relative; overflow: hidden; padding-right: 128px; } .stat-card.btc .label, .stat-card.btc .value, .stat-card.btc .hint { position: relative; z-index: 1; } .vault-coins { position: absolute; right: 6px; bottom: 2px; width: 128px; height: auto; pointer-events: none; filter: drop-shadow(0 6px 16px rgba(247, 147, 26, 0.35)); } @media (max-width: 520px) { .stat-card.btc { padding-right: 20px; } .vault-coins { width: 86px; opacity: 0.35; } } /* mesmos ícones decorativos nos demais cards de resumo */ .stat-card.estoque, .stat-card.patrimonio, .stat-card.potencial, .stat-card.roi, .stat-card.apr { position: relative; overflow: hidden; } .stat-card.estoque .label, .stat-card.estoque .value, .stat-card.estoque .hint, .stat-card.patrimonio .label, .stat-card.patrimonio .value, .stat-card.patrimonio .hint, .stat-card.potencial .label, .stat-card.potencial .value, .stat-card.potencial .hint, .stat-card.roi .label, .stat-card.roi .value, .stat-card.roi .hint, .stat-card.apr .label, .stat-card.apr .value, .stat-card.apr .hint { position: relative; z-index: 1; } .stat-deco { position: absolute; right: 6px; bottom: 0; height: auto; pointer-events: none; } .stat-card.estoque { padding-right: 116px; } .stat-card.patrimonio { padding-right: 122px; } .stat-card.potencial { padding-right: 92px; } .stat-card.roi { padding-right: 84px; } .stat-card.apr { padding-right: 124px; } .vault-scale { width: 108px; filter: drop-shadow(0 6px 14px rgba(0, 255, 163, 0.30)); } .vault-bank { width: 118px; filter: drop-shadow(0 6px 14px rgba(184, 146, 255, 0.34)); } .vault-hourglass { width: 80px; right: 12px; filter: drop-shadow(0 6px 14px rgba(255, 215, 106, 0.34)); } .vault-gauge { width: 120px; filter: drop-shadow(0 6px 14px rgba(46, 204, 113, 0.32)); } /* seta de tendência dos dois cards de ROI (mesmo motivo, cor por card) */ .vault-trend { width: 76px; right: 8px; bottom: 6px; opacity: 0.9; } .stat-card.roi-cofre .vault-trend { filter: drop-shadow(0 6px 14px rgba(247, 147, 26, 0.32)); } .stat-card.roi-patrimonio .vault-trend { filter: drop-shadow(0 6px 14px rgba(184, 146, 255, 0.32)); } @media (max-width: 520px) { .stat-card.estoque, .stat-card.patrimonio, .stat-card.potencial, .stat-card.roi, .stat-card.apr { padding-right: 20px; } .vault-scale, .vault-bank, .vault-hourglass, .vault-gauge, .vault-trend { opacity: 0.35; } .vault-scale { width: 74px; } .vault-bank { width: 82px; } .vault-hourglass { width: 56px; } .vault-gauge { width: 80px; } .vault-trend { width: 58px; } } /* "Composição do patrimônio": estoque atual de BTC/ETH/SOL/USDC — detalhamento do card Patrimônio, largura cheia (as 4 linhas não cabem nos 212px do card estreito do summary-row). BTC e USDC somam giro + cofre (a segunda linha detalha os dois); ETH/SOL mostram preço médio da grade, que não tem cofre próprio. */ .holdings-card { margin-bottom: 24px; } .holdings-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 14px; } .holdings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } .hold-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--panel-border); border-radius: 12px; } .hold-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: #04150d; } .hold-btc { background: linear-gradient(160deg, #ffd24a, var(--btc)); } .hold-eth { background: linear-gradient(160deg, #c7ccff, var(--eth)); } .hold-sol { background: linear-gradient(160deg, #8ffddb, var(--sol)); } .hold-xrp { background: linear-gradient(160deg, #ffb3c7, var(--xrp)); } .hold-usdc { background: linear-gradient(160deg, #cfe0ff, #2775ca); } .hold-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hold-sym { font-size: 13px; font-weight: 600; } .hold-avg { font-size: 11px; color: var(--text-dim); font-family: "JetBrains Mono", Consolas, monospace; line-height: 1.4; /* "giro X · cofre Y" (BTC/USDC) costuma passar do que cabe numa linha só ao lado do estoque total — deixa quebrar em vez de truncar, os dois números do detalhamento importam igual. */ white-space: normal; overflow-wrap: break-word; } .hold-qty { flex: 0 0 auto; align-self: flex-start; font-family: "JetBrains Mono", Consolas, monospace; font-size: 14px; font-weight: 600; text-align: right; } /* linha do meio, 3 colunas: a pilha estreita (capital de giro + USDC potencial, métricas de apoio) e, ao lado, Regime e Evolução dividindo o resto da largura. Cada um daqueles dois ocupava uma faixa inteira sozinho e ficava grande demais pro que mostra; juntos, cada meia largura ainda cabe o velocímetro (300px) e o gráfico sem apertar. */ .mid-row { display: grid; grid-template-columns: minmax(220px, 280px) 1fr 1fr; gap: 16px; margin-bottom: 24px; align-items: stretch; } .mid-row > .card { margin: 0; } /* os dois cards estreitos empilhados numa coluna só */ .mid-stack { display: flex; flex-direction: column; gap: 16px; } .mid-stack > .card { margin: 0; flex: 1 1 auto; } .pot-inline { display: flex; flex-direction: column; justify-content: flex-start; } @media (max-width: 1100px) { /* Regime e Evolução seguem lado a lado (é o ponto da linha); quem sai da coluna é a pilha, que vira uma faixa própria com os dois lado a lado. */ .mid-row { grid-template-columns: 1fr 1fr; } .mid-row > .mid-stack { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .mid-stack > .card { flex: 1 1 220px; } } @media (max-width: 860px) { .mid-row { grid-template-columns: 1fr; } } .assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; } .asset-card { padding: 0; overflow: hidden; } .asset-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px 14px; border-bottom: 1px solid var(--panel-border); } .asset-name { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: inherit; text-decoration: none; } .asset-name:hover { text-decoration: underline; } .asset-dot { width: 10px; height: 10px; border-radius: 50%; } .asset-price { text-align: right; font-family: "JetBrains Mono", Consolas, monospace; } .asset-price .px { font-size: 20px; font-weight: 600; } .asset-price .pnl { font-size: 12px; margin-top: 2px; } .pnl.up { color: var(--buy); } .pnl.down { color: var(--sell); } .pnl.flat { color: var(--text-dim); } .stale-tag { font-size: 10px; color: var(--warn); border: 1px solid rgba(255, 176, 32, 0.4); border-radius: 6px; padding: 1px 6px; margin-left: 6px; } .asset-body { padding: 16px 20px; } .chart { width: 100%; height: 230px; margin: 4px 0 14px; } .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; font-size: 13px; margin-bottom: 14px; } .metric .k { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .metric .v { font-family: "JetBrains Mono", Consolas, monospace; font-size: 14px; margin-top: 2px; } .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .badge { font-size: 11px; font-family: "JetBrains Mono", Consolas, monospace; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--text-dim); } .badge.buy { color: var(--buy); border-color: rgba(46, 204, 113, 0.35); background: rgba(46, 204, 113, 0.08); } .badge.sell { color: var(--sell); border-color: rgba(255, 77, 109, 0.35); background: rgba(255, 77, 109, 0.08); } .badge.rescale { color: var(--warn); border-color: rgba(255, 176, 32, 0.35); background: rgba(255, 176, 32, 0.08); } .pool-bar { height: 6px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; margin-top: 4px; } .pool-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #00c2ff); } .potential { border-top: 1px solid var(--panel-border); padding-top: 12px; font-size: 13px; color: var(--text-dim); } .potential strong { color: var(--text); font-family: "JetBrains Mono", Consolas, monospace; } .chart-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .chart-toolbar .ct-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .chart-toolbar .ct-sep { color: var(--text-dim); opacity: 0.5; } .ct-group { display: inline-flex; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 3px; backdrop-filter: blur(10px); } .ct-group button { border: 0; background: transparent; color: var(--text-dim); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s; } .ct-group button:hover { color: var(--text); } .ct-group button.active { background: var(--accent-soft); color: var(--accent); } .pnl-card { margin-bottom: 24px; } .pnl-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .pnl-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .pnl-legend { display: flex; gap: 18px; font-size: 12px; color: var(--text-dim); } .leg-item { display: flex; align-items: center; gap: 7px; } .leg-line { display: inline-block; width: 18px; height: 3px; border-radius: 2px; } .pnl-chart { width: 100%; height: 200px; } .pnl-empty { display: flex; align-items: center; justify-content: center; height: 80px; color: var(--text-dim); font-size: 13px; } /* card de projeção de crescimento ("Forecast"): controles no cabeçalho, número em destaque à esquerda e a curva sintética ocupando o resto da largura */ .forecast-card { margin-bottom: 24px; } .fc-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; /* o ícone de tooltip mora no canto superior direito do card, e os controles chegam até lá — sem a folga, o grupo "moeda" passaria por baixo dele. */ padding-right: 26px; } .fc-heading { display: flex; flex-direction: column; gap: 4px; } .fc-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } /* cinco grupos de controle: com este número, cada um precisa do seu rótulo pra ser legível ("taxa", "aportes", "juros", "prazo", "moeda") */ .fc-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; } .fc-ctl { display: flex; flex-direction: column; gap: 4px; } .fc-ctl-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); opacity: 0.7; padding-left: 4px; } /* taxa sem dado (CAGR fora do ar, conta sem APR) e "com aportes" sem cadência estimável: fica visível mas inerte, em vez de sumir e mudar o layout */ .ct-group button:disabled { opacity: 0.35; cursor: not-allowed; } .ct-group button:disabled:hover { color: var(--text-dim); } /* aporte mensal: nasce com a média observada e é editável ("e se eu aportasse US$ 500/mês?"). Mesma pílula dos ct-group, pra ler como parte do controle. */ .fc-dep-row { display: flex; align-items: center; gap: 6px; } .fc-dep-input { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(10px); } .fc-dep-input input { width: 74px; border: 0; background: transparent; color: var(--text); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; text-align: right; padding: 2px 0; outline: none; } .fc-dep-input input:disabled { opacity: 0.35; } .fc-dep-input input:focus { color: var(--accent); } .fc-dep-cur, .fc-dep-per { font-size: 11px; color: var(--text-dim); font-family: "JetBrains Mono", Consolas, monospace; } .fc-dep-reset { border: 0; background: transparent; color: var(--text-dim); font-size: 13px; line-height: 1; padding: 2px 3px; cursor: pointer; border-radius: 999px; } .fc-dep-reset:hover { color: var(--accent); } .fc-body { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 20px; align-items: center; } .fc-chart-wrap { display: flex; flex-direction: column; gap: 8px; } .fc-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11.5px; color: var(--text-dim); justify-content: flex-end; } .fc-leg-dash { background: repeating-linear-gradient(90deg, var(--text-dim) 0 5px, transparent 5px 9px); } .fc-headline .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; } .fc-value { font-family: "JetBrains Mono", Consolas, monospace; font-size: 30px; font-weight: 600; color: var(--patrimonio); display: flex; align-items: baseline; gap: 6px; line-height: 1.1; } .fc-value .sats { font-size: 17px; font-weight: 400; color: var(--text-dim); } .fc-value small { font-size: 13px; font-weight: 400; color: var(--text-dim); } .fc-mult { margin-top: 6px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 14px; color: var(--accent); } /* múltiplo do patrimônio isolado: mesma linha, peso menor — é o contraponto ao múltiplo misturado, não uma métrica concorrente */ .fc-mult-solo { margin-left: 8px; font-size: 13px; color: var(--text-dim); } .fc-note { margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.5; } .fc-warn { margin-top: 8px; font-size: 12px; color: var(--warn); line-height: 1.5; } .fc-chart { width: 100%; height: 150px; } .fc-chart svg { width: 100%; height: 100%; display: block; } /* marcos de 1/5/10 anos: também servem de atalho pro seletor de horizonte */ .fc-milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; } .fc-ms { display: flex; flex-direction: column; gap: 4px; text-align: left; background: rgba(120, 140, 180, 0.06); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: inherit; transition: background 0.15s, border-color 0.15s; } .fc-ms:hover { background: rgba(120, 140, 180, 0.12); } .fc-ms.active { border-color: rgba(184, 146, 255, 0.55); background: rgba(184, 146, 255, 0.12); } .fc-ms-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .fc-ms-v { font-family: "JetBrains Mono", Consolas, monospace; font-size: 15px; color: var(--text); } .fc-ms-v small { font-size: 11px; color: var(--text-dim); } .fc-disclaimer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); font-size: 11.5px; color: var(--text-dim); line-height: 1.6; opacity: 0.85; } @media (max-width: 760px) { .fc-body { grid-template-columns: 1fr; } .fc-chart { height: 120px; } } .trades-card { margin-top: 24px; } .trades-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .trades-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .trades-table-wrap { overflow-x: auto; } .trades-table { width: 100%; border-collapse: collapse; font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; white-space: nowrap; } .trades-table th { text-align: left; padding: 6px 12px 8px; color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--panel-border); } .trades-table td { padding: 8px 12px; border-bottom: 1px solid rgba(120, 140, 180, 0.08); } .trades-table tbody tr:last-child td { border-bottom: none; } .trades-table tbody tr:hover { background: var(--surface); } .trades-table .asset-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .trades-empty { display: flex; align-items: center; justify-content: center; height: 60px; color: var(--text-dim); font-size: 13px; } /* pílula de tipo de movimentação (card "Movimentações") */ .mov-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; } .mov-tag.deposit { background: rgba(90, 160, 255, 0.14); color: var(--accent); } .mov-tag.vault { background: rgba(247, 147, 26, 0.14); color: var(--btc); } .mov-tag.initial { background: rgba(184, 146, 255, 0.14); color: var(--patrimonio); } .mov-tag.total { background: var(--surface-strong); color: var(--text); } /* varredura de lucro -> BTC: mesma família de cor do DCA (as duas são BTC entrando no cofre) mas com peso e borda próprios — acumular BTC é o objetivo da ferramenta, e a linha não pode ler como mais um movimento de caixa. O rgba fixo vale nos dois temas, como o resto das pílulas deste arquivo. */ /* tinta de fundo bem leve na linha inteira, pra o destaque sobreviver a uma varredura vertical da tabela (a pílula sozinha só se vê ao ler a coluna) */ /* 1ª linha fixa do card "Movimentações": o total já depositado. Fundo próprio e borda mais forte embaixo pra ler como cabeçalho de resumo, não como mais um movimento da lista. O rgba fixo funciona nos dois temas (alpha baixo). */ .mov-total td { background: rgba(127, 127, 127, 0.08); font-weight: 600; border-bottom: 1px solid var(--chart-border); } /* ---- aporte simulado: link no topbar + modal (só contas DEMO) ------------- */ .dash-flash { max-width: 1180px; margin: 16px auto 0; } /* link "aporte" na nav — destaque leve (é uma ação, não navegação) */ .nav-aporte { color: var(--accent) !important; font-weight: 600; } .aporte-modal { position: relative; width: 100%; max-width: 420px; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85); padding: 26px 24px 24px; } .aporte-modal-title { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 10px; } .demo-pill { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); } .aporte-modal-hint { margin: 0 0 18px; font-size: 13px; color: var(--text-dim); } .aporte-modal-form label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; } .aporte-input-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .aporte-currency { color: var(--text-dim); font-size: 15px; } .aporte-input-row input { flex: 1; padding: 10px 12px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; color: var(--text); font: inherit; font-size: 16px; } .aporte-modal-form .btn-primary { width: 100%; } .sim-amount { width: 82px; } .trades-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .trades-pg-btn { background: var(--surface); border: 1px solid var(--panel-border); color: var(--text-dim); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .trades-pg-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-strong); } .trades-pg-btn:disabled { opacity: 0.4; cursor: default; } .trades-page-info { font-size: 12px; color: var(--text-dim); font-family: "JetBrains Mono", Consolas, monospace; } .footer { margin-top: 36px; text-align: center; font-size: 12px; color: var(--text-dim); } /* Termos de uso · Política de privacidade — em TODO rodapé (footer_links()). */ .footer-legal { display: block; margin-top: 6px; } .footer a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; } .footer a:hover { color: var(--accent); } @media (max-width: 480px) { body { padding: 18px; } .metrics-grid { grid-template-columns: 1fr 1fr; } } /* --- Card "Momentum de mercado" (Kaufman ER) ------------------------------- Velocímetro à esquerda, leitura à direita. Em telas estreitas as duas metades empilham (o arco tem largura mínima própria — espremê-lo abaixo de ~260px deixa os rótulos das pontas ilegíveis). Cores: as faixas do arco e o número usam os tokens de marca via var() lida no JS (ER_ZONE_VAR), então o card acompanha o tema claro sem nenhuma regra duplicada aqui. */ .er-card { margin-bottom: 24px; } /* metade de cima: velocímetro + leitura do mercado */ .er-top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .er-gauge-wrap { flex: 0 0 auto; } .er-gauge { width: 300px; max-width: 100%; height: auto; display: block; overflow: visible; } .er-gauge .er-value { font-family: "JetBrains Mono", Consolas, monospace; font-size: 40px; font-weight: 700; fill: var(--text); } /* ESTACIONÁRIO / DIRECIONAL são longos: fonte menor e ancoragem nas bordas do viewBox (ver erPoleLabel no app.js) pra caberem sem vazar. */ .er-gauge .er-end { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; fill: var(--text-dim); } .er-body { flex: 1 1 260px; min-width: 0; } .er-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .er-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } /* Badge da faixa: tinta translúcida + texto na cor da faixa. O rgba fixo é proposital e segue o resto do arquivo (.mov-tag, .ref-badge) — alpha baixo funciona igual sobre painel escuro ou claro; só o texto muda de tom, e ele já vem do token, que tem variante clara. */ .er-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; background: rgba(136, 147, 168, 0.16); color: var(--text-dim); } .er-badge.er-z-estacionario { background: rgba(0, 255, 163, 0.14); color: var(--accent); } .er-badge.er-z-lateral { background: rgba(25, 245, 176, 0.14); color: var(--sol); } .er-badge.er-z-misto { background: rgba(255, 176, 32, 0.16); color: var(--warn); } .er-badge.er-z-tendencia { background: rgba(247, 147, 26, 0.16); color: var(--btc); } .er-badge.er-z-direcional { background: rgba(255, 77, 109, 0.16); color: var(--sell); } .er-assets { display: flex; gap: 10px; flex-wrap: wrap; } .er-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--surface); border: 1px solid var(--panel-border); border-radius: 999px; } /* o ícone reusa .hold-icon (mesmo glifo/gradiente da composição do patrimônio), só menor — é a mesma moeda, tem que ler como a mesma coisa */ .er-chip .hold-icon { width: 24px; height: 24px; font-size: 13px; } .er-chip-sym { font-size: 12px; font-weight: 600; color: var(--text-dim); } .er-chip-val { font-family: "JetBrains Mono", Consolas, monospace; font-size: 14px; font-weight: 600; } /* "Regime" é o título do card; este é o subtítulo que diz o que o velocímetro mede, pra não confundir o regime do MERCADO com o do BOT. */ .er-sep { font-size: 11px; color: var(--text-dim); opacity: 0.75; } @media (max-width: 720px) { .er-top { gap: 14px; } .er-gauge { width: 260px; margin: 0 auto; } } /* nota de fee no card "últimas operações" (só quando a corretora cobrou) */ .trade-fee { font-size: 0.68rem; opacity: 0.6; font-weight: 400; margin-top: 1px; }