:root{
  --bg1:#b671f6;
  --bg2:#3a5af5;
  --ink:#1f2a35;
  --muted:#8a94a6;
  --white:#fff;
  --accent:#7b61ff;
  --panel:#242c36;
  --title-accent:#b671f6;
}

body::-webkit-scrollbar{ display:none; }

 
.login-body{
  min-height:100vh;
  margin:0;
  background:linear-gradient(90deg,var(--bg1),var(--bg2));
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}

 
.auth{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:2.22vw 1.11vw 1.67vw;    
}

 
.brand-panel{
  width:34vw; height:14vw;
  background:var(--panel) no-repeat center/cover;
  background-image:var(--brand-bg);
  color:#e9eef7;
  border-radius:.2vw;
  padding:1.4vw 1.6vw;
  box-shadow:0 1vw 2.6vw rgba(0,0,0,.22);
  display:grid; grid-template-columns:auto 1fr; gap:1.2vw; align-items:start;
  margin-bottom:1vw;
}

.brand-left{ display:flex; flex-direction:column; gap:.5vw; align-items:flex-start; }

.brand-logo{
  height:4.5vw;
  margin-left:2vw; margin-top:1vw;
  object-fit:contain; filter:none;
}

.brand-copy{
  display:flex; flex-direction:column; gap:.7vw;
  margin-top:1vw; margin-right:3vw;
  justify-self:end; text-align:left;
}

.brand-title{ margin:0; line-height:1.05; }
.brand-title .t1{ margin-top:.6vw; font-weight:200; font-size:clamp(1.25vw,1.6vw,1.94vw); color:#b671f6; }
.brand-title .t2{ font-weight:900; font-size:clamp(1.25vw,1.6vw,1.94vw); color:#b671f6; }

 
.brand-hr{
  width:clamp(4.17vw,3vw,9.72vw);    
  height:.05vw; background:var(--white);
  border-radius:.14vw;                
}
.brand-sub{
  color:#fff; font-size:.70vw; font-weight:200; letter-spacing:.08em; width:10vw;
}

 
.login-card{
  width:34vw; background:#fff; border-radius:.2vw;
  padding:1.4vw 1.2vw 1.1vw;
  box-shadow:0 1vw 2.6vw rgba(0,0,0,.22);
}

.login-head{ text-align:center; }
.login-head h4{ margin-top:.5vw; font-size:1.5vw; font-weight:300; color:#242c36; }
.login-hr{
  display:block; width:10vw; height:.02vw;
  margin:.1vw auto 0; background:#242c36; border-radius:.28vw;  
  margin-bottom:2vw;
}

 
.login-form{
  display:flex; flex-direction:column; align-items:center;
  gap:.97vw;           
  margin-top:.69vw;    
}

 
.login-form .input{
  display:block;
  width:27vw;
  height:3.61vw;                  
  margin:0 auto;
  background:transparent; border:0;
  border-bottom:.02vw solid #242c36;
  border-radius:0; box-sizing:border-box;
  text-align:center; font-size:.9vw; color:#2b2f3a;
  padding:0 .42vw;                 
  box-shadow:none !important;
}
.login-form .input::placeholder{ color:#b8c1d1; opacity:1; }
.login-form .input:focus{ outline:none; border-bottom-color:#7b61ff; box-shadow:none; }

 
.btn-primary{
  width:12vw; height:2.5vw; align-self:center;
  border-radius:1vw; padding:0 1.39vw;      
  font-size:.95vw; font-weight:200;
  background:linear-gradient(90deg,#b671f6 10%,#3a5af5 100%);
  box-shadow:0 .69vw 1.53vw rgba(90,123,255,.22);   
  margin-top:1vw;
  transition:background-position .28s ease, box-shadow .25s ease, transform .15s ease, filter .2s ease;
  background-size:200% 100%; background-position:0 0; will-change:transform,box-shadow,background-position;
}
.btn-primary:hover{ background-position:100% 0; transform:translateY(-.14vw); box-shadow:0 1.11vw 2.22vw rgba(58,90,245,.28); filter:saturate(1.1); }

 
.form-note{ margin-top:.28vw;   font-size:.76vw;   color:#242c36; }

 
.login-links{
  margin-top:1vw; display:flex; justify-content:center; align-items:center;
  gap:1.5vw; flex-wrap:wrap;
}
.login-links .lnk{
  display:inline-flex; align-items:center; gap:.69vw;   
  color:#242c36; text-decoration:none; font-weight:500; font-size:.9vw; line-height:1;
}
.login-links .lnk:hover{ color:#b671f6; }
.login-links .ico{ width:.7vw; flex:0 0 .85vw; display:inline-block; object-fit:contain; }
.login-links .split, .sep{ width:.02vw; height:2.5vw; background:#1f2a35; display:inline-block; }

 
.visit-wrap{ margin-top:1vw; }
.btn-ghost{
  display:inline-block; background:#1f2a35; color:#fff; text-decoration:none;
  border-radius:1vw; padding:.5vw 4vw; font-weight:600; backdrop-filter:saturate(120%) blur(2px);
}
.btn-ghost:hover{ background:#2b2f3a; color:#b671f6; }

.mini-foot{
  margin-top:.69vw;             
  color:rgba(255,255,255,.9);
  font-size:.76vw;              
  text-align:center;
}

:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-quick: .18s;
  --dur: .28s;
  --shadow-1: 0 .6rem 1.2rem rgba(0,0,0,.10), 0 .2rem .4rem rgba(0,0,0,.06);
  --shadow-2: 0 1.2rem 2.4rem rgba(0,0,0,.14), 0 .6rem 1rem rgba(0,0,0,.08);
}

body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.login-card{
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur-quick) var(--ease);
}
.login-card:hover{ box-shadow: var(--shadow-2); transform: translateY(-2px); }

 
.login-form .input{
  outline: none;
  font-size: clamp(.9rem, .9vw, 1.05rem);
  height: clamp(44px, 3.2vw, 52px);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

 
.login-form .input:focus-visible{
  border-bottom-color: var(--accent);
  box-shadow: 0 4px 0 -2px rgba(123,97,255,.18);
}

 
.login-form .input:user-invalid,
.login-form .input.is-invalid,
.login-form .input[aria-invalid="true"]{
  border-bottom-color:#e53935 !important;
  box-shadow: 0 4px 0 -2px rgba(229,57,53,.18) !important;
}
.login-form .input:user-valid,
.login-form .input.is-valid{
  border-bottom-color:#21a366;
  box-shadow: 0 4px 0 -2px rgba(33,163,102,.18);
}

 
.login-form .input:-webkit-autofill{
  -webkit-text-fill-color:#2b2f3a !important;
  transition: background-color 9999s ease-in-out 0s;  
}

.btn-primary{
  background-size: 200% 100%;
  transition: transform var(--dur-quick) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-position var(--dur) var(--ease),
              filter var(--dur) var(--ease),
              opacity var(--dur-quick) var(--ease);
}
.btn-primary:hover{ background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(58,90,245,.28); filter: saturate(1.06); }
.btn-primary:active{ transform: translateY(0); box-shadow: var(--shadow-1); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; filter: grayscale(.1); }

 
.btn-primary.is-loading{
  position: relative; pointer-events:none; color: transparent;
}
.btn-primary.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:1.1em; height:1.1em;
  border-radius:50%; border:2px solid rgba(255,255,255,.65); border-top-color:transparent;
  animation: spin .8s linear infinite;
}

@keyframes spin{ to{ transform: rotate(360deg); } }


 
.field{
  position: relative;
  display:block;
  width: 27vw;                  
  margin: 0 auto;
}

 
.field > .input{
  padding-right: 2.6rem;        
  text-align: center;
}

 
.eye-btn{
  position:absolute; top:50%; right:.4rem;
  transform: translateY(-50%);
  width: 2rem; height: 2rem;
  border:0; background:transparent; padding:0; margin:0;
  display:grid; place-items:center;
  color:#606b7a; opacity:.75; cursor:pointer;
  transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.eye-btn:hover{ opacity:1; transform: translateY(-50%) scale(1.02); }
.eye-btn:focus-visible{ outline: 2px solid rgba(123,97,255,.35); outline-offset: 2px; border-radius:.5rem; }

 
.eye-btn svg{ width: 1.15rem; height: 1.15rem; stroke: currentColor; }
.eye-btn .eye-closed{ display:none; }
.eye-btn.is-on .eye-open{ display:none; }
.eye-btn.is-on .eye-closed{ display:block; }



 
@media (max-width: 768px) {
  :root{
     
    --shadow-1: 0 1.5vw 3vw rgba(0,0,0,.12), 0 .8vw 1.6vw rgba(0,0,0,.08);
    --shadow-2: 0 3vw 6vw rgba(0,0,0,.16), 0 1.2vw 2.4vw rgba(0,0,0,.10);
    --dur: .24s;
    --dur-quick: .16s;
  }

  .login-body{
    height: fit-content;  
    background: linear-gradient(90deg,var(--bg1),var(--bg2));
  }

   
  .auth{
    min-height: 100svh;
    padding: max(6vw, env(safe-area-inset-top)) 5vw max(6vw, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5vw;
  }

 .brand-panel{
    width: 100%;
    height: fit-content;
    background: var(--panel) no-repeat center/cover;
    border-radius: 5vw;
    padding: 7vw 6vw 8vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3.2vw;
    color: #e9eef7;
    box-shadow: 0 2vw 5vw rgba(0,0,0,.25);
    overflow: hidden;            
    position: relative;
  }

  .brand-left{
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 3vw;
  }

   
  .brand-logo{
    height: 16vw;
    max-height: 18vw;
    margin: 0;
    object-fit: contain;
    filter: none;
  }

  .brand-copy{
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 88vw;            
  }

  .brand-title{
    margin-top: 4vw;
    line-height: 1.18;
  }

  .brand-title .t1,
  .brand-title .t2{
    display: block;
    font-size: 4.8vw;  
    line-height: .5;
    font-weight: 600;
    color: var(--title-accent);
    letter-spacing: .01em;
    
  }

   
  .brand-hr{
    width: 36vw;
    height: .35vw;
    background: var(--white);
    border-radius: 1vw;
    margin: 3.2vw auto 1.2vw;
    opacity: .9;
  }

   
  .brand-sub{
    color: #fff;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 300;
    letter-spacing: .02em;
    width: auto;
    max-width: 30ch;            
    line-height: 1.38;
    margin: 0 auto;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

   
  .login-card{
    width: 100%;
    background: #fff;
    border-radius: 4vw;
    padding: 7vw 5.5vw;
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur-quick) var(--ease);
  }
  .login-card:hover{ box-shadow: var(--shadow-2); transform: translateY(-.3vw); }

  .login-head{ text-align: center; }
  .login-head h4{
    margin: 1vw 0 2vw; font-size: 5.4vw; font-weight: 400; color: #242c36;
  }
  .login-hr{
    display:block; width: 40vw; height: .6vw;
    margin: 1vw auto 7vw; background: #242c36; border-radius: 2vw;
  }

   
  .login-form{
    display: flex; flex-direction: column; align-items: stretch;
    gap: 4.5vw; margin-top: 1vw; width: 100%;
  }

  

  
  .auth{ padding: 5vw 4vw; }

   
  .login-card{
    width: 100%;
    max-width: 640px;
    margin: 5vw auto 0;
    border-radius: 5vw;
    padding: 6vw 5.5vw;
  }

  .login-head h4{
    font-size: clamp(18px, 6vw, 24px);
    letter-spacing: .02em;
  }
  .login-hr{ width: 36vw; height: 2px; }

  /* Texto de ayuda y notas dentro de formularios
     (sobrescribe el <p style="font-size:.9vw"> del forgot) */
  .login-form p,
  #view-forgot p{
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.5;
    color: #545b6a !important;
    max-width: 90%;
    margin: 0 auto 1.2em !important;
    text-align: center;
  }

   
  .login-form label{ display:block; margin: 0 0 4.2vw 0; }
  .login-form .input{
    height: 12.5vw;
    max-height: 56px;
    border-radius: 3.6vw;
    font-size: clamp(15px, 4.2vw, 18px);
    padding: 0 5vw;
  }
  .login-form .field{ position: relative; }
  .login-form .eye-btn{
    width: 11vw; height: 11vw;
    max-width: 44px; max-height: 44px;
    right: 1.8vw; top: 50%; transform: translateY(-50%);
  }
  .login-form .eye-btn svg{ width: 70%; height: 70%; }

   
  .btn-primary{
    font-size: clamp(15px, 4.5vw, 18px);
    padding: 3.8vw 5vw;
    border-radius: 4.2vw;
  }

   
  .login-links{
    display: grid;
    grid-template-columns: 1fr;
    gap: 3vw;
    justify-items: center;
  }
  .login-links .split{ display:none; }
  .login-links .lnk{
    font-size: clamp(14px, 3.9vw, 17px);
  }

   

   
  #view-signup h5{
    font-size: clamp(15px, 4.2vw, 18px) !important;
    margin: 3vw 0 2.5vw !important;
  }

   
  #view-signup div[style^="width:27vw"]{
    width: 100% !important;
    margin: 2.5vw auto 4.5vw !important;
  }

   
  #view-signup select[name="country"]{
    width: 100% !important;
    height: 12.5vw !important;            
    max-height: 56px !important;
    border-radius: 3.6vw !important;
    padding: 0 5vw !important;
    border-width: .35vw !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    background-position: right 3.6vw center !important;
    background-size: 4.2vw !important;
  }

   
  #cardTitle{
    font-size: clamp(18px, 6vw, 24px);
  }

   
  .field{
    position: relative; display: block; width: 100%; margin: 0;
  }

   
  .login-form .input{
    display: block; width: 100%;
    height: 12.5vw;  
    background: transparent; border: 0;
    border-bottom: 1px solid #242c36;
    border-radius: 0; box-sizing: border-box;
    text-align: left;  
    font-size: 4.6vw; color: #2b2f3a; padding: 0 3.2vw;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .field > .input{ padding-right: 11.5vw; }  
  .login-form .input::placeholder{ color: #b8c1d1; opacity: 1; }
  .login-form .input:focus{ outline: none; border-bottom-color: var(--accent); }

   
  .login-form .input:focus-visible{
    border-bottom-color: var(--accent);
    box-shadow: 0 .9vw 0 -.4vw rgba(123,97,255,.22);
  }

   
  .login-form .input:user-invalid,
  .login-form .input.is-invalid,
  .login-form .input[aria-invalid="true"]{
    border-bottom-color: #e53935 !important;
    box-shadow: 0 .9vw 0 -.4vw rgba(229,57,53,.22) !important;
  }
  .login-form .input:user-valid,
  .login-form .input.is-valid{
    border-bottom-color: #21a366;
    box-shadow: 0 .9vw 0 -.4vw rgba(33,163,102,.22);
  }

   
  .login-form .input:-webkit-autofill{
    -webkit-text-fill-color: #2b2f3a !important;
    transition: background-color 9999s ease-in-out 0s;
  }

   
  .eye-btn{
    position: absolute; top: 50%; right: 3.2vw; transform: translateY(-50%);
    width: 9.6vw; height: 9.6vw;
    border: 0; background: transparent; padding: 0; margin: 0;
    display: grid; place-items: center;
    color: #606b7a; opacity: .8; cursor: pointer;
    transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
  }
  .eye-btn:hover{ opacity: 1; transform: translateY(-50%) scale(1.02); }
  .eye-btn:focus-visible{ outline: 2px solid rgba(123,97,255,.35); outline-offset: 4px; border-radius: 2vw; }
  .eye-btn svg{ width: 5vw; height: 5vw; stroke: currentColor; }
  .eye-btn .eye-closed{ display: none; }
  .eye-btn.is-on .eye-open{ display: none; }
  .eye-btn.is-on .eye-closed{ display: block; }

   
  .btn-primary{
    width: 100%; height: 12.5vw; border-radius: 10vw;
    padding: 0 6vw;
    font-size: 4.8vw; font-weight: 600; letter-spacing: .02em;
    background: linear-gradient(90deg,#b671f6 10%,#3a5af5 100%);
    box-shadow: 0 2vw 4vw rgba(58,90,245,.25);
    margin-top: 4vw;
    background-size: 200% 100%; background-position: 0 0;
    transition: transform var(--dur-quick) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-position var(--dur) var(--ease),
                filter var(--dur) var(--ease),
                opacity var(--dur-quick) var(--ease);
  }
  .btn-primary:hover{ background-position: 100% 0; transform: none; box-shadow: 0 3vw 6vw rgba(58,90,245,.28); filter: saturate(1.06); }
  .btn-primary:active{ transform: none; box-shadow: var(--shadow-1); }
  .btn-primary:disabled{ opacity:.7; cursor:not-allowed; filter: grayscale(.06); }

   
  .btn-primary.is-loading{ position: relative; pointer-events: none; color: transparent; }
  .btn-primary.is-loading::after{
    content:""; position:absolute; inset:0; margin:auto; width: 1.2em; height: 1.2em;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.7); border-top-color: transparent;
    animation: spin .8s linear infinite;
  }

   
  .form-note{ margin-top: 2.5vw; font-size: 3.6vw; color: #242c36; text-align: center; }

   
  .login-links{
    margin-top: 6vw; display: flex; flex-direction: column; align-items: center;
    gap: 3.5vw; flex-wrap: nowrap;
  }
  .login-links .lnk{
    display: inline-flex; align-items: center; gap: 2.8vw;
    color: #242c36; text-decoration: none; font-weight: 500; font-size: 4.2vw; line-height: 1.2;
  }
  .login-links .lnk:hover{ color: var(--title-accent); }
  .login-links .ico{ width: 4.2vw; flex: 0 0 4.2vw; object-fit: contain; }
  .login-links .split, .login-links .sep{ display: none; }

   
  .visit-wrap{ margin-top: 8vw; text-align: center; }
  .btn-ghost{
    display: inline-block; background: #1f2a35; color: #fff; text-decoration: none;
    border-radius: 10vw; padding: 3.2vw 10vw; font-weight: 600; font-size: 4.2vw;
    backdrop-filter: saturate(120%) blur(2px);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .btn-ghost:hover{ background:#2b2f3a; color: var(--title-accent); }

  .mini-foot{
    margin-top: 5vw; color: rgba(255,255,255,.92);
    font-size: 3.4vw; text-align: center;
  }
}

 
@media (max-width: 360px){
  .brand-title .t1, .brand-title .t2{ font-size: 5.4vw; }
  .login-head h4{ font-size: 5vw; }
  .login-form .input{ font-size: 4.8vw; height: 13.5vw; }
  .btn-primary{ height: 13.5vw; font-size: 4.9vw; }
}

 
@media (prefers-reduced-motion: reduce){
  .login-card, .btn-primary, .eye-btn, .login-form .input{
    transition: none !important;
    animation: none !important;
  }
}