/* ========================================================================== Seiva · Evolução do dia — item P1-A2 da auditoria "Redline Seiva" (2026-09-02; feito em 2026-09-03) -------------------------------------------------------------------------- O que a auditoria achou na tela da evolução, e o que esta folha desenha: 1 · "D · Dados do dia" era uma pilha de DOZE títulos recolhidos e iguais — para saber se havia dieta lançada era preciso abrir um por um. Cada título ganhou a `.previa`: uma linha discreta, ao lado do nome, com o número que o servidor já tinha (ver `previas_do_dia`, em app/evolucao/ficha.py). E a faixa D ganhou "Abrir tudo / Fechar tudo" (`.tudo`), que só existe quando o colapso está de pé. 2 · "LANÇAR: Dieta Energia Hídrico…" eram links de 13 px que pareciam abas. Viraram botões pequenos com "+" (`.lancar .botao-mini`), alvo de toque ≥ 32 px, que no celular quebram em duas linhas. 3 · "Trazer o de ontem" aparecia uma vez POR CAMPO (seis cliques para copiar o dia inteiro). Agora há um `.trazer-tudo` no topo do bloco de texto — e os botões por campo continuam, menores (`.de-ontem`). CARREGAR depois do seiva-prontuario.css (é dele que vêm `.faixa-secao`, `.cabeca-evolucao` e o triângulo de `h2.secao-clicavel`). ========================================================================== */ /* ========================================================================== 1 · A PRÉVIA DE CADA SEÇÃO ========================================================================== */ /* O

vira linha: título, o que já vinha nele (`.sub-linha`, `.etiqueta`) e a prévia, todos na mesma base. O triângulo ▸/▾ do colapso é `::after`, então fecha a linha — a ordem lida é "nome · resumo · abre/fecha". */ h2.com-previa{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .previa{ font-size:13px; font-weight:600; color:var(--nt-muted); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:0; } /* Prévia que é etiqueta (risco de SR, SR confirmada, eventos do dia): a cor carrega informação, então ela não pode ficar cinza como as outras. */ .previa .etiqueta{ font-variant-numeric:tabular-nums; } /* "Abrir tudo / Fechar tudo" na faixa D. Nascem escondidos: sem JavaScript nada se recolhe, e um link que não faz nada é pior que link nenhum. O `_colapso.html` marca `main.com-colapso` quando de fato recolheu algo. */ .faixa-secao .tudo{ display:none; } main.com-colapso .faixa-secao .tudo{ display:inline-flex; align-items:center; gap:14px; flex:none; } .faixa-secao .tudo a{ font-size:12px; font-weight:700; color:var(--nt-brand-text); text-decoration:none; white-space:nowrap; } .faixa-secao .tudo a:hover{ text-decoration:underline; } /* ========================================================================== 2 · A RÉGUA "LANÇAR" — botões, não abas ========================================================================== */ /* Mora na terceira linha do `.cabeca-evolucao`; o fio de cima é o mesmo que separava a régua antiga. */ .lancar{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:10px 0 11px; border-top:1px solid var(--nt-line2); } .lancar .rotulo-nav{ padding-right:5px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--nt-muted); } .lancar .botao-mini{ display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:0 11px; border-radius:9px; background:var(--nt-brand-soft); color:var(--nt-brand-deep); border:1px solid var(--nt-brand-soft-line); font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap; text-decoration:none; } .lancar .botao-mini:hover{ border-color:var(--nt-brand); filter:brightness(.94); } :root[data-theme="dark"] .lancar .botao-mini:hover{ filter:brightness(1.35); } .lancar .botao-mini .mais{ font-size:14px; font-weight:800; line-height:1; opacity:.75; } /* ========================================================================== 3 · "TRAZER TUDO DE ONTEM" (formulário da evolução) ========================================================================== */ /* Fica acima do primeiro campo de texto: um clique preenche o que está VAZIO, e só isso — o que já foi escrito hoje nunca é sobrescrito. O "Desfazer" ao lado devolve exatamente o estado anterior. No HTML os dois levam também um DEGRAU da hierarquia de ação (`suave` e `link-acao`, do P1-A1): o botão cheio desta tela é o "Salvar", e nenhum dos dois disputa com ele. O degrau diz o papel; o desenho é destas regras — esta folha carrega depois dos tokens e, com a mesma especificidade, é a que vale. */ .ontem-tudo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; } .ontem-tudo .trazer-tudo{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 13px; border-radius:10px; background:var(--nt-brand-soft); color:var(--nt-brand-deep); border:1px solid var(--nt-brand-soft-line); box-shadow:none; font-family:inherit; font-size:13px; font-weight:700; line-height:1; cursor:pointer; } .ontem-tudo .trazer-tudo:hover{ border-color:var(--nt-brand); filter:brightness(.94); transform:none; } :root[data-theme="dark"] .ontem-tudo .trazer-tudo:hover{ filter:brightness(1.35); } .ontem-tudo .desfazer{ background:none; border:0; padding:0; box-shadow:none; filter:none; transform:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--nt-brand-text); text-decoration:underline; cursor:pointer; } .ontem-tudo .recado{ font-size:12.5px; font-weight:600; color:var(--nt-muted); } /* O botão POR CAMPO continua existindo — menor, com a seta de "puxar". O seletor repete `.botao.secundario` de propósito: sem isso a regra do style.css (`.ajuda-escrita .botao.secundario`, três classes) vence esta e o botão não encolhe. O alvo de toque fica em 32 px, o mínimo da auditoria — encolher a fonte não pode encolher o dedo. */ .ajuda-escrita .botao.secundario.de-ontem{ display:inline-flex; align-items:center; min-height:32px; padding:0 11px; font-size:12px; border-radius:9px; } .ajuda-escrita .botao.secundario.de-ontem .icone-ontem{ margin-right:5px; font-weight:800; opacity:.75; } /* ========================================================================== 4 · CELULAR ========================================================================== */ @media (max-width: 700px){ /* A régua quebra em duas linhas em vez de encolher o alvo de toque. */ .lancar{ gap:6px; } .lancar .botao-mini{ min-height:34px; padding:0 10px; } /* A prévia desce sozinha para a linha de baixo quando não cabe (o ▸/▾ do colapso a acompanha, porque é o item seguinte da mesma linha flex). */ h2.com-previa{ gap:4px 8px; } main.com-colapso .faixa-secao .tudo{ width:100%; } /* O "de ontem" encolhido volta aos 40 px de alvo de toque do celular — é a mesma regra que o style.css aplica a toda a `.ajuda-escrita`, e o nosso seletor mais específico a estava desligando. */ .ajuda-escrita .botao.secundario.de-ontem{ min-height:40px; } .ontem-tudo .trazer-tudo{ min-height:40px; } } /* ========================================================================== 5 · O DEDO PEDE 44 px (≤ 900 px — item P2-F2, 2026-09-04) Resíduo do P2-F1: no estreito, os botões desta tela paravam entre 32 e 40 px de altura. 44 px é o mínimo que a WCAG 2.2 (2.5.8 Target Size) e o guia da Apple pedem para um alvo de toque; abaixo disso quem lança a evolução de pé, com o celular numa mão, erra o botão vizinho — e os botões da régua "Lançar" ficam a 6 px um do outro. Este bloco vem DEPOIS do @media de 700 px de propósito: os dois casam na mesma largura, têm a mesma especificidade, e quem chega por último vence. Invertida a ordem, os 34/40 px voltariam abaixo de 700 px — justamente no celular. Acima de 900 px nada muda: no computador o alvo é o ponteiro. ========================================================================== */ @media (max-width: 900px){ .lancar .botao-mini{ min-height:44px; } .ontem-tudo .trazer-tudo{ min-height:44px; } .ajuda-escrita .botao.secundario.de-ontem{ min-height:44px; } }