@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');
@import url('/estilo-hv.css?v=d143');
/* ── HV Academy — Auth Base Styles ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #070D1A;
  --navy2:  #0C1628;
  --navy3:  #0F1E3A;
  --blue:   #1E40AF;
  --cyan:   #38BDF8;
  --cyan2:  #7DD3FC;
  --silver: #C8D8F0;
  --white:  #EEF4FF;
  --muted:  #7A90B0;
  --error:  #FF6B6B;
  --success:#4ADE80;
}

html, body {
  min-height: 100dvh;
  background: var(--navy);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

#canvas-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── LAYOUT ── */
.auth-screen {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top),24px) 24px max(env(safe-area-inset-bottom),24px);
}

.auth-card {
  width: 100%; max-width: 420px;
  background: rgba(12,22,40,.85);
  border: 1px solid rgba(56,189,248,.12);
  border-radius: 24px;
  padding: 32px 24px;
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(7,13,26,.8);
}

/* ── LOGO ── */
.auth-logo {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; margin-bottom: 28px; text-align: center;
}
.auth-logo img {
  width: 80px;
  filter: drop-shadow(0 0 12px rgba(56,189,248,.6));
}
.auth-logo-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
  margin-top: 6px;
}

/* ── HEADINGS ── */
.auth-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem; font-weight: 900;
  line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.auth-title em { font-style: normal; color: var(--cyan); }
.auth-sub {
  font-size: .85rem; color: var(--muted); margin-bottom: 24px; line-height: 1.5;
}

/* ── FORM ── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--silver);
}
.field input, .field select {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  border: 1px solid rgba(56,189,248,.15);
  background: rgba(7,13,26,.6);
  color: var(--white); font-family: 'Inter', sans-serif; font-size: .92rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.field input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus {
  border-color: rgba(56,189,248,.5);
  box-shadow: 0 0 0 3px rgba(56,189,248,.08);
}
.field select { cursor: pointer; }
.field select option { background: #0C1628; color: var(--white); }

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ── INPUT ICON WRAPPER ── */
.input-wrap { position: relative; }
.input-wrap input { padding-left: 40px; }
.input-wrap .iicon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.input-wrap .toggle-pw {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 0; display: flex; align-items: center;
}
.input-wrap .toggle-pw:hover { color: var(--cyan); }

/* ── BUTTONS ── */
.btn-primary {
  display: block; width: 100%; padding: 15px; border-radius: 12px;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #38BDF8 100%);
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-size: .95rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; text-decoration: none;
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s; margin-top: 8px;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
}
.btn-primary:active { transform: scale(.97); }

.btn-ghost {
  display: block; width: 100%; padding: 13px; border-radius: 12px;
  border: 1px solid rgba(56,189,248,.2); background: transparent;
  color: var(--cyan2); font-family: 'Montserrat', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; text-decoration: none;
  cursor: pointer; transition: background .2s; margin-top: 10px;
}
.btn-ghost:hover { background: rgba(56,189,248,.07); }

/* ── LINKS ── */
.auth-link-row {
  text-align: center; margin-top: 20px;
  font-size: .82rem; color: var(--muted);
}
.auth-link-row a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.auth-link-row a:hover { text-decoration: underline; }

/* ── DIVIDER ── */
.or-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--muted); font-size: .75rem;
}
.or-divider::before, .or-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(56,189,248,.1);
}

/* ── ERROR/SUCCESS MSG ── */
.msg {
  display: none; padding: 10px 14px; border-radius: 10px;
  font-size: .8rem; margin-bottom: 14px; line-height: 1.4;
}
.msg.error   { background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.25); color: #FF8F8F; display: block; }
.msg.success { background: rgba(74,222,128,.1);  border: 1px solid rgba(74,222,128,.25);  color: #4ADE80; display: block; }

/* ── Computadora (D140) ──
   Las páginas son una columna de celular: en una laptop la tarjeta quedaba más alta que la pantalla y el botón
   para seguir (Continuar, Restablecer contraseña…) se escondía debajo. Desde 900 px de ancho el registro pone sus
   campos en dos columnas y, en pantallas bajas, todo va más compacto. En el celular no cambia nada. */
@media (min-width: 900px) {
  .auth-card:has(#step-1) { max-width: 720px; }
  #step-1.active { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  #step-1.active > :not(.field) { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-height: 900px) {
  .auth-screen { padding-top: 16px; padding-bottom: 16px; }
  .auth-card { padding: 22px 28px; }
  .auth-logo { margin-bottom: 12px; }
  .auth-logo img { width: 64px; }
  .auth-title { margin-bottom: 4px; }
  .auth-sub { margin-bottom: 12px; }
  .field { margin-bottom: 10px; gap: 4px; }
  .field input, .field select { padding-top: 10px; padding-bottom: 10px; }
  .btn-primary { padding: 12px; }
}