/* ════════════════════════════════════════════════════════════════════ * mobile-optimization.css * ───────────────────────────────────────────────────────────────────── * Source of truth para otimização mobile do frontend. * * COBRE (rotas SPA renderizadas dentro de index.html): * /copilot-forex → seletores .cfx-* * /crypto-signals → seletores .cb-premium-page * /bank → :has(#bankAiHero) + #bank* + .stake-calc + .risk-meter * /challenges → .ch-* + .page:has(.ch-*) * /history-ia → seletores .hv-* * /chart → #chart* + #copilot* + .page:has(#chartMainGrid) * • esconde menu Indicadores (#chartStudiesBar) no mobile * /social → .social-page * /treino → body.route-treino + .train-* + reorder v1/v2 * * NÃO COBRE (carregadas como iframe — DOM/CSS isolado do parent): * /alpha-fx → regras inline em alpha_fx.html (classes genéricas * como .hero/.kpi/.grid existem em outras páginas * do parent → não é seguro centralizar) * /alphafx-black → regras inline em alphafx_black.html (idem) * * REGRAS: * - Tudo dentro de @media (max-width:768px) ou (max-width:480px) * - Desktop (≥769px) totalmente intocado * - Cada bloco escopado pelo seletor exclusivo da rota → impacto zero * em outras páginas * * Atualizado: 2026-05-02 * ════════════════════════════════════════════════════════════════════ */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /copilot-forex — escopo: .cfx-* ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ @media (max-width: 768px){ .cfx-mock{padding:0 0 32px !important;max-width:100% !important} .cfx-mock *{min-width:0} .cfx-aurora{display:none !important} .cfx-fx-strip{padding:7px 0 !important;margin-bottom:12px !important;border-radius:10px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .cfx-fx-track{gap:18px !important;animation-duration:80s !important} .cfx-tk{font-size:0.66rem !important;gap:5px !important} .cfx-page-hdr{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;padding:0 !important;margin-bottom:14px !important} .cfx-hdr-left{width:100% !important;gap:12px !important;min-width:0 !important} .cfx-hdr-orbit{width:48px !important;height:48px !important;flex-shrink:0 !important} .cfx-hdr-orbit-core{width:48px !important;height:48px !important;border-radius:12px !important;box-shadow:0 4px 14px rgba(139,92,246,0.35) !important} .cfx-hdr-orbit-ring{animation-duration:24s !important} .cfx-hdr-title{font-size:1.25rem !important;letter-spacing:0.6px !important;line-height:1.1 !important;word-break:break-word !important;filter:none !important} .cfx-hdr-sub{font-size:0.74rem !important;margin-top:3px !important;word-break:break-word !important} .cfx-live-badge{padding:7px 14px !important;font-size:0.7rem !important;letter-spacing:1px !important;align-self:flex-start !important} .cfx-live-badge::after{animation:none !important;display:none !important} .cfx-pipeline{flex-wrap:wrap !important;gap:8px !important;padding:10px 12px !important;margin-bottom:14px !important;border-radius:12px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .cfx-pipeline::before{display:none !important} .cfx-pl-stage{flex:1 1 calc(50% - 4px) !important;min-width:0 !important;gap:8px !important} .cfx-pl-stage:not(:last-child)::after{display:none !important} .cfx-pl-dot{width:7px !important;height:7px !important;box-shadow:0 0 6px currentColor !important} .cfx-pl-label{font-size:0.62rem !important;letter-spacing:1px !important} .cfx-status-grid{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-bottom:14px !important} .cfx-status-card{padding:11px 13px !important;border-radius:11px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .cfx-status-label{font-size:0.55rem !important;letter-spacing:1.1px !important;margin-bottom:4px !important} .cfx-status-value{font-size:1.05rem !important} .cfx-status-sub{font-size:0.62rem !important;margin-top:3px !important} .cfx-observe-row{grid-template-columns:1fr !important;gap:10px !important;margin-bottom:14px !important} .cfx-obs{padding:14px 14px 12px !important;border-radius:14px !important} .cfx-obs:hover{transform:none !important;box-shadow:none !important} .cfx-obs::before{font-size:0.5rem !important;padding:2px 6px !important;top:10px !important;right:10px !important} .cfx-obs-pair{font-size:1rem !important;letter-spacing:0.3px !important;margin-bottom:3px !important} .cfx-obs-meta{gap:6px !important;margin-bottom:8px !important;flex-wrap:wrap !important} .cfx-obs-tag{font-size:0.56rem !important;padding:2px 6px !important;letter-spacing:0.8px !important} .cfx-spark-wrap{height:30px !important;margin:4px -4px 6px !important} .cfx-obs-conf-pct{font-size:0.85rem !important} .cfx-obs-foot{font-size:0.58rem !important} .cfx-obs-chart-btn{padding:9px 12px !important;font-size:0.62rem !important;letter-spacing:1px !important;margin-top:10px !important;min-height:38px !important} .cfx-obs-chart-btn:hover{transform:none !important;box-shadow:none !important} .cfx-obs-chart-btn::before{display:none !important} .cfx-kpi-row{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-bottom:14px !important} .cfx-kpi{padding:11px !important;border-radius:11px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .cfx-kpi::before{display:none !important} .cfx-kpi-label{font-size:0.56rem !important;letter-spacing:1px !important;margin-bottom:4px !important} .cfx-kpi-value{font-size:1.2rem !important;line-height:1.05 !important} .cfx-kpi-sub{font-size:0.62rem !important;margin-top:3px !important} .cfx-main-grid{grid-template-columns:1fr !important;gap:12px !important} .cfx-card{padding:14px !important;margin-bottom:12px !important;border-radius:14px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;overflow:hidden !important;max-width:100% !important;box-sizing:border-box !important} .cfx-card-hdr{gap:8px !important;margin-bottom:12px !important;flex-wrap:wrap !important} .cfx-card-icon{width:26px !important;height:26px !important;font-size:0.85rem !important;border-radius:8px !important} .cfx-card-title{font-size:0.74rem !important;letter-spacing:1.2px !important} .cfx-card-tag{font-size:0.55rem !important;padding:2px 8px !important;letter-spacing:0.8px !important;margin-left:auto !important} .cfx-radar-container{padding:18px 12px !important} .cfx-radar-circle{width:170px !important;height:170px !important;margin-bottom:14px !important} .cfx-radar-sweep{animation-duration:6s !important} .cfx-radar-core{width:10px !important;height:10px !important;box-shadow:0 0 14px #c084fc !important} .cfx-radar-blip{width:5px !important;height:5px !important} .cfx-radar-status{font-size:0.74rem !important;letter-spacing:1.2px !important} .cfx-radar-msg{font-size:0.7rem !important;line-height:1.4 !important} .cfx-radar-filters{font-size:0.58rem !important;margin-top:10px !important} .cfx-radar-pairs{font-size:0.62rem !important;margin-top:5px !important;flex-direction:column !important} .cfx-radar-countdown{padding:8px 16px !important;font-size:0.66rem !important;letter-spacing:1px !important;margin-top:12px !important;box-shadow:none !important} .cfx-prot-grid{grid-template-columns:1fr 1fr !important;gap:8px !important} .cfx-prot{padding:11px 9px !important;border-radius:11px !important} .cfx-prot::after{display:none !important} .cfx-prot-icon{width:32px !important;height:32px !important;font-size:0.95rem !important;margin-bottom:6px !important} .cfx-prot-name{font-size:0.55rem !important;letter-spacing:1px !important;margin-bottom:3px !important} .cfx-prot-status{font-size:0.82rem !important;margin-bottom:3px !important} .cfx-prot-desc{font-size:0.56rem !important;line-height:1.3 !important} .cfx-sd-best{padding:14px !important;border-radius:14px !important} .cfx-sd-best-empty{padding:22px 12px !important;font-size:0.72rem !important} .cfx-sd-best-empty-icon{font-size:1.6rem !important;margin-bottom:6px !important;animation-duration:6s !important} .cfx-context-list{gap:6px !important} .cfx-ctx-item{padding:8px 10px !important;border-radius:8px !important} .cfx-ctx-label{font-size:0.58rem !important;letter-spacing:0.8px !important} .cfx-ctx-value{font-size:0.7rem !important} .cfx-radar-pairs > *,.cfx-pair-row,.cfx-signal-row{display:grid !important;grid-template-columns:auto auto auto auto auto !important;gap:6px !important;align-items:center !important;font-size:10.5px !important;width:100% !important;min-width:0 !important} .cfx-tag-live,[class*="cfx-tag"],[class*="cfx-badge"]{font-size:9px !important;padding:3px 6px !important;white-space:nowrap !important;flex-shrink:0 !important} .cfx-card *,.cfx-page-hdr *,.cfx-obs *{word-break:break-word !important;overflow-wrap:anywhere !important} .cfx-card code,.cfx-card kbd,.cfx-card pre,.cfx-obs code{display:inline !important;white-space:normal !important;word-break:break-word !important;overflow-wrap:anywhere !important;max-width:100% !important;font-size:11px !important;padding:1px 5px !important} .cfx-fade{animation:none !important;opacity:1 !important;transform:none !important} .cfx-mock,.cfx-page-hdr,.cfx-pipeline,.cfx-status-grid,.cfx-status-card, .cfx-observe-row,.cfx-obs,.cfx-kpi-row,.cfx-kpi,.cfx-main-grid, .cfx-card,.cfx-prot-grid,.cfx-prot,.cfx-sd-best,.cfx-context-list,.cfx-ctx-item{ max-width:100% !important;box-sizing:border-box !important;min-width:0 !important; } } @media (max-width: 480px){ .cfx-status-grid{grid-template-columns:1fr !important} .cfx-prot-grid{grid-template-columns:1fr !important} .cfx-pl-stage{flex:1 1 100% !important} .cfx-hdr-title{font-size:1.15rem !important} .cfx-hdr-orbit,.cfx-hdr-orbit-core{width:42px !important;height:42px !important} .cfx-radar-circle{width:150px !important;height:150px !important} .cfx-kpi-value{font-size:1.05rem !important} .cfx-status-value{font-size:0.95rem !important} } /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /crypto-signals — escopo: .cb-premium-page ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ @media (max-width: 768px){ .cb-premium-page{padding:12px 12px 28px !important;max-width:100% !important} .cb-premium-page,.cb-premium-page *{min-width:0 !important} .cb-premium-page .cb-stage{height:300px !important;border-radius:14px !important;margin:4px 0 12px !important;box-shadow:0 0 18px rgba(139,92,246,0.10),inset 0 0 30px rgba(34,211,238,0.04) !important} .cb-premium-page .cb-stage-grid-bg{animation-duration:14s !important;background-size:36px 36px !important} .cb-premium-page .cb-stage canvas#cbHashRain,.cb-premium-page .cb-stage canvas#cbArcs{display:none !important} .cb-premium-page .cb-pedestal{width:340px !important;height:340px !important} .cb-premium-page .cb-ring{filter:drop-shadow(0 0 10px #a855f7) !important;animation-duration:18s !important} .cb-premium-page .cb-ring.inner{animation-duration:22s !important} .cb-premium-page .cb-ring.outer{animation-duration:36s !important;opacity:0.18 !important} .cb-premium-page .cb-halo{width:180px !important;height:180px !important;filter:blur(8px) !important;animation-duration:4s !important} .cb-premium-page .cb-brain-wrap{width:200px !important;height:200px !important;animation-duration:8s !important} .cb-premium-page .cb-brain-wrap .cb-sphere-canvas{width:200px !important;height:200px !important;filter:drop-shadow(0 0 10px rgba(34,211,238,0.42)) !important} .cb-premium-page .cb-sphere-info-float{font-size:.5rem !important;letter-spacing:1.5px !important;top:calc(42% + 110px) !important;line-height:1.4 !important} .cb-premium-page .cb-sphere-info-float .cb-sphere-label{font-size:.55rem !important;letter-spacing:2px !important} .cb-premium-page .cb-sphere-info-float .cb-sphere-ver{font-size:.45rem !important} .cb-premium-page .cb-stage-label{top:10px !important;left:12px !important;font-size:.55rem !important;letter-spacing:1.2px !important} .cb-premium-page .cb-stage-right{top:10px !important;right:10px !important;gap:4px !important} .cb-premium-page .cb-stage-right .r{padding:3px 7px !important;font-size:.52rem !important;border-radius:5px !important} .cb-premium-page .cb-stage-hud{bottom:12px !important;gap:5px !important;flex-wrap:wrap !important;justify-content:center !important;max-width:90% !important} .cb-premium-page .cb-sh-pill{padding:3px 8px !important;font-size:.48rem !important;letter-spacing:1.2px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .cb-premium-page .cb-orbit-coins{display:none !important} .cb-premium-page .cb-kpi-bar{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-bottom:12px !important} .cb-premium-page .cb-kpi-bar.cb-kpi-bar-student{grid-template-columns:1fr 1fr !important} .cb-premium-page .cb-kpi{padding:10px 12px !important;border-radius:10px !important} .cb-premium-page .cb-kpi .lab{font-size:.52rem !important;letter-spacing:1.1px !important;margin-bottom:4px !important} .cb-premium-page .cb-kpi .val{font-size:1.05rem !important} .cb-premium-page .cb-kpi .sub{font-size:.5rem !important;margin-top:3px !important} .cb-premium-page .cb-main{grid-template-columns:1fr !important;gap:12px !important} .cb-premium-page .cb-sig-panel{padding:11px !important;border-radius:12px !important} .cb-premium-page .cb-sp-head{gap:8px !important;margin-bottom:10px !important} .cb-premium-page .cb-sp-head h3{font-size:.78rem !important;letter-spacing:.8px !important} .cb-premium-page .cb-sp-filters{gap:5px !important;width:100% !important;margin-left:0 !important} .cb-premium-page .cb-chip{padding:5px 8px !important;font-size:.58rem !important;border-radius:5px !important} .cb-premium-page select.cb-flt{height:30px !important;font-size:.6rem !important;padding:0 8px !important} .cb-premium-page #cbSignalsGrid{grid-template-columns:1fr !important;gap:10px !important} .cb-premium-page .cb-side{gap:12px !important} .cb-premium-page .cb-card{padding:12px !important;border-radius:11px !important} .cb-premium-page .cb-card .ch{margin-bottom:8px !important;gap:6px !important;flex-wrap:wrap !important} .cb-premium-page .cb-card .ch h4{font-size:.7rem !important;letter-spacing:.8px !important} .cb-premium-page .cb-card .ch .lock,.cb-premium-page .cb-card .ch .tag{font-size:.52rem !important;padding:2px 6px !important;letter-spacing:.8px !important} .cb-premium-page .cb-wr-big{font-size:1.55rem !important;margin:2px 0 !important} .cb-premium-page .cb-wr-sub{font-size:.54rem !important;letter-spacing:.8px !important;margin-bottom:8px !important} .cb-premium-page .cb-wl-split{gap:6px !important;margin:6px 0 !important} .cb-premium-page .cb-wl-cell{padding:7px !important;border-radius:7px !important} .cb-premium-page .cb-wl-cell .n{font-size:.95rem !important} .cb-premium-page .cb-wl-cell .l{font-size:.5rem !important;letter-spacing:.8px !important} .cb-premium-page .cb-hist-row,.cb-premium-page .cb-hist-row-v2{font-size:.56rem !important;padding:4px 0 !important;gap:5px !important} .cb-premium-page .cb-hist-row-v2{grid-template-columns:34px 1fr 30px 38px 50px !important} .cb-premium-page .cb-hist-empty{font-size:.54rem !important;padding:6px 0 !important} .cb-premium-page .cb-cfg-row{margin:5px 0 !important;gap:8px !important;flex-wrap:wrap !important} .cb-premium-page .cb-cfg-row label{font-size:.54rem !important} .cb-premium-page .cb-cfg-row input[type=number]{width:62px !important;font-size:.62rem !important;padding:4px 5px !important} .cb-premium-page .cb-cfg-hint{font-size:.5rem !important;line-height:1.4 !important;margin-top:6px !important;padding-top:6px !important} .cb-premium-page .cb-cfg-btn{padding:11px !important;font-size:.62rem !important;letter-spacing:.8px !important;min-height:42px !important} .cb-premium-page .cb-cfg-btn:hover{background:#8b5cf6 !important} .cb-premium-page .cb-ga-row{font-size:.56rem !important;margin:3px 0 !important} .cb-premium-page .cb-ga-row input{width:48px !important;font-size:.58rem !important} .cb-premium-page .cb-card-entry{border-radius:11px !important} .cb-premium-page .cb-card-entry:hover{transform:none !important;box-shadow:0 4px 12px rgba(168,85,247,0.20) !important} .cb-premium-page .cb-offline{padding:24px 14px !important} .cb-premium-page .cb-offline-icon{font-size:1.55rem !important;margin-bottom:6px !important} .cb-premium-page .cb-offline-title{font-size:.82rem !important} .cb-premium-page .cb-offline-sub{font-size:.6rem !important} .cb-premium-page .cb-disclaimer{padding:10px 12px !important;font-size:.58rem !important;line-height:1.45 !important;margin-top:14px !important;border-radius:9px !important} .cb-premium-page .cb-footer{gap:10px !important;padding:12px 0 0 !important;font-size:.52rem !important;letter-spacing:.8px !important} .cb-premium-page .cb-panel-left,.cb-premium-page .cb-panel-right{display:none !important} .cb-premium-page .cb-hist-premium{padding:12px !important;margin-top:12px !important;border-radius:12px !important} .cb-premium-page .cb-hist-premium h3{font-size:.82rem !important;margin-bottom:10px !important} .cb-premium-page .cb-hist-premium .cb-hp-wrap{margin:0 -2px !important} .cb-premium-page .cb-hist-premium table{font-size:.62rem !important} .cb-premium-page .cb-hist-premium thead th{padding:6px 8px !important;font-size:.52rem !important;letter-spacing:.7px !important} .cb-premium-page .cb-hist-premium tbody td{padding:6px 8px !important} .cb-premium-page .cb-hist-premium .cb-hp-empty{padding:18px 10px !important;font-size:.66rem !important} .cb-premium-page .cb-band{padding:2px 7px !important;font-size:.56rem !important} .cb-premium-page .cb-hp-chip{font-size:.5rem !important;padding:2px 6px !important} .cb-premium-page p,.cb-premium-page .cb-disclaimer,.cb-premium-page .cb-offline-sub{overflow-wrap:anywhere !important;word-break:break-word !important} .cb-premium-page .cb-coin-chip,.cb-premium-page .cb-side-panel,.cb-premium-page .cb-sh-pill{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .cb-premium-page .cb-stage,.cb-premium-page .cb-kpi-bar,.cb-premium-page .cb-kpi,.cb-premium-page .cb-main,.cb-premium-page .cb-sig-panel,.cb-premium-page .cb-side,.cb-premium-page .cb-card,.cb-premium-page #cbSignalsGrid,.cb-premium-page .cb-card-entry,.cb-premium-page .cb-hist-premium,.cb-premium-page .cb-disclaimer,.cb-premium-page .cb-footer{max-width:100% !important;box-sizing:border-box !important} } @media (max-width: 480px){ .cb-premium-page .cb-stage{height:260px !important} .cb-premium-page .cb-pedestal{width:280px !important;height:280px !important} .cb-premium-page .cb-brain-wrap,.cb-premium-page .cb-brain-wrap .cb-sphere-canvas{width:170px !important;height:170px !important} .cb-premium-page .cb-halo{width:150px !important;height:150px !important} .cb-premium-page .cb-kpi-bar,.cb-premium-page .cb-kpi-bar.cb-kpi-bar-student{grid-template-columns:1fr !important} .cb-premium-page .cb-wr-big{font-size:1.35rem !important} .cb-premium-page .cb-hist-row-v2{grid-template-columns:30px 1fr 28px 34px 44px !important} .cb-premium-page .cb-stage-hud{display:none !important} } /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /bank — escopo: :has(#bankAiHero) + #bank* + .stake-calc + .risk-meter ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* MOBILE_SAFE_MODE_CSS END */ /* ═══════════════════════════════════════════════════════════════════ * BANK PAGE — MOBILE PREMIUM PATCH v2 (≤768px) * Adicionado em 2026-05-02. Override seguro no FINAL do mobile.css. * Escopo absoluto: TODA regra usa um seletor exclusivo da rota /bank * (#bankAiHero, #bankChart, #bankCopilotMsgs, .stake-calc, .risk-meter) * ou .page:has(#bankAiHero) — esses elementos só existem quando a rota * /bank está renderizada → impacto ZERO em outras páginas. * Desktop (≥769px) intocado pela media query. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* ── Página: padding e overflow-x trancado ───────────── */ .page:has(#bankAiHero){ padding-left: 12px !important; padding-right: 12px !important; max-width: 100vw !important; overflow-x: hidden !important; } .page:has(#bankAiHero) *{ min-width: 0; } /* ── PAGE HEADER (Copilot Banca) ─────────────────────── */ .page:has(#bankAiHero) .page-hdr{ flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; } .page:has(#bankAiHero) .page-hdr-left, .page:has(#bankAiHero) .page-hdr-right{ width: 100% !important; min-width: 0 !important; } .page:has(#bankAiHero) .page-title{ font-size: 1.05rem !important; letter-spacing: 1px !important; } .page:has(#bankAiHero) .page-title-glow{ word-break: break-word !important; } /* ── KPI ROW cols-5 → 2 cols (≤480px: 1 col) ─────────── */ .page:has(#bankAiHero) .kpi-row{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 12px !important; } .page:has(#bankAiHero) .kpi-row.cols-5{ grid-template-columns: repeat(2, 1fr) !important; } .page:has(#bankAiHero) .kpi-box{ padding: 11px 13px !important; border-radius: 11px !important; overflow: hidden !important; } .page:has(#bankAiHero) .kpi-box-label{ font-size: 0.55rem !important; letter-spacing: 1.1px !important; margin-bottom: 4px !important; } .page:has(#bankAiHero) .kpi-box-value{ font-size: 1.05rem !important; word-break: break-word !important; line-height: 1.15 !important; } .page:has(#bankAiHero) .kpi-box-glow{ filter: blur(10px) !important; opacity: 0.55 !important; } /* ── MAIN GRID 2-COL (1fr 340px inline) → 1 coluna ──── */ /* esse div com grid-template-columns:1fr 340px é o gargalo principal * descoberto na rota: força layout em 1 coluna no celular. */ .page:has(#bankAiHero) > div[style*="grid-template-columns:1fr 340px"]{ display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 12px !important; } .page:has(#bankAiHero) > div[style*="grid-template-columns:1fr 340px"] > div{ width: 100% !important; min-width: 0 !important; gap: 12px !important; } /* ── SECTION CARDS dentro de /bank ───────────────────── */ .page:has(#bankAiHero) .section-card{ padding: 0 !important; border-radius: 12px !important; overflow: hidden !important; } .page:has(#bankAiHero) .section-card-header{ padding: 11px 13px !important; flex-wrap: wrap !important; gap: 8px !important; } .page:has(#bankAiHero) .section-card-title{ font-size: 0.78rem !important; letter-spacing: 0.8px !important; word-break: break-word !important; } .page:has(#bankAiHero) .section-card-body{ padding: 12px 13px !important; } /* ── HISTÓRICO DE OPERAÇÕES — tabela com scroll-x ───── */ /* Em vez de cortar texto, permite scroll horizontal interno */ .page:has(#bankAiHero) .data-table{ font-size: 0.62rem !important; min-width: 480px; /* força scroll só quando precisa */ } .page:has(#bankAiHero) .section-card-body:has(.data-table){ overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .page:has(#bankAiHero) .data-table th, .page:has(#bankAiHero) .data-table td{ padding: 6px 8px !important; white-space: nowrap !important; } .page:has(#bankAiHero) .data-table th{ font-size: 0.52rem !important; letter-spacing: 0.8px !important; } .page:has(#bankAiHero) .signal-dir-badge{ font-size: 0.5rem !important; padding: 2px 5px !important; } /* ── BANK CHART — proporção mobile ──────────────────── */ .page:has(#bankAiHero) .chart-canvas-wrap{ padding: 6px !important; border-radius: 10px !important; } #bankChart{ max-width: 100% !important; } /* ── PROGRESS BAR (PROGRESSO DA META) ──────────────── */ .page:has(#bankAiHero) > div[style*="rgba(139,92,246,0.03)"]:not(.stake-calc):not(#bankAiHero){ padding: 10px 12px !important; border-radius: 9px !important; margin-top: 8px !important; } /* ── BANK COPILOT (mensagens IA) — wrap seguro ─────── */ #bankCopilotMsgs{ gap: 7px !important; } #bankCopilotMsgs > div{ padding: 9px 11px !important; font-size: 0.74rem !important; line-height: 1.45 !important; word-break: break-word !important; overflow-wrap: anywhere !important; } #bankCopilotMsgs > div > span:last-child{ word-break: break-word !important; overflow-wrap: anywhere !important; } /* ── HEALTH CIRCLE / ADVICE — refinos extras ────────── */ #bankAiHero #adviceAction, #bankAiHero #adviceReason, #bankAiHero #llmInsightText{ word-break: break-word !important; overflow-wrap: anywhere !important; } #bankAiHero #ruinEdge, #bankAiHero #weeklyMsg{ font-size: 0.6rem !important; word-break: break-word !important; } /* ── STAKE CALC — refinos pra evitar quebra do row ──── */ .stake-calc{ overflow: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } .stake-input-row{ display: flex !important; align-items: center !important; } .stake-input{ -webkit-appearance: none; appearance: none; border-radius: 8px !important; } .stake-result-row{ flex-wrap: wrap !important; gap: 6px !important; } .stake-result-value{ word-break: break-word !important; } /* ── RISK METER + RESET BUTTON ──────────────────────── */ .risk-meter{ overflow: hidden !important; max-width: 100% !important; } .risk-meter-needle{ transition: left 0.4s ease !important; } /* ── PERFORMANCE: reduz blur/sombra pesada só em /bank ─ */ .page:has(#bankAiHero) .kpi-box, .page:has(#bankAiHero) .section-card, .page:has(#bankAiHero) #bankAiHero{ box-shadow: none !important; } .page:has(#bankAiHero) .kpi-box-glow{ animation: none !important; } .page:has(#bankAiHero) .ai-orb-v3, .page:has(#bankAiHero) .ai-orb-ring{ animation-duration: 6s !important; } /* ── SAFETY: containers nunca estouram ──────────────── */ .page:has(#bankAiHero) .kpi-row, .page:has(#bankAiHero) .kpi-box, .page:has(#bankAiHero) .section-card, .page:has(#bankAiHero) .section-card-body, .page:has(#bankAiHero) #bankAiHero, .page:has(#bankAiHero) #bankCopilotMsgs, .page:has(#bankAiHero) .stake-calc, .page:has(#bankAiHero) > div[style*="grid-template-columns:1fr 340px"]{ max-width: 100% !important; box-sizing: border-box !important; } } /* Telas muito pequenas (≤480px) — refinos finais — só /bank */ @media (max-width: 480px){ .page:has(#bankAiHero) .kpi-row, .page:has(#bankAiHero) .kpi-row.cols-5{ grid-template-columns: 1fr !important; } .page:has(#bankAiHero) .kpi-box-value{ font-size: 1.15rem !important; } .page:has(#bankAiHero) .page-title{ font-size: 0.95rem !important; } #bankAiHero #healthScoreCanvas{ width: 100px !important; height: 100px !important; } #bankAiHero #healthScoreValue{ font-size: 1.45rem !important; } #bankAiHero #ruinPercent, #bankAiHero #weeklyProjection{ font-size: 0.95rem !important; } /* HEALTHGRADE / ADVICE: textos com mais quebra */ #bankAiHero #adviceAction{ font-size: 0.7rem !important; letter-spacing: 1px !important; } /* Stake label encolhe, input maior */ .stake-label{ min-width: 88px !important; font-size: 0.52rem !important; } .stake-input{ font-size: 0.78rem !important; min-height: 40px !important; } /* Seção: padding ainda mais compacto */ .page:has(#bankAiHero) .section-card-body{ padding: 10px 11px !important; } .page:has(#bankAiHero) .section-card-header{ padding: 10px 11px !important; } } /* (fim /bank) */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /challenges — escopo: .ch-* + .page:has(.ch-*) ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ * CHALLENGES PAGE — MOBILE PREMIUM PATCH v2 (≤768px) * Adicionado em 2026-05-02. Override seguro no FINAL do mobile.css. * Escopo absoluto: TODA regra usa um seletor .ch-* exclusivo da rota * /challenges (definidos em index.html linhas 3469-3667). * As classes .ch-hero / .ch-card / .ch-tabs / .ch-lb / .ch-trophies * NÃO existem em outras rotas → impacto ZERO em outras páginas. * Existem regras anteriores (linhas 1482-1612) — estas COMPLEMENTAM. * Desktop (≥769px) intocado pela media query. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* ── PÁGINA + GRID PRINCIPAL ────────────────────────── */ /* O grid 1fr 340px já cai pra 1 col em 1100px, mas reforçamos * para garantir gaps mais apertados no celular. */ .page:has(.ch-hero), .page:has(.ch-card){ padding-left: 12px !important; padding-right: 12px !important; max-width: 100vw !important; overflow-x: hidden !important; } .page:has(.ch-hero) *, .page:has(.ch-card) *{ min-width: 0; } .ch-grid{ grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 4px !important; } .ch-grid > div{ width: 100% !important; min-width: 0 !important; } /* ── PAGE HEADER (Desafios + TEMPORADA pill) ────────── */ .page:has(.ch-hero) .page-hdr{ flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 12px !important; } .page:has(.ch-hero) .page-hdr-left, .page:has(.ch-hero) .page-hdr-right{ width: 100% !important; min-width: 0 !important; } .page:has(.ch-hero) .page-title{ font-size: 1.05rem !important; letter-spacing: 1px !important; word-break: break-word !important; } /* ── HERO geral ─────────────────────────────────────── */ .ch-hero{ padding: 16px !important; border-radius: 16px !important; margin-bottom: 14px !important; } .ch-hero-title{ font-size: 0.95rem !important; letter-spacing: 1.2px !important; word-break: break-word !important; } .ch-hero-sub{ font-size: 0.7rem !important; line-height: 1.4 !important; word-break: break-word !important; } /* ── TABS (5 botões: Ativos/Diários/Semanais/Torneios/Completos) */ /* Permite rolagem horizontal limpa em vez de quebrar/cortar */ .ch-tabs{ gap: 6px !important; margin-bottom: 14px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; padding: 2px 0 6px !important; } .ch-tabs::-webkit-scrollbar{ display: none; } .ch-tab{ flex: 0 0 auto !important; padding: 9px 13px !important; font-size: 0.62rem !important; letter-spacing: 0.6px !important; border-radius: 10px !important; min-height: 38px !important; white-space: nowrap !important; } /* ── CARD: head/icon/info gap (refinos extras dos já existentes) */ .ch-card{ margin-bottom: 12px !important; box-shadow: none !important; } .ch-card:hover{ transform: none !important; box-shadow: none !important; } /* anti-flicker no toque */ .ch-card.featured::before{ height: 1.5px !important; } /* Reward chip — força quebra pra próxima linha quando faltar espaço */ .ch-card-reward{ margin-left: 0 !important; flex: 0 0 auto !important; } .ch-card-head{ align-items: center !important; } /* ── PROGRESS BAR ──────────────────────────────────── */ .ch-progress{ margin-top: 11px !important; } .ch-progress-head{ margin-bottom: 5px !important; } .ch-progress-bar{ height: 7px !important; } /* Remove o brilho animado em mobile pra reduzir reflow */ .ch-progress-fill::after{ display: none !important; } .ch-progress-fill{ transition-duration: 0.4s !important; } /* ── TIMER ROW — refino sobre o existente ──────────── */ .ch-card-timer{ margin-top: 8px !important; } /* ── BOTÕES (PARTICIPAR / Compartilhar) — touch ────── */ .ch-card-join{ background: linear-gradient(135deg,#7C3AED,#3B82F6) !important; transition: none !important; } .ch-card-join:hover{ transform: none !important; box-shadow: none !important; } .ch-card-join.joined{ background: rgba(52,211,153,0.1) !important; } /* ── LEADERBOARD (.ch-lb) ──────────────────────────── */ .ch-lb{ padding: 14px !important; border-radius: 14px !important; margin-bottom: 12px !important; overflow: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } .ch-lb-title{ font-size: 0.7rem !important; letter-spacing: 1.2px !important; margin-bottom: 11px !important; word-break: break-word !important; } .ch-lb-row{ gap: 8px !important; padding: 7px 8px !important; border-radius: 9px !important; } .ch-lb-row:hover{ background: transparent !important; } .ch-lb-pos{ width: 22px !important; height: 22px !important; font-size: 0.58rem !important; flex-shrink: 0 !important; } .ch-lb-av{ width: 28px !important; height: 28px !important; font-size: 0.5rem !important; flex-shrink: 0 !important; } .ch-lb-name{ font-size: 0.7rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } .ch-lb-score{ font-size: 0.66rem !important; flex-shrink: 0 !important; } /* ── TROPHIES (.ch-trophies) ───────────────────────── */ .ch-trophies{ padding: 14px !important; border-radius: 14px !important; margin-bottom: 12px !important; overflow: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } .ch-trophies-title{ font-size: 0.68rem !important; letter-spacing: 1.2px !important; margin-bottom: 10px !important; } .ch-trophy-row{ gap: 8px !important; padding: 7px !important; border-radius: 9px !important; margin-bottom: 5px !important; } .ch-trophy-row:hover{ background: rgba(139,92,246,0.04) !important; } .ch-trophy-icon{ font-size: 1.15rem !important; flex-shrink: 0 !important; } .ch-trophy-info{ min-width: 0 !important; flex: 1 !important; } .ch-trophy-name{ font-size: 0.68rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .ch-trophy-date{ font-size: 0.56rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ── COMPLETED BADGE — refino de posição em card pequeno */ .ch-card.completed .ch-completed-badge{ top: 11px !important; right: 11px !important; } /* ── QUICKNAV (Rede Social + Ranking) ──────────────── */ /* div com display:flex;gap:10px;margin-bottom:20px contendo 2 */ .page:has(.ch-hero) > div[style*="margin-bottom:20px"]:has(a[href="#/social"]){ flex-direction: column !important; gap: 8px !important; margin-bottom: 14px !important; } .page:has(.ch-hero) > div[style*="margin-bottom:20px"] a{ width: 100% !important; box-sizing: border-box !important; min-height: 52px !important; } /* ── PERFORMANCE — desliga animações puramente decorativas */ .ch-card.featured::before, .ch-hero::before{ /* mantém visualmente a faixa de gradiente, mas estática */ } /* ── SAFETY: nada estoura a tela ───────────────────── */ .ch-hero, .ch-grid, .ch-card, .ch-card-head, .ch-card-info, .ch-tabs, .ch-progress-bar, .ch-card-actions, .ch-lb, .ch-lb-row, .ch-trophies, .ch-trophy-row{ max-width: 100% !important; box-sizing: border-box !important; } } /* Telas muito pequenas (≤480px) — refinos finais — só /challenges */ @media (max-width: 480px){ .ch-hero{ padding: 14px !important; } .ch-hero-title{ font-size: 0.88rem !important; } .ch-hero-stats{ grid-template-columns: 1fr 1fr !important; gap: 6px !important; } .ch-hero-stat{ padding: 8px 10px !important; } .ch-hero-stat-val{ font-size: 1rem !important; } .ch-tab{ padding: 8px 11px !important; font-size: 0.58rem !important; } .ch-card{ padding: 12px !important; } .ch-card-icon{ width: 38px !important; height: 38px !important; font-size: 1.15rem !important; } .ch-card-name{ font-size: 0.82rem !important; } .ch-card-desc{ font-size: 0.68rem !important; } .ch-card-reward{ font-size: 0.62rem !important; padding: 3px 7px !important; } .ch-lb-pos{ width: 20px !important; height: 20px !important; } .ch-lb-av{ width: 24px !important; height: 24px !important; } .ch-lb-name{ font-size: 0.66rem !important; } .ch-lb-score{ font-size: 0.62rem !important; } .ch-trophy-name{ font-size: 0.64rem !important; } } /* (fim /challenges) */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /chart — escopo: #chart* + #copilot* + .page:has(#chartMainGrid) ║ * ║ Esconde menu Indicadores (#chartStudiesBar) no mobile ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ * CHART PAGE — MOBILE PREMIUM PATCH (≤768px) * Adicionado em 2026-05-02. Override seguro no FINAL do mobile.css. * Escopo absoluto: TODA regra usa um seletor exclusivo da rota /chart * (#chartMainGrid, #chartStudiesBar, #chartTVContainer, #chartSidePanel, * #chartCopilotWrapper, #copilot*). * Esses IDs são criados apenas por pageChart() — impacto ZERO em outras rotas. * Desktop (≥769px) intocado pela media query. * * REQUISITO ESPECÍFICO ATENDIDO: * "DESATIVAR APENAS NO CELULAR O MENU INDICADORES" → #chartStudiesBar * e seu .section-card pai escondidos via display:none aqui dentro. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* ── DESATIVAÇÃO DO MENU "INDICADORES" no mobile ──── */ /* Esconde o bar de toggles de indicadores acima do gráfico (RSI/MACD/EMA/etc.) * — só esconde a barra inteira, sem mexer em JS/state. */ #chartStudiesBar{ display: none !important; } .section-card:has(> #chartStudiesBar){ display: none !important; } /* ── PÁGINA / wrapper ──────────────────────────────── */ .page:has(#chartMainGrid){ padding-left: 10px !important; padding-right: 10px !important; padding-top: 6px !important; overflow-x: hidden !important; max-width: 100vw !important; } .page:has(#chartMainGrid) *{ min-width: 0; } /* ── HEADER (GRÁFICOS + Painel IA + Atualizar) ─────── */ /* div com display:flex + justify-content:space-between e contendo "GRÁFICOS" */ .page:has(#chartMainGrid) > div:first-child{ flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 8px !important; } .page:has(#chartMainGrid) > div:first-child > div:first-child{ flex-wrap: wrap !important; gap: 6px !important; flex: 1 1 100% !important; } .page:has(#chartMainGrid) > div:first-child > div:first-child > span:first-child{ font-size: 0.95rem !important; letter-spacing: 1px !important; } .page:has(#chartMainGrid) > div:first-child > div:first-child > span:nth-child(2){ font-size: 0.6rem !important; } .page:has(#chartMainGrid) > div:first-child > div:last-child{ width: 100% !important; justify-content: flex-end !important; gap: 6px !important; } #chartPanelToggle{ font-size: 0.58rem !important; padding: 6px 10px !important; min-height: 32px !important; } /* ── MARKET TABS (CRIPTO/FOREX/B3/AÇÕES/...) ───────── */ /* Scroll horizontal limpo em vez de quebrar em 2-3 linhas */ #chartMktTabs{ flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; padding-bottom: 4px !important; } #chartMktTabs::-webkit-scrollbar{ display: none; } #chartMktTabs button{ flex: 0 0 auto !important; white-space: nowrap !important; font-size: 0.6rem !important; padding: 6px 11px !important; min-height: 32px !important; } /* ── ASSET BAR (ATIVO + select) ─────────────────────── */ #chartAssetBar > div{ width: 100% !important; } #chartPairSelect{ flex: 1 !important; min-width: 0 !important; width: 100% !important; height: 36px !important; font-size: 0.78rem !important; } /* ── MAIN GRID 2-COL (1fr 300px) → 1 coluna ────────── */ #chartMainGrid{ grid-template-columns: 1fr !important; gap: 10px !important; } #chartMainGrid > div{ width: 100% !important; min-width: 0 !important; } /* ── TF/STYLE BAR (acima do gráfico) ───────────────── */ /* Faz a barra ter scroll horizontal pro caso de não caberem TFs+styles */ #chartMainGrid .section-card:first-child{ padding: 8px 10px !important; } #chartMainGrid .section-card:first-child > div{ flex-wrap: wrap !important; gap: 6px !important; } /* Pair label + price */ #chartPairLabel{ font-size: 0.92rem !important; } #chartPriceLabel{ font-size: 0.92rem !important; } #chartChgLabel{ font-size: 0.62rem !important; padding: 2px 7px !important; } /* ── TV CONTAINER — refinos extras ─────────────────── */ /* Já existe rule básica em mobile.css linhas 268-278. Aqui refino. */ #chartTVContainer{ height: 380px !important; min-height: 320px !important; max-height: 60vh !important; border-radius: 8px !important; } /* ── COPILOT (header + body) ───────────────────────── */ #chartCopilotWrapper{ margin-top: 8px !important; } #chartCopilotHeader{ padding: 9px 12px !important; gap: 8px !important; border-radius: 11px !important; flex-wrap: wrap !important; } #chartCopilotHeader > div:first-child{ /* ícone roxo */ width: 26px !important; height: 26px !important; border-radius: 7px !important; flex-shrink: 0 !important; } #chartCopilotHeader > div:first-child svg{ width: 14px !important; height: 14px !important; } #chartCopilotHeader > div:nth-child(2){ /* container título+sub */ min-width: 0 !important; flex: 1 1 auto !important; } #chartCopilotHeader > div:nth-child(2) > div:first-child{ gap: 6px !important; flex-wrap: wrap !important; } #chartCopilotHeader > div:nth-child(2) > div:first-child > span:first-child{ font-size: 0.78rem !important; word-break: break-word !important; } #copilotHeaderPair, #copilotHeaderTF, #copilotHeaderBias{ font-size: 0.62rem !important; } #copilotHeaderDir{ font-size: 0.62rem !important; padding: 3px 9px !important; } #copilotChevron{ flex-shrink: 0 !important; } /* Copilot body (expandível) */ #chartCopilotBody{ padding: 0 12px !important; } #chartCopilotBody > div:first-child{ /* badge + 4 metric cards row */ gap: 8px !important; margin-bottom: 10px !important; } #copilotDirBadge{ padding: 8px 16px !important; font-size: 0.85rem !important; letter-spacing: 0.6px !important; } #chartCopilotBody > div:first-child > div:nth-child(2){ /* grid 4 cols */ grid-template-columns: 1fr 1fr !important; gap: 6px !important; min-width: 0 !important; } #copilotConfVal{ font-size: 1.1rem !important; } #copilotVolVal, #copilotRiskVal, #copilotExpVal{ font-size: 0.78rem !important; } #copilotCtxLine{ font-size: 0.66rem !important; word-break: break-word !important; } /* 5 action buttons */ #copilotActionBar{ overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; justify-content: flex-start !important; padding-bottom: 4px !important; } #copilotActionBar::-webkit-scrollbar{ display: none; } #copilotActionBar button{ flex: 0 0 auto !important; white-space: nowrap !important; font-size: 0.62rem !important; padding: 7px 12px !important; min-height: 36px !important; } #copilotAnalysisBox{ padding: 11px 13px !important; max-height: 200px !important; border-radius: 7px !important; } #copilotAnalysisText{ font-size: 0.74rem !important; line-height: 1.65 !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* ── SIDEBAR DIREITA → vira coluna abaixo do gráfico ─ */ #chartSidePanel{ max-height: none !important; overflow-y: visible !important; gap: 8px !important; } #chartSidePanel .section-card{ padding: 11px !important; border-radius: 11px !important; } /* Signal strength card (header) */ #chartSidePanel .section-card:first-child > div:first-child > span{ font-size: 0.66rem !important; letter-spacing: 0.7px !important; } #chartDirBadge{ font-size: 0.66rem !important; padding: 5px 12px !important; max-width: 110px !important; } #chartConfPctBig{ font-size: 1.4rem !important; } #chartConfPct{ font-size: 0.7rem !important; } /* Detectors / Indicators / Context cards */ #chartDetectors{ max-height: 200px !important; } #chartContext{ max-height: 180px !important; } /* Indicator grid (2-col) */ #chartIndicators{ gap: 5px !important; } /* ── FILTER CHIPS no escopo /chart — touch friendly ─ */ .page:has(#chartMainGrid) .filter-chip{ min-height: 32px !important; } /* ── CONF SECTION (barra de confiança) ─────────────── */ .page:has(#chartMainGrid) .conf-section{ font-size: 0.6rem !important; } .page:has(#chartMainGrid) .conf-track{ height: 5px !important; } /* ── PERFORMANCE — desliga animações pesadas ───────── */ .page:has(#chartMainGrid) [style*="sysPulse"]{ animation-duration: 2s !important; } /* ── SAFETY: nada estoura a tela ───────────────────── */ #chartMktTabs, #chartAssetBar, #chartMainGrid, #chartTVContainer, #chartCopilotWrapper, #chartCopilotHeader, #chartCopilotBody, #chartSidePanel, .page:has(#chartMainGrid) .section-card{ max-width: 100% !important; box-sizing: border-box !important; } } /* Telas muito pequenas (≤480px) — refinos finais — só /chart */ @media (max-width: 480px){ #chartTVContainer{ height: 320px !important; min-height: 280px !important; } #chartPairSelect{ height: 34px !important; font-size: 0.74rem !important; } #chartPairLabel, #chartPriceLabel{ font-size: 0.85rem !important; } #chartCopilotBody > div:first-child > div:nth-child(2){ grid-template-columns: 1fr 1fr !important; } #copilotConfVal{ font-size: 1rem !important; } #copilotDirBadge{ font-size: 0.78rem !important; padding: 7px 13px !important; } /* Header GRÁFICOS title menor */ .page:has(#chartMainGrid) > div:first-child > div:first-child > span:first-child{ font-size: 0.85rem !important; } } /* (fim /chart) */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /social — escopo: .social-page ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ * SOCIAL PAGE — MOBILE PREMIUM PATCH v2 (≤768px) * Adicionado em 2026-05-02. Override seguro no FINAL do mobile.css. * Escopo absoluto: TODA regra usa .social-page como âncora — essa * classe só existe no
de pageSocial(). * Impacto ZERO em outras páginas. * * Existem regras anteriores em linhas 1614-1793 — estas COMPLEMENTAM * cobrindo gaps: top-signal, header, mod-panel, sentiment voting, * trending, composer e PERFORMANCE (animações pesadas + blur). * * Obs: a /social NÃO tem menu "Indicadores" (é feed social, não chart). * O requisito de hide do menu Indicadores não se aplica aqui. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* ── PÁGINA / wrapper ──────────────────────────────── */ .social-page{ padding-left: 12px !important; padding-right: 12px !important; overflow-x: hidden !important; max-width: 100vw !important; } .social-page *{ min-width: 0; } /* ── PERFORMANCE — desliga animações pesadas ───────── */ /* Aurora de fundo (radial-gradients animados em scale) — ESTÁTICO no mobile */ .social-page::before{ animation: none !important; opacity: 0.7 !important; } /* Borda animada do top-signal (conic-gradient + blur 4px rotacionando) — pesadíssima */ .social-page .soc-top-signal::before{ animation: none !important; opacity: 0.25 !important; filter: none !important; } /* Hovers sem transform (anti-flicker no toque) */ .social-page .soc-react-btn:hover, .social-page .soc-share-btn:hover, .social-page .soc-story-avatar:hover, .social-page .soc-story:hover, .social-page .soc-top-signal-copy:hover, .social-page .soc-post:hover{ transform: none !important; } /* Backdrop-filter blur 14px em vários cards — REDUZIDO no mobile */ .social-page .section-card, .social-page .soc-composer, .social-page .soc-pub-card{ backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* ── HEADER (Social Trading + ONLINE badge) ────────── */ .social-page .page-hdr{ flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; } .social-page .page-hdr-left, .social-page .page-hdr-right{ width: 100% !important; min-width: 0 !important; } .social-page .page-title{ font-size: 1.05rem !important; letter-spacing: 1px !important; word-break: break-word !important; } .social-page .status-badge.live{ font-size: 0.62rem !important; padding: 6px 12px !important; letter-spacing: 1px !important; } /* ── COMPOSER / PUB CARD — refinos extras ─────────── */ .social-page .soc-composer, .social-page .soc-pub-card{ padding: 12px !important; border-radius: 13px !important; margin-bottom: 12px !important; } .social-page .soc-composer textarea, .social-page .soc-pub-card textarea{ font-size: 0.82rem !important; line-height: 1.5 !important; } /* ── MOD PANEL ─────────────────────────────────────── */ .social-page .soc-mod-panel{ padding: 12px !important; border-radius: 13px !important; margin-bottom: 12px !important; overflow: hidden !important; } /* ── TRENDING ──────────────────────────────────────── */ .social-page [class*="soc-trending"]{ padding: 12px !important; border-radius: 13px !important; overflow: hidden !important; } .social-page [class*="soc-trending-item"]{ flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; } /* ── FEED POSTS — refinos extras (cards já cobertos antes) */ .social-page .soc-post{ padding: 13px !important; border-radius: 13px !important; margin-bottom: 10px !important; } .social-page .soc-post-dir.call, .social-page .soc-post-dir.put{ font-size: 0.56rem !important; padding: 2px 7px !important; } .social-page .soc-post-meta{ flex-wrap: wrap !important; gap: 6px !important; font-size: 0.66rem !important; } .social-page .soc-post-asset{ font-size: 0.78rem !important; word-break: break-word !important; } /* ── REACTION BUTTONS — touch friendly (mantém layout) */ .social-page .soc-react-btn, .social-page .soc-share-btn{ padding: 6px 11px !important; font-size: 0.66rem !important; min-height: 34px !important; margin-right: 4px !important; } /* ── STORIES BAR — refinos extras (já tem scroll-x) ── */ .social-page .soc-stories, .social-page .soc-stories-bar{ padding: 4px 0 10px !important; gap: 10px !important; } .social-page .soc-story-avatar, .social-page .soc-story{ width: 56px !important; height: 56px !important; } .social-page [class*="soc-story-name"]{ font-size: 0.58rem !important; max-width: 64px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ── TOP SIGNAL CARD (sidebar premium) ─────────────── */ .social-page .soc-top-signal{ padding: 14px !important; border-radius: 14px !important; } .social-page .soc-top-signal-badge{ font-size: 0.56rem !important; padding: 3px 8px !important; letter-spacing: 1px !important; margin-bottom: 10px !important; } .social-page .soc-top-signal-copy{ width: 100% !important; padding: 11px 14px !important; font-size: 0.74rem !important; min-height: 44px !important; letter-spacing: 1px !important; border-radius: 10px !important; } .social-page [class*="soc-top-signal-pair"], .social-page [class*="soc-top-signal-symbol"]{ word-break: break-word !important; } /* ── SENTIMENT VOTING (card "Sentimento da Comunidade") */ .social-page [id*="sentiment"], .social-page [class*="sent-"]{ word-break: break-word !important; overflow-wrap: anywhere !important; } .social-page [class*="sent-vote-btn"], .social-page [class*="sent-btn"]{ min-height: 40px !important; padding: 9px 12px !important; font-size: 0.7rem !important; } .social-page [class*="sent-bar"]{ height: 6px !important; } /* ── SHARE MODAL — refinos finais sobre o existente ── */ .social-page .soc-share-modal{ border-radius: 14px !important; max-height: 90vh !important; overflow-y: auto !important; } .social-page .soc-share-divider{ font-size: 0.56rem !important; margin: 12px 0 8px !important; } .social-page .soc-share-copy-input{ font-size: 0.74rem !important; padding: 9px 11px !important; min-height: 40px !important; flex: 1 1 100% !important; } .social-page .soc-share-modal-close{ width: 32px !important; height: 32px !important; font-size: 1rem !important; } /* ── PROFILE DRAWER (já tem 92vw em 1659) ─────────── */ .social-page .soc-profile-drawer{ border-radius: 16px 0 0 16px !important; } /* ── STORY MODAL (fullscreen viewer) ───────────────── */ .social-page .soc-story-modal{ padding: 0 !important; } /* ── SECTION CARDS no /social (Sentimento + outros) ── */ .social-page .section-card{ padding: 12px !important; border-radius: 13px !important; } .social-page .section-card-header{ padding: 10px 12px !important; flex-wrap: wrap !important; gap: 8px !important; } .social-page .section-card-title{ font-size: 0.72rem !important; letter-spacing: 1.1px !important; word-break: break-word !important; } .social-page .section-card-body{ padding: 11px !important; } /* ── FILTER CHIPS (já cobertos antes, refino extra) ── */ .social-page .filter-chip{ font-size: 0.6rem !important; } /* ── SAFETY: ninguém estoura a tela ────────────────── */ .social-page .soc-composer, .social-page .soc-pub-card, .social-page .soc-mod-panel, .social-page .soc-post, .social-page .soc-top-signal, .social-page .section-card, .social-page .soc-share-modal, .social-page .soc-profile-drawer, .social-page > div[style*="grid-template-columns:1fr 300px"]{ max-width: 100% !important; box-sizing: border-box !important; } } /* Telas muito pequenas (≤480px) — refinos finais — só /social */ @media (max-width: 480px){ .social-page .page-title{ font-size: 0.95rem !important; } .social-page .soc-share-grid{ grid-template-columns: repeat(2, 1fr) !important; /* 6 plataformas → 3 linhas */ } .social-page .soc-share-option{ min-height: 64px !important; padding: 10px 8px !important; } .social-page .soc-share-icon{ width: 32px !important; height: 32px !important; } .social-page [class*="soc-share-label"]{ font-size: 0.62rem !important; } .social-page .soc-story-avatar, .social-page .soc-story{ width: 50px !important; height: 50px !important; } .social-page .soc-top-signal-copy{ font-size: 0.7rem !important; } .social-page .filter-chip{ font-size: 0.56rem !important; padding: 6px 11px !important; } /* Composer textarea menor */ .social-page .soc-composer textarea, .social-page .soc-pub-card textarea{ font-size: 0.78rem !important; } } /* (fim /social) */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /treino — escopo: body.route-treino + .train-* (premium + reorder v1+v2)║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /history-ia — escopo: .hv-* ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ * HISTORY-IA — MOBILE PREMIUM PATCH (≤768px) * Escopo absoluto: namespace .hv-* (rota /history-ia) * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ .hv-page{ padding-left: 12px; padding-right: 12px; overflow-x: hidden; max-width: 100vw; } .hv-page * { min-width: 0; } .hv-page.hv-first-paint { animation: none !important; } .hv-hero{ padding: 18px 16px !important; border-radius: 18px !important; margin-bottom: 14px !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; } .hv-hero::before{ display: none !important; } .hv-hero-top{ flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } .hv-hero-greet{ font-size: 1.25rem !important; line-height: 1.2 !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .hv-hero-sub{ font-size: 0.7rem !important; margin-top: 4px !important; word-break: break-word !important; } .hv-status{ margin-top: 8px !important; padding: 6px 12px !important; font-size: 0.58rem !important; align-self: flex-start !important; } .hv-hero-gauge{ width: 120px !important; height: 120px !important; align-self: center !important; } .hv-hero-gauge-inner .num{ font-size: 1.55rem !important; } .hv-hero-gauge-inner .lbl{ font-size: 0.5rem !important; letter-spacing: 0.14em !important; } .hv-hero-kpis{ grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .hv-hero-k{ padding: 10px !important; min-width: 0 !important; overflow: hidden !important; } .hv-hero-k .v{ font-size: 1.05rem !important; line-height: 1.1 !important; word-break: break-word !important; } .hv-hero-k .l{ font-size: 0.5rem !important; letter-spacing: 0.12em !important; margin-top: 3px !important; } .hv-hero-k .delta{ font-size: 0.56rem !important; margin-top: 2px !important; } .hv-tabs{ gap: 6px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; padding-bottom: 4px !important; margin-bottom: 12px !important; } .hv-tabs::-webkit-scrollbar{ display: none; } .hv-tab{ flex: 0 0 auto !important; white-space: nowrap !important; padding: 9px 13px !important; font-size: 0.62rem !important; min-height: 40px !important; letter-spacing: 0.08em !important; } .hv-tab .badge{ font-size: 0.5rem !important; padding: 1px 5px !important; } .hv-card{ padding: 14px !important; border-radius: 14px !important; margin-bottom: 12px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } .hv-card-h{ flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 10px !important; } .hv-card-h{ font-size: 0.74rem !important; letter-spacing: 0.1em !important; } .hv-card-h .ic{ width: 28px !important; height: 28px !important; } .hv-card-h .meta{ font-size: 0.54rem !important; letter-spacing: 0.1em !important; } .hv-grid-2{ grid-template-columns: 1fr !important; gap: 12px !important; } .hv-grid-3{ grid-template-columns: 1fr !important; gap: 12px !important; } .hv-kpi-row{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 14px !important; } .hv-kpi{ padding: 12px !important; min-width: 0 !important; overflow: hidden !important; } .hv-kpi .ic{ width: 30px !important; height: 30px !important; flex-shrink: 0 !important; } .hv-kpi .v{ font-size: 1.05rem !important; word-break: break-word !important; } .hv-kpi .l{ font-size: 0.5rem !important; letter-spacing: 0.12em !important; word-break: break-word !important; } .hv-chips{ gap: 5px !important; margin-bottom: 12px !important; } .hv-chips .lbl{ font-size: 0.55rem !important; letter-spacing: 0.12em !important; margin-right: 4px !important; } .hv-chips .sep{ display: none !important; } .hv-chip{ font-size: 0.58rem !important; padding: 6px 10px !important; min-height: 32px !important; } .hv-curve{ height: 200px !important; } .hv-curve-legend{ flex-wrap: wrap !important; gap: 8px !important; font-size: 0.58rem !important; } .hv-curve-legend .it{ gap: 5px !important; } .hv-curve-delta{ margin-left: 0 !important; font-size: 0.62rem !important; flex: 1 1 100% !important; text-align: right !important; } .hv-ops{ max-height: 420px !important; padding-right: 4px !important; } .hv-op{ padding: 11px 12px !important; border-radius: 11px !important; gap: 6px !important; } .hv-op:hover{ transform: none !important; } .hv-op-time{ font-size: 0.58rem !important; } .hv-op-result{ font-size: 0.58rem !important; padding: 3px 7px !important; } .hv-op-asset{ font-size: 0.74rem !important; word-break: break-word !important; } .hv-op-asset .tf, .hv-op-asset .dir{ font-size: 0.54rem !important; } .hv-op-stake, .hv-op-bal{ font-size: 0.66rem !important; text-align: left !important; } .hv-op-stake .lbl, .hv-op-bal .lbl{ font-size: 0.46rem !important; } .hv-op-pnl{ font-size: 0.78rem !important; } .hv-heatmap{ grid-template-columns: 36px repeat(24, minmax(14px, 1fr)) !important; gap: 2px !important; min-width: 540px; } .hv-card > #histHeatmap, .hv-card #histHeatmap{ overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin; } .hv-hm-cell{ min-height: 18px; } .hv-hm-cell:hover{ transform: none !important; filter: none !important; } .hv-hm-lbl-h{ font-size: 0.42rem !important; } .hv-hm-lbl-d{ font-size: 0.54rem !important; padding-right: 5px !important; } .hv-hm-legend{ font-size: 0.5rem !important; flex-wrap: wrap !important; gap: 6px !important; } .hv-tl{ max-height: 460px !important; padding-right: 4px !important; } .hv-alert{ padding: 11px !important; gap: 10px !important; border-radius: 12px !important; margin-bottom: 8px !important; } .hv-alert:hover{ transform: none !important; } .hv-alert-time{ width: 44px !important; } .hv-alert-time .h{ font-size: 0.74rem !important; } .hv-alert-time .d{ font-size: 0.46rem !important; } .hv-alert-row1{ gap: 6px !important; margin-bottom: 6px !important; } .hv-pill{ font-size: 0.52rem !important; padding: 2px 7px !important; letter-spacing: 0.04em !important; } .hv-alert-symbol{ font-size: 0.74rem !important; word-break: break-word !important; } .hv-alert-tf{ font-size: 0.5rem !important; letter-spacing: 0.08em !important; } .hv-alert-conf{ font-size: 0.62rem !important; } .hv-alert-summary{ font-size: 0.64rem !important; line-height: 1.5 !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .hv-alert-tags{ gap: 4px !important; margin-top: 6px !important; } .hv-tag{ font-size: 0.48rem !important; padding: 2px 6px !important; } .hv-top-row{ grid-template-columns: 26px 1fr 50px !important; gap: 8px !important; padding: 10px 11px !important; border-radius: 10px !important; } .hv-top-row:hover{ transform: none !important; } .hv-top-rank{ width: 22px !important; height: 22px !important; font-size: 0.58rem !important; } .hv-top-sym{ font-size: 0.74rem !important; word-break: break-word !important; } .hv-top-sym .meta{ font-size: 0.5rem !important; } .hv-top-wr{ font-size: 0.78rem !important; } .hv-top-bar{ display: none !important; } .hv-conv{ max-height: 480px !important; padding-right: 4px !important; gap: 8px !important; } .hv-msg{ padding: 11px 12px !important; gap: 10px !important; border-radius: 12px !important; } .hv-msg-av{ width: 30px !important; height: 30px !important; font-size: 0.6rem !important; border-radius: 8px !important; } .hv-msg-meta{ gap: 6px !important; margin-bottom: 4px !important; } .hv-msg-name{ font-size: 0.6rem !important; } .hv-msg-time{ font-size: 0.5rem !important; } .hv-msg-tag{ font-size: 0.46rem !important; padding: 1px 5px !important; } .hv-msg-text{ font-size: 0.7rem !important; line-height: 1.55 !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .hv-ctx{ padding: 10px 12px !important; gap: 8px !important; border-radius: 12px !important; margin-bottom: 14px !important; } .hv-ctx .lbl{ font-size: 0.54rem !important; letter-spacing: 0.08em !important; } .hv-ctx .sym{ font-size: 0.78rem !important; } .hv-ctx .tf{ font-size: 0.5rem !important; padding: 2px 6px !important; } .hv-ctx .dir{ font-size: 0.66rem !important; } .hv-ds{ padding: 10px 12px !important; gap: 10px !important; border-radius: 12px !important; flex-wrap: wrap !important; } .hv-ds .v{ font-size: 0.82rem !important; } .hv-ds .l{ font-size: 0.52rem !important; letter-spacing: 0.04em !important; } .hv-ds .right{ margin-left: 0 !important; flex: 1 1 100% !important; font-size: 0.62rem !important; } .hv-empty{ padding: 24px 14px !important; font-size: 0.66rem !important; } .hv-mgmt{ padding: 14px !important; border-radius: 14px !important; margin-top: 18px !important; } .hv-mgmt-h{ font-size: 0.62rem !important; letter-spacing: 0.1em !important; gap: 8px !important; } .hv-mgmt-h .sub{ font-size: 0.5rem !important; } .hv-mgmt-actions{ grid-template-columns: 1fr !important; gap: 8px !important; } .hv-btn{ padding: 12px 14px !important; font-size: 0.62rem !important; min-height: 48px !important; } .hv-btn .sub{ font-size: 0.46rem !important; } .hv-mgmt-warn{ font-size: 0.6rem !important; padding: 10px 12px !important; line-height: 1.5 !important; word-break: break-word !important; } .hv-status .pdot{ animation-duration: 2.4s !important; } .hv-ctx .dot{ animation-duration: 2.4s !important; } .hv-page .hv-line-real, .hv-page .hv-line-cop{ stroke-width: 1.8 !important; } .hv-gg-fg{ transition-duration: 0.8s !important; } .hv-alert-bar .fill{ transition-duration: 0.4s !important; } .hv-page, .hv-hero, .hv-hero-top, .hv-card, .hv-tabs, .hv-grid-2, .hv-grid-3, .hv-kpi-row, .hv-kpi, .hv-chips, .hv-curve, .hv-ops, .hv-op, .hv-tl, .hv-alert, .hv-top, .hv-top-row, .hv-conv, .hv-msg, .hv-ctx, .hv-ds, .hv-mgmt{ max-width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 480px){ .hv-hero{ padding: 14px 12px !important; } .hv-hero-greet{ font-size: 1.1rem !important; } .hv-hero-gauge{ width: 100px !important; height: 100px !important; } .hv-hero-gauge-inner .num{ font-size: 1.3rem !important; } .hv-hero-kpis{ grid-template-columns: 1fr !important; } .hv-kpi-row{ grid-template-columns: 1fr !important; } .hv-tab{ padding: 8px 11px !important; font-size: 0.58rem !important; } .hv-curve{ height: 170px !important; } .hv-alert-time{ width: 38px !important; } .hv-alert-time .h{ font-size: 0.66rem !important; } .hv-card-h{ font-size: 0.66rem !important; } } /* (fim /history-ia) */ /* ╔═══════════════════════════════════════════════════════════════════╗ * ║ /mesa — escopo: .mv-* (Mesa Operacional V3) ║ * ╚═══════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ * MESA — MOBILE PREMIUM PATCH (≤768px) * Adicionado em 2026-05-02. Override seguro. * Escopo absoluto: namespace .mv-* (rota /mesa renderizada por mesa_v3.js). * Esses seletores não existem em outras rotas → impacto ZERO. * Desktop (≥769px) intocado pela media query. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* ── Página ───────────────────────────────────────── */ .mv-page{ padding: 12px !important; background-image: radial-gradient(700px 500px at 12% 8%, rgba(124,58,237,0.12), transparent 60%), radial-gradient(600px 400px at 88% 92%, rgba(34,211,238,0.08), transparent 60%) !important; } .mv-page * { min-width: 0; } .mv-first-paint{ animation: none !important; } /* anti-flicker no toque */ /* ── HEADER ───────────────────────────────────────── */ .mv-head{ flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 16px !important; margin-bottom: 12px !important; } .mv-head::before{ display: none !important; } /* gradiente radial pesado */ .mv-head-l{ gap: 10px !important; width: 100% !important; min-width: 0 !important; } .mv-head-ic{ width: 36px !important; height: 36px !important; font-size: 18px !important; box-shadow: 0 4px 14px -4px rgba(124,58,237,0.45) !important; } .mv-title h1{ font-size: 1.15rem !important; word-break: break-word !important; } .mv-title .sub{ font-size: 9px !important; margin-top: 2px !important; } .mv-pills{ width: 100% !important; gap: 6px !important; flex-wrap: wrap !important; } .mv-pill{ padding: 5px 10px !important; font-size: 9px !important; letter-spacing: 0.06em !important; } .mv-pill .pd{ width: 5px !important; height: 5px !important; animation-duration: 2.4s !important; } /* ── HERO TIMING ──────────────────────────────────── */ .mv-hero{ grid-template-columns: 1fr !important; gap: 12px !important; padding: 14px !important; border-radius: 16px !important; border-width: 1px !important; box-shadow: 0 0 0 2px rgba(52,211,153,0.06), 0 8px 22px -10px rgba(16,185,129,0.30) !important; } .mv-hero.warn{ box-shadow: 0 0 0 2px rgba(251,191,36,0.06), 0 8px 22px -10px rgba(245,158,11,0.30) !important; } .mv-hero.late{ box-shadow: 0 0 0 2px rgba(248,113,113,0.06), 0 8px 22px -10px rgba(220,38,38,0.30) !important; } .mv-hero::before{ display: none !important; } /* Countdown (usado pelo .mv-countdown E pelo .mv-cd) */ .mv-countdown, .mv-cd{ min-width: 0 !important; text-align: center !important; } .mv-countdown .lbl, .mv-cd .lbl{ font-size: 10px !important; letter-spacing: 0.14em !important; margin-bottom: 2px !important; } .mv-countdown .time, .mv-cd .time{ font-size: 50px !important; letter-spacing: -1.5px !important; text-shadow: 0 0 18px rgba(110,231,183,0.45) !important; } .mv-hero.idle .mv-countdown .time, .mv-hero.idle .mv-cd .time{ font-size: 28px !important; } .mv-countdown .unit, .mv-cd .unit{ font-size: 11px !important; } /* Status bar (.mv-status-bar / .mv-st) */ .mv-status-bar, .mv-st{ gap: 8px !important; } .mv-status-pill, .mv-st-pill{ font-size: 11px !important; padding: 7px 12px !important; align-self: stretch !important; justify-content: center !important; word-break: break-word !important; line-height: 1.35 !important; text-align: center !important; white-space: normal !important; } .mv-status-pill .ic{ font-size: 14px !important; flex-shrink: 0 !important; } /* Trade info (.mv-trade-info 4 cols / .mv-info 5 cols) → 2 cols mobile */ .mv-trade-info, .mv-info{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; align-items: start !important; } .mv-trade-info .item, .mv-info .it{ min-width: 0 !important; overflow: hidden !important; } .mv-trade-info .l, .mv-info .l{ font-size: 8.5px !important; letter-spacing: 0.12em !important; } .mv-trade-info .v, .mv-info .v{ font-size: 14px !important; word-break: break-word !important; white-space: normal !important; } .mv-trade-info .v.dir, .mv-info .v.dir{ font-size: 18px !important; } .mv-trade-info .v.pair{ font-size: 14px !important; } /* CTAs (.mv-ctas / .mv-cta) — full-width touch-friendly */ .mv-ctas, .mv-cta{ min-width: 0 !important; width: 100% !important; gap: 8px !important; } .mv-cta-deriv{ padding: 12px 14px !important; font-size: 13px !important; box-shadow: 0 6px 18px -6px rgba(16,185,129,0.45) !important; min-height: 48px !important; } .mv-cta-deriv:hover{ transform: none !important; box-shadow: 0 6px 18px -6px rgba(16,185,129,0.55) !important; } .mv-cta-deriv .b{ font-size: 15px !important; } .mv-cta-deriv .sb{ font-size: 9px !important; } .mv-cta-manual{ padding: 11px 14px !important; font-size: 12px !important; min-height: 44px !important; } .mv-cta-manual .b{ font-size: 14px !important; } .mv-cta-manual .sb{ font-size: 9px !important; } .mv-cta button{ padding: 11px 14px !important; font-size: 12px !important; min-height: 44px !important; } .mv-cta button:hover{ transform: none !important; } .mv-cta .b{ font-size: 14px !important; } .mv-cta .sb{ font-size: 9px !important; } /* ── CONTROL BAR (mercado/ativo/tf/modo/analyze) ──── */ .mv-control{ grid-template-columns: 1fr 1fr !important; gap: 7px !important; padding: 10px 12px !important; border-radius: 14px !important; margin-bottom: 12px !important; } .mv-control-grp{ gap: 3px !important; min-width: 0 !important; } .mv-control-grp .l{ font-size: 8.5px !important; letter-spacing: 0.12em !important; } .mv-select{ height: 36px !important; font-size: 12px !important; padding: 8px 26px 8px 10px !important; border-radius: 9px !important; } .mv-mode{ height: 36px !important; } .mv-mode label{ font-size: 10px !important; gap: 4px !important; } .mv-btn-analyze{ grid-column: 1 / -1 !important; height: 44px !important; font-size: 13px !important; padding: 0 18px !important; box-shadow: 0 6px 16px -6px rgba(16,185,129,0.5) !important; } .mv-btn-analyze:hover:not(:disabled){ transform: none !important; } .mv-loop-status{ grid-column: 1 / -1 !important; height: 32px !important; font-size: 9.5px !important; padding: 7px 12px !important; align-self: stretch !important; justify-content: center !important; } /* ── GRID PRINCIPAL (3-col → 1-col já cobre 1280px, refino mobile) ── */ .mv-grid{ grid-template-columns: 1fr !important; gap: 12px !important; } /* ── CARDS ────────────────────────────────────────── */ .mv-card{ padding: 14px !important; border-radius: 14px !important; max-height: none !important; /* libera scroll natural */ backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; } .mv-card-h{ margin-bottom: 10px !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 10px !important; letter-spacing: 0.12em !important; } .mv-card-h .ic{ width: 26px !important; height: 26px !important; font-size: 13px !important; } .mv-card-h .meta{ font-size: 9px !important; letter-spacing: 0.08em !important; } /* Candle info 2x2 (.mv-candle-info / .mv-cdl) */ .mv-candle-info, .mv-cdl{ gap: 6px !important; margin-bottom: 10px !important; } .mv-candle-cell, .mv-cdl-c{ padding: 8px 10px !important; border-radius: 9px !important; } .mv-candle-cell .l, .mv-cdl-c .l{ font-size: 8.5px !important; letter-spacing: 0.12em !important; } .mv-candle-cell .v, .mv-cdl-c .v{ font-size: 13px !important; word-break: break-word !important; } /* PASSO-A-PASSO */ .mv-steps{ gap: 8px !important; } .mv-step{ padding: 10px 12px !important; gap: 10px !important; border-radius: 9px !important; } .mv-step .num{ width: 22px !important; height: 22px !important; font-size: 11px !important; } .mv-step .txt{ font-size: 12px !important; line-height: 1.45 !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .mv-confirm{ padding: 12px !important; margin-top: 10px !important; } .mv-confirm-q{ font-size: 10px !important; margin-bottom: 7px !important; } .mv-confirm-btn{ padding: 11px 8px !important; font-size: 11px !important; min-height: 40px !important; } .mv-confirm-btn:hover{ transform: none !important; } /* DEBATE / CHAT */ .mv-chat-list{ gap: 10px !important; padding-right: 4px !important; } .mv-msg{ gap: 8px !important; } .mv-msg{ animation: none !important; opacity: 1 !important; transform: none !important; } .mv-avatar, .mv-av{ width: 30px !important; height: 30px !important; font-size: 13px !important; border-width: 1.5px !important; } .mv-msg-body, .mv-mb{ min-width: 0 !important; } .mv-msg-head, .mv-mh{ gap: 6px !important; margin-bottom: 3px !important; } .mv-msg-head .name, .mv-mh .name{ font-size: 11px !important; word-break: break-word !important; } .mv-msg-head .role, .mv-mh .role{ font-size: 8.5px !important; padding: 1px 5px !important; letter-spacing: 0.08em !important; } .mv-mh .score{ font-size: 8.5px !important; } .mv-mh .score b{ font-size: 9.5px !important; } .mv-msg-text, .mv-mt{ font-size: 12px !important; line-height: 1.5 !important; padding: 8px 11px !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* PERSONAS LATERAL */ .mv-personas{ gap: 6px !important; margin-bottom: 10px !important; } .mv-persona{ padding: 8px 10px !important; gap: 8px !important; border-radius: 9px !important; } .mv-persona-av{ width: 28px !important; height: 28px !important; font-size: 13px !important; } .mv-persona-info .name{ font-size: 11px !important; word-break: break-word !important; } .mv-persona-info .status, .mv-persona-info .blk{ font-size: 8.5px !important; letter-spacing: 0.08em !important; } .mv-persona-score{ font-size: 12px !important; min-width: 30px !important; } /* HISTÓRICO (replay) */ .mv-replay-h{ font-size: 9px !important; letter-spacing: 0.12em !important; margin: 10px 0 6px !important; } .mv-replay-row{ gap: 5px !important; } .mv-replay-pill{ padding: 4px 8px !important; font-size: 9px !important; } .mv-replay-pill .dot{ width: 5px !important; height: 5px !important; } /* EMPTY */ .mv-empty{ padding: 28px 14px !important; font-size: 12px !important; } .mv-empty .ic{ font-size: 28px !important; margin-bottom: 8px !important; } .mv-empty .t{ font-size: 13px !important; } /* SAFETY: nada estoura a tela */ .mv-page, .mv-head, .mv-hero, .mv-control, .mv-grid, .mv-card, .mv-candle-info, .mv-cdl, .mv-trade-info, .mv-info, .mv-ctas, .mv-cta, .mv-steps, .mv-chat-list, .mv-personas, .mv-persona, .mv-replay-row{ max-width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 480px){ .mv-page{ padding: 10px !important; } .mv-title h1{ font-size: 1.05rem !important; } .mv-countdown .time, .mv-cd .time{ font-size: 42px !important; letter-spacing: -1px !important; } .mv-hero.idle .mv-countdown .time, .mv-hero.idle .mv-cd .time{ font-size: 24px !important; } /* Trade info → 1 coluna em telas muito pequenas */ .mv-trade-info, .mv-info{ grid-template-columns: 1fr !important; } .mv-trade-info .v, .mv-info .v{ font-size: 13px !important; } /* Control bar → 1 coluna */ .mv-control{ grid-template-columns: 1fr !important; } .mv-cta-deriv{ font-size: 12px !important; padding: 11px 13px !important; } .mv-cta-deriv .b{ font-size: 14px !important; } /* Step text um pouco menor */ .mv-step .txt{ font-size: 11.5px !important; } } /* MESA_PREMIUM_v1 END */ /* ════════════════════════════════════════════════════════════════════ */ /* mobile-optimization.css — END (com /mesa adicionado em 2026-05-02) */ /* ════════════════════════════════════════════════════════════════════ */