/* ============================================================
   FLOWPARK — registro.css
   Overrides y extensiones sobre login.css para la vista Registro
   Requiere: flowpark-base.css + login.css cargados antes
   ============================================================ */

/* ── Desktop: scroll habilitado en body para que la card no se recorte ── */
.login-body {
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start;
}

/* ── Card más ancha para acomodar las 2 columnas del form ─── */
.reg-main {
  grid-template-columns: 1fr 600px;
  min-height: 100dvh;
  align-items: stretch;
}

.reg-card {
  padding: 2rem 2.5rem;
  justify-content: center;
  overflow-y: visible;
}

/* ── Filas de 2 columnas ─────────────────────────────────────── */
.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* ── Select personalizado ────────────────────────────────────── */
.reg-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
}

.reg-select-arrow {
  position: absolute;
  right: .65rem;
  font-size: 1rem;
  color: var(--color-muted);
  pointer-events: none;
  transition: color var(--ease);
}

.login-field__wrap:focus-within .reg-select-arrow {
  color: var(--color-primary);
}

/* ── Indicador de fuerza de contraseña ───────────────────────── */
.reg-strength {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .45rem;
}

.reg-strength__bars {
  display: flex;
  gap: .25rem;
  flex: 1;
}

.reg-strength__bar {
  height: 3px;
  flex: 1;
  border-radius: 99px;
  background: var(--color-outline-strong);
  transition: background .3s ease;
}

/* niveles */
.reg-strength__bar--weak   { background: var(--color-error); }
.reg-strength__bar--fair   { background: var(--color-warning); }
.reg-strength__bar--good   { background: var(--color-secondary); }
.reg-strength__bar--strong { background: var(--color-primary); }

.reg-strength__label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-width: 4.5rem;
  text-align: right;
  transition: color .3s ease;
}

/* ── Asterisco requerido ─────────────────────────────────────── */
.reg-required { color: var(--color-error); font-size: .7em; }

/* ── Label de términos (alineado al inicio para multilínea) ─── */
.reg-terms-label {
  align-items: flex-start !important;
}

.reg-terms-label .login-checkbox__box {
  margin-top: .12rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .reg-main { grid-template-columns: 1fr 500px; }
}

@media (max-width: 859px) {
  .reg-main { grid-template-columns: 1fr; align-items: flex-start; }
  .reg-card { padding: 2rem 1.75rem; min-height: 100dvh; border-left: none; justify-content: flex-start; overflow-y: visible; }
}

@media (max-width: 599px) {
  .reg-row  { grid-template-columns: 1fr; gap: .75rem; }
  .reg-card { padding: 1.75rem 1.25rem; }
}