/* acesso.css · v10 — telas de entrar e sair, no molde do /login do painel de projetos:
   aurora + luz da página, monograma com halo, "Alavanca" em Fraunces, card de vidro de
   24px e botão dourado com reflexo. Só escuro (as duas telas abrem antes do tema do usuário).
   Compartilhado pelas duas views; antes cada uma tinha o próprio <style> duplicado. */
:root{
  color-scheme:dark;
  --page:#0A0A0A; --surface-0:#0F0F0F; --surface:#151515; --surface-2:#1C1C1C;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#F2EFE8; --ink-2:#B8B5AE; --ink-3:#8F8C86;
  --gold-0:#F6E4CC; --gold-2:#D4A574; --gold:#B4855D; --gold-3:#8C6843;
  --critical:#CD5C4E; --critical-ink:#EE8A7D;
  --glass-bg:linear-gradient(180deg,rgb(255 255 255 / .055),rgb(255 255 255 / .02)),rgb(21 21 21 / .72);
  --glass-border:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / .04) 40%,rgb(255 255 255 / .02));
  --e-out:cubic-bezier(.2,.7,.2,1); --e-in-out:cubic-bezier(.6,0,.2,1);
}
*{box-sizing:border-box}
html{background:var(--page)}
body{position:relative; z-index:0; margin:0; min-height:100svh; display:grid; place-items:center; padding:40px 18px;
  color:var(--ink); font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif; font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:0;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora i{position:absolute; display:block; border-radius:50%}
.aurora i:nth-child(1){width:78vmax; height:78vmax; left:-26vmax; top:-38vmax; background:radial-gradient(closest-side,rgb(180 133 93 / .2),rgb(180 133 93 / .05) 55%,transparent); animation:aa 48s var(--e-in-out) infinite alternate}
.aurora i:nth-child(2){width:64vmax; height:64vmax; right:-22vmax; top:-26vmax; background:radial-gradient(closest-side,rgb(90 147 176 / .12),rgb(90 147 176 / .03) 55%,transparent); animation:ab 64s var(--e-in-out) infinite alternate}
.aurora i:nth-child(3){width:70vmax; height:70vmax; right:-10vmax; bottom:-46vmax; background:radial-gradient(closest-side,rgb(140 104 67 / .15),rgb(140 104 67 / .03) 55%,transparent); animation:ac 80s var(--e-in-out) infinite alternate}
@keyframes aa{to{transform:translate3d(14vmax,8vmax,0) scale(1.12)}}
@keyframes ab{to{transform:translate3d(-12vmax,12vmax,0) scale(.92)}}
@keyframes ac{to{transform:translate3d(-18vmax,-10vmax,0) scale(1.1)}}

.wrap{position:relative; z-index:1; width:100%; max-width:384px; animation:rise 520ms var(--e-out) backwards}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}
.brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:30px}
.mark{width:64px; height:64px; margin-bottom:16px; filter:drop-shadow(0 0 22px rgba(180,133,93,.45))}
.mark .ma{stop-color:var(--gold-0)} .mark .mb{stop-color:var(--gold-2)} .mark .mc{stop-color:var(--gold-3)}
.brand h1{margin:0; font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:40px; line-height:1; letter-spacing:-.03em; color:var(--ink)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .brand h1{background:linear-gradient(180deg,#fff 0%,var(--ink) 45%,#CBC4B6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
}
.kicker{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.brand .kicker{margin-top:10px}

.card{position:relative; border-radius:24px; padding:26px 26px 24px; background:var(--glass-bg);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 1px 2px rgb(0 0 0 / .3),0 10px 60px -12px rgba(180,133,93,.35)}
.card::before{content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none; background:var(--glass-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude}
.card h2{margin:0 0 6px; font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:20px; letter-spacing:-.02em}
.sub{color:var(--ink-3); font-size:13.5px; line-height:1.55; margin:0 0 20px}

label.campo{display:block; margin:0 0 7px}
.lbl-2{margin-top:16px !important}
.field{position:relative}
input[type=password],input[type=text]{width:100%; padding:11px 44px 11px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface-0); color:var(--ink);
  font-size:16px;            /* 16px evita o zoom automático do iOS */
  font-family:inherit; transition:border-color .2s var(--e-out),box-shadow .2s var(--e-out)}
input[type=password]:focus,input[type=text]:focus{outline:none; border-color:var(--gold-3); box-shadow:0 0 0 3px rgba(180,133,93,.14)}
.olho{position:absolute; right:6px; top:50%; transform:translateY(-50%); display:grid; place-items:center; padding:8px; border:0; border-radius:8px;
  background:none; color:var(--ink-3); cursor:pointer}
.olho:hover{color:var(--gold-2)}
.olho:active{transform:translateY(-50%) scale(.92)}

.check{display:flex; align-items:flex-start; gap:9px; margin-top:16px; font-size:12.5px; line-height:1.45; color:var(--ink-3); cursor:pointer}
.check input{appearance:none; -webkit-appearance:none; flex:0 0 16px; width:16px; height:16px; margin:1px 0 0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:5px; background:var(--surface-0); display:grid; place-content:center;
  transition:border-color .2s var(--e-out),background .2s var(--e-out)}
.check input:checked{background:var(--gold); border-color:var(--gold)}
.check input:checked::after{content:""; width:9px; height:5px; margin-top:-2px; border:2px solid #1A1206; border-top:0; border-right:0; transform:rotate(-45deg)}
.check input:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
.check:hover{color:var(--ink-2)}

.btn-gold{position:relative; overflow:hidden; isolation:isolate; width:100%; margin-top:20px; padding:11px 16px; border:0; border-radius:999px;
  color:#1A1206; background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));
  font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.01em; cursor:pointer;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 1px 2px rgb(0 0 0 / .4);
  transition:filter .2s var(--e-out),box-shadow .36s var(--e-out),scale .12s var(--e-out)}
.btn-gold::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .55) 50%,transparent 70%); transform:translateX(-130%)}
.btn-gold:hover{filter:brightness(1.08); box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 0 24px -4px rgba(180,133,93,.7)}
.btn-gold:hover::after{transform:translateX(130%); transition:transform 750ms var(--e-out)}
.btn-gold:active{scale:.98}
.btn-gold:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}

.erro{margin:16px 0 0; padding:10px 13px; border-radius:12px; font-size:13px; line-height:1.45;
  background:rgba(205,92,78,.10); border:1px solid rgba(205,92,78,.4); color:var(--critical-ink)}
.voltar{display:block; margin-top:14px; text-align:center; font-size:13px; color:var(--ink-3); text-decoration:none}
.voltar:hover{color:var(--gold-2)}
.rodape{margin-top:22px; text-align:center; color:var(--ink-3); font-size:12px; line-height:1.6}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important}}