/* ============================================================================= AS TELAS DE ACESSO — superficie, campo e profundidade Folha separada pelos mesmos dois motivos de `acesso-motion.css`: nao pagar bytes fora daqui, e nao colidir com a reescrita dos parciais `_acesso-*` que estava em curso em 26/08/2026. ESCOPO `pagina-auth`, E NAO `pagina-acesso`: o tratamento de CAMPO vale nas cinco telas (entrar, criar conta, recuperar, redefinir, confirmar e-mail). Um campo que se comporta de um jeito na porta e de outro no e-mail de recuperacao seria a mesma tela contando duas historias. A coreografia de entrada, essa sim, e so das duas portas — e por isso mora na outra folha. ----------------------------------------------------------------------------- O QUE JA ESTAVA DECIDIDO E NAO SE MEXE ----------------------------------------------------------------------------- O FOCO CONTINUA NEUTRO. A tentacao obvia era trocar o anel branco pelo vermelho da marca — e `style.css` ja registra por que nao: a borda de ERRO tambem e vermelha, e com o anel na mesma cor "campo focado" e "campo reprovado" ficavam identicos. No /redefinir-senha o campo "Nova senha" recem-focado parecia ter falhado na validacao. Nada aqui toca em `:focus-visible`. A ALTURA CONTINUA 48px e a borda continua `--borda-controle`, que existe por medida de contraste (WCAG 1.4.11): com `--borda` o campo media 1,35:1 contra o cartao. Esta folha muda o PREENCHIMENTO, e o preenchimento novo so melhora aquela conta — nunca piora. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. O CAMPO GANHA SUPERFICIE PROPRIA ----------------------------------------------------------------------------- O DEFEITO, MEDIDO: `style.css` escreve `background: var(--campo-fundo, var(--fundo))` em tres lugares — e `--campo-fundo` NUNCA FOI DEFINIDO. Os tres caem no fallback, e o fallback e a cor da PAGINA. No tema escuro isso significava campo `#0D0D14` sobre cartao `#151520`: o preenchimento do campo era a mesma tinta do fundo da tela, e a unica coisa que dizia "aqui se digita" era uma borda de 1px. Na captura que o dono mandou, os dois campos lem como retangulos pretos vazios — porque e o que eles sao. O token era um gancho esperando valor. Dar o valor resolve os tres lugares de uma vez (campo, preenchimento automatico e o nao ha onde pendurar marcacao: input nao aceita filho nem pseudo-elemento. As saidas seriam (a) embrulhar cada campo num wrapper com o ao lado — e os parciais de acesso estavam sendo reescritos em outro lugar, sem commit, entao editar aquilo era pedir para uma das duas mudancas apagar a outra; ou (b) desenhar no CSS. Escolhida a (b), com a condicao que a regra realmente protege: EXISTE UMA COPIA SO de cada path. Envelope e cadeado nao estao em `_icones.php` e nao podem passar a estar sem que estas duas linhas saiam junto — senao o mesmo desenho tem duas casas e o dia em que uma mudar comeca a contar. E POR QUE UM CINZA FIXO, E NAO O TOKEN DO TEMA. `url()` nao interpola variavel: para o glifo seguir `--texto-fraco` seriam DOIS data-URI, um por tema — duas copias do mesmo path, exatamente o que o paragrafo acima recusa. `#767C90` fica entre os dois valores do token (#565C73 claro, #868CA0 escuro) e le nos dois; e decoracao ao lado de um rotulo que ja diz a mesma coisa em palavra, entao nao carrega informacao sozinho (WCAG 1.4.1) e nao responde por contraste de texto. */ .pagina-auth .autenticar_form input[type="email"], .pagina-auth .autenticar_form input[type="password"] { padding-left: 46px; background-repeat: no-repeat; background-position: left 15px center; background-size: 19px 19px; } /* Envelope. Mesma gramatica dos glifos da casa: viewBox 24, traco 1.7, pontas e juntas arredondadas. */ .pagina-auth .autenticar_form input[type="email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767C90' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.2'/%3E%3Cpath d='m3.7 7.2 8.3 5.9 8.3-5.9'/%3E%3C/svg%3E"); } /* Cadeado. */ .pagina-auth .autenticar_form input[type="password"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767C90' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.4' rx='2.2'/%3E%3Cpath d='M8.2 10.4V7.9a3.8 3.8 0 0 1 7.6 0v2.5'/%3E%3C/svg%3E"); } /* O ROTULO VIRA ETIQUETA. Ele era `--texto` cheio com peso 600 — do mesmo peso e da mesma tinta do que a pessoa digita. Em caixa alta, com espacamento e em cinza, ele para de competir com o conteudo do campo e passa a se ler como o que e: o nome da caixa. `text-transform` E NAO CAIXA ALTA NO HTML: leitor de tela le o texto de origem ("E-mail"), e nao "E-MAIL" soletrado. A diferenca e entre uma escolha de tipografia e uma mudanca de conteudo. */ .pagina-auth .autenticar_form label { font-size: var(--tipo-0, .72rem); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); margin-bottom: 8px; } /* O rotulo do "Lembrar-me"/aceite e uma FRASE, e nao uma etiqueta: ele mora dentro de