/*
    EB Money — telas de autenticação (Login, Esqueci a senha, Redefinir senha, Troca obrigatória)
    Usado só por Views/Shared/_LayoutAutenticacao.cshtml. Os tokens (--verde, --marfim...), o
    .eb-info e o #ebTip vêm de ebmoney-brand.css, carregado antes deste arquivo.
    Desenho aprovado no protótipo Mockups/autenticacao-v1.html (13/09/2026): painel verde com o
    guia de acesso e o monograma ao fundo; formulário sobre marfim. Sem gradiente (manual).
*/
.auth-body{margin:0;background:var(--marfim);color:var(--cinza);
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;}
.auth-body *{box-sizing:border-box;}

.auth{display:grid;grid-template-columns:minmax(360px,44%) 1fr;min-height:100vh;}

/* ------------------------------------------------------------ painel verde */
.auth-marca{background:var(--verde);color:var(--marfim);display:flex;flex-direction:column;justify-content:space-between;
  padding:2.6rem 3rem;position:relative;overflow:hidden;}
.auth-marca .auth-logo svg{height:38px;width:auto;display:block;}
.auth-marca .auth-logo, .auth-marca .auth-conteudo, .auth-marca .auth-rodape{position:relative;z-index:1;}
.auth-marca .auth-rodape{font-size:.78rem;color:var(--verde-claro);}

/* monograma centralizado no painel, atrás do guia (como na variante C do protótipo) */
.auth-monograma{position:absolute;left:50%;top:50%;width:62%;max-width:420px;transform:translate(-50%,-46%);opacity:.12;pointer-events:none;}
.auth-monograma svg{width:100%;height:auto;display:block;}
.auth-monograma svg path{fill:var(--marfim);}

.auth-marca .auth-plataforma{font-family:'Bitter',serif;font-weight:500;color:var(--marfim);margin:0 0 2rem 0;
  font-size:clamp(1.45rem, 2.2vw, 2rem);line-height:1.25;white-space:nowrap;}
.auth-guia{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.45rem;max-width:31rem;}
.auth-guia li{display:flex;gap:1rem;align-items:flex-start;}
.auth-guia .auth-ic{width:41px;height:41px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(245,241,232,.08);border:1px solid rgba(194,168,123,.45);}
.auth-guia .auth-ic svg{width:19px;height:19px;stroke:var(--dourado);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.auth-guia strong{display:block;font-size:1.05rem;font-weight:600;color:var(--marfim);margin-bottom:.2rem;}
.auth-guia .auth-guia-texto{display:block;font-size:.96rem;line-height:1.45;color:var(--verde-claro);}

/* ------------------------------------------------------------ formulário */
.auth-form{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem;}
.auth-caixa{width:100%;max-width:400px;}
.auth-logo-mobile{display:none;margin-bottom:1.6rem;}
.auth-logo-mobile svg{height:30px;width:auto;display:block;}

.auth-titulo{font-family:'Bitter',serif;font-weight:600;font-size:1.6rem;color:var(--verde);margin:0 0 .35rem 0;display:flex;align-items:center;}
.auth-titulo .eb-info{width:17px;height:17px;font-size:.68rem;}
.auth-sub{font-size:.86rem;color:var(--cinza-60);margin:0 0 1.6rem 0;}

.auth-campo{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.05rem;}
.auth-campo label{font-size:.78rem;font-weight:600;color:var(--cinza-60);display:flex;align-items:center;margin:0;}
.auth-entrada{position:relative;}
.auth-entrada input{width:100%;height:46px;border:1px solid var(--cinza-10);border-radius:8px;background:var(--white);
  padding:0 .85rem;font:inherit;font-size:.92rem;color:var(--cinza);transition:border-color .12s, box-shadow .12s;}
.auth-entrada input:focus{outline:none;border-color:var(--verde-40);box-shadow:0 0 0 3px var(--verde-claro);}
.auth-entrada input.input-validation-error{border-color:var(--vermelho);}
.auth-entrada input.auth-com-olho{padding-right:2.8rem;}
.auth-olho{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:36px;height:36px;border:none;background:none;
  color:var(--cinza-40);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0;}
.auth-olho:hover{color:var(--verde);background:var(--marfim-70);}
.auth-olho svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.auth-olho .auth-olho-fechado{display:none;}
.auth-olho.aberto .auth-olho-aberto{display:none;}
.auth-olho.aberto .auth-olho-fechado{display:block;}

/* mensagens do jquery.validate.unobtrusive e do servidor, por campo */
.auth-campo .field-validation-error, .auth-erro-campo{font-size:.76rem;color:var(--vermelho);}
.auth-campo .field-validation-valid{display:none;}
.auth-erro-campo ul{margin:.15rem 0 0 1rem;padding:0;}
.auth-caps{display:none;font-size:.76rem;color:var(--morno);background:var(--dourado-10);border:1px solid var(--dourado-60);border-radius:6px;padding:.35rem .55rem;}
.auth-caps.visivel{display:block;}

.auth-linha{display:flex;justify-content:space-between;align-items:center;margin:.2rem 0 1.4rem 0;font-size:.84rem;gap:.8rem;flex-wrap:wrap;}
.auth-check{display:flex;align-items:center;gap:.45rem;cursor:pointer;color:var(--cinza-60);margin:0;font-weight:400;}
.auth-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--verde);margin:0;}
.auth-link{color:var(--verde);font-weight:600;text-decoration:none;font-size:.84rem;}
.auth-link:hover, .auth-link:focus{text-decoration:underline;color:var(--verde);}
.auth-voltar{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.3rem;}
.auth-voltar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.auth-btn{width:100%;height:46px;border:none;border-radius:8px;background:var(--verde);color:var(--marfim);font:inherit;font-weight:600;font-size:.92rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem;transition:background .12s;}
.auth-btn:hover{background:#294F3F;}
.auth-btn[disabled]{opacity:.75;cursor:progress;}
.auth-giro{width:16px;height:16px;border:2px solid rgba(245,241,232,.35);border-top-color:var(--marfim);border-radius:50%;animation:auth-giro .8s linear infinite;display:none;}
.auth-btn.carregando .auth-giro{display:inline-block;}
@keyframes auth-giro{to{transform:rotate(360deg);}}

.auth-alerta{display:flex;gap:.55rem;align-items:flex-start;padding:.75rem .9rem;border-radius:8px;font-size:.84rem;font-weight:500;margin-bottom:1.2rem;line-height:1.4;}
.auth-alerta svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.auth-alerta.erro{background:var(--vermelho-bg);color:var(--vermelho);border:1px solid #E0B8AC;}
.auth-alerta.ok{background:var(--verde-ok-bg);color:var(--verde-ok);border:1px solid #BCD9C6;}
.auth-alerta ul{margin:0;padding:0 0 0 1rem;}
.auth-alerta a{color:inherit;font-weight:600;}

.auth-seguro{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--cinza-10);font-size:.74rem;color:var(--cinza-40);display:flex;align-items:center;gap:.4rem;justify-content:center;}
.auth-seguro svg{width:14px;height:14px;stroke:var(--verde-80);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ------------------------------------------------------------ celular: some o painel, fica o formulário */
@media (max-width: 820px){
  .auth{grid-template-columns:1fr;}
  .auth-marca{display:none;}
  .auth-logo-mobile{display:block;}
  .auth-form{align-items:flex-start;padding:2.6rem 1.4rem;}
}

/* Cadastro da chave (21/09/2026): o anel do mockup, sem campo para digitar */
.auth-chave{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:.6rem 0 1.2rem;text-align:center;}
.auth-chave .anel{width:84px;height:84px;border-radius:50%;border:2px solid var(--verde-40, #ACBEB7);display:flex;align-items:center;justify-content:center;color:var(--verde, #2F5D4A);animation:auth-pulso 1.6s ease-in-out infinite;}
.auth-chave .anel svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.auth-chave .dica{font-size:.84rem;color:var(--cinza-60);line-height:1.45;max-width:34ch;}
@keyframes auth-pulso{0%,100%{box-shadow:0 0 0 0 rgba(47,93,74,.25)}50%{box-shadow:0 0 0 12px rgba(47,93,74,0)}}
@media (prefers-reduced-motion:reduce){.auth-chave .anel{animation:none;}}