/* ============================================================ marque.med.br — criar o consultório assets/css/marque-criar.css Entra DEPOIS do marque-home.css e só acrescenta o que é desta tela. A barra do topo, os botões e o ✓ do fim continuam vindo de lá. ============================================================ */ .mc-corpo { background:#f7f9fb; } .mc-palco { padding:42px 20px 72px; } .mc-cx { width:min(100%, 620px); margin-inline:auto; } /* Aqui a barra tem dois itens, não cinco — não há menu sanfona para abrir. No celular o marque-home.css transforma o .mh-nav no painel do hambúrguer; esta tela desfaz isso e mantém o "Entrar" onde ele está, na linha. */ .mc-nav { display:flex; align-items:center; gap:12px; } .mc-ja { color:#6B7686; font-size:.88rem; } @media (max-width:760px){ .mc-nav { position:static; flex-direction:row; align-items:center; gap:8px; background:none; border:0; box-shadow:none; padding:0; } .mc-ja { display:none; } /* o botão já diz o que é */ .mc-nav .mh-botao-fino { margin-top:0; padding:9px 16px; font-size:.86rem; } } .mc-cx h1 { font-size:clamp(1.7rem, 4vw, 2.3rem); line-height:1.15; } .mc-sub { color:#5a6779; margin:12px 0 26px; line-height:1.6; } /* ---------- a trilha dos passos ---------- Três marcas ligadas por um fio. O passo cumprido troca o número por um ✓: é o sinal mais curto de "isto já foi", e economiza a legenda. */ .mc-trilha { list-style:none; margin:0 0 22px; padding:0; display:flex; align-items:center; gap:6px; } .mc-trilha li { display:flex; align-items:center; gap:8px; flex:1; font-size:.82rem; font-weight:700; color:#93a0b0; white-space:nowrap; } .mc-trilha li b { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; background:#e4e9ef; color:#6B7686; } /* O fio que liga um passo ao outro. Some no último, que não liga a nada. */ .mc-trilha li::after { content:""; flex:1; height:2px; background:#e4e9ef; border-radius:2px; } .mc-trilha li:last-child::after { content:none; } .mc-trilha li[aria-current="step"] { color:#0F2942; } .mc-trilha li[aria-current="step"] b { background:#00A99D; color:#fff; } .mc-trilha li.feito { color:#00857b; } .mc-trilha li.feito b { background:#00A99D; color:#fff; font-size:0; } .mc-trilha li.feito b::before { content:"✓"; font-size:.8rem; } .mc-trilha li.feito::after { background:#9fded8; } /* ---------- o cartão do formulário ---------- */ .mc-forma, .mc-pronto { background:#fff; border-radius:18px; padding:28px; box-shadow:0 10px 30px rgba(15,41,66,.07); } .mc-passo h2 { font-size:1.2rem; } .mc-ajuda { color:#6B7686; font-size:.88rem; margin:8px 0 18px; line-height:1.55; } .mc-forma label { display:block; font-size:.84rem; font-weight:700; margin-bottom:14px; } .mc-forma label i { color:#c0392b; font-style:normal; } .mc-forma input { width:100%; margin-top:6px; padding:12px 14px; border:1px solid #dfe5ec; border-radius:10px; font:inherit; font-weight:400; color:#0F2942; background:#fff; } .mc-forma input:focus { outline:none; border-color:#00A99D; } .mc-forma label small { display:block; margin-top:6px; font-weight:400; color:#6B7686; font-size:.8rem; } /* Duas colunas quando cabe; no celular, uma. */ .mc-linha { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } /* ---------- a prévia do endereço ---------- */ .mc-link { margin:4px 0 2px; padding:14px 16px; border-radius:12px; background:#eefaf8; border:1px solid #bfe9e4; } .mc-link span { display:block; font-size:.78rem; color:#00857b; font-weight:700; } .mc-link b { display:block; margin-top:4px; font-size:1rem; color:#0F2942; word-break:break-all; } .mc-link small { display:block; margin-top:6px; font-size:.78rem; color:#5a7d79; } /* ---------- erro ---------- */ .mc-erro { margin-top:4px; padding:12px 14px; border-radius:10px; background:#fdecea; border:1px solid #f5c6c0; color:#8f2f22; font-size:.88rem; line-height:1.5; } /* ---------- os botões ---------- */ /* O de voltar primeiro na ordem visual, mas o de avançar é quem recebe o Enter — por isso ele é o `submit` e o outro, um `button` comum. */ .mc-acoes { display:flex; gap:10px; margin-top:20px; } .mc-acoes .mh-botao { flex:1; } .mc-acoes .mh-botao-vazado { flex:none; } .mc-acoes .mh-botao[disabled] { opacity:.6; cursor:default; } /* Os botões do marque declaram `display`, e qualquer `display` de autor vence o `[hidden]` do navegador — sem esta linha o "Voltar" ficava à vista já no primeiro passo, sem ter para onde voltar. */ .mc-acoes [hidden] { display:none; } /* ---------- o fim ---------- */ .mc-pronto { text-align:center; } .mc-pronto h2 { font-size:1.3rem; margin:12px 0 8px; } .mc-pronto p { color:#5a6779; line-height:1.6; margin-bottom:20px; } .mc-pronto .mh-botao { display:inline-block; text-decoration:none; } .mc-pe { color:#93a0b0; font-size:.82rem; text-align:center; margin-top:22px; line-height:1.6; } .mc-pe a { color:#00857b; font-weight:600; } @media (max-width:560px){ .mc-palco { padding:28px 16px 56px; } .mc-forma, .mc-pronto { padding:22px 18px; } .mc-linha { grid-template-columns:1fr; } /* No celular a trilha vira só os números: os rótulos não cabem lado a lado e quebrariam a linha três vezes. */ .mc-trilha li { font-size:0; gap:0; } .mc-trilha li b { font-size:.78rem; } .mc-trilha li.feito b::before { font-size:.8rem; } .mc-trilha li::after { margin:0 6px; } } /* ============================================================ O ONBOARDING ------------------------------------------------------------ O que vem abaixo entrou quando a tela deixou de ser um formulário de três telas e virou cinco passos com prévia ao lado. O que está acima continua valendo: a barra do topo, a trilha, o cartão branco, os campos, o erro e o fim. ============================================================ */ /* A caixa deixou de ser uma coluna de 620: agora são duas, e a linha é a mesma 1068 do resto do site. No celular volta a ser uma só. */ .mc-cx { width:min(100%, 1068px); } .mc-grade { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; } @media (max-width:900px){ .mc-grade { grid-template-columns:minmax(0,1fr); } } /* ---------- a barra de progresso ---------- Fica ACIMA da trilha e ocupa a largura toda. Os pontos dizem onde você está; a barra diz quanto falta, que é outra pergunta. */ .mc-prog { height:4px; border-radius:4px; background:#e4e9ef; margin-bottom:14px; overflow:hidden; } .mc-prog i { display:block; height:100%; width:20%; border-radius:4px; background:linear-gradient(90deg,#00857b,#00A99D); transition:width .35s ease; } @media (prefers-reduced-motion: reduce){ .mc-prog i { transition:none; } } /* Passo já cumprido vira botão: corrigir a especialidade lá do passo 4 é um clique, e não quatro "Voltar". */ .mc-trilha li.feito { cursor:pointer; } .mc-trilha li.feito:hover b { background:#00857b; } .mc-trilha li:focus-visible { outline:2px solid #00A99D; outline-offset:3px; border-radius:6px; } .mc-outra { margin-top:14px; } /* ---------- as cores ---------- */ .mc-cores { border:0; padding:0; margin:18px 0 0; } .mc-cores legend { font-size:.84rem; font-weight:700; padding:0; margin-bottom:10px; } .mc-cores-fila { display:flex; flex-wrap:wrap; gap:10px; } .mc-cor { position:relative; } .mc-cor input { position:absolute; opacity:0; width:0; height:0; } .mc-cor span { display:block; width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px #dfe5ec; transition:.16s; } .mc-cor input:checked + span { box-shadow:0 0 0 2px #0F2942; transform:scale(1.08); } .mc-cor input:focus-visible + span { outline:2px solid #00A99D; outline-offset:3px; } @media (prefers-reduced-motion: reduce){ .mc-cor span { transition:none; } } /* ---------- o endereço ---------- O "marque.med.br/" é texto fixo colado ao campo, e não um placeholder: assim a pessoa digita só a parte que é dela e vê o endereço inteiro enquanto escreve. */ .mc-endereco { display:flex; align-items:center; margin-top:6px; border:1px solid #dfe5ec; border-radius:10px; background:#fff; overflow:hidden; } .mc-endereco:focus-within { border-color:#00A99D; box-shadow:0 0 0 3px #E6F7F5; } .mc-endereco-fixo { padding:12px 2px 12px 14px; color:#6B7686; font-size:.95rem; white-space:nowrap; } .mc-endereco input { flex:1; min-width:0; border:0; padding:12px 14px 12px 2px; font:inherit; color:#0F2942; background:transparent; font-weight:600; } .mc-endereco input:focus { outline:none; } .mc-estado { margin:10px 0 0; font-size:.86rem; font-weight:600; min-height:1.3em; } .mc-estado.livre { color:#067647; } .mc-estado.ocupado { color:#b3261e; } .mc-estado.checando { color:#6B7686; font-weight:500; } .mc-sugestoes { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .mc-sugestoes button { font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; color:#00695f; background:#E6F7F5; border:1px solid #bfe9e4; border-radius:999px; padding:6px 12px; } .mc-sugestoes button:hover { background:#d6f2ee; } /* ---------- a prévia ---------- Gruda no alto enquanto a coluna da esquerda rola: no passo 4 o endereço muda a cada tecla, e uma prévia que já saiu da tela não mostra nada. */ .mc-previa { position:sticky; top:92px; } /* O bloco responsivo desta coluna está no FIM do arquivo, depois das regras do cartão. Aqui ele perdia: mesma especificidade, e quem vem por último ganha — o cartão continuava inteiro no celular, ocupando a primeira tela sozinho e empurrando o formulário para baixo da dobra. */ .mc-previa-rotulo { display:block; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6B7686; margin-bottom:10px; } .mc-cartao { background:#fff; border-radius:18px; padding:24px 22px; text-align:center; box-shadow:0 10px 30px rgba(15,41,66,.07); display:flex; flex-direction:column; align-items:center; gap:4px; } .mc-cartao-av { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; /* ---------- sem `transition` aqui, e isto é a correção de um defeito ---------- Com `transition` na cor, trocar a --cor-medico NÃO repintava este círculo. Nem depois de 1,2s: a variável já valia #7C3AED no computed style do próprio elemento e o `background-color` continuava no verde do fallback, sem erro e sem aviso. O que isolou foi o botão de baixo: mesma variável, mesma expressão, sem transição — e ele acompanhava cada troca. O controle fechou a conta: pondo a transição no botão e tirando daqui, os dois inverteram de comportamento. O defeito segue a transição, não o elemento. Trocar o atalho `background` pelo longhand `background-color` não resolveu — a primeira hipótese era o `background-image` não animável dentro do atalho, e não era isso. O que resolve é não transicionar uma propriedade cujo valor vem de uma custom property trocada por script. Sem a transição a cor troca na hora, que para um seletor de cor é o comportamento certo de qualquer forma: o retorno tem de ser imediato. */ background-color:var(--cor-medico,#00A99D); color:#fff; font-weight:800; font-size:1.3rem; margin-bottom:8px; } .mc-cartao-txt { display:flex; flex-direction:column; align-items:center; gap:2px; } .mc-cartao-nome { font-size:1.05rem; color:#0F2942; line-height:1.3; } .mc-cartao-esp { font-size:.88rem; color:#5a6779; } .mc-cartao-crm { font-size:.72rem; font-weight:700; letter-spacing:.03em; color:#6B7686; text-transform:uppercase; margin-top:4px; } .mc-cartao-local { font-size:.82rem; color:#6B7686; margin-top:2px; } /* Os sete quadradinhos são a agenda da semana, com um horário livre aceso. Desenho, não dado — por isso `aria-hidden`: ninguém promete que a agenda já existe. Serve para o cartão parecer o que vai ser. */ .mc-cartao-agenda { display:flex; gap:5px; margin:16px 0 12px; } .mc-cartao-agenda span { width:14px; height:26px; border-radius:5px; background:#eef2f6; } .mc-cartao-agenda span.on { background:var(--cor-medico,#00A99D); opacity:.85; } .mc-cartao-botao { display:block; width:100%; padding:10px; border-radius:10px; background:var(--cor-medico,#00A99D); color:#fff; font-size:.86rem; font-weight:700; opacity:.5; } .mc-previa-link { margin-top:14px; padding:14px 16px; border-radius:12px; background:#eefaf8; border:1px solid #bfe9e4; } .mc-previa-link span { display:block; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#00857b; } .mc-previa-link b { display:block; margin-top:5px; font-size:.95rem; color:#0F2942; word-break:break-all; } .mc-previa-link-fim { text-align:left; max-width:360px; margin:0 auto 20px; } /* Texto só para leitor de tela. O nome da cor precisa ser dito — um círculo colorido sem rótulo é "radio button, em branco" para quem não enxerga —, mas escrito na tela ele viraria uma legenda que ninguém pediu. `clip-path` em vez de `display:none`: o que some do layout some também da leitura. */ .sr-so { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* O `.mc-forma label { display:block }` lá de cima é `display` de AUTOR, e qualquer display de autor vence o `[hidden]` do navegador — a mesma armadilha que o `.mc-acoes [hidden]` já conserta para os botões. Sem esta linha o campo "A sua especialidade, como você escreve" nasce à vista, do lado da grade, e a tela pergunta duas vezes a mesma coisa. */ .mc-forma label[hidden], .mc-forma [hidden] { display:none; } /* ---------- a prévia no celular ---------- DEPOIS das regras do cartão, de propósito: as duas têm a mesma especificidade e quem fala por último ganha. Escrito lá em cima, este bloco não valia e o cartão inteiro — agenda, botão, 62px de avatar — tomava a primeira tela do telefone, com o primeiro campo do cadastro abaixo da dobra. Vira uma faixa: avatar pequeno à esquerda, nome e especialidade à direita. Some o que é ilustração (os quadradinhos da agenda e o botão falso) e fica o que muda enquanto a pessoa digita. */ @media (max-width:900px){ .mc-previa { position:static; order:-1; } .mc-cartao-agenda, .mc-cartao-botao { display:none; } .mc-cartao { flex-direction:row; align-items:center; text-align:left; gap:14px; padding:14px 16px; } .mc-cartao-av { width:44px; height:44px; font-size:.95rem; margin:0; flex:none; } .mc-cartao-txt { align-items:flex-start; min-width:0; } /* O nome, a especialidade, o CRM e a cidade empilham numa coluna só à direita do círculo — sem isto eles viram quatro itens da mesma linha flex e saem espremidos lado a lado. */ .mc-cartao-nome, .mc-cartao-esp, .mc-cartao-crm, .mc-cartao-local { margin:0; } .mc-cartao-esp, .mc-cartao-crm, .mc-cartao-local { font-size:.8rem; } .mc-previa-rotulo { margin-bottom:6px; } .mc-previa-link { margin-top:10px; padding:11px 14px; } } /* A ressalva do endereço na tela final: menor e em tom de apoio, para não competir com o endereço em si — que é o que a pessoa veio buscar. */ .mc-previa-link b small { display:block; margin-top:6px; font-size:.78rem; font-weight:500; color:#5a7d79; line-height:1.5; } /* Depois que a conta existe, a trilha é só um registro do que foi feito: nada ali leva a lugar nenhum. O cursor precisa dizer isso. */ .mc-trilha-fim li, .mc-trilha-fim li.feito { cursor:default; } /* ---------- a paleta do