/* ===================================================================== app-fixes.css : camada final de correcoes (2026-07-25) Carregada DEPOIS de app-redesign.css. Corrige, na ordem: 1. Rolagem indevida da tela (trava global + trava de overlay) 2. Card "Proxima consulta" da home (layout, contraste, 320px) 3. Gaveta "Mais" (barra inferior sumindo + caixa dupla no modo escuro) 4. Chat (espaco vazio acima do titulo e abaixo do campo de mensagem) 5. Responsividade transversal Sem !important salvo onde a regra anterior ja usava !important. Reverter: comentar o de app-fixes.css no index.html. ===================================================================== */ /* ===================================================================== 1. ROLAGEM : a tela nao pode "correr" em nenhum eixo --------------------------------------------------------------------- Sintoma relatado: ao baixar um arquivo (PDF do plano, avaliacao, compartilhamento) a tela corria para cima, para baixo e para os lados. Causas: (a) nenhum eixo horizontal estava travado no documento; (b) os modais abriam sem travar o scroll do fundo, e no iOS "overflow:hidden" no body sozinho NAO trava (precisa position:fixed); (c) o temporario era anexado ao body sem sair do fluxo. ===================================================================== */ /* ATENCAO a arquitetura deste app: o app.css ja define `body,html{height:100%;overflow:hidden;overflow-x:hidden}` e quem realmente rola e o proprio (overflow-y:auto, altura travada em 100%). Portanto NAO se pode usar aqui o padrao classico de trava (`body{position:fixed;top:-Ypx}`): isso quebraria o container de rolagem. Como o body E o container, `overflow:hidden` nele trava de verdade, inclusive no iOS, e o scrollTop e preservado. */ html { overscroll-behavior-x: none; } body { max-width: 100%; overscroll-behavior: contain; } /* Trava de rolagem enquanto um overlay esta aberto. */ body.scroll-locked { overflow: hidden; overscroll-behavior: none; touch-action: none; } /* O conteudo do overlay continua rolando normalmente. */ body.scroll-locked .modal-content, body.scroll-locked .modal-body, body.scroll-locked .mais-content, body.scroll-locked .err-modal, body.scroll-locked .pdf-drawer, body.scroll-locked .chat-messages { touch-action: pan-y; overscroll-behavior: contain; } /* Ancora temporaria de download: fora do fluxo, sem gerar linha no body. */ a[download], a[data-download-temp] { max-width: 100%; } /* Elementos injetados no fim do body para disparar download nunca podem empurrar o layout nem criar area rolavel. */ body > a[href^="blob:"], body > a[data-download-temp] { position: fixed; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; } /* ===================================================================== 2. CARD "PROXIMA CONSULTA" --------------------------------------------------------------------- Problemas corrigidos: - "Desmarcar" era branco a 20% sobre verde: praticamente ilegivel - selo de status cor de creme brigando com o verde da marca - linha do tipo de consulta e selo com alinhamento fora de base - local ("Online") estilizado por style inline no JS - a 320px os dois botoes quebravam com alturas diferentes ===================================================================== */ .next-appointment { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; overflow: hidden; } .next-appointment .label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.82; margin-bottom: 2px; } /* Linha principal: data e hora a esquerda, tipo/status/local a direita. Antes eram tres linhas empilhadas e o card ficava alto demais. */ .na-slim .na-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .next-appointment .date { font-size: 19px; line-height: 1.25; margin: 0; } /* Sem margin-left:auto de proposito: quando a linha quebra no celular, a meta desce alinhada a esquerda, embaixo da data, em vez de ficar solta no canto direito. Em telas largas o space-between ja joga tudo a direita. */ .na-slim .na-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; } /* Tipo de consulta */ .next-appointment .time { display: inline-flex; align-items: center; font-size: 12.5px; opacity: 0.92; } .next-appointment .time .status-badge { margin-left: 0; } /* Local (Online / presencial / domicilio) */ .next-appointment .local { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; opacity: 0.88; margin-top: 0; } /* Separador discreto entre tipo e local, so quando os dois existem */ .na-slim .na-meta > .time + .status-badge::before { content: none; } /* Selo de status: pastilha de vidro, mesma familia visual do card. Substitui o creme #fdf6ec que destoava do verde. */ /* A regra antiga alcanca tambem os descendentes (.next-appointment .status-badge *) e fixa -webkit-text-fill-color:#92400e com !important, que vence o color na hora de pintar o texto. Por isso aqui o seletor precisa cobrir os mesmos descendentes e zerar as duas propriedades. */ .next-appointment .status-badge { background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 9px; backdrop-filter: none; -webkit-backdrop-filter: none; } .next-appointment .status-badge, .next-appointment .status-badge * { color: #fff !important; -webkit-text-fill-color: #fff !important; } .next-appointment .status-badge.confirmado { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 255, 255, 0.92) !important; } .next-appointment .status-badge.confirmado, .next-appointment .status-badge.confirmado * { color: var(--brand-primary-darker, #3d6041) !important; -webkit-text-fill-color: var(--brand-primary-darker, #3d6041) !important; } .next-appointment .status-badge.cancelado { background: rgba(220, 38, 38, 0.9) !important; border-color: rgba(254, 202, 202, 0.6) !important; } .na-chip, .na-chip * { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Selos de proximidade (Hoje / Amanha / Online) que antes vinham com style inline dentro do JS. */ .na-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; } .na-chip--hoje { background: #c2410c; } .na-chip--amanha { background: #b45309; } .na-chip--online { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.45); } /* Acoes */ .next-appointment .actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; } .next-appointment .btn-action { flex: 1 1 132px; min-width: 132px; /* 44px e o minimo de alvo de toque das diretrizes de iOS e Android. */ min-height: 44px; max-width: 320px; padding: 10px 10px; font-size: 12.5px; font-weight: 700; border-radius: 12px; line-height: 1.2; /* "Confirmar presenca" quebrava em duas linhas e engordava o card. */ white-space: nowrap; gap: 5px; } /* Botao secundario legivel: borda solida + fundo mais denso. Antes: rgba(255,255,255,.2) sem borda = contraste ~1,5:1. */ .next-appointment .btn-cancel { background: rgba(255, 255, 255, 0.14); border: 1.5px solid rgba(255, 255, 255, 0.66); color: #fff; } .next-appointment .btn-cancel:hover, .next-appointment .btn-cancel:focus-visible { background: rgba(255, 255, 255, 0.24); border-color: #fff; } .next-appointment .btn-confirm { background: #fff; border: 1.5px solid #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16); } .next-appointment .btn-video { background: rgba(255, 255, 255, 0.14); border: 1.5px solid rgba(255, 255, 255, 0.66); color: #fff; } .next-appointment .btn-confirmed-state { flex: 1 1 100%; min-width: 100%; justify-content: center; background: rgba(255, 255, 255, 0.95); border: 1.5px solid rgba(255, 255, 255, 0.95); font-weight: 700; cursor: default; box-shadow: none; } /* Estado ja confirmado: card sem acao pendente, tom mais sereno */ .next-appointment.confirmed .actions { margin-top: 12px; } /* Telas estreitas: botoes empilhados de largura cheia (nunca meio-quebrados) */ @media (max-width: 379px) { .next-appointment { padding: 14px 15px; } .next-appointment .date { font-size: 17px; } .next-appointment .btn-action { flex: 1 1 100%; min-width: 100%; } } /* Modo escuro: o card e um veu translucido. O botao secundario precisa de borda ainda mais firme para nao sumir no fundo. */ /* A regra anterior de app.css usa !important nestes tres valores, entao aqui e obrigatorio acompanhar para conseguir subir o contraste da borda. */ html.theme-dark .next-appointment .btn-cancel, html.theme-dark .next-appointment .btn-video { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.58) !important; } html.theme-dark .next-appointment .btn-cancel:hover, html.theme-dark .next-appointment .btn-cancel:focus-visible, html.theme-dark .next-appointment .btn-video:hover, html.theme-dark .next-appointment .btn-video:focus-visible { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.85) !important; } html.theme-dark .next-appointment .status-badge { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.38) !important; } /* ===================================================================== 3. GAVETA "MAIS" --------------------------------------------------------------------- 3a. A barra inferior sumia: .mais-drawer tem z-index 150 e cobre a .bottom-nav (z-index 100) inteira. A barra volta para cima da gaveta e a folha recua o proprio conteudo para nao ficar embaixo. 3b. Modo escuro: .mais-item e .mais-item-icon ficavam com o MESMO #1e293b, entao o quadrado do icone virava uma caixa fantasma com borda (lido pelo dono como "sombra"). Agora o item e transparente e so o icone tem superficie, com o verde pastel da marca. ===================================================================== */ /* 3a. barra inferior sempre visivel e clicavel */ .bottom-nav { z-index: 170; } .mais-drawer .mais-backdrop { z-index: 0; } .mais-sheet { /* nao deixa o conteudo da folha terminar embaixo da barra inferior */ padding-bottom: calc(var(--nav-height, 65px) + var(--safe-bottom, 0px) + 10px); max-height: min(85svh, calc(100svh - 96px)); } .mais-content { padding-bottom: 8px; } /* 3b. modo escuro sem caixa dupla */ html.theme-dark .mais-drawer .mais-item { background: transparent; border: 0; box-shadow: none; } html.theme-dark .mais-drawer .mais-item-icon { background: rgba(134, 201, 140, 0.14); color: var(--brand-pastel, #86c98c); border: 1px solid rgba(134, 201, 140, 0.3); box-shadow: none; } html.theme-dark .mais-drawer .mais-item:hover .mais-item-icon, html.theme-dark .mais-drawer .mais-item:focus-visible .mais-item-icon { background: rgba(134, 201, 140, 0.26); border-color: rgba(134, 201, 140, 0.55); color: #fff; } html.theme-dark .mais-drawer .mais-item:hover, html.theme-dark .mais-drawer .mais-item:focus-visible { background: rgba(148, 163, 184, 0.1); } /* Mesma limpeza na secao #sec-mais (lista compacta, atalho legado): o quadrado do icone ficava sem superficie propria e o icone saia cinza, perdendo a identidade da marca no modo escuro. */ html.theme-dark #sec-mais .mais-item .mais-item-icon { background: rgba(134, 201, 140, 0.14); color: var(--brand-pastel, #86c98c); border: 1px solid rgba(134, 201, 140, 0.3); box-shadow: none; } html.theme-dark #sec-mais .mais-item .mais-item-icon--logout { background: rgba(248, 113, 113, 0.14); color: #fca5a5; border-color: rgba(248, 113, 113, 0.32); } /* o botao de sair mantem o vermelho, sem virar caixa dupla */ html.theme-dark .mais-drawer .mais-item-icon--logout { background: rgba(248, 113, 113, 0.14); color: #fca5a5; border-color: rgba(248, 113, 113, 0.32); } /* mesma limpeza no tema claro: o item e transparente, o icone e a superficie */ .mais-drawer .mais-item { background: transparent; border: 0; box-shadow: none; } /* rotulos longos ("Avaliacao neurocognitiva", "Clube de descontos") nao podem deixar as celulas da grade com alturas diferentes */ .mais-grid { align-items: start; } .mais-drawer .mais-item { min-height: 86px; justify-content: flex-start; } .mais-item-label { -webkit-line-clamp: 2; } /* ===================================================================== 4. CHAT --------------------------------------------------------------------- 4a. Espaco vazio ACIMA de "Fale Conosco": body.has-back-btn reserva 50px fixos para o botao flutuante "Voltar". No chat, que e uma tela de altura travada, esses 50px viravam uma faixa morta. Agora o chat usa um botao de voltar DENTRO do cabecalho do card e o botao flutuante fica oculto. 4b. Espaco vazio ABAIXO do campo de mensagem: .chat-input-area e sticky com bottom:var(--kb-h). Quando --kb-h ficava preso em um valor > 0 (barra do Safari confundida com teclado) o composer subia e abria um vao. O js/chat-keyboard.js foi corrigido; aqui fica a defesa em CSS. ===================================================================== */ /* 4a. no chat, sem faixa reservada para o botao flutuante */ body.has-back-btn:has(#sec-chat.active) .main-content { padding-top: calc(var(--header-height, 60px) + var(--safe-top, 0px) + var(--hero-top-gap, 8px)); } body:has(#sec-chat.active) .page-back-btn { display: none; } body:has(#sec-chat.active) #sec-chat.app-section.active > .card { margin-top: 8px; } /* botao de voltar embutido no cabecalho do chat */ .chat-header-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 40px; padding: 6px 12px 6px 9px; margin-right: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--brand-primary-darker, #3d6041); font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, border-color 0.15s ease; } .chat-header-back:hover, .chat-header-back:focus-visible { background: var(--brand-tint, #e8f7ee); border-color: var(--brand-primary-dark, #4f7855); } html.theme-dark .chat-header-back { background: rgba(148, 163, 184, 0.1); border-color: rgba(134, 201, 140, 0.32); color: var(--brand-pastel, #86c98c); } #sec-chat .card-header { display: flex; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; } #sec-chat .card-header h3 { flex: 1 1 auto; min-width: 0; justify-content: center; } /* compensa o botao a esquerda para o titulo continuar opticamente central */ #sec-chat .card-header:has(.chat-header-back) h3 { margin-right: 56px; } /* 4b. composer colado no rodape do thread */ body:has(#sec-chat.active) .chat-thread .chat-input-area { bottom: 0; padding-bottom: max(12px, var(--safe-bottom, 0px)); } /* CAUSA RAIZ do "nao consigo ver a parte superior do chat e sobra um vao embaixo" (relato de 25/07): `body.logged-in` recebe `padding-bottom: calc(--nav-height + --safe-bottom + 8px)` para o conteudo nao terminar atras da barra inferior. Isso e certo nas telas que rolam. Mas o Chat trava a altura em 100svh e ja reserva a barra no proprio .main-content, entao esses ~73px viram FOLGA ROLAVEL: o body desliza e leva o cabecalho do chat para tras do header fixo, abrindo exatamente o mesmo tanto de vazio embaixo do campo de mensagem. Com o Chat ativo o body nao pode ter essa almofada. */ body.logged-in:has(#sec-chat.active) { padding-bottom: 0; } /* Reserva no proprio .main-content, medida pela altura real da barra. O !important acompanha a regra anterior do app.css, que tambem usa. */ body:has(#sec-chat.active) .main-content { padding-bottom: calc(var(--nav-height, 65px) + var(--safe-bottom, 0px) + 16px) !important; } /* area de mensagens sempre com altura util, mesmo em telas baixas */ body:has(#sec-chat.active) .chat-thread .chat-messages { min-height: 96px; } /* em paisagem o composer nao pode ocupar metade da tela */ @media (orientation: landscape) and (max-height: 500px) { .chat-tipo-label, .chat-tipo-select { display: none; } body:has(#sec-chat.active) .chat-thread .chat-input-area { padding-top: 8px; } } /* ===================================================================== 5. RESPONSIVIDADE TRANSVERSAL ===================================================================== */ /* Nenhum bloco pode furar a largura da tela. */ .main-content img, .main-content video, .main-content iframe, .main-content canvas, .main-content table, .main-content pre { max-width: 100%; } /* Palavras longas (e-mails, URLs, nomes de arquivo) quebram em vez de alargar o card. */ .card-body, .mais-item-label, .next-appointment .date, .doc-item, .agenda-item, .chat-msg { overflow-wrap: anywhere; } /* Faixas roláveis horizontais (abas de receitas, dias do plano) ficam contidas: rolam por dentro, sem arrastar a pagina. */ .rec-tabs, .dias-tabs, .chat-sidebar-filtros, .orientacao-chips { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rec-tabs::-webkit-scrollbar, .dias-tabs::-webkit-scrollbar, .chat-sidebar-filtros::-webkit-scrollbar { display: none; } /* --------------------------------------------------------------------- 5a. Alvos de toque Auditoria de 25/07 em 320/360/390/430px: varios controles abaixo do minimo de 44px das diretrizes de iOS e Android. Os piores eram links de 16px e 21px de altura, impossiveis de acertar com o polegar. --------------------------------------------------------------------- */ .refeicao-foto-btn, .registrar-foto-btn, .plano-acao-btn, .water-btn, .theme-pill, .profile-btn, .orientacao-chip, .forms-cta-btn { min-height: 44px; } /* Alguns destes tinham `height` fixo (38px, 32px), que anula min-height. Sem `height:auto` o min-height acima nao teria efeito nenhum. */ .plano-acao-btn, .water-btn, .theme-pill, .refeicao-foto-btn { height: auto; } /* Tres controles ficavam abaixo do minimo por regras mais especificas que a de cima (38px, 32px e 36px). O reforco vale so em ponteiro grosso (dedo): no mouse a densidade compacta original e mantida de proposito. */ @media (pointer: coarse) { .plano-acoes.plano-acoes-rodape .plano-acao-btn { min-height: 44px; } .water-card--compact .water-btn--inline { min-height: 44px; padding: 8px 14px; } .profile-btn.danger-link, .profile-btn.website-link { min-height: 44px; } } /* Links de texto que funcionam como botao ganham area de toque sem mudar o desenho: o padding entra por dentro da linha. */ .parceiro-insta, .mentoria-link, .servico-link { display: inline-flex; align-items: center; min-height: 44px; padding-top: 4px; padding-bottom: 4px; } /* --------------------------------------------------------------------- 5b. Descricao do hero nao pode ser cortada ".home-hero-cta-desc" vinha com line-clamp e virava "Leva 2 minutos. Ajuda seu nutricioni..." ja em 390px. --------------------------------------------------------------------- */ .home-hero-cta-content { min-width: 0; } .home-hero-cta-title, .home-hero-cta-desc { display: block; overflow: visible; text-overflow: clip; white-space: normal; -webkit-line-clamp: none; } /* Em celular o botao desce para a linha de baixo, em largura cheia. Enquanto ele disputava espaco na mesma linha, ou o titulo ou a descricao acabava cortado com reticencias. */ @media (max-width: 480px) { .home-hero-cta { flex-wrap: wrap; row-gap: 10px; align-items: center; } .home-hero-cta-icon { flex: 0 0 auto; } /* base 0 + min-width 0: o texto encolhe e continua ao lado do icone em vez de cair para a linha de baixo e deixar o icone orfao. */ .home-hero-cta-content { flex: 1 1 0; min-width: 0; } .home-hero-cta-btn { flex: 1 1 100%; margin-top: 0; } } /* --------------------------------------------------------------------- 5c. Cabecalho em telas estreitas A 320px os seis botoes do cabecalho estouravam o proprio container e o primeiro deles passava por cima da logomarca (o selo "97" cobria o texto). Agora a logomarca encolhe e as acoes nunca invadem a esquerda. --------------------------------------------------------------------- */ .app-header .header-content { gap: 8px; } .app-header .header-brand, .app-header .header-user { min-width: 0; flex-shrink: 1; overflow: hidden; } .app-header .header-actions { flex-shrink: 0; flex-wrap: nowrap; } @media (max-width: 400px) { .app-header .header-actions { gap: 3px; } .app-header .header-brand img, .app-header .header-brand svg { max-width: 100%; height: auto; } } @media (max-width: 340px) { /* Ultimo recurso: a marca sai e as acoes ficam inteiras e tocaveis, distribuidas na largura toda em vez de amontoadas no centro. */ .app-header .header-brand { display: none; } .app-header .header-actions { flex: 1 1 auto; justify-content: space-between; } } /* Telas muito estreitas (<=360px): respiro menor, alvos de toque mantidos */ @media (max-width: 360px) { .home-hero-cta { flex-wrap: wrap; } .home-hero-cta-btn { flex: 1 1 100%; margin-top: 8px; } .status-banner { align-items: flex-start; } } /* Paisagem em celular: cabecalho e barra encolhem para sobrar conteudo */ @media (orientation: landscape) and (max-height: 460px) { :root { --header-height: 52px; --nav-height: 56px; } .app-header { padding-top: calc(6px + var(--safe-top, 0px)); padding-bottom: 6px; } .nav-item span { font-size: 9px; } } /* Tablets e telas grandes: o app centraliza, mas o card de consulta e a gaveta nao podem esticar demais. */ @media (min-width: 768px) { .mais-sheet { border-radius: 24px; margin-bottom: calc(var(--nav-height, 65px) + var(--safe-bottom, 0px) + 12px); max-height: min(80svh, calc(100svh - 140px)); } .mais-sheet { padding-bottom: 12px; } } /* Preferencia de menos movimento: sem transform nas gavetas */ @media (prefers-reduced-motion: reduce) { .mais-sheet, .chat-input-area { transition: none; } }