/* CoreScore — Camada MOBILE (16/06/2026). Reformulacao mobile-first do painel SEM tocar no CSS desktop. TUDO aqui vive sob @media (max-width:768px) ou esta oculto por padrao (elementos injetados por js/mobile-nav.js so aparecem no mobile). Carregar POR ULTIMO no pra vencer a cascade. Padroes adotados (aprovados 16/06): - Navegacao primaria = bottom tab bar (Grade / Mercado Justo / Robos / Mais) - Master-detail vira TELAS: lista full-width; tocar no jogo abre analise em tela cheia com botao "Voltar". - Header compacto + barras de data/status/liga em scroll horizontal. - Ferramentas densas da topbar (Ver como/Atualizar/Pausa/cache) num bottom-sheet acionado por engrenagem. */ /* ── Elementos injetados: ocultos por padrao (so aparecem no mobile) ───── */ #mNavToggle, #mToolsToggle, #mBackBtn, #mTabBar, #mSidebarBackdrop { display: none; } @media (max-width: 768px) { /* Espaco pro tab bar fixo nao cobrir conteudo + sem scroll horizontal solto */ body { padding-bottom: 60px; overflow-x: hidden; } /* ── Header compacto + sticky ──────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 90; margin-left: 0 !important; padding: 8px 10px; gap: 8px; } .topbar .header-page { font-size: 13px; padding: 4px 10px; } .topbar .hdate { display: none; } /* Botoes injetados no header */ #mNavToggle, #mToolsToggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: transparent; border: 1px solid var(--sb-border); border-radius: 10px; color: var(--sb-text, var(--text)); cursor: pointer; padding: 0; } #mNavToggle { order: -1; } /* hamburguer sempre primeiro */ #mNavToggle svg, #mToolsToggle svg { width: 20px; height: 20px; } /* Ferramentas (Ver como / Atualizar / Pausa / cache) viram bottom-sheet ancorado abaixo do header, acionado pela engrenagem. */ .topbar-right { display: none; position: absolute; top: calc(100% + 6px); right: 8px; flex-direction: column; align-items: stretch; gap: 10px; min-width: 190px; max-width: calc(100vw - 24px); background: var(--card, #fff); color: var(--text); border: 1px solid var(--sb-border); border-radius: 12px; padding: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); z-index: 95; } body[data-mobile-tools-open="true"] .topbar-right { display: flex; } .topbar-right .preview-as-wrap { width: 100%; } .topbar-right .hbtn { width: 100%; text-align: center; padding: 9px 12px; } /* ── Sidebar (menu) vira drawer overlay com backdrop ───────────────── */ .app-sidebar { z-index: 140; box-shadow: 4px 0 24px rgba(0,0,0,.35); } .app-sidebar-toggle { display: none; } /* chevron de recolher nao faz sentido no drawer */ #mSidebarBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 135; -webkit-tap-highlight-color: transparent; } body[data-app-sidebar-mobile-open="true"] #mSidebarBackdrop { display: block; } /* ── Barras de data / status / liga: trilho de scroll horizontal ───── */ .date-nav, .status-nav, .league-nav { margin-left: 0 !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 7px 10px; } .date-nav::-webkit-scrollbar, .status-nav::-webkit-scrollbar, .league-nav::-webkit-scrollbar { display: none; } .date-btn, .sf-btn, .ln-btn { flex: 0 0 auto; } /* grupo "Ordenar" + badge continuam no fim do trilho (sem empurrar) */ .status-nav > div[style*="margin-left:auto"] { margin-left: 8px !important; } /* ── Layout master-detail -> telas ─────────────────────────────────── */ .layout { margin-left: 0 !important; display: block; height: auto; overflow: visible; } .sidebar { width: 100% !important; min-width: 0 !important; border-right: 0; overflow: visible; } .sidebar #toggleBtn, .sidebar .resize-handle { display: none; } #sidebarContent { height: auto; overflow: visible; } .sw { position: static; } /* evita conflito de sticky com o header */ /* analise (.main) escondida ate selecionar um jogo */ .main { margin-left: 0 !important; display: none; height: auto; overflow: visible; padding: 14px 14px 76px; } body[data-mobile-detail-open="true"] .sidebar { display: none; } body[data-mobile-detail-open="true"] .main { display: block; } /* em detalhe: header + barras somem pra dar tela cheia */ body[data-mobile-detail-open="true"] .topbar, body[data-mobile-detail-open="true"] .date-nav, body[data-mobile-detail-open="true"] .status-nav, body[data-mobile-detail-open="true"] .league-nav { display: none; } /* Botao Voltar: barra FIXA no topo (fora do #main, que e' reescrito pelo render.js a cada selecao de jogo — por isso nao pode viver dentro dele). */ #mBackBtn { position: fixed; top: 0; left: 0; right: 0; z-index: 100; align-items: center; gap: 6px; text-align: left; padding: 13px 14px calc(13px + env(safe-area-inset-top, 0)); font-size: 14px; font-weight: 700; background: var(--card, #fff); color: var(--text); border: 0; border-bottom: 1px solid var(--sb-border); box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: pointer; } body[data-mobile-detail-open="true"] #mBackBtn { display: flex; } body[data-mobile-detail-open="true"] .main { padding-top: 64px; } #mBackBtn .mback-chevron { font-size: 20px; line-height: 1; } /* ── Bottom tab bar ────────────────────────────────────────────────── */ #mTabBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; height: 58px; background: var(--card, #fff); border-top: 1px solid var(--sb-border); box-shadow: 0 -2px 12px rgba(0,0,0,.12); padding-bottom: env(safe-area-inset-bottom, 0); } #mTabBar .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; cursor: pointer; color: var(--text2, #6b7280); font-size: 10px; font-weight: 600; text-decoration: none; font-family: inherit; } #mTabBar .mtab svg { width: 22px; height: 22px; stroke-width: 1.9; } #mTabBar .mtab.mtab-active { color: var(--accent, #2563eb); } } /* ════════════════════════════════════════════════════════════════════════ FASE 2 — paginas secundarias (Mercado Justo, Surebet, Realtime, etc.) Elas nao tem .topbar; a navegacao mobile vem da bottom tab bar + drawer. Cada uma usa um shell proprio que no desktop recebe margin-left da sidebar — no mobile precisa zerar (senao o conteudo fica empurrado 240px pra fora) e abrir espaco pro tab bar. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .rt-shell, .fc-shell, .rb-shell, .mj-main, .lbk-shell, .sbt-shell, .val-shell, .mov-shell, .ant-shell, .lb-shell, .plans-page-shell, .auth-main { margin-left: 0 !important; padding-bottom: 80px !important; box-sizing: border-box; } /* Grids de cards -> 1 coluna (varios so colapsavam em 640px ou nem isso) */ .rt-grid, .rb-grid, .mj-picks-grid, .lbk-grid, .sbt-grid, .val-grid, .mov-grid, .ant-grid, .lb-eff-grid, .account-grid, .plans-grid { grid-template-columns: 1fr !important; } /* 17/06 (dono): KPIs "Previsões calculadas" e "Falhas" escondidos no mobile (mantidos no desktop). */ .fc-kpi-optional { display: none !important; } /* Tabelas largas (forecasts 32 colunas, leaderboard): scroll horizontal ISOLADO no proprio elemento, sem estourar a pagina. */ .fc-table, .lb-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; } /* Drawers/modais largos ocupam quase a tela inteira no celular */ .rb-drawer, .lbk-modal { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; border-radius: 0 !important; } /* Abas da analise do jogo (.tabs) viram UM trilho rolavel de 1 linha — no desktop sao flex-wrap:wrap e no celular ocupavam 4 linhas, empurrando o conteudo pra muito baixo. Idem legendas/abas de outras paginas. ATENCAO: .ant-tb (filtros da Antecipacao) NAO entra aqui — ela ja tem flex-wrap:wrap proprio; campos de formulario devem EMPILHAR, nao rolar. */ .tabs, .mov-legend, .val-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar, .mov-legend::-webkit-scrollbar, .val-tabs::-webkit-scrollbar { display: none; } .tabs .tbtn { flex: 0 0 auto; white-space: nowrap; } } /* ════════════════════════════════════════════════════════════════════════ FASE 3 — polimento (tipografia, alvos de toque, heros, formularios) ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Heros/titulos gigantes encolhem pra caber sem quebrar palavra */ .plans-hero h1 { font-size: 26px !important; line-height: 1.15; } .plans-hero p { font-size: 14px !important; } /* Alvos de toque: botoes/links de acao com altura confortavel (>=40px) */ .hbtn, .sf-btn, .date-btn, .ln-btn { min-height: 34px; } /* Formularios (account/auth): largura total, fonte 16px evita zoom no iOS */ .auth-main input, .auth-main select, .auth-main textarea, .account-grid input, .account-grid select { font-size: 16px !important; max-width: 100%; } /* Imagens/cards nunca estouram a largura */ img, canvas, svg, table, pre { max-width: 100%; } /* Header legado tipo-auth (account/login/etc.): compacta e capa o logo (essas paginas usam .header + .brand-mark sem tamanho definido no auth.css, entao o SVG expandia gigante no celular). */ .header { padding: 10px 12px !important; gap: 10px; } .header .brand-mark { width: 38px !important; height: 38px !important; } .header .brand-copy h1 { font-size: 16px !important; } .header .brand-copy span { font-size: 10px !important; } .header-links { gap: 6px; } /* Hint "Carregando análise…" (bottom:20px inline) nao pode cobrir a tab bar fixa (58px). Sobe pra acima dela. */ #analysis-loading-hint { bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; right: 12px !important; left: 12px !important; justify-content: center; } } /* ── 414px: telas um pouco maiores (Plus/Max) ───────────────────────────── */ @media (max-width: 414px) { .topbar .header-page { font-size: 12px; } } /* ── 360px: telas pequenas (Android base) ───────────────────────────────── */ @media (max-width: 360px) { #mTabBar .mtab { font-size: 9px; } .topbar { padding: 7px 8px; gap: 6px; } #mNavToggle, #mToolsToggle { width: 34px; height: 34px; } }