/* ═══════════════════════════════════════════════════════════
   RECUPERO · LOGIN REFINADO v4
   Una sola vista · sin scroll · azules y grises de marca en clave minimalista
   ═══════════════════════════════════════════════════════════ */

#login-view.auth-universe{
  --auth-bg:#06141d;
  --auth-bg-2:#0b2230;
  --auth-surface:#0b202c;
  --auth-surface-2:#0d2734;
  --auth-input:#0c2532;
  --auth-input-hover:#102c3a;
  --auth-line:rgba(109,208,224,.10);
  --auth-line-strong:rgba(109,208,224,.18);
  --auth-text:#f6f9fc;
  --auth-body:#c8d7df;
  --auth-muted:#91a8b5;
  --auth-accent:#31eaf0;
  --auth-accent-2:#55eaf1;
  --auth-ink:#04131c;
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  min-height:100svh;
  z-index:1000;
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(350px,.72fr);
  grid-template-rows:minmax(0,1fr);
  gap:clamp(42px,5.2vw,96px);
  padding:clamp(30px,3.5vh,44px) clamp(34px,5vw,96px);
  overflow:hidden;
  color:var(--auth-text);
  background:
    radial-gradient(circle at 11% 15%,rgba(25,105,128,.20),transparent 29%),
    radial-gradient(circle at 88% 84%,rgba(14,72,90,.16),transparent 31%),
    linear-gradient(112deg,#04151c 0%,#061923 48%,#0a2230 100%);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#login-view.auth-universe::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(rgba(91,222,231,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,222,231,.04) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%);
  mask-image:linear-gradient(90deg,#000,transparent 55%);
}

#login-view .auth-universe-top{
  position:absolute;
  z-index:12;
  top:clamp(20px,2.6vh,30px);
  right:clamp(26px,3.5vw,68px);
  width:auto;
  padding:0;
  margin:0;
  border:0;
  display:block;
}
#login-view .auth-universe-top img{display:none!important}
#login-view .auth-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:38px;
  padding:0 14px;
  margin:0;
  border:1px solid rgba(109,208,224,.16);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#c7d8e1;
  text-decoration:none;
  font-size:11px;
  font-weight:500;
  letter-spacing:.01em;
  backdrop-filter:blur(8px);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
#login-view .auth-home-link svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#login-view .auth-home-link:hover{
  color:#ffffff;
  background:rgba(49,234,240,.07);
  border-color:rgba(49,234,240,.32);
  transform:translateY(-1px);
}

#login-view .hero-content{
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:2;
  align-self:stretch;
  min-width:0;
  min-height:0;
  height:100%;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#login-view .hero-text{
  position:relative;
  width:100%;
  max-width:760px;
  margin:0 0 clamp(14px,2vh,22px);
}
#login-view .auth-kicker{
  display:inline-block;
  color:#74dce5;
  font-size:9px;
  font-weight:650;
  letter-spacing:.18em;
}
#login-view .hero-text h2{
  max-width:690px;
  margin:clamp(10px,1.5vh,16px) 0 0;
  color:#f6f9fc;
  font-size:clamp(30px,2.75vw,46px);
  line-height:1.08;
  letter-spacing:-.043em;
  font-weight:400;
}
#login-view .hero-text h2 strong{
  color:#31ecef;
  font-weight:400;
}
#login-view .auth-campaign{
  width:100%;
  max-width:880px;
  margin:0;
}
#login-view .auth-campaign img{
  display:block;
  width:100%;
  height:clamp(315px,calc(100dvh - 315px),565px);
  min-height:0;
  object-fit:cover;
  object-position:center center;
  border:1px solid rgba(109,208,224,.14);
  border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.24);
}
#login-view .auth-campaign figcaption{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding-top:10px;
  color:#8fa8b5;
  font-size:10px;
  line-height:1.35;
}
#login-view .auth-campaign figcaption span:last-child{color:#cfe5ec}
#login-view .auth-campaign-note{
  margin:clamp(10px,1.4vh,15px) 0 0;
  color:#8ea6b2;
  font-size:10.5px;
  line-height:1.55;
}

#login-view .auth-panel{
  grid-column:2;
  grid-row:1;
  position:relative;
  z-index:3;
  align-self:stretch;
  width:100%;
  min-width:0;
  min-height:0;
  padding:0 0 0 clamp(30px,4vw,66px);
  border-left:1px solid rgba(109,208,224,.10);
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
#login-view .auth-panel::before,#login-view .auth-panel::after{display:none!important}
#login-view .panel-inner{
  width:100%;
  max-width:410px;
  margin:0 auto;
  padding:28px 28px 26px;
  border:1px solid rgba(109,208,224,.14);
  border-radius:20px;
  background:rgba(7,27,38,.88);
  box-shadow:0 26px 70px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
  animation:none;
}
#login-view .panel-header{margin:0 0 clamp(24px,3vh,30px)}
#login-view .panel-eyebrow{
  display:inline-block;
  margin:0 0 16px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:#72a9ba;
  font-size:9px;
  font-weight:650;
  letter-spacing:.16em;
}
#login-view .panel-header h1{
  margin:0;
  color:#f5f9fc;
  font-size:clamp(30px,2.2vw,36px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.045em;
}
#login-view .panel-header p{
  margin:12px 0 0;
  color:#98adba;
  font-size:12.5px;
  line-height:1.55;
}

#login-view .auth-form{display:grid;gap:20px}
#login-view .auth-field{display:grid;gap:7px}
#login-view .auth-field>span{
  color:#d4e1e7;
  font-size:11.5px;
  font-weight:550;
  letter-spacing:0;
}
#login-view .auth-input-wrap{position:relative;display:flex;align-items:center}
#login-view .auth-field-icon{
  position:absolute;
  left:15px;
  z-index:2;
  color:#7895a3;
  line-height:1;
  transition:color .2s ease;
}
#login-view .auth-field-icon svg{width:17px;height:17px}
#login-view .auth-input-wrap input{
  width:100%;
  height:50px;
  padding:0 46px;
  border:1px solid var(--auth-line-strong)!important;
  border-radius:8px;
  outline:none;
  background:var(--auth-input)!important;
  color:#eef6f8!important;
  box-shadow:none;
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#login-view .auth-input-wrap input::placeholder{
  color:#6f8b99;
  opacity:1;
  font-size:12.5px;
  font-weight:400;
}
#login-view .auth-input-wrap input:hover{
  transform:none;
  background:var(--auth-input-hover)!important;
  border-color:rgba(49,234,240,.24)!important;
  box-shadow:none;
}
#login-view .auth-input-wrap input:focus{
  background:#102f3d!important;
  border-color:#31dfe6!important;
  box-shadow:0 0 0 3px rgba(49,234,240,.09);
}
#login-view .auth-field:focus-within>span,
#login-view .auth-input-wrap:focus-within .auth-field-icon{color:#31dfe6}
#login-view input:-webkit-autofill{
  -webkit-text-fill-color:#eef6f8!important;
  box-shadow:0 0 0 50px #0c2532 inset!important;
  transition:background-color 9999s ease-out 0s;
}
#login-view .auth-eye{
  position:absolute;
  right:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#76909e;
}
#login-view .auth-eye:hover{color:#dff9fb;background:rgba(49,234,240,.06)}
#login-view .auth-eye svg{width:17px;height:17px}

#login-view .auth-row-meta{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
}
#login-view .remember-check{display:flex;align-items:center;gap:9px;cursor:pointer}
#login-view .check-label,#login-view .auth-forgot{
  color:#9aadb7;
  font-size:10.5px;
  font-weight:400;
}
#login-view .check-box{
  width:16px;
  height:16px;
  border:1px solid rgba(109,208,224,.22);
  border-radius:4px;
  background:#0b2230;
}
#login-view .remember-check input:checked+.check-box{
  background:#20e8ea;
  border-color:#20e8ea;
}
#login-view .remember-check input:focus-visible+.check-box{outline:2px solid #55eaf1;outline-offset:3px}
#login-view .auth-forgot{padding:0;background:none;border:0;cursor:pointer}
#login-view .auth-forgot::after{background:#31dfe6}
#login-view .auth-forgot:hover{color:#eaf7f9}

#login-view .btn-primary{
  background:linear-gradient(180deg,#4ff5f2 0%, #20e8ea 100%);
  border:0;
  color:var(--auth-ink);
  box-shadow:0 14px 26px rgba(32,232,234,.16);
  font-weight:600;
}
#login-view .auth-submit{
  width:100%;
  height:50px;
  margin-top:2px;
  border-radius:8px;
  font-size:12.5px;
  letter-spacing:0;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
#login-view .auth-submit::before{display:none}
#login-view .auth-submit:hover{
  background:linear-gradient(180deg,#6ff8f5 0%, #35eef0 100%);
  box-shadow:0 16px 30px rgba(32,232,234,.22);
  transform:translateY(-1px);
}
#login-view .auth-submit:active{transform:none}
#login-view .btn-arrow svg{width:17px;height:17px}
#login-view .btn-loader{border-color:#ffffff42;border-top-color:#ffffff}

#login-view .auth-panel-foot{
  display:grid;
  justify-items:start;
  gap:7px;
  margin-top:26px;
  padding-top:21px;
  border-top:1px solid rgba(109,208,224,.10);
}
#login-view .auth-panel-foot>span{color:#7895a3;font-size:10.5px}
#login-view .auth-panel-foot a{color:#7edee6;font-size:11.5px;text-decoration:none}
#login-view .auth-panel-foot a:hover{color:#f5f9fc;text-decoration:underline}
#login-view :is(a,button):focus-visible{outline:2px solid #55eaf1;outline-offset:4px}

#login-view .modal-backdrop{background:rgba(1,9,14,.72);backdrop-filter:blur(8px)}
#login-view .modal-card,.auth-session-conflict .modal-card,.first-login-lock .modal-card{
  background:#0b202c;
  border:1px solid rgba(109,208,224,.14);
  border-radius:14px;
  color:#eaf4f7;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}
#login-view .modal-card h2,.auth-session-conflict .modal-card h2,.first-login-lock .modal-card h2{color:#f5f9fc}
#login-view .modal-card p,.auth-session-conflict .modal-card p,.first-login-lock .modal-card p{color:#9cb0bb}
#login-view .modal-icon{display:none}
#login-view .modal-close{background:#102b38;color:#b8ccd5}
#login-view .modal-eyebrow{color:#72cfd8;background:none;border:0;padding:0;font-size:9px;font-weight:650;letter-spacing:.12em}
#login-view .modal-card h2{font-family:inherit;font-weight:500;letter-spacing:-.025em}
#login-view .modal-field input,.first-login-lock .modal-field input{background:#0c2532;color:#eef6f8;border-color:#254554}
.auth-session-conflict .session-conflict-current{background:#0c2532;border-color:#254554}
.auth-session-conflict .session-conflict-current strong{color:#eaf4f7}
.auth-session-conflict .session-conflict-current small{color:#8ea6b2}
.auth-session-conflict .session-conflict-warning{background:#fff3e5;color:#9a6a2c}
.auth-session-conflict .session-conflict-warning strong{color:#8b5e27}

@media (max-height:760px) and (min-width:841px){
  #login-view.auth-universe{padding-top:26px;padding-bottom:24px;gap:38px}
  #login-view .hero-text{margin-bottom:12px}
  #login-view .hero-text h2{font-size:clamp(28px,2.45vw,38px)}
  #login-view .auth-campaign img{height:clamp(270px,calc(100dvh - 292px),450px)}
  #login-view .auth-campaign-note{margin-top:9px}
  #login-view .panel-header{margin-bottom:20px}
  #login-view .panel-header h1{font-size:30px}
  #login-view .panel-header p{margin-top:8px}
  #login-view .auth-form{gap:16px}
  #login-view .auth-panel-foot{margin-top:20px;padding-top:17px}
}

@media (max-height:650px) and (min-width:841px){
  #login-view .auth-campaign img{height:clamp(245px,calc(100dvh - 270px),350px)}
  #login-view .auth-campaign-note{display:none}
  #login-view .auth-campaign figcaption{padding-top:7px}
  #login-view .panel-eyebrow{margin-bottom:10px}
  #login-view .panel-header{margin-bottom:16px}
  #login-view .auth-input-wrap input,#login-view .auth-submit{height:46px}
  #login-view .auth-form{gap:13px}
  #login-view .auth-panel-foot{margin-top:15px;padding-top:14px}
}

@media (max-width:1100px) and (min-width:841px){
  #login-view.auth-universe{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:34px;padding-inline:34px}
  #login-view .auth-panel{padding-left:30px}
  #login-view .hero-text h2{font-size:34px}
  #login-view .auth-campaign img{border-radius:8px}
}

@media (max-width:840px){
  #login-view.auth-universe{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    height:100dvh;
    min-height:100svh;
    padding:72px 24px 28px;
    overflow:hidden;
  }
  #login-view .auth-universe-top{top:18px;right:20px}
  #login-view .hero-content{display:none}
  #login-view .auth-panel{
    grid-column:1;
    grid-row:1;
    height:100%;
    padding:0;
    border-left:0;
    align-items:center;
  }
  #login-view .panel-inner{max-width:420px}
  #login-view .panel-header h1{font-size:34px}
}

@media (max-width:460px){
  #login-view.auth-universe{padding-inline:18px}
  #login-view .auth-home-link{min-height:36px;padding-inline:12px;font-size:10.5px}
  #login-view .panel-header{margin-bottom:22px}
  #login-view .panel-header h1{font-size:31px}
  #login-view .auth-form{gap:17px}
  #login-view .auth-row-meta{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){#login-view *{animation:none!important;transition:none!important}}
