/* css/auth.css */

#auth {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.auth-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.auth-logo svg        { width:40px; height:40px; }
.auth-logo-img        { width:44px; height:44px; border-radius:10px; object-fit:cover; box-shadow:0 0 16px rgba(0,229,255,0.3); }
.auth-logo-text       { font-size:22px; }

.auth-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 36px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,229,255,0.05);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

/* Paneles */
.form-pane         { display: none; animation: fade-up 0.3s ease; }
.form-pane.active  { display: block; }

.form-title { font-size: 20px; text-align:center; margin-bottom:6px; }
.form-sub   { font-size:12px; color:var(--text2); text-align:center; margin-bottom:22px; font-family:'JetBrains Mono',monospace; }

/* Campos */
.field         { margin-bottom: 14px; }
.field label   { display:block; font-weight:600; font-size:11px; color:var(--text3); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.8px; font-family:'JetBrains Mono',monospace; }
.inp-wrap      { position:relative; }
.inp-wrap svg  { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none; }
.inp-wrap input {
  width:100%; padding:11px 12px 11px 38px;
  background:rgba(5,10,13,0.8);
  border:1px solid var(--border);
  color:var(--text); border-radius:6px;
  outline:none; font-family:'Inter',sans-serif; font-size:14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.inp-wrap input:focus {
  border-color:var(--cyan);
  box-shadow: 0 0 8px rgba(0,229,255,0.25);
}
.inp-wrap input::placeholder { color: var(--text3); }
.inp-hint { font-size:11px; color:var(--text3); margin-top:4px; font-family:'JetBrains Mono',monospace; }

/* Divider */
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.divider span { font-size:11px; color:var(--text3); font-family:'JetBrains Mono',monospace; }

/* Avatar picker */
.avatar-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px; }
.av-opt {
  width:100%; aspect-ratio:1; border-radius:10px;
  border:2px solid var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(0,0,0,0.4);
  transition:all var(--transition);
  overflow: hidden;
  padding: 0;
  position: relative;
}
.av-opt img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
  pointer-events:none;
}
.av-opt:hover   { border-color:var(--cyan); transform:scale(1.08); box-shadow:0 0 12px rgba(0,229,255,0.2); }
.av-opt.selected { border-color:var(--cyan); background:rgba(0,229,255,0.1); box-shadow:0 0 12px rgba(0,229,255,0.4); }
.av-opt.selected::after {
  content:'✓'; position:absolute; bottom:2px; right:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--cyan); color:#050a0d;
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,229,255,0.4);
}

/* Upload avatar option */
.av-opt-upload {
  border-style:dashed;
  border-color:rgba(0,229,255,0.3);
  background:rgba(0,229,255,0.04);
  flex-direction:column; gap:2px;
  color:var(--cyan);
}
.av-opt-upload:hover {
  border-color:var(--cyan);
  background:rgba(0,229,255,0.08);
}
.av-upload-label {
  font-size:9px; font-weight:700;
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}

/* Back link */
.back-link {
  background:none; border:none; color:var(--text3); font-size:12px;
  cursor:pointer; text-align:center; width:100%; display:block;
  margin-top:14px; font-family:'JetBrains Mono',monospace;
  transition: color var(--transition);
}
.back-link:hover { color:var(--cyan); }

/* ═══════════════════════════════════════════
   PANTALLA DE VERIFICACIÓN DE CORREO
═══════════════════════════════════════════ */
.verify-screen {
  text-align:center;
  animation: fade-up 0.4s ease;
}

.verify-icon-wrap {
  position:relative;
  width:80px; height:80px;
  margin:0 auto 20px;
}
.verify-icon {
  width:80px; height:80px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,229,255,0.1), rgba(142,44,249,0.1));
  border:2px solid rgba(0,229,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:36px;
  position:relative; z-index:2;
  animation: verify-bounce 2s ease infinite;
}
.verify-pulse {
  position:absolute; inset:-8px;
  border-radius:50%;
  border:2px solid rgba(0,229,255,0.2);
  animation: verify-ping 2s ease infinite;
}

@keyframes verify-bounce {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
@keyframes verify-ping {
  0% { transform:scale(1); opacity:0.6; }
  100% { transform:scale(1.4); opacity:0; }
}

.verify-title {
  font-size:22px; font-weight:800;
  color:var(--text);
  margin-bottom:8px;
}
.verify-sub {
  font-size:13px; color:var(--text2);
  font-family:'JetBrains Mono',monospace;
  margin-bottom:16px;
}

.verify-email-box {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(0,229,255,0.06);
  border:1px solid rgba(0,229,255,0.2);
  border-radius:8px;
  padding:12px 20px;
  margin-bottom:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:14px; font-weight:700;
  color:var(--cyan);
  box-shadow:0 0 16px rgba(0,229,255,0.08);
}

.verify-bonus {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, rgba(142,44,249,0.12), rgba(236,72,153,0.12));
  border:1px solid rgba(142,44,249,0.3);
  border-radius:20px;
  padding:8px 18px;
  margin-bottom:20px;
  font-size:12px; font-weight:700;
  color:#A78BFA;
  font-family:'JetBrains Mono',monospace;
}

.verify-steps {
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:24px;
  text-align:left;
}
.verify-step {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--surface2);
  border-radius:8px;
  border:1px solid var(--border);
  font-size:13px; color:var(--text2);
  font-family:'Inter',sans-serif;
  transition:border-color 0.2s;
}
.verify-step:hover {
  border-color:rgba(0,229,255,0.3);
}
.verify-step-num {
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), #0284C7);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#050a0d;
  flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
}

.verify-hint {
  font-size:11px; color:var(--text3);
  font-family:'JetBrains Mono',monospace;
  margin-top:14px; margin-bottom:4px;
}