/* ============================================================ exizap-publicas.css — a camada das telas PÚBLICAS. Direção: GRADE QUE CEDE. O fundo é a agenda; a folha é a requisição. Carrega só em /exames/{token}, /agendar/{token} (e irmãs) e no login. Nenhuma tela interna a vê — o app denso continua exatamente como está. ⚠️ DUAS CLASSES, E A DIFERENÇA IMPORTA: .ez-sup — "é uma superfície pública". Governa o que vale em QUALQUER uma delas: a voz tipográfica, a etiqueta, a entrada em cascata, o ímã, o pulso. .ez-pub — "esta tela é TINTA PAUTADA". Inverte a polaridade: fundo escuro, folha branca por cima, texto claro. .ez-pub-auth — a tela de entrar, que é .ez-sup mas NÃO .ez-pub: nela o lado do formulário é claro por conta do tema vendorizado, e um `color:#fff` no apagaria os rótulos dos campos. Quem carrega a tinta lá é o painel da direita (.ez-authsplash), que já era nosso. Marcar o login com .ez-pub seria o defeito mais fácil de cometer aqui. ⚠️ A INVERSÃO É O PONTO. Antes, as quatro telas eram fundo cinza-claro + cartão branco + degradê azul, que é literalmente o visual genérico que este trabalho existe para eliminar. Aqui a cor dominante é a TINTA (--c-ink), o ciano volta a ser acento pontual, e a folha branca é a única área clara da tela — que é como um documento se comporta em cima de uma mesa, não como um cartão flutuando num gradiente. ⚠️ TODA DURAÇÃO AQUI É TOKEN, NUNCA LITERAL, e a razão é técnica e não de estilo: o bloco de prefers-reduced-motion do tema aplica `transition-duration:1ms !important` nos ELEMENTOS de prefixo nosso — e `transition-duration` NÃO é herdada por ::before/::after. Uma regra de pseudo-elemento escrita com `250ms` literal CONTINUA animando para quem pediu movimento reduzido. Escrita com var(--mo-painel), obedece, porque custom property o pseudo HERDA. É a mesma família da armadilha do .mdi-spin::before já documentada em Skill/identidade-e-tokens.md. ============================================================ */ :root{ /* ⚠️ O PASSO DA PAUTA É O PASSO DA GRADE DE HORÁRIOS — slot + gap, não a altura do slot. MEDIDO no Edge headless em 390, 620 e 780px: slot de 45px + gap de 8px = 53px, idêntico nas três larguras (o slot não encolhe no celular). Estava 52px por estimativa, e 1px de erro por linha não é detalhe: em dez linhas a grade anda 10px e sai de cima das réguas do fundo, que é justamente a coincidência em que esta direção se apoia. Mexer no padding ou no font-size do `.bk-slot` obriga a medir de novo. */ --ez-pauta:53px; --ez-display:"Instrument Serif", Georgia, "Times New Roman", serif; /* Intervalo entre irmãos na entrada em cascata. Curto de propósito: o que dá elegância é o RITMO, e ritmo lento vira espera. */ --ez-cascata:34ms; --ez-chega:cubic-bezier(.22,.61,.36,1); /* desacelera: assenta */ --ez-sai:cubic-bezier(.4,0,1,1); /* acelera: some */ /* A varredura do slot enquanto o servidor responde. Fica AQUI e nao no tema porque so a superficie publica espera assim -- e porque o valor dele muda no movimento reduzido, junto da regra que o usa. */ --mo-espera:900ms; } /* ── 1. A PÁGINA É TINTA PAUTADA ───────────────────────────────────────── */ body.ez-pub{ background: /* a luz que faz a folha flutuar sobre a tinta */ radial-gradient(120% 68% at 50% -14%, rgba(53,208,222,.20), transparent 62%), /* a pauta: o passo é a altura do slot */ repeating-linear-gradient(to bottom, rgba(53,208,222,.085) 0 1px, transparent 1px var(--ez-pauta)), /* as calhas: a coluna da grade de horários */ repeating-linear-gradient(to right, rgba(255,255,255,.035) 0 1px, transparent 1px 25%), var(--c-ink); color:#fff; min-height:100vh; /* Sem background-attachment:fixed de propósito: no iOS ele custa repaint a cada rolagem, e estas páginas são curtas — não há o que fixar. */ } /* ── 2. A FOLHA ────────────────────────────────────────────────────────── */ /* Canto quase reto e sombra longa e baixa: papel sobre mesa. O raio de 12px com sombra difusa é a assinatura do cartão genérico. */ .ez-pub .ezcard, .ez-pub .bk-card{ background:#fff; color:var(--c-ink); border:1px solid rgba(15,40,48,.10); border-radius:var(--r-6); box-shadow:0 1px 0 rgba(255,255,255,.35), 0 30px 70px -28px rgba(0,0,0,.66); position:relative; overflow:hidden; } /* A REGRA de 3px no topo: um traço de caneta abrindo a requisição. É o primeiro movimento da página, e o único que não relata um dado. */ .ez-pub .bk-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--c-500), var(--c-300) 58%, transparent); transform:scaleX(0); transform-origin:left center; } /* ⚠️ ANIMAÇÃO, NÃO TRANSIÇÃO, e o motivo é de comportamento: em /exames os CINCO cartões começam `display:none`, e elemento não renderizado NÃO TRANSICIONA — o estilo apenas salta. Escrito como transição disparada por .ez-assentou, o traço chegava já em scaleX(1) e nunca era visto em nenhum passo. Animação REINICIA quando o elemento sai de display:none, então ela toca a cada passo revelado — que é quando ela significa "esta folha abriu". */ .ez-pub.ez-assentou .bk-card::before{ animation:ez-regua var(--mo-painel) var(--ez-chega) forwards; } @keyframes ez-regua{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* ── 3. TIPOGRAFIA ─────────────────────────────────────────────────────── */ /* ⚠️ O DISPLAY APARECE POUCAS VEZES POR TELA, e isso é a regra que o mantém com força. Serifa de alto contraste em tudo vira enfeite; em um lugar só, vira a voz do documento. Poppins continua sendo a voz da máquina — rótulo, campo, botão, hora. */ .ez-pub .bk-title, .ez-sup .ez-display{ font-family:var(--ez-display); font-weight:var(--fw-corpo); font-size:clamp(var(--fs-28), 6.2vw, var(--fs-32)); line-height:var(--lh-densa); letter-spacing:-.005em; } /* ⚠️ A COR FICA DE FORA DA REGRA DE VOZ, e este é o QUARTO caso da mesma armadilha nesta camada — depois de .spin, .muted-link e .ez-brand. A tipografia vale em qualquer superfície pública; o BRANCO só vale sobre a tinta. Enquanto `color:#fff` morou dentro desta regra, o título do login sumiu por inteiro: `.ez-display` passou a valer também lá, e lá o fundo é a caixa branca do formulário. Sobrou o emoji, que não tem cor de texto — e foi só ele que denunciou. */ .ez-pub .bk-head .bk-title, .ez-pub .bk-head .ez-display{ color:#fff; } /* O SEGUNDO TIMBRE NÃO É UMA SEGUNDA FONTE: é Poppins 11px em caixa alta com letter-spacing largo. O que faz uma página parecer editorial é a distância entre 32px/-.005em e 11px/+.16em na mesma coluna — não o número de fontes. */ .ez-sup .ez-etiqueta{ font-size:var(--fs-11); font-weight:var(--fw-forte); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-strong); /* o valor de DENTRO da folha é o padrão */ } .ez-pub .bk-head .ez-etiqueta{ color:var(--c-300); } /* sobre a tinta, clareia */ /* Algarismo de largura fixa na grade de horários e nos horários da lista: é a diferença entre uma grade e uma tabela desalinhada. Zero bytes. */ .ez-pub .bk-slot, .ez-pub .ex-quando, .ez-sup .ez-num{ font-variant-numeric:tabular-nums; } /* ── 4. O QUE ESTÁ SOBRE A TINTA ───────────────────────────────────────── */ /* ⚠️ REGRA DA CAMADA, E É CONFERIDA POR TESTE: nenhuma cor clara pode ser declarada fora de um seletor que contenha `.bk-head` (o único bloco que fica SOBRE a tinta nas telas públicas) ou `.ez-authsplash` (o painel da tela de entrar). Sem essa disciplina, o mesmo defeito volta sempre com outra roupa: texto claro cai sobre a folha BRANCA e o conteúdo fica presente, legível pelo leitor de tela, e invisível para quem enxerga. Aconteceu quatro vezes escrevendo esta camada — com `.spin`, `.muted-link`, `.ez-brand` e o título do login. Nenhuma delas apareceu lendo o CSS; as quatro apareceram olhando a tela. `publicas-movimento.test.js` § 8 falha se alguma cor clara escapar daqui. */ .ez-pub .bk-head{ color:rgba(255,255,255,.72); } .ez-pub .bk-head .bk-owner{ color:var(--c-300); font-weight:var(--fw-forte); } .ez-pub .bk-head .bk-desc{ color:rgba(255,255,255,.66); } .ez-pub .bk-head .bk-chip{ background:rgba(255,255,255,.06); color:var(--c-200); border:1px solid rgba(53,208,222,.24); } /* ⚠️ SÓ EXISTE UMA FOLHA POR TELA. Em /agendar/reagendar o bloco "Agendamento atual" tem fundo `var(--bg)` próprio, herdado de quando a página inteira era clara: sobre a tinta ele virou um segundo cartão claro flutuando ACIMA do verdadeiro, sem régua de caneta, contradizendo a direção na primeira tela que a pessoa vê. Aqui ele volta a ser o que é: um selo sobre a tinta, irmão do chip. */ .ez-pub .bk-head .bk-atual{ background:rgba(255,255,255,.06); border-color:rgba(53,208,222,.24); color:rgba(255,255,255,.72); } .ez-pub .bk-head .bk-atual b{ color:var(--c-300); } /* ⚠️ O BRANCO SÓ VALE ACIMA DA FOLHA. O único `.spin` sobre a tinta é o #loadHead, dentro de .bk-head; os outros ("Buscando horários…") estão DENTRO do cartão branco, e um `.ez-pub .spin` solto os apagava — branco no branco, com o texto presente e invisível. Mesma razão pela qual não há regra para `.muted-link`: os quatro do produto ("voltar para a lista", "não sou eu", "escolher outro horário", "precisa cancelar") vivem todos dentro da folha, onde var(--muted) já está certo. */ .ez-pub .bk-head .spin{ color:rgba(255,255,255,.6); } /* ⚠️ A MARCA É BRANCA SÓ DENTRO DE .bk-head. Em /agendar/cancelar ela está DENTRO da folha branca — um `.ez-pub .ez-brand{color:#fff}` solto apagava o nome do produto na única tela que a pessoa abre para desmarcar. Terceiro caso da mesma armadilha nesta camada (os outros dois: .spin e .muted-link). A regra geral que sai disso: NADA fica branco sem estar escopado a .bk-head, porque nem toda pública tem uma. */ .ez-pub .bk-head .ez-brand{ color:#fff; } /* ── 5. O SLOT ─────────────────────────────────────────────────────────── */ /* ⚠️ A transição é por PROPRIEDADE NOMEADA, não `all`. O `.bk-slot{transition:.12s}` de antes era `transition-property:all` — com o magnético escrevendo transform inline, o `all` arrasta o ímã e o botão fica borrachudo, seguindo o cursor com atraso em vez de responder a ele. */ .ez-pub .bk-slot{ position:relative; overflow:hidden; transition:border-color var(--mo-rapido) var(--mo-ease), color var(--mo-rapido) var(--mo-ease), background-color var(--mo-rapido) var(--mo-ease), transform var(--mo-toque) var(--mo-ease); } /* A barra que preenche da esquerda: a marca de "este é o candidato". */ .ez-pub .bk-slot::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--c-500); transform:scaleX(0); transform-origin:left center; transition:transform var(--mo-rapido) var(--ez-chega); } /* ⚠️ REALÇE POR CURSOR SÓ ONDE HÁ CURSOR — o mesmo par que o `temCursor()` do JS usa. No celular o `:hover` GRUDA: o dedo encosta uma vez e a marca fica até tocar em outro lugar. Numa lista de doze nomes, uma linha marcada lê-se como "esta é a selecionada", que é mentira — e o link chega ao RH justamente pelo WhatsApp, no telefone. Medido com emulação de toque: um único touchStart/touchEnd sobre o texto da linha a deixava realçada indefinidamente. ⚠️ O `:active` fica DE FORA desta guarda: ele é o retorno do toque e deve valer em qualquer aparelho. */ @media (hover:hover) and (pointer:fine){ .ez-pub .bk-slot:hover::after{ transform:scaleX(1); } .ez-pub .bk-slot:hover{ transform:translateY(-2px); } .ez-pub .ex-row:hover{ box-shadow:inset 2px 0 0 var(--brand); background:rgba(21,181,198,.04); } /* O brilho do ima segue o cursor -- sem cursor ele acenderia no centro do botao (--ez-mx/--ez-my nunca escritos) e ficaria aceso depois do toque. */ .ez-sup .ez-ima:hover::after{ opacity:1; } } /* ⚠️ O :active precisa de !important: o magnético escreve `transform` INLINE, e declaração inline vence regra de folha — sem o !important a mordida do clique não acontece e o botão fica pendurado na posição do ímã. */ .ez-pub .bk-slot:active{ transform:scale(.975) !important; } /* Entre o clique e a resposta do servidor: o slot diz que está perguntando. */ .ez-pub .bk-slot[data-ez-esperando]{ color:var(--muted); border-color:var(--border); cursor:progress; } .ez-pub .bk-slot[data-ez-esperando]::after{ transform:scaleX(1); animation:ez-varre var(--mo-espera) linear infinite; } @keyframes ez-varre{ 0% { transform:scaleX(0); transform-origin:left center; } 50% { transform:scaleX(1); transform-origin:left center; } 100%{ transform:scaleX(0); transform-origin:right center; } } /* ── 6. A LISTA DE PESSOAS (só em /exames) ─────────────────────────────── */ /* Talho ciano na borda, sem deslocar layout. Numa lista de doze nomes, movimento por linha seria doze movimentos competindo pelo olho. */ /* ⚠️ O REALÇE NÃO PODE MEXER NA CAIXA. Havia aqui `border-left` + `padding-left` com `margin-left` negativa: a linha passava a começar 8px à esquerda do resto do cartão, e o separador de cada pessoa ficava desalinhado do `

` logo acima — uma escadinha visível no bloco que é o centro da tela. `box-shadow:inset` pinta o mesmo tal ciano sem ocupar espaço nenhum, então tudo permanece alinhado. Numa lista de doze nomes, movimento por linha seriam doze movimentos competindo pelo olho — por isso a linha não se desloca, só ganha o talão. */ .ez-pub .ex-row{ transition:box-shadow var(--mo-rapido) var(--mo-ease), background-color var(--mo-rapido) var(--mo-ease); } /* ── 7. O BOTÃO DE COMPROMISSO ─────────────────────────────────────────── */ /* ⚠️ O magnético vive SÓ nos botões que GRAVAM alguma coisa — incluir, marcar, confirmar, entrar. O critério não é estético: é sinalizar compromisso. Num botão de navegação seria ruído, e em doze botões seria uma tela nervosa. */ .ez-sup .ez-ima{ position:relative; /* ⚠️ `background-color` PRECISA estar nomeada aqui. Esta regra substitui a `transition` do `.ezbtn` do tema (que é `all`), então tudo que não for nomeado passa a SALTAR: o hover do botão primário pulava de #15B5C6 para #0C8695 sem transição, coisa que antes deste commit levava 200ms. Mesmo critério que o `.bk-slot` já aplica logo acima — substituir `all` obriga a reconferir a lista. O transform usa --mo-toque (60ms) e não --mo-rapido: o ímã escreve transform inline a cada quadro, e transição longa aí faz o botão seguir o cursor com atraso, borrachudo. */ transition:transform var(--mo-toque) var(--ez-chega), background-color var(--mo-rapido) var(--mo-ease), color var(--mo-rapido) var(--mo-ease), box-shadow var(--mo-rapido) var(--mo-ease); will-change:transform; } .ez-sup .ez-ima::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(180px circle at var(--ez-mx,50%) var(--ez-my,50%), rgba(255,255,255,.28), transparent 45%); opacity:0; transition:opacity var(--mo-rapido) var(--mo-ease); pointer-events:none; } .ez-sup .ez-ima:active{ transform:scale(.98) !important; } /* ── 7.1 O FOCO DE TECLADO ───────────────────────────────────── */ /* ⚠️ NENHUM botão ou link destas telas mostrava foco. Medido na tela de entrar: das sete paradas de tabulação, só os dois campos mudam de aparência (o tema troca a borda do `.ezinput`); no botão "Entrar" e nos links "Esqueci a senha" e "Criar conta" a tela fica pixel a pixel idêntica — quem navega por teclado aperta Enter sem saber onde está. Não é defeito que esta camada introduziu, mas é ela que agora governa a aparência destas telas, e o arquivo existe justamente para vencer o tema sem editá-lo. `:focus-visible` e não `:focus`: o anel aparece para teclado e some para o clique de mouse, que é o comportamento que o navegador já calcula melhor que nós. */ /* ⚠️ O `!important` AQUI NÃO É PREGUIÇA — É O ÚNICO JEITO. O tema vendorizado tem `button, a { outline: none !important }`: um apagão de contorno em TODO botão e TODO link do produto. Sem `!important` do nosso lado, a regra abaixo casa, o `outline-offset` até aplica, e o contorno simplesmente não é desenhado — sem erro, sem aviso, sem nada na tela. Medido: `outline-style` computava `none` mesmo com seletor de ID. ⚠️ E foi assim que a primeira versão desta regra ficou INERTE por dois commits na tela de entrar. Se alguém tirar o `!important` achando que é excesso, o foco some de novo e nada acusa — por isso o arnês exige o `!important` explicitamente. */ /* ⚠️ OS CAMPOS ENTRAM AQUI TAMBÉM. O halo do `.ezinput` vem do tema COMPRADO e sai azul `#2c8ef8`, e na tela de entrar isso deixava o formulário com duas marcas de marcas diferentes. A camada interna tentou trocar o halo por `--info-soft` e MEDIU depois: 1,05:1, invisível. A resposta certa é a mesma dos outros controles — o `outline`, que mede 4,32:1 sobre a folha. ⚠️ E `[tabindex]` leva a guarda contra o negativo pelo mesmo motivo da interna: `tabindex="-1"` é foco por script, e contêiner de diálogo não é destino de teclado. */ .ez-sup a:focus-visible, .ez-sup button:focus-visible, .ez-sup input:focus-visible, .ez-sup select:focus-visible, .ez-sup textarea:focus-visible, .ez-sup [tabindex]:not([tabindex^="-"]):focus-visible{ outline:2px solid var(--brand-strong) !important; outline-offset:2px; } /* Sobre a tinta o anel escuro sumiria; ali ele clareia. */ .ez-pub .bk-head a:focus-visible, .ez-pub .bk-head button:focus-visible, .ez-authsplash a:focus-visible, .ez-authsplash button:focus-visible{ outline-color:var(--c-300) !important; } /* ── 8. A ENTRADA EM CASCATA ───────────────────────────────────────────── */ /* ⚠️ O ESTADO BASE NUNCA É opacity:0. Numa página anônima, conteúdo que depende de script para aparecer é conteúdo que às vezes não aparece — CSS velho, erro de JS, extensão bloqueando. Quem esconde é o `backwards` da própria animação, durante o próprio atraso dela: se a animação não rodar, o conteúdo simplesmente ESTÁ LÁ. */ /* ⚠️ `visibility` NÃO É ENFEITE AQUI — É O QUE IMPEDE DE CLICAR NO INVISÍVEL. `opacity:0` esconde o botão e mantém o clique, o foco e o leitor de tela. Com a grade de horários isso virou defeito de verdade: durante o atraso da cascata a pessoa via duas fileiras de folha em branco onde havia botões vivos, e um clique ali GRAVA o agendamento e dispara WhatsApp ao funcionário — num horário que o RH nunca viu. Medido em 24 slots: 14 invisíveis aos 360ms, e `elementFromPoint` no meio do branco devolvia o próprio