/* login.css — depende de css/styles.css (variables y reset ya definidos ahí) */

html, body.login-page{ height:100%; }
body.login-page{ margin:0; }

.login-split{
  min-height:100vh;
  display:flex;
  position:relative;
  z-index:1;
}

/* ---------- PANEL IZQUIERDO ---------- */
.login-left{
  flex:1;
  background:var(--bg-elev);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px 56px;
  position:relative;
  overflow:hidden;
}
.login-left::after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  right:-220px; bottom:-220px;
  background:radial-gradient(circle, rgba(201,162,39,0.10), transparent 70%);
  pointer-events:none;
}

.quote-block{
  max-width:440px;
  position:relative;
  z-index:1;
}
.quote-mark{
  font-family:'IBM Plex Mono', monospace;
  font-size:48px;
  color:var(--accent);
  opacity:0.6;
  margin:0 0 8px;
  line-height:1;
}
.quote-text{
  font-size:26px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 18px;
  transition:opacity .45s ease;
  min-height:70px;
}
.quote-attr{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--text-faint);
  margin:0;
}

.login-mini-card{
  width:220px;
  margin-top:32px;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.7);
}

.login-perks{ margin-top:32px; }
.login-perks-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:14px;
}
.login-perks ul{ list-style:none; padding:0; margin:0; }
.login-perks li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:var(--text-dim);
  padding:8px 0;
}
.login-perks svg{ color:var(--accent); flex-shrink:0; margin-top:2px; }

.login-left-foot{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-faint);
  position:relative; z-index:1;
}

/* ---------- PANEL DERECHO ---------- */
.login-right{
  flex:1;
  display:flex;
  flex-direction:column;
}
.login-right-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 44px 0;
}
.back-link{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--text-faint);
  text-decoration:none;
}
.back-link:hover{ color:var(--text-dim); }
.login-right-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 40px 64px;
}

.login-form-wrap{ width:100%; max-width:380px; }

.login-form-head{ margin-bottom:28px; }
.login-form-head h1{
  font-size:24px; margin:0 0 8px; font-weight:700; letter-spacing:-0.01em;
}
.login-form-head p{ font-size:14px; color:var(--text-dim); margin:0; }

.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:8px;
}
.field input{
  width:100%;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:8px;
  padding:13px 14px;
  color:var(--text);
  font-family:'Archivo', sans-serif;
  font-size:14.5px;
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.field input::placeholder{ color:var(--text-faint); }
.field input:focus{ border-color:var(--accent); background:var(--bg-elev-2); }

.field input.key-input{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.09em;
  text-transform:uppercase;
  font-size:14px;
}
.field .hint{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--text-faint);
  margin-top:7px;
}

.login-submit{ margin-top:8px; margin-bottom:16px; }

.login-note{
  text-align:center;
  font-size:12px;
  color:var(--text-faint);
  line-height:1.5;
  margin:0 0 22px;
}

.login-foot{
  text-align:center;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
  font-size:13px;
  color:var(--text-faint);
}
.login-foot a{ color:var(--accent-2); text-decoration:none; }
.login-foot a:hover{ text-decoration:underline; }

.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  color:var(--text-dim);
  font-size:13px;
  padding:12px 18px;
  border-radius:10px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.7);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:100;
  max-width:90vw;
  text-align:center;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 900px){
  .login-split{ flex-direction:column; }
  .login-left{
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:32px 28px;
    min-height:auto;
  }
  .quote-mark{ font-size:34px; }
  .quote-text{ font-size:19px; min-height:0; }
  .login-mini-card{ display:none; }
  .login-perks{ margin-top:22px; }
  .login-left-foot{ display:none; }
  .login-right-top{ padding:20px 24px 0; }
  .login-right-body{ padding:24px 24px 48px; }
}