/* * Os apelidos da Fase 3. * * Vieram de `tokens.css` na etapa 9. Estavam embutidos no de toda * página do site — inclusive a do artigo, que não carrega esta folha —, e * nenhuma outra folha os usa: foram conferidos um a um. Token que só uma folha * consome mora naquela folha, e some junto com ela quando `vtag.css` acabar. * * Fora de `@layer` porque declaração de custom property em `:root` não disputa * com ninguém aqui, e enterrá-la na camada `legado` só a esconderia. */ :root { --vt-teal: #55c4c3; --vt-navy-tint: #f4f9ff; --vt-mint-tint: #e3f2f0; --vt-mint-text: var(--vt-mint-escuro); --vt-gray-100: #f5f5f5; --vt-gray-200: #efefef; --vt-gray-300: #d8ced4; --vt-gray-400: #cccccc; --vt-gray-500: #b0b0b0; --vt-gray-600: #8c8f94; /* legado: reprova como texto pequeno, não usar */ --vt-gray-700: #666666; --vt-gray-900: var(--vt-navy); --vt-danger: #c20613; --vt-danger-dark: #b31d1d; --vt-warning: #bf910a; --vt-orange: #f05d05; --vt-coral: #e6634d; --vt-coral-dark: #cf4834; --vt-texto: var(--vt-texto-forte); --vt-texto-suave: var(--vt-gray-700); --vt-fundo: var(--vt-white); --vt-fundo-alt: var(--vt-navy-tint); --vt-borda: var(--vt-gray-300); --vt-acao: var(--vt-navy); --vt-acao-texto: var(--vt-white); --vt-destaque: var(--vt-mint); --vt-shadow-sm: var(--vt-sombra-sm); --vt-shadow-md: var(--vt-sombra-md); --vt-shadow-lg: var(--vt-sombra-lg); } /* * vTag — o produto (§12, diretriz 2). * * Uma coluna, mobile-first: foto e nome acima da dobra, ações táteis logo * abaixo, e só depois o conteúdo. O navy é estrutura; o mint marca estado e * autoridade — nunca texto sobre fundo claro (§12.1). */ /* * Camada `legado`. * * Esta folha usa primitivos (`--vt-navy`, `--vt-white`) como se fossem papéis, * o que a impede de funcionar no tema escuro. Ela continua mandando em toda * tela ainda não migrada; onde existir folha em `componente` — hoje só o vTag * de profissional — a nova vence, sem seletor inflado. * * Cada tela migrada tira um pedaço daqui. Quando não sobrar nada, a camada * some junto com o arquivo. */ @layer legado { .vt-main { max-width: var(--vt-largura-conteudo); } /* ---------------------------------------------------------------- faixas -- */ .vt-faixa { margin-bottom: var(--vt-space-6); padding: var(--vt-space-4); border-radius: var(--vt-radius-md); background: var(--vt-navy); color: var(--vt-white); } .vt-faixa__texto { margin: 0; font-weight: 700; } .vt-faixa__nota { margin: var(--vt-space-1) 0 0; font-size: var(--vt-fs-sm); color: var(--vt-mint); } /* ------------------------------------------------------------- perfil --- */ /* * A seção de perfil saiu daqui em 28/08/2026, com a etapa 7. * * Ela sobreviveu às etapas 3 a 6 por um motivo só: `vtag-clinica.php` era o * último template do catálogo ainda no desenho antigo, e usava * `.vt-perfil__topo`, `__foto`, `__identidade`, `__nome`, `__credencial` e * `__local`. Com a clínica montada pelo motor, esses seletores não têm mais * nenhum consumidor — conferido em todo o tema antes de apagar. * * O que o vTag usa agora vive em `vtag-perfil.css`, em @layer componente, e * é escrito em papéis: as regras daqui declaravam `--vt-borda`, `--vt-mint` * e `--vt-gray-100` como se fossem papéis, e no tema escuro isso rendia * borda rosada e chão claro em volta da foto. */ /* ---------------------------------------------------------------- selos --- */ .vt-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vt-space-2); margin: var(--vt-space-1) 0 0; padding: 0; list-style: none; } .vt-selo { display: inline-flex; align-items: center; gap: var(--vt-space-1); padding: var(--vt-space-1) var(--vt-space-3); border-radius: var(--vt-radius-full); font-size: var(--vt-fs-xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--vt-navy); color: var(--vt-mint); } .vt-selo--premium { background: var(--vt-mint); color: var(--vt-navy); } .vt-selo__icone { width: 14px; height: 14px; flex: none; } /* --------------------------------------------------------------- ações ---- */ .vt-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--vt-space-2); margin: var(--vt-space-6) 0; } .vt-acao { display: flex; align-items: center; justify-content: center; min-height: var(--vt-alvo-toque); padding: var(--vt-space-3); border: 1px solid var(--vt-navy); border-radius: var(--vt-radius-md); color: var(--vt-navy); font-weight: 700; text-align: center; text-decoration: none; } .vt-acao--primaria { background: var(--vt-navy); color: var(--vt-white); } .vt-acao:hover, .vt-acao:focus-visible { background: var(--vt-navy); color: var(--vt-white); } /* --------------------------------------------------------------- seções --- */ .vt-secao { margin: var(--vt-space-8) 0; } .vt-secao__titulo { margin: 0 0 var(--vt-space-4); font-size: var(--vt-fs-lg); text-transform: uppercase; letter-spacing: 0.04em; color: var(--vt-texto-suave); } .vt-bio { color: var(--vt-texto); } .vt-bio p:last-child { margin-bottom: 0; } .vt-chips, .vt-lista-simples, .vt-enderecos, .vt-links, .vt-redes, .vt-cards { margin: 0; padding: 0; list-style: none; } .vt-chips { display: flex; flex-wrap: wrap; gap: var(--vt-space-2); } .vt-chip { padding: var(--vt-space-1) var(--vt-space-3); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-full); font-size: var(--vt-fs-sm); } .vt-chip--destaque { border-color: var(--vt-mint-text); color: var(--vt-mint-text); font-weight: 700; } /* ------------------------------------------------------------ endereços --- */ .vt-endereco { padding: var(--vt-space-4); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); } .vt-endereco + .vt-endereco { margin-top: var(--vt-space-3); } .vt-endereco__titulo { margin: 0 0 var(--vt-space-1); font-weight: 700; } .vt-endereco__linha { margin: 0; color: var(--vt-texto-suave); } .vt-endereco__mapa { display: inline-block; margin-top: var(--vt-space-2); font-weight: 700; } /* ---------------------------------------------------------------- links --- */ .vt-links { display: grid; gap: var(--vt-space-2); } .vt-link { display: flex; align-items: center; justify-content: center; min-height: var(--vt-alvo-toque); padding: var(--vt-space-3); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); font-weight: 700; text-decoration: none; } .vt-link:hover, .vt-link:focus-visible { border-color: var(--vt-navy); background: var(--vt-navy-tint); } .vt-redes { display: flex; flex-wrap: wrap; gap: var(--vt-space-2); } .vt-rede { display: inline-block; padding: var(--vt-space-2) var(--vt-space-4); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-full); font-size: var(--vt-fs-sm); text-decoration: none; } /* ---------------------------------------------------------------- cards --- */ /* * Card, selos, listagem, filtro de cidade, estado vazio e paginação SAÍRAM * daqui na etapa 5. Vivem em `listagem.css`, em @layer componente, escritos * só com papéis — e é por isso que as listagens passaram a ter tema escuro. * * A folha nova é enfileirada onde o card aparece: listagens, home e o bloco * "outros profissionais" do vTag. Manter uma cópia aqui produziria dois * cards que divergem, e foi exatamente o que aconteceu antes de remover: * o `.vt-card--premium .vt-card__link` daqui pintava o link interno de * mint por cima do card novo, porque a folha nova não tinha regra para * disputar — camada não vence onde não há concorrente. */ /* ------------------------------------------------------ especialidades ---- */ .vt-especialidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--vt-space-2); margin: var(--vt-space-6) 0 0; padding: 0; list-style: none; } .vt-especialidade__link { display: flex; align-items: center; justify-content: space-between; gap: var(--vt-space-3); min-height: var(--vt-alvo-toque); padding: var(--vt-space-3); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); text-decoration: none; color: inherit; } .vt-especialidade__link:hover, .vt-especialidade__link:focus-visible { border-color: var(--vt-navy); background: var(--vt-navy-tint); } .vt-especialidade__texto { display: flex; flex-direction: column; min-width: 0; } .vt-especialidade__nome { font-weight: 700; } .vt-especialidade__area { font-size: var(--vt-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--vt-texto-suave); } .vt-especialidade__total { flex: none; min-width: 2rem; padding: 0 var(--vt-space-2); border-radius: var(--vt-radius-full); background: var(--vt-mint-tint); color: var(--vt-navy); font-size: var(--vt-fs-sm); font-weight: 700; text-align: center; } /* ------------------------------------------------------------- premium ---- */ .vt-premium { max-width: 32rem; margin-inline: auto; text-align: center; } .vt-premium__titulo { font-size: var(--vt-fs-2xl); text-wrap: balance; } .vt-premium__chamada { color: var(--vt-texto-suave); } .vt-premium__perfil { margin: var(--vt-space-4) 0; font-size: var(--vt-fs-xl); font-weight: 700; } .vt-premium--pronto .vt-premium__titulo { color: var(--vt-mint-text); } /* ---------------------------------------------------------- formulários --- */ .vt-formulario { display: flex; flex-direction: column; gap: var(--vt-space-4); margin-top: var(--vt-space-6); text-align: left; } .vt-campo { display: flex; flex-direction: column; gap: var(--vt-space-1); } .vt-campo__rotulo { font-weight: 700; } .vt-campo__entrada { min-height: var(--vt-alvo-toque); width: 100%; padding: var(--vt-space-3); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); background: var(--vt-fundo); color: var(--vt-texto); font-family: inherit; font-size: var(--vt-fs-base); } .vt-campo__entrada:disabled { background: var(--vt-gray-100); color: var(--vt-texto-suave); } /* O código é curto e vai ser copiado de um e-mail: monoespaçado e espaçado torna a conferência visual possível. */ .vt-campo__entrada--codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vt-fs-xl); letter-spacing: 0.3em; text-transform: uppercase; } .vt-campo__arroba { display: flex; align-items: center; gap: var(--vt-space-2); } .vt-campo__arroba span { font-size: var(--vt-fs-xl); font-weight: 700; color: var(--vt-texto-suave); } .vt-campo__ajuda { margin: 0; font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-formulario button[disabled] { opacity: 0.5; cursor: not-allowed; } .vt-formulario__voltar { margin: 0; font-size: var(--vt-fs-sm); text-align: center; } .vt-alerta { margin: var(--vt-space-4) 0 0; padding: var(--vt-space-3) var(--vt-space-4); border-radius: var(--vt-radius-md); border-left: 4px solid; text-align: left; } .vt-alerta--erro { border-color: var(--vt-danger); background: #fdf2f2; color: var(--vt-danger-dark); } .vt-alerta--ok { border-color: var(--vt-mint-text); background: var(--vt-mint-tint); color: var(--vt-navy); } button.vt-acao { border: 1px solid var(--vt-navy); font-family: inherit; font-size: var(--vt-fs-base); cursor: pointer; } /* ------------------------------------------------ subpáginas do vTag ------ */ .vt-migalha { margin: 0; font-size: var(--vt-fs-sm); } .vt-secao__mais { margin: var(--vt-space-4) 0 0; font-weight: 700; } /* * A grade de vídeos e o card de artigo saíram daqui na etapa 8. Vivem em * `conteudo.css`, em @layer componente, escritos só com papéis — e é por * isso que `/@{slug}/artigos` e `/@{slug}/videos` passaram a ter tema * escuro. Estas cópias eram mais pobres que as do vTag e desenhavam as * mesmas classes: a subpágina e o bloco do perfil mostravam o mesmo vídeo * com dois desenhos diferentes. */ /* -------------------------------------------------------------- home --- */ /* * `.vt-hero*` e `.vt-chamada*` saíram daqui em 28/08/2026, com a etapa 6. * Não foram migrados: foram SUBSTITUÍDOS. O herói de promessa virou o portão * de evidência e a chamada de voucher virou o convite ao profissional, e os * dois vivem em `home.css`, em @layer componente. Nenhum outro template usa * essas classes — foi conferido antes de apagar. * * O que continua aqui é o que a Home DIVIDE com outras telas: `.vt-chip` (o * vTag de clínica e dois blocos do motor) e `.vt-secao` (18 templates, a * área da conta inclusive). Migrar esses dois sem migrar a conta seria * pintar metade de uma tela que ninguém está olhando. */ .vt-chips--links .vt-chip { display: inline-flex; align-items: center; gap: var(--vt-space-2); min-height: var(--vt-alvo-toque); text-decoration: none; color: inherit; } .vt-chips--links .vt-chip:hover, .vt-chips--links .vt-chip:focus-visible { border-color: var(--vt-navy); background: var(--vt-navy-tint); } .vt-chip__total { padding: 0 var(--vt-space-2); border-radius: var(--vt-radius-full); background: var(--vt-mint-tint); font-size: var(--vt-fs-xs); font-weight: 700; } /* * Botão solto dentro de parágrafo não deve esticar: `.vt-acao` é flex para * centralizar seu conteúdo, e isso o fazia ocupar a linha inteira no 404 e * na confirmação do resgate. (A chamada da Home era o terceiro caso; ela * saiu para `home.css`, que declara as duas propriedades por conta.) */ p > .vt-acao { display: inline-flex; padding-inline: var(--vt-space-8); } /* * A trilha saiu daqui na etapa 8, para `listagem.css`. Só a COR dela tinha * migrado antes, e a estrutura — o flex, o separador, o `list-style` — * ficou no legado: toda tela migrada continuava dependendo desta folha * para desenhar a trilha, e ninguém percebeu porque toda tela migrada * ainda a carregava. A do artigo foi a primeira a não carregar, e a trilha * dela apareceu como lista numerada. Os dez templates que imprimem trilha * carregam `listagem.css`; nenhum ficou para trás. */ /* --------------------------------------------------------------- busca -- */ .vt-card__local { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-card__foto--logo { object-fit: contain; background: var(--vt-white); } .vt-busca { margin: var(--vt-space-6) 0; padding: var(--vt-space-4); background: var(--vt-fundo-alt); border-radius: var(--vt-radius-md); } .vt-busca__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vt-space-3); } .vt-busca__campo { display: flex; flex-direction: column; gap: var(--vt-space-1); min-width: 0; } /* Crescer só na faixa horizontal. Dentro das colunas de "mais filtros" o mesmo flex-grow esticava cada campo até a altura da lista de especialidades, e o formulário virava um campo por tela. */ .vt-busca__linha > .vt-busca__campo { flex: 1 1 12rem; } .vt-busca__linha > .vt-busca__campo--termo { flex: 2 1 20rem; } .vt-busca__rotulo { font-size: var(--vt-fs-sm); font-weight: 700; } .vt-busca__campo input, .vt-busca__campo select { padding: var(--vt-space-2) var(--vt-space-3); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-sm); background: var(--vt-white); color: var(--vt-texto); font: inherit; font-size: var(--vt-fs-sm); } .vt-busca__enviar { flex: 0 0 auto; } .vt-busca__avancado { margin-top: var(--vt-space-4); } .vt-busca__avancado > summary { cursor: pointer; font-weight: 700; font-size: var(--vt-fs-sm); } .vt-busca__grade { display: grid; gap: var(--vt-space-4); margin-top: var(--vt-space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; } .vt-busca__coluna { display: flex; flex-direction: column; gap: var(--vt-space-3); } .vt-busca__grupo { margin: 0; padding: var(--vt-space-3); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-sm); background: var(--vt-white); } .vt-busca__grupo legend { padding-inline: var(--vt-space-2); font-size: var(--vt-fs-sm); font-weight: 700; } /* A lista de especialidades cresce com o catálogo: rola dentro do bloco em vez de empurrar os resultados para fora da primeira tela. */ .vt-busca__caixas { display: flex; flex-direction: column; gap: var(--vt-space-1); max-height: 14rem; overflow-y: auto; } .vt-busca__caixa { display: flex; align-items: center; gap: var(--vt-space-2); font-size: var(--vt-fs-sm); } .vt-busca__acoes { display: flex; flex-wrap: wrap; gap: var(--vt-space-3); margin: var(--vt-space-4) 0 0; } .vt-busca__nota, .vt-busca__aviso { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-vazio__titulo { margin-top: var(--vt-space-6); font-size: var(--vt-fs-lg); } .vt-vazio__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vt-space-2) var(--vt-space-4); margin: 0; padding: 0; list-style: none; } /* --------------------------------------------------- Área do Usuário -- */ .vt-conta { max-width: 32rem; margin: var(--vt-space-8) auto; } .vt-conta--painel { max-width: 44rem; } .vt-conta__titulo { font-size: var(--vt-fs-2xl); } .vt-conta__apoio { color: var(--vt-texto-suave); } .vt-conta__links { display: flex; flex-wrap: wrap; gap: var(--vt-space-4); margin-top: var(--vt-space-6); font-size: var(--vt-fs-sm); } .vt-campo--caixa label { display: flex; align-items: center; gap: var(--vt-space-2); font-size: var(--vt-fs-sm); } .vt-campo__erro { display: block; margin-top: var(--vt-space-1); color: var(--vt-danger); font-size: var(--vt-fs-sm); } .vt-campo__entrada[aria-invalid="true"] { border-color: var(--vt-danger); } /* Medidor de força da senha (§8.2). Só orienta: quem recusa senha ruim é o servidor, porque medidor no cliente é sugestão, não política. */ /* `hidden` precisa vencer o display do componente: sem isto o medidor aparece vazio antes de alguém digitar qualquer coisa. */ .vt-forca[hidden] { display: none; } .vt-forca { display: flex; align-items: center; gap: var(--vt-space-2); margin-top: var(--vt-space-2); font-size: var(--vt-fs-xs); color: var(--vt-texto-suave); } .vt-forca__barra { flex: 1 1 auto; height: 6px; border-radius: var(--vt-radius-full); background: var(--vt-gray-200); overflow: hidden; } .vt-forca__nivel { display: block; height: 100%; width: 0; border-radius: var(--vt-radius-full); background: var(--vt-danger); transition: width 0.2s ease, background-color 0.2s ease; } .vt-forca[data-nivel="2"] .vt-forca__nivel { width: 50%; background: var(--vt-warning); } .vt-forca[data-nivel="1"] .vt-forca__nivel { width: 25%; } .vt-forca[data-nivel="3"] .vt-forca__nivel { width: 75%; background: var(--vt-teal); } .vt-forca[data-nivel="4"] .vt-forca__nivel { width: 100%; background: var(--vt-mint-text); } /* Checklist dos dois passos da validação (§5.3). */ .vt-passos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--vt-space-4); } .vt-passo { display: flex; gap: var(--vt-space-3); padding: var(--vt-space-4); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); background: var(--vt-fundo); } .vt-passo.esta-feito { border-color: var(--vt-mint); background: var(--vt-mint-tint); } .vt-passo__marca { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: var(--vt-radius-full); background: var(--vt-navy); color: var(--vt-white); font-weight: 700; font-size: var(--vt-fs-sm); } .vt-passo.esta-feito .vt-passo__marca { background: var(--vt-mint); color: var(--vt-navy); } .vt-passo__texto { display: flex; flex-direction: column; gap: var(--vt-space-2); font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-passo__texto strong { color: var(--vt-texto); font-size: var(--vt-fs-base); } /* Onboarding: a pergunta da §8.1 e a escolha da especialidade. */ .vt-escolha { display: grid; gap: var(--vt-space-4); margin: var(--vt-space-6) 0; } .vt-escolha__opcao { display: flex; flex-direction: column; gap: var(--vt-space-1); padding: var(--vt-space-4); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); background: var(--vt-fundo); color: var(--vt-texto); font: inherit; text-align: left; cursor: pointer; } .vt-escolha__opcao:hover, .vt-escolha__opcao:focus-visible { border-color: var(--vt-mint); background: var(--vt-mint-tint); } .vt-escolha__opcao span { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-lista-escolha { display: grid; gap: var(--vt-space-1); max-height: 22rem; overflow-y: auto; margin: 0 0 var(--vt-space-4); padding: var(--vt-space-2); list-style: none; border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); } .vt-lista-escolha label { display: flex; align-items: baseline; gap: var(--vt-space-2); padding: var(--vt-space-2); border-radius: var(--vt-radius-sm); cursor: pointer; } .vt-lista-escolha label:hover, .vt-lista-escolha input:focus-visible + .vt-lista-escolha__nome { background: var(--vt-navy-tint); } .vt-lista-escolha__area { margin-inline-start: auto; font-size: var(--vt-fs-xs); color: var(--vt-texto-suave); } /* Faixa de estado do vTag no editor e na prévia (§5.3). */ .vt-faixa-status { display: flex; flex-wrap: wrap; gap: var(--vt-space-3); align-items: baseline; padding: var(--vt-space-3) var(--vt-space-4); border-radius: var(--vt-radius-md); background: var(--vt-fundo-alt); font-size: var(--vt-fs-sm); } .vt-faixa-status--ativo { background: var(--vt-mint-tint); } .vt-faixa-status--suspenso { background: #fdeaea; } .vt-faixa--previa { background: var(--vt-navy); color: var(--vt-white); } .vt-faixa--previa a { color: var(--vt-mint); } /* Desempenho (Fase 10). O gráfico é uma lista de barras em CSS: uma biblioteca de gráficos para trinta números seria mais peso do que a página inteira, e a tabela abaixo já é a versão que um leitor de tela lê. */ .vt-numeros { display: grid; gap: var(--vt-space-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: var(--vt-space-6) 0; } .vt-numero { padding: var(--vt-space-4); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); text-align: center; } .vt-numero__valor { display: block; font-size: var(--vt-fs-3xl); line-height: 1.1; color: var(--vt-navy); } .vt-numero__rotulo { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-periodo { display: flex; flex-wrap: wrap; gap: var(--vt-space-3); margin: 0; font-size: var(--vt-fs-sm); } .vt-periodo__opcao.esta-ativo { font-weight: 700; text-decoration: none; color: var(--vt-navy); } .vt-barras { display: flex; align-items: flex-end; gap: 2px; height: 140px; margin: 0; padding: 0; list-style: none; } .vt-barras__item { flex: 1 1 auto; display: flex; align-items: flex-end; height: 100%; } .vt-barras__barra { display: block; width: 100%; border-radius: 2px 2px 0 0; background: var(--vt-mint); } .vt-barras__legenda { display: flex; justify-content: space-between; margin-top: var(--vt-space-2); font-size: var(--vt-fs-xs); color: var(--vt-texto-suave); } .vt-tabela-simples { width: 100%; border-collapse: collapse; font-size: var(--vt-fs-sm); } .vt-tabela-simples th, .vt-tabela-simples td { padding: var(--vt-space-2) 0; border-bottom: 1px solid var(--vt-borda); text-align: left; } .vt-tabela-simples td { text-align: right; font-variant-numeric: tabular-nums; } /* Vínculos (§5.5): uma linha por relação, com o estado sempre visível. O estado é a informação central desta tela — "convidado" e "vinculado" levam a ações diferentes, e esconder isso atrás de um ícone faria a pessoa clicar para descobrir. */ .vt-vinculos { margin: 0 0 var(--vt-space-4); padding: 0; list-style: none; } .vt-vinculos__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-2) var(--vt-space-3); padding: var(--vt-space-3) 0; border-bottom: 1px solid var(--vt-borda); } .vt-vinculos__quem { flex: 1 1 12rem; font-weight: 700; } .vt-vinculos__estado { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-subtitulo { margin: var(--vt-space-6) 0 var(--vt-space-2); font-size: var(--vt-fs-base); } /* Avisos: o não lido ganha uma barra à esquerda em vez de fundo colorido — a lista continua legível quando tudo é novo, que é o caso mais comum. */ .vt-avisos { margin: 0; padding: 0; list-style: none; } .vt-avisos__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vt-space-1) var(--vt-space-3); padding: var(--vt-space-3) 0 var(--vt-space-3) var(--vt-space-3); border-left: 3px solid transparent; border-bottom: 1px solid var(--vt-borda); } .vt-avisos__item.esta-nova { border-left-color: var(--vt-mint); } .vt-avisos__titulo { flex: 1 1 100%; } .vt-avisos__texto { flex: 1 1 16rem; font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-avisos__link { font-size: var(--vt-fs-sm); } /* Lista de clínicas da conta: nome, estado e link, em uma linha por clínica — uma conta com oito clínicas precisa varrer a lista, não ler cartões. */ .vt-lista-clinicas { margin: 0 0 var(--vt-space-4); padding: 0; list-style: none; } .vt-lista-clinicas__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vt-space-2) var(--vt-space-4); padding: var(--vt-space-3) 0; border-bottom: 1px solid var(--vt-borda); } .vt-lista-clinicas__nome { font-weight: 700; } .vt-lista-clinicas__estado, .vt-lista-clinicas__link { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } /* §8.3 — os dois caminhos com o MESMO peso visual. A grade de colunas iguais não é estética: separar captação de direito de oposição, e dar aos dois o mesmo tamanho, é o que tira o funil da zona que a ANPD trata como abusiva. */ .vt-caminhos { display: grid; gap: var(--vt-space-6); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); /* Colunas iguais, alturas naturais. Esticar os dois cartões deixaria o da esquerda com um vão vazio antes do botão, e o vazio lê como erro de renderização, não como equilíbrio. A distância entre os dois caiu de 198 px para 70 quando o cartão de assumir ganhou as três linhas do que se ganha — perto o bastante para os topos alinhados bastarem, e ainda longe demais para esticar. */ align-items: start; margin: var(--vt-space-6) 0; } /* * `--vt-superficie-1`, e não o branco fixo que estava aqui: no tema escuro * o cartão continuava branco enquanto o texto dentro dele invertia, e o * conteúdo ficava claro sobre claro. O branco fixo só se justifica onde a * superfície é requisito de marca de terceiro — o botão do Google é o * caso, e é o único. */ .vt-caminho { display: flex; flex-direction: column; gap: var(--vt-space-3); padding: var(--vt-space-5); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-md); background: var(--vt-superficie-1); } /* * ── a tela do convite ─────────────────────────────────────────── * * Ela fica no catálogo por decisão de produto (ver a nota em * `.vt-caminho__ganhos`), mas não precisa ser fria por isso. O que a torna * um convite, e não um formulário de duas opções, são três gestos: * * 1. **O retrato abre a tela.** A pessoa se vê, e reconhece o perfil sem * ler. É o mesmo anel mint do vTag — a marca de que aquilo já é dela. * 2. **Os dois caminhos deixam de pesar igual.** O convite ganha * superfície, borda de acento e sombra; a saída recua para o fundo da * página, com a mesma informação e nenhum realce. * 3. **O eyebrow antecipa o selo do portão** — o mesmo ponto pulsante que * ela verá depois de entrar, aqui em versão de convite. */ .vt-convite__cabeca { display: grid; justify-items: start; gap: var(--vt-space-2); margin-bottom: var(--vt-space-8); } .vt-convite__retrato { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--vt-space-2); overflow: hidden; border-radius: 50%; border: 2px solid var(--vt-confianca); background: var(--vt-superficie-2); } .vt-convite__retrato img { width: 100%; height: 100%; object-fit: cover; } /* * `--vt-confianca-texto`, e não `--vt-confianca`: os tokens separam os dois * usos e o comentário deles é explícito — mint é "preenchimento e borda", * e há um mint-escuro para "quando precisa ser texto". Medido: com o mint * puro este monograma dava 1,3:1 sobre o fundo claro, e o eyebrow 1,5:1 * sobre o branco do cartão. Ilegível nos dois casos. */ .vt-convite__monograma { color: var(--vt-confianca-texto); font-size: var(--vt-fs-xl); font-weight: var(--vt-peso-titulo); letter-spacing: 0.02em; } .vt-convite__credencial { margin: 0; color: var(--vt-texto-medio); font-size: var(--vt-fs-base); } .vt-convite__origem { margin: 0; color: var(--vt-texto-fraco); font-size: var(--vt-fs-sm); } /* * A explicação do e-mail divergente. * * **Ela não é um alerta e não pode parecer um.** O que a faixa acima diz é o * fato ("mandamos o link para p*****@h****.c**.b*"); isto aqui responde à * pergunta seguinte, que é a que fazia a tela ser incompreensível: por que * não veio para o e-mail que eu acabei de cadastrar, e o que eu faço se não * tenho mais acesso àquela caixa. Alerta empilhado em alerta faz o olho ler o * segundo como repetição do primeiro e pular os dois. * * Superfície recuada, régua à esquerda: é anotação, não interrupção. */ .vt-convite__conflito { max-width: 68ch; margin: var(--vt-space-4) 0 0; padding: var(--vt-space-3) var(--vt-space-4); border-left: 3px solid var(--vt-linha-forte); /* `superficie-2` é o "bloco recuado" dos dois temas. `superficie-3` seria o poço escuro — a armadilha que já quebrou tela migrada. */ background: var(--vt-superficie-2); color: var(--vt-texto-medio); font-size: var(--vt-fs-sm); line-height: var(--vt-lh-compacta); } /* * ── a régua do último clique ────────────────────────────────────────── * * Medido na tela de confirmação: a anotação do e-mail, a frase que explica * o que o clique faz e o botão vinham com **0 px entre elas**. As três * peças são de donos diferentes — `.vt-convite__conflito` traz * `margin: space-4 0 0`, `.vt-caminho__texto` traz `margin: 0`, e o * `
` não traz nada —, e cada uma estava certa onde nasceu: a margem * de cima basta para quem é o último de um bloco. Empilhadas, o clímax da * tela virou um bolo. * * A frase pertence ao BOTÃO — é ela que diz o que o clique faz —, então o * vão de baixo é menor que o de cima: 24 px separam o par da anotação, 16 * px mantêm os dois juntos. Proximidade fazendo o agrupamento, em vez de * uma régua igual entre tudo. * * **Filho DIRETO de `.vt-convite`**, porque `.vt-caminho__texto` é a mesma * classe dos dois cartões da bifurcação, onde ela mora dentro de * `.vt-caminho` e a margem zero é a correta. */ .vt-convite > .vt-caminho__texto { margin-top: var(--vt-space-6); } .vt-convite > form { margin-top: var(--vt-space-4); } /* * As duas saídas da chegada. Mesma anatomia do par de ações do painel * (`.vt-membro__acoes`), escrita aqui com o nome desta tela: aquela * classe mora no cartão do membro e leva a régua e o respiro DELE. * * **`chegada`, e não `convite`**, porque `.vt-convite__acoes` já tem dono: * é o par de botões da faixa "Você é profissional da saúde?" da Home, que * vive sobre superfície preenchida e por isso troca o botão primário navy * por contorno claro. `home.css` está em `@layer componente` e venceria * este arquivo, que é `legado` — os botões desta tela sairiam * transparentes com cor de texto sobre fundo escuro, sobre fundo claro. * * O vão de cima é o do par: quando a linha do e-mail existe, ela e os * botões formam um bloco só; quando não existe, os 24 px separam os * botões do parágrafo da posse. */ /* * ── o que já está no ar ─────────────────────────────────────────────── * * Dado para conferir, não texto para ler: rótulo pequeno em versalete e * valor no corpo, empilhados, porque o endereço é longo e um par * lado a lado o espremeria numa coluna de 640 px. * * **Sem caixa.** A tela já tem uma superfície preenchida (a anotação do * e-mail) e um botão que o bloco B acabou de engordar; uma terceira caixa * disputaria com os dois. As réguas de cima e de baixo delimitam sem * pesar. * * O `flex` com quebra deixa "Registro" e "WhatsApp" dividirem a linha * quando cabem, e o endereço tomar a dele — sem media query: quem decide * é o conteúdo. */ .vt-confere { margin: var(--vt-space-5) 0 0; padding: var(--vt-space-4) 0; border-top: 1px solid var(--vt-linha); border-bottom: 1px solid var(--vt-linha); } .vt-confere__titulo { margin: 0 0 var(--vt-space-3); color: var(--vt-texto-fraco); font-size: var(--vt-fs-micro); font-weight: var(--vt-peso-titulo); letter-spacing: var(--vt-track-micro); text-transform: uppercase; } .vt-confere__lista { display: flex; flex-wrap: wrap; gap: var(--vt-space-3) var(--vt-space-8); margin: 0; } .vt-confere__item { display: grid; gap: 2px; } .vt-confere__rotulo { color: var(--vt-texto-fraco); font-size: var(--vt-fs-sm); } .vt-confere__valor { margin: 0; color: var(--vt-texto-forte); font-size: var(--vt-fs-base); } /* * ── a hierarquia do último clique ───────────────────────────────────── * * Medido na tela de confirmação: a frase que antecede o botão era o texto * MAIS APAGADO da tela — `--vt-texto-suave`, 15 px, a mesma escala da * anotação sobre e-mail e da procedência dos dados. Três textos de 15 px * empilhados, e o olho pousava no único bloco preenchido da tela, que é * justamente o aviso menos importante. * * A frase sobe para a escala e a cor do corpo. Nada foi rebaixado: a * anotação recua sozinha quando a vizinha para de sussurrar, e mexer nela * contrariaria a decisão escrita ali em cima ("superfície recuada, régua à * esquerda: é anotação, não interrupção"). * * **Vale também na saída do catálogo**, e ali por um motivo mais sério: a * frase é a CONSEQUÊNCIA — "isto não tem volta" — e estava na cor mais * fraca da tela. Legibilidade de aviso não é convite; o botão de lá * continua sem `--primaria`, que é o que segura a ênfase no lugar certo. */ /* * **Filho direto, e não a classe sozinha.** Medido no navegador antes de * dar por feito: `.vt-caminho__texto` tem a MESMA especificidade (0,1,0), * está na mesma camada e vem DEPOIS neste arquivo — ganhava a cor e o * tamanho de volta, e a regra nova não valia nada. Com o filho direto são * 0,2,0, e a ordem deixa de decidir. */ .vt-convite > .vt-convite__ultimo-passo { color: var(--vt-texto-forte); font-size: var(--vt-fs-base); } /* * O porte do botão que fecha a jornada. São os mesmos três valores de * `.vt-acao--grande`, que é como o assistente veste a ação principal de * cada passo — mas aquela classe mora em `conta.css`, que não carrega em * rota pública. * * **Não dá para simplesmente mudar a classe de casa.** `conta.css` está em * `@layer componente` e esta folha em `legado`: trazer o `--grande` para * cá o faria perder para qualquer regra `.vt-acao` do assistente, por * especificidade nenhuma — só pela camada. Escopado aqui, o alcance é esta * tela e nada mais. * * O seletor pega só o botão da POSSE: o da saída do catálogo não é * `--primaria`, de propósito. */ /* A regra deste botão está no fim do arquivo, em `@layer componente`. */ /* * O rótulo de estado da chegada, na mesma anatomia do `.vt-membro__eyebrow` * do painel — micro, versalete, peso de título. Ele é que carrega o * resultado, para o `

` poder carregar o NOME. * * Margem zero: `.vt-convite__cabeca` é grid com `gap`, e uma margem aqui * somaria ao vão em vez de substituí-lo. O `text-transform` fica na folha, * e não no texto traduzível, para o rótulo não chegar em caixa alta a quem * lê por leitor de tela. */ .vt-chegada__marca { margin: 0; color: var(--vt-texto-medio); font-size: var(--vt-fs-micro); font-weight: var(--vt-peso-titulo); letter-spacing: var(--vt-track-micro); text-transform: uppercase; } /* * O selo da chegada: disco mint com o visto, no canto de baixo do * retrato. Divide a célula 1/1 do grid do cabeçalho com ele — ser irmão, * e não filho, é o que o livra do `overflow: hidden` que recorta a foto. * * O anel é da cor do FUNDO DA PÁGINA (`superficie-0`), e não branco: é o * que separa o disco da borda mint do retrato nos dois temas. Mint com * navy por cima é o par que os tokens já nomeiam para preenchimento * (`--vt-confianca` / `--vt-confianca-sobre`). * * `translate` de 3rem: o retrato tem 4,5rem e o selo 1,5rem, então o disco * encosta exatamente no canto inferior direito do círculo. */ /* * **Fora do fluxo, e não numa célula do grid.** A primeira versão punha o * selo em `grid-area: 1 / 1` para dividir a célula com o retrato — e o * auto-placement teria empurrado o RETRATO para a linha de baixo, porque * item posicionado explicitamente é colocado primeiro e a colocação * automática pula a célula ocupada. Absoluto não disputa célula nenhuma. */ .vt-convite__cabeca:has(.vt-chegada__selo) { position: relative; } .vt-chegada__selo { position: absolute; top: 3rem; left: 3rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--vt-superficie-0); background: var(--vt-confianca); color: var(--vt-confianca-sobre); } /* * O endereço conquistado. Medida própria: ele é um dado para ler de uma * vez, não uma linha de texto corrido — daí o tamanho maior que o do * parágrafo acima e o `word-break`, que segura slug longo em 390 px sem * empurrar a tela. */ .vt-chegada__endereco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-3); margin: var(--vt-space-6) 0 0; padding: var(--vt-space-4); border: 1px solid var(--vt-linha); border-radius: var(--vt-radius-sm); background: var(--vt-superficie-1); } .vt-chegada__url { flex: 1 1 18rem; color: var(--vt-texto-forte); font-size: var(--vt-fs-base); font-weight: var(--vt-peso-titulo); word-break: break-word; } .vt-chegada__copiar { display: inline-flex; align-items: center; gap: var(--vt-space-2); padding: var(--vt-space-2) var(--vt-space-3); border: 1px solid var(--vt-linha); border-radius: var(--vt-radius-sm); background: var(--vt-superficie-0); color: var(--vt-texto-medio); font-size: var(--vt-fs-sm); cursor: pointer; } .vt-chegada__copiar:hover, .vt-chegada__copiar:focus-visible { border-color: var(--vt-linha-forte); color: var(--vt-texto-forte); } .vt-chegada__copiar.esta-feito { border-color: var(--vt-confianca); color: var(--vt-confianca-texto); } .vt-chegada__acoes { display: flex; flex-wrap: wrap; gap: var(--vt-space-3); margin: var(--vt-space-6) 0 0; } .vt-convite > .vt-caminho__texto + .vt-chegada__acoes { margin-top: var(--vt-space-4); } /* * O cartão do convite: superfície, acento e elevação. A sombra é fraca e * larga — o cartão precisa parecer À FRENTE do outro, não descolado da * página. */ /* A borda continua com o mint puro: borda é preenchimento, é o uso para o qual o token foi feito. */ .vt-caminho--convite { border-color: var(--vt-confianca); box-shadow: 0 1px 2px rgba(1, 33, 71, 0.04), 0 14px 34px -18px rgba(1, 33, 71, 0.28); } /* A saída recua: sem cartão branco, sem sombra, só o contorno. */ .vt-caminho--saida { background: transparent; border-color: var(--vt-linha); box-shadow: none; } .vt-caminho__convite { display: inline-flex; align-items: center; gap: var(--vt-space-2); margin: 0; color: var(--vt-confianca-texto); font-size: var(--vt-fs-micro); font-weight: var(--vt-peso-titulo); letter-spacing: 0.06em; text-transform: uppercase; } /* O ponto acompanha o texto que ele marca — se o rótulo precisou do mint-escuro para ser lido, o ponto ao lado precisa também. */ .vt-caminho__convite-ponto { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--vt-confianca-texto); } /* * O QUE SE GANHA ao assumir — as três capacidades da área do profissional, * em versão curta. * * Fica AQUI, e não em `conta.css`: esta tela é do catálogo por decisão de * produto. Metade dela é o direito de sair do catálogo (§8.3, LGPD), e * emoldurá-la com o "acesso exclusivo" da área restrita seria pôr a pessoa * dentro do clube no momento em que ela pode estar ali para pedir para * sair. A subida de nível acontece no clique: o botão leva ao portão, que * já tem outra cara. * * O marcador é tipográfico pelo mesmo motivo: aqui ainda valem as regras do * público, onde ícone é marcador de tipo de dado e não decora lista. */ .vt-caminho__ganhos { display: grid; gap: var(--vt-space-2); margin: 0; padding: 0; list-style: none; color: var(--vt-texto-medio); font-size: var(--vt-fs-sm); line-height: 1.4; } .vt-caminho__ganhos li { position: relative; padding-left: var(--vt-space-4); } .vt-caminho__ganhos li::before { content: ""; position: absolute; inset: 0.6em auto auto 0; width: 0.5rem; height: 2px; border-radius: 2px; background: var(--vt-confianca-texto); } .vt-caminho__titulo { margin: 0; font-size: var(--vt-fs-lg); } .vt-caminho__texto { margin: 0; color: var(--vt-texto-suave); font-size: var(--vt-fs-sm); } .vt-caminho__nota { margin: 0; font-size: var(--vt-fs-sm); } /* Faixa "Este perfil é seu?" no vTag de origem pública: permanente e discreta, depois do conteúdo — nunca por cima dele. */ .vt-faixa-dono { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vt-space-3); margin: var(--vt-space-8) 0; padding: var(--vt-space-4) var(--vt-space-5); border: 1px dashed var(--vt-borda); border-radius: var(--vt-radius-md); } .vt-faixa-dono__texto { flex: 1 1 16rem; margin: 0; font-size: var(--vt-fs-sm); } .vt-faixa-dono .vt-acao { display: inline-flex; padding-inline: var(--vt-space-4); } /* Foto do vTag na Área do Usuário: a miniatura e o formulário lado a lado, porque ver a foto atual é metade da decisão de trocá-la. */ .vt-foto-conta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--vt-space-4); margin-bottom: var(--vt-space-6); } .vt-foto-conta__imagem, .vt-foto-conta__vazia { flex: 0 0 auto; width: 120px; height: 120px; border-radius: var(--vt-radius-full); object-fit: cover; background: var(--vt-gray-200); } .vt-foto-conta__acoes { flex: 1 1 16rem; display: flex; flex-direction: column; gap: var(--vt-space-2); } .vt-foto-conta__acoes .vt-acao { display: inline-flex; align-self: flex-start; padding-inline: var(--vt-space-4); } /* Ação secundária de verdade: "remover foto" precisa existir e não precisa competir com "enviar". */ .vt-acao--discreta { border-color: transparent; color: var(--vt-texto-suave); font-weight: 400; text-decoration: underline; } .vt-campos-lado-a-lado { display: grid; gap: var(--vt-space-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .vt-pendencias { margin: 0 0 var(--vt-space-4); padding-inline-start: var(--vt-space-6); font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } /* Entrada pelo Google (§8.1): botão antes do formulário, porque quem tem conta Google não deveria precisar ler o formulário inteiro para descobrir o atalho. */ .vt-google { margin-bottom: var(--vt-space-6); } .vt-google__botao { display: flex; align-items: center; justify-content: center; gap: var(--vt-space-3); width: 100%; padding: var(--vt-space-3) var(--vt-space-4); border: 1px solid var(--vt-borda); border-radius: var(--vt-radius-sm); background: var(--vt-white); color: var(--vt-texto); font-weight: 700; text-decoration: none; } .vt-google__botao:hover, .vt-google__botao:focus-visible { background: var(--vt-gray-100); } .vt-google__ou { display: flex; align-items: center; gap: var(--vt-space-3); margin: var(--vt-space-4) 0 0; color: var(--vt-texto-suave); font-size: var(--vt-fs-sm); } .vt-google__ou::before, .vt-google__ou::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--vt-borda); } /* ------------------------------------------------ registro no conselho --- */ /* Sem JavaScript: as linhas ja vem preenchidas e ha sempre uma vazia no fim. Apagar o numero e salvar remove a linha — e a ajuda diz isso, porque nao ha botao de remover para descobrir sozinho. */ .vt-registros-conta { border: 0; margin: 0 0 1rem; padding: 0; } .vt-registro-conta { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(4.5rem, auto) minmax(8rem, 2fr); gap: 0.5rem; align-items: end; margin-bottom: 0.75rem; } /* Cada controle traz o proprio rotulo VISIVEL. A primeira versao usava `screen-reader-text`, que este tema nao define: os rotulos apareciam e, como filhos diretos da grade, ocupavam celula — tres colunas com seis itens viravam duas linhas tortas. */ .vt-registro-conta__campo { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .vt-registro-conta__campo > span:first-child { font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } @media (max-width: 640px) { .vt-registro-conta { grid-template-columns: 1fr 1fr; } .vt-registro-conta__campo:last-child { grid-column: 1 / -1; } } .vt-registros-conta .vt-campo__ajuda { display: block; margin-top: 0.35rem; } /* ------------------------------------------- campos da especialidade --- */ /* Tudo em par rotulo/valor, booleano incluido: "Atende gestantes: Nao" e informacao util para quem procura, tanto quanto o "Sim". A cor distingue os dois sem precisar ler — mint para sim, cinza para nao. */ .vt-campos-esp { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--vt-space-3) var(--vt-space-5); margin: 0; } .vt-campos-esp__par > dt { margin: 0 0 0.15rem; font-size: var(--vt-fs-sm); color: var(--vt-texto-suave); } .vt-campos-esp__par > dd { margin: 0; color: var(--vt-texto); font-weight: 600; } .vt-campos-esp__par > dd.is-sim { color: var(--vt-mint-text); } .vt-campos-esp__par > dd.is-nao { color: var(--vt-texto-suave); } } /* * ── uma exceção de camada, e o motivo dela ────────────────────────────── * * Esta folha inteira vive em `@layer legado`. Este bloco não, e a razão foi * medida no navegador: `listagem.css` — que é `@layer componente` e carrega * nesta rota — declara `.vt-acao` com `min-height` e `font-size`. Camada * vence especificidade, então QUALQUER regra daqui perde para aquela, por * mais específica que seja. A primeira versão deste porte de botão era * `.vt-convite > form .vt-acao--primaria` em `legado` e não mudou um pixel. * * Os valores são os de `.vt-acao--grande`, que é como o assistente veste a * ação principal de cada passo. Não dá para usar a classe: ela mora em * `conta.css`, que não carrega em rota pública — e trazê-la para cá a faria * perder para o mesmo `.vt-acao` do `listagem.css`. * * O seletor pega só o botão da POSSE: o da saída do catálogo não é * `--primaria`, de propósito. */ @layer componente { .vt-convite > form .vt-acao--primaria { min-height: 3rem; padding-inline: var(--vt-space-6); font-size: var(--vt-fs-base); } }