/* Revisão de navegação e leitura: 23/09/2026. Carrega após a base. */ html body .login-page { background: var(--bg, #f8fafc); } html body .login-page::before { display: none; } html body .login-box { border-radius: 16px; box-shadow: 0 4px 20px rgba(15,23,42,.08); } html body .login-mascot { width: 64px; height: 64px; border-radius: 14px; box-shadow: none; margin-bottom: 10px; } html body #loginForm :is(#loginIdentificador,#loginSenha) { min-height: 44px; } html body .card { border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.04); } html body .app-header { box-shadow: none; } html body .header-btn { border: 0; background: transparent; border-radius: 10px; } html body .header-btn:hover { background: var(--bg, #f1f5f9); } html body .btn-primary { background: var(--brand-primary-dark, #2f4a32); box-shadow: none; border-radius: 10px; } html body .bottom-nav { box-shadow: none; } html body .bottom-nav .nav-item { min-width: 0; min-height: 52px; flex: 1 1 0; padding-inline: 2px; } html body .bottom-nav .nav-item-icon { border-radius: 10px; box-shadow: none; } html body .bottom-nav .nav-item-label { font-size: 11px; } /* 16/10/2026 (quadro 8, #703 i): o "Mais" do SeuCenoura segue a grade do SeuNutricionista (4 colunas no telefone, 6 a partir de 520 px); aqui ficava em 2. Icone de 24 px dentro do alvo de 44 px, rotulo de 2 linhas no maximo. */ html body .mais-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px 4px; } @media (min-width: 520px) { html body .mais-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } } html body .mais-drawer .mais-item-icon { width: 44px; height: 44px; font-size: 24px; } html body .mais-drawer .mais-item-icon :is(i,svg) { font-size: 24px; width: 24px; height: 24px; line-height: 24px; } html body .mais-drawer .mais-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; hyphens: auto; font-size: 11.5px; line-height: 1.25; text-align: center; } html body .mais-item { min-width: 0; min-height: 58px; border-radius: 10px; } html body .mais-item-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } html body .mais-item-icon { flex-shrink: 0; border-radius: 9px; } html body .modal-content { max-height: calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); } html body .modal-header { flex: 0 0 auto; gap: 8px; padding-block: 10px; } html body .modal-header h3 { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; } html body .modal-body { min-height: 0; overscroll-behavior: contain; } html body .modal-close { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; } html body .modal-body :is(input,select,textarea) { max-width: 100%; } html body .sug-stars { gap: 0; flex-wrap: wrap; } html body .sug-stars [role="radio"] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } html body .sug-footer { flex-shrink: 0; padding-bottom: max(12px,env(safe-area-inset-bottom)); } html body .mais-drawer[hidden] { display: none; } html body :is(button,a,[role="button"]):focus-visible { outline: 2px solid var(--brand-primary,#3d6041); outline-offset: 3px; } @media (max-width: 767px) { /* Os mesmos destinos continuam em Início e Conversas na barra inferior. */ html body #btnChatHeader, html body #btnHeaderAgua { display: none !important; } html body .header-content { gap: 6px; } html body .header-brand { margin-left: 0; min-width: 86px; padding: 0; } html body .header-brand img { min-width: 86px; max-width: 114px; width: 100%; object-fit: contain; } html body .header-actions { gap: 2px; flex: 0 0 auto; } html body .header-actions .header-btn { width: 44px; height: 44px; min-width: 44px; } html body .app-header { padding-inline: max(10px,env(safe-area-inset-left)); } html body .modal-content { border-radius: 16px 16px 0 0; } html body .modal-body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px; } html body .modal-actions { flex-wrap: wrap; } html body .modal-actions > button { flex: 1 1 120px; min-height: 44px; white-space: normal; } } @media (min-width: 768px) { html body .modal-content { border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { html body :is(.card,.modal-content,.nav-item,.mais-item) { animation: none; transition: none; } } /* 24/09/2026 (V6.1 e V6.3 do prompt de responsividade e visual). */ /* Logomarca SeuCenoura em todas as larguras. O marca.js troca o conteudo do .header-brand pela wordmark SC; as regras herdadas do app encolhiam o link ate 8 px entre 768 e 1023 (flex 0 1 auto com min-width 0) e o escondiam em 340 ou menos. */ html body .app-header .header-brand { flex: 0 0 auto !important; min-width: 44px !important; overflow: visible !important; align-items: center; min-height: 44px; } @media (max-width: 1023px) { html body .app-header .header-brand { display: inline-flex !important; } } /* A partir de 1024 a barra lateral mostra a wordmark: o cabecalho nao repete. */ @media (min-width: 1024px) { html body .app-header .header-brand { display: none !important; } } html body .app-header .header-brand img { content: normal !important; min-width: 76px; width: auto !important; max-width: 114px !important; height: 30px !important; max-height: 30px !important; object-fit: contain; } @media (max-width: 360px) { html body .app-header .header-brand img { min-width: 66px; height: 26px !important; max-height: 26px !important; } } /* Barra lateral (1024 ou mais): wordmark SC no lugar do nome escrito. */ html body .sidebar-wordmark .sidebar-logo-sc { display: block; width: auto; height: 34px; max-width: 150px; object-fit: contain; } html.theme-dark body .sidebar-wordmark .sidebar-logo-sc { content: url("/img/seucenoura-wordmark-branca.svg?v=20260924"); } /* A marca troca o picture do header por uma img. No escuro, selecionar a versao branca oficial tambem para essa imagem e para o acesso. O important do header acompanha a defesa content:normal da regra SC acima. */ html.theme-dark body .app-header .header-brand img { content: url("/img/seucenoura-wordmark-branca.svg?v=20260924") !important; } html.theme-dark body .login-logo { content: url("/img/seucenoura-wordmark-branca.svg?v=20260924"); filter: none; } html body .sidebar-brand .sidebar-mascote { border-radius: 12px; } /* Rotulos dos campos do acesso: o texto tinha 17 a 19 px de altura. A caixa passa a 44 px e desce sobre o proprio campo, que ela mesma foca: o desenho nao muda e o alvo de toque chega a 44. */ html body #loginForm .form-field > label { display: block; min-height: 44px; margin-bottom: -25px; position: relative; } html body #loginForm .form-field .input-wrapper { position: relative; z-index: 1; } html body .login-options .login-keep { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; } html body .login-options .login-forgot { min-height: 44px; display: inline-flex; align-items: center; } /* Dias do plano: sete abas de 39 px em 320 e 43,9 px em 360. Ate 380 quebram em duas fileiras de 44 px. */ @media (max-width: 380px) { html body .dias-tabs { flex-wrap: wrap; gap: 4px; overflow: visible; -webkit-mask-image: none; mask-image: none; } html body .dias-tabs .dia-tab { flex: 1 0 calc(25% - 4px); min-width: 44px; min-height: 44px; } } /* "Conversas" cortado na barra inferior em 768: cinco rotulos cabem inteiros a partir de 11 px. */ html body .bottom-nav .nav-item-label { white-space: nowrap; overflow: visible; text-overflow: clip; } /* 24/09/2026 (pendencias noite, decisao do dono): "Fotos de evolucao" escondida por padrao (fail-closed); js/sc/app.js (_scAplicarFotos) poe html.sc-fotos-liberadas quando a clinica tem o recurso. */ html:not(.sc-fotos-liberadas) [data-section="fotos"] { display: none !important; } /* 01/10/2026 (CSS-ATIVO): o Voltar do aplicativo SeuCenoura volta a receber o clique abaixo de 1024px. O QUE ACONTECIA: o eixo de layout reprovava `#pageBackBtn` em 8 dos 13 tamanhos, exatamente os 8 com largura de 1023px ou menos, nas duas rotas que declaram esse alvo (Lista de Compras e Treinos): 16 falhas. Medido no ponto do clique: em 320, 360, 375, 390, 414 e 430 quem respondia era a IMG da logomarca; em 768 e 834, o proprio HEADER.app-header (z-index 200). A CAUSA: a entrada do SeuCenoura foi migrada PELA METADE para a casca do celular. Ela recebeu `class="sn-mobile-shell"` no , as duas folhas da casca e o guarda da rolagem (o `aoRolar` de index-sc.html ja trata a casca), mas NAO recebeu o elemento `#headerContext` (`.mobile-header-context`), que existe so em index.html, nem a logica de reposicionamento do `_criarBotaoVoltar`: o `js/sc/app.js` faz sempre `document.body.appendChild`, enquanto o `js/app.js` move o botao para dentro do cabecalho abaixo de 1024px. Resultado: a regra da casca `body.sn-mobile-shell #pageBackBtn` de `css/sc/gerado/app-fixes.css`, escrita para um botao que vive DENTRO do cabecalho, tirava `position: fixed` e `z-index: 200` de um botao que continua filho direto do . Como a casca tambem poe `#appWrapper` em `position: fixed` e `overflow: hidden` no html e no body, o fluxo do fica vazio e o botao estatico ia para o canto (0,0), embaixo do cabecalho fixo. A logomarca NAO era a causa: em 768 e 834 o culpado ja era o cabecalho, e ali a caixa da marca comeca em x=52, longe do ponto medido. A DECISAO: o proprio desenho da casca diz, em app-fixes.css, que "SC conserva sua interface dedicada". Entao a casca e desfeita so para este botao, e so no SeuCenoura, devolvendo a pastilha flutuante. `top` e `left` nao sao reescritos de proposito: voltar a `position: fixed` reativa a cascata canonica (`.page-back-btn`, a variante de 600 a 1023px e a de `display-mode: standalone`). Nenhuma cor nova entra: todos os valores sao os da propria regra canonica do SeuCenoura. */ @media (max-width: 1023px) { html body.sn-mobile-shell #pageBackBtn { position: fixed; z-index: 200; flex: 0 1 auto; justify-content: flex-start; width: auto; height: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 8px 14px 8px 10px; border: 1px solid rgba(61, 96, 65, .32); border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .18); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); color: var(--brand-primary-darker); } /* O rotulo volta a aparecer: a casca escondia o porque dentro do cabecalho o botao e so de icone. */ html body.sn-mobile-shell #pageBackBtn span { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; border: 0; } /* Tema escuro: a regra canonica e `html.theme-dark .page-back-btn`, de peso menor que o seletor com id usado acima. Sem este par, o bloco anterior imporia o fundo claro tambem no escuro. */ html.theme-dark body.sn-mobile-shell #pageBackBtn { border-color: rgba(134, 201, 140, .32); background: rgba(15, 23, 42, .85); color: var(--brand-text, #86c98c); } /* 02/10/2026 (revisão do trio): a pastilha voltou a flutuar, mas a RESERVA dela não voltou junto. A canônica é `body.has-back-btn .main-content` (app.css, +50px no padding-top); a casca a anula com `body.sn-mobile-shell.has-back-btn .main-content` (css/sc/gerado/app-fixes.css), escrita para o Voltar que mora DENTRO do cabeçalho do SeuNutricionista. Medido em 390 e 320: a pastilha (fixa em y=70, 44 px de altura) ficava por cima da primeira linha da tela, e em Plano alimentar a aba "Dom" não recebia o clique (página curta, sem rolar). A reserva volta só aqui, só no SeuCenoura e só abaixo de 1024px. Quem vence hoje (medido no navegador, regras que casam com o
): `html body.sn-mobile-shell.logged-in #mainContent` de mobile-shell.css, peso (1,2,2), com header + 8px. Por isso esta regra repete o id e soma a classe has-back-btn (2,4,2 com o :not), e usa a mesma base de altura dela. O chat fica de fora pelo :not: lá a pastilha é escondida (app-fixes 4a). */ html body.sn-mobile-shell.logged-in.has-back-btn:not(:has(#sec-chat.active)) #mainContent { padding-top: calc(var(--sn-header-h, var(--header-height, 60px)) + 8px + 50px); } } /* Ate 360px a folha canonica encolhe a pastilha, esconde o e repoe o rotulo por `::after`, mas so em `body:not(.sn-mobile-shell)`: com a classe da casca no do SeuCenoura o rotulo desaparecia de vez. Repoe os tres. */ @media (max-width: 360px) { html body.sn-mobile-shell #pageBackBtn { padding: 6px 10px 6px 8px; font-size: 12px; } html body.sn-mobile-shell #pageBackBtn span { display: none; } html body.sn-mobile-shell #pageBackBtn::after { content: "Voltar"; font-size: 11px; margin-left: 4px; } }