/* =====================================================================
   Kronis — telas de acesso (login, cadastro, redefinir senha)
   Layout dividido: painel da marca à esquerda, formulário à direita.
   Carregado depois do style.css. Tema escuro.
   ===================================================================== */

body.page-auth{
  background:#0c0c0c !important;
  color:#fff !important;
  zoom:1;
  font-size:15px;
}
body.page-auth .wrap{ background:transparent; padding:0; }

/* O logo já aparece no painel da marca: esconde o cabeçalho antigo no computador */
@media (min-width: 900px){
  body.page-auth #uiRoot:has(.auth-brand-panel) > header{ display:none; }
}
body.page-auth #uiRoot > header{ padding:16px clamp(16px, 4vw, 32px); margin:0; }

/* ---------- Grade ---------- */
body.page-auth #page-login.auth-grid,
body.page-auth #page-register.auth-grid,
body.page-auth #page-esqueci-senha.auth-grid{
  display:grid;
  grid-template-columns:minmax(380px, 44%) 1fr;
  align-items:start;
  gap:0;
  max-width:none;
  width:100%;
  min-height:100vh;
  margin:0;
  padding:0;
}

/* ---------- Painel da marca ---------- */
body.page-auth .auth-brand-panel{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:40px clamp(28px, 4vw, 56px);
  margin:0;
  border:none;
  border-radius:0;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(520px 360px at 110% 110%, color-mix(in srgb, var(--accent1) 55%, transparent), transparent 70%),
    radial-gradient(420px 300px at -10% -10%, rgba(159,140,237,.18), transparent 70%),
    linear-gradient(160deg, #141414 0%, #101010 55%, #0a0a0a 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
body.page-auth .auth-brand-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%);
  pointer-events:none;
}
body.page-auth .auth-brand-panel > *{ position:relative; z-index:1; }
body.page-auth .auth-brand-logo img{ max-height:30px; width:auto; display:block; }
body.page-auth .auth-brand-logo span{ font-family:'Alfa Slab One', serif; font-size:24px; color:#fff; }
body.page-auth .auth-brand-body{ max-width:460px; }
body.page-auth .auth-brand-eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
}
body.page-auth .auth-brand-title{
  margin:18px 0 12px;
  font-size:clamp(1.8rem, 2.6vw, 2.5rem);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-0.025em;
  color:#fff;
}
body.page-auth .auth-brand-subtitle{
  margin:0 0 26px;
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
body.page-auth .auth-brand-perks{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-auth .auth-brand-perks li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.95rem;
  color:rgba(255,255,255,.88);
}
body.page-auth .auth-brand-perk-icon{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
  background:linear-gradient(135deg, var(--accent1), color-mix(in srgb, var(--accent1) 70%, #fff));
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent1) 35%, transparent);
}
body.page-auth .auth-brand-mascot{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  gap:12px;
}
body.page-auth .auth-brand-mascot img{
  width:130px;
  height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
  animation:auth-kroni-float 4.5s ease-in-out infinite;
  order:1;
}
body.page-auth .auth-brand-bubble{
  order:2;
  margin-bottom:70px;
  padding:9px 14px;
  border-radius:16px 16px 16px 4px;
  font-size:.875rem;
  font-weight:600;
  color:#0f172a;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
@keyframes auth-kroni-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
body.page-auth .auth-brand-foot{
  margin:0;
  font-size:.875rem;
  color:rgba(255,255,255,.65);
}
body.page-auth .auth-brand-foot a{ color:#fff; font-weight:700; text-decoration:none; }
body.page-auth .auth-brand-foot a:hover{ text-decoration:underline; }
body.page-auth .auth-brand-foot i{ color:#25d366; }

/* ---------- Cartão do formulário ---------- */
body.page-auth #page-login .auth-card,
body.page-auth #page-register .auth-card,
body.page-auth #page-esqueci-senha .auth-card{
  justify-self:center;
  align-self:center;
  width:min(460px, calc(100% - 40px));
  margin:56px auto;
  padding:36px 34px;
  border-radius:24px;
  background:linear-gradient(180deg, #171717, #121212);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  color:#fff;
}
body.page-auth #page-register .auth-card{ width:min(540px, calc(100% - 40px)); }

body.page-auth .login-card-head{ margin-bottom:22px; }
body.page-auth .login-card-head h2{
  margin:0 0 6px;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-0.025em;
  color:#fff !important;
}
body.page-auth .login-card-head p{ margin:0; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.55) !important; }

body.page-auth .muted,
body.page-auth .auth-perks,
body.page-auth .footer-note{ color:rgba(255,255,255,.55) !important; }
body.page-auth label,
body.page-auth #page-login .login-field label,
body.page-auth #form-register > label,
body.page-auth #form-register .field-group > label{
  color:rgba(255,255,255,.78) !important;
  font-size:13.5px;
  font-weight:600;
}
body.page-auth .link,
body.page-auth .login-forgot{ color:var(--accent1) !important; font-weight:700; }

/* Campos */
body.page-auth .input,
body.page-auth #page-login #form-login .input{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:12px;
  color:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.page-auth .input:focus-within,
body.page-auth #page-login #form-login .input:focus-within{
  border-color:var(--accent1) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent1) 18%, transparent) !important;
}
body.page-auth .input input,
body.page-auth .input select,
body.page-auth .input textarea{ color:#fff !important; font-size:15px; background:transparent; }
body.page-auth .input input::placeholder{ color:rgba(255,255,255,.32) !important; }
body.page-auth .input svg,
body.page-auth #page-login #form-login .input svg{ color:rgba(255,255,255,.6) !important; opacity:.9; }
body.page-auth .input select option{ background:#1a1a1a; color:#fff; }
body.page-auth .btn-toggle-password,
body.page-auth .btn-cep-lupa{ color:rgba(255,255,255,.6); }

/* Botões principais */
body.page-auth .auth-card .btn{
  min-height:50px;
  border-radius:12px;
  font-size:15px;
  font-weight:800;
  color:#0b0b0b;
  box-shadow:0 10px 26px color-mix(in srgb, var(--accent1) 32%, transparent);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.page-auth .auth-card .btn:not(:disabled):hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 14px 32px color-mix(in srgb, var(--accent1) 42%, transparent);
}
body.page-auth .auth-card .btn:disabled{ opacity:.55; box-shadow:none; }

body.page-auth #page-login .login-signup,
body.page-auth .register-form-footer-link{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:14px;
  color:rgba(255,255,255,.55) !important;
}

/* Alertas */
body.page-auth .alert-error{ background:rgba(239,68,68,.12); color:#fca5a5; border:1px solid rgba(239,68,68,.35); border-radius:12px; }
body.page-auth .alert-success{ background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.35); border-radius:12px; }

/* Cadastro: dicas, indicação e termos */
body.page-auth .plan-select-hint,
body.page-auth .referral-code-hint{ color:rgba(255,255,255,.5) !important; font-size:12.5px; }
body.page-auth .legal-checkbox-label{ color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.5; }
body.page-auth .referral-code-valid{ color:#86efac; }
body.page-auth .referral-code-invalid{ color:#fca5a5; }

/* Redefinir senha: indicador de passos */
body.page-auth .forgot-steps-indicator{ margin-bottom:22px; }
body.page-auth .forgot-step-dot{
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.12);
}
body.page-auth .forgot-step-dot.active{ background:var(--accent1); color:#0b0b0b; border-color:transparent; box-shadow:0 6px 16px color-mix(in srgb, var(--accent1) 35%, transparent); }
body.page-auth .forgot-step-dot.done{ background:color-mix(in srgb, var(--accent1) 18%, transparent); color:var(--accent1); border-color:color-mix(in srgb, var(--accent1) 40%, transparent); }
body.page-auth .forgot-step-line{ background:rgba(255,255,255,.12); }

/* Rodapé (quando exibido) */
body.page-auth .auth-footer{ background:#0a0a0a; border-top:1px solid rgba(255,255,255,.08); }
body.page-auth .auth-footer-title{ color:#fff !important; }
body.page-auth .auth-footer-links a{ color:rgba(255,255,255,.55) !important; }
body.page-auth .auth-footer-links a:hover{ color:var(--accent1) !important; }
body.page-auth .auth-footer-links .bi-whatsapp{ color:#25d366; }

/* ---------- Celular / tablet ---------- */
@media (max-width: 899px){
  body.page-auth #page-login.auth-grid,
  body.page-auth #page-register.auth-grid,
  body.page-auth #page-esqueci-senha.auth-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  body.page-auth .auth-brand-panel{
    position:relative;
    height:auto;
    gap:14px;
    padding:22px 20px 60px;
  }
  body.page-auth .auth-brand-logo,
  body.page-auth .auth-brand-perks,
  body.page-auth .auth-brand-mascot,
  body.page-auth .auth-brand-foot{ display:none; }
  body.page-auth .auth-brand-title{ font-size:1.5rem; margin:12px 0 6px; }
  body.page-auth .auth-brand-subtitle{ margin:0; font-size:.9rem; }
  body.page-auth #page-login .auth-card,
  body.page-auth #page-register .auth-card,
  body.page-auth #page-esqueci-senha .auth-card{
    margin:-40px auto 32px;
    padding:26px 20px;
    width:calc(100% - 28px);
    border-radius:20px;
  }
  body.page-auth .input input{ font-size:16px; } /* evita zoom automático no iPhone */
}
@media (prefers-reduced-motion: reduce){
  body.page-auth .auth-brand-mascot img{ animation:none; }
}

/* =====================================================================
   Layout centralizado (bloco único com painel + formulário)
   ===================================================================== */
body.page-auth{
  background:
    radial-gradient(700px 420px at 12% 8%, rgba(255,122,0,.16), transparent 65%),
    radial-gradient(640px 420px at 92% 92%, rgba(159,140,237,.12), transparent 65%),
    #0a0a0a !important;
}
body.page-auth .wrap{
  min-height:100vh;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:40px 40px;
}
body.page-auth #mainView{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

body.page-auth #page-login.auth-grid,
body.page-auth #page-register.auth-grid,
body.page-auth #page-esqueci-senha.auth-grid{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:stretch;
  width:100%;
  max-width:1080px;
  min-height:0;
  margin:0 auto;
  border-radius:28px;
  overflow:clip; /* diferente de hidden, não impede o painel de acompanhar a rolagem */
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,122,0,.04);
  /* o fundo das duas metades fica no bloco: o painel pode "grudar" ao rolar no cadastro */
  background:
    radial-gradient(420px 320px at 0% 100%, rgba(255,122,0,.28), transparent 70%) left / 50% 100% no-repeat,
    linear-gradient(160deg, #1a1a1a, #111) left / 50% 100% no-repeat,
    linear-gradient(180deg, #151515, #101010);
}

/* Painel da marca */
body.page-auth .auth-brand-panel{
  position:sticky;
  top:0;
  align-self:start;
  height:auto;
  min-height:640px;
  background:transparent;
  border-right:1px solid rgba(255,255,255,.07);
  padding:40px 40px 34px;
  gap:24px;
}
body.page-auth .auth-brand-panel::after{ display:none; }
body.page-auth .auth-brand-title{ font-size:clamp(1.7rem, 2.3vw, 2.2rem); margin:16px 0 10px; }
body.page-auth .auth-brand-subtitle{ margin-bottom:20px; font-size:.95rem; }
body.page-auth .auth-brand-perks{ gap:11px; }
body.page-auth .auth-brand-perks li{ font-size:.9rem; }
body.page-auth .auth-brand-perk-icon{ width:32px; height:32px; border-radius:10px; font-size:.9rem; }

/* Prévia + Kroni */
body.page-auth .auth-brand-showcase{
  margin-top:auto;
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
body.page-auth .auth-preview-card{
  flex:1;
  max-width:300px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transform:rotate(-2deg);
}
body.page-auth .auth-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:.8rem;
  font-weight:700;
  color:#fff;
}
body.page-auth .auth-preview-head i{ color:var(--accent1); margin-right:4px; }
body.page-auth .auth-preview-badge{
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:2px 7px;
  border-radius:999px;
  color:#86efac;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.3);
}
body.page-auth .auth-preview-row{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  margin-top:6px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  font-size:.75rem;
  color:rgba(255,255,255,.8);
}
body.page-auth .auth-preview-row b{ color:var(--accent1); }
body.page-auth .auth-preview-row em{
  font-style:normal;
  font-size:.65rem;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  white-space:nowrap;
}
body.page-auth .auth-preview-row em.ok{ color:#ffb84d; background:rgba(255,168,0,.14); }
body.page-auth .auth-preview-row em.now{ color:#7dd3fc; background:rgba(56,189,248,.14); }
body.page-auth .auth-preview-row em.wait{ color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }

body.page-auth .auth-brand-mascot{
  margin:0 -6px -8px 0;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
body.page-auth .auth-brand-mascot img{ width:118px; order:2; }
body.page-auth .auth-brand-bubble{
  order:1;
  margin:0 0 6px;
  border-radius:14px 14px 4px 14px;
  font-size:.78rem;
  white-space:nowrap;
}

/* Formulário: ocupa a metade direita, sem cartão separado */
body.page-auth #page-login .auth-card,
body.page-auth #page-register .auth-card,
body.page-auth #page-esqueci-senha .auth-card{
  width:100%;
  max-width:none;
  margin:0;
  align-self:center;
  justify-self:stretch;
  padding:48px clamp(28px, 4vw, 56px);
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
body.page-auth .auth-card > *{ max-width:440px; margin-left:auto; margin-right:auto; }
body.page-auth #page-register .auth-card > *{ max-width:480px; }
body.page-auth .login-card-head h2{ font-size:1.75rem; }

/* Cadastro: mais compacto */
body.page-auth #form-register .field-group{ margin-bottom:6px; }
body.page-auth #form-register > label{ margin-top:12px; }

/* Rodapé da página (cadastro) */
body.page-auth .auth-footer{ background:transparent; }

@media (max-width: 899px){
  body.page-auth #mainView{ padding:0; align-items:stretch; }
  body.page-auth #page-login.auth-grid,
  body.page-auth #page-register.auth-grid,
  body.page-auth #page-esqueci-senha.auth-grid{
    grid-template-columns:1fr;
    border-radius:0;
    border:none;
    box-shadow:none;
    background:linear-gradient(180deg, #151515, #0d0d0d);
  }
  body.page-auth .auth-brand-panel{
    position:relative;
    min-height:0;
    border-right:none;
    padding:28px 22px 8px;
    background:radial-gradient(420px 220px at 0% 0%, rgba(255,122,0,.25), transparent 70%);
  }
  body.page-auth .auth-brand-showcase{ display:none; }
  body.page-auth #page-login .auth-card,
  body.page-auth #page-register .auth-card,
  body.page-auth #page-esqueci-senha .auth-card{
    margin:0;
    width:100%;
    padding:22px 22px 36px;
    border-radius:0;
  }
}