/* Complya — tela de login (efeitos). Carrega depois de complya.css. */
.auth-body{ margin:0; }
.auth-split{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; min-height:100dvh; }

.auth-brand{ position:relative; overflow:hidden; color:#EAFBF6; padding:48px 52px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(155deg,#0B5853,#0F766E 48%,#11827A); }
.auth-brand>*{ position:relative; z-index:2; }
.auth-brand .blob{ position:absolute; z-index:1; border-radius:50%; filter:blur(46px); opacity:.55; }
.auth-brand .b1{ width:360px; height:360px; background:#22D3B7; top:-80px; right:-60px; animation:floaty 16s ease-in-out infinite; }
.auth-brand .b2{ width:300px; height:300px; background:#0EA5A0; bottom:-90px; left:-40px; animation:floaty 20s ease-in-out infinite reverse; }
.auth-brand .b3{ width:200px; height:200px; background:#5EEAD4; top:42%; left:56%; opacity:.32; animation:floaty 13s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-18px,22px) scale(1.08);} }
.auth-brand .logo{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:22px; color:#fff; }
.auth-brand .logo .dot{ width:15px; height:15px; border-radius:5px; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.22); }
.auth-brand .headline{ font-family:var(--display); font-size:34px; line-height:1.16; max-width:18ch; margin:0; color:#fff; letter-spacing:-.02em; }
.auth-brand .lede{ color:#CFF5EC; max-width:34ch; margin-top:14px; font-size:15px; }
.auth-points{ display:grid; gap:14px; }
.auth-point{ display:flex; align-items:center; gap:12px; font-size:14px; color:#EAFBF6; }
.auth-point .pic{ width:36px; height:36px; flex:none; border-radius:10px; background:rgba(255,255,255,.14); display:grid; place-items:center; }
.auth-point .pic svg{ width:18px; height:18px; }
.auth-brand .foot{ font-size:12.5px; color:#A7E6DA; }

/* painel do formulário — tudo centralizado e com a MESMA largura */
.auth-panel{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px;
  background:radial-gradient(820px 480px at 78% -8%, var(--primary-050), var(--bg)); }
.auth-form, .otp-resend, .otp-cancel{ display:block; width:100%; max-width:392px; margin-left:auto; margin-right:auto; }
.auth-form{ animation:rise .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
.auth-form .logo-sm{ display:none; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); margin-bottom:18px; }
.auth-form .logo-sm .dot{ width:13px; height:13px; border-radius:4px; background:var(--primary); box-shadow:0 0 0 3px var(--primary-100); }
.auth-form h1{ font-size:27px; margin:0 0 4px; }
.auth-form .sub{ color:var(--text-dim); font-size:14px; margin:0 0 24px; }
.control{ position:relative; }
.control.with-icon .ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-mute); pointer-events:none; }
.control.with-icon input{ padding-left:40px; }
.control .pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent; border:0; padding:8px; color:var(--text-mute); cursor:pointer; border-radius:8px; }
.control .pw-toggle:hover{ color:var(--text); background:var(--surface-2); }
.control .pw-toggle svg{ width:18px; height:18px; }

/* ===== Botões padronizados: mesma largura/altura, mesmo fundo, texto branco ===== */
.btn-auth{ width:100%; height:48px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:#fff; border:0; border-radius:var(--r-sm); font-weight:600; font-size:14px; cursor:pointer;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--primary),#13938A); box-shadow:0 8px 20px rgba(15,118,110,.28);
  transition:transform .15s ease, box-shadow .15s ease; }
.btn-auth:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(15,118,110,.36); }
.btn-auth:active{ transform:translateY(0); }
.btn-auth::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); }
.btn-auth:hover::after{ animation:shine .8s ease; }
@keyframes shine{ to{ left:140%; } }

.auth-foot{ margin-top:18px; text-align:center; font-size:13px; color:var(--text-mute); }

/* ===== MFA / OTP ===== */
.otp-input{ text-align:center; font-size:22px; letter-spacing:.4em; font-family:var(--mono); padding-left:12px; }
.otp-timer{ text-align:center; font-size:13px; color:var(--text-dim); margin:2px 0 14px; }
.otp-timer strong{ font-family:var(--mono); color:var(--text); }
.otp-timer.expired{ color:var(--bad); font-weight:600; }
.otp-resend{ margin-top:10px; }
.otp-cancel{ margin-top:10px; }

@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .auth-form .logo-sm{ display:flex; }
}
@media (prefers-reduced-motion: reduce){
  .auth-brand .blob{ animation:none; } .auth-form{ animation:none; } .btn-auth:hover::after{ animation:none; }
}