/* Tela de login (layout v3, aprovado em 03/11/2026): um CSS só para todas as empresas. Cores vêm do theme-<slug>.css que o hub já usa;
   logo e elemento da marca (razões de proporção) vêm de login-<slug>.css. Fonte, escala e neutros vêm do base.css.
   Regras de proporção do Designer, sem alteração: altura da logo = sqrt(área / razão); elemento com a mesma área para todas e sangria de 8%. */
:root{
  --sp-7:3rem; --sp-8:4rem; --r-1:var(--radius-sm); --h-campo:2.75rem;
  --logo-ratio:4;--mark-ratio:1;   /* padrão para empresa sem login-<slug>.css */
  --logo-area:14000; --logo-area-m:7200;
  --mark-area:150000; --mark-area-m:30000; --mark-bleed:.08; --mark-opacity:.06;
}
body.login-v3{background:var(--card);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.login-v3 h1,.login-v3 h2,.login-v3 h3,.login-v3 p{margin:0}
.login-v3 h1{letter-spacing:-.01em}
.login-v3 a{color:inherit}
.login-v3 .label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-medium)}
.login-v3 .small{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-regular)}

/* layout da tela: idêntico para todas as empresas */
.login-v3 .login{display:grid;grid-template-columns:44fr 56fr;min-height:100vh}

/* painel da marca */
.login-v3 .marca{position:relative;overflow:hidden;background:var(--brand-primary);color:var(--on-primary);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:var(--sp-8)}
.login-v3 .marca .logo{display:block;position:relative;z-index:1;
  height:calc(sqrt(var(--logo-area) / var(--logo-ratio)) * 1px);width:auto}
.login-v3 .marca .mark{position:absolute;z-index:0;
  height:calc(sqrt(var(--mark-area) / var(--mark-ratio)) * 1px);width:auto;
  right:calc(sqrt(var(--mark-area) * var(--mark-ratio)) * var(--mark-bleed) * -1px);
  bottom:calc(sqrt(var(--mark-area) / var(--mark-ratio)) * var(--mark-bleed) * -1px);opacity:var(--mark-opacity);pointer-events:none;user-select:none}
.login-v3 .marca .texto{position:relative;z-index:1;max-width:22rem}
.login-v3 .marca .texto h2{color:var(--on-primary)}
.login-v3 .marca .texto p{margin-top:var(--sp-2);color:var(--on-primary-soft)}

/* formulário */
.login-v3 .lado-form{display:flex;flex-direction:column;padding:var(--sp-6) var(--sp-8)}
.login-v3 .lado-form .centro{flex:1;display:flex;align-items:center;justify-content:center}
.login-v3 form{width:100%;max-width:var(--w-form)}
.login-v3 .dominio{display:block;color:var(--text-2);margin-bottom:var(--sp-3)}
.login-v3 form h1{color:var(--text)}
.login-v3 form .sub{margin-top:var(--sp-2);color:var(--text-2)}
.login-v3 .campos{margin-top:var(--sp-6);display:grid;gap:var(--sp-4)}
.login-v3 .campo label{display:block;margin-bottom:var(--sp-2);color:var(--text)}
.login-v3 .campo input{width:100%;height:var(--h-campo);padding:0 var(--sp-4);font:inherit;font-size:var(--fs-body);color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-1);outline:none;transition:border-color .15s,box-shadow .15s}
.login-v3 .campo input:focus{border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--brand-accent-soft)}
.login-v3 .entrar{margin-top:var(--sp-5);width:100%;height:var(--h-campo);border:0;border-radius:var(--r-1);cursor:pointer;
  font:inherit;font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:.01em;
  background:var(--brand-accent);color:var(--on-accent);transition:background .15s}
.login-v3 .entrar:hover{background:var(--brand-accent-dark)}
.login-v3 .entrar:focus-visible{outline:3px solid var(--brand-accent-soft);outline-offset:2px}
.login-v3 .ajuda{margin-top:var(--sp-4);color:var(--text-2);text-align:center}
.login-v3 .rodape{display:flex;justify-content:space-between;gap:var(--sp-4);color:var(--text-2)}

/* mensagem de erro (mesmo texto de antes, no layout novo) */
.login-v3 .alerta{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--err-bg);color:var(--err);border:1px solid var(--err-line);border-radius:var(--r-1)}
.login-v3 .alerta::before{content:"Atenção: ";font-weight:var(--fw-semibold)}

/* mostrar/esconder senha: o botão só aparece com JavaScript (senha.js tira o hidden); o texto digitado nunca fica sob o ícone */
.login-v3 .campo-senha{position:relative}
.login-v3 .campo-senha input{padding-right:calc(var(--h-campo) + var(--sp-1))}
.login-v3 .olho{position:absolute;top:1px;right:1px;width:calc(var(--h-campo) - 2px);height:calc(var(--h-campo) - 2px);padding:0;display:grid;place-items:center;
  background:transparent;border:0;border-radius:calc(var(--r-1) - 1px);color:var(--brand-titulo,var(--brand-primary));cursor:pointer}   /* dentro da borda do campo (1px), 42x42: sem fundo em nenhum estado. Cor: --brand-titulo (texto do tema; padrão --brand-primary, então WF e Disbrafix não mudam; num tema de primária clara, como o da Pro, o tema define uma cor escura) */
.login-v3 .olho svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.login-v3 .olho:focus-visible{outline:2px solid var(--brand-accent);outline-offset:-3px}
.login-v3 .olho[aria-pressed="false"] .i-ocultar,.login-v3 .olho[aria-pressed="true"] .i-mostrar{display:none}

/* mobile */
@media (max-width:760px){
  .login-v3 .login{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login-v3 .marca{padding:var(--sp-6) var(--sp-5);min-height:236px;gap:var(--sp-6)}
  .login-v3 .marca .logo{height:calc(sqrt(var(--logo-area-m) / var(--logo-ratio)) * 1px)}
  .login-v3 .marca .mark{height:calc(sqrt(var(--mark-area-m) / var(--mark-ratio)) * 1px);
    right:calc(sqrt(var(--mark-area-m) * var(--mark-ratio)) * var(--mark-bleed) * -1px);
    bottom:calc(sqrt(var(--mark-area-m) / var(--mark-ratio)) * var(--mark-bleed) * -1px)}
  .login-v3 .marca .texto h2{font-size:var(--fs-h3);line-height:var(--lh-h3)}
  .login-v3 .marca .texto p{margin-top:var(--sp-1)}
  .login-v3 .lado-form{padding:var(--sp-6) var(--sp-5) var(--sp-5)}
  .login-v3 .lado-form .centro{align-items:flex-start}
  .login-v3 .rodape{margin-top:var(--sp-6);flex-direction:column;gap:var(--sp-1);text-align:center}
}