/* =========================================================
   CONECTA JOVEM — LOGIN POLISH
   Ajustes visuais, contraste, espaçamento e responsividade.
========================================================= */

.auth-container{
  min-height:100svh;
  background:var(--cj-theme-bg, #f7fafc);
}

.auth-left{
  position:relative;
  isolation:isolate;
  min-width:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(103,232,249,.22), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(124,58,237,.30), transparent 34%),
    linear-gradient(145deg,#4f46e5 0%,#6d4fe8 48%,#0ea5a4 125%);
}

.auth-left::before,
.auth-left::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}

.auth-left::before{
  width:360px;
  height:360px;
  right:-170px;
  top:-130px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025);
}

.auth-left::after{
  width:260px;
  height:260px;
  left:-150px;
  bottom:-120px;
  background:rgba(0,0,0,.10);
}

.overlay{
  width:min(100%,560px);
  position:relative;
  z-index:1;
}

.overlay h1{
  font-size:clamp(2.15rem,4vw,3.55rem);
  line-height:1.08;
  letter-spacing:-.035em;
  margin-bottom:20px;
}

.overlay p{
  max-width:520px;
  color:rgba(255,255,255,.90);
  font-size:1.08rem;
  line-height:1.75;
  margin-bottom:36px;
}

.vantagens{
  gap:14px;
}

.vantagens div{
  width:fit-content;
  max-width:100%;
  padding:10px 16px 10px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.075);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:1rem;
}

.vantagens i{
  width:46px;
  height:46px;
  flex:0 0 46px;
  background:rgba(255,255,255,.14);
}

.auth-right{
  min-width:0;
  min-height:100svh;
  overflow:auto;
  background:var(--cj-theme-surface,#fff);
  color:var(--cj-theme-text,#0b1730);
  padding:clamp(38px,6vw,76px) clamp(24px,7vw,86px) 110px;
}

.auth-right > .logo,
.auth-right > h2,
.auth-right > p,
.auth-right > form,
.auth-right > .login-visitante{
  width:min(100%,520px);
  margin-left:auto;
  margin-right:auto;
}

.auth-right > .logo{
  justify-content:flex-start;
  margin-bottom:42px;
  color:var(--primary,#6c5ce7);
}

.logo-img{
  height:44px;
  width:auto;
}

.auth-right h2{
  font-size:clamp(2rem,3vw,2.65rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--cj-theme-text,#0b1730);
  margin-bottom:9px;
}

.auth-right > p{
  color:var(--cj-theme-muted,#5f6f86);
  margin-bottom:32px;
  font-size:1rem;
}

.auth-right form{
  max-width:520px;
}

.campo{
  margin-bottom:20px;
}

.campo label{
  color:var(--cj-theme-text,#334155);
  font-size:.93rem;
  margin-bottom:8px;
}

.campo input,
.campo select,
.campo textarea{
  min-height:54px;
  padding:14px 16px;
  color:var(--cj-theme-text,#172033);
  background:var(--cj-theme-surface-2,#f8fafc);
  border:1px solid var(--cj-theme-border,#dce6ef);
  border-radius:14px;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover{
  border-color:#b8c6d8;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  border-color:#6c5ce7;
  background:var(--cj-theme-surface,#fff);
  box-shadow:0 0 0 4px rgba(108,92,231,.12);
}

.campo input::placeholder,
.campo textarea::placeholder{
  color:#8795a8;
}

.senha-box{
  min-height:54px;
  background:var(--cj-theme-surface-2,#f8fafc)!important;
  border:1px solid var(--cj-theme-border,#dce6ef);
  border-radius:14px;
}

.senha-box:focus-within{
  border-color:#6c5ce7;
  box-shadow:0 0 0 4px rgba(108,92,231,.12);
}

.senha-box input{
  min-height:52px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.senha-box > #mostrarSenha,
.senha-box > .senha-toggle{
  right:8px;
  color:#64748b;
}

.opcoes{
  margin:2px 0 22px!important;
  color:var(--cj-theme-muted,#5f6f86);
}

.opcoes label{
  color:var(--cj-theme-muted,#5f6f86)!important;
  font-size:.9rem;
}

.opcoes input[type="checkbox"]{
  accent-color:#6c5ce7;
}

.opcoes a,
.login-link a,
.login-visitante a{
  color:#5b45d6;
}

.opcoes a:hover,
.login-link a:hover,
.login-visitante a:hover{
  color:#4732b7;
}

.auth-right form > button[type="submit"]{
  min-height:54px;
  border-radius:14px;
  background:linear-gradient(135deg,#6c5ce7,#4f46e5 58%,#2563eb);
  box-shadow:0 12px 24px rgba(79,70,229,.22);
  letter-spacing:.01em;
}

.auth-right form > button[type="submit"]:hover:not(:disabled){
  background:linear-gradient(135deg,#604fe0,#4338ca 58%,#1d4ed8);
  box-shadow:0 16px 28px rgba(79,70,229,.27);
}

.auth-right form > button[type="submit"]:disabled{
  transform:none!important;
}

.mensagem{
  margin:14px 0 0!important;
  padding:13px 14px;
  border-radius:12px;
  line-height:1.45;
  font-size:.9rem;
}

.mensagem.sucesso{
  background:#ecfdf3;
  color:#166534;
  border-color:#bbf7d0;
}

.mensagem.erro{
  background:#fff1f2;
  color:#9f1239;
  border-color:#fecdd3;
}

.login-link{
  margin-top:20px!important;
  color:var(--cj-theme-muted,#5f6f86)!important;
}

.login-visitante{
  margin-top:22px;
  padding:18px 16px;
  border:1px solid var(--cj-theme-border,#dce6ef);
  border-radius:14px;
  background:var(--cj-theme-surface-2,#f8fafc);
  text-align:center;
  color:var(--cj-theme-muted,#5f6f86);
}

.login-visitante a{
  color:var(--cj-theme-text,#334155);
  font-weight:700;
}

.login-visitante a i{
  color:#6c5ce7;
}

@media (max-width:1100px){
  .auth-container{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr)}
  .auth-left{padding:42px}
  .auth-right{padding-left:54px;padding-right:54px}
}

@media (max-width:900px){
  .auth-container{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-right{min-height:100svh;padding:42px 24px 105px}
}

@media (max-width:600px){
  .auth-right{padding:30px 18px 100px}
  .auth-right > .logo{justify-content:center;margin-bottom:30px}
  .logo-img{height:40px}
  .auth-right h2{text-align:center;font-size:2rem}
  .auth-right > p{text-align:center;margin-bottom:28px}
  .opcoes{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
  .login-visitante{padding:16px 12px}
}

@media (max-width:380px){
  .auth-right{padding-left:14px;padding-right:14px}
  .auth-right h2{font-size:1.8rem}
  .campo input,.campo select,.campo textarea{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  .auth-right form > button[type="submit"],
  .campo input,.campo select,.campo textarea{transition:none!important}
}