/* =========================================================
   OKLY ALIADOS V4.8
   LOGIN fiel al mockup: composición real en dos columnas.
   ========================================================= */

body.auth-ui{
  margin:0;
  background:#f7efeb;
}

.auth-ui main{
  min-height:100vh;
}

.login-v48{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  background:
    radial-gradient(circle at 9% 16%,rgba(255,255,255,.88),transparent 24%),
    linear-gradient(135deg,#fbf3ef 0%,#f5e8e3 58%,#efe0da 100%);
}

.login-v48 .login-card{
  width:min(1180px,96vw);
  min-height:680px;
  display:grid;
  grid-template-columns:55% 45%;
  overflow:hidden;
  border:5px solid #171d1f;
  border-radius:18px;
  background:#fff;
  box-shadow:0 22px 55px rgba(0,0,0,.10);
}

.login-v48 .login-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:56px 72px;
  background:
    radial-gradient(circle at 9% 17%,rgba(242,182,186,.35),transparent 17%),
    radial-gradient(circle at 15% 48%,rgba(244,199,202,.27),transparent 21%),
    linear-gradient(90deg,#fffaf7 0%,#fff8f5 78%,#fff4f0 100%);
}

.login-v48 .login-copy:before,
.login-v48 .login-copy:after{
  content:"";
  position:absolute;
  left:-2px;
  width:190px;
  height:250px;
  pointer-events:none;
  opacity:.40;
  filter:blur(.2px);
  background:
    radial-gradient(ellipse at 35% 25%,#f6b9c3 0 13%,transparent 14%),
    radial-gradient(ellipse at 66% 48%,#f2aeb9 0 14%,transparent 15%),
    radial-gradient(ellipse at 26% 74%,#f8c5cd 0 16%,transparent 17%);
}
.login-v48 .login-copy:before{top:18px}
.login-v48 .login-copy:after{bottom:5px;transform:scale(.88) rotate(7deg)}

.login-v48 .login-wordmark{
  text-align:center;
  margin:0 0 36px;
  position:relative;
  z-index:1;
}

.login-v48 .login-wordmark span{
  display:block;
  font-size:52px;
  font-weight:300;
  letter-spacing:10px;
  line-height:1;
  color:#1d2021;
}

.login-v48 .login-wordmark small{
  display:block;
  margin-top:11px;
  font-size:14px;
  letter-spacing:7px;
  color:#1d2021;
}

.login-v48 h1{
  margin:0 0 18px;
  text-align:center;
  font-size:35px;
  line-height:1.08;
  letter-spacing:-.8px;
  color:#111;
}

.login-v48 .login-copy>p{
  margin:0 0 28px;
  text-align:center;
  font-size:16px;
  line-height:1.45;
  color:#555;
}

.login-v48 .login-form{
  width:min(100%,390px);
  display:grid;
  gap:13px;
}

.login-v48 .login-field{
  display:flex;
  align-items:center;
  height:56px;
  border:1px solid #d8d8d8;
  border-radius:5px;
  background:#fff;
  overflow:hidden;
}

.login-v48 .field-icon{
  width:46px;
  text-align:center;
  color:#777;
  font-size:14px;
}

.login-v48 .login-field input{
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:15px;
  padding:0 12px 0 0;
}

.login-v48 .forgot{
  justify-self:center;
  color:#333;
  font-size:13px;
  text-decoration:underline;
  margin:2px 0 2px;
}

.login-v48 .login-button{
  width:100%;
  height:58px;
  border:0;
  border-radius:5px;
  background:#171d1f;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
}

.login-v48 .login-art{
  min-width:0;
  background:#f4ddd7;
  overflow:hidden;
}

.login-v48 .login-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 44%;
}

/* notebook / pantallas medianas */
@media (max-width:1180px){
  .login-v48 .login-card{
    width:96vw;
    grid-template-columns:56% 44%;
  }
  .login-v48 .login-copy{padding:46px 48px}
  .login-v48 .login-wordmark span{font-size:46px}
  .login-v48 h1{font-size:31px}
}

/* MÓVIL: sigue el mockup móvil, limpio y sin producto gigante */
@media (max-width:760px){
  .login-v48{
    padding:0;
    align-items:stretch;
    background:#faf7f3;
  }

  .login-v48 .login-card{
    width:100%;
    min-height:100svh;
    display:block;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#faf7f3;
  }

  .login-v48 .login-art{
    display:none;
  }

  .login-v48 .login-copy{
    min-height:100svh;
    justify-content:flex-start;
    padding:78px 26px 42px;
    background:
      radial-gradient(circle at 5% 8%,rgba(244,191,196,.27),transparent 17%),
      linear-gradient(180deg,#fffdfb 0%,#faf7f3 100%);
  }

  .login-v48 .login-copy:before,
  .login-v48 .login-copy:after{
    display:none;
  }

  .login-v48 .login-wordmark{
    margin-bottom:48px;
  }

  .login-v48 .login-wordmark span{
    font-size:47px;
    letter-spacing:8px;
  }

  .login-v48 .login-wordmark small{
    font-size:12px;
    letter-spacing:6px;
    margin-top:9px;
  }

  .login-v48 h1{
    font-size:28px;
    line-height:1.08;
    margin-bottom:14px;
  }

  .login-v48 .login-copy>p{
    font-size:14px;
    margin-bottom:34px;
  }

  .login-v48 .login-form{
    width:100%;
    max-width:420px;
  }

  .login-v48 .login-field{
    height:58px;
  }

  .login-v48 .login-button{
    height:58px;
    margin-top:6px;
  }
}

@media (max-width:420px){
  .login-v48 .login-copy{
    padding:62px 20px 34px;
  }
  .login-v48 .login-wordmark{
    margin-bottom:38px;
  }
  .login-v48 .login-wordmark span{
    font-size:41px;
  }
  .login-v48 h1{
    font-size:25px;
  }
}