/* =========================================================================
   Login — identidade Sodivel (navy + dourado) sobre um fundo vivo.
   Tudo local: sem CDN, sem webfont, sem biblioteca.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#04101E;color:#E8F0F7;overflow:hidden;
  font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- fundo animado ---------------------------------------------- */
.bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(140% 110% at 50% 0%,#0B2743 0%,#061729 55%,#04101E 100%)}
.bg__grid{position:absolute;inset:-40%;opacity:.5;
  background-image:linear-gradient(rgba(140,190,240,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,190,240,.05) 1px,transparent 1px);
  background-size:58px 58px;animation:deriva 90s linear infinite}
.bg__blob{position:absolute;border-radius:50%;filter:blur(100px);mix-blend-mode:screen}
.bg__blob--a{width:56vw;height:56vw;background:#1B6BB5;opacity:.45;top:-18%;left:-12%;animation:orbita-a 26s ease-in-out infinite}
.bg__blob--b{width:46vw;height:46vw;background:#C9992F;opacity:.32;bottom:-22%;right:-12%;animation:orbita-b 32s ease-in-out infinite}
.bg__blob--c{width:38vw;height:38vw;background:#0E9A9A;opacity:.28;top:32%;left:52%;animation:orbita-c 38s ease-in-out infinite}
.bg__net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.bg__net line{stroke:rgba(150,205,255,.22);stroke-width:1}
.bg__net circle{fill:#8FD6FF}
.bg__net .pulso{animation:pulsa 4.2s ease-in-out infinite}
.bg__veu{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 48%,transparent 0%,rgba(4,16,30,.72) 100%)}

@keyframes deriva{to{transform:translate3d(58px,58px,0)}}
@keyframes orbita-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes orbita-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,-6vh) scale(1.16)}}
@keyframes orbita-c{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,8vh) scale(.88)}}
@keyframes pulsa{0%,100%{opacity:.25;r:2.5}50%{opacity:1;r:4}}

/* ---------- cartão ------------------------------------------------------ */
.tela{position:relative;z-index:1;min-height:100%;display:grid;place-items:center;padding:24px}
.cartao{position:relative;width:min(408px,100%);padding:34px 34px 28px;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.975);color:#0D1B2A;
  box-shadow:0 34px 90px rgba(2,10,20,.6),0 0 0 1px rgba(255,255,255,.14);
  /* sem fill-mode: se a animação não rodar, o cartão fica na posição natural
     (centralizado) em vez de travar no primeiro quadro deslocado */
  animation:entra .5s cubic-bezier(.2,.8,.25,1)}
.cartao::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#A97A18,#E3B551,#C9992F)}
@keyframes entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.cartao__marca{display:grid;justify-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid #E6EBF1}
.cartao__marca img{width:132px}
.cartao__marca span{color:#5B7186;font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}

.campo{display:block;margin-top:16px}
.campo>span{display:block;margin-bottom:6px;color:#43586F;font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.campo__box{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid #DDE4EC;
  border-radius:11px;background:#F8FAFC;transition:border-color .16s,box-shadow .16s,background .16s}
.campo__box:focus-within{border-color:#2A83D4;background:#fff;box-shadow:0 0 0 3px rgba(42,131,212,.15)}
.campo__box svg{width:17px;height:17px;flex:none;color:#8496A8;stroke-width:1.8}
.campo__box input{width:100%;border:0;outline:0;background:transparent;font-size:14.5px}
.campo__box input::placeholder{color:#A9B7C6}
.olho{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;
  background:transparent;color:#8496A8;cursor:pointer}
.olho:hover{background:#EDF2F7;color:#43586F}

.entrar{position:relative;width:100%;height:48px;margin-top:22px;border:0;border-radius:11px;overflow:hidden;
  background:linear-gradient(135deg,#123A61,#0D2946);color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:transform .16s,box-shadow .16s}
.entrar:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(13,41,70,.3)}
.entrar:active{transform:none}
.entrar span{display:inline-flex;align-items:center;gap:9px}
.entrar svg{width:16px;height:16px;stroke-width:2}
.entrar[disabled]{cursor:progress}
.entrar__brilho{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(227,181,81,.55),transparent);
  transform:translateX(-100%)}
.entrar.is-loading .entrar__brilho{animation:varre 1.05s linear infinite}
@keyframes varre{to{transform:translateX(100%)}}

.pontos{display:inline-flex;gap:4px}
.pontos i{width:5px;height:5px;border-radius:99px;background:currentColor;opacity:.45;animation:salta 1.1s ease-in-out infinite}
.pontos i:nth-child(2){animation-delay:.14s}
.pontos i:nth-child(3){animation-delay:.28s}
@keyframes salta{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* varredura sobre o cartão enquanto autentica */
.cartao.is-loading::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#E3B551,transparent);animation:scan 1.15s ease-in-out infinite}
@keyframes scan{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

.erro{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:10px 12px;border-radius:10px;
  background:#FBEAE9;border:1px solid #F1CFCD;color:#8E2F2A;font-size:12.5px;line-height:1.45}
.erro svg{width:15px;height:15px;flex:none;margin-top:1px;stroke-width:2}
.cartao.is-erro{animation:treme .38s ease}
@keyframes treme{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.rodape{margin-top:20px;padding-top:16px;border-top:1px solid #E6EBF1;
  display:flex;align-items:center;gap:8px;color:#7E90A4;font-size:11px}
.selo{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  border:1px solid #E7D6A6;background:#FBF4E2;color:#A97A18;font-size:10.5px;font-weight:700}
.selo i{width:6px;height:6px;border-radius:99px;background:#C9992F}
.rodape b{margin-left:auto;color:#5B7186;font-weight:600}

@media (max-width:460px){
  .cartao{padding:26px 22px 22px}
  .cartao__marca img{width:112px}
}
@media (prefers-reduced-motion:reduce){
  .bg__grid,.bg__blob,.bg__net .pulso,.entrar.is-loading .entrar__brilho,
  .cartao,.cartao.is-loading::after,.pontos i,.cartao.is-erro{animation:none!important}
}