/* Formularios de login / inscripción (#inscripcion). Todo está acotado a .reg-form para no pisar otros estilos. */
.reg-form .hidden { display: none !important; }

.reg-form__title {
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 var(--space-md);
}

.reg-form .recuadro {
  background: #fff;
  color: var(--color-graphite);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
  padding: var(--space-lg);
}

.reg-form .recuadro label { margin-bottom: .35rem; }
.reg-form .color1 { color: var(--color-navy); }
.reg-form .text-900 { font-weight: 700; }

.reg-form .single-input {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  min-height: 44px;
}
.reg-form .single-input:focus {
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 .15rem rgba(0, 169, 206, .25);
}
.reg-form .single-input.error { border-color: #c71b2b; }

.reg-form .genric-btn.btn {
  background: var(--color-cyan);
  border: 0;
  border-radius: 999px;
  color: #fff;
  min-width: 180px;
  cursor: pointer;
  transition: background var(--transition);
}
.reg-form .genric-btn.btn:hover { background: var(--color-navy-mid); }
.reg-form .genric-btn .spinner-border { color: var(--color-cyan); }

#mensajeInscripcion .main_title,
#message span,
#inscripcionForm #error { color: #c71b2b; text-align: center; display: block; }
#mensajeInscripcion .main_title { color: #fff; }

.reg-form .loginToggle {
  display: block;
  margin-top: var(--space-sm);
  text-align: center;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}
.reg-form .loginToggle:hover { color: var(--color-cyan-soft); }

/* Radios personalizados */
.reg-form .checkContainer {
  display: block;
  position: relative;
  padding-left: 32px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.reg-form .checkContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.reg-form .checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 2px solid var(--color-navy);
  border-radius: 50%;
  background: #fff;
}
.reg-form .checkContainer input:checked ~ .checkmark { background: var(--color-navy); }
.reg-form .checkContainer input:checked ~ .checkmark::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}