:root {
  --bg1: #0a1016;
  --bg2: #0f1620;
  --panel: #0f1720;
  --border: #1b2836;
  --text: #eaf2ff;
  --muted: #bcd0ff;
  --cyan: #00e0ff;
  --purple: #7c4dff;
  --shadow: 0 28px 70px rgba(0, 0, 0, .6);
}

/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

/* ===== Fondo tipo "mapa estelar" (igual al registro) ===== */
body {
  color: var(--text);
  background: #0b1019;
}

/* Capa de fondo a pantalla completa */
.bg{
  position: fixed;
  inset: 0;
  z-index: -1; /* detrás de todo */
  background:
    linear-gradient(180deg, rgba(0,0,30,.70), rgba(0,0,40,.55)),
    url('/public/img/fondo-registro.png') center/cover no-repeat fixed;
  filter: saturate(1.05);
}

/* NAVBAR */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(10, 16, 22, .65);
  border-bottom: 1px solid #0f1a24;
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--cyan), #7ff2ff);
}

/* LAYOUT */
.wrap {
  min-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 8vh, 100px) 16px;
}

/* TARJETA DE LOGIN */
.login-card {
  position: relative;
  width: min(440px, 90vw);
  background: linear-gradient(180deg, #141b24, #111922);
  border: 1px solid #213041;
  border-radius: 20px;
  box-shadow: var(--shadow);
  text-align: left;
  --globo-size: clamp(180px, 24vw, 240px);
  padding: calc(var(--globo-size) * 0.9 + 56px) 22px 28px;
  margin-top: clamp(10px, 3vh, 50px);
}

/* GLOBO CON IMAGEN */
.logo-globe {
  position: absolute;
  left: 50%;
  top: clamp(60px, 8vh, 80px);
  transform: translate(-50%, -50%);
  width: var(--globo-size);
  height: var(--globo-size);
  border-radius: 50%;
  background: #0a1016;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 8px #0b1219;
  border: 1px solid #1f2e3d;
  overflow: hidden;
}

.logo-globe img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 14px rgba(0, 224, 255, .3));
  animation: spin 36s linear infinite;
}

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

/* TEXTOS */
.login-title {
  font-weight: 900;
  font-size: clamp(24px, 3.5vw, 30px);
  margin-bottom: 6px;
  text-align: center;
  color: #fff !important;
}

.login-sub {
  color: #d6e6ff;
  opacity: .95;
  margin-bottom: 16px;
  text-align: center;
}

/* CAMPOS */
.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #e7f1ff;
  font-size: .95rem;
}

.field input {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #233246;
  background: #0b1219;
  color: #f1f6ff;
  padding: 10px 12px;
  outline: none;
  font-size: .98rem;
  transition: border-color .2s, box-shadow .2s;
}

.field input::placeholder { color: #a8bed5; }

.field input:focus {
  border-color: #2ab8d3;
  box-shadow: 0 0 0 3px rgba(0, 224, 255, .22);
}

/* PASSWORD */
.password-box {
  position: relative;
  display: flex;
  align-items: center;
}
.password-box input { padding-right: 44px; }

.eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #203142;
  background: #0f1822;
  color: #b8d4e6;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .2s;
}
.eye:hover { background: #132131; color: #def2ff; }
.eye.on { color: #39e0ff; border-color: #184a5a; }

/* BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: .2s;
}
.btn-full { width: 100%; }

.btn-primary {
  background: linear-gradient(90deg, #12d6ff, #7c4dff);
  border: none;
  padding: 12px 14px;
  color: #fff;
  font-size: 1rem;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-ghost {
  background: transparent;
  color: #fff !important;
  border: 1px solid #fff;
  padding: 10px 12px;
  transition: all .3s;
}
.btn-ghost:hover {
  background: #fff;
  color: #0f1720 !important;
  border-color: #fff;
}

/* LINKS / OPCIONES */
.aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.link-muted { color: #cfe2ff; text-decoration: none; font-weight: 600; }
.link-muted:hover { color: #fff; }

/* ERROR MESSAGE */
.error-message {
  margin-top: 12px;
  background: #3a1e28;
  border: 1px solid #8a3b51;
  color: #ffe3e8;
  padding: 10px 12px;
  border-radius: 12px;
  display: none;
  font-weight: 700;
  font-size: .95rem;
}

/* FRASE FINAL */
.quote {
  text-align: center;
  color: #c7e6f5;
  opacity: .9;
  margin: 18px 0 0;
  font-style: italic;
}

/* FOOTER */
.footer {
  text-align: center;
  color: #9fb2c5;
  padding: 20px;
  border-top: 1px solid #0f1a24;
}
.footer small strong { color: var(--cyan); letter-spacing: .3px; }

/* RESPONSIVE */
@media (max-width: 480px) {
  .login-card {
    --globo-size: 150px;
    padding: calc(var(--globo-size) + 40px) 18px 16px;
    margin-top: 0;
  }
  .logo-globe { top: 65px; }
  .login-title { margin-top: 12px; }
}

@media (min-width: 1200px) {
  .login-card {
    --globo-size: 220px;
    padding: calc(var(--globo-size) * 0.8 + 60px) 24px 30px;
    margin-top: 54px;
  }
  .logo-globe { top: 100px; }
}