/* ========================================================================= VYRON FIT — CARDS MOBILE HARDENING (global) MARK: CARDS_HARDENING_V1 Corrige: cards cortando outros, números/ ilegíveis, texto fora do padrão. Carregado em TODAS as páginas via injeção no . ========================================================================= */ /* base: nada estoura a largura */ *,*::before,*::after{box-sizing:border-box} img,svg,video,canvas{max-width:100%;height:auto} /* ---- MOBILE: <=640px ---- */ @media (max-width:640px){ /* grids com MUITAS colunas fixas viram no máx 2 colunas flexíveis */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } /* grids auto-fit/fill com coluna mínima grande encolhem para caber */ [style*="minmax(220px"],[style*="minmax(260px"],[style*="minmax(280px"], [style*="minmax(200px"],[style*="minmax(240px"],[style*="minmax(300px"], [style*="minmax(180px"],[style*="minmax(170px"],[style*="minmax(160px"]{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; } /* cards: deixam encolher e não vazam conteúdo */ .card,.kpi,.stat,.metric,.pitch,.opt-card,.feat,.tile,.box,.panel, .mini-card,.dash-card,.menu-card,.grid-card,.info-card,[class*="card"]{ min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere; word-break:break-word; } /* números grandes (KPIs/stats) nunca estouram o card */ .kpi-num,.big-num,.num,.stat b,.stat-num,.metric-num,.value,.count, [id$="-count"],[id$="Count"],[class*="num"],[class*="-value"]{ font-size:clamp(18px,6.5vw,34px) !important; line-height:1.15 !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* rótulos podem quebrar em 2 linhas (não cortar) */ .kpi-label,.stat small,.label,.card-label,.sub,.oc-sub,.muted{ white-space:normal !important; word-break:break-word; line-height:1.25; } /* títulos de card CORRIDOS (não quebram a palavra) — encolhem e cortam com … se preciso */ /* TITULOS_2LINHAS_FIX_V1: ate 2 linhas (nao corta nome longo em 1 linha) */ .card h1,.card h2,.card h3,.card h4,.kpi h3,.opt-card .oc-nm,.tile h3,.feat h3{ white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; max-width:100% !important; hyphens:none !important; } } /* ---- CELULAR ESTREITO: <=400px (1 coluna no que ainda aperta) ---- */ @media (max-width:400px){ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns:repeat(6,1fr)"], [style*="minmax(220px"],[style*="minmax(260px"],[style*="minmax(280px"], [style*="minmax(200px"],[style*="minmax(240px"],[style*="minmax(300px"]{ grid-template-columns:1fr !important; } } /* ---- EXTRA HARDENING (composicao/loja/documentos e similares) ---- */ @media (max-width:640px){ /* carrosséis/sliders horizontais (loja hero) não podem alargar a página */ .hero-slider,.hero-carousel,.carousel,.slider,.banners,.hero-banners,.slides{ overflow-x:hidden !important; max-width:100% !important; } .hero-slide,.slide,.carousel-item,.banner-slide{ max-width:100% !important; min-width:0 !important; } .hero-slide img,.slide img,.banner img{max-width:100% !important;height:auto} /* barras horizontais de composição corporal / gráficos com largura fixa */ .bars,.bar-row,.barwrap,.chart-bars,.composicao,.comp-bars{ max-width:100% !important; overflow:hidden; } .bw,.bar,.bar-fill,.col{max-width:100% !important} /* linhas de chips/filtros: rolam horizontalmente em vez de estourar */ .chips,.chip-row,.c-chips,.filters,.filter-row,.tabs-scroll,.scroll-x{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; } .chips::-webkit-scrollbar,.chip-row::-webkit-scrollbar,.c-chips::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none} .chip,.c-chip,.filter-chip{flex:0 0 auto; white-space:nowrap} /* tabelas largas rolam dentro do próprio container */ table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch} } /* ---- TRAVA FINAL: nenhum elemento cria scroll horizontal no mobile ---- */ @media (max-width:640px){ /* scroll VERTICAL por toque SEMPRE funciona no mobile (não travar) */ html,body{ overflow-x:hidden !important; overflow-y:auto !important; max-width:100vw; height:auto !important; min-height:100% !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior-y:auto !important; } /* containers de conteúdo não vazam */ main,.content,.container,.wrap,.page,.app,.screen,.view{ max-width:100% !important; overflow-x:hidden; } /* barras de composição corporal (classes reais .bars/.col/.bw) */ .bars{width:100% !important; max-width:100% !important; box-sizing:border-box} .bars .col{flex:1 1 0 !important; min-width:0 !important} .bars .bw{width:100% !important; max-width:100% !important} } /* ---- títulos CORRIDOS no mobile: nunca quebram o nome (Nutrição/Saúde/Agenda/etc) ---- */ @media (max-width:640px){ /* título numa linha só; nunca parte a palavra. Se faltar espaço, fonte encolhe (clamp) e o excedente vira reticências. */ /* TITULOS_2LINHAS_FIX_V1: titulos podem usar 2 linhas no mobile (nome completo, nao corta) */ h1,h2,h3,h4,.title,.page-title,.card-title,.hero h1,.hero h2, .card h3,.card h2,.card h4,.opt-title,.feat-title,.sec-title,.tile-title{ white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; max-width:100% !important; min-width:0 !important; } /* fonte responsiva pra caber a palavra inteira em 360px sem cortar */ h1,.page-title,.hero h1{ font-size:clamp(15px,5vw,26px) !important; line-height:1.25 !important; } h2,.card h2,.sec-title{ font-size:clamp(14px,4.5vw,22px) !important; line-height:1.25 !important; } h3,.card h3,.card-title,.opt-title,.feat-title,.tile-title{ font-size:clamp(13px,4.1vw,19px) !important; line-height:1.25 !important; } h4,.card h4{ font-size:clamp(12px,3.8vw,17px) !important; line-height:1.25 !important; } /* container do título não pode estar numa coluna estreita que esprema o texto */ .card,.opt-card,.feat,.tile,.kpi,.stat,.panel,.box{ min-width:0 !important; } } /* ---- HEADER FLEX: título usa o espaço livre, não corta com … (WOD/Saúde/Aulas) ---- */ @media (max-width:640px){ .hd,.header,.topbar,.page-head,.head,.hdr,.top-bar,.sec-head{ flex-wrap:wrap !important; min-width:0 !important; } .hd>h1,.hd>h2,.hd>h3,.header>h1,.header>h2,.header>h3, .topbar>h1,.topbar>h2,.page-head>h1,.page-head>h2,.head>h1,.head>h2,.sec-head>h2{ flex:1 1 auto !important; min-width:0 !important; font-size:clamp(15px,5vw,22px) !important; } } /* ---- HERO/HEADER EMPILHADO no mobile: título EM CIMA, texto EMBAIXO (sem sobrepor) ---- */ @media (max-width:640px){ /* qualquer cabeçalho de card/hero que estava em LINHA (título + texto lado a lado) vira COLUNA: o título fica em cima e a descrição embaixo, empilhados */ .hero,.card-head,.card-header,.sec-head,.head-row, .hero-head,.page-hero,.opt-head,.tile-head,.feat-head{ flex-direction:column !important; align-items:flex-start !important; gap:6px !important; } /* o texto descritivo (subtítulo) ocupa a largura toda, abaixo do título */ .hero p,.hero .sub,.hero .desc,.card-head p,.card-header p,.page-hero p, .hero-sub,.card-sub,.opt-sub,.tile-sub,.feat-sub,.lead{ position:static !important; width:100% !important; max-width:100% !important; margin:2px 0 0 0 !important; white-space:normal !important; overflow-wrap:anywhere !important; } /* botão/ícone que ficava à direita do título não sobrepõe mais */ .hero .hero-actions,.card-head .actions,.head-row .actions{ width:auto !important; margin-top:4px !important; } } /* ---- GREET_ICONS_ROW: barra "Bom dia" e seus ícones (sino/mensagem/mapa/notif) SEMPRE lado a lado ---- */ @media (max-width:640px){ .greet,.greet-bar,#l168-greeting{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; gap:8px !important; } /* o agrupamento de ícones de ação à direita do nome fica em linha, sem quebrar */ .greet-actions,.greet .actions,.greet-bar .actions,.greet-icons,.top-actions, .greet-bar .icons,.greet .icons,.hero-actions{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; flex-wrap:nowrap !important; flex:0 0 auto !important; width:auto !important; margin:0 !important; } /* cada botão de ícone mantém tamanho fixo (não estica nem empilha) */ .greet-actions>*,.greet .actions>*,.greet-bar .actions>*,.greet-icons>*,.top-actions>*{ flex:0 0 auto !important; } } /* ---- SCROLL_TOUCH_FIX v2: dedo rola a página (Minha Saúde/Histórico/todas) ---- */ html{ height:100% !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; } body{ height:auto !important; min-height:100% !important; overflow-y:visible !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; } @media (max-width:640px){ /* wrappers internos não podem virar scroller travado nem cortar o vertical */ .wrap,.section,main,.main,.content,.container,.app,#app,.page,.screen,.view{ overflow-y:visible !important; max-height:none !important; height:auto !important; touch-action:pan-y !important; } } /* ========================================================================= CARDS_HARDENING_P6 — grids definidos por CLASSE CSS (nao inline) Pega telas onde repeat(N,1fr) esta no CSS da pagina, nao no style=. So @ <=640px (celular). Nunca quebra desktop. ========================================================================= */ @media (max-width:640px){ /* containers de grid comuns no app: maximo 2 colunas que encolhem */ .grid,.cards,.card-grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6, .kpis,.kpi-grid,.stats,.stats-grid,.metrics,.tiles,.feat-grid, .menu-grid,.dash-grid,.opt-grid,.actions-grid,.quick-grid, .month-grid,.week-grid,.boxes,.panels{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } /* grids de 1 item por linha continuam 1 coluna */ .grid-1,.list-grid,.full-grid,.single-grid{ grid-template-columns:1fr !important; } /* faixas com MUITOS itens (calendario/dias/chips numericos) rolam horizontal em vez de empilhar quebrado */ .days-row,.week-strip,.chip-row,.tabs,.pill-row,.modalidades, .filter-row,.scroll-row,.h-scroll{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; gap:8px !important; padding-bottom:4px; } .days-row>*,.week-strip>*,.chip-row>*,.modalidades>*,.filter-row>*{ flex:0 0 auto !important; } /* calendarios reais (7 colunas) mantem 7 mas encolhe celula p/ caber */ .calendar,.cal-grid,[class*="calendar"]{ grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:2px !important; } .calendar *,.cal-grid *{ font-size:clamp(10px,3.2vw,14px) !important; } } /* TITULOS_2LINHAS_FIX_V1: titulos de conteudo em ate 2 linhas no mobile (fim de nomes cortados em 1 linha) */