* { box-sizing: border-box; }
html, body { margin:0; padding:0; width:100%; height:100%; font-family:'Inter',sans-serif; }
body { position:relative; overflow:hidden; background: linear-gradient(135deg, var(--kw24-navy-escuro) 0%, var(--kw24-azul) 50%, var(--kw24-teal) 100%); }
#kw24-bg-login { position:absolute; inset:0; z-index:0; display:block; }

.stage { position:relative; z-index:2; width:100%; height:100vh; display:flex; align-items:center; gap:6vw; padding-left:7vw; }
.screen { display:flex; flex-direction:column; transition: opacity .32s ease, transform .32s ease; }
/* Navegação entre páginas de login/recuperar-senha (ver assets/js/nav-fade.js) — some antes de
   trocar de página de verdade, pra não ser um corte seco. Um pouco mais lenta de propósito que o
   fade de troca de etapa dentro da mesma página. */
.screen.saindo { opacity:0; transform:translateY(10px); }
.cap { font-size:12px; font-weight:500; color:rgba(244,252,255,0.85); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.ghost-btn { width:100%; background:transparent; color:var(--kw24-navy); font-family:'Rubik',sans-serif; font-weight:500; font-size:14px; padding:11px; border:1px solid rgba(3,49,64,0.25); border-radius:8px; cursor:pointer; margin-top:10px; }

.login-card { width:390px; height:500px; display:flex; flex-direction:column; justify-content:flex-start; background:var(--kw24-gelo); border-radius:16px; padding:2.25rem 2.1rem; box-shadow:0 24px 60px rgba(3,25,32,0.35); }
.login-card img.logo { height:42px; width:auto; align-self:flex-start; margin-bottom:1.6rem; display:block; }

.login-card--recover .subtitle { margin-bottom:2.4rem; }
.login-card--recover .field { margin-bottom:1.8rem; }
.login-card--recover button.cta { margin-top:0.4rem; }
.login-card--recover .ghost-btn { margin-top:0.9rem; }
h1 { font-family:'Rubik',sans-serif; font-weight:700; font-size:24px; color:var(--kw24-navy); margin:0 0 4px; }
.subtitle { font-size:14px; color:var(--kw24-teal); margin:0 0 1.6rem; }
.alert-top { background:var(--kw24-erro-bg); color:var(--kw24-erro-texto); font-size:13px; font-weight:500; padding:10px 12px; border-radius:8px; margin-bottom:1.2rem; }

/* Linha Cancelar/Continuar aqui do aviso de sessão ativa em outro dispositivo — os botões
   continuam .ghost-btn/.cta normalmente (largura 100%) em qualquer outro lugar; aqui dividem a
   linha só dentro deste wrapper. */
.confirm-row { display:flex; gap:10px; margin-top:1.4rem; }
.confirm-row .ghost-btn, .confirm-row .cta { width:auto; flex:1; margin-top:0; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; }
label.field { display:block; font-size:13px; font-weight:500; color:var(--kw24-navy); margin-bottom:1rem; }
.field .box { display:flex; align-items:center; gap:8px; border:1px solid rgba(3,49,64,0.18); border-radius:8px; padding:10px 12px; margin-top:6px; background:var(--kw24-branco); }
.field .box input { border:none; outline:none; font-size:14px; color:var(--kw24-navy); flex:1; background:transparent; font-family:'Inter',sans-serif; }
.field .box input::placeholder { color:#9db3ba; }
.field .box input:-webkit-autofill,
.field .box input:-webkit-autofill:hover,
.field .box input:-webkit-autofill:focus,
.field .box input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--kw24-branco) inset;
  box-shadow: 0 0 0 30px var(--kw24-branco) inset;
  -webkit-text-fill-color: var(--kw24-navy);
  caret-color: var(--kw24-navy);
  transition: background-color 5000s ease-in-out 0s;
}
.icon { width:16px; height:16px; flex-shrink:0; color:var(--kw24-teal); }
.icon-toggle { cursor:pointer; }
.icon-toggle.icon-toggle-active { color:var(--kw24-azul); }
.row-end { text-align:right; font-size:12px; margin:-0.3rem 0 1.4rem; }
.row-end a { color:var(--kw24-azul); font-weight:500; text-decoration:none; }
button.cta { width:100%; background:var(--kw24-azul); color:var(--kw24-navy); font-family:'Rubik',sans-serif; font-weight:700; font-size:15px; padding:12px; border:none; border-radius:8px; cursor:pointer; }
button.cta:hover { background:var(--kw24-azul-hover); }
.trust { display:flex; align-items:center; gap:6px; font-size:11px; color:#7195a0; margin-top:1.2rem; }
.trust .icon { color:var(--kw24-verde); }

/* Troca de etapa em recuperar-senha.php (identificar -> código) — mesmo nível de sutileza do
   .screen-panel do shell (base-shell.css: transform .35s ease, opacity .3s ease), só que mais
   rápido por ser um swap pequeno dentro de um card, não uma tela inteira. */
#etapaIdentificar, #etapaCodigo { transition: opacity .2s ease, transform .2s ease; }
#etapaIdentificar.etapa-saindo, #etapaCodigo.etapa-saindo { opacity:0; transform: translateY(-6px); }
#etapaIdentificar.etapa-entrando, #etapaCodigo.etapa-entrando { opacity:0; transform: translateY(6px); }

/* Feedback de "processando" nos botões de ação (enviar/confirmar/reenviar código) — some o texto
   e mostra uma bolinha girando no centro, pra não parecer travado durante a espera do envio de
   e-mail (SMTP pode demorar alguns segundos). */
button.cta, .ghost-btn { position: relative; }
button.cta.is-loading, .ghost-btn.is-loading { color: transparent; pointer-events: none; }
button.cta.is-loading::after, .ghost-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(3,49,64,0.25);
  border-top-color: var(--kw24-navy);
  border-radius: 50%;
  animation: cta-spin .6s linear infinite;
}
@keyframes cta-spin { to { transform: rotate(360deg); } }