/* VModiq - telas de autenticacao (login, esqueci a senha, nova senha). Mesma estrutura do
   vOmni/VMetriq/VesteQual, com a identidade VModiq (marca/VModiq-Proposta.png: tinta, azul,
   violeta e agua; Inter). Escopo: body.vm-auth (nao afeta o painel). */

body.vm-auth{
  --vm-tinta:#0F1429;--vm-tinta-2:#171D3A;--vm-azul:#2681FF;--vm-violeta:#6543E9;--vm-agua:#33E2C3;--vm-agua-2:#09B3C1;
  --vm-fundo:#F6F8FC;--vm-surface:#FFF;--vm-text:#0F1429;--vm-muted:#58627A;--vm-border:#E1E6F0;
  --vm-negative:#B42318;--vm-negative-bg:#FFF0ED;--vm-positive:#087A58;--vm-positive-bg:#E8F8F1;
  --vm-warning:#8F4E00;--vm-warning-bg:#FFF5D6;
  --vm-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  margin:0;min-height:100vh;min-height:100dvh;background:var(--vm-fundo);-webkit-text-size-adjust:100%;text-size-adjust:100%;color:var(--vm-text);font:400 16px/1.5 var(--vm-font);-webkit-font-smoothing:antialiased;
}
body.vm-auth *{box-sizing:border-box}
body.vm-auth :focus-visible{outline:3px solid var(--vm-agua);outline-offset:3px}

/* Estrutura: painel da marca | formulario */
.vm-auth .vm-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(420px,1fr) minmax(460px,1fr)}
/* Fundo da marca: só no painel da esquerda; no celular (abaixo) vira o fundo da tela inteira */
.vm-auth .vm-brand{
  background:
    radial-gradient(ellipse 70% 55% at 90% 105%,rgba(101,67,233,.34) 0%,rgba(101,67,233,0) 70%),
    radial-gradient(ellipse 55% 45% at 0% 0%,rgba(38,129,255,.22) 0%,rgba(38,129,255,0) 70%),
    radial-gradient(ellipse 30% 25% at 88% 12%,rgba(51,226,195,.16) 0%,rgba(51,226,195,0) 70%),
    linear-gradient(160deg,var(--vm-tinta-2) 0%,var(--vm-tinta) 100%);
}
.vm-auth .vm-brand{position:relative;overflow:hidden;color:#FFF;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
/* Peças modulares (o paralelogramo agua do simbolo) ao fundo */
.vm-auth .vm-brand::after{content:"";position:absolute;right:-60px;top:20%;width:220px;height:64px;pointer-events:none;opacity:.06;
  background:linear-gradient(90deg,var(--vm-agua-2),var(--vm-agua));transform:skewX(-28deg);border-radius:14px}
.vm-auth .vm-brand > *{position:relative;z-index:1}
.vm-auth .vm-brand__logo img{width:190px;height:auto;display:block}
.vm-auth .vm-brand__kicker{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vm-agua)}
.vm-auth .vm-brand__copy h2{margin:0;font-weight:700;font-size:clamp(32px,3.2vw,44px);line-height:1.12;letter-spacing:-.025em;max-width:500px}
.vm-auth .vm-brand__copy p{margin:18px 0 0;max-width:430px;color:#C3CAE0;font-size:16px;line-height:1.6}
.vm-auth .vm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.vm-auth .vm-chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.05);font-size:13px;color:#FFF}
.vm-auth .vm-chips li::before{content:"";width:10px;height:7px;border-radius:2px;background:linear-gradient(90deg,var(--vm-agua-2),var(--vm-agua));transform:skewX(-28deg)}
.vm-auth .vm-brand__foot{font-size:13px;color:#9AA3BF;display:flex;flex-wrap:wrap;gap:6px 18px}

.vm-auth .vm-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:24px}
.vm-auth .vm-main__logo{display:none}
.vm-auth .vm-main__foot{display:none;font-size:13px;color:var(--vm-muted);text-align:center}

/* Neutraliza o visual antigo do .login-page / .login-card do app.css */
.vm-auth .login-page{min-height:0;padding:0;background:none;display:block}
.vm-auth .login-page::before,.vm-auth .login-card::before{content:none}
.vm-auth .login-logo{display:none}
.vm-auth .login-card{width:100%;max-width:420px;background:var(--vm-surface);border:1px solid var(--vm-border);border-radius:16px;padding:40px;box-shadow:0 4px 16px rgba(15,20,41,.04),0 24px 48px -24px rgba(15,20,41,.20)}
.vm-auth .login-title{margin:0;text-align:left;font-family:var(--vm-font);font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--vm-text)}
.vm-auth .login-subtitle{margin:8px 0 28px;text-align:left;font-size:15px;color:var(--vm-muted)}

/* Campos e botao (componentes do app, restilizados so aqui) */
.vm-auth .form-group{margin-bottom:18px;display:grid;gap:6px}
.vm-auth .form-label{font-size:14px;font-weight:600;color:var(--vm-text);margin:0}
.vm-auth .form-label span{color:var(--vm-negative)!important}
.vm-auth .form-input{width:100%;min-height:46px;padding:11px 14px;background:var(--vm-surface);color:var(--vm-text);border:1px solid var(--vm-border);border-radius:10px;font:400 15px/1.4 var(--vm-font);box-shadow:none;transition:border-color .15s,box-shadow .15s}
.vm-auth .form-input::placeholder{color:#8E97AD}
.vm-auth .form-input:hover{border-color:#C9D1E2}
.vm-auth .form-input:focus{outline:none;border-color:var(--vm-azul);box-shadow:0 0 0 4px rgba(38,129,255,.18)}
.vm-auth .btn{font-family:var(--vm-font)}
.vm-auth .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border:0;border-radius:10px;background:linear-gradient(120deg,var(--vm-azul) 0%,var(--vm-violeta) 100%);color:#FFF;font-size:16px;font-weight:700;letter-spacing:0;box-shadow:0 8px 20px -10px rgba(101,67,233,.6);text-transform:none;cursor:pointer;transition:filter .15s,transform .15s}
.vm-auth .btn-primary:hover{filter:brightness(1.06);color:#FFF}
.vm-auth .btn-primary:active{transform:translateY(1px)}
.vm-auth .login-card a[href*="forgot-password"]{color:var(--vm-violeta)!important;font-weight:600;font-size:14px!important;text-decoration:underline;text-decoration-color:rgba(101,67,233,.35);text-underline-offset:3px}
.vm-auth .login-card a[href$="/login"]{color:var(--vm-muted)!important;font-size:14px!important}
.vm-auth .login-card a[href*="forgot-password"],.vm-auth .login-card a[href$="/login"]{display:inline-block;padding:10px 0;line-height:24px}

/* Alertas */
.vm-auth .alert{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px 14px;margin:0 0 20px;font-size:14px;line-height:1.45;border:1px solid transparent}
.vm-auth .alert-error{background:var(--vm-negative-bg);color:var(--vm-negative);border-color:#FECDCA}
.vm-auth .alert-success{background:var(--vm-positive-bg);color:var(--vm-positive);border-color:#ABEFC6}
.vm-auth .alert-warning{background:var(--vm-warning-bg);color:var(--vm-warning);border-color:#FEDF89}
.vm-auth .alert-info{background:#EEF3FF;color:#2349A8;border-color:#C9D7FB}

/* "Manter conectado" + "Esqueci minha senha" */
.vm-auth .vm-login-row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:-4px 0 12px}
.vm-auth .vm-remember{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--vm-text);cursor:pointer}
.vm-auth .vm-remember input{width:18px;height:18px;margin:0;accent-color:var(--vm-violeta);cursor:pointer}

/* Telas medias: painel da marca mais estreito */
@media (max-width:1100px){
  .vm-auth .vm-shell{grid-template-columns:minmax(360px,.9fr) minmax(420px,1fr)}
  .vm-auth .vm-brand{padding:40px}
}
/* Celular e tablet em pe: fundo da marca em tela cheia, card por cima */
@media (max-width:860px){
  .vm-auth .vm-shell{display:block;
    background:
      radial-gradient(ellipse 90% 45% at 85% 105%,rgba(101,67,233,.34) 0%,rgba(101,67,233,0) 70%),
      radial-gradient(ellipse 70% 35% at 0% 0%,rgba(38,129,255,.22) 0%,rgba(38,129,255,0) 70%),
      linear-gradient(160deg,var(--vm-tinta-2) 0%,var(--vm-tinta) 100%)}
  .vm-auth .vm-brand{display:none}
  .vm-auth .vm-main{min-height:100vh;min-height:100dvh;padding:max(32px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}
  .vm-auth .vm-main__logo{display:block}
  .vm-auth .vm-main__logo img{width:170px;height:auto;display:block}
  .vm-auth .login-card{padding:28px 22px}
  .vm-auth .login-title{font-size:24px}
  .vm-auth .vm-main__foot{display:block;line-height:1.4;color:#9AA3BF}
  .vm-auth .form-input{font-size:16px;min-height:48px}
}
@media (max-width:480px){
  .vm-auth .vm-main{padding-top:max(24px,env(safe-area-inset-top));gap:20px}
  .vm-auth .login-card{padding:24px 18px;border-radius:14px}
  .vm-auth .login-title{font-size:22px}
  .vm-auth .login-subtitle{font-size:14px;margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){.vm-auth *,.vm-auth *::before,.vm-auth *::after{transition:none!important;animation:none!important}}