/* ===== Login scoped ===== */
:where(.auth-page){
  --bg: #0d0f12;
  --card: #15181d;
  --card-2: #1a1f26;
  --text: #e9edf2;
  --muted: #99a3ad;
  --border: #262b33;
  --primary: #ffc20e;
  --primary-600: #e2aa06;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  color: var(--text);
}

/* Card */
.auth-page .auth-card{
  width: min(520px, 92vw);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
  position: relative; 
  overflow: hidden;
}
.auth-page .auth-card::before{
  content:""; 
  position:absolute; 
  inset:-1px; 
  border-radius:19px; 
  padding:1px;
  background: radial-gradient(1200px 500px at 100% 0, rgba(255,194,14,.14), transparent 40%),
              radial-gradient(900px 500px at 0 100%, rgba(255,194,14,.10), transparent 40%);
  pointer-events:none;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
}

/* Head */
.auth-page .auth-head{ margin-bottom:10px; }
.auth-page .auth-head h2{ margin:0 0 6px; font-size: clamp(22px,2.6vw,28px); }
.auth-page .auth-sub{ margin:0 0 6px; color:var(--muted); }

/* Alert */
.auth-page .alert{
  display:flex; 
  gap:10px; 
  align-items:center;
  background: rgba(255,77,77,.08); 
  color:#ffd3d3;
  border:1px solid rgba(255,77,77,.25);
  border-radius:12px; 
  padding:10px 12px; 
  margin:12px 0 6px;
}
.auth-page .alert-dot{ 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:#ff4d4d; 
  box-shadow:0 0 0 3px rgba(255,77,77,.15); 
}

/* Form */
.auth-page .auth-form{ 
  margin-top:10px; 
  display:flex; 
  flex-direction:column; 
  gap:14px; 
}
.auth-page .field-label{ 
  display:block; 
  color:var(--muted); 
  font-size:.9rem; 
  margin:0 0 6px 2px; 
}

.auth-page .input-wrap{
  position:relative; 
  display:flex; 
  align-items:center;
  background:#0f1216; 
  border:1px solid var(--border);
  border-radius:12px; 
  padding:0 12px; 
  transition:.2s;
}
.auth-page .input-wrap:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(255,194,14,.10);
}
.auth-page .input-wrap input{
  outline:none; 
  border:none; 
  background:transparent; 
  color:var(--text);
  height:44px; 
  width:100%; 
  font-size:1rem;
}
.auth-page .input-icon{ 
  font-size:1rem; 
  color:var(--muted); 
  margin-left:6px; 
}

.auth-page .icon-btn{
  border:none; 
  background:transparent; 
  color:var(--muted);
  font-size:18px; 
  line-height:1; 
  padding:6px 8px; 
  margin-right:-6px;
  border-radius:8px; 
  cursor:pointer; 
  transition:.2s;
}
.auth-page .icon-btn:hover{ 
  background:rgba(255,255,255,.04); 
  color:var(--text); 
}

.auth-page .row{ display:flex; gap:8px; align-items:center; }
.auth-page .between{ justify-content:space-between; }
.auth-page .muted-sm{ color:var(--muted); font-size:.9rem; }
.auth-page .chk{ display:flex; align-items:center; gap:8px; user-select:none; }
.auth-page .chk input{ accent-color:var(--primary); }

.auth-page .link{ color:var(--primary); text-decoration:none; font-size:.9rem; }
.auth-page .link:hover{ text-decoration:underline; }

/* Botón */
.auth-page .auth-submit{
  margin-top:6px; 
  height:46px;
  border:1px solid #3a2a00;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color:#1b1300; 
  font-weight:700; 
  border-radius:12px; 
  cursor:pointer;
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px;
  box-shadow:0 8px 24px rgba(255,194,14,.25), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .06s, box-shadow .2s, filter .2s;
}
.auth-page .auth-submit:hover{ 
  filter:brightness(.98); 
  box-shadow:0 10px 30px rgba(255,194,14,.3), inset 0 1px 0 rgba(255,255,255,.4); 
}
.auth-page .auth-submit:active{ transform: translateY(1px); }
.auth-page .btn-dot{ 
  width:8px; 
  height:8px; 
  border-radius:50%; 
  background:#1b1300; 
  box-shadow:0 0 0 3px rgba(27,19,0,.18); 
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;   /* la empuja hacia arriba */
  justify-content: center;   /* sigue centrado horizontalmente */
  padding-top: 80px;         /* ajusta este valor según cuánto la quieras subir */
}


/* Responsive */
@media (max-width:420px){
  .auth-page .auth-card{ padding:22px; }
  .auth-page .auth-sub{ font-size:.88rem; }
}