/* ZTurns — estilos compartidos de pantallas de acceso (registro, olvidé contraseña) */
:root{
  --brand-1: #0B5ED7;
  --brand-2: #14B8A6;
  --brand-3: #0A2540;
  --accent:  #22E3E0;
  --muted:   #6b7280;
}

html, body { min-height: 100%; }
body{
  margin: 0;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--brand-3);
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(0,190,255,.55), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(20,60,230,.6), transparent 60%),
    linear-gradient(135deg, #0A8CF5, #1546E0);
  background-attachment: fixed;
}

/* ===== Tarjeta contenedora ===== */
.auth-shell{
  min-height: 100vh;
  padding: 3vh 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card{
  position: relative;
  width: 100%;
  max-width: 1500px;
  min-height: min(860px, 94vh);
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(5, 25, 90, .35);
  display: flex;
}

/* ===== Lado izquierdo ===== */
.auth-left{
  position: relative;
  z-index: 2;
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  padding: 36px 24px 36px clamp(24px, 8%, 110px);
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}
.auth-form-wrap{ width: 100%; max-width: 480px; }

.logo-login{ height: 70px; display:block; }
.logo-tagline{ margin: 6px 0 0; font-weight: 700; font-size: .95rem; color: #4b5563; }
.logo-tagline b{ color: var(--brand-1); }

.welcome{ margin: 22px 0 4px; color: #4b5563; font-weight: 600; font-size: .98rem; }
.auth-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -.3px;
  margin: 0 0 6px;
  color: var(--brand-3);
}
.auth-sub{ color: var(--muted); font-size: .96rem; line-height: 1.4; margin-bottom: 20px; }

/* Inputs con icono */
.input-icon{ position: relative; margin-bottom: 14px; }
.input-icon > i.lead-ico{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: #4b5563; font-size: 1rem; pointer-events: none; z-index: 3;
}
.input-icon .form-control,
.input-icon .form-select{
  height: 54px;
  border-radius: 14px;
  padding: .75rem 3rem .75rem 46px;
  border: 1px solid rgba(17,24,39,.14);
  background-color: #fff;
  font-size: .98rem;
}
.input-icon .form-select{ padding-right: 2.4rem; }
.input-icon .form-control::placeholder{ color: #6b7280; }
.input-icon .form-control:focus,
.input-icon .form-select:focus{
  border-color: rgba(11,94,215,.65);
  box-shadow: 0 0 0 .22rem rgba(11,94,215,.14);
}
.toggle-eye{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; padding: 8px;
  color: rgba(17,24,39,.6); cursor: pointer; z-index: 3;
}
.toggle-eye:hover{ color: var(--brand-1); }

.alert{ border-radius: 14px; font-size: .93rem; }

/* reCAPTCHA y checkbox legal */
.captcha-wrap{ margin: 4px 0 14px; transform-origin: 0 0; }
.legal-check{ margin-bottom: 16px; font-size: .9rem; color: #374151; }
.legal-check .form-check-input{ border-radius: 5px; border-color: rgba(17,24,39,.3); cursor: pointer; margin-top: .2rem; }
.legal-check .form-check-input:checked{ background-color: var(--brand-1); border-color: var(--brand-1); }
.legal-check a{ color: #0B3BD7; font-weight: 700; text-decoration: none; }
.legal-check a:hover{ text-decoration: underline; }

/* Botones */
.btn-brand{
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(90deg, #0A8CF5, #1334D8);
  box-shadow: 0 10px 24px rgba(19, 52, 216, .28);
  transition: transform .15s ease, filter .15s ease;
}
.btn-brand:hover{ filter: brightness(.96); transform: translateY(-1px); color:#fff; }
.btn-brand:disabled{ opacity: .55; box-shadow: none; transform: none; cursor: not-allowed; }

.divider{
  display: flex; align-items: center; gap: 14px;
  color: #4b5563; font-size: .88rem; margin: 18px 0 14px;
}
.divider:before, .divider:after{ content:""; height: 1px; background: rgba(107,114,128,.28); flex: 1; }

.btn-outline-brand{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1.5px solid #1334D8;
  background: #fff;
  color: #0B3BD7;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
  transition: background .15s ease;
}
.btn-outline-brand:hover{ background: #f0f5ff; color: #0B3BD7; }

.legal{ margin-top: 16px; font-size: .8rem; color: var(--muted); }
.legal a{ color: var(--muted); text-decoration: underline; }

/* ===== Lado derecho con borde curvo ===== */
.auth-right{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  z-index: 1;
  padding: 70px 48px 40px 27%;
  color: #fff;
  background:
    radial-gradient(700px 420px at 80% 10%, rgba(0,200,255,.28), transparent 60%),
    radial-gradient(600px 500px at 90% 100%, rgba(10,30,200,.55), transparent 60%),
    linear-gradient(150deg, #0A63F0 0%, #1636D9 55%, #1B2FC2 100%);
  clip-path: url(#curva-login);
  overflow: hidden;
}
.auth-right:before{
  content:""; position:absolute; right:-12%; bottom:-30%;
  width: 80%; height: 85%;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.hero-title{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 46px;
  max-width: 560px;
}
.hero-title span{ color: var(--accent); display: block; }

.feat{ position: relative; display: flex; gap: 18px; align-items: center; margin-bottom: 26px; max-width: 480px; }
.feat-ico{
  flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  background: linear-gradient(145deg, rgba(60,130,255,.95), rgba(25,60,225,.95));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,10,120,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.feat h4{ font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.12rem; margin: 0 0 3px; }
.feat p{ margin: 0; font-size: .93rem; opacity: .92; line-height: 1.35; }

.hero-art{
  position: absolute;
  right: 3%; bottom: 3%;
  width: min(48%, 440px);
  filter: drop-shadow(0 24px 30px rgba(0,10,100,.35));
  pointer-events: none;
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .auth-shell{ padding: 0; }
  .auth-card{ border-radius: 0; min-height: 100vh; box-shadow: none; }
  .auth-right{ display: none; }
  .auth-left{ flex: 0 0 100%; padding: 36px 22px; justify-content: center; }
}
@media (max-width: 400px){
  .captcha-wrap{ transform: scale(.88); }
}
@media (max-width: 480px){
  .auth-title{ font-size: 1.5rem; }
  .logo-login{ height: 60px; }
}