/* ============================================================
Denvo - sistema de design das telas públicas e de acesso
(login, cadastro, recuperar/redefinir senha, login de avaliação).
IDENTIDADE OFICIAL (07/08/2026), Aplicação 1 do manual da marca:
tela partida, painel da marca em grafite chapado à esquerda com a
grade do odontograma em marca-d'água, e o formulário sobre papel
morno à direita. O acento âmbar aparece em três lugares e só três:
a linha do olho-de-boi, o campo em foco e o link.
O que saiu daqui: Fraunces e Hanken Grotesk (a marca tem duas
famílias, Instrument Sans e IBM Plex Mono), o gradiente e o brilho
varrendo o botão (a marca é chapada: efeito em cima dela é o que faz
a peça parecer feita às pressas), o botão em cápsula e o raio de
14/24px (a escala vai a 2/4/8: canto grande em elemento pequeno não
existe na marca).
Uso mínimo na página:
...formulário...
Os tokens vêm de /assets/css/denvo-vars.css, que esta folha importa.
Nenhum nome de classe mudou: as páginas PHP continuam valendo.
============================================================ */
@import url('/assets/css/denvo-vars.css');
.dv-body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
font-family: var(--dv-fonte-ui);
color: var(--dv-texto);
background: var(--dv-fundo);
-webkit-font-smoothing: antialiased;
}
.dv-body *, .dv-body *::before, .dv-body *::after { box-sizing: border-box; }
.dv-body ::selection { background: var(--dv-ambar-veu); color: var(--dv-grafite); }
/* ---------- Layout partido ---------- */
.dv-auth {
display: grid;
grid-template-columns: 1.04fr 1fr;
min-height: 100vh;
min-height: 100dvh;
}
/* ---------- Painel da marca: grafite chapado ---------- */
.dv-auth__brand {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--dv-esp-7) 52px;
color: var(--dv-neutro-01);
background: var(--dv-grafite);
}
/* Marca-d'água: a grade do odontograma, que é de onde o símbolo vem.
Fica em 5% de opacidade, some antes de disputar com o texto. */
.dv-auth__brand::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: .07;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Crect x='6' y='6' width='42' height='42' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
background-size: 70px 70px;
-webkit-mask-image: radial-gradient(120% 90% at 25% 12%, #000, transparent 76%);
mask-image: radial-gradient(120% 90% at 25% 12%, #000, transparent 76%);
}
.dv-brand__logo { height: 46px; width: auto; position: relative; z-index: 1; }
.dv-brand__mid { position: relative; z-index: 1; max-width: 440px; }
/* Olho-de-boi: rótulo em caixa-alta com o fio âmbar. */
.dv-brand__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--dv-esp-2);
font: var(--dv-txt-rotulo);
letter-spacing: var(--dv-tr-rotulo);
text-transform: uppercase;
color: var(--dv-ambar-claro);
margin-bottom: var(--dv-esp-5);
}
.dv-brand__eyebrow::before {
content: '';
width: 26px;
height: 2px;
background: var(--dv-ambar);
}
.dv-brand__title {
font: var(--dv-txt-display);
letter-spacing: var(--dv-tr-display);
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.1;
color: #FFFFFF;
margin: 0 0 var(--dv-esp-4);
}
/* A parte enfatizada da manchete é a única coisa âmbar do painel. */
.dv-brand__title em { font-style: normal; color: var(--dv-ambar); }
.dv-brand__text {
font: var(--dv-txt-corpo);
color: var(--dv-neutro-04);
margin: 0;
}
.dv-brand__ticks {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--dv-esp-3);
}
.dv-brand__ticks li {
display: flex;
align-items: center;
gap: var(--dv-esp-3);
font: var(--dv-txt-corpo-sm);
font-weight: 700;
color: var(--dv-neutro-04);
}
.dv-brand__ticks svg {
width: 18px;
height: 18px;
color: var(--dv-ambar);
flex-shrink: 0;
}
/* Assinatura de rodapé do painel escuro, em mono, como no manual. */
.dv-brand__foot {
position: relative;
z-index: 1;
font-family: var(--dv-fonte-num);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dv-neutro-06);
}
/* ---------- Painel do formulário: papel morno ---------- */
.dv-auth__panel {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(28px, 5vw, 56px);
background: var(--dv-fundo);
}
/* Sem cartão: no manual o formulário assenta direto no papel. A borda só
aparece no celular, quando ele deixa de ter um painel ao lado que o
delimite. */
.dv-card {
width: 100%;
max-width: 430px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.dv-card__logo { height: 40px; width: auto; margin-bottom: var(--dv-esp-5); display: none; }
.dv-h1 {
font: var(--dv-txt-titulo-2);
letter-spacing: var(--dv-tr-titulo-2);
color: var(--dv-texto);
margin: 0 0 var(--dv-esp-2);
}
.dv-sub {
font: var(--dv-txt-corpo);
color: var(--dv-texto-2);
margin: 0 0 var(--dv-esp-6);
}
/* Rótulo acima do título: "ACESSO DA EQUIPE:" */
.dv-eyebrow {
display: block;
font: var(--dv-txt-rotulo);
letter-spacing: var(--dv-tr-rotulo);
text-transform: uppercase;
color: var(--dv-texto-3);
margin-bottom: var(--dv-esp-2);
}
/* ---------- Campos ---------- */
.dv-field { margin-bottom: var(--dv-esp-4); }
.dv-label {
display: block;
font: var(--dv-txt-rotulo);
letter-spacing: var(--dv-tr-rotulo);
text-transform: uppercase;
color: var(--dv-texto-3);
margin-bottom: var(--dv-esp-2);
}
.dv-input {
width: 100%;
padding: 13px 14px;
border: 1px solid var(--dv-campo-borda);
border-radius: var(--dv-raio-1);
font: var(--dv-txt-corpo);
font-family: var(--dv-fonte-ui);
color: var(--dv-texto);
background: var(--dv-campo);
transition: border-color var(--dv-mov-rapido), box-shadow var(--dv-mov-rapido);
}
.dv-input::placeholder { color: var(--dv-texto-desabilitado); }
/* Campo em foco: contorno âmbar. É o marcador de "é aqui que você está". */
.dv-input:focus {
outline: none;
border-color: var(--dv-ambar);
box-shadow: 0 0 0 3px var(--dv-ambar-veu);
}
.dv-input-wrap { position: relative; display: flex; align-items: center; }
.dv-input-wrap .dv-input { padding-right: 52px; }
.dv-input-ico {
position: absolute;
left: 13px;
color: var(--dv-texto-3);
width: 18px;
height: 18px;
pointer-events: none;
}
.dv-input-wrap.has-ico .dv-input { padding-left: 42px; }
.dv-pass-toggle {
position: absolute;
right: 2px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--dv-texto-3);
cursor: pointer;
border-radius: var(--dv-raio-1);
transition: color var(--dv-mov-rapido), background var(--dv-mov-rapido);
}
.dv-pass-toggle:hover { color: var(--dv-texto); background: var(--dv-neutro-03); }
/* linha meta: manter conectado / esqueceu a senha */
.dv-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dv-esp-3);
margin: var(--dv-esp-1) 0 var(--dv-esp-5);
flex-wrap: wrap;
}
.dv-check {
display: inline-flex;
align-items: center;
min-height: 44px;
gap: var(--dv-esp-2);
font: var(--dv-txt-corpo-sm);
color: var(--dv-texto-2);
cursor: pointer;
user-select: none;
}
.dv-check input { width: 17px; height: 17px; accent-color: var(--dv-grafite); }
.dv-meta .dv-link { display: inline-flex; align-items: center; min-height: 44px; }
.dv-link {
color: var(--dv-link);
font: var(--dv-txt-corpo-sm);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color var(--dv-mov-rapido);
}
.dv-link:hover { color: var(--dv-link-hover); }
/* ---------- Botões ---------- */
.dv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--dv-esp-2);
font-family: var(--dv-fonte-ui);
font-weight: 700;
font-size: 16px;
line-height: 1.2;
cursor: pointer;
padding: 15px 24px;
border-radius: var(--dv-raio-1);
border: 1px solid transparent;
transition: background var(--dv-mov-normal), color var(--dv-mov-normal), border-color var(--dv-mov-normal);
}
.dv-btn svg { width: 18px; height: 18px; }
.dv-btn--block { width: 100%; }
/* Ação primária é GRAFITE, não âmbar: o âmbar é acento de foco e perde a
função se virar fundo de botão. */
.dv-btn--primary { background: var(--dv-acao); color: var(--dv-acao-texto); }
.dv-btn--primary:hover { background: var(--dv-acao-hover); }
.dv-btn--ghost {
background: transparent;
color: var(--dv-texto);
border-color: var(--dv-borda-forte);
}
.dv-btn--ghost:hover { background: var(--dv-neutro-02); border-color: var(--dv-texto-3); }
.dv-btn[disabled] { opacity: .55; cursor: not-allowed; }
.dv-btn:focus-visible { outline: none; box-shadow: var(--dv-anel-foco); }
.dv-btn .dv-spin {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: dv-spin .7s linear infinite;
}
@keyframes dv-spin { to { transform: rotate(360deg); } }
/* ---------- Mensagens ---------- */
.dv-msg {
font: var(--dv-txt-corpo-sm);
padding: 12px 14px;
border-radius: var(--dv-raio-2);
margin-bottom: var(--dv-esp-4);
display: flex;
align-items: flex-start;
gap: var(--dv-esp-2);
border: 1px solid;
}
.dv-msg svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.dv-msg.err { background: var(--dv-err-bg); color: var(--dv-err-ink); border-color: var(--dv-err); }
.dv-msg.ok { background: var(--dv-ok-bg); color: var(--dv-ok-ink); border-color: var(--dv-ok); }
/* rodapé do formulário */
.dv-foot {
margin-top: var(--dv-esp-5);
padding-top: var(--dv-esp-4);
border-top: 1px solid var(--dv-borda);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dv-esp-3);
flex-wrap: wrap;
font: var(--dv-txt-corpo-sm);
color: var(--dv-texto-2);
}
.dv-foot a { color: var(--dv-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* G1 13/09/2026: o link de acao do rodape ("Entrar", "Voltar ao login") media 18 a 20 px de altura; alvo de 44 px. */
.dv-foot p a, .dv-foot > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
/* Selo técnico em mono, como no manual: CONEXÃO SEGURA · LGPD · v2.0 */
.dv-foot__selo {
font-family: var(--dv-fonte-num);
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--dv-texto-3);
}
.dv-legal {
margin-top: var(--dv-esp-4);
font: var(--dv-txt-corpo-sm);
font-size: 12px;
color: var(--dv-texto-3);
text-align: center;
line-height: 1.5;
}
/* turnstile/recaptcha centralizado */
.dv-captcha {
display: flex;
justify-content: center;
width: 100%;
min-width: 0;
margin-bottom: var(--dv-esp-4);
}
.dv-captcha .cf-turnstile { max-width: 100%; min-width: 0; }
/* Campo "cru" dentro do formulário (sem a classe .dv-input) ainda fica certo.
O :not(.dv-input) é OBRIGATÓRIO. Sem ele esta regra, que tem especificidade
bem mais alta, alcançava também os campos que JÁ têm .dv-input e reimpunha o
`padding` inteiro por cima do padding-left de 42px que abre espaço para o
ícone: o ícone de usuário ficava em cima da primeira letra do texto
(visível em produção em 07/08/2026, e anterior à troca de identidade). */
.dv-card input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not(.dv-btn):not(.dv-input),
.dv-card select:not(.dv-input),
.dv-card textarea:not(.dv-input) {
width: 100%;
padding: 13px 14px;
border: 1px solid var(--dv-campo-borda);
border-radius: var(--dv-raio-1);
font: var(--dv-txt-corpo);
font-family: var(--dv-fonte-ui);
color: var(--dv-texto);
background: var(--dv-campo);
transition: border-color var(--dv-mov-rapido), box-shadow var(--dv-mov-rapido);
margin: 0;
}
.dv-card input:not([type=checkbox]):not([type=radio]):not(.dv-input):focus,
.dv-card select:not(.dv-input):focus,
.dv-card textarea:not(.dv-input):focus {
outline: none;
border-color: var(--dv-ambar);
box-shadow: 0 0 0 3px var(--dv-ambar-veu);
}
.dv-card textarea { min-height: 90px; resize: vertical; }
/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
.dv-auth { grid-template-columns: 1fr; min-height: 100dvh; }
.dv-auth__brand { padding: var(--dv-esp-5) var(--dv-esp-5) var(--dv-esp-6); min-height: auto; }
.dv-auth__brand .dv-brand__mid,
.dv-auth__brand .dv-brand__ticks,
.dv-auth__brand .dv-brand__foot { display: none; }
.dv-brand__logo { height: 34px; }
.dv-auth__panel { padding: var(--dv-esp-6) 22px var(--dv-esp-7); align-items: flex-start; }
/* Sem o painel ao lado, o formulário precisa de um limite próprio. */
.dv-card {
max-width: 480px;
margin-left: auto;
margin-right: auto;
background: var(--dv-superficie-alta);
border: 1px solid var(--dv-borda);
border-radius: var(--dv-raio-2);
padding: var(--dv-esp-6) var(--dv-esp-5);
}
}
@media (max-width: 540px) {
.dv-auth,
.dv-auth__panel,
.dv-card,
.dv-card form { min-width: 0; max-width: 100%; }
.dv-auth__panel { padding-left: 12px; padding-right: 12px; }
.dv-card { padding: var(--dv-esp-5) var(--dv-esp-4); }
.dv-card__logo { display: block; }
.dv-auth__brand { padding: var(--dv-esp-4); }
}
@media (max-width: 340px) {
/* O Turnstile flexível preserva 300px. Estes gutters mantêm o desafio
inteiro visível até 320px, sem recorte nem rolagem horizontal. */
.dv-auth__panel { padding-left: 4px; padding-right: 4px; }
.dv-card { padding-left: 5px; padding-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
.dv-card, .dv-btn { animation: none !important; transition: none !important; }
}
/* ---------- Refinamentos (2026-08-30) — DENTRO do manual da marca (peca chapada) ----------
O manual (topo deste arquivo) e explicito: marca chapada, sem gradiente/brilho/
elevacao no botao, ambar em 3 lugares. Entao aqui so entram afordancias NEUTRAS
(nao mexem na marca): borda de hover nos campos e acento no icone do campo focado.
NENHUMA sombra/transform no botao (removido de proposito, era off-brand). */
.dv-input:hover:not(:focus),
.dv-card input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not(.dv-btn):not(.dv-input):hover:not(:focus),
.dv-card select:not(.dv-input):hover:not(:focus),
.dv-card textarea:not(.dv-input):hover:not(:focus) {
border-color: var(--dv-borda-forte);
}
.dv-input-wrap:focus-within .dv-input-ico { color: var(--dv-texto); }
/* ---------- Variacao de layout (2026-08-30): composicao mais coesa/moderna ----------
Mantem 100% a "Aplicacao 1" do manual (tela partida, grafite chapado, papel
morno, ambar em 3 lugares). Muda so o RITMO do painel da marca: em vez de
espalhar logo/manchete/diferenciais nos cantos (space-between), agrupa manchete
+ diferenciais num bloco unico centrado verticalmente, com a logo pinada no topo
e a assinatura no rodape. Le mais intencional/premium, sem nenhum efeito novo.
So afeta o desktop: no mobile (<=860px) mid/ticks/foot ja sao display:none. */
.dv-auth__brand { justify-content: flex-start; }
.dv-auth__brand .dv-brand__mid { margin-top: auto; }
.dv-auth__brand .dv-brand__ticks { margin-top: var(--dv-esp-6); }
.dv-auth__brand .dv-brand__foot { margin-top: auto; padding-top: var(--dv-esp-5); }
/* manchete com um pouco mais de presenca (ainda no tipo display do manual) */
.dv-brand__title { font-size: clamp(32px, 3.6vw, 46px); }
/* ---------- Icones dentro do campo + toggle (2026-08-30) ----------
BUG corrigido: estas regras existiam SO no index-inline.css (login). As paginas
via auth_layout.php (recuperar/redefinir) carregam so o denvo-auth.css, entao os