/* ========================================================================== O aplicativo do beneficiario. Folha SEPARADA do sistema.css, e nao um bloco dentro dele. Os dois nao compartilham nada: o sistema.css tem 4600 linhas de tabela, filtro, menu lateral e matriz de alcada, e nada disso existe aqui. Carregar aquilo num telefone 3G para desenhar tres botoes seria fazer a pessoa esperar por codigo que ela nunca vai usar. Esta folha inteira tem menos de 500 linhas e nenhuma dependencia. A paleta e a mesma da marca (brandbook), com uma diferenca de uso: aqui o fundo e o ROXO ESCURO, e nao o cinza claro. Um aplicativo de saude na mao de alguem que pode estar em qualquer lugar precisa ser legivel no sol e nao cegar no escuro do quarto as tres da manha — e o escuro resolve os dois melhor que o claro. ========================================================================== */ :root { --azul: #0C0047; /* base da marca */ --azul-claro: #180a5e; --violeta: #A24CFF; /* a acao — SO onde nao carrega texto */ --violeta-forte: #8823f6; /* preenchimento: contraste 5.8:1 com branco */ /* O VIOLETA QUE PODE VIRAR TEXTO, e por que sao dois e nao um. Medido em 04/08/2026: #A24CFF sobre --fundo (#0C0047) = 4,53:1 passa #A24CFF sobre --superficie (#180d5c) = 4,01:1 REPROVA O 4,53 estava escrito na documentacao e era verdade — contra o fundo da PAGINA. So que o violeta que carrega texto fica em cima de CARTAO, e ali ele reprova. Media-se a cor contra a superficie errada. #B26EFF da 5,26:1 sobre cartao e continua sendo o roxo da marca. O #A24CFF puro nao some: ele fica em anel, borda e icone, onde o minimo e 3:1 e ele passa com folga. */ --violeta-texto: #B26EFF; --laranja: #E77642; /* apoio, nunca acao */ --texto: #FFFFFF; --texto-2: #C9C2E8; /* CLAREADO de #8A82AD, que media ~3,4:1 sobre o fundo escuro — abaixo do minimo de 4,5:1 para texto pequeno. Ele pinta justamente os avisos com consequencia (o de falta cobrada, entre eles). */ --texto-3: #A9A2CC; --fundo: #0C0047; --superficie: #180d5c; --borda: #2a1d75; --ok: #34d399; --atencao: #fbbf24; --erro: #fb7185; /* DOIS TEMAS, UMA FOLHA. Este `:root` e o ESCURO — o padrao historico do aplicativo, e o que aparece se o JavaScript nao rodar (nenhuma regressao: ate hoje so existia o escuro). O CLARO mora no bloco `:root[data-tema= "claro"]` logo abaixo, e um script no `` do `base.html` decide qual vale ANTES da primeira pintura: a preferencia salva, ou o tema do aparelho (`prefers-color-scheme`) quando nao ha escolha. Por isso nao ha `@media (prefers-color-scheme)` duplicando o bloco claro aqui — o script resolve o padrao e grava `data-tema`, e o CSS so precisa do override claro. `color-scheme` faz o proprio navegador vestir os controles nativos (campo, barra de rolagem) na cor certa. */ color-scheme: dark; /* O "vidro": realce claro por cima do fundo escuro (toque, cartao de atalho). Sao os unicos lugares que assumiam o fundo escuro por escrito; viraram token para o claro poder troca-los por um ESCURECIMENTO — branco sobre claro nao aparece. Os valores escuros aqui sao os mesmos de antes, ao pixel: o escuro nao muda. */ --vidro-06: rgba(255, 255, 255, .06); --vidro-08: rgba(255, 255, 255, .08); --vidro-10: rgba(255, 255, 255, .10); --vidro-12: rgba(255, 255, 255, .12); --vidro-14: rgba(255, 255, 255, .14); /* O fundo do campo de formulario: escurece o buraco no tema escuro; no claro vira branco (senao o campo fica um retangulo cinza-escuro na tela clara). */ --campo-fundo: rgba(0, 0, 0, .25); --raio: 16px; --raio-g: 20px; /* O respiro do aparelho: a faixa preta do iPhone e a barra de gestos do Android comem a base da tela. Sem isto, o botao de baixo fica embaixo da barra e nao da para apertar. */ --seguro-base: env(safe-area-inset-bottom, 0px); --seguro-topo: env(safe-area-inset-top, 0px); } /* ========================================================================== O TEMA CLARO. E a MESMA paleta clara que os nativos ja usavam (paridade: eles vieram primeiro, sao a referencia). Fundo `#F3F1FA`, cartao branco, texto no azul-violeta profundo, e o roxo de destaque em `#8823F6` — o mesmo `primary` do tema claro do Android (VIOLETA_FORTE) e o `destaque` do iOS. So os TOKENS mudam; o desenho e as telas sao os mesmos. Contraste conferido para AA: --texto #1A0A5E sobre --fundo #F3F1FA ~14:1 --texto-2 #4C4570 sobre --fundo ~7,4:1 --texto-3 #5C5482 sobre --fundo ~5,6:1 (pinta aviso com peso) --violeta-texto #8823F6 sobre cartao branco 5,8:1 (era o ponto fraco do claro nos nativos: la o roxo-texto dava 2,86:1 — item 5) O roxo de ACAO (--violeta), em anel/borda/icone, precisa de 3:1: #7B2FF7 sobre branco da 4,8:1, passa com folga. O laranja segue o mesmo (apoio, com texto escuro por cima). Os semaforos (ok/atencao/erro) escurecem para aparecer sobre o proprio tom claro nos recados e nas marcas de checagem. */ :root[data-tema="claro"] { color-scheme: light; --violeta: #7B2FF7; /* a acao — anel, borda, icone (>=3:1) */ --violeta-forte: #8823F6; /* preenchimento com texto branco (5,8:1) */ --violeta-texto: #8823F6; /* o roxo que vira TEXTO — igual aos nativos */ --texto: #1A0A5E; --texto-2: #4C4570; --texto-3: #5C5482; --fundo: #F3F1FA; --superficie: #FFFFFF; --borda: #E2DEEF; /* #0A6E45 (nao #0E8F57): o selo "Ativo" e a marca de "câmera ok" pintam o verde sobre o PROPRIO tom (verde a 15%), e ali #0E8F57 dava 3,71:1 — o tom mais escuro sobe para ~5,5:1. Sobre branco sobra folga. */ --ok: #0A6E45; --atencao: #9A5B00; --erro: #C81E43; /* O realce agora ESCURECE (indigo da marca), porque o fundo e claro. */ --vidro-06: rgba(26, 10, 94, .05); --vidro-08: rgba(26, 10, 94, .06); --vidro-10: rgba(26, 10, 94, .07); --vidro-12: rgba(26, 10, 94, .10); --vidro-14: rgba(26, 10, 94, .13); --campo-fundo: #FFFFFF; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--fundo); color: var(--texto); /* A pilha do sistema, sem baixar fonte nenhuma. Num telefone com rede ruim, esperar 200KB de fonte para ler "Falar com um medico agora" e o oposto do que este aplicativo existe para fazer. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; /* 17px e o corpo do iOS: menos que isso o Safari oferece "aumentar zoom" e quebra o layout */ line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* O CORPO E UMA COLUNA, E A TELA OCUPA O QUE SOBRA. Antes, `.tela` pedia `min-height: 100vh` sozinha — a altura INTEIRA da janela. So que ela nao esta sozinha no corpo: a faixa de demonstracao (`.faixa-simulado`) e IRMA dela. Somando, o documento pedia 100vh + 39px numa janela de 100vh, e o computador ganhava barra de rolagem vertical para 38 pixels de NADA, em toda tela curta do aplicativo — a de entrar, a de criar senha, a de esqueci a senha. Medido: conteudo de 766px dentro de uma `.tela` de 900px, documento de 938px numa janela de 900px. Com o corpo em coluna, `flex: 1` faz a tela ocupar o que sobra DEPOIS da faixa, em vez de reivindicar a janela toda por conta propria. */ body { display: flex; flex-direction: column; min-height: 100vh; } /* Fundo com um halo violeta no topo, que e o que da profundidade sem imagem nenhuma. Fixo: rolar a tela nao arrasta o halo junto. */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 60vh; background: radial-gradient(120% 80% at 50% 0%, rgba(162, 76, 255, .28) 0%, rgba(12, 0, 71, 0) 70%); pointer-events: none; z-index: 0; } .tela { position: relative; z-index: 1; max-width: 480px; /* no computador ele fica com cara de telefone, e isso e proposital: e um aplicativo */ margin: 0 auto; padding: calc(16px + var(--seguro-topo)) 20px calc(32px + var(--seguro-base)); /* `flex: 1` no lugar de `min-height: 100vh`: ocupa o que sobra da coluna do corpo, e nao a janela inteira. Ver o comentario em `body`. `min-height: 0` porque item de flex nasce com `min-height: auto` e nao encolheria abaixo do conteudo — que e o comportamento certo aqui, mas escrito de proposito para nao depender do padrao. */ flex: 1; min-height: 0; /* PALAVRA COMPRIDA TEM DE QUEBRAR. VALE PARA A TELA INTEIRA. `overflow-wrap` se herda, e por isso mora aqui em vez de ser repetido em cada classe: a proxima tela que alguem escrever ja nasce protegida. Ate esta linha, o arquivo inteiro nao tinha NENHUMA regra de quebra — nem overflow-wrap, nem word-break, nem hyphens. O caso que provou: o pedido de correcao mostra o e-mail que a pessoa digitou, e e-mail e um token SEM ESPACO — nao ha onde quebrar. Medido, "maria.gracas...@departamentoderecursoshumanos.com.br" exige 562px de largura minima. A coluna do app tem 440px no computador e 280px num celular de 320px. Ou seja: estourava em TODA largura, e como a lista e um grid, o cartao comprido definia a largura da trilha e arrastava os vizinhos junto — o cartao "CEP: 80230-030" saia com os mesmos 562px. `anywhere`, e nao `break-word`: por especificacao o `break-word` NAO entra no calculo de min-content, entao a trilha do grid continuaria sendo dimensionada pela palavra inteira e o cartao continuaria vazando. Com `anywhere` o minimo cai de 562px para 14px. Medido, os dois. Isto nao quebra texto normal: so age quando a palavra nao cabe. */ overflow-wrap: anywhere; } /* LINK DENTRO DE TEXTO CORRIDO. Esta folha estilizava link de barra, de cartao e de botao — e nenhum link solto no meio de um paragrafo, porque ate 04/08/2026 nao havia nenhum. A pagina publica da politica trouxe o primeiro (um `mailto:`), e ele saiu no azul PADRAO do navegador: `rgb(0,0,238)` sobre o fundo escuro da 1,79:1 — ilegivel. E logo na pagina que a revisao das lojas abre. O sublinhado fica: num texto de politica, cor sozinha nao diz que e link. */ .cartao-app a:not([class]), .corpo > p a:not([class]) { color: var(--violeta-texto); text-underline-offset: 3px; } /* --------------------------------------------------------------- topo */ .topo-app { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .marca { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font-weight: 700; letter-spacing: -.01em; } /* `height: auto` GUARDA A PROPORCAO mesmo que alguem mexa nos atributos do ``: a arte e 256x195, e altura igual a largura a esticava 31%. Os dois nativos ja preservavam; so a web distorcia. */ .marca img { border-radius: 8px; height: auto; } /* 20px, e nao os 17 herdados do corpo: a marca cresceu 15% em 25/08/2026 e a palavra acompanhou o simbolo. Os tres escrevem 20. */ .marca span { font-size: 20px; } .bt-conta { display: grid; place-items: center; width: 44px; /* 44px e o alvo minimo de toque da Apple. Menor que isso, quem tem dedo grande erra. */ height: 44px; border-radius: 50%; color: var(--texto-2); background: var(--vidro-06); text-decoration: none; } .bt-conta:active { background: var(--vidro-12); } /* As acoes do topo, a direita da marca: trocar tema e (quando logado) a conta. */ .topo-acoes { display: flex; align-items: center; gap: 8px; } /* As telas do fluxo de entrar (sem cabecalho normal) trazem so o botao de tema, encostado a direita. */ .topo-so-tema { justify-content: flex-end; } /* O botao de TROCAR TEMA. Mesmo alvo de 44px do botao de conta, e aparece em TODAS as telas — inclusive a de entrar: trocar claro/escuro nao depende de login. O ganha `data-tema` por um script no , antes da primeira pintura, entao nunca ha o "flash" de tema errado. */ .bt-tema { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; color: var(--texto-2); background: var(--vidro-06); cursor: pointer; -webkit-tap-highlight-color: transparent; } .bt-tema:active { background: var(--vidro-12); } .bt-tema svg { width: 22px; height: 22px; } /* O icone diz para ONDE se vai: no escuro, um SOL (tocar leva ao claro); no claro, uma LUA (tocar leva ao escuro). A troca e por CSS, junto com o `data-tema` — sem esperar script, sem piscar. */ .bt-tema .lua { display: none; } :root[data-tema="claro"] .bt-tema .sol { display: none; } :root[data-tema="claro"] .bt-tema .lua { display: block; } /* --------------------------------------------------------- faixa simulado */ .faixa-simulado { background: var(--laranja); color: #2a1200; font-size: 15px; font-weight: 600; text-align: center; padding: calc(8px + var(--seguro-topo)) 16px 8px; position: relative; z-index: 2; } /* ------------------------------------------------------------- titulos */ .ola { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; } /* A LEGENDA DE SEÇÃO, igual em toda tela do aplicativo (padrão congelado em 06/08/2026 — as mesmas medidas de `.menu-rotulo`). Ela é legenda, não título: pequena e apagada, para não competir com os cartões que vêm abaixo. */ .secao-app { margin-top: 26px; } .secao-app h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-3); margin: 0 0 12px; } /* ------------------------------------------------- o botao que importa */ /* Sozinho, gigante, primeiro. E o unico botao que a maioria das pessoas vai apertar na vida, e quem aperta costuma estar passando mal agora. Ele nao divide espaco com nada. */ .bt-gigante { display: block; width: 100%; /* Ele virou quando passou a levar para a tela de checagem de câmera, e o navegador sublinha link por padrão — o botão principal do aplicativo apareceu com as duas linhas de texto riscadas. */ text-decoration: none; border: 0; border-radius: var(--raio-g); /* Com destaque, mas em escala: 24px de respiro e título 22px. O primeiro redesenho exagerou (30px/24px) e o herói brigava com o resto da tela. */ padding: 24px; background: linear-gradient(135deg, var(--violeta) 0%, var(--violeta-forte) 100%); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 12px 32px rgba(162, 76, 255, .35), 0 2px 6px rgba(0, 0, 0, .3); font: inherit; -webkit-tap-highlight-color: transparent; } .bt-gigante:active { transform: scale(.985); } .bt-gigante-titulo { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .bt-gigante-apoio { display: block; margin-top: 5px; font-size: 15px; color: rgba(255, 255, 255, .85); } .dica-toque { margin: 12px 4px 0; font-size: 15px; color: var(--texto-3); } /* ------------------------------------------------------------- cartoes */ /* O CARTÃO das telas internas, no raio grande do padrão congelado (06/08/2026), o mesmo dos cartões do menu e do herói — cartão com raio menor no meio dos outros era o que fazia as telas internas parecerem de outro aplicativo. */ .cartao-app { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 18px; margin-top: 16px; } .carteira { position: relative; overflow: hidden; } /* O infinito da marca como marca d'agua, cortado pela borda do cartao. E o unico enfeite da tela inteira. */ .carteira::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 160px; height: 160px; background: url("/estatico/marca/simbolo.png") no-repeat center / contain; opacity: .07; pointer-events: none; } .carteira-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .carteira-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); } .carteira-nome { font-size: 20px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; } .carteira-dados { margin: 0; display: grid; gap: 12px; } .carteira-dados > div { display: flex; justify-content: space-between; gap: 16px; } .carteira-dados dt { color: var(--texto-3); font-size: 14px; /* O ROTULO NAO QUEBRA. Medido em 05/08/2026, no iPhone a 375px: "Empresa" * saia como "Emp / resa" e "Plano" como "Plan / o". * * A causa era o `overflow-wrap: anywhere` global — que existe por um bom * motivo, impedir que o nome comprido da empresa vaze do cartao — chegando * tambem no rotulo. So que rotulo aqui e sempre palavra curta ("CPF", * "Empresa", "Plano"), e quem precisa quebrar e o VALOR, nao o nome dele. * * `flex: none` para o rotulo nao ser espremido quando o valor e longo: era * isso que reduzia a coluna a 32px e forcava a quebra. */ overflow-wrap: normal; white-space: nowrap; flex: none; } .carteira-dados dd { margin: 0; text-align: right; font-size: 14px; font-weight: 600; /* Tabular: numa pilha de CPF e data, os digitos alinham em coluna e o olho acha o diferente sem ler o numero inteiro. */ font-variant-numeric: tabular-nums; } .selo-ativo, .selo-inativo { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .selo-ativo { background: rgba(52, 211, 153, .15); color: var(--ok); } /* O INATIVO NAO E VERMELHO DE ERRO. Nao houve falha nenhuma, e a pessoa nao fez nada errado: o convenio da empresa dela e que mudou. Cor de atencao, do mesmo tom do `.recado-at`, para a recepcao ler a diferenca sem a pessoa sentir que levou uma bronca. */ .selo-inativo { background: rgba(251, 191, 36, .18); color: #ffeec2; } :root[data-tema="claro"] .selo-inativo { color: #6b4b00; } /* ------------------------------------------------------------ consultas */ .lista-consultas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; } .consulta { background: var(--superficie); border: 1px solid var(--borda); /* Mesmo raio e respiro do `.cartao-app` — padrão congelado em 06/08/2026. */ border-radius: var(--raio-g); padding: 18px; display: grid; gap: 12px; } /* `.consulta-quando`, `.dia` e `.hora` saíram em 06/08/2026: no passe do padrão congelado, a tela de consultas passou a destacar O QUE é a consulta (antes o destaque era a data, e uma lista de cinco cartões lia como cinco datas). O par que substituiu é `.hist-o-que` / `.hist-quando` / `.hist-hora`, no bloco das telas internas, no fim desta folha. Regra sem uso reprova no teste de CSS órfão — por isso foi removida junto com o HTML. */ .consulta-o-que { margin: 0; font-size: 15px; } /* O SELETOR VEM REPETIDO com `.cartao-app` na frente, pelo mesmo motivo do `.hist-o-que` logo abaixo: o `.cartao-app p` pinta TODO parágrafo do cartão em 15px, e o cartão de avaliar é um `.cartao-app`. Sem o reforço, o nome do profissional saía 15px/sem-margem no cartão de avaliar e 14px/2px nas marcadas — a mesma linha, dois tamanhos, na mesma tela. A folha já blindava as duas irmãs (`.hist-o-que` e `.hist-quando`) e tinha deixado esta de fora (item 2). Os dois nativos sempre desenharam uma cabeça só, com 14 nos dois casos — ou seja, eles estavam certos e era a web que variava. */ .consulta-quem, .cartao-app .consulta-quem { margin: 2px 0 0; font-size: 14px; color: var(--texto-2); } .consulta-aviso { margin: 8px 0 0; font-size: 15px; color: var(--atencao); } .consulta-acoes { display: flex; gap: 8px; } .consulta-acoes form { flex: 1; } .consulta-acoes .bt-app { width: 100%; } .vazio-app { color: var(--texto-3); font-size: 15px; padding: 20px; text-align: center; border: 1px dashed var(--borda); border-radius: var(--raio); margin: 0 0 16px; } /* -------------------------------------------------------------- botoes */ .bt-app { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; /* acima dos 44px de alvo minimo, com folga */ padding: 0 20px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .bt-app-1 { background: var(--violeta-forte); color: #fff; } .bt-app-1:active { background: var(--violeta); } /* A BORDA E O QUE DIZ "ISTO E UM BOTAO", entao ela precisa dos 3:1. Decisao do Thiago em 08/08/2026, depois da auditoria de acessibilidade: "reforcar so a borda", mantendo o fundo de vidro como ele aprovou. O QUE ERA. A borda usava `--borda`, que e a cor de contorno de CARTAO. Contra o corpo do proprio botao (o vidro composto sobre o que estiver atras) ela media, pela WCAG 1.4.11: escuro sobre cartao 1,01 <- o pior caso: invisivel escuro sobre fundo 1,18 claro sobre fundo 1,04 claro sobre cartao 1,16 A LETRA sempre teve contraste otimo. O que falhava era reconhecer que aquilo e um CONTROLE, e nao texto solto — para baixa visao, e numa tela de celular ao sol, o botao sumia e sobrava a palavra. POR QUE `--violeta`, E NAO UMA COR NOVA. Ele ja e, por definicao deste arquivo, "a acao — anel, borda, icone (>=3:1)". Era o token certo desde sempre; o botao e que pedia o errado. Medido depois da troca, com composicao alfa (`ferramentas/medir_contraste.py`): escuro sobre cartao 3,32 <- o pior caso passa escuro sobre fundo 3,88 claro sobre fundo 4,63 claro sobre cartao 5,16 O fundo de vidro NAO mudou: continua `--vidro-08`, e a cara do botao segue a mesma. Foi a mudanca minima que fecha o criterio. */ .bt-app-2 { background: var(--vidro-08); color: var(--texto); border: 1px solid var(--violeta); } .bt-app-2:active { background: var(--vidro-14); } .bt-app-largo { width: 100%; } /* O BOTAO QUE DESFAZ NAO PODE PARECER O BOTAO QUE FAZ. Cancelar consulta ficava com o mesmo visual do Remarcar, ao lado. Aqui ele ganha a cor de alerta e contorno proprio: quem esta com pressa reconhece pela cor antes de ler. */ .bt-app-perigo { background: rgba(255, 107, 53, .16); color: var(--laranja, #ff8f5e); border: 1px solid rgba(255, 107, 53, .45); } .bt-app-perigo:active { background: rgba(255, 107, 53, .28); } /* O alvo tinha ~22px de altura: metade do minimo de toque. Num link de escapatoria — "Voltar", "Ja tenho senha" — errar o toque e ficar preso na tela, que e exatamente o oposto do que ele existe para resolver. O inline-block com padding e o que da altura ao alvo; o `display: block` de antes esticava a largura e nao a altura. */ .volta { display: inline-block; width: 100%; box-sizing: border-box; text-align: center; margin-top: 16px; padding: 14px 16px; /* 15px de linha + 28 de folga = 48px de alvo */ color: var(--texto-2); font-size: 15px; border-radius: 12px; -webkit-tap-highlight-color: transparent; /* SEM SUBLINHADO — decisão do Thiago em 08/08/2026 (itens 110 e 119). O `.volta` é um ``, então o navegador o sublinha por padrão. Mas ele não se comporta como link: é largura cheia, centralizado, com raio e com `:active` de fundo — ou seja, um BOTÃO. O sublinhado era resquício da tag, e nenhum dos dois nativos o tinha. As outras peças da mesma família já faziam isso (`.bt-app`, `.bt-gigante`); esta ficou de fora e virou duas divergências, uma por nativo. Tirar aqui fecha as duas com uma linha, e sem tocar em Swift nem em Kotlin. */ text-decoration: none; } .volta:active { background: var(--vidro-06); } /* O VOLTAR NO TOPO, À ESQUERDA. Item 4 da divergência 44, 14/08/2026. MODIFICADOR, e não mudança na regra de cima. `.volta` é usada por dezesseis telas, e na maioria delas o lugar dele é o fim: o conteúdo é curto, o fim da tela é o fim da leitura e o link centralizado fecha a página. Mexer na regra base para consertar UMA tela moveria o Voltar de todas elas, que é o defeito clássico desta casa: consertar o visível e estragar o resto. Quem precisa do de cima é a tela de MARCAR: depois da lista de especialidades, do bloco de fora do plano e de uma agenda que nesta base mede 383 faixas, o rodapé fica longe de qualquer polegar. Os dois nativos já tinham o Voltar no topo; aqui a web se alinha a eles. As medidas não mudam: os mesmos 14px de folga vertical, logo o mesmo alvo de 48px. O que muda é a largura (só o que o texto ocupa, senão a faixa inteira fica clicável no topo da tela) e o alinhamento. A margem negativa de 16px desfaz o recuo do próprio padding, para a palavra nascer na mesma coluna do título logo abaixo em vez de dedada para dentro. */ .volta-topo { width: auto; text-align: left; margin: -6px 0 6px -16px; } /* ----------------------------------------------------------- formularios */ .forma-app { display: grid; gap: 20px; margin-top: 8px; } .campo-app label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--texto-2); } .dica-campo { margin: -2px 0 8px; font-size: 15px; color: var(--texto-3); } /* A LINHA DE ACEITE do convite (§151). Caixa marcável com o texto ao lado, e o texto é um `label` inteiro — tocar em qualquer palavra marca a caixa, que num celular é a diferença entre conseguir e não conseguir. 🔴 OS DOIS SELETORES SÃO `.campo-app` + CLASSE, e não a classe sozinha. A primeira versão escreveu `.linha-aceite` (0,1,0) e `.campo-app label` (0,1,1) continuou ganhando: o `display:block` de lá valia, e o flex daqui não. Especificidade que perde não dá erro — dá layout errado, calado. 🔴 E `appearance: auto` NÃO É ENFEITE: é o conserto de um defeito que o Thiago achou usando a tela em 24/09/2026 («o li e concordo não está funcionando»). A regra `.campo-app input` põe `appearance: none` em TODO campo, porque os campos de texto do aplicativo são desenhados por nós. Numa CAIXA MARCÁVEL isso apaga o controle inteiro: some o quadradinho e some o tique. O clique continuava marcando o campo, e o formulário continuava enviando — mas a pessoa não via NADA acontecer, concluía que não funcionou, clicava de novo (desmarcando) e o navegador barrava o envio. É o pior tipo de defeito de tela: o código estava certo e a pessoa estava certa. Só a tinta faltava. */ .campo-app label.linha-aceite { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--texto-2); cursor: pointer; margin-bottom: 0; } .campo-app .linha-aceite input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; /* 24px, e não o tamanho padrão do navegador: o alvo de toque mínimo é 24x24 pela WCAG 2.2, e a caixa nativa do iPhone vem menor que isso. */ width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px; margin: 0; padding: 0; /* A borda, o fundo e o raio vêm da regra dos campos de texto e desenhariam um retângulo cinza em volta do controle nativo. */ border: 0; background: none; border-radius: 0; /* `--violeta-forte`, e não `--violeta`: é o roxo de PREENCHIMENTO, medido em 5,8:1 com branco. O `--acento` da primeira versão NÃO EXISTE neste arquivo — a caixa teria ficado com o azul padrão do navegador. */ accent-color: var(--violeta-forte); } .campo-app input, .campo-app select, .campo-app textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borda); background: var(--campo-fundo); color: var(--texto); /* 17px OBRIGATORIO nos campos: com menos que isso o Safari do iPhone da zoom ao focar, e a tela inteira salta de lado. E o bug de layout mais comum de formulario em telefone. */ font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; } .campo-app textarea { min-height: 96px; resize: vertical; } .campo-app input:focus, .campo-app select:focus, .campo-app textarea:focus { outline: 2px solid var(--violeta); outline-offset: 2px; border-color: transparent; } .campo-app input::placeholder { color: var(--texto-3); } /* A setinha do select desenhada em SVG embutido: sem ela, o -webkit-appearance none deixa o campo sem nenhuma pista de que e uma lista. */ .campo-app select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C2E8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; } /* -------------------------------------------------------------- recados */ .recado { border-radius: 12px; padding: 14px 16px; margin: 0 0 20px; font-size: 15px; border: 1px solid; } .recado p { margin: 0; } .recado p + p, .recado .mt2 { margin-top: 10px; } .recado-erro { background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .35); color: #ffd7dd; } .recado-ok { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); color: #c9f7e5; } .recado-at { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .3); color: #ffeec2; } .recado-info { background: rgba(162, 76, 255, .12); border-color: rgba(162, 76, 255, .3); color: #e8d9ff; } /* O AVISO DE COBERTURA, no topo da Inicio e ANTES do nome da pessoa. Chegou a web em 06/08/2026, por decisao do Thiago ("leva o aviso pra web e mantem nos nativos"): antes disso quem estava sem cobertura era devolvido ao login e nao alcancava nem a Ajuda, que e a tela do 192. NAO E UM `.recado`. O recado fala do que acabou de acontecer e sai na proxima visita; este fala de um ESTADO que continua ali amanha. Por isso ele e bloco cheio, e nao contorno — e por isso vem antes do "Ola, Maria". AS CORES SAO AS DOS NATIVOS, hexadecimal por hexadecimal: #93000A/#FFDAD6 no escuro e #F9DEDC/#410E0B no claro. Escrever assim nas tres e regra do projeto — foi copiando "a mesma cor" de dois jeitos que o rosa da Ajuda derivou entre iPhone e Android sem ninguem ter como ver. */ .aviso-cobertura { background: #93000A; color: #FFDAD6; border-radius: 16px; padding: 20px; margin: 0 0 20px; font-size: 17px; } :root[data-tema="claro"] .aviso-cobertura { background: #F9DEDC; color: #410E0B; } /* --------------------------------------------------------------- entrada */ .entrada-app { padding-top: 8vh; text-align: center; } .entrada-marca { margin: 0 auto 20px; display: block; height: auto; } /* Duas versoes do logo, uma por tema. O CSS mostra a certa (a mesma logica do sol/lua). Vem logo apos `.entrada-marca` de proposito: a regra que ESCONDE tem a mesma forca da que mostra, entao a ordem no arquivo e que decide. */ .mostra-no-claro { display: none; } :root[data-tema="claro"] .mostra-no-escuro { display: none; } :root[data-tema="claro"] .mostra-no-claro { display: block; } .entrada-titulo { font-size: 24px; font-weight: 700; margin: 0 0 8px; } .entrada-lema { color: var(--texto-2); font-size: 16px; margin: 0 0 32px; } /* O formulario volta a ser alinhado a esquerda: rotulo centralizado obriga o olho a procurar onde cada linha comeca. */ .entrada-app .forma-app { text-align: left; } .entrada-rodape { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--borda); } .entrada-rodape p { color: var(--texto-2); font-size: 15px; margin: 0 0 12px; } /* 15px, e nao 13px: `.mini` pinta aviso com consequencia, e o menor texto da tela nao pode ser o que a pessoa mais precisa ler. */ .mini { font-size: 15px; color: var(--texto-3); margin-top: 12px; } .mt2 { margin-top: 10px; } /* A BARRA DE BAIXO SAIU em 06/08/2026: a Início virou o menu do aplicativo (ver `.menu`), e o CSS dela foi removido junto com o HTML — deixar regra sem uso reprova no teste de CSS órfão, e com razão. */ /* ------------------------------------------------------ falar com a gente */ .ajuda-bloco { margin-top: 28px; padding: 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); } .ajuda-bloco h2 { margin: 0 0 6px; font-size: 18px; } .ajuda-bloco p { margin: 0 0 14px; font-size: 15px; color: var(--texto-2); } .ajuda-horario { font-size: 14px; color: var(--texto-3); margin-top: 10px; } .bt-whats { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 12px; /* CONTORNO, E NAO PREENCHIMENTO — mudou em 04/08/2026, e a razao esta no bloco `.emergencia` logo abaixo: cheio, ele pesava mais que o aviso do SAMU na mesma tela. De quebra, ficou MAIS legivel e mais parecido com o WhatsApp de verdade: como preenchimento o verde tinha de ser escuro (#1f8f4e) para o branco por cima aguentar, e mesmo assim dava 4,12:1 — reprovava. Como LETRA sobre o cartao, o verde OFICIAL (#25D366) da 8,46:1. A cor que a pessoa reconhece de longe agora e a que esta na tela. */ background: rgba(37, 211, 102, .10); border: 1.5px solid #25D366; color: #25D366; font-size: 16px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; } .bt-whats svg { width: 22px; height: 22px; } /* ------------------------------------------------------------ emergência */ /* NAO E ENFEITE, E SEGURANCA. Este aplicativo marca teleconsulta, e teleconsulta NAO atende infarto, AVC nem acidente. Alguem com dor no peito abrindo o aplicativo precisa ler, antes de qualquer outra coisa, que o caminho e o 192 — e o minuto perdido esperando um medico pela tela e o minuto que decide o caso. Vermelho e nao laranja: laranja aqui e cor de apoio da marca, e este aviso nao e apoio. */ /* CHEIO, E NAO CONTORNO. A inversao mais importante desta folha. Ate 04/08/2026 este bloco era 12% de rosa sobre o fundo escuro. Medido, o bloco inteiro dava 1,1:1 contra a pagina — COMO FORMA, ele praticamente nao existia. E logo abaixo dele havia um botao verde cheio e saturado. Numa tela de ajuda isso significa: quem bate o olho ve primeiro "fale no WhatsApp", e o "ligue 192" so aparece para quem le. Para dor no peito, essa ordem esta invertida — o aviso vinha primeiro na leitura e por ULTIMO no peso. AS CORES SAO AS DOS DOIS NATIVOS, e nao uma terceira invencao: os dois ja desenhavam este bloco cheio, em rosa claro com texto vermelho escuro. Quem estava fora do padrao era esta folha. Bloco claro sobre a pagina escura da 16,82:1 como forma — e o elemento mais forte da tela, que e o que se quer. Medido: texto #B81A33 sobre #FFEDEF da 5,76:1. O WhatsApp virou contorno. A ordem de leitura nao mudou; o que mudou foi qual dos dois o olho encontra primeiro. */ .emergencia { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 16px; border-radius: 14px; background: #FFEDEF; color: #B81A33; font-size: 16px; text-decoration: none; } .emergencia strong { color: #B81A33; font-weight: 700; } .emergencia svg { width: 26px; height: 26px; flex: none; } /* ========================================================================== MOVIMENTO Esta folha tinha UMA regra de transicao, e ela era a que DESLIGA o movimento. Ou seja: o aplicativo que o beneficiario usa nao tinha nenhum. O botao afundava (`.bt-gigante:active`), mas sem transicao — saltava. O que o movimento faz aqui, e o unico motivo de existir: dizer que o toque foi recebido. Num telefone 3G, entre tocar e a tela seguinte carregar podem passar dois segundos; sem retorno nenhum, a pessoa toca de novo. O afundar responde em 120ms e resolve isso — nao e enfeite, e conversa. POR QUE NAO O MOVIMENTO DO LINEAR OU DO RAYCAST. Aquilo e feito para quem passa o dia na ferramenta e reconhece o padrao. Aqui a pessoa abre o aplicativo quando esta doente ou preocupada, talvez uma vez por mes. Animacao que chama atencao para si mesma vira ruido na hora errada. E POR QUE QUASE NADA DE :hover. Isto e um aplicativo de celular. Dedo nao tem hover — o que existe e o toque. Gastar cuidado em hover aqui seria caprichar no que quase ninguem ve. ========================================================================== */ :root { /* Tres tempos, e nao mais. Cada um com um trabalho. */ --mov-toque: 120ms; /* o dedo apertou: tem de parecer imediato */ --mov-estado: 200ms; /* cor, borda, foco */ --mov-entrada: 320ms; /* conteudo chegando na tela */ /* Sai rapido, chega devagar: e assim que objeto de verdade se move. */ --sobe: cubic-bezier(.4, 0, .2, 1); /* Uma pontinha de volta ao soltar o botao. E o que da a sensacao de material, e nao de figura mudando de cor. Sem exagero: 1.12 e o limite antes de virar gelatina. */ --solta: cubic-bezier(.34, 1.12, .64, 1); } /* --- o toque ------------------------------------------------------------ */ .bt-gigante { transition: transform var(--mov-estado) var(--solta), box-shadow var(--mov-estado) var(--sobe); } .bt-gigante:active { transform: scale(.97); /* A sombra encolhe junto: o botao nao so diminui, ele CHEGA MAIS PERTO do fundo. Sem isto o afundar parece um erro de escala. */ box-shadow: 0 4px 12px rgba(162, 76, 255, .3), 0 1px 3px rgba(0, 0, 0, .3); transition-duration: var(--mov-toque); } .bt-app, .volta, .bt-conta { transition: background var(--mov-estado) var(--sobe), border-color var(--mov-estado) var(--sobe), transform var(--mov-estado) var(--solta); } .bt-app:active, .volta:active, .bt-conta:active { transform: scale(.97); transition-duration: var(--mov-toque); } /* Cartao de consulta: ele e tocavel quando leva a algum lugar. O recuo e menor que o do botao — ele e maior, e a mesma escala num objeto grande parece movimento demais. */ .consulta, .cartao-app { transition: border-color var(--mov-estado) var(--sobe), transform var(--mov-estado) var(--solta); } a.consulta:active, a.cartao-app:active { transform: scale(.99); } /* --- foco de teclado ---------------------------------------------------- */ /* Quem navega por teclado ou por leitor de tela precisa ver o anel APARECER, e nao piscar pronto: o movimento e o que mostra para onde ele foi. */ .bt-gigante:focus-visible, .bt-app:focus-visible, .volta:focus-visible, .bt-conta:focus-visible, .campo-app input:focus-visible, .campo-app select:focus-visible, .campo-app textarea:focus-visible { transition: outline-offset var(--mov-toque) var(--sobe), border-color var(--mov-estado) var(--sobe); } /* --- chegada do conteudo ------------------------------------------------ */ /* DENTRO de `no-preference`, e nao aplicado sempre com um desligamento depois. A diferenca importa: se a animacao comecasse em `opacity: 0` e o sistema desligasse animacoes, o conteudo ficaria INVISIVEL para exatamente quem pediu menos movimento. Assim, quem nao quer movimento simplesmente nunca entra nesta regra, e ve a tela pronta. */ @media (prefers-reduced-motion: no-preference) { @keyframes chega { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ola, .bt-gigante, .dica-toque, .secao-app { animation: chega var(--mov-entrada) var(--sobe) both; } /* Escalonado, para o olho seguir de cima para baixo em vez de tudo pular junto. Passos de 50ms: menos que isso nao se percebe, mais que isso a tela parece lenta. */ .ola { animation-delay: 0ms; } .bt-gigante { animation-delay: 50ms; } .dica-toque { animation-delay: 100ms; } .secao-app { animation-delay: 150ms; } /* O recado de erro nao escalona: quem errou a senha precisa ver o motivo agora, e nao daqui a 150ms. */ .recado { animation: chega var(--mov-toque) var(--sobe) both; } } /* ------------------------------------------------------------ acessibilidade */ /* Quem pediu menos movimento no sistema nao ganha o afundar do botao. */ @media (prefers-reduced-motion: reduce) { .bt-gigante:active { transform: none; } * { transition: none !important; animation: none !important; } } /* Contraste alto: alguem que ligou isso precisa de borda, nao de sutileza. */ @media (prefers-contrast: more) { .cartao-app, .consulta, .campo-app input, .campo-app select, .campo-app textarea { border-color: var(--violeta); } /* A regra mirava `.texto-3`, uma CLASSE que nao existe em tela nenhuma — o que existe e a VARIAVEL `--texto-3`. A regra de contraste alto, escrita justamente para quem mais precisa dela, nunca teve efeito. Redefinir a variavel dentro do media query alcanca tudo que a usa. */ :root { --texto-3: var(--texto-2); } } /* Tela pequena de verdade (iPhone SE): o botao gigante encolhe um degrau em vez de empurrar a carteirinha para fora da primeira dobra. */ @media (max-height: 700px) { .bt-gigante { padding: 18px 20px; } .bt-gigante-titulo { font-size: 20px; } .ola { font-size: 24px; margin-bottom: 16px; } } /* ========================================================================== GRUPO 2 — as telas que entraram depois: política, histórico, plano, correção e a checagem de câmera. Nada aqui inventa peça nova quando uma existente serve. `.cartao-app`, `.consulta` e `.recado` já cobrem quase tudo; o que segue são as quatro coisas que realmente não existiam. ========================================================================== */ /* --- texto corrido da política --------------------------------------- */ /* O único lugar do aplicativo com texto para LER, e não para agir. Linha mais curta e respiro maior entre parágrafos: 17px numa coluna de 480px dá umas 85 letras por linha, e o olho se perde na volta. */ .politica-titulo { font-size: 15px; font-weight: 700; margin: 24px 0 8px; color: var(--texto); } .politica-titulo:first-child { margin-top: 0; } .cartao-app p { margin: 0 0 12px; color: var(--texto-2); font-size: 15px; } .cartao-app p:last-child { margin-bottom: 0; } .cartao-app strong { color: var(--texto); } .lista-simples { margin: 0; padding-left: 20px; color: var(--texto-2); font-size: 15px; } .lista-simples li { margin-bottom: 6px; } /* --- estrelas da avaliação -------------------------------------------- */ /* Rádios de verdade por baixo, e o visual por cima. Sem JavaScript, e cada estrela é um alvo de 44px — com 24px, que é o tamanho do desenho, metade dos toques cai na estrela errada. */ .estrelas { display: flex; gap: 4px; margin: 12px 0 16px; } .estrela { position: relative; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer; font-size: 30px; line-height: 1; color: var(--texto-3); -webkit-tap-highlight-color: transparent; } .estrela input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } /* `:has` pinta a estrela escolhida E todas antes dela — que é como uma nota de 1 a 5 se lê. Navegador sem `:has` mostra só a escolhida acesa, o que continua dizendo a nota. */ .estrela:has(input:checked) { color: var(--laranja); } .estrelas:has(input:checked) .estrela { color: var(--laranja); } .estrelas .estrela:has(input:checked) ~ .estrela { color: var(--texto-3); } .estrela:has(input:focus-visible) { outline: 2px solid var(--violeta); outline-offset: 2px; border-radius: 8px; } /* NO TELEFONE MAIS ESTREITO AS CINCO ESTRELAS NAO CABIAM, e o preco era a tela inteira andando de lado. A conta, a 320px (iPhone SE, e o Android barato que a Copaiba tem de sobra): 5 x 48px + 4 vaos de 4px = 256. Dentro do cartao sobram 238 — 20px de recuo da tela e 20 do cartao, dos dois lados. Faltavam 18px, e como `.tela` e item de flex com `min-width: auto`, ela nao encolhia: CRESCIA para 338 e levava a pagina junto. Rolagem horizontal na tela de avaliar a consulta que a pessoa acabou de ter. 44px e o MINIMO de alvo de toque, e nao um numero escolhido para caber. O desenho da estrela tem 24px; com 24px de alvo metade dos toques cai na estrela errada, e uma nota errada sobre um medico e pior que nota nenhuma. Aqui 5 x 44 + 16 = 236, que entra nos 238 com 2px de folga. Abaixo disto nao da para descer — se um dia faltar espaco de novo, o que muda e o recuo do cartao, nunca o alvo. */ @media (max-width: 360px) { .estrela { width: 44px; height: 44px; font-size: 28px; } } .avaliar { margin-top: 12px; } .avaliar .campo-app { margin-bottom: 12px; } /* --- checagem de câmera e microfone ----------------------------------- */ .video-caixa { border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 16px; aspect-ratio: 4 / 3; } .video-caixa video { width: 100%; height: 100%; object-fit: cover; /* Espelhado, como todo aplicativo de vídeo faz: a pessoa se reconhece melhor no reflexo do que na imagem real. */ transform: scaleX(-1); } .checagem { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; } .checagem li { display: flex; align-items: center; gap: 12px; font-size: 15px; } .checagem .rotulo { color: var(--texto); font-weight: 600; } .checagem .detalhe { color: var(--texto-3); margin-left: auto; font-size: 14px; } /* A marca NÃO é só cor: leva um símbolo junto. Cerca de 8% dos homens não distingue vermelho de verde, e "câmera ok" contra "câmera bloqueada" é justamente a informação que não pode depender disso. */ .checagem .marca { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } .checagem li[data-estado="esperando"] .marca { background: var(--vidro-10); color: var(--texto-3); } .checagem li[data-estado="esperando"] .marca::before { content: "…"; } .checagem li[data-estado="ok"] .marca { background: rgba(52,211,153,.16); color: var(--ok); } .checagem li[data-estado="ok"] .marca::before { content: "✓"; } .checagem li[data-estado="erro"] .marca { background: rgba(251,113,133,.16); color: var(--erro); } .checagem li[data-estado="erro"] .marca::before { content: "!"; } /* --- atalhos da tela inicial ------------------------------------------ */ /* Fila de destinos secundários. Eles não competem com o botão gigante: são menores, sem preenchimento, e vêm depois da carteirinha. */ /* UMA COLUNA, e nao duas — mudou em 04/08/2026, junto com a entrada da ajuda nesta fila. Com duas colunas, cada cartao tinha ~40 caracteres de largura. Enquanto os rotulos eram "Meu plano" e "Minha familia" isso passava; com "Ajuda e falar com a gente / WhatsApp, duvidas comuns e o que fazer numa emergencia" o cartao virou quatro linhas ao lado de um de duas, e a grade ficou com um buraco no meio. Encurtar a frase resolveria a grade e pioraria a tela: e justamente essa frase que diz que ali dentro tem telefone de emergencia. E OS DOIS NATIVOS JA EMPILHAM em uma coluna. Manter duas aqui era a folha web divergindo dos irmaos por acidente de layout. */ /* A antiga fila de ATALHOS (lista de uma coluna) saiu com o redesenho de 06/08/2026: a Início virou a grade `.menu` abaixo. CSS removido junto com o HTML, senão reprova no teste de CSS órfão. */ /* ========================================================================== O PADRÃO DAS TELAS DO APLICATIVO — CONGELADO em 06/08/2026 O Thiago aprovou o desenho da Início depois de uma rodada longa de ajuste fino ("ficou bom, pode congelar o padrão"). Estas são as medidas que TODA tela do aplicativo segue — web, iPhone e Android. Mudou aqui, muda nas três. cartão de destino chip tonal 58px (raio 18) + rótulo 18px/700, centrado, rótulo composto em DUAS linhas (trava de 6,5em) chip violeta a 16% no escuro, 10% no claro; ícone 29px grade 2 colunas FLUIDAS (1fr 1fr), gap 12px, alinhada às MESMAS margens dos outros cartões da tela legenda de seção 13px/700, caixa alta, tracking .09em, cor --texto-3 herói (ação) padding 24px, título 22px/700 cartão de aviso padding 18px, informação principal 20px/700 raio --raio-g (20px) em cartão grande, --raio (16px) no resto A REGRA QUE ISSO EXISTE PARA IMPEDIR: ajuste de varejo. Foi mexendo em uma medida de cada vez — sem olhar o conjunto — que a tela ficou desarmônica e precisou de um passe de design inteiro. Ajuste que valer aqui, aplique nas telas todas; senão a Início vira a única bonita. ========================================================================== */ /* ========================================================================== O MENU DA INÍCIO — a grade de destinos (redesenho aprovado 06/08/2026). Substitui a barra de baixo: a Início vira o índice do aplicativo, e cada destino é um cartão da grade. Duas colunas, ícone em cima e rótulo embaixo — maior e mais calmo que a antiga lista de atalhos, e igual nas três telas. ========================================================================== */ .menu { display: grid; /* Colunas FLUIDAS, alinhadas às MESMAS margens dos cartões de cima. A rodada de 06/08 tentou quadrados fixos centrados (116px, depois 139px com space-evenly) e o Thiago vetou: a grade flutuava desalinhada da borda do herói e do lembrete, e desalinhamento se lê como bagunça. Harmonia vem de alinhamento — o cartão cresce e encolhe com a tela, como todos os outros. */ grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } /* O CARTÃO DO MENU: quase-quadrado, com um CHIP de ícone dando massa visual. * * O ícone solto num quadrado vazio foi o que deixou a versão anterior "sem * graça": faltava peso no centro. O chip tonal (o quadradinho arredondado * violeta atrás do ícone) é a metáfora de ícone de aplicativo — dá âncora * visual, ritmo entre os seis cartões, e é o mesmo desenho do modelo aprovado. * A letra fica nos 15px/700 que o Thiago aprovou. */ .menu-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; aspect-ratio: 1.08 / 1; padding: 16px 10px; border-radius: var(--raio-g); background: var(--vidro-06); border: 1px solid var(--borda); color: var(--texto); text-decoration: none; /* Conteúdo maior que a primeira versão (pedidos do Thiago, 06/08): o cartão ficou, o miolo cresceu — chip 58, ícone 29, e a letra subiu duas vezes (15 → 16,5 → 18). */ font-size: 18px; font-weight: 700; text-align: center; line-height: 1.2; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .menu-chip { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: rgba(162, 76, 255, .16); flex: none; } :root[data-tema="claro"] .menu-chip { background: rgba(123, 47, 247, .10); } .menu-chip > .ico { color: var(--violeta-texto); width: 29px; height: 29px; } /* O rótulo reserva DUAS linhas mesmo quando tem uma: assim os chips dos seis cartões ficam na MESMA altura, e "Carteirinha" não sobe em relação a "Marcar consulta". Rótulo de duas palavras quebra em duas linhas (a trava de largura garante — sem ela, vizinhos ficavam com desenhos diferentes). */ .menu-tile > span:last-child { display: flex; align-items: flex-start; justify-content: center; min-height: 2.4em; /* 6,5em, e não 7: com a letra de 16,5px, "Plano e família" cabia numa linha e os vizinhos quebravam em duas — a trava mais justa uniformiza. */ max-width: 6.5em; } .menu-tile:active { background: var(--vidro-12); transform: scale(.985); } @media (hover: hover) { .menu-tile:hover { background: var(--vidro-10); border-color: var(--violeta-texto); } } @media (prefers-reduced-motion: reduce) { .menu-tile { transition: none; } .menu-tile:active { transform: none; } } /* O rótulo do menu, curto e apagado, acima da grade: é legenda, não título — menor e com mais tracking, para não competir com os cartões. */ .menu-rotulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-3); margin: 26px 0 0; } .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mb4 { margin-bottom: 16px; } /* --- o que é logo ------------------------------------------------------ */ /* Fica ACIMA do botão gigante, e é a única coisa que ganha esse lugar. Uma consulta amanhã às 9h vale mais do que qualquer outra informação da tela no momento em que a pessoa abre o aplicativo — e falta é cobrada. */ .lembretes { display: grid; gap: 12px; margin-bottom: 20px; } .lembrete { border-radius: var(--raio-g); /* Em escala com o herói: um degrau abaixo (18px de respiro, data 20px). */ padding: 18px; /* Laranja, e não violeta: o violeta é a AÇÃO desta interface, e o lembrete não é ação — é aviso. Com a mesma cor do botão gigante, os dois brigariam pela atenção logo na primeira dobra. */ background: rgba(231, 118, 66, .14); border: 1px solid rgba(231, 118, 66, .4); } .lembrete-quando { margin: 0; /* 20px e branco quase puro: e A informacao da tela. Estava 17px em #ffd9c2, que mede pouco sobre o laranja do cartao — e quem le isso costuma estar com pressa, as 2h, com o brilho no minimo. No redesenho de 06/08 assentou em 20px: um degrau abaixo do titulo do herói (22px). */ font-size: 20px; font-weight: 700; color: #fff4ec; font-variant-numeric: tabular-nums; } .lembrete-o-que { margin: 2px 0 0; font-size: 15px; color: var(--texto-2); } /* O botao de ver a senha. Discreto: ele nao disputa com o botao principal, mas e grande o bastante para o dedo (44px de altura minima). */ .ver-senha { display: block; margin-top: 8px; padding: 10px 0; min-height: 44px; background: none; border: 0; color: var(--violeta-texto); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; } /* -------------------------------------------------------------------------- ONDE ESTA O FOCO O CSS do operador tem anel de foco desde sempre; o do aplicativo nao tinha nenhum. Quem navega por teclado — ou por acessibilidade motora, que e o caso de parte de quem mais precisa de telemedicina — nao enxergava onde estava. `:focus-visible` e nao `:focus`: quem toca com o dedo nao ve o anel, e quem chega pelo teclado ve. Sem essa distincao o anel aparece a cada toque e alguem "conserta" tirando ele. -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--violeta-texto); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- A SALA DA CONSULTA — a tela em que o atendimento acontece -------------------------------------------------------------------------- Ate 05/08/2026 nao existia: o botao jogava a pessoa para o navegador do celular. O Thiago apontou que o app que ele usa hoje faz a consulta por dentro, e a medicao deu razao a ele — a pagina do fornecedor embute sem reclamar. O QUADRO OCUPA O QUE SOBRA DA TELA, e nao uma altura fixa: `dvh` (dynamic viewport height) e nao `vh` porque no celular a barra do navegador aparece e some, e com `vh` o video ficaria cortado justamente quando ela aparece. Onde `dvh` nao existe, o `vh` de cima vale como reserva. */ .sala-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; } .sala-rotulo { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); } .sala-quem { margin: 2px 0 0; font-size: 18px; font-weight: 600; } /* SAIR E UM ALVO DE VERDADE (44px), e nao um link fino: quem toca nele pode estar com pressa, ou passando mal. */ .sala-sair { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto); text-decoration: none; font-weight: 600; flex: none; } .sala-sair:active { background: var(--vidro-12); } .sala-quadro { display: block; width: 100%; height: 68vh; height: 68dvh; min-height: 380px; border: 0; border-radius: 14px; /* FUNDO BRANCO, e nao transparente: a pagina do fornecedor e clara, e enquanto ela carrega um fundo escuro por baixo pisca em contraste. */ background: #fff; } .sala-socorro { padding: 12px 2px 0; } .sala-socorro .mini { color: var(--texto-3); } .sala-socorro a { color: var(--violeta-texto); } /* ========================================================================== TEMA CLARO — os poucos ajustes que os TOKENS nao alcancam. Quase tudo troca sozinho: os componentes leem `var(--fundo)`, `var(--texto)` e companhia, e o bloco `:root[data-tema="claro"]` la em cima ja redefiniu esses tokens. Sobram os lugares onde a cor estava ESCRITA a mao para o fundo escuro — uma seta de era cinza-clara (desenhada para o campo escuro) e some sobre o branco: redesenhada com traco escuro. */ :root[data-tema="claro"] .campo-app select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5482' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* Os recados: fundo e borda sao rgba translucido e clareiam sozinhos; o TEXTO era claro (para o escuro) e precisa escurecer para aparecer sobre o tom. */ :root[data-tema="claro"] .recado-erro { color: #A8102F; } :root[data-tema="claro"] .recado-ok { color: #0A6E45; } :root[data-tema="claro"] .recado-at { color: #7A4A00; } :root[data-tema="claro"] .recado-info { color: #8823F6; } /* O WhatsApp: o verde OFICIAL #25D366 da 8:1 sobre CARTAO ESCURO e some sobre branco (1,4:1). No claro, verde escurecido (#0F7A3E, ~5:1) — reconhecivel e legivel. */ :root[data-tema="claro"] .bt-whats { border-color: #0F7A3E; color: #0F7A3E; } /* O botao de perigo: o laranja-texto sobre o proprio tom claro precisa escurecer. O token --laranja segue vivo (a faixa de demonstracao o usa como FUNDO, com texto escuro por cima), por isso e override de componente. */ :root[data-tema="claro"] .bt-app-perigo { color: #B34A1F; } /* A emergencia ja e bloco claro nos DOIS temas (rosa com vermelho escuro; 16,8:1 no escuro, 5,76:1 aqui). Sobre a pagina clara ela ganha um contorno para nao se dissolver no fundo — continua sendo o elemento mais forte da tela. */ :root[data-tema="claro"] .emergencia { border: 1px solid rgba(184, 26, 51, .30); } /* A DATA da proxima consulta (o lembrete): era creme quase-branco, para o cartao laranja ESCURO. No claro o cartao vira um pessego suave e o creme some (2,75:1). Vira laranja-queimado escuro — legivel (~6,8:1) e ainda quente, que e o ponto: e A informacao da tela, lida com pressa e no brilho minimo. */ :root[data-tema="claro"] .lembrete-quando { color: #7A3410; } /* ========================================================================== CSS DAS TELAS INTERNAS, do passe de 06/08/2026 que levou o padrão congelado da Início para as outras telas. Cada bloco abaixo é de uma tela e usa prefixo próprio. ========================================================================== */ /* ---- historico.html ---- */ /* ========================================================================== MINHAS CONSULTAS (/app/historico) — passe visual de 06/08/2026. A tela tem três blocos (avaliar, marcadas, já aconteceram) e UM cartão só: o `.consulta` do padrão congelado. Estas regras mudam a hierarquia DENTRO do cartão e dão o tom do que já passou. Nenhuma delas cria um segundo desenho de cartão — se um dia precisar disso, o problema é outro. ========================================================================== */ /* A CONSULTA EM DESTAQUE, E A DATA COMO APOIO — a inversão do que havia. O `.consulta-quando` antigo punha a data em 17px/700 e a especialidade em 15px comum: cinco cartões seguidos liam como cinco datas, e o que a pessoa procura na lista é a consulta ("Cardiologia", "Clínica geral"). Os 18px/700 são os mesmos do rótulo dos cartões do menu — um degrau abaixo do lembrete da Início (20px), que continua sendo a única informação com hora marcada que ganha o topo do aplicativo. O SELETOR VEM REPETIDO com `.cartao-app` na frente de propósito: o `.cartao-app p` pinta TODO parágrafo do cartão em 15px/--texto-2, e o cartão de avaliar é um `.cartao-app`. Sem esse reforço a cabeça dele nasceria apagada — que é, aliás, o que acontecia com o `.consulta-o-que` de antes, sem ninguém ver. */ .hist-o-que, .cartao-app .hist-o-que { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--texto); } .hist-quando, .cartao-app .hist-quando { margin: 4px 0 0; font-size: 15px; color: var(--texto-2); /* Tabular: numa pilha de datas os dígitos alinham em coluna e o olho acha a diferente sem ler a data inteira. */ font-variant-numeric: tabular-nums; } /* A HORA no violeta que pode virar TEXTO (--violeta-texto: os 5,26:1 medidos em cima de CARTÃO, e não os 4,53:1 medidos contra o fundo da página). É ela que a pessoa procura quando confere se dá tempo. */ .hist-quando .hist-hora { color: var(--violeta-texto); font-weight: 700; } /* O QUE JÁ ACONTECEU É SÓ CONTORNO, e é só isso que o separa das marcadas: mesmo cartão, mesmo raio, mesmo respiro, sem tinta dentro. Ele não tem ação nenhuma para apertar — não precisa do peso da superfície cheia. A primeira tentativa foi o contrário, dar a ele um cinza mais claro (--vidro-06). Não serve: no tema escuro, branco a 6% sobre o fundo (12,0,71) dá (26,15,82) contra os (24,13,92) da --superficie. Dois tons que ninguém distingue — o bloco ficaria "diferente" só no CSS. */ /* O histórico deixou de ser CARTÃO e virou LISTA em 06/08/2026 (ver `.hist-lista`, no fim desta folha): `.hist-passada`, `.hist-nota` e `.hist-estrela` saíram junto com o HTML que as usava. Regra sem uso reprova no teste de CSS órfão, e com razão. */ /* SOZINHO NA LINHA, O CANCELAR VIRAVA O BOTÃO PRINCIPAL DO CARTÃO. O `.consulta-acoes .bt-app` estica os botões para dividirem a linha. Quando a consulta não tem "Entrar" nem "Remarcar" — clínica geral ainda solicitada, que não tem especialidade para remarcar —, sobrava um Cancelar laranja ocupando a largura inteira: exatamente o que o `.bt-app-perigo` existe para impedir. Sozinho, ele encolhe para o tamanho da palavra. */ .consulta-acoes .bt-app-perigo:only-child { width: auto; } /* ---- plano.html ---- */ /* ========================================================================== PLANO E FAMÍLIA — o ITEM, a forma dos dois assuntos da tela (06/08/2026). A tela tem dois assuntos, e cada um deles é uma lista de itens: o que o plano cobre, e quem você atende por ele. O item é sempre a mesma linha — chip tonal com o ícone, título, e embaixo o que dá para fazer. É a repetição dessa forma que faz os dois assuntos se lerem de longe, sem precisar de mais uma legenda para cada coisa (a tela tinha quatro). O chip é o mesmo desenho do menu da Início (tonal, violeta, cantos generosos) um degrau menor: 44px contra 58px, ícone 22 contra 29 — a mesma conta do lembrete, que é um degrau abaixo do herói. Dentro de um cartão o chip de 58 roubaria a cena do texto, e aqui o texto é o conteúdo. Contraste medido no navegador, nos dois temas, sobre o CARTÃO (que é onde estas cores caem, e não sobre o fundo da página): ícone violeta no chip 4,37:1 escuro · 4,97:1 claro (mínimo 3:1) título do item 16,8:1 nos dois (mínimo 4,5:1) texto de apoio 9,9:1 escuro · 8,8:1 claro ========================================================================== */ .plano-item { display: flex; align-items: flex-start; gap: 14px; } .plano-chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(162, 76, 255, .16); flex: none; } :root[data-tema="claro"] .plano-chip { background: rgba(123, 47, 247, .10); } .plano-chip > .ico { color: var(--violeta-texto); width: 22px; height: 22px; } /* `min-width: 0` porque item de flex nasce com `min-width: auto` e não encolhe abaixo do conteúdo. Medido a 320px com "Otorrinolaringologiapediatrica- subespecializada", nada vazou nem com `auto`: quem salva é o `overflow-wrap: anywhere` que o corpo herda para a tela inteira. Fica escrito assim mesmo, de propósito, para a coluna não depender só daquela regra — o mesmo motivo do `min-height: 0` do `.corpo`. */ .plano-texto { flex: 1; min-width: 0; } .plano-texto h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--texto); } /* O item que é só título (o da família) não deixa folga sobrando embaixo. */ .plano-texto h3:last-child { margin-bottom: 0; } /* O PARÁGRAFO QUE VEM DEPOIS DA LISTA de especialidades: `.cartao-app p` zera a margem de cima de todo parágrafo do cartão, e sem isto a regra do encaminhamento cola na última especialidade. */ .plano-texto .lista-simples + p { margin-top: 12px; } /* O ITEM QUE O PLANO NÃO COBRE. Ele continua na tela — descobrir o limite só na hora de marcar é o que esta tela existe para evitar —, mas perde a cor da ação: chip apagado e o texto no tom de atenção. SELETOR DE DUAS CLASSES de propósito, e não a `.consulta-aviso` que já existe: `.cartao-app p` (uma classe + um tipo) vence uma classe sozinha na especificidade, e o aviso sairia cinza, do mesmo tom do texto comum — sem nada avisando, porque CSS que perde não dá erro. Medido: o texto de atenção dá 10,06:1 sobre o cartão escuro e 5,43:1 sobre o claro (mínimo 4,5:1); o ícone apagado, 5,76:1 e 5,91:1 sobre o chip. */ .plano-item-fora .plano-chip { background: var(--vidro-08); } .plano-item-fora .plano-chip > .ico { color: var(--texto-3); } .plano-item-fora .plano-texto p { color: var(--atencao); } /* ---- conta.html ---- */ /* ========================================================================== MINHA CONTA — a LINHA DE DESTINO (o cartão do padrão congelado, deitado). O padrão tem UM cartão de destino: chip tonal de 58px e rótulo 18px/700, numa grade de duas colunas (o menu da Início). Aqui os destinos são um por seção, e o motivo não é de layout: "pedir correção" pertence a "Seus dados" e "privacidade" é outro assunto, com outra legenda. Um quadrado sozinho numa grade de duas colunas ficaria torto contra a margem — o desalinhamento que o Thiago vetou na Início —, e juntar os dois numa grade misturaria dois assuntos que a tela acabou de separar. Então a linha é o MESMO desenho deitado: o mesmo chip tonal violeta, o mesmo rótulo 18px/700, o mesmo raio e a mesma borda dos cartões, mais a seta dizendo que leva para outra tela. Nenhuma cor nova — só as variáveis que já existem. Medido em 06/08/2026: 70px de altura, alinhada às MESMAS margens do cartão (20 → 370 numa tela de 390), e o rótulo cabe em uma linha até em 320px. ========================================================================== */ .conta-destino { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; /* Colapsa com os 12px de baixo da legenda quando a linha abre a seção, e vale como respiro quando ela vem logo depois do cartão. */ margin-top: 12px; padding: 12px 14px; border-radius: var(--raio); background: var(--vidro-06); border: 1px solid var(--borda); color: var(--texto); text-decoration: none; font-size: 18px; font-weight: 700; line-height: 1.25; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .conta-destino:active { background: var(--vidro-12); transform: scale(.99); } @media (hover: hover) { .conta-destino:hover { background: var(--vidro-10); border-color: var(--violeta-texto); } } @media (prefers-reduced-motion: reduce) { .conta-destino { transition: none; } .conta-destino:active { transform: none; } } /* O CHIP DEITADO: 44px no lugar dos 58px do cartão da grade, e raio 14 no lugar de 18 — a mesma proporção, na altura de uma linha. Com 58 a linha passaria de 80px e viraria um cartão, que é o que ela não é. A cor é a mesma do `.menu-chip`, nos dois temas. */ .conta-chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(162, 76, 255, .16); flex: none; } :root[data-tema="claro"] .conta-chip { background: rgba(123, 47, 247, .10); } .conta-chip > .ico { color: var(--violeta-texto); width: 23px; height: 23px; } /* A SETA é o único ícone filho DIRETO da linha (o do chip está aninhado): fica na ponta, apagada, e só diz "abre outra tela". */ .conta-destino > .ico { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--texto-3); } /* A NOTA DENTRO DO CARTÃO precisa de ar. `.cartao-app p` zera a margem de cima de todo parágrafo do cartão e vence o `.mini` por especificidade — a frase saía colada na última linha dos dados. */ .cartao-app .conta-nota { margin-top: 14px; } /* SAIR não pertence a nenhuma seção: ganha o respiro de uma seção inteira antes dele, para não parecer o fim da privacidade. */ .conta-sair { margin-top: 26px; } /* ---- marcar.html ---- */ /* ========================================================================== MARCAR CONSULTA — a lista de especialidades (passo 1). O modelo aprovado — o mesmo dos dois nativos, em `TelaMarcar.swift`/`.kt` — é uma LISTA DE LINHAS TOCÁVEIS, e não um campo de lista do sistema: cada especialidade é um alvo grande, com o nome à esquerda e a seta à direita. O seletor nativo esconde a escolha atrás de um toque, e o que está escondido a pessoa não sabe que existe. As medidas são as do padrão congelado em 06/08/2026: superfície de cartão, `--raio` (o raio grande fica para o cartão grande) e o mesmo movimento de toque dos outros alvos desta folha — borda que acende e o afundar de 120ms. ========================================================================== */ .marcar-lista { display: grid; gap: 10px; margin: 0; } .marcar-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; /* bem acima dos 44px de alvo mínimo de toque */ padding: 14px 16px; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--mov-estado) var(--sobe), transform var(--mov-estado) var(--solta); } /* A seta herda a cor do texto por `currentColor`. Aqui ela vira o roxo que pode virar texto — o mesmo sinal de "leva a algum lugar" do resto do aplicativo, e em anel/ícone ele passa com folga nos 3:1. */ .marcar-linha .ico { color: var(--violeta-texto); flex: none; } @media (hover: hover) { .marcar-linha:hover { border-color: var(--violeta-texto); } } /* O recuo é menor que o do botão: a linha é maior, e a mesma escala num objeto grande parece movimento demais. É a conta que `.consulta` já faz. */ .marcar-linha:active { border-color: var(--violeta); transform: scale(.99); transition-duration: var(--mov-toque); } .marcar-linha:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; } /* A ESCOLHIDA FICA MARCADA. No passo 2 a lista continua inteira na tela, para trocar de especialidade num toque só; sem marca, a pessoa perde de vista o que escolheu. O anel vai por DENTRO, e não numa borda de 2px: borda mais grossa empurraria o conteúdo e a linha saltaria ao ser escolhida. */ .marcar-linha[aria-current="true"] { border-color: var(--violeta); box-shadow: inset 0 0 0 1px var(--violeta); } /* Contraste alto: quem ligou isso precisa de borda, e não de sutileza — a mesma regra que `.cartao-app` e `.consulta` já seguem. */ @media (prefers-contrast: more) { .marcar-linha { border-color: var(--violeta); } } /* Quem pediu menos movimento não ganha o afundar. O `transition: none` global já vale; o `transform` precisa ser desligado à mão, como em `.menu-tile`. */ @media (prefers-reduced-motion: reduce) { .marcar-linha:active { transform: none; } } /* ========================================================================== MARCAR CONSULTA: o horário (passo 2), em dias recolhidos. Item 4 da divergência 44, decisão do Thiago em 14/08/2026: linhas tocáveis, agrupadas por dia, com os dias recolhidos. Era um `